@shijiu/jsview-vue 2.0.1021 → 2.0.1073

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue",
-  "version": "2.0.1021",
+  "version": "2.0.1073",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",
@@ -11,10 +11,11 @@
     "jsview-vue"
   ],
   "dependencies": {
-    "qr.js": "0.0.0",
+    "qr.js": "0.0.0"
+  },
+  "devDependencies": {
     "vite-plugin-full-reload": "1.0.5"
   },
-  "devDependencies": {},
   "engines": {
     "node": ">=16.0.0"
   }

package/utils/JsViewEngineWidget/CheckType.js

@@ -0,0 +1,82 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2023-02-23 10:40:16
+ * @Description: file content
+ */
+
+const isArray = Array.isArray;
+const isMap = (val) => Object.prototype.toString.call(val) === '[object Map]';
+const isSet = (val) => Object.prototype.toString.call(val) === '[object Set]';
+const isDate = (val) => Object.prototype.toString.call(val) === '[object Date]';
+const isFunction = (val) => typeof val === 'function';
+const isString = (val) => typeof val === 'string';
+const isSymbol = (val) => typeof val === 'symbol';
+const isObject = (val) => val !== null && typeof val === 'object';
+
+function getTypeName(ctor) {
+  const match = ctor && ctor.toString().match(/^\s*function (\w+)/);
+  return match ? match[1] : ctor === null ? 'null' : '';
+}
+
+const objectToString = Object.prototype.toString;
+
+const toTypeString = (value) => objectToString.call(value);
+
+const toRawType = (value) => {
+  // extract "RawType" from strings like "[object RawType]"
+  return toTypeString(value).slice(8, -1);
+};
+
+function makeMap(str, expectsLowerCase) {
+  const map = Object.create(null);
+  const list = str.split(',');
+  for (let i = 0; i < list.length; i++) {
+    map[list[i]] = true;
+  }
+  return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val];
+}
+
+const isSimpleType = /*#__PURE__*/ makeMap('String,Number,Boolean,Function,Symbol,BigInt');
+
+function checkType(value, type) {
+  if (typeof type === "undefined" || type === null) { return true; }
+  const check = (v, t) => {
+    let valid;
+    const expectedType = getTypeName(t);
+    if (isSimpleType(expectedType)) {
+      const t = typeof v;
+      valid = t === expectedType.toLowerCase();
+      // for primitive wrapper objects
+      if (!valid && t === 'object') {
+        valid = v instanceof t;
+      }
+    }
+    else if (expectedType === 'Object') {
+      valid = isObject(v);
+    }
+    else if (expectedType === 'Array') {
+      valid = isArray(v);
+    }
+    else if (expectedType === 'null') {
+      valid = v === null;
+    }
+    else {
+      valid = v instanceof t;
+    }
+    return valid;
+  }
+  if (toRawType(type) == "Array") {
+    //多个类型
+    let result = false;
+    for (let t of type) {
+      if (check(value, t)) {
+        return true;
+      }
+    }
+    return false;
+  } else {
+    return check(value, type);
+  }
+}
+
+export { checkType, toRawType, getTypeName }

package/utils/JsViewEngineWidget/MetroWidget/AnimationManager.ts

@@ -0,0 +1,72 @@
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+
+export class AnimationManager {
+  private animList: Set<AnimationNode> = new Set();
+  private frameCount: number = 0;
+
+  public tryStartAnim(count: number, anim: AnimationNode, index: number) {
+    if (count > this.frameCount) {
+      for (let a of this.animList) {
+        a.stop();
+      }
+      this.animList.clear();
+      this.frameCount = count;
+      this.animList.add(anim);
+      anim.start();
+    } else if (count == this.frameCount) {
+      this.animList.add(anim);
+      anim.start();
+    } else {
+      // console.log("anim expired")
+    }
+  }
+}
+
+export class AnimationTools {
+  public static getDivSlideAnim(div: any, fromX: number, fromY: number, toX: number, toY: number, animInfo: any): AnimationNode {
+    if (animInfo) {
+      let duration: number;
+      if (typeof animInfo.duration == "number") {
+        duration = animInfo.duration;
+      } else if (typeof animInfo.speed == "number") {
+        const deltaX = Math.abs(fromX - toX);
+        const deltaY = Math.abs(fromY - toY);
+        duration = Math.round(deltaX === 0 ? deltaY / animInfo.speed : deltaX / animInfo.speed);
+      } else {
+        throw new Error("animation duration not set.")
+      }
+
+      let slideAnimation = new Forge.TranslateAnimation(
+        fromX,
+        toX,
+        fromY,
+        toY,
+        duration,
+        animInfo.easing
+      );
+      slideAnimation.SetAnimationListener(
+        new Forge.AnimationListener(animInfo.onStart, animInfo.onEnd, null)
+      );
+      return new AnimationNode(div, slideAnimation);
+    } else {
+      throw new Error("animInfo is null.")
+    }
+  }
+}
+
+class AnimationNode {
+  private mDiv: any;
+  private mAnimation: any;
+  constructor(div: any, anim: any) {
+    this.mDiv = div;
+    this.mAnimation = anim;
+  }
+
+  public start() {
+    this.mDiv.jsvGetProxyView(true).StartAnimation(this.mAnimation);
+  }
+
+  public stop() {
+    this.mDiv.jsvGetProxyView(true).StopAnimation();
+  }
+}

package/utils/JsViewEngineWidget/MetroWidget/Const.ts

@@ -0,0 +1,24 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-09-21 10:09:15
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-09-21 10:15:34
+ * @Description: file content
+ */
+const METRO_WIDGET = {
+  SLIDE: 0x1,
+  CHILD_SLIDE_EVENT: 0x1 << 1,
+  ON_KEY_DOWN: 0x1 << 2,
+
+  //resize locate const
+  ITEM_RESIZE: {
+    ANCHOR: 1,
+    WIDGET_SET: 2,
+    CUSTOMER_SET: 3
+  }
+};
+
+export {
+  METRO_WIDGET,
+  METRO_WIDGET as METRO_WIDGET_CONST,
+}

package/utils/JsViewEngineWidget/MetroWidget/ListWidget.vue

@@ -0,0 +1,295 @@
+<!--
+  只显示单列/行的MetroWidget
+-->
+<script setup>
+import { ref, shallowRef, computed } from "vue";
+import { setup, RENDER_ITEM_BREAK_KEY } from "./MetroWidgetSetup";
+import {
+  VERTICAL,
+  HORIZONTAL,
+  SlideSetting,
+  SeamlessSlide,
+} from "../WidgetCommon";
+
+const props = defineProps({
+  padding: {
+    type: Object,
+    default() {
+      return {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      };
+    },
+  },
+  direction: {
+    type: Symbol,
+    default: HORIZONTAL,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  width: {
+    type: Number,
+    required: true,
+  },
+  loopFocus: {
+    type: Boolean,
+    default: false,
+  },
+  onEdge: {
+    type: Function,
+    default: null,
+  },
+  onFocus: {
+    type: Function,
+    default: null,
+  },
+  onBlur: {
+    type: Function,
+    default: null,
+  },
+  loadAll: {
+    type: Boolean,
+    default: false,
+  },
+  enableTouch: {
+    type: Boolean,
+    default: false,
+  },
+  flingPageWidth: {
+    type: Number,
+    default: -1,
+  },
+  flingPageEdge: {
+    type: Number,
+    default: 1 / 4,
+  },
+  dispatcher: {
+    type: Object,
+  },
+  measures: {
+    type: Function,
+    required: true,
+  },
+  initFocusId: {
+    type: Number,
+    default: 0,
+  },
+  data: {
+    type: Array,
+  },
+  left: {
+    type: Number,
+    default: 0,
+  },
+  top: {
+    type: Number,
+    default: 0,
+  },
+  name: {
+    type: String,
+  },
+  supportHistoryPath: {
+    type: Boolean,
+    default: true,
+  },
+  itemConfig: {
+    type: Function,
+  },
+  onFocusChange: {
+    type: Function,
+  },
+  slideSetting: {
+    type: SlideSetting,
+    default() {
+      return new SeamlessSlide({ startPercent: 0.2, endPercent: 0.8 });
+    },
+  },
+  layoutType: {
+    type: String,
+    default: "relative",
+  },
+  enableItemRenderBreak: {
+    type: Boolean,
+    default: false,
+  },
+  provideData: {
+    type: Function,
+  },
+  placeHolderSetting: {
+    type: Object,
+    default() {
+      return {
+        backgroundColor: "rgba(255,255,255,0.5)",
+      };
+    },
+  },
+  sendFocusRectEvent: {
+    type: Boolean,
+    default: false,
+  },
+  keepTraceRange: {
+    type: Number,
+    default: 0,
+  },
+  onScroll: {
+    type: Function,
+  },
+  focusMoveType: {
+    type: Number,
+    default: 0,
+  },
+  disableClip: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const renderBreakKey = props.enableItemRenderBreak ? RENDER_ITEM_BREAK_KEY : "";
+const touchContainerW = ref(0);
+const touchContainerH = ref(0);
+const itemRender = ref(!props.enableItemRenderBreak);
+const locateDiv = shallowRef(null);
+const renderData = shallowRef([]);
+const slideDiv = shallowRef(null);
+const slideDivLeft = ref(0);
+const slideDivTop = ref(0);
+const itemResizeSlideDiv = shallowRef(null);
+const itemResizeSlideLeft = ref(0);
+const itemResizeSlideTop = ref(0);
+const focusNode = shallowRef(null);
+const pageUpdateToken = ref(0);
+
+const {
+  widgetRectInfo,
+  focusBlockOnFocus,
+  focusBlockOnBlur,
+  focusBlockOnKeyDown,
+  focusBlockOnCustomerEvent,
+  _onFocusableItemEdge,
+  exportObject,
+} = setup(
+  props,
+  touchContainerW,
+  touchContainerH,
+  itemRender,
+  locateDiv,
+  renderData,
+  slideDiv,
+  slideDivLeft,
+  slideDivTop,
+  itemResizeSlideDiv,
+  itemResizeSlideLeft,
+  itemResizeSlideTop,
+  focusNode,
+  pageUpdateToken,
+  "list"
+);
+
+defineExpose(exportObject);
+</script>
+
+<template>
+  <div
+    :style="{
+      left: left,
+      top: top,
+      width: width,
+      height: height,
+      overflow: disableClip ? null : 'hidden',
+    }"
+  >
+    <div
+      :style="{
+        left: widgetRectInfo.padding.left,
+        top: widgetRectInfo.padding.top,
+      }"
+    >
+      <div
+        id="slideDiv"
+        key="touchcontainer"
+        ref="slideDiv"
+        :style="{
+          left: slideDivLeft,
+          top: slideDivTop,
+          width: touchContainerW,
+          height: touchContainerH,
+        }"
+      >
+        <div>
+          <slot name="background"></slot>
+        </div>
+        <div ref="locateDiv">
+          <jsv-focus-block
+            ref="focusNode"
+            :name="name"
+            :onAction="{
+              onFocus: focusBlockOnFocus,
+              onBlur: focusBlockOnBlur,
+              onKeyDown: focusBlockOnKeyDown,
+              onCustomerEvent: focusBlockOnCustomerEvent,
+            }"
+          >
+            <div
+              id="itemResizeSlide"
+              key="itemResizeSlide"
+              ref="itemResizeSlideDiv"
+              :style="{
+                left: itemResizeSlideLeft,
+                top: itemResizeSlideTop,
+              }"
+            >
+              <div
+                v-for="item in renderData"
+                :key="pageUpdateToken + '_' + item.index"
+                :ref="item.divRef"
+                :style="{
+                  ...item.renderStyle,
+                }"
+              >
+                <div
+                  v-if="!enableItemRenderBreak || item.mounted || itemRender"
+                  :key="renderBreakKey"
+                  :ref="item.slotRef"
+                >
+                  <slot
+                    name="renderItem"
+                    :key="renderBreakKey"
+                    :data="item.customerData"
+                    :onEdge="_onFocusableItemEdge"
+                    :onAction="item.registerObj"
+                    :query="item.query"
+                    :onItemEdge="_onFocusableItemEdge"
+                  ></slot>
+                </div>
+                <div
+                  v-if="
+                    enableItemRenderBreak &&
+                    placeHolderSetting &&
+                    !item.mounted.value
+                  "
+                  :style="{
+                    width:
+                      item.renderStyle.width -
+                      (placeHolderSetting.gap ? placeHolderSetting.gap : 0),
+                    height:
+                      item.renderStyle.height -
+                      (placeHolderSetting.gap ? placeHolderSetting.gap : 0),
+                    backgroundColor: placeHolderSetting.backgroundColor,
+                    borderRadius: placeHolderSetting.borderRadius,
+                  }"
+                ></div>
+              </div>
+            </div>
+          </jsv-focus-block>
+        </div>
+        <div>
+          <slot name="foreground"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>