@shijiu/jsview-vue-samples 2.3.0 → 2.3.728-alpha.0

package/FreeMoveChildAttract/App.vue

@@ -6,16 +6,16 @@
         :style="{
           top: 200,
           left: 400,
-          width: 500,
-          height: 350,
+          width: BOX_WIDTH,
+          height: BOX_HEIGHT,
           backgroundColor: '#00F00F',
         }"
       >
         <jsv-free-move-div
           ref="mActRef2"
           :style="{
-            width: 50,
-            height: 50,
+            width: MINI_BOX_WIDTH,
+            height: MINI_BOX_HEIGHT,
             backgroundColor: '#FF0000',
           }"
         />
@@ -29,6 +29,12 @@ import { JsvFreeMoveDiv, ForgeConst } from "jsview";
 import { shallowRef, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 
+const MINI_BOX_WIDTH = 50;
+const MINI_BOX_HEIGHT = 50;
+
+const BOX_WIDTH = 500;
+const BOX_HEIGHT = 350;
+
 const router = useRouter();
 const procKeyDown = (ev) => {
   // 8:Backspace, 27:Escape, 10000:盒子返回键
@@ -60,12 +66,16 @@ onMounted(() => {
         ForgeConst.DragFlags.TOUCH_RECV_LAST_END
     );
 
-  mActControl1.run([mActControl1.state().setTouchAttractChild(mActControl2)]);
+  mActControl1.run((cmds)=>[cmds.state().setTouchAttractChild(mActControl2)]);
 
   console.log(`OnMoved starting onMovement`);
-  mActControl2.run([
-    mActControl2
-      .condition(0, true) // 通过第二个参数设置回调为多次触发
+  mActControl2.run((cmds)=>[
+    cmds.condition({ multiTimes: true })
+     .boxPosition(0, 0, BOX_WIDTH - MINI_BOX_WIDTH, BOX_HEIGHT - MINI_BOX_HEIGHT)
+     .then([
+        cmds.action().stopMoving(true),
+      ]),
+    cmds.condition({ multiTimes: true }) // 通过第二个参数设置回调为多次触发
       .onMovement(12) // 设置x或y移动超过12时才触发回调，以此减少回调的频次，规避js的性能影响
       .then([
         (pointInfo) => {

package/FreeMoveLink/App.vue

@@ -5,51 +5,80 @@ import { FreeMoveFunc, ForgeConst } from "jsview";
 const div1 = ref();
 const div2 = ref();
 
+const AREA1_RECT = { left: 50, top: 100, width: 400, height: 400 };
+const ACTOR_SIZE = { width: 60, height: 60 };
+const AREA2_RECT = { left: 500, top: 100, width: 200, height: 200 };
+
 const control1 = new FreeMoveFunc.ActControlDebug();
 const control2 = new FreeMoveFunc.ActControlDebug();
 
 onMounted(() => {
-  const linkNexusId = FreeMoveFunc.newNexus();
+  const linkNexusNode = FreeMoveFunc.newNexus();
 
   let div1View = div1.value.jsvGetProxyView();
   control1.bindForgeView(div1View, true);
   div1View.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT); // 只激活drag
 
-  control1.run([
-    control1.state().startMovementSync(linkNexusId, -200, 200, -200, 200, 0b11),
+  control1.run((cmds)=> [
+    cmds.condition({ multiTimes: true })
+      .boxPosition(0, 0, AREA1_RECT.width - ACTOR_SIZE.width, AREA1_RECT.height - ACTOR_SIZE.height)
+      .then([cmds.action().stopMoving(true)]),
+    cmds.state().startMovementSync(linkNexusNode, 
+      0, AREA1_RECT.width - ACTOR_SIZE.width,
+      0, AREA1_RECT.height - ACTOR_SIZE.height, 
+      0b11),
   ]);
 
   let div2View = div2.value.jsvGetProxyView();
   control2.bindForgeView(div2View, true);
   div2View.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT); // 只激活drag
-  control2.run([
-    control2
-      .condition()
-      .movementSync(linkNexusId)
-      .then([control2.action().ackMovementSync(-100, 100, -100, 100, 0b11, 1)]),
+  control2.run((cmds)=> [
+    // div2不设置boxPosition, 按照div1同步过来的坐标, 不应该会超过其尺寸为1/4的背景区域
+    cmds.condition({multiTimes: true})
+      .movementSync(linkNexusNode)
+      .then([cmds.action().ackMovementSync(
+        0, AREA2_RECT.width - ACTOR_SIZE.width, 
+        0, AREA2_RECT.height - ACTOR_SIZE.height, 
+        0b11, 1)]),
   ]);
 });
 </script>
 
 <template>
   <div
-    ref="div1"
     :style="{
-      left: 50,
-      top: 50,
-      width: 300,
-      height: 300,
-      backgroundColor: '#FF0000',
+      left: AREA1_RECT.left,
+      top: AREA1_RECT.top,
+      width: AREA1_RECT.width,
+      height: AREA1_RECT.height,
+      backgroundColor: '#552222FF',
     }"
-  ></div>
+  >
+    <div
+      ref="div1"
+      :style="{
+        width: ACTOR_SIZE.width,
+        height: ACTOR_SIZE.height,
+        backgroundColor: '#FF0000',
+      }"
+    />
+  </div>
   <div
-    ref="div2"
     :style="{
-      left: 550,
-      top: 50,
-      width: 100,
-      height: 100,
-      backgroundColor: '#00FF00',
+      left: AREA2_RECT.left,
+      top: AREA2_RECT.top,
+      width: AREA2_RECT.width,
+      height: AREA2_RECT.height,
+      backgroundColor: '#220055FF',
     }"
-  ></div>
+  >
+    <div
+      ref="div2"
+      :style="{
+        width: ACTOR_SIZE.width,
+        height: ACTOR_SIZE.height,
+        backgroundColor: '#00FF00',
+      }"
+    />
+  </div>
 </template>

package/GiftRain/components/SpriteTranslate.vue

@@ -1,72 +1,92 @@
 <template>
-    <JsvActorMove :key="`translate${item.key}`" ref="translateF"
-        :style="{ left: item.left, top: item.top, width: item.width, height: item.height }" :control="_Control">
-        <div :key="`bg${item.key}`" ref="translate"
-            :style="{ backgroundImage: `url(${item.src})`, left: 0, top: 0, width: item.width, height: item.height }" />
-    </JsvActorMove>
+  <JsvActorMove
+    :key="`translate${item.key}`"
+    ref="translateF"
+    :style="{
+      left: item.left,
+      top: item.top,
+      width: item.width,
+      height: item.height,
+    }"
+    :control="_Control"
+  >
+    <div
+      :key="`bg${item.key}`"
+      ref="translate"
+      :style="{
+        backgroundImage: `url(${item.src})`,
+        left: 0,
+        top: 0,
+        width: item.width,
+        height: item.height,
+      }"
+    />
+  </JsvActorMove>
 </template>
 
 <script setup>
-import { shallowRef, defineProps, onMounted, onBeforeMount } from 'vue';
-import { JsvActorMove, JsvActorMoveControl, createImpactTracer, createImpactCallback, createImpactAutoFroze } from 'jsview'
+import { shallowRef, defineProps, onMounted, onBeforeMount } from "vue";
+import {
+  JsvActorMove,
+  JsvActorMoveControl,
+  createImpactTracer,
+  createImpactCallback,
+  createImpactAutoFroze,
+} from "jsview";
 //定义子ref
-let translate = shallowRef(null)
+let translate = shallowRef(null);
 //定义父ref
-let translateF=shallowRef(null)
+let translateF = shallowRef(null);
 //定义props
 const props = defineProps({
-    onDestory: Function,
-    item: Object,
-    onImpactTracer: Function,
-    MoneyBag: Object
-})
+  onDestory: Function,
+  item: Object,
+  onImpactTracer: Function,
+  MoneyBag: Object,
+});
 const control = new JsvActorMoveControl();
 const _Control = control;
 const item = props.item;
 //销毁方法
 const _onDestroy = () => {
-    if (props.onDestory) {
-        props.onDestory(props.item.key);
-    }
-}
+  if (props.onDestory) {
+    props.onDestory(props.item.key);
+  }
+};
 
 let sensor = null;
 
 const _InitItemEle = (item, ele) => {
-    if (ele && !item.ele) {
-        item.ele = ele;
-        if (props.MoneyBag) {
-            const giftrain_sensor = createImpactTracer(props.MoneyBag, ele, createImpactCallback(
-                () => {
-                    props.onImpactTracer(item);
-                    _onDestroy();
-                },
-            ),        //碰撞即停
-                createImpactAutoFroze(
-                    [props.MoneyBag,translateF.value.mainDiv],
-                    null
-                )
-            );
-            sensor = giftrain_sensor;
-        }
+  if (ele && !item.ele) {
+    item.ele = ele;
+    if (props.MoneyBag) {
+      const giftrain_sensor = createImpactTracer(
+        props.MoneyBag,
+        ele,
+        createImpactCallback(() => {
+          props.onImpactTracer(item);
+          _onDestroy();
+        }) //碰撞即停
+      );
+      sensor = giftrain_sensor;
     }
-}
-
+  }
+};
 
 //挂载时初始化
 onMounted(() => {
-    _InitItemEle(item, translate.value)
-    _Control.moveToY(720 * 1.5 + 30, 720 * 1.5 / item.duration, () => {
-        _onDestroy();
-    });
-})
+  _InitItemEle(item, translate.value);
+  _Control.moveToY(720 * 1.5 + 30, (720 * 1.5) / item.duration, () => {
+    _onDestroy();
+  });
+});
 //卸载之前释放碰撞监听者
-onBeforeMount(()=>{
-    if(sensor!=null){
-    sensor.Recycle()
-    sensor=null
-    }
-})
+onBeforeMount(() => {
+  if (sensor != null) {
+    sensor.Recycle();
+    sensor = null;
+  }
+});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped></style>

package/HashHistory/App.vue

@@ -67,8 +67,8 @@ onMounted(() => {
           ref="routePage"
           class="childComponentStyle"
           :style="{
-            top:150,
-            overflow:'hidden'
+            top: 150,
+            overflow: 'hidden',
           }"
           @requestFocus="onRequestFocus"
         />

package/HashHistory/router.js

@@ -15,7 +15,7 @@ const routeList = [
   },
   {
     name: "SubPageFirst",
-    path: "/__MainJsvApp/SubPageFirst",
+    path: "/__MainJsvApp/SubPageFirst", 
     component: () => import("./views/SubPage.vue"),
     props: {
       name: "First",

package/Hover/App.vue

@@ -0,0 +1,144 @@
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  >
+    <div
+      :style="{
+        left: 150,
+        top: 20,
+        width: 1000,
+        height: 30,
+        fontSize: 20,
+        backgroundColor: '#00000077',
+        color: '#ffffff',
+        textAlign: 'center',
+      }"
+    >
+      {{
+        `hover规则: 非父子关系的，只能有一个div是hover状态; 父子关系的，可以在父是hover状态时子也是hover`
+      }}
+    </div>
+    <div
+      :style="{
+        left: 150,
+        top: 150,
+        width: 300,
+        height: 300,
+        backgroundColor: '#990000',
+        transform: redHovered ? 'scale3d(1.2, 1.2, 1)' : 'scale3d(1, 1, 1)',
+        transition: 'transform 0.3s ease-in-out',
+        fontSize: 15,
+      }"
+      @mouseenter="redEnter"
+      @mouseleave="redOut"
+    >
+      父div
+      <div
+        :style="{
+          width: 100,
+          height: 100,
+          left: 100,
+          top: 100,
+          backgroundColor: '#009900',
+          transform: greenHovered ? 'scale3d(1.3, 1.3, 1)' : 'scale3d(1, 1, 1)',
+          transition: 'transform 0.3s ease-in-out',
+          fontSize: 15,
+        }"
+        @mouseenter="greenEnter"
+        @mouseleave="greenOut"
+      >
+        子div
+      </div>
+    </div>
+
+    <div
+      :style="{
+        left: 300,
+        top: 100,
+        width: 200,
+        height: 200,
+        backgroundColor: '#000099',
+        transform: blueHovered ? 'scale3d(1.2, 1.2, 1)' : 'scale3d(1, 1, 1)',
+        transition: 'transform 0.3s ease-in-out',
+      }"
+      @mouseenter="blueEnter"
+      @mouseleave="blueOut"
+    ></div>
+    <div
+      :style="{
+        left: 430,
+        top: 250,
+        width: 100,
+        height: 100,
+      }"
+      @mouseenter="emptyEnter"
+      @mouseleave="emptyOut"
+    >
+      <div
+        :style="{
+          width: 100,
+          height: 100,
+          backgroundColor: '#009900',
+          transform: emptyHovered ? 'scale3d(1.3, 1.3, 1)' : 'scale3d(1, 1, 1)',
+          transition: 'transform 0.3s ease-in-out',
+          fontSize: 15,
+        }"
+      >
+        空texture测试
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const greenHovered = ref(false);
+const blueHovered = ref(false);
+const redHovered = ref(false);
+const emptyHovered = ref(false);
+
+const blueEnter = () => {
+  console.log("blue enter");
+  blueHovered.value = true;
+};
+
+const blueOut = () => {
+  console.log("blue leave");
+  blueHovered.value = false;
+};
+
+const redEnter = () => {
+  console.log("red enter");
+  redHovered.value = true;
+};
+
+const redOut = () => {
+  console.log("red leave");
+  redHovered.value = false;
+};
+
+const greenEnter = () => {
+  greenHovered.value = true;
+  console.log("green enter");
+};
+
+const greenOut = () => {
+  greenHovered.value = false;
+  console.log("green leave");
+};
+
+const emptyEnter = () => {
+  emptyHovered.value = true;
+  console.log("empty enter");
+};
+
+const emptyOut = () => {
+  emptyHovered.value = false;
+  console.log("empty leave");
+};
+</script>

package/HttpRequestSSE/SSEReader.js

@@ -0,0 +1,200 @@
+class SSEReader {
+    constructor() {
+        this.url = null;
+        this.headers = null;
+        this.onNewData = null;
+        this.onError = null;
+        this.onDone = null;
+        this._proccessedLength = 0;
+        this._xhr = null; // 保存 XMLHttpRequest 实例，用于取消请求
+        this._isAborted = false; // 标记请求是否被主动取消
+        /** onprogress 可能收到截断的 SSE 行，与下一段拼接后再解析 */
+        this._sseLineCarry = '';
+    }
+
+    send(post_or_get, body_json_object) {
+        // 如果已有正在进行的请求，先取消它
+        if (this._xhr) {
+            this.abort();
+        }
+
+        this._proccessedLength = 0;
+        this._sseLineCarry = '';
+        this._isAborted = false; // 重置取消标记
+        this._startTime = Date.now();
+        let open_url = this.url;
+        let xhr = new XMLHttpRequest();
+        this._xhr = xhr; // 保存 xhr 实例
+        let _this = this;
+        xhr.open(post_or_get, open_url);
+        xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
+        xhr.setRequestHeader('Accept', 'text/event-stream');
+
+        // 激活JsView的分段式获取功能
+        xhr.setRequestHeader('Jsv-Enable-Stream', '1');
+
+        // 激活JsView的onProgress时传输内容只有增量而非整量功能，避免内存峰值
+        xhr.setRequestHeader('Jsv-Increment-Progress', '1');
+
+        // 用目标对象的header进行覆盖
+        console.log('this.headers', JSON.stringify(this.headers));
+        if (this.headers) {
+            for (let key in this.headers) {
+                const value = this.headers[key];
+                console.log('key', key, 'value', value);
+                xhr.setRequestHeader(key, value);
+            }
+        }
+
+        xhr.onerror = (e) => {
+            // 如果请求已被主动取消，不触发错误回调
+            if (_this._isAborted || _this._xhr === null) {
+                return;
+            }
+            const duration = _this._startTime ? Date.now() - _this._startTime : 0;
+            const urlName = _this._extractPathFromUrl(open_url);
+            console.log(`[接口耗时] ${urlName} ${duration}ms (失败)`);
+            _this.onError?.(xhr.status, xhr.statusText, e);
+            _this._xhr = null;
+        };
+
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState !== 4) {
+                return;
+            }
+            // 如果请求已被主动取消，不触发回调
+            if (_this._isAborted || _this._xhr === null) {
+                return;
+            }
+            const duration = _this._startTime ? Date.now() - _this._startTime : 0;
+            const urlName = _this._extractPathFromUrl(open_url);
+            if (xhr.status === 200) {
+                console.log(`[接口耗时] ${urlName} ${duration}ms`);
+                _this._flushSseCarry();
+                _this.onDone?.();
+            } else {
+                // status 为 0 通常是请求被取消，不触发错误回调
+                if (xhr.status === 0) {
+                    console.log('[SSEReader] 请求被取消，不触发错误回调');
+                    _this._xhr = null;
+                    return;
+                }
+                console.log(`[接口耗时] ${urlName} ${duration}ms (失败)`);
+                _this.onError?.(xhr.status, xhr.statusText, null);
+            }
+            // 请求完成后清除 xhr 引用
+            _this._xhr = null;
+        };
+
+        xhr.onprogress = function (ev) {
+            // 如果请求已被主动取消，不处理数据
+            if (_this._isAborted || _this._xhr === null) {
+                return;
+            }
+            let inc_data;
+            if (window.JsvCoreApi?.Platform != 'pc-wasm') {
+                inc_data = ev.target.responseText;
+                console.log('[SSEReader] xhr.onprogress', ev.target.responseText);
+                _this._parseSSEWithCarry(inc_data);
+            } else {
+                inc_data = ev.target.responseText.substring(_this._proccessedLength);
+                _this._proccessedLength = ev.target.responseText.length;
+                _this._parseSSEWithCarry(inc_data);
+            }
+        };
+
+        if (body_json_object) {
+            xhr.send(JSON.stringify(body_json_object));
+        } else {
+            xhr.send();
+        }
+    }
+
+    _extractPathFromUrl(url) {
+        if (!url || typeof url !== 'string') return '未知';
+        try {
+            const parts = url.split('/');
+            return parts.length >= 4 ? parts.slice(3).join('/').split('?')[0] : url;
+        } catch {
+            return '未知';
+        }
+    }
+
+    /**
+     * 将上一段未以换行结束的片段与本次数据拼接，仅对完整行派发 data:
+     */
+    _parseSSEWithCarry(chunk) {
+        if (this._isAborted || this._xhr === null) {
+            return;
+        }
+        const text = this._sseLineCarry + chunk;
+        const lines = text.split('\n');
+        let carry = '';
+        if (text.length > 0 && !text.endsWith('\n')) {
+            carry = lines.pop() ?? '';
+        }
+        this._sseLineCarry = carry;
+        for (let line of lines) {
+            if (line.startsWith('data:')) {
+                this.onNewData?.(line.substring(5));
+            }
+        }
+    }
+
+    _flushSseCarry() {
+        const c = this._sseLineCarry;
+        if (!c) {
+            return;
+        }
+        if (c.startsWith('data:')) {
+            this.onNewData?.(c.substring(5));
+        }
+        this._sseLineCarry = '';
+    }
+
+    /**
+     * 取消当前请求
+     */
+    abort() {
+        if (this._xhr) {
+            this._isAborted = true; // 标记为主动取消
+            try {
+                this._xhr.abort();
+                console.log('[SSEReader] 请求已取消');
+            } catch (error) {
+                console.warn('[SSEReader] 取消请求失败:', error);
+            }
+            this._xhr = null;
+        }
+        this._sseLineCarry = '';
+    }
+}
+
+/**
+ * 使用方法:
+ * 
+    const reader = new SSEReader();
+    reader.url = 'https://dify.ragehealth.cn/lcs-optimize-akb-test/ai_wenzheng';
+    reader.headers = {
+        'Cache-Control': 'no-cache', // 可选
+    };
+    reader.onNewData = (data) => {
+        console.log(data);
+    };
+    reader.onError = (status, statusText, error) => {
+        console.error(status, statusText, error);
+    };
+    reader.onDone = () => {
+        console.log('done');
+    };
+    reader.send('POST', {
+        'a': '123',
+        'b': '456',
+        'c': 1,
+    });
+    
+    // 取消请求
+    reader.abort();
+
+ */
+export default SSEReader;

package/ImpactStop/App.vue

@@ -242,7 +242,7 @@ const procKeyDown = (ev) => {
         actorControl.run((cmds) => [
           cmds
             .action(0, 0, interactNexus)
-            .setSpdAndAccel(7.9, -24, undefined, 1, null, () => {}),
+            .setSpdAndAccel(7.88, -23, undefined, 1, null, () => {}),
           cmds
             .condition()
             .onNexusEvent(interactNexus, actEvents.SpeedRevertY)
@@ -256,7 +256,7 @@ const procKeyDown = (ev) => {
         actorControl.run((cmds) => [
           cmds
             .action(0, 0, interactNexus)
-            .setSpdAndAccel(-7.9, -24, undefined, 1, null, () => {}),
+            .setSpdAndAccel(-7.88, -23, undefined, 1, null, () => {}),
           cmds
             .condition()
             .onNexusEvent(interactNexus, actEvents.SpeedRevertY)