@tmagic/editor 1.4.7 → 1.4.8

package/src/hooks/index.ts

@@ -1,24 +0,0 @@
-/*
- * 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

@@ -1,83 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,15 +0,0 @@
-<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>