@shijiu/jsview-vue-samples 2.3.151-test.0 → 3.0.0-test.0

package/DemoForOperator/Genie/geniePakcer/GenieTools.ts

@@ -0,0 +1,463 @@
+import genieLeft from "./genieLeft.glsl?raw";
+import genieRight from "./genieRight.glsl?raw";
+import genieBottom from "./genieBottom.glsl?raw";
+import genieTop from "./genieTop.glsl?raw";
+
+export default function buildGenieAnimation(position: {x: number, y: number}, width: number, height: number, direction: string) {
+    let vDistanceX:number = 0;
+    let vDistanceY:number = 0;
+    let vRelease:string = "";
+    let vContract:string = "";
+    let vShaderMode:string = "";
+    let vRange1:number = 0;
+    let vRange2:number = 0;
+    let vTransformScale:number = 1;
+    let vTransformDirection:string = "";
+    const keyFrameRandom: number = Math.floor(Math.random() * 100000) + 1;
+    const KeyFrameReleaseName = `Genie-release-${keyFrameRandom}`;
+    const KeyFrameContractName = `Genie-contract-${keyFrameRandom}`;
+
+    //在组件外部的八种情况
+    //左上方
+    if (position.x < 0 && position.y < 0) {
+        vDistanceX = position.x;
+        vDistanceY = position.y;
+        //释放的动画
+        vRelease = `@keyframes ${KeyFrameReleaseName} {
+                0% {
+                    transform: translate3d(${vDistanceX},${vDistanceY}, 0);
+                }
+                    70%{
+                    transform: translate3d(${vDistanceX},${vDistanceY}, 0);
+                    }
+                    80% {
+                transform: translate3d(0, 0, 0);
+                }
+                    100% {
+                    transform: translate3d(0, 0, 0);
+                }
+                }`;
+        vContract = `@keyframes ${KeyFrameContractName} {
+                0% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    30% {
+                transform: translate3d(0, 0, 0);
+                }
+                    40%{
+                    transform: translate3d(${vDistanceX}, ${vDistanceY}, 0);
+                    }
+                    100% {
+                    transform: translate3d(${vDistanceX}, ${vDistanceY}, 0);
+                }
+                }`;
+        if (direction == "horizontal") {
+            vShaderMode = genieLeft;
+            vRange1 = 1 - 1 / height;
+            vRange2 = 1 - 2 / height;
+        } else if (direction == "vertical") {
+            vShaderMode = genieTop;
+            vRange1 = 1 / width;
+            vRange2 = 2 / width;
+        }
+    } else if (position.x < width && position.y < 0) {
+        //正上方
+        vDistanceY = position.y;
+        //释放的动画
+        vRelease = `@keyframes ${KeyFrameReleaseName} {
+                0% {
+                    transform: translate3d(0,${vDistanceY}, 0);
+                }
+                    70% {
+                    transform: translate3d(0,${vDistanceY}, 0);
+                }
+                    80%{
+                    transform: translate3d(0, 0, 0);
+                    }
+        
+                    100% {
+                    transform: translate3d(0, 0, 0);
+                }
+                }`;
+        vContract = `@keyframes ${KeyFrameContractName} {
+                0% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    30% {
+                    transform: translate3d($0, 0, 0);
+                }
+                    40%{
+                    transform: translate3d($0, ${vDistanceY}, 0);
+                    }
+                    100% {
+                    transform: translate3d(0, ${vDistanceY}, 0);
+                }
+                }`;
+    
+        vShaderMode = genieTop;
+    
+        vRange1 = (position.x + 1) / width;
+        vRange2 = position.x / width;
+    } else if (position.x > width && position.y < 0) {
+        //右上角
+        if (direction == "horizontal") {
+            vDistanceX = position.x - width;
+            vDistanceY = position.y;
+            vShaderMode = genieRight;
+            vRange1 = 1 - 1 / height;
+            vRange2 = 1 - 2 / height;
+            } else if (direction == "vertical") {
+            vDistanceX = position.x - width;
+            vDistanceY = position.y;
+            vShaderMode = genieTop;
+            vRange2 = 1 - 2 / width;
+            vRange1 = 1 - 1 / width;
+        }
+        //释放的动画
+        vRelease = `@keyframes ${KeyFrameReleaseName} {
+                0% {
+                    transform: translate3d(${vDistanceX},${vDistanceY}, 0);
+                }
+                    70% {
+                    transform: translate3d(${vDistanceX},${vDistanceY}, 0);
+                }
+                    80%{
+                    transform: translate3d(0, 0, 0);
+                    }
+                    100% {
+                    transform: translate3d(0, 0, 0);
+                }
+                }`;
+        vContract = `@keyframes ${KeyFrameContractName} {
+                0% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    30% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    40%{
+                    transform: translate3d(${vDistanceX}, ${vDistanceY}, 0);
+                    }
+                    100% {
+                    transform: translate3d(${vDistanceX}, ${vDistanceY}, 0);
+                }
+                }`;
+    } else if (
+        position.x < 0 &&
+        position.y > 0 &&
+        position.y <= height
+    ) {
+        //正左边
+        vDistanceX = position.x;
+        //释放的动画
+        vRelease = `@keyframes ${KeyFrameReleaseName} {
+                0% {
+                    transform: translate3d(${vDistanceX},0, 0);
+                }
+                    70% {
+                    transform: translate3d(${vDistanceX},0, 0);
+                }
+                    80%{
+                    transform: translate3d(0, 0, 0);
+                    }
+                    100% {
+                    transform: translate3d(0, 0, 0);
+                }
+                }`;
+        vContract = `@keyframes ${KeyFrameContractName} {
+                0% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    30% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    40%{
+                    transform: translate3d(${vDistanceX},0, 0);
+                    }
+                    100% {
+                    transform: translate3d(${vDistanceX},0, 0);
+                }
+                }`;
+    
+        vShaderMode = genieLeft;
+    
+        vRange2 = 1 - position.y / height;
+        vRange1 = 1 - (position.y + 1) / height;
+    } else if (
+        position.x > width &&
+        position.y > 0 &&
+        position.y <= height
+    ) {
+        //正右边
+        vDistanceX = position.x - width;
+        vDistanceY = position.y;
+        vShaderMode = genieRight;
+        vRange1 = 1 - position.y / height;
+        vRange2 = 1 - (1 + position.y) / height;
+        //释放的动画
+        vRelease = `@keyframes ${KeyFrameReleaseName} {
+                0% {
+                    transform: translate3d(${vDistanceX},0, 0);
+                }
+                    70% {
+                    transform: translate3d(${vDistanceX},0, 0);
+                }
+                    80%{
+                    transform: translate3d(0, 0, 0);
+                    }
+                    100% {
+                    transform: translate3d(0, 0, 0);
+                }
+                }`;
+        vContract = `@keyframes ${KeyFrameContractName} {
+                0% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    30% {
+                transform: translate3d(0, 0, 0);
+                }
+                    40%{
+                    transform: translate3d(${vDistanceX},0, 0);
+                    }
+                    100% {
+                    transform: translate3d(${vDistanceX},0, 0);
+                }
+                }`;
+    } else if (position.x < 0 && position.y > height) {
+        //左下方
+        if (direction == "horizontal") {
+        vDistanceX = position.x;
+        vDistanceY = position.y - height;
+        vShaderMode = genieLeft;
+        vRange2 = 1 / height;
+        vRange1 = (1 + 1) / height;
+        } else if (direction == "vertical") {
+        vDistanceX = position.x;
+        vDistanceY = position.y - height;
+        vShaderMode = genieBottom;
+        vRange1 = 1 / width;
+        vRange2 = (1 + 1) / width;
+        }
+        //释放的动画
+        vRelease = `@keyframes ${KeyFrameReleaseName} {
+                0% {
+                    transform: translate3d(${vDistanceX},${vDistanceY}, 0);
+                }
+                    70% {
+                transform: translate3d(${vDistanceX},${vDistanceY}, 0);
+                }
+                    80%{
+                    transform: translate3d(0, 0, 0);
+                    }
+                    100% {
+                    transform: translate3d(0, 0, 0);
+                }
+                }`;
+        vContract = `@keyframes ${KeyFrameContractName} {
+                0% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    30% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    40%{
+                    transform: translate3d(${vDistanceX}, ${vDistanceY}, 0);
+                    }
+                    100% {
+                    transform: translate3d(${vDistanceX}, ${vDistanceY}, 0);
+                }
+                }`;
+    } else if (
+        position.x > 0 &&
+        position.x < width &&
+        position.y > height
+    ) {
+        //正下方
+        vDistanceY = position.y - height;
+        //释放的动画
+        vRelease = `@keyframes ${KeyFrameReleaseName} {
+                0% {
+                    transform: translate3d(0,${vDistanceY}, 0);
+                }
+                    70% {
+                    transform: translate3d(0,${vDistanceY}, 0);
+                } 
+                    80%{
+                    transform: translate3d(0, 0, 0);
+                    }
+                    100% {
+                    transform: translate3d(0, 0, 0);
+                }
+                }`;
+        vContract = `@keyframes ${KeyFrameContractName} {
+                0% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    30% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    40%{
+                    transform: translate3d($0, ${vDistanceY}, 0);
+                    }
+                    100% {
+                    transform: translate3d(0, ${vDistanceY}, 0);
+                }
+                }`;
+    
+        vShaderMode = genieBottom;
+    
+        vRange1 = position.x / width;
+        vRange2 = (position.x - 1) / width;
+    } else if (position.x > width && position.y > height) {
+        //右下方
+        if (direction == "horizontal") {
+        vDistanceX = position.x - width;
+        vDistanceY = position.y - height;
+        vShaderMode = genieRight;
+        vRange2 = 1 / height;
+        vRange1 = (1 + 1) / height;
+        } else if (direction == "vertical") {
+        vDistanceX = position.x - width;
+        vDistanceY = position.y - height;
+        vShaderMode = genieBottom;
+        vRange2 = 1 - 2 / width;
+        vRange1 = 1 - 1 / width;
+        }
+        //释放的动画
+        vRelease = `@keyframes ${KeyFrameReleaseName} {
+                0% {
+                    transform: translate3d(${vDistanceX},${vDistanceY}, 0);
+                }
+                    70% {
+                    transform: translate3d(${vDistanceX},${vDistanceY}, 0);
+                }
+                    80%{
+                    transform: translate3d(0, 0, 0);
+                    }
+                    100% {
+                    transform: translate3d(0, 0, 0);
+                }
+                }`;
+        vContract = `@keyframes ${KeyFrameContractName} {
+                0% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    30% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    40%{
+                    transform: translate3d(${vDistanceX}, ${vDistanceY}, 0);
+                    }
+                    100% {
+                    transform: translate3d(${vDistanceX}, ${vDistanceY}, 0);
+                }
+                }`;
+    } else {
+        //在组件内
+        //根据传入进来的方向和中心点位置确定缩放动画
+        if (direction == "vertical") {
+            if (position.y < height / 2) {
+                vTransformDirection = "bottom center";
+                vShaderMode = genieTop;
+                vTransformScale = 1 - position.y / height;
+            } else {
+                vTransformDirection = "top center";
+                vShaderMode = genieBottom;
+                vTransformScale = position.y / height;
+            }
+            vRange1 = position.x / width;
+            vRange2 = (position.x - 1) / width;
+            } else if (direction == "horizontal") {
+            //解析坐标位置是否要进行移动动画
+            if (position.x < width / 2) {
+                vTransformDirection = "center right";
+                vShaderMode = genieLeft;
+                vTransformScale = 1 - position.x / width;
+            } else {
+                vTransformDirection = "center left";
+                vShaderMode = genieRight;
+                vTransformScale = position.x / width;
+            }
+            vRange1 = 1 - position.y / height;
+            vRange2 = 1 - (position.y + 1) / height;
+        }
+    
+        if (direction == "horizontal") {
+            //   //收的动画
+            vContract = `@keyframes ${KeyFrameContractName} {
+                        0% {
+                        transform: scale3d(1, 1, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                        30% {
+                        transform: scale3d(${vTransformScale}, 1, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                        100% {
+                        transform: scale3d(${vTransformScale}, 1, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                    }`;
+            //   //释放的动画
+            vRelease = `@keyframes ${KeyFrameReleaseName} {
+                        0% {
+                        transform: scale3d(${vTransformScale}, 1, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                        70% {
+                        transform: scale3d(${vTransformScale}, 1, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                        100% {
+                        transform: scale3d(1, 1, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                    }`;
+        } else if (direction == "vertical") {
+            //收的动画
+            vContract = `@keyframes ${KeyFrameContractName} {
+                        0% {
+                        transform: scale3d(1, 1, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                        30% {
+                        transform: scale3d(1,${vTransformScale}, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                        100% {
+                        transform: scale3d(1, ${vTransformScale}, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                    }`;
+            //释放的动画
+            vRelease = `@keyframes ${KeyFrameReleaseName} {
+                        0% {
+                        transform: scale3d(1,${vTransformScale}, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                        70% {
+                        transform: scale3d(1,${vTransformScale}, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                        100% {
+                        transform: scale3d(1, 1, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                    }`;
+        }
+    }
+
+    const cLocalizationShader = vShaderMode
+        .replace(/\$\{RANGE_1\}/g, vRange1.toString())
+        .replace(/\$\{RANGE_2\}/g, vRange2.toString());
+
+    return {
+        vRelease,
+        vContract,
+        vShader: cLocalizationShader,
+        vTransformDirection,
+        KeyFrameReleaseName,
+        KeyFrameContractName,
+    };
+}
+

package/DemoForOperator/Jigsaw/JigsawFull.vue

@@ -115,9 +115,12 @@ function prepareSrc() {
     preloadList.push(buildPreloadInfo(props.strokeSrc));
   }
   
-  fetch(props.configUrl)
-    .then((res) => res.json())
-    .then((data) => {
+  // samples中未安装axios, 实际项目可以用axios改写
+  const xhr = new XMLHttpRequest();
+  xhr.open('GET', props.configUrl);
+  xhr.onload = function() {
+    if (xhr.status === 200) {
+      const data = JSON.parse(xhr.responseText);
       const lastSlashIndex = props.configUrl.lastIndexOf("/");
       const baseUrl = props.configUrl.substring(0, lastSlashIndex + 1);
       for (let i = 0; i < data.pieces.length; i++) {
@@ -132,10 +135,12 @@ function prepareSrc() {
         });
       }
       showPreload.value = true;
-    })
-    .catch((err) => {
-      console.log("fetch mask config failed", err);
-    });
+    }
+  };
+  xhr.onerror = function() {
+    console.log("fetch mask config failed", xhr.statusText);
+  };
+  xhr.send();
 }
 
 prepareSrc();

package/DemoForOperator/Jigsaw/JigsawSingle.vue

@@ -90,9 +90,13 @@ function prepareSrc() {
   if (props.strokeSrc) {
     preloadList.push(buildPreloadInfo(props.strokeSrc));
   }
-  fetch(props.configUrl)
-    .then((res) => res.json())
-    .then((data) => {
+
+  // samples中未安装axios, 实际项目可以用axios改写
+  const xhr = new XMLHttpRequest();
+  xhr.open('GET', props.configUrl);
+  xhr.onload = function() {
+    if (xhr.status === 200) {
+      const data = JSON.parse(xhr.responseText);
       const lastSlashIndex = props.configUrl.lastIndexOf("/");
       const baseUrl = props.configUrl.substring(0, lastSlashIndex + 1);
       if (data.pieces[props.pieceIndex]) {
@@ -109,10 +113,12 @@ function prepareSrc() {
       } else {
         console.error("pieceIndex out of range", data, props.pieceIndex);
       }
-    })
-    .catch((err) => {
-      console.log("fetch mask config failed", err);
-    });
+    }
+  };
+  xhr.onerror = function() {
+    console.log("fetch mask config failed", xhr.statusText);
+  };
+  xhr.send();
 }
 prepareSrc();
 </script>

package/DemoForOperator/LongChatBox/App.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { ref } from "vue";
 import LongChat from "./LongChat.vue";
 </script>
 
@@ -11,9 +10,21 @@ import LongChat from "./LongChat.vue";
       backgroundColor: '#666',
     }"
   >
+    <div :style="{
+      width: 1280,
+      height: 30,
+      left: 50,
+      top: 10,
+      backgroundColor: '#666',
+      fontSize: 20,
+      color: '#fff',
+    }">
+      按ok键添加对话框，按上下键滚动
+    </div>
     <div
       :style="{
-        top: 50,
+        top: 70,
+        left: 50,
         width: 1280,
         height: 600,
         overflow: 'hidden',
@@ -21,16 +32,5 @@ import LongChat from "./LongChat.vue";
     >
       <LongChat />
     </div>
-    <div
-      :style="{
-        width: 1280,
-        height: 50,
-        backgroundColor: '#666',
-        fontSize: 30,
-        color: '#fff',
-      }"
-    >
-      按ok键开始生成, 按上下键滚动
-    </div>
   </div>
 </template>