@tmagic/editor 1.4.6 → 1.4.8

package/src/layouts/sidebar/data-source/DataSourceList.vue

@@ -1,160 +0,0 @@
-<template>
-  <Tree :data="list" :node-status-map="nodeStatusMap" @node-click="clickHandler">
-    <template #tree-node-label="{ data }">
-      <div
-        :class="{
-          ds: data.type === 'ds',
-          hook: data.type === 'key',
-          disabled: data.type === 'key' || data.type === 'ds',
-        }"
-      >
-        {{ data.name }} {{ data.key ? `(${data.key})` : '' }}
-      </div>
-    </template>
-    <template #tree-node-tool="{ data }">
-      <TMagicTooltip v-if="data.type === 'ds'" effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
-        <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editHandler(`${data.key}`)"></Icon>
-      </TMagicTooltip>
-      <TMagicTooltip v-if="data.type === 'ds' && editable" effect="dark" content="删除" placement="bottom">
-        <Icon :icon="Close" class="edit-icon" @click.stop="removeHandler(`${data.key}`)"></Icon>
-      </TMagicTooltip>
-      <slot name="data-source-panel-tool" :data="data"></slot>
-    </template>
-  </Tree>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject } from 'vue';
-import { Close, Edit, View } from '@element-plus/icons-vue';
-
-import { DepTargetType } from '@tmagic/dep';
-import { tMagicMessageBox, TMagicTooltip } from '@tmagic/design';
-import { DepData, Id, MNode } from '@tmagic/schema';
-
-import Icon from '@editor/components/Icon.vue';
-import Tree from '@editor/components/Tree.vue';
-import { useFilter } from '@editor/hooks/use-filter';
-import { useNodeStatus } from '@editor/hooks/use-node-status';
-import type { DataSourceListSlots, Services } from '@editor/type';
-
-defineSlots<DataSourceListSlots>();
-
-defineOptions({
-  name: 'MEditorDataSourceList',
-});
-
-const emit = defineEmits<{
-  edit: [id: string];
-  remove: [id: string];
-}>();
-
-const { depService, editorService, dataSourceService } = inject<Services>('services') || {};
-
-const editable = computed(() => dataSourceService?.get('editable') ?? true);
-
-const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
-
-const dsDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE) || {});
-const dsMethodDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_METHOD) || {});
-const dsCondDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_COND) || {});
-
-const getKeyTreeConfig = (dep: DepData[string], type?: string, parentKey?: Id) =>
-  dep.keys.map((key) => ({
-    name: key,
-    id: `${parentKey}_${key}`,
-    type: 'key',
-    isMethod: type === 'method',
-    isCond: type === 'cond',
-  }));
-
-const getNodeTreeConfig = (id: string, dep: DepData[string], type?: string, parentKey?: Id) => ({
-  name: dep.name,
-  type: 'node',
-  id: `${parentKey}_${id}`,
-  key: id,
-  items: getKeyTreeConfig(dep, type, `${parentKey}_${id}`),
-});
-
-/**
- * 生成tree中依赖节点的数据
- * @param items 节点
- * @param deps 依赖
- * @param type 依赖类型
- */
-const mergeChildren = (dsId: Id, items: any[], deps: DepData, type?: string) => {
-  Object.entries(deps).forEach(([id, dep]) => {
-    // 已经生成过的节点
-    const nodeItem = items.find((item) => item.key === id);
-    // 节点存在，则追加依赖的key
-    if (nodeItem) {
-      nodeItem.items = nodeItem.items.concat(getKeyTreeConfig(dep, type, nodeItem.key));
-    } else {
-      // 节点不存在，则生成
-      items.push(getNodeTreeConfig(id, dep, type, dsId));
-    }
-  });
-};
-
-const list = computed(() =>
-  dataSources.value.map((ds) => {
-    const dsDeps = dsDep.value[ds.id]?.deps || {};
-    const dsMethodDeps = dsMethodDep.value[ds.id]?.deps || {};
-    const dsCondDeps = dsCondDep.value[ds.id]?.deps || {};
-
-    const items: any[] = [];
-    // 数据源依赖分为三种类型：key/node、method、cond，是分开存储，这里将其合并展示
-    mergeChildren(ds.id, items, dsDeps);
-    mergeChildren(ds.id, items, dsMethodDeps, 'method');
-    mergeChildren(ds.id, items, dsCondDeps, 'cond');
-
-    return {
-      id: ds.id,
-      key: ds.id,
-      name: ds.title,
-      type: 'ds',
-      items,
-    };
-  }),
-);
-
-const filterNode = (value: string, data: MNode): boolean => {
-  if (!value) {
-    return true;
-  }
-  return `${data.name}${data.id}`.toLocaleLowerCase().includes(value.toLocaleLowerCase());
-};
-
-const { nodeStatusMap } = useNodeStatus(list);
-const { filterTextChangeHandler } = useFilter(list, nodeStatusMap, filterNode);
-
-const editHandler = (id: string) => {
-  emit('edit', id);
-};
-
-const removeHandler = async (id: string) => {
-  await tMagicMessageBox.confirm('确定删除?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
-
-  emit('remove', id);
-};
-
-// 选中组件
-const selectComp = (compId: Id) => {
-  const stage = editorService?.get('stage');
-  editorService?.select(compId);
-  stage?.select(compId);
-};
-
-const clickHandler = (event: MouseEvent, data: any) => {
-  if (data.type === 'node') {
-    selectComp(data.key);
-  }
-};
-
-defineExpose({
-  filter: filterTextChangeHandler,
-});
-</script>

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -1,106 +0,0 @@
-<template>
-  <TMagicScrollbar class="data-source-list-panel m-editor-layer-panel">
-    <div class="search-wrapper">
-      <SearchInput @search="filterTextChangeHandler"></SearchInput>
-      <TMagicPopover v-if="editable" placement="right">
-        <template #reference>
-          <TMagicButton type="primary" size="small">新增</TMagicButton>
-        </template>
-        <div class="data-source-list-panel-add-menu">
-          <ToolButton
-            v-for="(item, index) in datasourceTypeList"
-            :data="{
-              type: 'button',
-              text: item.text,
-              handler: () => {
-                addHandler(item.type);
-              },
-            }"
-            :key="index"
-          ></ToolButton>
-        </div>
-      </TMagicPopover>
-
-      <slot name="data-source-panel-search"></slot>
-    </div>
-
-    <!-- 数据源列表 -->
-    <DataSourceList ref="dataSourceList" @edit="editHandler" @remove="removeHandler"></DataSourceList>
-  </TMagicScrollbar>
-
-  <DataSourceConfigPanel
-    ref="editDialog"
-    :disabled="!editable"
-    :values="dataSourceValues"
-    :title="dialogTitle"
-    @submit="submitDataSourceHandler"
-  ></DataSourceConfigPanel>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, ref } from 'vue';
-import { mergeWith } from 'lodash-es';
-
-import { TMagicButton, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
-
-import SearchInput from '@editor/components/SearchInput.vue';
-import ToolButton from '@editor/components/ToolButton.vue';
-import { useDataSourceEdit } from '@editor/hooks/use-data-source-edit';
-import type { DataSourceListSlots, EventBus, Services } from '@editor/type';
-
-import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
-import DataSourceList from './DataSourceList.vue';
-
-defineSlots<DataSourceListSlots>();
-
-defineOptions({
-  name: 'MEditorDataSourceListPanel',
-});
-
-const eventBus = inject<EventBus>('eventBus');
-const { dataSourceService } = inject<Services>('services') || {};
-
-const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } =
-  useDataSourceEdit(dataSourceService);
-
-const datasourceTypeList = computed(() =>
-  [
-    { text: '基础', type: 'base' },
-    { text: 'HTTP', type: 'http' },
-  ].concat(dataSourceService?.get('datasourceTypeList') ?? []),
-);
-
-const addHandler = (type: string) => {
-  if (!editDialog.value) return;
-
-  const datasourceType = datasourceTypeList.value.find((item) => item.type === type);
-
-  dataSourceValues.value = mergeWith(
-    { type, title: datasourceType?.text },
-    dataSourceService?.getFormValue(type) || {},
-    (objValue, srcValue) => {
-      if (Array.isArray(srcValue)) {
-        return srcValue;
-      }
-    },
-  );
-
-  dialogTitle.value = `新增${datasourceType?.text || ''}`;
-
-  editDialog.value.show();
-};
-
-const removeHandler = (id: string) => {
-  dataSourceService?.remove(id);
-};
-
-const dataSourceList = ref<InstanceType<typeof DataSourceList>>();
-
-const filterTextChangeHandler = (val: string) => {
-  dataSourceList.value?.filter(val);
-};
-
-eventBus?.on('edit-data-source', (id: string) => {
-  editHandler(id);
-});
-</script>

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

@@ -1,128 +0,0 @@
-<template>
-  <ContentMenu :menu-data="menuData" ref="menu" style="overflow: initial"></ContentMenu>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, markRaw, ref } from 'vue';
-import { Files, Plus } from '@element-plus/icons-vue';
-
-import { isPage, isPageFragment } from '@tmagic/utils';
-
-import ContentMenu from '@editor/components/ContentMenu.vue';
-import FolderMinusIcon from '@editor/icons/FolderMinusIcon.vue';
-import type { ComponentGroup, MenuButton, MenuComponent, Services } from '@editor/type';
-import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from '@editor/utils/content-menu';
-
-defineOptions({
-  name: 'MEditorLayerMenu',
-});
-
-const props = withDefaults(
-  defineProps<{
-    layerContentMenu: (MenuButton | MenuComponent)[];
-    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
-  }>(),
-  {
-    layerContentMenu: () => [],
-    customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus,
-  },
-);
-
-const emit = defineEmits<{
-  'collapse-all': [];
-}>();
-
-const services = inject<Services>('services');
-const menu = ref<InstanceType<typeof ContentMenu>>();
-const node = computed(() => services?.editorService.get('node'));
-const nodes = computed(() => services?.editorService.get('nodes'));
-const componentList = computed(() => services?.componentListService.getList() || []);
-
-const createMenuItems = (group: ComponentGroup): MenuButton[] =>
-  group.items.map((component) => ({
-    text: component.text,
-    type: 'button',
-    icon: component.icon,
-    handler: () => {
-      services?.editorService.add({
-        name: component.text,
-        type: component.type,
-        ...(component.data || {}),
-      });
-    },
-  }));
-
-const getSubMenuData = computed<MenuButton[]>(() => {
-  if (node.value?.type === 'tabs') {
-    return [
-      {
-        text: '标签页',
-        type: 'button',
-        icon: Files,
-        handler: () => {
-          services?.editorService.add({
-            type: 'tab-pane',
-          });
-        },
-      },
-    ];
-  }
-  if (node.value?.items) {
-    return (
-      componentList.value.reduce(
-        (subMenuData: MenuButton[], group: ComponentGroup, index) =>
-          subMenuData.concat(
-            createMenuItems(group),
-            index < componentList.value.length - 1
-              ? [
-                  {
-                    type: 'divider',
-                    direction: 'horizontal',
-                  },
-                ]
-              : [],
-          ),
-        [],
-      ) || []
-    );
-  }
-  return [];
-});
-
-const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
-  props.customContentMenu(
-    [
-      {
-        type: 'button',
-        text: '全部折叠',
-        icon: FolderMinusIcon,
-        display: () => isPage(node.value) || isPageFragment(node.value),
-        handler: () => {
-          emit('collapse-all');
-        },
-      },
-      {
-        type: 'button',
-        text: '新增',
-        icon: markRaw(Plus),
-        display: () => node.value?.items && nodes.value?.length === 1,
-        items: getSubMenuData.value,
-      },
-      useCopyMenu(),
-      usePasteMenu(),
-      useDeleteMenu(),
-      useMoveToMenu(services),
-      ...props.layerContentMenu,
-    ],
-    'layer',
-  ),
-);
-
-const show = (e: MouseEvent) => {
-  menu.value?.show(e);
-};
-
-defineExpose({
-  show,
-});
-</script>

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

@@ -1,32 +0,0 @@
-<template>
-  <template v-if="data.type !== 'page'">
-    <MIcon v-if="data.visible === false" :icon="Hide" @click.stop="setNodeVisible(true)" title="点击显示"></MIcon>
-    <MIcon v-else :icon="View" @click.stop="setNodeVisible(false)" class="node-lock" title="点击隐藏"></MIcon>
-  </template>
-</template>
-
-<script setup lang="ts">
-import { inject } from 'vue';
-import { Hide, View } from '@element-plus/icons-vue';
-
-import type { MNode } from '@tmagic/schema';
-
-import MIcon from '@editor/components/Icon.vue';
-import { Services } from '@editor/type';
-
-const props = defineProps<{
-  data: MNode;
-}>();
-
-const services = inject<Services>('services');
-const editorService = services?.editorService;
-
-const setNodeVisible = (visible: boolean) => {
-  if (!editorService) return;
-
-  editorService.update({
-    id: props.data.id,
-    visible,
-  });
-};
-</script>

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

@@ -1,119 +0,0 @@
-<template>
-  <TMagicScrollbar class="m-editor-layer-panel">
-    <slot name="layer-panel-header"></slot>
-
-    <SearchInput @search="filterTextChangeHandler"></SearchInput>
-
-    <Tree
-      v-if="page && nodeStatusMap"
-      tabindex="-1"
-      ref="tree"
-      :data="nodeData"
-      :node-status-map="nodeStatusMap"
-      @node-dragover="handleDragOver"
-      @node-dragstart="handleDragStart"
-      @node-dragleave="handleDragLeave"
-      @node-dragend="handleDragEnd"
-      @node-contextmenu="nodeContentMenuHandler"
-      @node-mouseenter="mouseenterHandler"
-      @node-click="nodeClickHandler"
-    >
-      <template #tree-node-content="{ data: nodeData }">
-        <slot name="layer-node-content" :data="nodeData"> </slot>
-      </template>
-
-      <template #tree-node-tool="{ data: nodeData }">
-        <slot name="layer-node-tool" :data="nodeData">
-          <LayerNodeTool :data="nodeData"></LayerNodeTool>
-        </slot>
-      </template>
-
-      <template #tree-node-label="{ data: nodeData }">
-        <slot name="layer-node-label" :data="nodeData"></slot>
-      </template>
-    </Tree>
-
-    <Teleport to="body">
-      <LayerMenu
-        ref="menu"
-        :layer-content-menu="layerContentMenu"
-        :custom-content-menu="customContentMenu"
-        @collapse-all="collapseAllHandler"
-      ></LayerMenu>
-    </Teleport>
-  </TMagicScrollbar>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, ref } from 'vue';
-
-import { TMagicScrollbar } from '@tmagic/design';
-import type { MNode } from '@tmagic/schema';
-
-import SearchInput from '@editor/components/SearchInput.vue';
-import Tree from '@editor/components/Tree.vue';
-import { useFilter } from '@editor/hooks/use-filter';
-import { LayerPanelSlots, MenuButton, MenuComponent, Services, TreeNodeData } from '@editor/type';
-
-import LayerMenu from './LayerMenu.vue';
-import LayerNodeTool from './LayerNodeTool.vue';
-import { useClick } from './use-click';
-import { useDrag } from './use-drag';
-import { useKeybinding } from './use-keybinding';
-import { useNodeStatus } from './use-node-status';
-
-defineSlots<LayerPanelSlots>();
-
-defineOptions({
-  name: 'MEditorLayerPanel',
-});
-
-defineProps<{
-  layerContentMenu: (MenuButton | MenuComponent)[];
-  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
-}>();
-
-const services = inject<Services>('services');
-const editorService = services?.editorService;
-
-const tree = ref<InstanceType<typeof Tree>>();
-
-const page = computed(() => editorService?.get('page'));
-const nodeData = computed<TreeNodeData[]>(() => (!page.value ? [] : [page.value]));
-
-const { nodeStatusMap } = useNodeStatus(services);
-const { isCtrlKeyDown } = useKeybinding(services, tree);
-
-const filterNodeMethod = (v: string, data: MNode): boolean => {
-  let name = '';
-  if (data.name) {
-    name = data.name;
-  } else if (data.items) {
-    name = 'container';
-  }
-
-  return `${data.id}${name}${data.type}`.includes(v);
-};
-
-const { filterTextChangeHandler } = useFilter(nodeData, nodeStatusMap, filterNodeMethod);
-
-const collapseAllHandler = () => {
-  if (!page.value || !nodeStatusMap.value) return;
-  const items = nodeStatusMap.value.entries();
-  for (const [id, status] of items) {
-    if (id === page.value.id) {
-      continue;
-    }
-    status.expand = false;
-  }
-};
-
-const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services);
-
-const {
-  menu,
-  nodeClickHandler,
-  nodeContentMenuHandler,
-  highlightHandler: mouseenterHandler,
-} = useClick(services, isCtrlKeyDown, nodeStatusMap);
-</script>

package/src/layouts/sidebar/layer/use-click.ts

@@ -1,110 +0,0 @@
-import { computed, type ComputedRef, nextTick, type Ref, ref } from 'vue';
-import { throttle } from 'lodash-es';
-
-import { Id, MNode } from '@tmagic/schema';
-
-import { LayerNodeStatus, Services, TreeNodeData, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
-import { updateStatus } from '@editor/utils/tree';
-
-import LayerMenu from './LayerMenu.vue';
-
-export const useClick = (
-  services: Services | undefined,
-  isCtrlKeyDown: Ref<boolean>,
-  nodeStatusMap: ComputedRef<Map<Id, LayerNodeStatus> | undefined>,
-) => {
-  const isMultiSelect = computed(() => isCtrlKeyDown.value && !services?.editorService.get('disabledMultiSelect'));
-
-  // 触发画布选中
-  const select = async (data: MNode) => {
-    if (!data.id) {
-      throw new Error('没有id');
-    }
-
-    if (isMultiSelect.value) {
-      multiSelect(data);
-    } else {
-      await services?.editorService.select(data);
-      services?.editorService.get('stage')?.select(data.id);
-      services?.stageOverlayService.get('stage')?.select(data.id);
-    }
-  };
-
-  const multiSelect = async (data: MNode) => {
-    const nodes = services?.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 services?.editorService.multiSelect(newNodes);
-    services?.editorService.get('stage')?.multiSelect(newNodes);
-    services?.stageOverlayService.get('stage')?.multiSelect(newNodes);
-  };
-
-  const throttleTime = 300;
-  // 鼠标在组件树移动触发高亮
-  const highlightHandler = throttle((event: MouseEvent, data: TreeNodeData) => {
-    highlight(data);
-  }, throttleTime);
-
-  // 触发画布高亮
-  const highlight = (data: TreeNodeData) => {
-    services?.editorService?.highlight(data);
-    services?.editorService?.get('stage')?.highlight(data.id);
-    services?.stageOverlayService?.get('stage')?.highlight(data.id);
-  };
-
-  const nodeClickHandler = (event: MouseEvent, data: TreeNodeData) => {
-    if (!nodeStatusMap?.value) return;
-
-    if (services?.uiService.get('uiSelectMode')) {
-      document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: data }));
-      return;
-    }
-
-    if (data.items && data.items.length > 0 && !isMultiSelect.value) {
-      updateStatus(nodeStatusMap.value, data.id, {
-        expand: true,
-      });
-    }
-
-    nextTick(() => {
-      select(data);
-    });
-  };
-
-  // 右键菜单
-  const menu = ref<InstanceType<typeof LayerMenu>>();
-
-  return {
-    menu,
-
-    nodeClickHandler,
-
-    nodeContentMenuHandler(event: MouseEvent, data: TreeNodeData) {
-      event.preventDefault();
-
-      const nodes = services?.editorService.get('nodes') || [];
-      if (nodes.length < 2 || !nodes.includes(data)) {
-        nodeClickHandler(event, data);
-      }
-
-      menu.value?.show(event);
-    },
-
-    highlightHandler,
-  };
-};