@shijiu/jsview-vue 2.1.25 → 2.1.200

package/utils/JsViewVueWidget/JsvMindMap/JsvMindMap.vue

@@ -0,0 +1,653 @@
+<!-- 
+ * @Author: ChenChanghua
+ * @Date: 2023-11-06 16:08:58
+ * @Description: file content
+ -->
+
+<!-- 
+[界面概述]
+  思维导图控件
+ 
+[控件介绍]
+  JsvMindMap:
+    props:
+      name:             {string}      焦点name
+      provideData:      {function}    提供数据的函数
+      width:            {number}      组件宽
+      height:           {number}      组件高
+      formatNode:       {function}    接受数据, 返回标准格式节点信息的函数
+                                        {
+                                          left: number, left(必需)
+                                          top: number, top(必需)
+                                          width: number, width(必需)
+                                          height: number, height(必需)
+                                          id: string, 节点的唯一id(必需)
+                                          childrenList: Array<any>, 子数据列表
+                                          moveType: "star" | "layer" | "inherit", 节点布局类型(可选)
+                                          lineStyle: object 此节点线的style
+                                            { 
+                                              lineWidth: number, 线宽
+                                              backgroundColor: string, 线的颜色(与backgroundImage互斥)
+                                              backgroundImage: string, 线的图片(与backgroundColor互斥)
+                                              borderRadius: string | number, 线的圆角设置
+                                            }
+                                        }
+      left:             {number}      组件left
+      top:              {number}      组件top
+      slideAnim:        {object}      滚动动画设置, { duration: number, easing?: string }, duration为毫秒
+      onEdge:           {function}    到达边缘回调
+      focusRectPadding: {number}      焦点区域内边距
+      renderRectMargin: {number}      描画区域外边距
+    methods:
+      getCurFocusNode
+        @description 获取当前焦点的数据
+        @return {object} 当前焦点节点的数据
+      getCurFocusId
+        @description 获取当前焦点的id
+        @return {string} 当前节点的id
+      getCurVisibleRect
+        @description 获取当前的可视区域
+        @return {object} 可视区域{x: number, y: number, width: number, height: number}
+      slideTo
+        @description 滚动到指定位置
+        @params {int} x x坐标
+        @params {int} y y坐标
+        @params {object} animInfo 动画设置, 为null时不做动画. {duration: number, easing: string, onEnd: function}
+      setFocusTo
+        @description 设置焦点
+        @params {string} id 目标节点的id
+        @params {boolean} needSlide  是否需要滚动
+        @params {object} animInfo 滚动动画设置
+      moveInItem
+        @description 把指定节点移入焦点区域
+        @params {string} id 目标节点的id
+        @params {object} animInfo 动画信息
+      moveFocus
+        @description 往指定方向移动焦点
+        @params {string} direction 移动方向 "left" | "top" | "right" | "bottom"
+      getEntireTreeBoundingSize
+        @description 获取整个树的包围框宽高
+        @return {object} 宽高 {width: number, height: number}
+      refreshData
+        @description 刷新数据
+                                        
+[额外说明]
+1. 焦点移动逻辑
+  每个节点首先有个父方向, 若父节点是star模式, 则父方向由父节点相对位置决定, 若父节点是layer模式, 则父方向为父节点子方向的反向
+  layer模式的节点, 有一个子方向, 其子方向是所有子所在的一侧方向(只有上下左右四侧), 若无子, 则父方向的反向为子方向. 确定了父方向和子方向后, 剩余两个方向则寻找该方向最近的兄弟节点, 若无则寻找最近分支上最近的同级或者叶节点
+  star模式的节点, 除了父方向, 剩余三个方向均寻找相应方向的最近子节点, 若未找到则按layer寻找兄弟节点相同的逻辑寻找同级节点
+ -->
+<script setup>
+import { ref, shallowRef, reactive } from "vue";
+import { DataNode } from "./DataTree";
+import { Rect, opposite } from "./Geometry";
+import RBush from "./rtree";
+import { EdgeDirection } from "../../JsViewEngineWidget/WidgetCommon";
+import JsvLine from "../JsvLine";
+
+const TAG = "JsvMindMap";
+const dirMap = {  
+  37: "left",
+  38: "top",
+  39: "right",
+  40: "bottom",
+};
+const edgeDirectionMap = {
+  37: EdgeDirection.left,
+  38: EdgeDirection.top,
+  39: EdgeDirection.right,
+  40: EdgeDirection.bottom,
+};
+const dirToKeyCode = {
+  left: 37,
+  top: 38,
+  right: 39,
+  bottom: 40,
+};
+const defaultLineStyle = {
+  lineWidth: 5,
+  backgroundColor: "#000000",
+};
+
+const props = defineProps({
+  name: {
+    //组件的焦点名
+    type: String,
+    required: true,
+  },
+  provideData: {
+    //提供数据的回调
+    type: Function,
+    required: true,
+  },
+  width: {
+    //组件宽
+    type: Number,
+    required: true,
+  },
+  height: {
+    //组件高
+    type: Number,
+    required: true,
+  },
+  formatNode: {
+    /**
+     * 标准化节点数据的函数, (data, depth) => Object
+     * 节点数据格式
+     *  {
+     *    left: number, left(必需)
+     *    top: number, top(必需)
+     *    width: number, width(必需)
+     *    height: number, height(必需)
+     *    childrenList: Array<any>, 子数据列表
+     *    id: string, 节点的唯一id(必需)
+     *    moveType: "star" | "layer" | "inherit", 节点布局类型(可选)
+     *    lineStyle: { 此节点线的style
+     *      lineWidth: number, 线宽
+     *      backgroundColor: string, 线的颜色(与backgroundImage互斥)
+     *      backgroundImage: string, 线的图片(与backgroundColor互斥)
+     *      borderRadius: string | number, 线的圆角设置
+     *    }
+     *  }
+     */
+    type: Function,
+    required: true,
+  },
+  left: {
+    //组件left
+    type: Number,
+    default: 0,
+  },
+  top: {
+    //组件top
+    type: Number,
+    default: 0,
+  },
+  slideAnim: {
+    type: Object,
+  },
+  onEdge: {
+    //组件到达边缘的回调
+    type: Function,
+  },
+  focusRectPadding: {
+    //组件区域向内收缩获得的焦点区域, 获焦的节点会移动到该区域内
+    type: Number,
+    default: 50,
+  },
+  renderRectMargin: {
+    //组件区域向外延展获得的描画区域, 区域内的节点会描画
+    type: Number,
+    default: 100,
+  },
+});
+
+let rootNode = null;
+const currentFocusId = ref(0);
+let preFocusNode = null;
+let curFocusNode = null;
+const locateDiv = shallowRef(null);
+const renderNodeList = shallowRef([]);
+const renderLineList = shallowRef([]);
+const widgetWidth = 500;
+const widgetHeight = 500;
+let widgetFocused = false;
+let rTree = null;
+const slideAnimInfo = {
+  duration: props.slideAnim?.duration ?? 200,
+  easing: props.slideAnim?.easing ?? "",
+  onEnd: props.slideAnim?.easing ?? (() => {}),
+};
+const viewPortRect = new Rect(0, 0, widgetWidth, widgetHeight); // 组件的可视范围
+
+// 描画范围
+const getRenderRect = () => {
+  return new Rect(
+    viewPortRect.x - props.renderRectMargin,
+    viewPortRect.y - props.renderRectMargin,
+    viewPortRect.width + 2 * props.renderRectMargin,
+    viewPortRect.height + 2 * props.renderRectMargin
+  );
+};
+
+//item获焦时移入此范围
+const getFocusRect = () => {
+  return new Rect(
+    viewPortRect.x + props.focusRectPadding,
+    viewPortRect.y + props.focusRectPadding,
+    viewPortRect.width - 2 * props.focusRectPadding,
+    viewPortRect.height - 2 * props.focusRectPadding
+  );
+};
+
+const buildNode = (root, data) => {
+  let depth = 0;
+  if (root != null) {
+    depth = root.depth + 1;
+  }
+  const formatedData = props.formatNode(data, root ? root.depth + 1 : 0);
+  const dataNode = new DataNode(
+    new Rect(
+      formatedData.left,
+      formatedData.top,
+      formatedData.width,
+      formatedData.height
+    ),
+    depth,
+    formatedData.id,
+    data,
+    formatedData.moveType ?? "layer"
+  );
+  dataNode.setLineStyle(formatedData.lineStyle ?? defaultLineStyle);
+  if (root == null) {
+    rootNode = dataNode;
+  } else {
+    root.insert(dataNode);
+  }
+
+  if (formatedData.childrenList?.length > 0) {
+    for (let child of formatedData.childrenList) {
+      buildNode(dataNode, child);
+    }
+  }
+};
+
+//构建树
+const buildTree = () => {
+  //clean old tree
+  rootNode = null;
+  rTree = null;
+
+  //build new tree
+  buildNode(null, props.provideData());
+  const allNodeList = rootNode.all();
+  allNodeList.forEach((i) => i.calculateMoveInfo());
+  rTree = new RBush();
+  allNodeList.forEach((node) => rTree.insert(node));
+
+  //线的处理必须在moveInfo计算完成后处理
+  for (let i = 1; i < allNodeList.length; ++i) {
+    const node = allNodeList[i];
+    const parentDir = node.getParentDir();
+    const lineStyle = node.parent.getLineStyle();
+    const lineObj = {
+      startPos: node.parent.rect.getEdge(opposite(parentDir)).center,
+      endPos: node.rect.getEdge(parentDir).center,
+      idToken: node.parent.idToken + "_" + node.idToken,
+      ...lineStyle,
+    };
+    //node显示时, 其向父的连线和向子的连线均要显示, 因此同时往父子addLine
+    node.addLine(lineObj);
+    node.parent.addLine(lineObj);
+  }
+  curFocusNode = rootNode;
+};
+
+const visibleListStore = {
+  _tmpList: [],
+  _curList: [],
+  _merge(l1, l2) {
+    const pre = l1.concat();
+    const set = new Set(pre);
+    l2.forEach((i) => set.add(i));
+    return Array.from(set);
+  },
+  setCurList(list) {
+    const newTmp = this._merge(this._curList, list);
+    this._tmpList = this._merge(this._tmpList, newTmp);
+    this._curList = list;
+  },
+  getTmp() {
+    return this._tmpList;
+  },
+  getCur() {
+    this._tmpList = this._curList;
+    return this._curList;
+  },
+};
+
+const setFocusNode = (node) => {
+  if (!node) return;
+  preFocusNode = curFocusNode;
+  curFocusNode = node;
+  currentFocusId.value = curFocusNode.customerId;
+
+  //item的onFocus, onBlur
+  if (widgetFocused) {
+    preFocusNode?.onBlur();
+    curFocusNode?.onFocus();
+  }
+};
+
+//将node移入可视范围
+const moveInNode = (node, animInfo) => {
+  if (node) {
+    const moveTarget = getMoveInfo(node);
+    if (moveTarget) {
+      moveTo(moveTarget, animInfo);
+    }
+  }
+};
+
+const focusToNext = (keyCode) => {
+  const dirStr = dirMap[keyCode];
+  const nextNode = curFocusNode.findNode(dirStr);
+  if (nextNode) {
+    //设置当前焦点node
+    setFocusNode(nextNode);
+
+    //移动动画
+    moveInNode(curFocusNode, {
+      duration: slideAnimInfo.duration,
+    });
+  } else {
+    //到达边缘
+    if (props.onEdge) {
+      props.onEdge({
+        direction: edgeDirectionMap[keyCode],
+        rect: {
+          x: curFocusNode?.rect.x ?? 0,
+          y: curFocusNode?.rect.y ?? 0,
+          width: curFocusNode?.rect.width ?? 0,
+          height: curFocusNode?.rect.height ?? 0,
+        },
+      });
+    }
+  }
+};
+
+const locateDivPos = reactive({
+  left: viewPortRect.x,
+  top: viewPortRect.y,
+});
+
+const moveTo = (info, animInfo) => {
+  if (!info) return;
+  //info: {left: number, top: number} 新的focusRect的x, y
+  if (info.x != viewPortRect.x || info.y != viewPortRect.y) {
+    viewPortRect.x = info.x;
+    viewPortRect.y = info.y;
+    const preLeft = locateDivPos.left,
+      preTop = locateDivPos.top;
+    locateDivPos.left = -viewPortRect.x;
+    locateDivPos.top = -viewPortRect.y;
+
+    visibleListStore.setCurList(rTree.search(getRenderRect()));
+
+    if (animInfo && !isNaN(animInfo.duration)) {
+      const forgeAnim = new Forge.TranslateAnimation(
+        preLeft - locateDivPos.left,
+        0,
+        preTop - locateDivPos.top,
+        0,
+        animInfo.duration,
+        animInfo.easing
+      );
+      forgeAnim.SetAnimationListener(
+        new Forge.AnimationListener(
+          null,
+          () => {
+            updateVisible(visibleListStore.getCur());
+            animInfo.onEnd?.();
+          },
+          null
+        )
+      );
+      locateDiv.value?.jsvGetProxyView(true).StartAnimation(forgeAnim);
+      updateVisible(visibleListStore.getTmp());
+    } else {
+      updateVisible(visibleListStore.getCur());
+    }
+  }
+};
+
+const getMoveInfo = (node) => {
+  const rect = node.rect;
+  const rectCenter = rect.center;
+  const focusRect = getFocusRect();
+  const centerTargetRect = new Rect(
+    focusRect.x + Math.round(rect.width / 2),
+    focusRect.y + Math.round(rect.height / 2),
+    focusRect.width - rect.width,
+    focusRect.height - rect.height
+  );
+  if (!centerTargetRect.containPoint(rectCenter)) {
+    //不在可视范围内
+    const point = centerTargetRect.getClosestPoint(rectCenter);
+    return {
+      x: viewPortRect.x + rectCenter.x - point.x,
+      y: viewPortRect.y + rectCenter.y - point.y,
+    };
+  }
+  return null;
+};
+
+const updateVisible = (list) => {
+  //根据显示区域获取可视item list
+  renderNodeList.value = list;
+  //更新线的列表
+  const lineSet = new Set();
+  for (let node of list) {
+    let list = node.getLineList();
+    for (let line of list) {
+      lineSet.add(line);
+    }
+  }
+  renderLineList.value = Array.from(lineSet);
+};
+
+const focusBlockOnFocus = () => {
+  widgetFocused = true;
+  curFocusNode?.onFocus();
+};
+
+const focusBlockOnBlur = () => {
+  widgetFocused = false;
+  curFocusNode?.onBlur();
+};
+
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 37:
+    case 38:
+    case 39:
+    case 40:
+      {
+        focusToNext(ev.keyCode);
+      }
+      return true;
+    case 13:
+      curFocusNode?.onClick();
+      return true;
+    default:
+      return false;
+  }
+};
+
+//init
+{
+  buildTree();
+  //初始焦点放置在屏幕中间
+  const center = curFocusNode.rect.center;
+  const viewPortPos = {
+    x: Math.round(center.x - viewPortRect.width / 2),
+    y: Math.round(center.y - viewPortRect.height / 2),
+  };
+  moveTo(viewPortPos);
+}
+
+// expose methos
+/**
+ * 获取当前获焦的节点
+ */
+const getCurFocusId = () => {
+  return currentFocusId.value;
+};
+
+const getCurFocusNode = () => {
+  return curFocusNode.customerData;
+};
+
+/**
+ * 获取当前的可视区域
+ */
+const getCurVisibleRect = () => {
+  return viewPortRect;
+};
+
+/**
+ * 移动到指定位置
+ * @param {int} x
+ * @param {int} y
+ * @param {object} animInfo
+ */
+const slideTo = (x, y, animInfo) => {
+  if (isNaN(x) || isNaN(y)) {
+    console.warn(TAG, "slideTo failed: x and y must be number.");
+    return;
+  }
+  moveTo({ x, y }, animInfo);
+};
+
+/**
+ * 设置焦点
+ * @param {string} id 节点id
+ * @param {boolean} needSlide 是否要将节点移入可视范围
+ * @param {object} animInfo 移动动画
+ */
+const setFocusTo = (id, needSlide = true, animInfo) => {
+  const node = rootNode.find((n) => n.customerId == id);
+  if (!node) {
+    console.warn(TAG, `setFocusTo failed: node ${id} not found.`);
+    return;
+  }
+  setFocusNode(node);
+  if (needSlide) {
+    moveInNode(node, animInfo);
+  }
+};
+
+/**
+ * 将制定item移入可视范围, 若已在可视范围, 则不动
+ * @param {string} id 节点的id
+ * @param {object} animInfo 动画信息
+ */
+const moveInItem = (id, animInfo) => {
+  const node = rootNode.find((n) => n.customerId == id);
+  if (!node) {
+    console.warn(TAG, `moveInItem failed: node ${id} not found.`);
+    return;
+  }
+  moveInNode(node, animInfo);
+};
+
+/**
+ * 获取全图的包围框大小
+ */
+const getEntireTreeBoundingSize = () => {
+  const data = rTree.data;
+  return {
+    width: data.maxX - data.minX + 1,
+    height: data.maxY - data.minY + 1,
+  };
+};
+
+/**
+ * 移动焦点
+ * @param {string} direction "left" | "top" | "right" | "bottom"
+ */
+const moveFocus = (direction) => {
+  if (!direction in dirToKeyCode) {
+    console.warn(TAG, "moveFocus failed: undefined direction " + direction);
+  }
+  focusToNext(dirToKeyCode[direction]);
+};
+
+/**
+ * 刷新数据
+ */
+const refreshData = () => {
+  buildTree();
+  //TODO 刷新后的位置保持
+  const center = curFocusNode.rect.center;
+  const viewPortPos = {
+    x: Math.round(center.x - viewPortRect.width / 2),
+    y: Math.round(center.y - viewPortRect.height / 2),
+  };
+  moveTo(viewPortPos);
+};
+
+const exposeObj = {
+  getCurFocusNode,
+  getCurFocusId,
+  getCurVisibleRect,
+  slideTo,
+  setFocusTo,
+  moveInItem,
+  moveFocus,
+  getEntireTreeBoundingSize,
+  refreshData,
+};
+defineExpose(exposeObj);
+
+//debug code
+// window.rTree = rTree;
+// window.dataTree = rootNode;
+// window.mindMap = exposeObj;
+</script>
+
+<template>
+  <div
+    :style="{
+      left: props.left,
+      top: props.top,
+      width: viewPortRect.width,
+      height: viewPortRect.height,
+      overflow: 'hidden',
+    }"
+  >
+    <div
+      ref="locateDiv"
+      :style="{
+        left: locateDivPos.left,
+        top: locateDivPos.top,
+        width: viewPortRect.width,
+        height: viewPortRect.height,
+      }"
+    >
+      <slot name="background"></slot>
+      <jsv-focus-block
+        autoFocus
+        :onAction="{
+          onKeyDown,
+          onFocus: focusBlockOnFocus,
+          onBlur: focusBlockOnBlur,
+        }"
+      >
+        <jsv-line
+          v-for="item in renderLineList"
+          v-bind="item"
+          :key="item.idToken"
+        >
+        </jsv-line>
+        <div
+          v-for="item in renderNodeList"
+          :key="item.idToken"
+          :ref="item.onRef"
+          :style="{
+            left: item.rect.left,
+            top: item.rect.top,
+            width: item.rect.width,
+            height: item.rect.height,
+          }"
+        >
+          <slot
+            :data="item.customerData"
+            :handler="exposeObj"
+            :onAction="item.getRegister()"
+          ></slot>
+        </div>
+      </jsv-focus-block>
+    </div>
+  </div>
+</template>

package/utils/JsViewVueWidget/JsvMindMap/index.js

@@ -0,0 +1 @@
+export { default as JsvMindMap } from "./JsvMindMap.vue"