@tmagic/editor 1.3.5 → 1.3.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.5",
+  "version": "1.3.7",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -23,13 +23,8 @@
     "./*": "./*"
   },
   "license": "Apache-2.0",
-  "scripts": {
-    "build": "npm run build:type && vite build",
-    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "clear:type": "rimraf ./types"
-  },
   "engines": {
-    "node": ">=14"
+    "node": ">=18"
   },
   "repository": {
     "type": "git",
@@ -46,15 +41,15 @@
   ],
   "dependencies": {
     "@babel/core": "^7.18.0",
-    "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.5",
-    "@tmagic/dep": "1.3.5",
-    "@tmagic/design": "1.3.5",
-    "@tmagic/form": "1.3.5",
-    "@tmagic/schema": "1.3.5",
-    "@tmagic/stage": "1.3.5",
-    "@tmagic/table": "1.3.5",
-    "@tmagic/utils": "1.3.5",
+    "@element-plus/icons-vue": "^2.3.1",
+    "@tmagic/core": "1.3.7",
+    "@tmagic/dep": "1.3.7",
+    "@tmagic/design": "1.3.7",
+    "@tmagic/form": "1.3.7",
+    "@tmagic/schema": "1.3.7",
+    "@tmagic/stage": "1.3.7",
+    "@tmagic/table": "1.3.7",
+    "@tmagic/utils": "1.3.7",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -67,24 +62,29 @@
     "vue": "^3.3.8"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.5",
-    "@tmagic/form": "1.3.5",
+    "@tmagic/design": "1.3.7",
+    "@tmagic/form": "1.3.7",
     "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"
+  },
+  "scripts": {
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "clear:type": "rimraf ./types"
   }
-}
+}

package/src/Editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <Framework>
+  <Framework :disabled-page-fragment="disabledPageFragment">
     <template #header>
       <slot name="header"></slot>
     </template>
@@ -16,7 +16,7 @@
 
     <template #sidebar>
       <slot name="sidebar" :editorService="editorService">
-        <Sidebar :data="sidebar" :layer-content-menu="layerContentMenu">
+        <Sidebar :data="sidebar" :layer-content-menu="layerContentMenu" :custom-content-menu="customContentMenu">
           <template #layer-panel-header>
             <slot name="layer-panel-header"></slot>
           </template>
@@ -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>
@@ -54,11 +58,9 @@
 
     <template #workspace>
       <slot name="workspace" :editorService="editorService">
-        <Workspace :stage-content-menu="stageContentMenu">
+        <Workspace :stage-content-menu="stageContentMenu" :custom-content-menu="customContentMenu">
           <template #stage><slot name="stage"></slot></template>
           <template #workspace-content><slot name="workspace-content" :editorService="editorService"></slot></template>
-          <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
-          <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
         </Workspace>
       </slot>
     </template>
@@ -85,6 +87,9 @@
     <template #footer>
       <slot name="footer"></slot>
     </template>
+
+    <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
+    <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
   </Framework>
 </template>
 
@@ -151,8 +156,8 @@ const services: Services = {
 
 initServiceEvents(props, emit, services);
 initServiceState(props, services);
-keybindingService.registe(keybindingConfig);
-keybindingService.registeEl('global');
+keybindingService.register(keybindingConfig);
+keybindingService.registerEl('global');
 
 provide('services', services);
 
@@ -171,6 +176,9 @@ provide(
     containerHighlightDuration: props.containerHighlightDuration,
     containerHighlightType: props.containerHighlightType,
     disabledDragStart: props.disabledDragStart,
+    renderType: props.renderType,
+    guidesOptions: props.guidesOptions,
+    disabledMultiSelect: props.disabledMultiSelect,
   }),
 );
 

package/src/components/CodeBlockEditor.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onUnmounted, ref } from 'vue';
+import { computed, inject, onBeforeUnmount, ref } from 'vue';
 
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
 import { ColumnConfig, FormConfig, FormState, MFormBox, MFormDrawer } from '@tmagic/form';
@@ -85,7 +85,7 @@ const windowReizehandler = () => {
 
 globalThis.addEventListener('resize', windowReizehandler);
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   globalThis.removeEventListener('resize', windowReizehandler);
 });
 

package/src/components/ContentMenu.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
 
 import { MenuButton, MenuComponent } from '@editor/type';
 
@@ -99,7 +99,7 @@ const clickHandler = () => {
   hide();
 };
 
-const outsideClickhideHandler = (e: MouseEvent) => {
+const outsideClickHideHandler = (e: MouseEvent) => {
   if (!props.autoHide) return;
 
   const target = e.target as HTMLElement | undefined;
@@ -173,13 +173,13 @@ const mouseenterHandler = () => {
 onMounted(() => {
   if (props.isSubMenu) return;
 
-  globalThis.addEventListener('mousedown', outsideClickhideHandler, true);
+  globalThis.addEventListener('mousedown', outsideClickHideHandler, true);
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   if (props.isSubMenu) return;
 
-  globalThis.removeEventListener('mousedown', outsideClickhideHandler, true);
+  globalThis.removeEventListener('mousedown', outsideClickHideHandler, true);
 });
 
 defineExpose({

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/ScrollBar.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import Gesto from 'gesto';
 
 defineOptions({
@@ -53,7 +53,7 @@ onMounted(() => {
   bar.value?.addEventListener('wheel', wheelHandler, false);
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   if (gesto) gesto.off();
   bar.value?.removeEventListener('wheel', wheelHandler, false);
 });

package/src/components/ScrollViewer.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { isNumber } from '@tmagic/utils';
 
@@ -94,7 +94,7 @@ onMounted(() => {
   });
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   scrollViewer.destroy();
 });
 

package/src/components/SplitView.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { OnDrag } from 'gesto';
 
 import Resizer from './Resizer.vue';
@@ -110,7 +110,7 @@ onMounted(() => {
   }
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   resizerObserver.disconnect();
 });
 

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

@@ -18,14 +18,16 @@
     >
       <MIcon
         class="expand-icon"
-        :style="hasChilren ? '' : 'color: transparent; cursor: default'"
+        :style="hasChildren ? '' : 'color: transparent; cursor: default'"
         :icon="expanded ? ArrowDown : ArrowRight"
         @click="expandHandler"
       ></MIcon>
 
       <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>
@@ -33,7 +35,7 @@
       </div>
     </div>
 
-    <div v-if="hasChilren && expanded" class="m-editor-tree-node-children">
+    <div v-if="hasChildren && expanded" class="m-editor-tree-node-children">
       <TreeNode
         v-for="item in data.items"
         :key="item.id"
@@ -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 hasChildren = 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,12 +1,15 @@
 import type { EventOption } from '@tmagic/core';
+import type { CustomTargetOptions } from '@tmagic/dep';
 import type { FormConfig, FormState } from '@tmagic/form';
 import type { DataSourceSchema, Id, MApp, MNode } from '@tmagic/schema';
 import StageCore, {
   CONTAINER_HIGHLIGHT_CLASS_NAME,
   ContainerHighlightType,
-  CustomizeMoveableOptionsCallbackConfig,
-  MoveableOptions,
-  UpdateDragEl,
+  type CustomizeMoveableOptionsCallbackConfig,
+  type GuidesOptions,
+  type MoveableOptions,
+  RenderType,
+  type UpdateDragEl,
 } from '@tmagic/stage';
 
 import type {
@@ -38,6 +41,8 @@ export interface EditorProps {
   render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
   /** 中间工作区域中画布通过iframe渲染时的页面url */
   runtimeUrl?: string;
+  /** 是用iframe渲染还是直接渲染 */
+  renderType?: RenderType;
   /** 选中时是否自动滚动到可视区域 */
   autoScrollIntoView?: boolean;
   /** 组件的属性配置表单的dsl */
@@ -65,6 +70,15 @@ export interface EditorProps {
   updateDragEl?: UpdateDragEl;
   disabledDragStart?: boolean;
   extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+  /** 自定义依赖收集器，复制组件时会将关联依赖一并复制 */
+  collectorOptions?: CustomTargetOptions;
+  /** 标尺配置 */
+  guidesOptions?: Partial<GuidesOptions>;
+  /** 禁止多选 */
+  disabledMultiSelect?: boolean;
+  /** 禁用页面片 */
+  disabledPageFragment?: boolean;
+  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
 }
 
 export const defaultEditorProps = {
@@ -84,4 +98,7 @@ export const defaultEditorProps = {
   containerHighlightDuration: 800,
   containerHighlightType: ContainerHighlightType.DEFAULT,
   codeOptions: () => ({}),
+  renderType: RenderType.IFRAME,
+  disabledMultiSelect: false,
+  disabledPageFragment: false,
 };

package/src/fields/PageFragmentSelect.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="m-fields-page-fragment-select">
+    <div class="page-fragment-select-container">
+      <!-- 页面片下拉框 -->
+      <m-form-container
+        class="select"
+        :config="selectConfig"
+        :model="model"
+        :size="size"
+        @change="changeHandler"
+      ></m-form-container>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+
+import { FieldProps } from '@tmagic/form';
+import { NodeType } from '@tmagic/schema';
+
+import type { PageFragmentSelectConfig, Services } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorPageFragmentSelect',
+});
+
+const services = inject<Services>('services');
+const emit = defineEmits(['change']);
+
+const props = withDefaults(defineProps<FieldProps<PageFragmentSelectConfig>>(), {
+  disabled: false,
+});
+const pageList = computed(() =>
+  services?.editorService.get('root')?.items.filter((item) => item.type === NodeType.PAGE_FRAGMENT),
+);
+
+const selectConfig = {
+  type: 'select',
+  name: props.name,
+  options: () => {
+    if (pageList.value) {
+      return pageList.value.map((item) => ({
+        text: `${item.name}（${item.id}）`,
+        label: `${item.name}（${item.id}）`,
+        value: item.id,
+      }));
+    }
+    return [];
+  },
+};
+const changeHandler = async () => {
+  emit('change', props.model[props.name]);
+};
+</script>

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-getso.ts

@@ -1,4 +1,4 @@
-import { onMounted, onUnmounted, type Ref, ref } from 'vue';
+import { onBeforeUnmount, onMounted, type Ref, ref } from 'vue';
 import Gesto, { type OnDrag } from 'gesto';
 
 export const useGetSo = (target: Ref<HTMLElement | undefined>, emit: (evt: 'change', e: OnDrag<Gesto>) => void) => {
@@ -24,7 +24,7 @@ export const useGetSo = (target: Ref<HTMLElement | undefined>, emit: (evt: 'chan
       });
   });
 
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     getso?.unset();
     isDraging.value = false;
   });

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,
+  };
+};