@tmagic/editor 1.4.7 → 1.4.8

package/src/components/CodeParams.vue

@@ -1,60 +0,0 @@
-<template>
-  <MForm
-    ref="form"
-    :config="codeParamsConfig"
-    :init-values="model"
-    :disabled="disabled"
-    :size="size"
-    :watch-props="false"
-    @change="onParamsChangeHandler"
-  ></MForm>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-
-import { FormConfig, MForm } from '@tmagic/form';
-
-import type { CodeParamStatement } from '@editor/type';
-import { error } from '@editor/utils';
-
-defineOptions({
-  name: 'MEditorCodeParams',
-});
-
-const props = defineProps<{
-  model: any;
-  size?: 'small' | 'default' | 'large';
-  disabled?: boolean;
-  name: string;
-  paramsConfig: CodeParamStatement[];
-}>();
-
-const emit = defineEmits(['change']);
-
-const form = ref<InstanceType<typeof MForm>>();
-
-const getFormConfig = (items: FormConfig = []) => [
-  {
-    type: 'fieldset',
-    items,
-    legend: '参数',
-    labelWidth: '70px',
-    name: props.name,
-  },
-];
-
-const codeParamsConfig = computed(() => getFormConfig(props.paramsConfig));
-
-/**
- * 参数值修改更新
- */
-const onParamsChangeHandler = async () => {
-  try {
-    const value = await form.value?.submitForm(true);
-    emit('change', value);
-  } catch (e) {
-    error(e);
-  }
-};
-</script>

package/src/components/ContentMenu.vue

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

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

@@ -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>