@shijiu/jsview-vue-samples 2.1.200 → 2.1.340-test.0

package/FocusMoveStyle/Item.vue

@@ -1,7 +1,5 @@
 <script setup>
-import { ref, inject } from "vue";
-
-const focusFrameController = inject("focusFrameController");
+import { ref, inject, shallowRef, onMounted, computed } from "vue";
 
 const props = defineProps({
   data: Object,
@@ -9,24 +7,21 @@ const props = defineProps({
   onEdge: Function,
   onAction: Object,
   frameChanged: Function,
-});
-
-const focusRect = ref({
-  left: 0,
-  top: 0,
-  width: 0,
-  height: 0,
+  focusRectController: {
+    type: Object,
+  },
 });
 
 const focused = ref(false);
-const divRef = ref(null);
+const parentWidget = inject("parentWidget");
+const itemKeepScale = inject("itemKeepScale");
+const divRef = shallowRef();
 
 const onFocus = () => {
-  if (focusFrameController) {
-    const rect = props.query.templatePosition(props.query.index);
-    focusFrameController.onFocusChange(rect, props.query.index);
-    focused.value=true
-  }
+  parentWidget.value.slideToDiv(divRef.value, true);
+  const rect = props.query.templatePosition(props.query.index);
+  props.focusRectController?.onFocusChange(rect);
+  focused.value = true;
 };
 
 const onBlur = () => {
@@ -40,24 +35,30 @@ const onClicked = () => {
 props.onAction.register("onFocus", onFocus);
 props.onAction.register("onBlur", onBlur);
 props.onAction.register("onClick", onClicked);
+
+const scaleTransform = computed(() => {
+  return itemKeepScale.value || focused.value
+    ? "scale3d(1.1,1.1,1)"
+    : "scale3d(1,1,1)";
+});
+
+onMounted(() => {});
 </script>
 
 <template>
-  <div>
-    <div
-      ref="divRef"
-      :style="{
-        fontSize: 40,
-        width: data.width,
-        height: data.height,
-        color: '#FFFFFF',
-        textAlign: 'center',
-        lineHeight: data.height,
-        transform:focused?'scale3d(1.1,1.1,1)':'scale3d(1,1,1)'
-      }"
-    >
-      {{ data.content }}
-    </div>
+  <div
+    ref="divRef"
+    :style="{
+      fontSize: 40,
+      width: data.width,
+      height: data.height,
+      color: '#FFFFFF',
+      textAlign: 'center',
+      lineHeight: data.height,
+      transform: scaleTransform,
+    }"
+  >
+    {{ data.content }}
   </div>
 </template>
 

package/FreeMove/App.vue

@@ -149,7 +149,7 @@ window.DebugMoveTarget = () => {
   ]);
 };
 
-// ******* 定向移动 + 回调监听 和 共享结束监听(onActEvent) *******
+// ******* 定向移动 + 回调监听 和 共享结束监听(OnNexusEvent) *******
 window.DebugTestMove = (x, y) => {
   let actRef = {};
   actorControl.run([
@@ -170,7 +170,7 @@ window.DebugTestMove = (x, y) => {
     }),
     actorControl
       .condition()
-      .onActEvent(actRef, actEvents.ActFinish)
+      .onNexusEvent(actRef, actEvents.ActFinish)
       .then([
         () => {
           console.log("on move finished");