@shijiu/jsview-vue 1.9.888 → 1.9.921

package/utils/JsViewVueWidget/BrowserDebugWidget/BrowserQrcode.vue

@@ -1,164 +1,185 @@
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import QRCode from "qr.js";
 
-export default {
-    props: {
-        value: String,
-        size: Number,
-        fgColor: {
-            type: String,
-            default: "#000000"
-        },
-        bgColor: {
-            type: String,
-            default: "#ffffff"
-        },
-        level: {
-            type: String, // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
-            default: "L"
-        },
-        imageSettings: Object
-    },
-    setup() {
-        return {
-            imageStyle: null,
-            qrcodeRes: null,
+const props = defineProps({
+  value: String,
+  size: Number,
+  fgColor: {
+    type: String,
+    default: "#000000",
+  },
+  bgColor: {
+    type: String,
+    default: "#ffffff",
+  },
+  level: {
+    type: String, // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
+    default: "L",
+  },
+  imageSettings: Object,
+});
+
+const convertStr = (str) => {
+  let out = "";
+  for (let i = 0; i < str.length; i++) {
+    let charcode = str.charCodeAt(i);
+    if (charcode < 0x0080) {
+      out += String.fromCharCode(charcode);
+    } else if (charcode < 0x0800) {
+      out += String.fromCharCode(0xc0 | (charcode >> 6));
+      out += String.fromCharCode(0x80 | (charcode & 0x3f));
+    } else if (charcode < 0xd800 || charcode >= 0xe000) {
+      out += String.fromCharCode(0xe0 | (charcode >> 12));
+      out += String.fromCharCode(0x80 | ((charcode >> 6) & 0x3f));
+      out += String.fromCharCode(0x80 | (charcode & 0x3f));
+    } else {
+      // This is a surrogate pair, so we'll reconsitute the pieces and work
+      // from that
+      i++;
+      charcode =
+        0x10000 + (((charcode & 0x3ff) << 10) | (str.charCodeAt(i) & 0x3ff));
+      out += String.fromCharCode(0xf0 | (charcode >> 18));
+      out += String.fromCharCode(0x80 | ((charcode >> 12) & 0x3f));
+      out += String.fromCharCode(0x80 | ((charcode >> 6) & 0x3f));
+      out += String.fromCharCode(0x80 | (charcode & 0x3f));
+    }
+  }
+  return out;
+};
+const generatePath = (modules, margin = 0) => {
+  const ops = [];
+  modules.forEach((row, y) => {
+    let start = null;
+    row.forEach((cell, x) => {
+      if (!cell && start !== null) {
+        // M0 0h7v1H0z injects the space with the move and drops the comma,
+        // saving a char per operation
+        ops.push(
+          `M${start + margin} ${y + margin}h${x - start}v1H${start + margin}z`
+        );
+        start = null;
+        return;
+      }
+
+      // end of row, clean up or skip
+      if (x === row.length - 1) {
+        if (!cell) {
+          // We would have closed the op above already so this can only mean
+          // 2+ light modules in a row.
+          return;
+        }
+        if (start === null) {
+          // Just a single dark module.
+          ops.push(`M${x + margin},${y + margin} h1v1H${x + margin}z`);
+        } else {
+          // Otherwise finish the current line.
+          ops.push(
+            `M${start + margin},${y + margin} h${x + 1 - start}v1H${
+              start + margin
+            }z`
+          );
         }
-    },
-    created() {
-        this.qrcodeRes = this.renderQrcode();
-    },
-    methods: {
-        convertStr(str) {
-            let out = "";
-            for (let i = 0; i < str.length; i++) {
-                let charcode = str.charCodeAt(i);
-                if (charcode < 0x0080) {
-                out += String.fromCharCode(charcode);
-                } else if (charcode < 0x0800) {
-                out += String.fromCharCode(0xc0 | (charcode >> 6));
-                out += String.fromCharCode(0x80 | (charcode & 0x3f));
-                } else if (charcode < 0xd800 || charcode >= 0xe000) {
-                out += String.fromCharCode(0xe0 | (charcode >> 12));
-                out += String.fromCharCode(0x80 | ((charcode >> 6) & 0x3f));
-                out += String.fromCharCode(0x80 | (charcode & 0x3f));
-                } else {
-                // This is a surrogate pair, so we'll reconsitute the pieces and work
-                // from that
-                i++;
-                charcode =
-                    0x10000 + (((charcode & 0x3ff) << 10) | (str.charCodeAt(i) & 0x3ff));
-                out += String.fromCharCode(0xf0 | (charcode >> 18));
-                out += String.fromCharCode(0x80 | ((charcode >> 12) & 0x3f));
-                out += String.fromCharCode(0x80 | ((charcode >> 6) & 0x3f));
-                out += String.fromCharCode(0x80 | (charcode & 0x3f));
-                }
-            }
-            return out;
-        },
-        generatePath(modules, margin = 0) {
-            const ops = [];
-            modules.forEach((row, y) => {
-                let start = null;
-                row.forEach((cell, x) => {
-                if (!cell && start !== null) {
-                    // M0 0h7v1H0z injects the space with the move and drops the comma,
-                    // saving a char per operation
-                    ops.push(
-                    `M${start + margin} ${y + margin}h${x - start}v1H${start + margin}z`
-                    );
-                    start = null;
-                    return;
-                }
+        return;
+      }
 
-                // end of row, clean up or skip
-                if (x === row.length - 1) {
-                    if (!cell) {
-                    // We would have closed the op above already so this can only mean
-                    // 2+ light modules in a row.
-                    return;
-                    }
-                    if (start === null) {
-                    // Just a single dark module.
-                    ops.push(`M${x + margin},${y + margin} h1v1H${x + margin}z`);
-                    } else {
-                    // Otherwise finish the current line.
-                    ops.push(
-                        `M${start + margin},${y + margin} h${x + 1 - start}v1H${
-                        start + margin
-                        }z`
-                    );
-                    }
-                    return;
-                }
+      if (cell && start === null) {
+        start = x;
+      }
+    });
+  });
+  return ops.join("");
+};
+const getImageSettings = (props) => {
+  // const { imageSettings, size } = props;
+  const imageSettings = props.imageSettings;
+  const size = props.size;
+  if (!imageSettings) {
+    return null;
+  }
+  const w = imageSettings.width;
+  const h = imageSettings.height;
+  const x = !imageSettings.x ? size / 2 - w / 2 : imageSettings.x;
+  const y = !imageSettings.y ? size / 2 - h / 2 : imageSettings.y;
 
-                if (cell && start === null) {
-                    start = x;
-                }
-                });
-            });
-            return ops.join("");
-        },
-        getImageSettings(props) {
-            // const { imageSettings, size } = props;
-            const imageSettings = props.imageSettings;
-            const size = props.size;
-            if (!imageSettings) {
-                return null;
-            }
-            const w = imageSettings.width;
-            const h = imageSettings.height;
-            const x = !imageSettings.x ? size / 2 - w / 2 : imageSettings.x;
-            const y = !imageSettings.y ? size / 2 - h / 2 : imageSettings.y;
+  return { x, y, h, w };
+};
+const renderQrcode = () => {
+  const qrcode = QRCode(
+      convertStr(props.value),
+      {
+          errorCorrectLevel: QRCode.ErrorCorrectLevel[props.level]
+      });
 
-            return { x, y, h, w };
-        },
-        renderQrcode() {
-            const qrcode = QRCode(
-                this.convertStr(this.value),
-                {
-                    errorCorrectLevel: QRCode.ErrorCorrectLevel[this.level]
-                });
+  const cells = qrcode.modules;
+  if (cells === null) {
+    return null;
+  }
 
-            const cells = qrcode.modules;
-            if (cells === null) {
-                return null;
-            }
+  const margin = 2;
+  const numCells = cells.length + margin * 2;
+  const propsData = {
+    value: props.value,
+    size: props.size,
+    level: props.level,
+    bgColor: props.bgColor,
+    fgColor: props.fgColor,
+    imageSettings: props.imageSettings,
+  };
+  const calculatedImageSettings = getImageSettings(propsData);
+  if (props.imageSettings) {
+    imageStyle = {
+      backgroundImage: `url(${props.imageSettings.src})`,
+      height: calculatedImageSettings.h,
+      width: calculatedImageSettings.w,
+      left: calculatedImageSettings.x + margin,
+      top: calculatedImageSettings.y + margin,
+    };
+  } else {
+    imageStyle = {};
+  }
+  const fgPath = generatePath(cells, margin);
+  return { numCells, fgPath };
+};
 
-            const margin = 2;
-            const numCells = cells.length + margin * 2;
-            const propsData = {value: this.value, size: this.size, level: this.level, bgColor: this.bgColor, fgColor: this.fgColor, imageSettings: this.imageSettings,}
-            const calculatedImageSettings = this.getImageSettings(propsData);
-            if (this.imageSettings) {
-                this.imageStyle = {
-                    backgroundImage: `url(${this.imageSettings.src})`,
-                    height: calculatedImageSettings.h,
-                    width: calculatedImageSettings.w,
-                    left: calculatedImageSettings.x + margin,
-                    top: calculatedImageSettings.y + margin
-                }
-            } else {
-                this.imageStyle = {}
-            }
-            const fgPath = this.generatePath(cells, margin);
-            return {numCells, fgPath};
-        }
-    },
-}
+const svgRoot = ref(null);
+let imageStyle = null;
+const qrcodeRes = renderQrcode();
+
+onMounted(() => {
+  svgRoot.value.jsvGetProxyView().RegisterOnProxyReady(() => {
+    const root = svgRoot.value.jsvGetProxyView().HtmlGetElement();
+    const doc = window.originDocument;
+    const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("type", "qrcode");
+    svg.setAttribute("shapeRendering", "crispEdges");
+    svg.setAttribute("height", props.size);
+    svg.setAttribute("width", props.size);
+    svg.setAttribute(
+      "viewBox",
+      "0 0 " + qrcodeRes.numCells + " " + qrcodeRes.numCells
+    );
+
+    const path1 = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttribute("fill", props.bgColor);
+    path1.setAttribute(
+      "d",
+      "M0,0 h" + qrcodeRes.numCells + "v" + qrcodeRes.numCells + "H0z"
+    );
+
+    const path2 = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+    path2.setAttribute("fill", props.fgColor);
+    path2.setAttribute("d", qrcodeRes.fgPath);
+
+    svg.appendChild(path1);
+    svg.appendChild(path2);
+
+    root.appendChild(svg);
+  });
+});
 </script>
 
 <template>
-    <div>
-        <jsve-svg
-            :type="'qrcode'"
-            :shapeRendering="'crispEdges'"
-            :height="size"
-            :width="size"
-            :viewBox="'0 0 ' + qrcodeRes.numCells + ' ' + qrcodeRes.numCells"
-        >
-            <jsve-path :fill="bgColor" :d="'M0,0 h' + qrcodeRes.numCells + 'v' + qrcodeRes.numCells + 'H0z'" />
-            <jsve-path :fill="fgColor" :d="qrcodeRes.fgPath" />
-        </jsve-svg>
-        <div :style="imageStyle"></div>
-    </div>
+  <div ref="svgRoot" :style="{ width: 100, height: 100 }"></div>
+  <div :style="imageStyle"></div>
 </template>

package/utils/JsViewVueWidget/BrowserDebugWidget/BrowserSpray.vue

@@ -41,7 +41,7 @@ export default {
       this.sprayStyle,
       this.pointRes,
       viewSize,
-      this.$refs.element
+      this.$refs.element.jsvGetProxyView()
     );
   },
   beforeUnmount() {

package/utils/JsViewVueWidget/BrowserDebugWidget/BrowserTextureAnim.vue

@@ -1,17 +1,12 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-02-08 09:29:17
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-24 10:15:37
+ * @LastEditTime: 2023-02-21 10:51:22
  * @Description: file content
 -->
 <script>
-import { ref } from "vue";
-import { getKeyFramesGroup } from "../../JsViewVueTools/JsvDynamicKeyFrames";
-
 const DECORATE_BORDER_RADIUS = "BroderRaidus";
 const DECORATE_NINEPATCH_ALPHA_MIX = "NinePatchAlphaMix";
-
 const TexAlignAnchor = {
   LEFT_TOP: 1,
   CENTER_TOP: 2,
@@ -75,7 +70,7 @@ export default {
     left: Number,
     width: Number,
     height: Number,
-    borderRadius: String,
+    borderRadius: [String, Number],
     decorate: Object,
     animation: String,
     duration: Number,
@@ -102,17 +97,12 @@ export default {
       type: Object,
     },
   },
-  setup() {
-    let styleShell = ref({})
-    // 此处异步import为了处理在fadoration中导致的两个js互相import而加载异常问题。
-    const load = async function () {
-      styleShell = getKeyFramesGroup();
-    }
-    load();
+  setup(props) {
     return {
-      styleShell,
       animName: "browser-texture-anim-" + TOKEN++,
       animDiv: null,
+      clipDiv: null,
+      imgDiv: null,
       watcherHandlerList: [],
     };
   },
@@ -163,13 +153,14 @@ export default {
     },
     maskStyle() {
       if (this.borderRadius) {
+        const radiusObj = this._readRadius(this.borderRadius);
         return {
           left: this.left + "px",
           top: this.top + "px",
-          borderRadius: this.borderRadius,
+          borderRadius: `${radiusObj.topLeft}px ${radiusObj.topRight}px ${radiusObj.bottomLeft}px ${radiusObj.bottomRight}px`,
           width: this.width + "px",
           height: this.height + "px",
-          overflow: 'hidden',
+          overflow: "hidden",
         };
       } else if (this.decorate) {
         if (this.decorate.type == DECORATE_NINEPATCH_ALPHA_MIX) {
@@ -207,80 +198,126 @@ export default {
             borderRadius: `${this.decorate.topLeft}px ${this.decorate.topRight}px ${this.decorate.bottomRight}px ${this.decorate.bottomLeft}`,
             width: this.width + "px",
             height: this.height + "px",
-            overflow: 'hidden',
+            overflow: "hidden",
           };
         }
-      }
-      return {
+      } else {
+        return {
           left: this.left + "px",
           top: this.top + "px",
           width: this.width + "px",
           height: this.height + "px",
-          overflow: 'hidden',
+          overflow: "hidden",
         };
+      }
     },
   },
   methods: {
+    _readRadius(setting) {
+      if (typeof setting == "number") {
+        return {
+          type: DECORATE_BORDER_RADIUS,
+          topLeft: setting,
+          topRight: setting,
+          bottomRight: setting,
+          bottomLeft: setting,
+        };
+      } else if (typeof setting == "string" && setting.length > 0) {
+        const pattern = /\d+/g;
+        let match = setting.match(pattern);
+        if (match.length > 0) {
+          let top_left = match[0];
+          let top_right = match.length > 1 ? match[1] : top_left;
+          return {
+            type: DECORATE_BORDER_RADIUS,
+            topLeft: top_left,
+            topRight: top_right,
+            bottomRight: match.length > 2 ? match[2] : top_left,
+            bottomLeft: match.length > 3 ? match[3] : top_right,
+          };
+        }
+      }
+      return null;
+    },
     start() {
       if (this.animDiv && this.animation) {
         this.animDiv.style.animation = this.animSet;
       }
     },
+
+    insertKeyframe(animDefine) {
+      const index = document.styleSheets[0].cssRules.length;
+      document.styleSheets[0].insertRule(animDefine, index);
+    },
+    removeKeyframe(animName) {
+      const styleSheetRef = document.styleSheets[0];
+      const cssRulesRef = styleSheetRef.cssRules;
+      // 对CssRules进行删除操作，倒序轮询
+      for (let i = cssRulesRef.length - 1; i >= 0; i--) {
+        if (cssRulesRef[i].name === animName) {
+          styleSheetRef.deleteRule(i);
+          break;
+        }
+      }
+    },
   },
   mounted() {
     if (this.animation) {
-      this.styleShell.insertRule(
-        "@keyframes " + this.animName + " " + this.animation
-      );
+      //此控件直接操作dom因此不走JsvDynamicKeyframes, 直接通过dom添加keyframes
+      this.insertKeyframe("@keyframes " + this.animName + " " + this.animation)
     }
-    //绕过 jsview 对document 的 hook
-    const clipDiv = window.originDocument.createElement("div");
-    Object.assign(clipDiv.style, this.maskStyle);
 
-    const textureLayout = this.textureLayout;
-    this.animDiv = window.originDocument.createElement("div");
-    Object.assign(this.animDiv.style, textureLayout);
-    this.animDiv.onanimationend = () => {
-      this.animDiv.style.animation = null;
-      this.onAnimationEnd?.();
-    };
+    this.$refs.root.jsvGetProxyView().RegisterOnProxyReady(() => {
+      const root = this.$refs.root.jsvGetProxyView().HtmlGetElement();
+      //绕过 jsview 对document 的 hook
+      this.clipDiv = window.originDocument.createElement("div");
+      Object.assign(this.clipDiv.style, this.maskStyle);
+
+      const textureLayout = this.textureLayout;
+      this.animDiv = window.originDocument.createElement("div");
+      Object.assign(this.animDiv.style, textureLayout);
+      this.animDiv.onanimationend = () => {
+        this.animDiv.style.animation = null;
+        this.onAnimationEnd?.();
+      };
 
-    const imgDiv = window.originDocument.createElement("div");
-    imgDiv.style.width = textureLayout.width;
-    imgDiv.style.height = textureLayout.height;
-    imgDiv.style.backgroundImage = `url(${this.src})`;
-    imgDiv.style.transform = this.transform;
-    imgDiv.style.transformOrigin = this.transformOrigin;
+      this.imgDiv = window.originDocument.createElement("div");
+      this.imgDiv.style.width = textureLayout.width;
+      this.imgDiv.style.height = textureLayout.height;
+      this.imgDiv.style.backgroundImage = `url(${this.src})`;
+      this.imgDiv.style.transform = this.transform;
+      this.imgDiv.style.transformOrigin = this.transformOrigin;
 
-    this.animDiv.appendChild(imgDiv);
-    clipDiv.appendChild(this.animDiv);
-    this.$refs.root.jsvGetProxyView(true).Element.appendChild(clipDiv);
+      this.animDiv.appendChild(this.imgDiv);
+      this.clipDiv.appendChild(this.animDiv);
+      root.appendChild(this.clipDiv);
+    });
 
     this.watcherHandlerList.push(
       this.$watch("left", (newValue) => {
-        clipDiv.style.left = newValue + "px";
+        this.clipDiv.style.left = newValue + "px";
       })
     );
     this.watcherHandlerList.push(
       this.$watch("top", (newValue) => {
-        clipDiv.style.top = newValue + "px";
+        this.clipDiv.style.top = newValue + "px";
       })
     );
     this.watcherHandlerList.push(
       this.$watch("width", (newValue) => {
-        clipDiv.style.width = newValue + "px";
+        this.clipDiv.style.width = newValue + "px";
       })
     );
     this.watcherHandlerList.push(
       this.$watch("height", (newValue) => {
-        clipDiv.style.height = newValue + "px";
+        this.clipDiv.style.height = newValue + "px";
       })
     );
     this.watcherHandlerList.push(
       this.$watch("textureLayout", (newValue) => {
         Object.assign(this.animDiv.style, newValue);
-        imgDiv.style.width = newValue.width;
-        imgDiv.style.height = newValue.height;
+        this.imgDiv.style.width = newValue.width;
+        this.imgDiv.style.height = newValue.height;
       })
     );
     if (this.autoStart) {
@@ -290,7 +327,7 @@ export default {
     }
   },
   beforeUnmount() {
-    this.styleShell.removeRule(this.animName);
+    this.removeKeyframe(this.animName);
     for (let handler of this.watcherHandlerList) {
       handler?.();
     }
@@ -301,4 +338,4 @@ export default {
 
 <template>
   <div ref="root"></div>
-</template>
+</template>