@tmagic/editor 1.3.0-beta.1 → 1.3.0-beta.3

package/types/type.d.ts

@@ -15,6 +15,56 @@ import type { PropsService } from './services/props';
 import type { StorageService } from './services/storage';
 import type { UiService } from './services/ui';
 import type { UndoRedo } from './utils/undo-redo';
+export interface FrameworkSlots {
+    header(props: {}): any;
+    nav(props: {}): any;
+    'content-before'(props: {}): any;
+    'content-after'(props: {}): any;
+    'src-code'(props: {}): any;
+    sidebar(props: {}): any;
+    empty(props: {}): any;
+    workspace(props: {}): any;
+    'props-panel'(props: {}): any;
+    'footer'(props: {}): any;
+}
+export interface WorkspaceSlots {
+    stage(props: {}): any;
+    'workspace-content'(props: {}): any;
+    'page-bar-title'(props: {
+        page: MPage;
+    }): any;
+    'page-bar-popover'(props: {
+        page: MPage;
+    }): any;
+}
+export interface ComponentListPanelSlots {
+    'component-list-panel-header'(props: {}): any;
+    'component-list-item'(props: {
+        component: ComponentItem;
+    }): any;
+}
+export interface CodeBlockListPanelSlots extends CodeBlockListSlots {
+    'code-block-panel-search'(props: {}): any;
+    'code-block-panel-header'(props: {}): any;
+}
+export interface CodeBlockListSlots {
+    'code-block-panel-tool'(props: {
+        id: Id;
+        data: CodeBlockContent;
+    }): any;
+}
+export interface LayerNodeSlots {
+    'layer-node-content'(props: {
+        data: MNode;
+    }): any;
+}
+export interface LayerPanelSlots extends LayerNodeSlots {
+    'layer-panel-header'(props: {}): any;
+}
+export interface PropsPanelSlots {
+    'props-panel-header'(props: {}): any;
+}
+export type SidebarSlots = LayerPanelSlots & CodeBlockListPanelSlots & ComponentListPanelSlots;
 export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
 export interface InstallOptions {
@@ -335,6 +385,7 @@ export interface HistoryState {
 export interface EventSelectConfig {
     name: string;
     type: 'event-select';
+    src: 'datasource' | 'component';
     /** 事件名称表单配置 */
     eventNameConfig?: FormItem;
     /** 动作类型配置 */
@@ -417,6 +468,7 @@ export interface DataSourceMethodSelectConfig {
 export interface DataSourceFieldSelectConfig {
     type: 'data-source-field-select';
     name: string;
+    value?: 'key' | 'value';
     labelWidth?: number | string;
     disabled?: boolean | FilterFunction;
     display?: boolean | FilterFunction;
@@ -436,3 +488,12 @@ export interface DatasourceTypeOption {
     type: string;
     text: string;
 }
+export interface LayerNodeStatus {
+    visible: boolean;
+    expand: boolean;
+    selected: boolean;
+}
+export declare enum DragType {
+    COMPONENT_LIST = "component-list",
+    LAYER_TREE = "layer-tree"
+}

package/types/utils/dep.d.ts

@@ -1,4 +1,4 @@
-import { CodeBlockContent, Id } from '@tmagic/schema';
+import { type CodeBlockContent, type Id } from '@tmagic/schema';
 import { Target } from '../services/dep';
 export declare const createCodeBlockTarget: (id: Id, codeBlock: CodeBlockContent) => Target;
 export declare const createDataSourceTarget: (id: Id) => Target;

package/types/utils/editor.d.ts

@@ -1,4 +1,4 @@
-import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import { Layout } from '../type';
 export declare const COPY_STORAGE_KEY = "$MagicEditorCopyData";
@@ -31,7 +31,7 @@ export declare const generatePageNameByApp: (app: MApp) => string;
  * @returns {boolean}
  */
 export declare const isFixed: (node: MNode) => boolean;
-export declare const getNodeIndex: (node: MNode, parent: MContainer | MApp) => number;
+export declare const getNodeIndex: (id: Id, parent: MContainer | MApp) => number;
 export declare const getRelativeStyle: (style?: Record<string, any>) => Record<string, any>;
 export declare const getInitPositionStyle: (style: Record<string, any> | undefined, layout: Layout) => Record<string, any>;
 export declare const setLayout: (node: MNode, layout: Layout) => MNode;
@@ -46,3 +46,4 @@ export declare const fixNodePosition: (config: MNode, parent: MContainer, stage:
     [key: string]: any;
 } | undefined;
 export declare const serializeConfig: (config: any) => string;
+export declare const traverseNode: (node: MNode, cb: (node: MNode, parents: MNode[]) => void, parents?: MNode[]) => void;

package/src/layouts/sidebar/LayerNode.vue

@@ -1,40 +0,0 @@
-<template>
-  <div>
-    {{ `${data.name} (${data.id})` }}
-  </div>
-  <div class="layer-node-tool">
-    <template v-if="data.type !== 'page'">
-      <el-icon v-if="data.visible === false" @click.stop="setNodeVisible(true)" title="点击显示">
-        <Hide />
-      </el-icon>
-      <el-icon v-else @click.stop="setNodeVisible(false)" class="node-lock" title="点击隐藏">
-        <View />
-      </el-icon>
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { inject } from 'vue';
-import { Hide, View } from '@element-plus/icons-vue';
-
-import { MNode } from '@tmagic/schema';
-
-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/LayerPanel.vue

@@ -1,369 +0,0 @@
-<template>
-  <TMagicScrollbar class="magic-editor-layer-panel">
-    <slot name="layer-panel-header"></slot>
-
-    <SearchInput @search="filterTextChangeHandler"></SearchInput>
-
-    <TMagicTree
-      v-if="values.length"
-      class="magic-editor-layer-tree"
-      ref="tree"
-      node-key="id"
-      empty-text="页面空荡荡的"
-      tabindex="-1"
-      draggable
-      :default-expanded-keys="expandedKeys"
-      :default-checked-keys="checkedKeys"
-      :current-node-key="currentNodeKey"
-      :data="values"
-      :expand-on-click-node="false"
-      :highlight-current="!isMultiSelect"
-      :check-on-click-node="true"
-      :props="treeProps"
-      :filter-node-method="filterNode"
-      :allow-drop="allowDrop"
-      :show-checkbox="isMultiSelect"
-      @node-click="clickHandler"
-      @node-contextmenu="contextmenu"
-      @node-drag-end="handleDragEnd"
-      @node-collapse="handleCollapse"
-      @node-expand="handleExpand"
-      @check="checkHandler"
-      @mousedown="toggleClickFlag"
-      @mouseup="toggleClickFlag"
-    >
-      <template #default="{ node, data }">
-        <div class="cus-tree-node" :id="data.id" @mouseenter="highlightHandler(data)">
-          <slot name="layer-node-content" :node="node" :data="data">
-            <LayerNode :data="data"></LayerNode>
-          </slot>
-        </div>
-      </template>
-    </TMagicTree>
-
-    <Teleport to="body">
-      <LayerMenu ref="menu" :layer-content-menu="layerContentMenu" @collapse-all="collapseAllHandler"></LayerMenu>
-    </Teleport>
-  </TMagicScrollbar>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
-import { difference, throttle, union } from 'lodash-es';
-
-import { TMagicScrollbar, TMagicTree } from '@tmagic/design';
-import type { Id, MNode, MPage } from '@tmagic/schema';
-import { MContainer, NodeType } from '@tmagic/schema';
-import { getNodePath, isPage } from '@tmagic/utils';
-
-import SearchInput from '@editor/components/SearchInput.vue';
-import type { MenuButton, MenuComponent, Services } from '@editor/type';
-import { Layout } from '@editor/type';
-
-import LayerMenu from './LayerMenu.vue';
-import LayerNode from './LayerNode.vue';
-
-defineOptions({
-  name: 'MEditorLayerPanel',
-});
-
-defineProps<{
-  layerContentMenu: (MenuButton | MenuComponent)[];
-}>();
-
-const throttleTime = 150;
-const services = inject<Services>('services');
-const editorService = services?.editorService;
-const keybindingService = services?.keybindingService;
-
-const tree = ref<InstanceType<typeof TMagicTree>>();
-const menu = ref<InstanceType<typeof LayerMenu>>();
-
-// 多选选中的组件id数组
-const checkedKeys = ref<Id[]>([]);
-// 是否多选
-const isCtrlKeyDown = ref(false);
-// 默认展开节点
-const expandedKeys = ref<Id[]>([]);
-const currentNodeKey = ref<Id>();
-// 鼠标是否按下标志，用于高亮状态互斥
-const clicked = ref(false);
-
-const treeProps = {
-  children: 'items',
-  label: 'name',
-  value: 'id',
-  disabled: (data: MNode) => Boolean(data.items?.length),
-  class: (data: MNode) => {
-    if (clicked.value || isPage(data)) return '';
-    if (data.id === highlightNode?.value?.id && !checkedKeys.value.includes(data.id)) {
-      return 'cus-tree-node-hover';
-    }
-  },
-};
-
-const isMultiSelect = computed(() => isCtrlKeyDown.value || checkedKeys.value.length > 1);
-
-const nodes = computed(() => editorService?.get('nodes') || []);
-const page = computed(() => editorService?.get('page'));
-const values = computed(() => (page.value ? [page.value] : []));
-// 高亮的节点
-const highlightNode = computed(() => editorService?.get('highlightNode'));
-
-// 触发画布单选
-const select = async (data: MNode) => {
-  if (!data.id) {
-    throw new Error('没有id');
-  }
-
-  await editorService?.select(data);
-  editorService?.get('stage')?.select(data.id);
-};
-
-// 触发画布多选
-const multiSelect = async (data: Id[]) => {
-  await editorService?.multiSelect(data);
-  editorService?.get('stage')?.multiSelect(data);
-};
-
-// 触发画布高亮
-const highlight = (data: MNode) => {
-  if (!data?.id) {
-    throw new Error('没有id');
-  }
-  editorService?.highlight(data);
-  editorService?.get('stage')?.highlight(data.id);
-};
-
-// tree方法：拖拽时判定目标节点能否成为拖动目标位置
-const allowDrop = (draggingNode: any, dropNode: any, type: string): boolean => {
-  const { data } = dropNode || {};
-  const { data: ingData } = draggingNode;
-
-  const { type: ingType } = ingData;
-
-  if (ingType !== NodeType.PAGE && data.type === NodeType.PAGE) return false;
-  if (ingType === NodeType.PAGE && data.type !== NodeType.PAGE) return false;
-  if (!data?.type) return false;
-  if (['prev', 'next'].includes(type)) return true;
-  if (data.items || data.type === 'container') return true;
-
-  return false;
-};
-
-// tree事件：拖拽结束时（可能未成功）触发的事件
-const handleDragEnd = async (e: any) => {
-  if (!tree.value) return;
-  const { data: node } = e;
-  const parent = editorService?.getParentById(node.id, false) as MContainer;
-  const layout = await editorService?.getLayout(parent, node);
-  node.style.position = layout;
-  if (layout === Layout.RELATIVE) {
-    node.style.top = 0;
-    node.style.left = 0;
-  }
-  const data = tree.value.getData();
-  const [page] = data as [MPage];
-  editorService?.update(page);
-};
-
-// tree事件：节点被关闭时触发的事件
-const handleCollapse = (data: MNode) => {
-  expandedKeys.value = expandedKeys.value.filter((id) => id !== data.id);
-};
-
-// tree事件：节点被展开时触发的事件
-const handleExpand = (data: MNode) => {
-  if (!page.value) {
-    expandedKeys.value = [];
-    return;
-  }
-
-  expandedKeys.value = union(
-    expandedKeys.value,
-    getNodePath(data.id, [page.value]).map((node) => node.id),
-  );
-};
-
-// tree方法：对树节点进行筛选时执行的方法
-const filterNode = (value: string, data: MNode): boolean => {
-  if (!value) {
-    return true;
-  }
-  let name = '';
-  if (data.name) {
-    name = data.name;
-  } else if (data.items) {
-    name = 'container';
-  }
-  return `${data.id}${name}${data.type}`.indexOf(value) !== -1;
-};
-
-// 过滤关键字
-const filterTextChangeHandler = (val: string) => {
-  tree.value?.filter(val);
-};
-
-watch(nodes, (nodes) => {
-  const ids = nodes?.map((node) => node.id) || [];
-
-  const idsLength = ids.length;
-  const checkedKeysLength = checkedKeys.value.length;
-
-  if (
-    difference(
-      idsLength > checkedKeysLength ? ids : checkedKeys.value,
-      idsLength > checkedKeysLength ? checkedKeys.value : ids,
-    ).length
-  ) {
-    tree.value?.setCheckedKeys([], false);
-
-    checkedKeys.value = ids.filter((id) => id !== page.value?.id);
-    expandedKeys.value = union(expandedKeys.value, ids);
-  }
-
-  [currentNodeKey.value] = ids;
-
-  setTimeout(() => {
-    tree.value?.setCurrentKey(currentNodeKey.value);
-  });
-});
-
-watch(isMultiSelect, (isMultiSelect) => {
-  if (!isMultiSelect) {
-    currentNodeKey.value = editorService?.get('node')?.id;
-    tree.value?.setCurrentKey(currentNodeKey.value);
-  }
-});
-
-const editorServiceRemoveHandler = () => {
-  setTimeout(() => {
-    tree.value?.getNode(editorService?.get('node')?.id)?.updateChildren();
-  }, 0);
-};
-
-const windowBlurHandler = () => {
-  isCtrlKeyDown.value = false;
-};
-
-keybindingService?.registeCommand('layer-panel-not-ctrl-keydown', (e) => {
-  if (e.key !== keybindingService.ctrlKey) {
-    isCtrlKeyDown.value = false;
-  }
-});
-
-keybindingService?.registeCommand('layer-panel-ctrl-keydown', () => {
-  isCtrlKeyDown.value = true;
-});
-
-keybindingService?.registeCommand('layer-panel-ctrl-keyup', () => {
-  isCtrlKeyDown.value = false;
-});
-
-keybindingService?.registeCommand('layer-panel-global-keydwon', () => {
-  if (!tree.value?.$el.contains(document.activeElement)) {
-    isCtrlKeyDown.value = false;
-  }
-});
-
-keybindingService?.registe([
-  {
-    command: 'layer-panel-not-ctrl-keydown',
-    when: [['layer-panel', 'keydown']],
-  },
-  {
-    command: 'layer-panel-ctrl-keydown',
-    keybinding: 'ctrl',
-    when: [['layer-panel', 'keydown']],
-  },
-  {
-    command: 'layer-panel-ctrl-keyup',
-    keybinding: 'ctrl',
-    when: [['layer-panel', 'keyup']],
-  },
-  {
-    command: 'layer-panel-global-keydwon',
-    keybinding: 'ctrl',
-    when: [['global', 'keydown']],
-  },
-]);
-
-watch(tree, () => {
-  if (tree.value?.$el) {
-    keybindingService?.registeEl('layer-panel', tree.value.$el);
-
-    tree.value.$el.addEventListener('blur', windowBlurHandler);
-  } else {
-    keybindingService?.unregisteEl('layer-panel');
-  }
-});
-
-onMounted(() => {
-  editorService?.on('remove', editorServiceRemoveHandler);
-
-  globalThis.addEventListener('blur', windowBlurHandler);
-});
-
-onBeforeUnmount(() => {
-  tree.value?.$el.removeEventListener('blur', windowBlurHandler);
-});
-
-onUnmounted(() => {
-  editorService?.off('remove', editorServiceRemoveHandler);
-  globalThis.removeEventListener('blur', windowBlurHandler);
-});
-
-// 鼠标在组件树移动触发高亮
-const highlightHandler = throttle((data: MNode) => {
-  highlight(data);
-}, throttleTime);
-
-const toggleClickFlag = () => {
-  clicked.value = !clicked.value;
-};
-
-// 选择节点多选框
-const checkHandler = (data: MNode, { checkedNodes }: any): void => {
-  if (!isCtrlKeyDown.value && nodes.value.length < 2) {
-    return;
-  }
-  if (checkedNodes.length > 0) {
-    multiSelect(checkedNodes.map((node: MNode) => node.id));
-  } else {
-    multiSelect(nodes.value.map((node: MNode) => node.id));
-  }
-};
-
-// 点击节点
-const clickHandler = (data: MNode): void => {
-  if (isCtrlKeyDown.value) {
-    return;
-  }
-  if (services?.uiService.get('uiSelectMode')) {
-    document.dispatchEvent(new CustomEvent('ui-select', { detail: data }));
-    return;
-  }
-  select(data);
-};
-
-// 右键菜单
-const contextmenu = async (event: MouseEvent, data: MNode): Promise<void> => {
-  event.preventDefault();
-
-  if (nodes.value.length < 2) {
-    await select(data);
-  }
-
-  menu.value?.show(event);
-};
-
-const collapseAllHandler = () => {
-  const page = editorService?.get('page');
-  if (!tree.value || !page) return;
-  const rootNode = tree.value.getNode(page.id);
-  rootNode.childNodes.forEach((node: any) => {
-    node.collapse();
-    handleCollapse(node.data);
-  });
-};
-</script>