@tmagic/editor 1.4.8 → 1.4.9

package/src/hooks/index.ts

@@ -0,0 +1,24 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './use-code-block-edit';
+export * from './use-data-source-method';
+export * from './use-stage';
+export * from './use-float-box';
+export * from './use-window-rect';
+export * from './use-editor-content-height';

package/src/hooks/use-code-block-edit.ts

@@ -0,0 +1,83 @@
+import { nextTick, ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import { tMagicMessage } from '@tmagic/design';
+import type { CodeBlockContent } from '@tmagic/schema';
+
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import type { CodeBlockService } from '@editor/services/codeBlock';
+
+export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
+  const codeConfig = ref<CodeBlockContent>();
+  const codeId = ref<string>();
+  const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
+
+  // 新增代码块
+  const createCodeBlock = async () => {
+    if (!codeBlockService) {
+      tMagicMessage.error('新增代码块失败');
+      return;
+    }
+
+    codeConfig.value = {
+      name: '',
+      content: `({app, params}) => {\n  // place your code here\n}`,
+      params: [],
+    };
+
+    codeId.value = await codeBlockService.getUniqueId();
+
+    await nextTick();
+
+    codeBlockEditor.value?.show();
+  };
+
+  // 编辑代码块
+  const editCode = async (id: string) => {
+    const codeBlock = await codeBlockService?.getCodeContentById(id);
+
+    if (!codeBlock) {
+      tMagicMessage.error('获取代码块内容失败');
+      return;
+    }
+
+    let codeContent = codeBlock.content;
+
+    if (typeof codeContent !== 'string') {
+      codeContent = codeContent.toString();
+    }
+
+    codeConfig.value = {
+      ...cloneDeep(codeBlock),
+      content: codeContent,
+    };
+    codeId.value = id;
+
+    await nextTick();
+    codeBlockEditor.value?.show();
+  };
+
+  // 删除代码块
+  const deleteCode = async (key: string) => {
+    codeBlockService?.deleteCodeDslByIds([key]);
+  };
+
+  const submitCodeBlockHandler = async (values: CodeBlockContent) => {
+    if (!codeId.value) return;
+
+    await codeBlockService?.setCodeDslById(codeId.value, values);
+
+    codeBlockEditor.value?.hide();
+  };
+
+  return {
+    codeId,
+    codeConfig,
+    codeBlockEditor,
+
+    createCodeBlock,
+    editCode,
+    deleteCode,
+    submitCodeBlockHandler,
+  };
+};

package/src/hooks/use-data-source-edit.ts

@@ -0,0 +1,46 @@
+import { computed, ref } from 'vue';
+
+import type { DataSourceSchema } from '@tmagic/schema';
+
+import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue';
+import type { DataSourceService } from '@editor/services/dataSource';
+
+export const useDataSourceEdit = (dataSourceService?: DataSourceService) => {
+  const dialogTitle = ref('');
+  const editDialog = ref<InstanceType<typeof DataSourceConfigPanel>>();
+  const dataSourceValues = ref<Record<string, any>>({});
+
+  const editable = computed(() => dataSourceService?.get('editable') ?? true);
+
+  const editHandler = (id: string) => {
+    if (!editDialog.value) return;
+
+    dataSourceValues.value = {
+      ...dataSourceService?.getDataSourceById(id),
+    };
+
+    dialogTitle.value = `编辑${dataSourceValues.value.title || ''}`;
+
+    editDialog.value.show();
+  };
+
+  const submitDataSourceHandler = (value: DataSourceSchema) => {
+    if (value.id) {
+      dataSourceService?.update(value);
+    } else {
+      dataSourceService?.add(value);
+    }
+
+    editDialog.value?.hide();
+  };
+
+  return {
+    dialogTitle,
+    editDialog,
+    dataSourceValues,
+    editable,
+
+    editHandler,
+    submitDataSourceHandler,
+  };
+};

package/src/hooks/use-data-source-method.ts

@@ -0,0 +1,100 @@
+import { nextTick, ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import { tMagicMessage } from '@tmagic/design';
+import type { CodeBlockContent, DataSourceSchema } from '@tmagic/schema';
+
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import { getConfig } from '@editor/utils/config';
+
+export const useDataSourceMethod = () => {
+  const codeConfig = ref<CodeBlockContent>();
+  const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
+
+  const dataSource = ref<DataSourceSchema>();
+  const dataSourceMethod = ref('');
+
+  return {
+    codeConfig,
+    codeBlockEditor,
+
+    createCode: async (model: DataSourceSchema) => {
+      codeConfig.value = {
+        name: '',
+        content: `({ params, dataSource, app }) => {\n  // place your code here\n}`,
+        params: [],
+      };
+
+      await nextTick();
+
+      dataSource.value = model;
+      dataSourceMethod.value = '';
+
+      codeBlockEditor.value?.show();
+    },
+
+    editCode: async (model: DataSourceSchema, methodName: string) => {
+      const method = model.methods?.find((method) => method.name === methodName);
+
+      if (!method) {
+        tMagicMessage.error('获取数据源方法失败');
+        return;
+      }
+
+      let codeContent = method.content;
+
+      if (typeof codeContent !== 'string') {
+        codeContent = codeContent.toString();
+      }
+
+      codeConfig.value = {
+        ...cloneDeep(method),
+        content: codeContent,
+      };
+
+      await nextTick();
+
+      dataSource.value = model;
+      dataSourceMethod.value = methodName;
+
+      codeBlockEditor.value?.show();
+    },
+
+    deleteCode: async (model: DataSourceSchema, methodName: string) => {
+      if (!model.methods) return;
+
+      const index = model.methods.findIndex((method) => method.name === methodName);
+
+      if (index === -1) {
+        return;
+      }
+
+      model.methods.splice(index, 1);
+    },
+
+    submitCode: (values: CodeBlockContent) => {
+      if (!dataSource.value) return;
+
+      if (!dataSource.value.methods) {
+        dataSource.value.methods = [];
+      }
+
+      if (values.content) {
+        // 在保存的时候转换代码内容
+        const parseDSL = getConfig('parseDSL');
+        if (typeof values.content === 'string') {
+          values.content = parseDSL<(...args: any[]) => any>(values.content);
+        }
+      }
+
+      if (dataSourceMethod.value) {
+        const index = dataSource.value.methods.findIndex((method) => method.name === dataSourceMethod.value);
+        dataSource.value.methods.splice(index, 1, values);
+      } else {
+        dataSource.value.methods.push(values);
+      }
+
+      codeBlockEditor.value?.hide();
+    },
+  };
+};

package/src/hooks/use-editor-content-height.ts

@@ -0,0 +1,26 @@
+import { computed, inject, ref, watch } from 'vue';
+
+import type { Services } from '@editor/type';
+
+export const useEditorContentHeight = () => {
+  const services = inject<Services>('services');
+  const frameworkHeight = computed(() => services?.uiService.get('frameworkRect').height || 0);
+  const navMenuHeight = computed(() => services?.uiService.get('navMenuRect').height || 0);
+  const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value);
+
+  const height = ref(0);
+  watch(
+    editorContentHeight,
+    () => {
+      if (height.value > 0 && height.value === editorContentHeight.value) return;
+      height.value = editorContentHeight.value;
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  return {
+    height,
+  };
+};

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-float-box.ts

@@ -0,0 +1,76 @@
+import { computed, ComputedRef, inject, ref, watch } from 'vue';
+
+import type { Services } from '@editor/type';
+
+interface State {
+  status: boolean;
+  top: number;
+  left: number;
+}
+
+export const useFloatBox = (slideKeys: ComputedRef<string[]>) => {
+  const services = inject<Services>('services');
+
+  const floatBoxStates = ref<{
+    [key in (typeof slideKeys.value)[number]]: State;
+  }>(
+    slideKeys.value.reduce(
+      (total, cur) => ({
+        ...total,
+        [cur]: {
+          status: false,
+          top: 0,
+          left: 0,
+        },
+      }),
+      {},
+    ),
+  );
+
+  const showingBoxKeys = computed(() =>
+    Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status),
+  );
+  const isDragging = ref(false);
+
+  const dragstartHandler = () => (isDragging.value = true);
+  const dragendHandler = (key: string, e: DragEvent) => {
+    const navMenuRect = services?.uiService?.get('navMenuRect');
+    floatBoxStates.value[key] = {
+      left: e.clientX,
+      top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0),
+      status: true,
+    };
+    isDragging.value = false;
+  };
+
+  document.body.addEventListener('dragover', (e: DragEvent) => {
+    if (!isDragging.value) return;
+    e.preventDefault();
+  });
+
+  watch(
+    () => slideKeys.value,
+    (slideKeys) => {
+      slideKeys.forEach((key) => {
+        if (!floatBoxStates.value[key]) {
+          floatBoxStates.value[key] = {
+            status: false,
+            top: 0,
+            left: 0,
+          };
+        }
+      });
+    },
+    {
+      deep: true,
+      immediate: true,
+    },
+  );
+
+  return {
+    dragstartHandler,
+    dragendHandler,
+    floatBoxStates,
+    showingBoxKeys,
+  };
+};

package/src/hooks/use-getso.ts

@@ -0,0 +1,35 @@
+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) => {
+  let getso: Gesto;
+  const isDraging = ref(false);
+
+  onMounted(() => {
+    if (!target.value) return;
+    getso = new Gesto(target.value, {
+      container: window,
+      pinchOutside: true,
+    })
+      .on('drag', (e) => {
+        if (!target.value) return;
+
+        emit('change', e);
+      })
+      .on('dragStart', () => {
+        isDraging.value = true;
+      })
+      .on('dragEnd', () => {
+        isDraging.value = false;
+      });
+  });
+
+  onBeforeUnmount(() => {
+    getso?.unset();
+    isDraging.value = false;
+  });
+
+  return {
+    isDraging,
+  };
+};

package/src/hooks/use-next-float-box-position.ts

@@ -0,0 +1,29 @@
+import { Ref, ref } from 'vue';
+
+import { UiService } from '@editor/services/ui';
+
+export const useNextFloatBoxPosition = (uiService?: UiService, parent?: Ref<HTMLDivElement | null>) => {
+  const boxPosition = ref({
+    left: 0,
+    top: 0,
+  });
+
+  const calcBoxPosition = () => {
+    const columnWidth = uiService?.get('columnWidth');
+    const navMenuRect = uiService?.get('navMenuRect');
+    let left = columnWidth?.left ?? 0;
+    if (parent?.value) {
+      const rect = parent?.value?.getBoundingClientRect();
+      left = (rect?.left ?? 0) + (rect?.width ?? 0);
+    }
+    boxPosition.value = {
+      left,
+      top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0),
+    };
+  };
+
+  return {
+    boxPosition,
+    calcBoxPosition,
+  };
+};

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[], initialLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {
+  const map = new Map<Id, LayerNodeStatus>();
+
+  nodeData.forEach((node: MNode) =>
+    traverseNode(node, (node) => {
+      map.set(
+        node.id,
+        initialLayerNodeStatus?.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

@@ -0,0 +1,129 @@
+import { computed, watch } from 'vue';
+
+import type { MNode } from '@tmagic/schema';
+import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
+
+import editorService from '@editor/services/editor';
+import uiService from '@editor/services/ui';
+import {
+  H_GUIDE_LINE_STORAGE_KEY,
+  StageOptions,
+  UI_SELECT_MODE_EVENT_NAME,
+  V_GUIDE_LINE_STORAGE_KEY,
+} from '@editor/type';
+import { getGuideLineFromCache } from '@editor/utils/editor';
+
+const root = computed(() => editorService.get('root'));
+const page = computed(() => editorService.get('page'));
+const zoom = computed(() => uiService.get('zoom') || 1);
+const uiSelectMode = computed(() => uiService.get('uiSelectMode'));
+
+const getGuideLineKey = (key: string) => `${key}_${root.value?.id}_${page.value?.id}`;
+
+export const useStage = (stageOptions: StageOptions) => {
+  const stage = new StageCore({
+    render: stageOptions.render,
+    runtimeUrl: stageOptions.runtimeUrl,
+    zoom: stageOptions.zoom ?? zoom.value,
+    autoScrollIntoView: stageOptions.autoScrollIntoView,
+    isContainer: stageOptions.isContainer,
+    containerHighlightClassName: stageOptions.containerHighlightClassName,
+    containerHighlightDuration: stageOptions.containerHighlightDuration,
+    containerHighlightType: stageOptions.containerHighlightType,
+    disabledDragStart: stageOptions.disabledDragStart,
+    renderType: stageOptions.renderType,
+    canSelect: (el, event, stop) => {
+      if (!stageOptions.canSelect) return true;
+
+      const elCanSelect = stageOptions.canSelect?.(el);
+      // 在组件联动过程中不能再往下选择，返回并触发 ui-select
+      if (uiSelectMode.value && elCanSelect && event.type === 'mousedown') {
+        document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: el }));
+        return stop();
+      }
+
+      return elCanSelect;
+    },
+    moveableOptions: stageOptions.moveableOptions,
+    updateDragEl: stageOptions.updateDragEl,
+    guidesOptions: stageOptions.guidesOptions,
+    disabledMultiSelect: stageOptions.disabledMultiSelect,
+  });
+
+  watch(
+    () => editorService.get('disabledMultiSelect'),
+    (disabledMultiSelect) => {
+      if (disabledMultiSelect) {
+        stage.disableMultiSelect();
+      } else {
+        stage.enableMultiSelect();
+      }
+    },
+  );
+
+  stage.mask.setGuides([
+    getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
+    getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
+  ]);
+
+  stage.on('page-el-update', () => {
+    editorService.set('stageLoading', false);
+  });
+
+  stage.on('select', (el: HTMLElement) => {
+    if (`${editorService.get('node')?.id}` === el.id && editorService.get('nodes').length === 1) return;
+    editorService.select(el.id);
+  });
+
+  stage.on('highlight', (el: HTMLElement) => {
+    editorService.highlight(el.id);
+  });
+
+  stage.on('multi-select', (els: HTMLElement[]) => {
+    editorService.multiSelect(els.map((el) => el.id));
+  });
+
+  stage.on('update', (ev: UpdateEventData) => {
+    if (ev.parentEl) {
+      for (const data of ev.data) {
+        editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
+      }
+      return;
+    }
+
+    editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
+  });
+
+  stage.on('sort', (ev: SortEventData) => {
+    editorService.sort(ev.src, ev.dist);
+  });
+
+  stage.on('remove', (ev: RemoveEventData) => {
+    const nodes = ev.data.map(({ el }) => editorService.getNodeById(el.id));
+    editorService.remove(nodes.filter((node) => Boolean(node)) as MNode[]);
+  });
+
+  stage.on('select-parent', () => {
+    const parent = editorService.get('parent');
+    if (!parent) throw new Error('父节点为空');
+    editorService.select(parent);
+    editorService.get('stage')?.select(parent.id);
+  });
+
+  stage.on('change-guides', (e) => {
+    uiService.set('showGuides', true);
+
+    if (!root.value || !page.value) return;
+
+    const storageKey = getGuideLineKey(
+      e.type === GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY,
+    );
+    if (e.guides.length) {
+      globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
+    } else {
+      globalThis.localStorage.removeItem(storageKey);
+    }
+  });
+
+  return stage;
+};

package/src/hooks/use-window-rect.ts

@@ -0,0 +1,20 @@
+import { onBeforeUnmount, reactive } from 'vue';
+
+export const useWindowRect = () => {
+  const rect = reactive({ width: globalThis.innerWidth, height: globalThis.innerHeight });
+
+  const windowResizeHandler = () => {
+    rect.width = globalThis.innerWidth;
+    rect.height = globalThis.innerHeight;
+  };
+
+  globalThis.addEventListener('resize', windowResizeHandler);
+
+  onBeforeUnmount(() => {
+    globalThis.removeEventListener('resize', windowResizeHandler);
+  });
+
+  return {
+    rect,
+  };
+};

package/src/icons/AppManageIcon.vue

@@ -0,0 +1,15 @@
+<template>
+  <!-- app-manage cdn链接：https://cloudcache.tencent-cloud.com/qcloud/ui/static/console_aside_v4/6638c8a5-2e7f-477a-83b1-a413a0e4ba39.svg -->
+  <svg xmlns="http://www.w3.org/2000/svg">
+    <g fill="#7C878E" fill-rule="evenodd">
+      <path d="M15.3,5.5 L8,0 L0.7,5.5 L8,11 L15.3,5.5 Z M8,2.5 L12,5.5 L8,8.5 L4,5.5 L8,2.5 Z" fill-rule="nonzero" />
+      <path d="M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" />
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorAppManageIcon',
+});
+</script>