@shijiu/jsview-vue 2.1.25 → 2.1.200

package/utils/JsViewVueWidget/JsvSector.vue

@@ -0,0 +1,107 @@
+<!--
+ * 【模块 export 内容】
+ * JsvSector：Vue高阶组件，扇形图。
+ *      props说明:
+ *          centerPosition  {Object}   圆心坐标，属性:{x,y}
+ *          radius          {Number}   半径
+ *          animationTime   {Number}   动画变化时间，单位 /秒
+ *          config          {Object}   配置信息对象，包含初始角度，扫过的角度以及颜色。属性:{startAngle,sweepAngle,color}
+ *          extraTime       {Number}   可选配置（饼图用）扇形运动额外时间
+ * 
+-->
+<template>
+  <div
+    :style="{
+      width: props.radius,
+      height: props.radius,
+      transform: `rotate3d(0,0,1,${props.config.startAngle}deg)`,
+      transformOrigin: `center center`,
+      transition: `transform ${props.animationTime}s`,
+      left: props.centerPosition.x / 2,
+      top: props.centerPosition.y / 2,
+    }"
+  >
+    <div
+      :style="{
+        width: props.radius,
+        height: props.radius / 2,
+        top: props.radius / 2,
+        left: 0,
+        transform: `rotate3d(0,0,1,${upAngle}deg)`,
+        transformOrigin: `center top`,
+        overflow: 'hidden',
+        transition: `transform ${props.animationTime}s`,
+      }"
+    >
+      <div
+        :style="{
+          width: props.radius,
+          height: props.radius,
+          backgroundImage: `jsvtexturestore://${sourceId}`,
+          transform: `rotate3d(0,0,1,${downAngle}deg)`,
+          transformOrigin: `center top`,
+          transition: `transform ${props.animationTime + props.extraTime}s`,
+        }"
+      ></div>
+    </div>
+    <div
+      :style="{
+        width: props.radius,
+        height: props.radius / 2,
+        top: props.radius / 2,
+        left: 0,
+        overflow: 'hidden',
+      }"
+    >
+      <div
+        :style="{
+          width: props.radius,
+          height: props.radius,
+          backgroundImage: `jsvtexturestore://${sourceId}`,
+          transform: `rotate3d(0,0,1,${downAngle}deg)`,
+          transformOrigin: `center top`,
+          transition: `transform ${props.animationTime+props.extraTime}s`,
+        }"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { shallowRef, onBeforeUnmount, watch } from "vue";
+import { JsvTextureStoreApi, JsvLine } from "jsview";
+let sourceId = shallowRef("");
+const props = defineProps({
+  centerPosition: { type: Object, require: true },
+  radius: { type: Number, require: true },
+  config: { type: Object, require: true },
+  animationTime: { type: Number, default: 1 },
+  extraTime: { type: Number, default: 0 },
+});
+
+let canvasRef = JsvTextureStoreApi.canvasTexture(
+  2 * props.radius,
+  2 * props.radius
+);
+let customPath = canvasRef.customPath();
+customPath.arcTo(0, -props.radius, 2 * props.radius, props.radius, 0, 180);
+// 闭合路径，绘制实心扇形
+customPath.close();
+customPath.fill(props.config.color);
+sourceId.value = canvasRef.commit();
+//旋转角度
+let upAngle = shallowRef(0);
+let downAngle = shallowRef(0);
+const judge = () => {
+  downAngle.value = -(180 - props.config.sweepAngle / 2);
+  upAngle.value = props.config.sweepAngle / 2;
+};
+judge();
+watch(props, (n, o) => {
+  judge();
+});
+onBeforeUnmount(() => {
+  JsvTextureStoreApi.deleteTexture(sourceId.value);
+});
+</script>
+
+<style lang="scss" scoped></style>

package/utils/JsViewVueWidget/JsvTextBox.vue

@@ -8,6 +8,14 @@
  *          verticalAlign {string}  垂直对齐方式 (必需) top、middle、bottom
  *          style {object}          样式(必需)
  *          enableLatex {bool}     是否启用Latex文字描画模式
+ * latex语法样例
+ *    1. 颜色:     "测试\\textcolor{#FF0000}{红色}文字"
+ *    2. 加粗:     "测试\\textb{加粗}文字"
+ *    3. 斜体:     "测试\\texti{斜体}文字"
+ *    4. 下划线:   "测试\\textdecoration{underline}{下划线}文字"
+ *    5. 删除线:   "测试\\textdecoration{line-through}{删除线}文字"
+ * latex混合样式样例
+ *    "测试\\textcolor{#FF0000}{红色并且\\textb{加粗}}文字"
 -->
 
 <script setup>
@@ -25,6 +33,10 @@ const props = defineProps({
   },
   enableLatex: Boolean,
   className: String,
+  textDirection: {
+    type: String,
+    default: "unset",
+  },
 });
 
 const innerStyle = computed(() => {
@@ -67,10 +79,11 @@ const disable = window.JsvDisableReactWrapper;
         JsvTextLatex: enableLatex ? 1 : 0,
         JsvTextVerticalAlign: verticalAlign,
         JsvTextLineAlign: lineAlign,
+        JsvTextInnerDirection: textDirection,
       }"
       jsv-inherit-class="1"
     >
       <slot></slot>
     </div>
   </div>
-</template>
+</template>

package/utils/JsViewVueWidget/JsvTextureAnim/JsvTextureAnim.vue

@@ -330,7 +330,7 @@ export default {
       // 4.设置texture的动画形变
       if (this.animation) {
         this.forgeAnimation = new Forge.CssKeyframeAnimation(
-          "@keyframes test" + this.animation,
+          "@keyframes texAnimDef" + this.animation,
           this.duration,
           null,
           1,
@@ -362,6 +362,32 @@ export default {
       this.start();
     }
   },
+  activated() {
+    if (this.innerView) {
+      if (this.animation && this.forgeAnimation == null) {
+        this.forgeAnimation = new Forge.CssKeyframeAnimation(
+          "@keyframes texAnimDef" + this.animation,
+          this.duration,
+          null,
+          1,
+          1
+        );
+        this.forgeAnimation.EnableDelay(this.delay).SetRepeat(this.repeat);
+        this.forgeAnimation.SetAnimationListener(
+          new Forge.AnimationListener(null, this._onAnimationEnd, null)
+        );
+        this.innerView.StartTextureAnimation(this.forgeAnimation);
+      } else {
+        this.forgeAnimation = null;
+      }
+    }
+  },
+  deactivated() {
+    if (this.innerView) {
+      this.innerView.StopTextureAnimation();
+    }
+    this.forgeAnimation = null;
+  },
 };
 </script>
 
@@ -376,4 +402,4 @@ export default {
     }"
     :data-jsv-vw-innerview="innerViewId"
   ></div>
-</template>
+</template>

package/utils/JsViewVueWidget/JsvVisibleSensor/JsvVisibleSensor.vue

@@ -18,124 +18,153 @@
  -->
 
 <template>
-    <div ref="viewRef" :style="{
-        top: props.top,
-        left: props.left,
-        width: props.width,
-        height: props.height,
-        }" >
-        <slot/>
-    </div>
+  <div
+    ref="viewRef"
+    :style="{
+      top: props.top,
+      left: props.left,
+      width: props.width,
+      height: props.height,
+    }"
+  >
+    <slot />
+  </div>
 </template>
 
 <script setup>
-import { reactive, ref, shallowRef, toRaw, watchEffect, onMounted } from 'vue'
+import {
+  reactive,
+  ref,
+  shallowRef,
+  toRaw,
+  watchEffect,
+  onMounted,
+  onActivated,
+  onDeactivated,
+} from "vue";
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 
 const props = defineProps({
-    // (支持reactive)可视区域设定
-    horizonShown: Number,
-    verticalShown: Number,
-
-    // (支持reactive)Container, 父区域的div引用, 
-    container: Object,
-
-    // (不支持reactive)回调处理
-    callback: Function,
-
-    // (支持reactive)位置信息
-    left: {
-        type: Number,
-        default: 0,
-    },
-    top: {
-        type: Number,
-        default: 0,
-    },
-    width: {
-        type: Number,
-        require: true,
-    },
-    height: {
-        type: Number,
-        require: true,
-    },
-
-    // (支持reactive)是否激活，仍然在渲染树时，非必须可以通过enable关闭以节省CPU开销
-    enable: {
-        type: Boolean,
-        default: true,
-    }
+  // (支持reactive)可视区域设定
+  horizonShown: Number,
+  verticalShown: Number,
+
+  // (支持reactive)Container, 父区域的div引用,
+  container: Object,
+
+  // (不支持reactive)回调处理
+  callback: Function,
+
+  // (支持reactive)位置信息
+  left: {
+    type: Number,
+    default: 0,
+  },
+  top: {
+    type: Number,
+    default: 0,
+  },
+  width: {
+    type: Number,
+    require: true,
+  },
+  height: {
+    type: Number,
+    require: true,
+  },
+
+  // (支持reactive)是否激活，仍然在渲染树时，非必须可以通过enable关闭以节省CPU开销
+  enable: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 // 内部状态变量
 const viewRef = shallowRef(null);
-const viewMounted = reactive({status: false})
+const viewMounted = reactive({ status: false });
 let sensorRef = null;
 
 // 变更检测范围
-watchEffect(()=>{
-    if (viewMounted.status) {
-        let horizon = fixAreaValue(props.horizonShown);
-        let vertical = fixAreaValue(props.verticalShown);
+watchEffect(() => {
+  if (viewMounted.status) {
+    let horizon = fixAreaValue(props.horizonShown);
+    let vertical = fixAreaValue(props.verticalShown);
 
-        sensorRef.ResetArea({horizon, vertical})
-    }
-})
+    sensorRef.ResetArea({ horizon, vertical });
+  }
+});
 
 // 变更enable状态
-watchEffect(()=>{
-    if (viewMounted.status) {
-        sensorRef.Enable(props.enable)
-    }
-})
+watchEffect(() => {
+  if (viewMounted.status) {
+    sensorRef.Enable(props.enable);
+  }
+});
 
 // 检测container变化
-watchEffect(()=>{
-    if (viewMounted.status) {
-        if (props.container) {
-            window.MyContainerView = toRaw(props.container);
-
-            let jsv_main_view_ref = toRaw(props.container).jsvGetProxyView();
-            if (jsv_main_view_ref) {
-                sensorRef.ResetContainer(jsv_main_view_ref);
-            } else {
-                console.error("Error: container is NOT a div");
-            }
-        } else {
-            sensorRef.ResetContainer(null); // 无container
-        }
+watchEffect(() => {
+  if (viewMounted.status) {
+    if (props.container) {
+      window.MyContainerView = toRaw(props.container);
+
+      let jsv_main_view_ref = toRaw(props.container).jsvGetProxyView();
+      if (jsv_main_view_ref) {
+        sensorRef.ResetContainer(jsv_main_view_ref);
+      } else {
+        console.error("Error: container is NOT a div");
+      }
+    } else {
+      sensorRef.ResetContainer(null); // 无container
+    }
+  }
+});
+
+let oldH, newH, oldV, newV;
+const visibleChange = (old_h, new_h, old_v, new_v) => {
+  oldH = old_h;
+  newH = new_h;
+  oldV = old_v;
+  newV = new_v;
+  props.callback?.(old_h, new_h, old_v, new_v);
+};
+onMounted(() => {
+  console.log("JsvVisibleSensor: on mounted");
+
+  sensorRef = new Forge.VisibleSensor(
+    toRaw(viewRef.value).jsvGetProxyView(),
+    (old_h, new_h, old_v, new_v) => {
+      // 获得横向和纵向的新旧状态值
+      visibleChange(old_h, new_h, old_v, new_v);
     }
-})
+  );
+  viewMounted.status = true;
+});
 
-onMounted(()=>{
-    console.log("JsvVisibleSensor: on mounted");
+onActivated(() => {
+  sensorRef.Enable(props.enable);
+});
 
-    sensorRef = new Forge.VisibleSensor(toRaw(viewRef.value).jsvGetProxyView(), (old_h, new_h, old_v, new_v)=>{
-        // 获得横向和纵向的新旧状态值
-        if (props.callback) {
-            props.callback(old_h, new_h, old_v, new_v);
-        }
-    });
-    viewMounted.status = true;
-})
+onDeactivated(() => {
+  if (newH || newV) {
+    visibleChange(newH, false, newV, false);
+  }
+  sensorRef.Enable(false);
+});
 
 // 外部方法
-defineExpose({
-
-})
+defineExpose({});
 
 // 内部方法
 function fixAreaValue(origin_value) {
-    if (origin_value > 1) {
-        console.warn(`will limited to 1 origin=${origin_value}`);
-        return 1;
-    } else if (origin_value < 0) {
-        console.warn(`will limited to 0 origin=${origin_value}`);
-        return 0;
-    } else {
-        return origin_value;
-    }
+  if (origin_value > 1) {
+    console.warn(`will limited to 1 origin=${origin_value}`);
+    return 1;
+  } else if (origin_value < 0) {
+    console.warn(`will limited to 0 origin=${origin_value}`);
+    return 0;
+  } else {
+    return origin_value;
+  }
 }
-
 </script>

package/utils/JsViewVueWidget/index.js

@@ -6,7 +6,7 @@
  * @Description: file content
  */
 export { default as JsvActorMove, JsvActorMoveControl } from "./JsvActorMove";
-export { default as JsvFreeMoveActor } from "./JsvFreeMoveActor";
+export * from "./JsvFreeMoveActor";
 export { default as JsvApic, LoopType } from "./JsvApic";
 export { default as JsvInput, InputType } from "./JsvInput";
 export {
@@ -31,16 +31,24 @@ export {
 export { default as JsvHole } from "./JsvHole.js";
 export { default as JsvMarquee } from "./JsvMarquee.vue";
 export { default as JsvMaskClipDiv } from "./JsvMaskClipDiv.vue";
-export { default as JsvNativeSharedDiv } from "./JsvNativeSharedDiv.vue";
 export { default as JsvNinePatch } from "./JsvNinePatch.vue";
 export { default as JsvPosterDiv } from "./JsvPosterDiv.vue";
 export { default as JsvPosterImage } from "./JsvPosterImage.vue";
 export { default as JsvScaleTextBox } from "./JsvScaleTextBox.vue";
 export { JsvSoundPool } from "./JsvSoundPool.js";
 export { default as JsvTextBox } from "./JsvTextBox.vue";
-export { default as JsvTouchContainer } from "./JsvTouchContainer.vue";
-export { default as JsvTransparentDiv } from "./JsvTransparentDiv.vue";
-export { default as JsvVideo } from "./JsvVideo.vue";
-export { default as JsvSystemAudio } from "./JsvSystemAudio.vue";
-export { default as JsvRadarChart} from "./JsvRadarChart.vue";
+// export { default as JsvVideo } from "./JsvVideo.vue";
+// export { default as JsvSystemAudio } from "./JsvSystemAudio.vue";
+export { default as JsvRadarChart } from "./JsvRadarChart.vue";
 export { default as JsvRipple, JsvRippleShape } from "./JsvRipple"
+export { default as JsvLine } from "./JsvLine";
+export { default as JsvPieChart } from "./JsvPieChart.vue";
+export { default as JsvSector } from "./JsvSector.vue";
+// 合并透过层样例, 更便于有声音无画面问题的调试
+import JsvNativeSharedDiv from "./JsvNativeSharedDiv.vue";
+export {
+  JsvNativeSharedDiv as JsvTransparentDiv,
+  JsvNativeSharedDiv
+}
+export { default as JsvEnableRenderBreak } from "./JsvEnableRenderBreak.vue";
+export { JsvMindMap } from "./JsvMindMap"

package/utils/JsViewVueWidget/JsvFreeMoveActor/ActorControl.js

@@ -1,112 +0,0 @@
-/*
- * @Author: donglin.lu@qcast.cn
- * @Date: 2023-07-05 15:41:00
- * @LastEditors: donglin.lu@qcast.cn
- * @Description: file content
- */
-
-import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
-
-import ConditionPackBuilder from "./SetCondition.js";
-import ActionPackBuilder from "./SetAction.js"
-import StatePackBuilder from "./SetState.js";
-import CallbackManager from "./CallbackManager.js";
-
-
-class ActorControl {
-  constructor() {
-    this._BindView = null;
-    this._BindAnim = null;
-    this._Callbacks = new CallbackManager();
-    this._ConditionPackBuilder = new ConditionPackBuilder(this._Callbacks);
-    this._ActionPackBuilder = new ActionPackBuilder(this._Callbacks);
-    this._StatePackBuilder = new StatePackBuilder();
-  }
-
-  bindForgeView(bindView) {
-    this._BindView = bindView;
-  }
-
-  /** 
-   * run 执行编排好的intent集合
-   *
-   * @param {Array} cmdPackList 内容来自 Condition(), State(), Action() 这些工厂类创建的Command pack
-   */
-  run(cmdPackList) {
-    if (window.JsView) {
-      this._WrappedRun(cmdPackList);
-    } else {
-      // Browser场景DomProxy需要onReady调用
-      let that = this;
-      this._BindView.RegisterOnProxyReady(()=>{
-        that._WrappedRun(cmdPackList);
-      })
-    }
-  }
-
-  _WrappedRun(cmdPackList) {
-    this._EnsureAnim();
-
-    if (!(cmdPackList instanceof Array)) {
-      console.error("params error");
-      return;
-    }
-
-    Forge.AnimFireCommand.RunFreeMoveCmdPacks(this._BindView, cmdPackList);
-  }
-
-  /**
-   * Condition
-   * 获取创建 ConditionPack 的工厂对象
-   * ConditionPack对应支持 .then(cmdPackList), 可传入同 Run 的处理队列
-   * 可用方法见 ./SetCondition.js
-   */
-  condition(group, multiTimes, specName) {
-    // 注意: 不支持获取condition后，多次复制
-    this._ConditionPackBuilder.updateCommandInfo(group, multiTimes, specName);
-    return this._ConditionPackBuilder;
-  }
-
-  /**
-   * Action
-   * 获取创建 ActionPack 的工厂对象
-   * 注意: ActionPack 是指会改变 speed 或 accelerate 的指令，每个新的Action会覆盖掉前一次的Action设置，包括其关联的condition
-   * 可用方法见 ./SetAction.js
-   * 
-   * @param {int} xySpeedKeeps xy轴上的速度是否保持，x轴保持为1, y轴保持为2，可"与或"让两个轴都保持
-   * @param {int} xyAccKeeps xy轴上的加速度是否保持，x轴保持为1, y轴保持为2，可"与或"让两个轴都保持
-   * @return {ActionPackBuilder} ActionPack 的工厂对象
-   */
-  action(xySpeedKeeps, xyAccKeeps) {
-    this._ActionPackBuilder.updateCommonInfo(xySpeedKeeps, xyAccKeeps);
-    return this._ActionPackBuilder;
-  }
-
-  /**
-   * State
-   * 获取创建 StatePack 的工厂对象
-   * 可用方法见 ./SetState.js
-   */
-  state() {
-    return this._StatePackBuilder;
-  }
-
-  _OnEchoEvent(retJsonObject) {
-    let actorState = retJsonObject;
-    let echoTokens = retJsonObject["eTkns"];
-    if (echoTokens) {
-      for (let etoken of echoTokens) {
-        this._Callbacks.invokeCallback(etoken, actorState);
-      }
-    }
-  }
-
-  _EnsureAnim() {
-    if (!this._BindAnim) {
-      this._BindAnim = new Forge.FreeMoveAnimation(this._OnEchoEvent.bind(this));
-      this._BindView.StartAnimation(this._BindAnim);
-    }
-  }
-}
-
-export default ActorControl;

package/utils/JsViewVueWidget/JsvFreeMoveActor/CommonTools.js

@@ -1,18 +0,0 @@
-/*
- * @Author: donglin.lu@qcast.cn
- * @Date: 2023-07-18 11:14:00
- * @LastEditors: donglin.lu@qcast.cn
- * @Description: file content
- */
-
-const ConditionSetBuilder = Forge.FreeMoveConditionSet;
-const StateCmdBuilder = Forge.FreeMoveStateBuilder;
-const ActionCmdBuilder = Forge.FreeMoveActionBuilder;
-const CmdPackBuilder = Forge.FreeMoveCmdPackBuilder;
-
-export {
-    ConditionSetBuilder,
-    ActionCmdBuilder,
-    StateCmdBuilder,
-    CmdPackBuilder
-}