@tmagic/editor 1.4.8 → 1.4.10

package/src/components/SearchInput.vue

@@ -0,0 +1,37 @@
+<template>
+  <TMagicInput
+    v-model="filterText"
+    class="search-input"
+    size="small"
+    placeholder="输入关键字进行过滤"
+    clearable
+    @input="filterTextChangeHandler"
+  >
+    <template #prefix>
+      <TMagicIcon><Search /></TMagicIcon>
+    </template>
+  </TMagicInput>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Search } from '@element-plus/icons-vue';
+
+import { TMagicIcon, TMagicInput } from '@tmagic/design';
+
+defineOptions({
+  name: 'MEditorSearchInput',
+});
+
+const emit = defineEmits(['search']);
+
+const filterText = ref('');
+
+let timer: NodeJS.Timeout | null = null;
+const filterTextChangeHandler = () => {
+  timer && clearTimeout(timer);
+  timer = setTimeout(() => {
+    emit('search', filterText.value);
+  }, 300);
+};
+</script>

package/src/components/SplitView.vue

@@ -0,0 +1,186 @@
+<template>
+  <div ref="el" class="m-editor-layout" :style="`min-width: ${props.minCenter + props.minLeft + props.minRight}px`">
+    <template v-if="hasLeft && $slots.left">
+      <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
+        <slot name="left"></slot>
+      </div>
+      <Resizer @change="changeLeft"></Resizer>
+    </template>
+
+    <div class="m-editor-layout-center" :class="centerClass" :style="`width: ${center}px`">
+      <slot name="center"></slot>
+    </div>
+
+    <template v-if="hasRight && $slots.right">
+      <Resizer @change="changeRight"></Resizer>
+      <div class="m-editor-layout-right" :class="rightClass" :style="`width: ${right}px`">
+        <slot name="right"></slot>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
+import { OnDrag } from 'gesto';
+
+import Resizer from './Resizer.vue';
+
+defineOptions({
+  name: 'MEditorSplitView',
+});
+
+const emit = defineEmits(['update:left', 'change', 'update:right']);
+
+const props = withDefaults(
+  defineProps<{
+    width?: number;
+    left?: number;
+    right?: number;
+    minLeft?: number;
+    minRight?: number;
+    minCenter?: number;
+    leftClass?: string;
+    rightClass?: string;
+    centerClass?: string;
+  }>(),
+  {
+    minLeft: 46,
+    minRight: 1,
+    minCenter: 5,
+  },
+);
+
+const el = ref<HTMLElement>();
+
+const hasLeft = computed(() => typeof props.left !== 'undefined');
+const hasRight = computed(() => typeof props.right !== 'undefined');
+const center = ref(0);
+
+let clientWidth = 0;
+
+const getCenterWidth = (l = 0, r = 0) => {
+  let right = r > 0 ? r : 0;
+  let left = l > 0 ? l : 0;
+  let center = clientWidth - left - right;
+
+  if (center < props.minCenter) {
+    center = props.minCenter;
+    if (right > center + props.minRight) {
+      right = clientWidth - left - center;
+    } else {
+      right = props.minRight;
+      left = clientWidth - right - center;
+    }
+  }
+  return {
+    center,
+    left,
+    right,
+  };
+};
+
+const widthChange = (width: number) => {
+  if (width <= 0) {
+    return;
+  }
+
+  clientWidth = width;
+  let left = props.left || 0;
+  let right = props.right || 0;
+
+  if (left > clientWidth) {
+    left = clientWidth / 3;
+  }
+
+  if (right > clientWidth) {
+    right = clientWidth / 3;
+  }
+
+  const columnWidth = getCenterWidth(left, right);
+
+  center.value = columnWidth.center;
+
+  emit('change', columnWidth);
+};
+
+if (typeof props.width !== 'number') {
+  const resizerObserver = new ResizeObserver((entries) => {
+    for (const { contentRect } of entries) {
+      widthChange(contentRect.width);
+    }
+  });
+
+  onMounted(() => {
+    if (el.value) {
+      resizerObserver.observe(el.value);
+    }
+  });
+
+  onBeforeUnmount(() => {
+    resizerObserver.disconnect();
+  });
+} else {
+  watchEffect(() => {
+    if (typeof props.width === 'number') widthChange(props.width);
+  });
+}
+
+const changeLeft = ({ deltaX }: OnDrag) => {
+  if (typeof props.left === 'undefined') return;
+  let left = Math.max(props.left + deltaX, props.minLeft) || 0;
+  emit('update:left', left);
+
+  if (clientWidth - left - (props.right || 0) <= 0) {
+    left = props.left;
+  }
+
+  const columnWidth = getCenterWidth(left, props.right || 0);
+
+  center.value = columnWidth.center;
+
+  emit('change', {
+    left: columnWidth.left,
+    center: center.value,
+    right: columnWidth.right,
+  });
+};
+
+const changeRight = ({ deltaX }: OnDrag) => {
+  if (typeof props.right === 'undefined') return;
+  let right = Math.max(props.right - deltaX, props.minRight) || 0;
+  emit('update:right', right);
+
+  if (clientWidth - (props.left || 0) - right <= 0) {
+    right = props.right;
+  }
+
+  const columnWidth = getCenterWidth(props.left, right);
+
+  center.value = columnWidth.center;
+
+  emit('change', {
+    left: columnWidth.left,
+    center: center.value,
+    right: columnWidth.right,
+  });
+};
+
+defineExpose({
+  updateWidth() {
+    clientWidth = props.width ?? el.value?.clientWidth ?? clientWidth;
+
+    if (clientWidth <= 0) {
+      return;
+    }
+
+    const columnWidth = getCenterWidth(props.left, props.right);
+
+    emit('change', {
+      left: columnWidth.left,
+      center: center.value,
+      right: columnWidth.right,
+    });
+  },
+});
+</script>

package/src/components/ToolButton.vue

@@ -0,0 +1,138 @@
+<template>
+  <div
+    v-if="display"
+    class="menu-item"
+    :class="`${data.type} ${data.className || ''}`"
+    @click="clickHandler(data, $event)"
+    @mousedown="mousedownHandler(data, $event)"
+    @mouseup="mouseupHandler(data, $event)"
+  >
+    <TMagicDivider v-if="data.type === 'divider'" :direction="data.direction || 'vertical'"></TMagicDivider>
+    <div v-else-if="data.type === 'text'" class="menu-item-text">{{ data.text }}</div>
+
+    <template v-else-if="data.type === 'button'">
+      <TMagicTooltip v-if="data.tooltip" effect="dark" placement="bottom-start" :content="data.tooltip">
+        <TMagicButton size="small" link :disabled="disabled"
+          ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
+        >
+      </TMagicTooltip>
+      <TMagicButton v-else size="small" link :disabled="disabled" :title="data.text"
+        ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
+      >
+    </template>
+
+    <TMagicDropdown
+      v-else-if="data.type === 'dropdown'"
+      trigger="click"
+      :disabled="disabled"
+      @command="dropdownHandler"
+    >
+      <span class="el-dropdown-link menubar-menu-button">
+        {{ data.text }}<TMagicIcon class="el-icon--right"><ArrowDown></ArrowDown></TMagicIcon>
+      </span>
+      <template #dropdown>
+        <TMagicDropdownMenu v-if="data.items && data.items.length">
+          <TMagicDropdownItem v-for="(subItem, index) in data.items" :key="index" :command="{ data, subItem }">{{
+            subItem.text
+          }}</TMagicDropdownItem>
+        </TMagicDropdownMenu>
+      </template>
+    </TMagicDropdown>
+
+    <component
+      v-else-if="data.type === 'component'"
+      v-bind="data.props || {}"
+      v-on="(data as MenuComponent).listeners || {}"
+      :is="data.component"
+    ></component>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+import { ArrowDown } from '@element-plus/icons-vue';
+
+import {
+  TMagicButton,
+  TMagicDivider,
+  TMagicDropdown,
+  TMagicDropdownItem,
+  TMagicDropdownMenu,
+  TMagicIcon,
+  TMagicTooltip,
+} from '@tmagic/design';
+
+import MIcon from '../components/Icon.vue';
+import type { MenuButton, MenuComponent, Services } from '../type';
+
+defineOptions({
+  name: 'MEditorToolButton',
+});
+
+const props = withDefaults(
+  defineProps<{
+    data?: MenuButton | MenuComponent;
+    eventType?: 'mousedown' | 'mouseup' | 'click';
+  }>(),
+  {
+    data: () => ({
+      type: 'text',
+      display: false,
+    }),
+    eventType: 'click',
+  },
+);
+const services = inject<Services>('services');
+
+const disabled = computed(() => {
+  if (typeof props.data === 'string') return false;
+  if (props.data.type === 'component') return false;
+  if (typeof props.data.disabled === 'function') {
+    return props.data.disabled(services);
+  }
+  return props.data.disabled;
+});
+
+const display = computed(() => {
+  if (!props.data) return false;
+  if (typeof props.data === 'string') return true;
+  if (typeof props.data.display === 'function') {
+    return props.data.display(services);
+  }
+  return props.data.display ?? true;
+});
+
+const buttonHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
+  if (disabled.value) return;
+  if (typeof (item as MenuButton).handler === 'function' && services) {
+    (item as MenuButton).handler?.(services, event);
+  }
+};
+
+const dropdownHandler = (command: any) => {
+  if (command.item.handler) {
+    command.item.handler(services);
+  }
+};
+
+const clickHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
+  if (props.eventType !== 'click') return;
+  if (item.type === 'button') {
+    buttonHandler(item, event);
+  }
+};
+
+const mousedownHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
+  if (props.eventType !== 'mousedown') return;
+  if (item.type === 'button') {
+    buttonHandler(item, event);
+  }
+};
+
+const mouseupHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
+  if (props.eventType !== 'mouseup') return;
+  if (item.type === 'button') {
+    buttonHandler(item, event);
+  }
+};
+</script>

package/src/components/Tree.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="m-editor-tree" @dragover="handleDragOver">
+    <template v-if="data?.length">
+      <TreeNode v-for="item in data" :key="item.id" :data="item" :indent="indent" :node-status-map="nodeStatusMap">
+        <template #tree-node-content="{ data: nodeData }">
+          <slot name="tree-node-content" :data="nodeData"> </slot>
+        </template>
+
+        <template #tree-node-label="{ data: nodeData }">
+          <slot name="tree-node-label" :data="nodeData"> </slot>
+        </template>
+
+        <template #tree-node-tool="{ data: nodeData }">
+          <slot name="tree-node-tool" :data="nodeData"> </slot>
+        </template>
+      </TreeNode>
+    </template>
+    <div v-else class="m-editor-tree-empty">
+      <p>{{ emptyText }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide } from 'vue';
+
+import type { Id } from '@tmagic/schema';
+
+import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
+
+import TreeNode from './TreeNode.vue';
+
+defineSlots<{
+  'tree-node-content'(props: { data: TreeNodeData }): any;
+  'tree-node-label'(props: { data: TreeNodeData }): any;
+  'tree-node-tool'(props: { data: TreeNodeData }): any;
+}>();
+
+defineOptions({
+  name: 'MEditorTree',
+});
+
+const emit = defineEmits<{
+  'node-dragover': [event: DragEvent];
+  'node-dragstart': [event: DragEvent, data: TreeNodeData];
+  'node-dragleave': [event: DragEvent, data: TreeNodeData];
+  'node-dragend': [event: DragEvent, data: TreeNodeData];
+  'node-contextmenu': [event: MouseEvent, data: TreeNodeData];
+  'node-mouseenter': [event: MouseEvent, data: TreeNodeData];
+  'node-click': [event: MouseEvent, data: TreeNodeData];
+}>();
+
+provide('treeEmit', emit);
+
+withDefaults(
+  defineProps<{
+    data: TreeNodeData[];
+    nodeStatusMap: Map<Id, LayerNodeStatus>;
+    indent?: number;
+    emptyText?: string;
+  }>(),
+  {
+    indent: 0,
+    emptyText: '暂无数据',
+  },
+);
+
+const handleDragOver = (event: DragEvent) => {
+  emit('node-dragover', event);
+};
+</script>

package/src/components/TreeNode.vue

@@ -0,0 +1,150 @@
+<template>
+  <div
+    v-show="visible"
+    class="m-editor-tree-node"
+    :draggable="draggable"
+    :data-node-id="data.id"
+    :data-is-container="Array.isArray(data.items)"
+    @dragstart="handleDragStart"
+    @dragleave="handleDragLeave"
+    @dragend="handleDragEnd"
+  >
+    <div
+      class="tree-node"
+      :class="{ selected, expanded }"
+      :style="`padding-left: ${indent}px`"
+      @contextmenu="nodeContentmenuHandler"
+      @mouseenter="mouseenterHandler"
+    >
+      <MIcon
+        class="expand-icon"
+        :style="hasChildren ? '' : 'color: transparent; cursor: default'"
+        :icon="expanded ? ArrowDown : ArrowRight"
+        @click="expandHandler"
+      ></MIcon>
+
+      <div class="tree-node-content" @click="nodeClickHandler">
+        <slot name="tree-node-content" :data="data">
+          <div class="tree-node-label">
+            <slot name="tree-node-label" :data="data">{{ `${data.name} (${data.id})` }}</slot>
+          </div>
+          <div class="tree-node-tool">
+            <slot name="tree-node-tool" :data="data"></slot>
+          </div>
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="hasChildren && expanded" class="m-editor-tree-node-children">
+      <TreeNode
+        v-for="item in data.items"
+        :key="item.id"
+        :data="item"
+        :node-status-map="nodeStatusMap"
+        :indent="indent + 11"
+      >
+        <template #tree-node-content="{ data: nodeData }">
+          <slot name="tree-node-content" :data="nodeData"> </slot>
+        </template>
+        <template #tree-node-label="{ data: nodeData }">
+          <slot name="tree-node-label" :data="nodeData"> </slot>
+        </template>
+        <template #tree-node-tool="{ data: nodeData }">
+          <slot name="tree-node-tool" :data="nodeData"> </slot>
+        </template>
+      </TreeNode>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
+
+import type { Id } from '@tmagic/schema';
+
+import MIcon from '@editor/components/Icon.vue';
+import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
+import { updateStatus } from '@editor/utils/tree';
+
+defineSlots<{
+  'tree-node-label'(props: { data: TreeNodeData }): any;
+  'tree-node-tool'(props: { data: TreeNodeData }): any;
+  'tree-node-content'(props: { data: TreeNodeData }): any;
+}>();
+
+defineOptions({
+  name: 'MEditorTreeNode',
+});
+
+const emit = defineEmits<{
+  'node-dragstart': [event: DragEvent, data: TreeNodeData];
+  'node-dragleave': [event: DragEvent, data: TreeNodeData];
+  'node-dragend': [event: DragEvent, data: TreeNodeData];
+  'node-contextmenu': [event: MouseEvent, data: TreeNodeData];
+  'node-mouseenter': [event: MouseEvent, data: TreeNodeData];
+  'node-click': [event: MouseEvent, data: TreeNodeData];
+}>();
+
+const treeEmit = inject<typeof emit>('treeEmit');
+
+const props = withDefaults(
+  defineProps<{
+    data: TreeNodeData;
+    nodeStatusMap: Map<Id, LayerNodeStatus>;
+    indent?: number;
+  }>(),
+  {
+    indent: 0,
+  },
+);
+
+const nodeStatus = computed(
+  () =>
+    props.nodeStatusMap?.get(props.data.id) || {
+      selected: false,
+      expand: false,
+      visible: false,
+      draggable: false,
+    },
+);
+
+const expanded = computed(() => nodeStatus.value.expand);
+const selected = computed(() => nodeStatus.value.selected);
+const visible = computed(() => nodeStatus.value.visible);
+const draggable = computed(() => nodeStatus.value.draggable);
+
+const hasChildren = computed(
+  () => Array.isArray(props.data.items) && props.data.items.some((item) => props.nodeStatusMap.get(item.id)?.visible),
+);
+
+const handleDragStart = (event: DragEvent) => {
+  treeEmit?.('node-dragstart', event, props.data);
+};
+
+const handleDragLeave = (event: DragEvent) => {
+  treeEmit?.('node-dragleave', event, props.data);
+};
+
+const handleDragEnd = (event: DragEvent) => {
+  treeEmit?.('node-dragend', event, props.data);
+};
+
+const nodeContentmenuHandler = (event: MouseEvent) => {
+  treeEmit?.('node-contextmenu', event, props.data);
+};
+
+const mouseenterHandler = (event: MouseEvent) => {
+  treeEmit?.('node-mouseenter', event, props.data);
+};
+
+const expandHandler = () => {
+  updateStatus(props.nodeStatusMap, props.data.id, {
+    expand: !expanded.value,
+  });
+};
+
+const nodeClickHandler = (event: MouseEvent) => {
+  treeEmit?.('node-click', event, props.data);
+};
+</script>

package/src/editorProps.ts

@@ -0,0 +1,120 @@
+import type { EventOption } from '@tmagic/core';
+import type { FormConfig, FormState } from '@tmagic/form';
+import type { DataSourceSchema, Id, MApp, MNode } from '@tmagic/schema';
+import StageCore, {
+  CONTAINER_HIGHLIGHT_CLASS_NAME,
+  ContainerHighlightType,
+  type CustomizeMoveableOptionsCallbackConfig,
+  type GuidesOptions,
+  type MoveableOptions,
+  RenderType,
+  type UpdateDragEl,
+} from '@tmagic/stage';
+
+import type {
+  ComponentGroup,
+  DatasourceTypeOption,
+  MenuBarData,
+  MenuButton,
+  MenuComponent,
+  PageBarSortOptions,
+  SideBarData,
+  StageRect,
+} from './type';
+
+export interface EditorProps {
+  /** 页面初始值 */
+  modelValue?: MApp;
+  /** 左侧面板中的组件类型列表 */
+  componentGroupList?: ComponentGroup[];
+  /** 左侧面板中的数据源类型列表 */
+  datasourceList?: DatasourceTypeOption[];
+  /** 左侧面板配置 */
+  sidebar?: SideBarData;
+  /** 顶部工具栏配置 */
+  menu?: MenuBarData;
+  /** 组件树右键菜单 */
+  layerContentMenu?: (MenuButton | MenuComponent)[];
+  /** 画布右键菜单 */
+  stageContentMenu?: (MenuButton | MenuComponent)[];
+  /** 中间工作区域中画布通过iframe渲染时的页面url */
+  runtimeUrl?: string;
+  /** 是用iframe渲染还是直接渲染 */
+  renderType?: RenderType;
+  /** 选中时是否自动滚动到可视区域 */
+  autoScrollIntoView?: boolean;
+  /** 组件的属性配置表单的dsl */
+  propsConfigs?: Record<string, FormConfig>;
+  /** 添加组件时的默认值 */
+  propsValues?: Record<string, Partial<MNode>>;
+  /** 组件联动事件选项列表 */
+  eventMethodList?: Record<string, { events: EventOption[]; methods: EventOption[] }>;
+  /** 添加数据源时的默认值 */
+  datasourceValues?: Record<string, Partial<DataSourceSchema>>;
+  /** 数据源的属性配置表单的dsl */
+  datasourceConfigs?: Record<string, FormConfig>;
+  datasourceEventMethodList?: Record<string, { events: EventOption[]; methods: EventOption[] }>;
+  /** 画布中组件选中框的移动范围 */
+  moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
+  /** 编辑器初始化时默认选中的组件ID */
+  defaultSelected?: Id;
+  /** 拖入画布中容器时，识别到容器后给容器根dom加上的class */
+  containerHighlightClassName?: string;
+  /** 拖入画布中容器时，悬停识别容器的时间 */
+  containerHighlightDuration?: number;
+  /** 拖入画布中容器时，识别容器的操作类型 */
+  containerHighlightType?: ContainerHighlightType;
+  /** 画布大小 */
+  stageRect?: StageRect;
+  /** monaco editor 的配置 */
+  codeOptions?: { [key: string]: any };
+  /** 禁用鼠标左键按下时就开始拖拽，需要先选中再可以拖拽 */
+  disabledDragStart?: boolean;
+  /** 标尺配置 */
+  guidesOptions?: Partial<GuidesOptions>;
+  /** 禁止多选 */
+  disabledMultiSelect?: boolean;
+  /** 禁用页面片 */
+  disabledPageFragment?: boolean;
+  /** 禁用双击在浮层中单独编辑选中组件 */
+  disabledStageOverlay?: boolean;
+  /** 禁用属性配置面板右下角显示源码的按钮 */
+  disabledShowSrc?: boolean;
+  /** 中间工作区域中画布渲染的内容 */
+  render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
+  /** 选中时会在画布上复制出一个大小相同的dom，实际拖拽的是这个dom，此方法用于干预这个dom的生成方式 */
+  updateDragEl?: UpdateDragEl;
+  /** 用于设置画布上的dom是否可以被选中 */
+  canSelect?: (el: HTMLElement) => boolean | Promise<boolean>;
+  /** 用于设置画布上的dom是否可以被拖入其中 */
+  isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
+  /** 用于自定义组件树与画布的右键菜单 */
+  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+  /** 页面顺序拖拽配置参数 */
+  pageBarSortOptions?: PageBarSortOptions;
+}
+
+export const defaultEditorProps = {
+  renderType: RenderType.IFRAME,
+  disabledMultiSelect: false,
+  disabledPageFragment: false,
+  disabledStageOverlay: false,
+  containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
+  containerHighlightDuration: 800,
+  containerHighlightType: ContainerHighlightType.DEFAULT,
+  disabledShowSrc: false,
+  componentGroupList: () => [],
+  datasourceList: () => [],
+  menu: () => ({ left: [], right: [] }),
+  layerContentMenu: () => [],
+  stageContentMenu: () => [],
+  propsConfigs: () => ({}),
+  propsValues: () => ({}),
+  eventMethodList: () => ({}),
+  datasourceValues: () => ({}),
+  datasourceConfigs: () => ({}),
+  canSelect: (el: HTMLElement) => Boolean(el.id),
+  isContainer: (el: HTMLElement) => el.classList.contains('magic-ui-container'),
+  codeOptions: () => ({}),
+};