@tmagic/editor 1.4.6 → 1.4.8

package/src/components/Icon.vue

@@ -1,27 +0,0 @@
-<template>
-  <TMagicIcon v-if="!icon" class="magic-editor-icon"><Edit></Edit></TMagicIcon>
-  <TMagicIcon
-    v-else-if="typeof icon === 'string' && (icon.startsWith('http') || isRelativePath(icon))"
-    class="magic-editor-icon"
-    ><img :src="icon"
-  /></TMagicIcon>
-  <i v-else-if="typeof icon === 'string'" class="magic-editor-icon" :class="icon"></i>
-  <TMagicIcon v-else class="magic-editor-icon"><component :is="toRaw(icon)"></component></TMagicIcon>
-</template>
-
-<script lang="ts" setup>
-import { toRaw } from 'vue';
-import { Edit } from '@element-plus/icons-vue';
-
-import { TMagicIcon } from '@tmagic/design';
-
-defineOptions({
-  name: 'MEditorIcon',
-});
-
-defineProps<{
-  icon?: any;
-}>();
-
-const isRelativePath = (str: string) => /^(\.|(\.\.)?\/)/.test(str);
-</script>

package/src/components/Resizer.vue

@@ -1,23 +0,0 @@
-<template>
-  <span ref="target" class="m-editor-resizer" :class="{ 'm-editor-resizer-draging': isDraging }">
-    <slot></slot>
-  </span>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import type { OnDrag } from 'gesto';
-
-import { useGetSo } from '@editor/hooks/use-getso';
-
-defineOptions({
-  name: 'MEditorResizer',
-});
-
-const emit = defineEmits<{
-  change: [e: OnDrag];
-}>();
-
-const target = ref<HTMLSpanElement>();
-const { isDraging } = useGetSo(target, emit);
-</script>

package/src/components/ScrollBar.vue

@@ -1,151 +0,0 @@
-<template>
-  <div ref="bar" class="m-editor-scroll-bar" :class="isHorizontal ? 'horizontal' : 'vertical'">
-    <div ref="thumb" class="m-editor-scroll-bar-thumb" :style="thumbStyle"></div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
-import Gesto from 'gesto';
-
-defineOptions({
-  name: 'MEditorScrollBar',
-});
-
-const props = defineProps<{
-  size: number;
-  scrollSize: number;
-  isHorizontal?: boolean;
-  pos: number;
-}>();
-
-const emit = defineEmits(['scroll']);
-
-const bar = ref<HTMLDivElement>();
-const thumb = ref<HTMLDivElement>();
-
-const thumbSize = computed(() => props.size * (props.size / props.scrollSize));
-const thumbPos = computed(() => (props.pos / props.scrollSize) * props.size);
-
-const thumbStyle = computed(() => ({
-  [props.isHorizontal ? 'width' : 'height']: `${thumbSize.value}px`,
-  transform: `translate${props.isHorizontal ? 'X' : 'Y'}(${thumbPos.value}px)`,
-}));
-
-let gesto: Gesto;
-
-onMounted(() => {
-  if (!thumb.value) return;
-  const thumbEl = thumb.value;
-  gesto = new Gesto(thumbEl, {
-    container: window,
-  });
-
-  gesto
-    .on('dragStart', (e) => {
-      e.inputEvent.stopPropagation();
-      e.inputEvent.preventDefault();
-    })
-    .on('drag', (e) => {
-      scrollBy(getDelta(e));
-    });
-
-  bar.value?.addEventListener('wheel', wheelHandler, false);
-});
-
-onBeforeUnmount(() => {
-  if (gesto) gesto.off();
-  bar.value?.removeEventListener('wheel', wheelHandler, false);
-});
-
-const wheelHandler = (e: WheelEvent) => {
-  const delta = props.isHorizontal ? e.deltaX : e.deltaY;
-  if (delta) {
-    e.preventDefault();
-  }
-  scrollBy(delta);
-};
-
-const getDelta = (e: any) => {
-  const ratio = (props.isHorizontal ? e.deltaX : e.deltaY) / props.size;
-  return props.scrollSize * ratio;
-};
-
-const scrollBy = (delta: number) => {
-  if (delta < 0) {
-    if (props.pos <= 0) {
-      emit('scroll', 0);
-    } else {
-      emit('scroll', -Math.min(-delta, props.pos));
-    }
-  } else {
-    const leftPos = props.size - (thumbSize.value + thumbPos.value);
-    if (leftPos <= 0) {
-      emit('scroll', 0);
-    } else {
-      emit('scroll', Math.min(delta, leftPos));
-    }
-  }
-};
-</script>
-
-<style lang="scss">
-.m-editor-scroll-bar {
-  position: absolute;
-  background-color: transparent;
-  opacity: 0.3;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
-
-  .m-editor-scroll-bar-thumb {
-    background-color: #aaa;
-    border-radius: 6px;
-    position: absolute;
-  }
-
-  &.horizontal {
-    width: 100%;
-    height: 15px;
-    bottom: 0;
-
-    .m-editor-scroll-bar-thumb {
-      height: 6px;
-      transition: background-color 0.2s linear, height 0.2s ease-in-out;
-      bottom: 2px;
-    }
-  }
-
-  &.vertical {
-    height: 100%;
-    width: 15px;
-    right: 5px;
-
-    .m-editor-scroll-bar-thumb {
-      width: 6px;
-      transition: background-color 0.2s linear, width 0.2s ease-in-out;
-      right: 2px;
-    }
-  }
-
-  &:hover,
-  &:focus {
-    background-color: #eee;
-    opacity: 0.9;
-
-    .m-editor-scroll-bar-thumb {
-      background-color: #999;
-    }
-
-    &.horizontal {
-      .m-editor-scroll-bar-thumb {
-        height: 11px;
-      }
-    }
-
-    &.vertical {
-      .m-editor-scroll-bar-thumb {
-        width: 11px;
-      }
-    }
-  }
-}
-</style>

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>