@tmagic/editor 1.3.4 → 1.3.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.4",
+  "version": "1.3.6",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -29,7 +29,7 @@
     "clear:type": "rimraf ./types"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=18"
   },
   "repository": {
     "type": "git",
@@ -46,15 +46,15 @@
   ],
   "dependencies": {
     "@babel/core": "^7.18.0",
-    "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.4",
-    "@tmagic/dep": "1.3.4",
-    "@tmagic/design": "1.3.4",
-    "@tmagic/form": "1.3.4",
-    "@tmagic/schema": "1.3.4",
-    "@tmagic/stage": "1.3.4",
-    "@tmagic/table": "1.3.4",
-    "@tmagic/utils": "1.3.4",
+    "@element-plus/icons-vue": "^2.3.1",
+    "@tmagic/core": "1.3.6",
+    "@tmagic/dep": "1.3.6",
+    "@tmagic/design": "1.3.6",
+    "@tmagic/form": "1.3.6",
+    "@tmagic/schema": "1.3.6",
+    "@tmagic/stage": "1.3.6",
+    "@tmagic/table": "1.3.6",
+    "@tmagic/utils": "1.3.6",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -67,24 +67,24 @@
     "vue": "^3.3.8"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.4",
-    "@tmagic/form": "1.3.4",
+    "@tmagic/design": "1.3.6",
+    "@tmagic/form": "1.3.6",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.8"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
-    "@types/node": "^15.12.4",
+    "@types/node": "^18.19.0",
     "@types/serialize-javascript": "^5.0.1",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^4.5.2",
     "@vue/compiler-sfc": "^3.3.8",
     "@vue/test-utils": "^2.3.2",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "tsc-alias": "^1.8.5",
     "typescript": "^5.0.4",
-    "vite": "^4.4.4",
-    "vue-tsc": "^1.6.5"
+    "vite": "^5.0.7",
+    "vue-tsc": "^1.8.25"
   }
 }

package/src/Editor.vue

@@ -25,6 +25,10 @@
             <slot name="layer-node-content" :data="data"></slot>
           </template>
 
+          <template #layer-node-label="{ data }">
+            <slot name="layer-node-label" :data="data"></slot>
+          </template>
+
           <template #layer-node-tool="{ data }">
             <slot name="layer-node-tool" :data="data"></slot>
           </template>
@@ -171,6 +175,7 @@ provide(
     containerHighlightDuration: props.containerHighlightDuration,
     containerHighlightType: props.containerHighlightType,
     disabledDragStart: props.disabledDragStart,
+    renderType: props.renderType,
   }),
 );
 

package/src/components/FloatingBox.vue

@@ -0,0 +1,117 @@
+<template>
+  <Teleport to="body" v-if="visible">
+    <div ref="target" class="m-editor-float-box" :style="style">
+      <div ref="dragTarget" class="m-editor-float-box-title">
+        <slot name="title">
+          <span>{{ title }}</span>
+        </slot>
+        <div>
+          <TMagicButton text size="small" :icon="Close" @click="closeHandler"></TMagicButton>
+        </div>
+      </div>
+      <div class="m-editor-float-box-body">
+        <slot name="body"></slot>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+import { Close } from '@element-plus/icons-vue';
+import VanillaMoveable from 'moveable';
+
+import { TMagicButton } from '@tmagic/design';
+
+interface Position {
+  left: number;
+  top: number;
+}
+
+interface Rect {
+  width: number | string;
+  height: number | string;
+}
+
+const props = withDefaults(defineProps<{ visible: boolean; position?: Position; rect?: Rect; title?: string }>(), {
+  visible: false,
+  title: '',
+  position: () => ({ left: 0, top: 0 }),
+  rect: () => ({ width: 'auto', height: 'auto' }),
+});
+
+const emit = defineEmits<{
+  'update:visible': [boolean];
+}>();
+
+const target = ref<HTMLDivElement>();
+const dragTarget = ref<HTMLDivElement>();
+
+const style = computed(() => ({
+  left: `${props.position.left}px`,
+  top: `${props.position.top}px`,
+  width: typeof props.rect.width === 'string' ? props.rect.width : `${props.rect.width}px`,
+  height: typeof props.rect.height === 'string' ? props.rect.height : `${props.rect.height}px`,
+}));
+
+let moveable: VanillaMoveable | null = null;
+
+const initMoveable = () => {
+  moveable = new VanillaMoveable(globalThis.document.body, {
+    className: 'm-editor-floating-box-moveable',
+    target: target.value,
+    draggable: true,
+    resizable: true,
+    edge: true,
+    keepRatio: false,
+    origin: false,
+    snappable: true,
+    dragTarget: dragTarget.value,
+    dragTargetSelf: false,
+    linePadding: 10,
+    controlPadding: 10,
+  });
+
+  moveable.on('drag', (e) => {
+    e.target.style.transform = e.transform;
+  });
+
+  moveable.on('resize', (e) => {
+    e.target.style.width = `${e.width}px`;
+    e.target.style.height = `${e.height}px`;
+    e.target.style.transform = e.drag.transform;
+  });
+};
+
+const destroyMoveable = () => {
+  moveable?.destroy();
+  moveable = null;
+};
+
+watch(
+  () => props.visible,
+  async (visible) => {
+    if (visible) {
+      await nextTick();
+      initMoveable();
+    } else {
+      destroyMoveable();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+onBeforeUnmount(() => {
+  destroyMoveable();
+});
+
+const closeHandler = () => {
+  emit('update:visible', false);
+};
+
+defineExpose({
+  target,
+});
+</script>

package/src/components/Tree.vue

@@ -6,6 +6,10 @@
           <slot name="tree-node-content" :data="nodeData"> </slot>
         </template>
 
+        <template #tree-node-label="{ data: nodeData }">
+          <slot name="tree-node-label" :data="nodeData"> </slot>
+        </template>
+
         <template #tree-node-tool="{ data: nodeData }">
           <slot name="tree-node-tool" :data="nodeData"> </slot>
         </template>
@@ -28,6 +32,7 @@ import TreeNode from './TreeNode.vue';
 
 defineSlots<{
   'tree-node-content'(props: { data: TreeNodeData }): any;
+  'tree-node-label'(props: { data: TreeNodeData }): any;
   'tree-node-tool'(props: { data: TreeNodeData }): any;
 }>();
 

package/src/components/TreeNode.vue

@@ -25,7 +25,9 @@
 
       <div class="tree-node-content" @click="nodeClickHandler">
         <slot name="tree-node-content" :data="data">
-          <div class="tree-node-label">{{ `${data.name} (${data.id})` }}</div>
+          <div class="tree-node-label">
+            <slot name="tree-node-label" :data="data">{{ `${data.name} (${data.id})` }}</slot>
+          </div>
           <div class="tree-node-tool">
             <slot name="tree-node-tool" :data="data"></slot>
           </div>
@@ -44,6 +46,9 @@
         <template #tree-node-content="{ data: nodeData }">
           <slot name="tree-node-content" :data="nodeData"> </slot>
         </template>
+        <template #tree-node-label="{ data: nodeData }">
+          <slot name="tree-node-label" :data="nodeData"> </slot>
+        </template>
         <template #tree-node-tool="{ data: nodeData }">
           <slot name="tree-node-tool" :data="nodeData"> </slot>
         </template>
@@ -63,6 +68,7 @@ import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
 import { updateStatus } from '@editor/utils/tree';
 
 defineSlots<{
+  'tree-node-label'(props: { data: TreeNodeData }): any;
   'tree-node-tool'(props: { data: TreeNodeData }): any;
   'tree-node-content'(props: { data: TreeNodeData }): any;
 }>();
@@ -108,7 +114,7 @@ const selected = computed(() => nodeStatus.value.selected);
 const visible = computed(() => nodeStatus.value.visible);
 const draggable = computed(() => nodeStatus.value.draggable);
 
-const hasChilren = computed(() => props.data.items && props.data.items.length > 0);
+const hasChilren = computed(() => props.data.items?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
 
 const handleDragStart = (event: DragEvent) => {
   treeEmit?.('node-dragstart', event, props.data);

package/src/editorProps.ts

@@ -1,4 +1,5 @@
 import type { EventOption } from '@tmagic/core';
+import { CustomTargetOptions } from '@tmagic/dep';
 import type { FormConfig, FormState } from '@tmagic/form';
 import type { DataSourceSchema, Id, MApp, MNode } from '@tmagic/schema';
 import StageCore, {
@@ -6,6 +7,7 @@ import StageCore, {
   ContainerHighlightType,
   CustomizeMoveableOptionsCallbackConfig,
   MoveableOptions,
+  RenderType,
   UpdateDragEl,
 } from '@tmagic/stage';
 
@@ -38,6 +40,8 @@ export interface EditorProps {
   render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
   /** 中间工作区域中画布通过iframe渲染时的页面url */
   runtimeUrl?: string;
+  /** 是用iframe渲染还是直接渲染 */
+  renderType?: RenderType;
   /** 选中时是否自动滚动到可视区域 */
   autoScrollIntoView?: boolean;
   /** 组件的属性配置表单的dsl */
@@ -65,6 +69,8 @@ export interface EditorProps {
   updateDragEl?: UpdateDragEl;
   disabledDragStart?: boolean;
   extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+  /** 自定义依赖收集器，复制组件时会将关联依赖一并复制 */
+  collectorOptions?: CustomTargetOptions;
 }
 
 export const defaultEditorProps = {
@@ -84,4 +90,5 @@ export const defaultEditorProps = {
   containerHighlightDuration: 800,
   containerHighlightType: ContainerHighlightType.DEFAULT,
   codeOptions: () => ({}),
+  renderType: RenderType.IFRAME,
 };

package/src/hooks/use-filter.ts

@@ -0,0 +1,55 @@
+import { type Ref, ref } from 'vue';
+
+import type { Id, MNode } from '@tmagic/schema';
+
+import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
+import { traverseNode } from '@editor/utils';
+import { updateStatus } from '@editor/utils/tree';
+
+export const useFilter = (
+  nodeData: Ref<TreeNodeData[]>,
+  nodeStatusMap: Ref<Map<Id, LayerNodeStatus> | undefined>,
+  filterNodeMethod: (value: string, data: MNode) => boolean,
+) => {
+  // tree方法：对树节点进行筛选时执行的方法
+  const filterIsMatch = (value: string | string[], data: MNode): boolean => {
+    const string = !Array.isArray(value) ? [value] : value;
+
+    if (!string.length) {
+      return true;
+    }
+
+    return string.some((v) => filterNodeMethod(v, data));
+  };
+
+  const filter = (text: string | string[]) => {
+    if (!nodeData.value.length) return;
+
+    nodeData.value.forEach((node) => {
+      traverseNode(node, (node: MNode, parents: MNode[]) => {
+        if (!nodeStatusMap.value) return;
+
+        const visible = filterIsMatch(text, node);
+        if (visible && parents.length) {
+          parents.forEach((parent) => {
+            updateStatus(nodeStatusMap.value!, parent.id, {
+              visible,
+              expand: true,
+            });
+          });
+        }
+
+        updateStatus(nodeStatusMap.value, node.id, {
+          visible,
+        });
+      });
+    });
+  };
+
+  return {
+    filterText: ref(''),
+    filterTextChangeHandler(text: string | string[]) {
+      filter(text);
+    },
+  };
+};

package/src/hooks/use-node-status.ts

@@ -0,0 +1,48 @@
+import { ComputedRef, ref, watch } from 'vue';
+
+import type { Id, MNode } from '@tmagic/schema';
+
+import { LayerNodeStatus, TreeNodeData } from '@editor/type';
+import { traverseNode } from '@editor/utils';
+
+const createPageNodeStatus = (nodeData: TreeNodeData[], initalLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {
+  const map = new Map<Id, LayerNodeStatus>();
+
+  nodeData.forEach((node: MNode) =>
+    traverseNode(node, (node) => {
+      map.set(
+        node.id,
+        initalLayerNodeStatus?.get(node.id) || {
+          visible: true,
+          expand: false,
+          selected: false,
+          draggable: false,
+        },
+      );
+    }),
+  );
+
+  return map;
+};
+
+export const useNodeStatus = (nodeData: ComputedRef<TreeNodeData[]>) => {
+  /** 所有页面的节点状态 */
+  const nodeStatusMap = ref(new Map<Id, LayerNodeStatus>());
+
+  // 切换页面或者新增页面，重新生成节点状态
+  watch(
+    nodeData,
+    (nodeData) => {
+      // 生成节点状态
+      nodeStatusMap.value = createPageNodeStatus(nodeData, nodeStatusMap.value);
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
+
+  return {
+    nodeStatusMap,
+  };
+};

package/src/hooks/use-stage.ts

@@ -31,6 +31,7 @@ export const useStage = (stageOptions: StageOptions) => {
     containerHighlightDuration: stageOptions.containerHighlightDuration,
     containerHighlightType: stageOptions.containerHighlightType,
     disabledDragStart: stageOptions.disabledDragStart,
+    renderType: stageOptions.renderType,
     canSelect: (el, event, stop) => {
       const elCanSelect = stageOptions.canSelect(el);
       // 在组件联动过程中不能再往下选择，返回并触发 ui-select

package/src/initService.ts

@@ -2,13 +2,14 @@ import { onUnmounted, reactive, toRaw, watch } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { EventOption } from '@tmagic/core';
-import type { Target } from '@tmagic/dep';
 import {
   createCodeBlockTarget,
   createDataSourceCondTarget,
   createDataSourceMethodTarget,
   createDataSourceTarget,
+  createRelatedCompTarget,
   DepTargetType,
+  Target,
 } from '@tmagic/dep';
 import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage } from '@tmagic/schema';
 import { getNodes } from '@tmagic/utils';
@@ -186,7 +187,7 @@ export const initServiceEvents = (
     return stage?.renderer.runtime?.getApp?.();
   };
 
-  const updateDataSoucreSchema = () => {
+  const updateDataSourceSchema = () => {
     const root = editorService.get('root');
 
     if (root?.dataSources) {
@@ -194,7 +195,7 @@ export const initServiceEvents = (
     }
   };
 
-  const upateNodeWhenDataSourceChange = (nodes: MNode[]) => {
+  const updateNodeWhenDataSourceChange = (nodes: MNode[]) => {
     const root = editorService.get('root');
     const stage = editorService.get('stage');
 
@@ -210,7 +211,7 @@ export const initServiceEvents = (
       app.dsl.dataSources = root.dataSources;
     }
 
-    updateDataSoucreSchema();
+    updateDataSourceSchema();
 
     nodes.forEach((node) => {
       const deps = Object.values(root.dataSourceDeps || {});
@@ -258,11 +259,11 @@ export const initServiceEvents = (
   };
 
   const depUpdateHandler = (node: MNode) => {
-    upateNodeWhenDataSourceChange([node]);
+    updateNodeWhenDataSourceChange([node]);
   };
 
   const collectedHandler = (nodes: MNode[]) => {
-    upateNodeWhenDataSourceChange(nodes);
+    updateNodeWhenDataSourceChange(nodes);
   };
 
   depService.on('add-target', targetAddHandler);
@@ -291,7 +292,7 @@ export const initServiceEvents = (
       depService.addTarget(createCodeBlockTarget(id, code));
     });
 
-    value.dataSources.forEach((ds) => {
+    dataSourceService.get('dataSources').forEach((ds) => {
       initDataSourceDepTarget(ds);
     });
 
@@ -350,8 +351,8 @@ export const initServiceEvents = (
   editorService.on('update', nodeUpdateHandler);
 
   const codeBlockAddOrUpdateHandler = (id: Id, codeBlock: CodeBlockContent) => {
-    if (depService.hasTarget(id)) {
-      depService.getTarget(id)!.name = codeBlock.name;
+    if (depService.hasTarget(id, DepTargetType.CODE_BLOCK)) {
+      depService.getTarget(id, DepTargetType.CODE_BLOCK)!.name = codeBlock.name;
       return;
     }
 
@@ -359,7 +360,7 @@ export const initServiceEvents = (
   };
 
   const codeBlockRemoveHandler = (id: Id) => {
-    depService.removeTarget(id);
+    depService.removeTarget(id, DepTargetType.CODE_BLOCK);
   };
 
   codeBlockService.on('addOrUpdate', codeBlockAddOrUpdateHandler);
@@ -372,16 +373,26 @@ export const initServiceEvents = (
 
   const dataSourceUpdateHandler = (config: DataSourceSchema) => {
     const root = editorService.get('root');
+    removeDataSourceTarget(config.id);
+    initDataSourceDepTarget(config);
+
+    depService.collect(root?.items || [], true);
 
     const targets = depService.getTargets(DepTargetType.DATA_SOURCE);
 
     const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
 
-    upateNodeWhenDataSourceChange(nodes);
+    updateNodeWhenDataSourceChange(nodes);
+  };
+
+  const removeDataSourceTarget = (id: string) => {
+    depService.removeTarget(id, DepTargetType.DATA_SOURCE);
+    depService.removeTarget(id, DepTargetType.DATA_SOURCE_COND);
+    depService.removeTarget(id, DepTargetType.DATA_SOURCE_METHOD);
   };
 
   const dataSourceRemoveHandler = (id: string) => {
-    depService.removeTarget(id);
+    removeDataSourceTarget(id);
     getApp()?.dataSourceManager?.removeDataSource(id);
   };
 
@@ -389,6 +400,11 @@ export const initServiceEvents = (
   dataSourceService.on('update', dataSourceUpdateHandler);
   dataSourceService.on('remove', dataSourceRemoveHandler);
 
+  // 初始化复制组件相关的依赖收集器
+  if (props.collectorOptions && !depService.hasTarget(DepTargetType.RELATED_COMP_WHEN_COPY)) {
+    depService.addTarget(createRelatedCompTarget(props.collectorOptions));
+  }
+
   onUnmounted(() => {
     depService.off('add-target', targetAddHandler);
     depService.off('remove-target', targetRemoveHandler);

package/src/layouts/sidebar/Sidebar.vue

@@ -4,13 +4,13 @@
       <div
         class="m-editor-sidebar-header-item"
         v-for="(config, index) in sideBarItems"
+        v-show="!floatBoxStates?.get(config.$key)?.status"
+        draggable="true"
         :key="config.$key ?? index"
         :class="{ 'is-active': activeTabName === config.text }"
         @click="activeTabName = config.text || `${index}`"
-        draggable="true"
         @dragstart="dragstartHandler"
         @dragend="dragendHandler(config.$key, $event)"
-        v-show="!floatBoxStates?.get(config.$key)?.status"
       >
         <MIcon v-if="config.icon" :icon="config.icon"></MIcon>
         <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
@@ -74,6 +74,11 @@
           <component v-else-if="config.slots?.layerNodeContent" :is="config.slots.layerNodeContent" :data="nodeData" />
         </template>
 
+        <template #layer-node-label="{ data: nodeData }" v-if="config.$key === 'layer' || config.slots?.layerNodeLabel">
+          <slot v-if="config.$key === 'layer'" name="layer-node-label" :data="nodeData"></slot>
+          <component v-else-if="config.slots?.layerNodeLabel" :is="config.slots.layerNodeTool" :data="nodeData" />
+        </template>
+
         <template #layer-node-tool="{ data: nodeData }" v-if="config.$key === 'layer' || config.slots?.layerNodeTool">
           <slot v-if="config.$key === 'layer'" name="layer-node-tool" :data="nodeData"></slot>
           <component v-else-if="config.slots?.layerNodeTool" :is="config.slots.layerNodeTool" :data="nodeData" />