From 5f19e3fb0e98f29c824cc0ef746a4717894ff536 Mon Sep 17 00:00:00 2001
From: guy <guy@finereport.com>
Date: Wed, 19 Oct 2022 19:13:13 +0800
Subject: [PATCH] update

---
 examples/useContext.html | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)
diff --git a/examples/useContext.html b/examples/useContext.html
index 56c78b2ce..2e736c377 100644
--- a/examples/useContext.html
+++ b/examples/useContext.html
@@ -5,8 +5,14 @@
     <!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
     <script src="../dist/2.0/fineui.js"></script> -->
     <link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css"/>
-    <script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
+    <!-- <script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script> -->
+    <script src="http://localhost:9001/fineui.js"></script>
 </head>
+<style>
+.my-parent {
+    --css-scale: 1;
+}
+</style>
 <body>
 <div id="wrapper"></div>
 <script>
@@ -14,7 +20,8 @@
     var Model = BI.inherit(BI.Model, {
         state: function () {
             return {
-                expand: false
+                expand: false,
+                cssScale: 2.0
             };
         },
         childContext: ["text"],
@@ -33,6 +40,18 @@
     });
     BI.model("demo.model", Model);
 
+    var oldFormat = BI.pixFormat;
+    BI.pixFormat = function (pix, border) {
+        var context = BI.useContext("cssScale");
+        if (!context) {
+            return oldFormat.apply(this, arguments);
+        }
+        if (!BI.isNumber(pix)) {
+            return pix;
+        }
+        return `calc(var(--css-scale) * ${pix}px - ${border || 0}})`;
+    }
+
     var Child = BI.inherit(BI.Widget, {
         render: function () {
             var label;
@@ -45,6 +64,7 @@
             // });
             return {
                 type: "bi.label",
+                height: 30,
                 ref: function (_ref) {
                     label = _ref;
                 },
@@ -60,6 +80,9 @@
     BI.shortcut("demo.child", Child);
 
     var Widget = BI.inherit(BI.Widget, {
+        props: {
+            baseCls: "my-parent"
+        },
         _store: function () {
             return BI.Models.getModel("demo.model");
         },
@@ -67,6 +90,7 @@
             var child;
             var store = BI.useStore();
             return function () {
+                this.element[0].style.setProperty('--css-scale', store.model.cssScale);
                 return {
                     type: "bi.vertical",
                     vgap: 20,
