@tmagic/editor 1.3.0-beta.6 → 1.3.0-beta.8

package/types/layouts/sidebar/layer/use-click.d.ts

@@ -0,0 +1,106 @@
+import { type ComputedRef, nextTick, type Ref } from 'vue';
+import { Id } from '@tmagic/schema';
+import { LayerNodeStatus, Services, TreeNodeData } from '../../../type';
+export declare const useClick: (services: Services | undefined, isCtrlKeyDown: Ref<boolean>, nodeStatusMap: ComputedRef<Map<Id, LayerNodeStatus> | undefined>) => {
+    menu: Ref<({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            key?: string | number | symbol | undefined;
+            ref?: import("vue").VNodeRef | undefined;
+            ref_for?: boolean | undefined;
+            ref_key?: string | undefined;
+            onVnodeBeforeMount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeMounted?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUpdate?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUpdated?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUnmount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUnmounted?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            class?: unknown;
+            style?: unknown;
+            readonly layerContentMenu: (import("../../../type").MenuButton | import("../../../type").MenuComponent)[];
+        };
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            layerContentMenu: {
+                type: import("vue").PropType<(import("../../../type").MenuButton | import("../../../type").MenuComponent)[]>;
+                required: true;
+            };
+        }>>, {
+            show: (e: MouseEvent) => void;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        layerContentMenu: {
+            type: import("vue").PropType<(import("../../../type").MenuButton | import("../../../type").MenuComponent)[]>;
+            required: true;
+        };
+    }>> & import("vue").ShallowUnwrapRef<{
+        show: (e: MouseEvent) => void;
+    }> & {} & import("vue").ComponentCustomProperties & {}) | undefined>;
+    nodeClickHandler: (event: MouseEvent, data: TreeNodeData) => void;
+    nodeContentmenuHandler(event: MouseEvent, data: TreeNodeData): void;
+    highlightHandler: import("lodash-es").DebouncedFunc<(event: MouseEvent, data: TreeNodeData) => void>;
+};

package/types/layouts/sidebar/layer/use-filter.d.ts

@@ -1,7 +1,6 @@
 import { type ComputedRef } from 'vue';
 import { Id, MPage } from '@tmagic/schema';
 import { LayerNodeStatus } from '../../../type';
-export declare const updateStatus: (nodeStatusMap: Map<Id, LayerNodeStatus>, id: Id, status: Partial<LayerNodeStatus>) => void;
 export declare const useFilter: (nodeStatusMap: ComputedRef<Map<Id, LayerNodeStatus> | undefined>, page: ComputedRef<MPage | null | undefined>) => {
     filterText: import("vue").Ref<string>;
     filterTextChangeHandler(text: string): void;

package/types/layouts/sidebar/layer/use-keybinding.d.ts

@@ -1,5 +1,6 @@
 import { type Ref } from 'vue';
+import Tree from '../../../components/Tree.vue';
 import type { Services } from '../../../type';
-export declare const useKeybinding: (services: Services | undefined, contianer: Ref<HTMLDivElement | undefined>) => {
+export declare const useKeybinding: (services: Services | undefined, contianer: Ref<InstanceType<typeof Tree> | undefined>) => {
     isCtrlKeyDown: Ref<boolean>;
 };

package/types/type.d.ts

@@ -53,6 +53,11 @@ export interface CodeBlockListSlots {
         data: CodeBlockContent;
     }): any;
 }
+export interface DataSourceListSlots {
+    'data-source-panel-tool'(props: {
+        data: any;
+    }): any;
+}
 export interface LayerNodeSlots {
     'layer-node-content'(props: {
         data: MNode;
@@ -60,11 +65,17 @@ export interface LayerNodeSlots {
 }
 export interface LayerPanelSlots extends LayerNodeSlots {
     'layer-panel-header'(props: {}): any;
+    'layer-node-tool'(props: {
+        data: MNode;
+    }): any;
+    'layer-node-content'(props: {
+        data: MNode;
+    }): any;
 }
 export interface PropsPanelSlots {
     'props-panel-header'(props: {}): any;
 }
-export type SidebarSlots = LayerPanelSlots & CodeBlockListPanelSlots & ComponentListPanelSlots;
+export type SidebarSlots = LayerPanelSlots & CodeBlockListPanelSlots & ComponentListPanelSlots & DataSourceListSlots;
 export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
 export interface InstallOptions {
@@ -505,6 +516,8 @@ export interface LayerNodeStatus {
     expand: boolean;
     /** 选中 */
     selected: boolean;
+    /** 是否可拖拽 */
+    draggable: boolean;
 }
 /** 拖拽类型 */
 export declare enum DragType {
@@ -515,3 +528,9 @@ export declare enum DragType {
 }
 /** 当uiService.get('uiSelectMode')为true,点击组件（包括任何形式，组件树/画布）时触发的事件名 */
 export declare const UI_SELECT_MODE_EVENT_NAME = "ui-select";
+export interface TreeNodeData {
+    id: Id;
+    name?: string;
+    items?: TreeNodeData[];
+    [key: string]: any;
+}

package/types/utils/tree.d.ts

@@ -0,0 +1,3 @@
+import type { Id } from '@tmagic/schema';
+import type { LayerNodeStatus } from '../type';
+export declare const updateStatus: (nodeStatusMap: Map<Id, LayerNodeStatus>, id: Id, status: Partial<LayerNodeStatus>) => void;

package/src/layouts/sidebar/layer/LayerNode.vue

@@ -1,208 +0,0 @@
-<template>
-  <div
-    v-show="visible"
-    class="magic-editor-layer-node"
-    ref="nodeEl"
-    :draggable="!isPage(data)"
-    :data-node-id="data.id"
-    :data-is-container="Array.isArray(data.items)"
-    @dragstart="handleDragStart"
-    @dragleave="handleDragLeave"
-    @dragend="handleDragEnd($event, data)"
-  >
-    <div
-      class="layer-node"
-      :class="{ selected, expanded }"
-      :style="`padding-left: ${indent}px`"
-      @contextmenu="contextmenuHandler"
-      @mouseenter="highlightHandler()"
-    >
-      <MIcon
-        class="expand-icon"
-        :style="hasChilren ? '' : 'color: transparent; cursor: default'"
-        :icon="expanded ? ArrowDown : ArrowRight"
-        @click="expandHandler"
-      ></MIcon>
-
-      <div class="layer-node-content" @click="nodeClickHandler">
-        <slot name="layer-node-content" :data="data">
-          <div class="layer-node-label">{{ `${data.name} (${data.id})` }}</div>
-          <div class="layer-node-tool">
-            <LayerNodeTool :data="data"></LayerNodeTool>
-          </div>
-        </slot>
-      </div>
-    </div>
-
-    <div v-if="hasChilren && expanded" class="magic-editor-layer-node-children">
-      <LayerNode
-        v-for="item in data.items"
-        :data="item"
-        :parent="(data as MContainer)"
-        :key="item.id"
-        :indent="indent + 11"
-        :filter-text="filterText"
-        :is-ctrl-key-down="isCtrlKeyDown"
-        @node-contextmenu="nodeContentmenuHandler"
-      >
-        <template #layer-node-content="{ data: nodeData }">
-          <slot name="layer-node-content" :data="nodeData"> </slot>
-        </template>
-      </LayerNode>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, type ComputedRef, inject, nextTick, ref } from 'vue';
-import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
-import { throttle } from 'lodash-es';
-
-import type { Id, MContainer, MNode } from '@tmagic/schema';
-import { isPage } from '@tmagic/utils';
-
-import MIcon from '@editor/components/Icon.vue';
-import { LayerNodeSlots, LayerNodeStatus, Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
-
-import LayerNodeTool from './LayerNodeTool.vue';
-import { useDrag } from './use-drag';
-import { updateStatus } from './use-filter';
-
-defineSlots<LayerNodeSlots>();
-
-defineOptions({
-  name: 'MEditorLayerNode',
-});
-
-const props = withDefaults(
-  defineProps<{
-    data: MNode;
-    parent?: MContainer;
-    indent?: number;
-    filterText?: string;
-    isCtrlKeyDown?: boolean;
-  }>(),
-  {
-    indent: 0,
-    filterText: '',
-    isCtrlKeyDown: false,
-  },
-);
-
-const emit = defineEmits<{
-  'node-contextmenu': [event: MouseEvent, node: MNode];
-}>();
-
-const services = inject<Services>('services');
-const nodeStatusMap = inject<ComputedRef<Map<Id, LayerNodeStatus>>>('nodeStatusMap');
-const editorService = services?.editorService;
-const uiService = services?.uiService;
-
-const nodeStatus = computed(
-  () =>
-    nodeStatusMap?.value?.get(props.data.id) || {
-      selected: false,
-      expand: false,
-      visible: false,
-    },
-);
-
-const expanded = computed(() => nodeStatus.value.expand);
-const selected = computed(() => nodeStatus.value.selected);
-const visible = computed(() => nodeStatus.value.visible);
-
-const hasChilren = computed(() => props.data.items?.length > 0);
-
-const nodeEl = ref<HTMLDivElement>();
-const { handleDragStart, handleDragEnd, handleDragLeave } = useDrag(services);
-
-const expandHandler = () => {
-  if (!nodeStatusMap?.value) return;
-
-  updateStatus(nodeStatusMap.value, props.data.id, {
-    expand: !expanded.value,
-  });
-};
-
-const nodeClickHandler = () => {
-  if (!nodeStatusMap?.value) return;
-
-  if (uiService?.get('uiSelectMode')) {
-    document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: props.data }));
-    return;
-  }
-
-  if (hasChilren.value && !props.isCtrlKeyDown) {
-    updateStatus(nodeStatusMap.value, props.data.id, {
-      expand: true,
-    });
-  }
-
-  nextTick(() => {
-    select(props.data);
-  });
-};
-
-const contextmenuHandler = (event: MouseEvent) => {
-  event.preventDefault();
-  const nodes = editorService?.get('nodes') || [];
-  if (nodes.length < 2 || !nodes.includes(props.data)) {
-    nodeClickHandler();
-  }
-
-  emit('node-contextmenu', event, props.data);
-};
-
-const nodeContentmenuHandler = (event: MouseEvent, node: MNode) => {
-  emit('node-contextmenu', event, node);
-};
-
-// 触发画布选中
-const select = async (data: MNode) => {
-  if (!data.id) {
-    throw new Error('没有id');
-  }
-
-  if (props.isCtrlKeyDown) {
-    multiSelect(data);
-  } else {
-    await editorService?.select(data);
-    editorService?.get('stage')?.select(data.id);
-  }
-};
-
-const multiSelect = async (data: MNode) => {
-  const nodes = editorService?.get('nodes') || [];
-
-  const newNodes: Id[] = [];
-  let isCancel = false;
-  nodes.forEach((node) => {
-    if (node.id === data.id) {
-      isCancel = true;
-      return;
-    }
-
-    newNodes.push(node.id);
-  });
-
-  // 只剩一个不能取消选中
-  if (!isCancel || newNodes.length === 0) {
-    newNodes.push(data.id);
-  }
-
-  await editorService?.multiSelect(newNodes);
-  editorService?.get('stage')?.multiSelect(newNodes);
-};
-
-const throttleTime = 300;
-// 鼠标在组件树移动触发高亮
-const highlightHandler = throttle(() => {
-  highlight();
-}, throttleTime);
-
-// 触发画布高亮
-const highlight = () => {
-  editorService?.highlight(props.data);
-  editorService?.get('stage')?.highlight(props.data.id);
-};
-</script>