@tmagic/editor 1.4.7 → 1.4.8

package/src/components/ScrollViewer.vue

@@ -1,128 +0,0 @@
-<template>
-  <div class="m-editor-scroll-viewer-container" ref="container">
-    <div ref="el" :style="style">
-      <slot></slot>
-    </div>
-
-    <slot name="content"></slot>
-
-    <ScrollBar
-      v-if="scrollHeight > wrapHeight"
-      :scroll-size="scrollHeight"
-      :pos="vOffset"
-      :size="wrapHeight"
-      @scroll="vScrollHandler"
-    ></ScrollBar>
-    <ScrollBar
-      v-if="scrollWidth > wrapWidth"
-      :is-horizontal="true"
-      :scroll-size="scrollWidth"
-      :pos="hOffset"
-      :size="wrapWidth"
-      @scroll="hScrollHandler"
-    ></ScrollBar>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-
-import { isNumber } from '@tmagic/utils';
-
-import type { ScrollViewerEvent } from '@editor/type';
-import { ScrollViewer } from '@editor/utils/scroll-viewer';
-
-import ScrollBar from './ScrollBar.vue';
-
-defineOptions({
-  name: 'MEditorScrollViewer',
-});
-
-const props = withDefaults(
-  defineProps<{
-    width?: number | string;
-    height?: number | string;
-    wrapWidth?: number;
-    wrapHeight?: number;
-    zoom?: number;
-    correctionScrollSize?: {
-      width: number;
-      height: number;
-    };
-  }>(),
-  {
-    width: 0,
-    height: 0,
-    wrapWidth: 0,
-    wrapHeight: 0,
-    zoom: 1,
-    correctionScrollSize: () => ({
-      width: 0,
-      height: 0,
-    }),
-  },
-);
-
-const container = ref<HTMLDivElement>();
-const el = ref<HTMLDivElement>();
-const style = computed(
-  () => `
-        width: ${isNumber(`${props.width}`) ? `${props.width}px` : props.width};
-        height: ${isNumber(`${props.height}`) ? `${props.height}px` : props.height};
-        position: absolute;
-        margin-top: 30px;
-      `,
-);
-
-const scrollWidth = ref(0);
-const scrollHeight = ref(0);
-
-let scrollViewer: ScrollViewer;
-
-onMounted(() => {
-  if (!container.value || !el.value) return;
-  scrollViewer = new ScrollViewer({
-    container: container.value,
-    target: el.value,
-    zoom: props.zoom,
-    correctionScrollSize: props.correctionScrollSize,
-  });
-
-  scrollViewer.on('scroll', (data: ScrollViewerEvent) => {
-    hOffset.value = data.scrollLeft;
-    vOffset.value = data.scrollTop;
-    scrollWidth.value = data.scrollWidth;
-    scrollHeight.value = data.scrollHeight;
-  });
-});
-
-onBeforeUnmount(() => {
-  scrollViewer.destroy();
-});
-
-watch(
-  () => props.zoom,
-  () => {
-    scrollViewer.setZoom(props.zoom);
-  },
-);
-
-const vOffset = ref(0);
-const vScrollHandler = (delta: number) => {
-  vOffset.value += delta;
-  scrollViewer.scrollTo({
-    top: vOffset.value,
-  });
-};
-const hOffset = ref(0);
-const hScrollHandler = (delta: number) => {
-  hOffset.value += delta;
-  scrollViewer.scrollTo({
-    left: hOffset.value,
-  });
-};
-
-defineExpose({
-  container,
-});
-</script>

package/src/components/SearchInput.vue

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

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

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

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

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