@tmagic/editor 1.4.6 → 1.4.8

package/src/components/CodeBlockEditor.vue

@@ -1,268 +0,0 @@
-<template>
-  <!-- 代码块编辑区 -->
-  <FloatingBox
-    v-model:visible="boxVisible"
-    v-model:width="width"
-    v-model:height="codeBlockEditorHeight"
-    :title="content.name ? `${disabled ? '查看' : '编辑'}${content.name}` : '新增代码'"
-    :position="boxPosition"
-    :before-close="beforeClose"
-  >
-    <template #body>
-      <MFormBox
-        class="m-editor-code-block-editor"
-        ref="formBox"
-        label-width="80px"
-        :close-on-press-escape="false"
-        :title="content.name"
-        :config="functionConfig"
-        :values="content"
-        :disabled="disabled"
-        style="height: 100%"
-        @change="changeHandler"
-        @submit="submitForm"
-        @error="errorHandler"
-        @closed="closedHandler"
-      >
-        <template #left>
-          <TMagicButton v-if="!disabled" type="primary" link @click="difVisible = true">查看修改</TMagicButton>
-        </template>
-      </MFormBox>
-    </template>
-  </FloatingBox>
-
-  <Teleport to="body">
-    <TMagicDialog title="查看修改" v-model="difVisible" fullscreen>
-      <div style="display: flex; margin-bottom: 10px">
-        <div style="flex: 1"><TMagicTag size="small" type="info">修改前</TMagicTag></div>
-        <div style="flex: 1"><TMagicTag size="small" type="success">修改后</TMagicTag></div>
-      </div>
-
-      <CodeEditor
-        v-if="difVisible"
-        ref="magicVsEditor"
-        type="diff"
-        language="json"
-        :initValues="content.content"
-        :modifiedValues="formBox?.form?.values.content"
-        :style="`height: ${windowRect.height - 150}px`"
-      ></CodeEditor>
-
-      <template #footer>
-        <span class="dialog-footer">
-          <TMagicButton size="small" @click="difVisible = false">取消</TMagicButton>
-          <TMagicButton size="small" type="primary" @click="diffChange">确定</TMagicButton>
-        </span>
-      </template>
-    </TMagicDialog>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, Ref, ref } from 'vue';
-
-import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
-import { ColumnConfig, FormConfig, FormState, MFormBox } from '@tmagic/form';
-import type { CodeBlockContent } from '@tmagic/schema';
-
-import FloatingBox from '@editor/components/FloatingBox.vue';
-import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
-import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
-import { useWindowRect } from '@editor/hooks/use-window-rect';
-import CodeEditor from '@editor/layouts/CodeEditor.vue';
-import type { Services } from '@editor/type';
-import { getConfig } from '@editor/utils/config';
-
-defineOptions({
-  name: 'MEditorCodeBlockEditor',
-});
-
-const width = defineModel<number>('width', { default: 670 });
-const boxVisible = defineModel<boolean>('visible', { default: false });
-
-const props = defineProps<{
-  content: CodeBlockContent;
-  disabled?: boolean;
-  isDataSource?: boolean;
-  dataSourceType?: string;
-}>();
-
-const emit = defineEmits<{
-  submit: [values: CodeBlockContent];
-}>();
-
-const services = inject<Services>('services');
-
-const { height: codeBlockEditorHeight } = useEditorContentHeight();
-
-const difVisible = ref(false);
-const { rect: windowRect } = useWindowRect();
-
-const magicVsEditor = ref<InstanceType<typeof CodeEditor>>();
-
-const diffChange = () => {
-  if (!magicVsEditor.value || !formBox.value?.form) {
-    return;
-  }
-
-  formBox.value.form.values.content = magicVsEditor.value.getEditorValue();
-
-  difVisible.value = false;
-};
-
-const defaultParamColConfig: ColumnConfig = {
-  type: 'row',
-  label: '参数类型',
-  items: [
-    {
-      text: '参数类型',
-      labelWidth: '70px',
-      type: 'select',
-      name: 'type',
-      options: [
-        {
-          text: '数字',
-          label: '数字',
-          value: 'number',
-        },
-        {
-          text: '字符串',
-          label: '字符串',
-          value: 'text',
-        },
-        {
-          text: '组件',
-          label: '组件',
-          value: 'ui-select',
-        },
-      ],
-    },
-  ],
-};
-
-const functionConfig = computed<FormConfig>(() => [
-  {
-    text: '名称',
-    name: 'name',
-    rules: [{ required: true, message: '请输入名称', trigger: 'blur' }],
-  },
-  {
-    text: '描述',
-    name: 'desc',
-  },
-  {
-    text: '执行时机',
-    name: 'timing',
-    type: 'select',
-    options: () => {
-      const options = [
-        { text: '初始化前', value: 'beforeInit' },
-        { text: '初始化后', value: 'afterInit' },
-      ];
-      if (props.dataSourceType !== 'base') {
-        options.push({ text: '请求前', value: 'beforeRequest' });
-        options.push({ text: '请求后', value: 'afterRequest' });
-      }
-      return options;
-    },
-    display: () => props.isDataSource,
-  },
-  {
-    type: 'table',
-    border: true,
-    text: '参数',
-    enableFullscreen: false,
-    enableToggleMode: false,
-    name: 'params',
-    dropSort: false,
-    items: [
-      {
-        type: 'text',
-        label: '参数名',
-        name: 'name',
-      },
-      {
-        type: 'text',
-        label: '描述',
-        name: 'extra',
-      },
-      services?.codeBlockService.getParamsColConfig() || defaultParamColConfig,
-    ],
-  },
-  {
-    name: 'content',
-    type: 'vs-code',
-    options: inject('codeOptions', {}),
-    height: '500px',
-    onChange: (formState: FormState | undefined, code: string) => {
-      try {
-        // 检测js代码是否存在语法错误
-        getConfig('parseDSL')(code);
-
-        return code;
-      } catch (error: any) {
-        tMagicMessage.error(error.message);
-
-        throw error;
-      }
-    },
-  },
-]);
-
-const submitForm = (values: CodeBlockContent) => {
-  changedValue.value = undefined;
-  emit('submit', values);
-};
-
-const errorHandler = (error: any) => {
-  tMagicMessage.error(error.message);
-};
-
-const formBox = ref<InstanceType<typeof MFormBox>>();
-
-const changedValue = ref<CodeBlockContent>();
-const changeHandler = (values: CodeBlockContent) => {
-  changedValue.value = values;
-};
-
-const beforeClose = (done: (cancel?: boolean) => void) => {
-  if (!changedValue.value) {
-    done();
-    return;
-  }
-  tMagicMessageBox
-    .confirm('当前代码块已修改，是否保存？', '提示', {
-      confirmButtonText: '保存并关闭',
-      cancelButtonText: '不保存并关闭',
-      type: 'warning',
-      distinguishCancelAndClose: true,
-    })
-    .then(() => {
-      changedValue.value && submitForm(changedValue.value);
-      done();
-    })
-    .catch((action: string) => {
-      if (action === 'cancel') {
-      }
-      done(action === 'cancel');
-    });
-};
-
-const closedHandler = () => {
-  changedValue.value = undefined;
-};
-
-const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
-const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
-
-defineExpose({
-  async show() {
-    calcBoxPosition();
-    boxVisible.value = true;
-  },
-
-  async hide() {
-    boxVisible.value = false;
-  },
-});
-</script>

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>