@tmagic/editor 1.4.8 → 1.4.9

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

@@ -0,0 +1,172 @@
+<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, pageItems: any[], deps: DepData, type?: string) => {
+  Object.entries(deps).forEach(([id, dep]) => {
+    // 按页面分类显示
+    const page = pageItems.find((page) => page.key === dep.data?.pageId);
+
+    // 已经生成过的节点
+    const nodeItem = page?.items.find((item: any) => item.key === id);
+    // 节点存在，则追加依赖的key
+    if (nodeItem) {
+      nodeItem.items = nodeItem.items.concat(getKeyTreeConfig(dep, type, nodeItem.key));
+    } else {
+      // 节点不存在，则生成
+      page?.items.push(getNodeTreeConfig(id, dep, type, page.id));
+    }
+  });
+};
+
+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 =
+      editorService?.get('root')?.items.map((page) => ({
+        name: page.devconfig?.tabName || page.name,
+        type: 'node',
+        id: `${ds.id}_${page.id}`,
+        key: page.id,
+        items: [],
+      })) || [];
+
+    // 数据源依赖分为三种类型：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: items.length > 1 ? items.filter((page) => page.items.length) : items[0]?.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

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

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

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

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

@@ -0,0 +1,113 @@
+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: (event: MouseEvent, data: TreeNodeData) => void = 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): void => {
+    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): void {
+      event.preventDefault();
+
+      const nodes = services?.editorService.get('nodes') || [];
+      if (nodes.length < 2 || !nodes.includes(data)) {
+        nodeClickHandler(event, data);
+      }
+
+      menu.value?.show(event);
+    },
+
+    highlightHandler,
+  };
+};