@tmagic/editor 1.4.8 → 1.4.9

package/src/components/ContentMenu.vue

@@ -0,0 +1,193 @@
+<template>
+  <transition name="fade">
+    <div
+      v-show="visible"
+      class="magic-editor-content-menu"
+      ref="menu"
+      :style="menuStyle"
+      @mouseenter="mouseenterHandler()"
+    >
+      <slot name="title"></slot>
+      <div>
+        <ToolButton
+          v-for="(item, index) in menuData"
+          event-type="mouseup"
+          ref="buttons"
+          :class="{ active: active && item.id === active }"
+          :data="item"
+          :key="index"
+          @mouseup="clickHandler"
+          @mouseenter="showSubMenu(item, index)"
+        ></ToolButton>
+      </div>
+      <teleport to="body">
+        <content-menu
+          v-if="subMenuData.length"
+          class="sub-menu"
+          ref="subMenu"
+          :active="active"
+          :menu-data="subMenuData"
+          :is-sub-menu="true"
+          @hide="hide"
+        ></content-menu>
+      </teleport>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+
+import { MenuButton, MenuComponent } from '@editor/type';
+
+import ToolButton from './ToolButton.vue';
+
+defineOptions({
+  name: 'MEditorContentMenu',
+});
+
+const props = withDefaults(
+  defineProps<{
+    menuData?: (MenuButton | MenuComponent)[];
+    isSubMenu?: boolean;
+    active?: string | number;
+    autoHide?: boolean;
+  }>(),
+  {
+    menuData: () => [],
+    isSubMenu: false,
+    autoHide: true,
+  },
+);
+
+const emit = defineEmits<{
+  hide: [];
+  show: [];
+  mouseenter: [];
+}>();
+
+const menu = ref<HTMLDivElement>();
+const buttons = ref<InstanceType<typeof ToolButton>[]>();
+const subMenu = ref<any>();
+const visible = ref(false);
+const subMenuData = ref<(MenuButton | MenuComponent)[]>([]);
+
+const menuPosition = ref({
+  left: 0,
+  top: 0,
+});
+
+const menuStyle = computed(() => ({
+  top: `${menuPosition.value.top}px`,
+  left: `${menuPosition.value.left}px`,
+}));
+
+const contains = (el: HTMLElement) => menu.value?.contains(el) || subMenu.value?.contains(el);
+
+const hide = () => {
+  if (!visible.value) return;
+
+  visible.value = false;
+  subMenu.value?.hide();
+
+  emit('hide');
+};
+
+const clickHandler = () => {
+  if (!props.autoHide) return;
+
+  hide();
+};
+
+const outsideClickHideHandler = (e: MouseEvent) => {
+  if (!props.autoHide) return;
+
+  const target = e.target as HTMLElement | undefined;
+  if (!visible.value || !target) {
+    return;
+  }
+  if (contains(target)) {
+    return;
+  }
+  hide();
+};
+
+const setPosition = (e: { clientY: number; clientX: number }) => {
+  const menuHeight = menu.value?.clientHeight || 0;
+
+  let top = e.clientY;
+  if (menuHeight + e.clientY > document.body.clientHeight) {
+    top = document.body.clientHeight - menuHeight;
+  }
+
+  menuPosition.value = {
+    top,
+    left: e.clientX,
+  };
+};
+
+const show = (e?: { clientY: number; clientX: number }) => {
+  // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
+  setTimeout(() => {
+    visible.value = true;
+
+    nextTick(() => {
+      e && setPosition(e);
+
+      emit('show');
+    });
+  }, 300);
+};
+
+const showSubMenu = (item: MenuButton | MenuComponent, index: number) => {
+  const menuItem = item as MenuButton;
+  if (typeof item !== 'object') {
+    return;
+  }
+
+  subMenuData.value = menuItem.items || [];
+  setTimeout(() => {
+    if (!visible.value) {
+      return;
+    }
+
+    if (menu.value) {
+      // 将子菜单放置在按钮右侧，与按钮齐平
+      let y = menu.value.offsetTop;
+      if (buttons.value?.[index].$el) {
+        const rect = buttons.value?.[index].$el.getBoundingClientRect();
+        y = rect.top;
+      }
+      subMenu.value?.show({
+        clientX: menu.value.offsetLeft + menu.value.clientWidth,
+        clientY: y,
+      });
+    }
+  }, 0);
+};
+
+const mouseenterHandler = () => {
+  emit('mouseenter');
+};
+
+onMounted(() => {
+  if (props.isSubMenu) return;
+
+  globalThis.addEventListener('mousedown', outsideClickHideHandler, true);
+});
+
+onBeforeUnmount(() => {
+  if (props.isSubMenu) return;
+
+  globalThis.removeEventListener('mousedown', outsideClickHideHandler, true);
+});
+
+defineExpose({
+  menu,
+  menuPosition,
+  hide,
+  show,
+  contains,
+  setPosition,
+});
+</script>

package/src/components/FloatingBox.vue

@@ -0,0 +1,178 @@
+<template>
+  <Teleport to="body" v-if="visible">
+    <div ref="target" class="m-editor-float-box" :style="{ ...style, zIndex: curZIndex }" @mousedown="nextZIndex">
+      <div ref="titleEl" class="m-editor-float-box-title">
+        <slot name="title">
+          <span>{{ title }}</span>
+        </slot>
+        <div>
+          <TMagicButton link size="small" @click="closeHandler"><MIcon :icon="Close"></MIcon></TMagicButton>
+        </div>
+      </div>
+      <div class="m-editor-float-box-body" :style="{ height: `${bodyHeight}px` }">
+        <slot name="body"></slot>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, nextTick, onBeforeUnmount, provide, ref, watch } from 'vue';
+import { Close } from '@element-plus/icons-vue';
+import VanillaMoveable from 'moveable';
+
+import { TMagicButton, useZIndex } from '@tmagic/design';
+
+import MIcon from '@editor/components/Icon.vue';
+import type { Services } from '@editor/type';
+
+interface Position {
+  left: number;
+  top: number;
+}
+
+const width = defineModel<number>('width', { default: 0 });
+const height = defineModel<number>('height', { default: 0 });
+const visible = defineModel<boolean>('visible', { default: false });
+
+const props = withDefaults(
+  defineProps<{
+    position?: Position;
+    title?: string;
+    beforeClose?: (done: (cancel?: boolean) => void) => void;
+  }>(),
+  {
+    title: '',
+    position: () => ({ left: 0, top: 0 }),
+  },
+);
+
+const target = ref<HTMLDivElement>();
+const titleEl = ref<HTMLDivElement>();
+
+const zIndex = useZIndex();
+const curZIndex = ref<number>(0);
+
+const titleHeight = ref(0);
+const bodyHeight = computed(() => {
+  if (height.value) {
+    return height.value - titleHeight.value;
+  }
+
+  if (target.value) {
+    return target.value.clientHeight - titleHeight.value;
+  }
+
+  return 'auto';
+});
+
+const services = inject<Services>('services');
+const frameworkWidth = computed(() => services?.uiService.get('frameworkRect').width || 0);
+const style = computed(() => {
+  let { left } = props.position;
+  if (width.value) {
+    left = left + width.value > frameworkWidth.value ? frameworkWidth.value - width.value : left;
+  }
+
+  return {
+    left: `${left}px`,
+    top: `${props.position.top}px`,
+    width: width.value ? `${width.value}px` : 'auto',
+    height: height.value ? `${height.value}px` : 'auto',
+  };
+});
+
+let moveable: VanillaMoveable | null = null;
+
+const initMoveable = () => {
+  moveable = new VanillaMoveable(globalThis.document.body, {
+    className: 'm-editor-floating-box-moveable',
+    target: target.value,
+    draggable: true,
+    resizable: true,
+    edge: true,
+    keepRatio: false,
+    origin: false,
+    snappable: true,
+    dragTarget: titleEl.value,
+    dragTargetSelf: false,
+    linePadding: 10,
+    controlPadding: 10,
+    bounds: { left: 0, top: 0, right: 0, bottom: 0, position: 'css' },
+  });
+
+  moveable.on('drag', (e) => {
+    e.target.style.transform = e.transform;
+  });
+
+  moveable.on('resize', (e) => {
+    width.value = e.width;
+    height.value = e.height;
+    e.target.style.width = `${e.width}px`;
+    e.target.style.height = `${e.height}px`;
+    e.target.style.transform = e.drag.transform;
+  });
+};
+
+const destroyMoveable = () => {
+  moveable?.destroy();
+  moveable = null;
+};
+
+watch(
+  visible,
+  async (visible) => {
+    if (visible) {
+      await nextTick();
+      curZIndex.value = zIndex.nextZIndex();
+
+      const targetRect = target.value?.getBoundingClientRect();
+      if (targetRect) {
+        width.value = targetRect.width;
+        height.value = targetRect.height;
+        initMoveable();
+      }
+
+      if (titleEl.value) {
+        const titleRect = titleEl.value.getBoundingClientRect();
+        titleHeight.value = titleRect.height;
+      }
+    } else {
+      destroyMoveable();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+onBeforeUnmount(() => {
+  destroyMoveable();
+});
+
+const hide = (cancel?: boolean) => {
+  if (cancel !== false) {
+    visible.value = false;
+  }
+};
+
+const closeHandler = () => {
+  if (typeof props.beforeClose === 'function') {
+    props.beforeClose(hide);
+  } else {
+    hide();
+  }
+};
+
+const nextZIndex = () => {
+  curZIndex.value = zIndex.nextZIndex();
+};
+
+provide('parentFloating', target);
+
+defineExpose({
+  bodyHeight,
+  target,
+  titleEl,
+});
+</script>

package/src/components/Icon.vue

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

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

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

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