update

2 years ago · 5f19e3fb0e
1 changed files with 26 additions and 2 deletions
--- 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,