@tmagic/editor 1.4.6 → 1.4.8

package/src/layouts/CodeEditor.vue

@@ -1,226 +0,0 @@
-<template>
-  <div :class="`magic-code-editor`">
-    <Teleport to="body" :disabled="!fullScreen">
-      <div
-        :class="`magic-code-editor-wrapper${fullScreen ? ' full-screen' : ''}`"
-        :style="!fullScreen && height ? `height: ${height}` : '100%'"
-      >
-        <TMagicButton class="magic-code-editor-full-screen-icon" circle size="small" @click="fullScreenHandler"
-          ><MIcon :icon="FullScreen"></MIcon
-        ></TMagicButton>
-        <div ref="codeEditor" class="magic-code-editor-content"></div>
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import { FullScreen } from '@element-plus/icons-vue';
-import { throttle } from 'lodash-es';
-import serialize from 'serialize-javascript';
-
-import { TMagicButton } from '@tmagic/design';
-
-import MIcon from '@editor/components/Icon.vue';
-import { getConfig } from '@editor/utils/config';
-import monaco from '@editor/utils/monaco-editor';
-
-defineOptions({
-  name: 'MEditorCodeEditor',
-});
-
-const props = withDefaults(
-  defineProps<{
-    initValues?: any;
-    modifiedValues?: any;
-    type?: 'diff';
-    language?: string;
-    options?: {
-      [key: string]: any;
-    };
-    height?: string;
-    autoSave?: boolean;
-    parse?: boolean;
-  }>(),
-  {
-    initValues: '',
-    autoSave: true,
-    language: 'javascript',
-    options: () => ({
-      tabSize: 2,
-    }),
-    parse: false,
-  },
-);
-
-const emit = defineEmits(['initd', 'save']);
-
-const toString = (v: string | any, language: string): string => {
-  let value = '';
-  if (typeof v !== 'string') {
-    if (language === 'json') {
-      value = JSON.stringify(v, null, 2);
-    } else {
-      value = serialize(v, {
-        space: 2,
-        unsafe: true,
-      }).replace(/"(\w+)":\s/g, '$1: ');
-    }
-  } else {
-    value = v;
-  }
-  if (language === 'javascript' && value.startsWith('{') && value.endsWith('}')) {
-    value = `(${value})`;
-  }
-  return value;
-};
-
-const parse = (v: string | any, language: string): any => {
-  if (typeof v !== 'string') {
-    return v;
-  }
-
-  if (language === 'json') {
-    return JSON.parse(v);
-  }
-
-  return getConfig('parseDSL')(v);
-};
-
-let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null;
-let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
-
-const values = ref('');
-const loading = ref(false);
-const codeEditor = ref<HTMLDivElement>();
-
-const resizeObserver = new globalThis.ResizeObserver(
-  throttle((): void => {
-    vsEditor?.layout();
-    vsDiffEditor?.layout();
-  }, 300),
-);
-
-const setEditorValue = (v: string | any, m: string | any) => {
-  values.value = toString(v, props.language.toLocaleLowerCase());
-
-  if (props.type === 'diff') {
-    const originalModel = monaco.editor.createModel(values.value, 'text/javascript');
-    const modifiedModel = monaco.editor.createModel(toString(m, props.language), 'text/javascript');
-
-    return vsDiffEditor?.setModel({
-      original: originalModel,
-      modified: modifiedModel,
-    });
-  }
-
-  return vsEditor?.setValue(values.value);
-};
-
-const getEditorValue = () =>
-  (props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || '';
-
-const init = async () => {
-  if (!codeEditor.value) return;
-
-  const options = {
-    value: values.value,
-    language: props.language,
-    theme: 'vs-dark',
-    ...props.options,
-  };
-
-  if (props.type === 'diff') {
-    vsDiffEditor = monaco.editor.createDiffEditor(codeEditor.value, options);
-  } else {
-    vsEditor = monaco.editor.create(codeEditor.value, options);
-  }
-
-  setEditorValue(props.initValues, props.modifiedValues);
-
-  loading.value = false;
-
-  emit('initd', vsEditor);
-
-  codeEditor.value.addEventListener('keydown', (e) => {
-    if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
-      e.preventDefault();
-      e.stopPropagation();
-      const newValue = getEditorValue();
-      values.value = newValue;
-      emit('save', props.parse ? parse(newValue, props.language) : newValue);
-    }
-  });
-
-  if (props.type !== 'diff' && props.autoSave) {
-    vsEditor?.onDidBlurEditorWidget(() => {
-      const newValue = getEditorValue();
-      if (values.value !== newValue) {
-        values.value = newValue;
-        emit('save', props.parse ? parse(newValue, props.language) : newValue);
-      }
-    });
-  }
-
-  resizeObserver.observe(codeEditor.value);
-};
-
-watch(
-  () => props.initValues,
-  (v, preV) => {
-    if (v !== preV) {
-      setEditorValue(props.initValues, props.modifiedValues);
-    }
-  },
-  {
-    deep: true,
-    immediate: true,
-  },
-);
-
-onMounted(async () => {
-  loading.value = true;
-
-  init();
-});
-
-onBeforeUnmount(() => {
-  resizeObserver.disconnect();
-});
-
-const fullScreen = ref(false);
-const fullScreenHandler = () => {
-  fullScreen.value = !fullScreen.value;
-  setTimeout(() => {
-    vsEditor?.focus();
-    vsEditor?.layout();
-    vsDiffEditor?.focus();
-    vsDiffEditor?.layout();
-  });
-};
-
-defineExpose({
-  values,
-
-  getEditor() {
-    return vsEditor || vsDiffEditor;
-  },
-
-  getVsEditor() {
-    return vsEditor;
-  },
-
-  getVsDiffEditor() {
-    return vsDiffEditor;
-  },
-
-  setEditorValue,
-  getEditorValue,
-
-  focus() {
-    vsEditor?.focus();
-    vsDiffEditor?.focus();
-  },
-});
-</script>

package/src/layouts/Framework.vue

@@ -1,163 +0,0 @@
-<template>
-  <div class="m-editor" ref="content" style="min-width: 180px">
-    <slot name="header"></slot>
-
-    <slot name="nav"></slot>
-
-    <slot name="content-before"></slot>
-
-    <slot name="src-code" v-if="showSrc">
-      <CodeEditor class="m-editor-content" :init-values="root" :options="codeOptions" @save="saveCode"></CodeEditor>
-    </slot>
-
-    <SplitView
-      v-loading="stageLoading"
-      element-loading-text="Runtime 加载中..."
-      v-else
-      ref="splitView"
-      class="m-editor-content"
-      left-class="m-editor-framework-left"
-      center-class="m-editor-framework-center"
-      right-class="m-editor-framework-right"
-      v-model:left="columnWidth.left"
-      v-model:right="columnWidth.right"
-      :min-left="65"
-      :min-right="20"
-      :min-center="100"
-      :width="frameworkRect?.width || 0"
-      @change="columnWidthChange"
-    >
-      <template #left>
-        <slot name="sidebar"></slot>
-      </template>
-
-      <template #center>
-        <slot v-if="page" name="workspace"></slot>
-        <slot v-else name="empty">
-          <AddPageBox :disabled-page-fragment="disabledPageFragment"></AddPageBox>
-        </slot>
-
-        <slot name="page-bar">
-          <PageBar :disabled-page-fragment="disabledPageFragment">
-            <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
-            <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
-          </PageBar>
-        </slot>
-      </template>
-
-      <template v-if="page" #right>
-        <TMagicScrollbar>
-          <slot name="props-panel"></slot>
-        </TMagicScrollbar>
-      </template>
-    </SplitView>
-
-    <slot name="content-after"></slot>
-    <slot name="footer"></slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-
-import { TMagicScrollbar } from '@tmagic/design';
-
-import SplitView from '@editor/components/SplitView.vue';
-import type { FrameworkSlots, GetColumnWidth, Services } from '@editor/type';
-import { getConfig } from '@editor/utils/config';
-
-import PageBar from './page-bar/PageBar.vue';
-import AddPageBox from './AddPageBox.vue';
-import CodeEditor from './CodeEditor.vue';
-
-defineSlots<FrameworkSlots>();
-
-defineOptions({
-  name: 'MEditorFramework',
-});
-
-defineProps<{
-  disabledPageFragment: boolean;
-}>();
-
-const DEFAULT_LEFT_COLUMN_WIDTH = 310;
-const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
-
-const codeOptions = inject('codeOptions', {});
-const { editorService, uiService } = inject<Services>('services') || {};
-
-const content = ref<HTMLDivElement>();
-const splitView = ref<InstanceType<typeof SplitView>>();
-
-const root = computed(() => editorService?.get('root'));
-const page = computed(() => editorService?.get('page'));
-
-const pageLength = computed(() => editorService?.get('pageLength') || 0);
-const stageLoading = computed(() => editorService?.get('stageLoading') || false);
-const showSrc = computed(() => uiService?.get('showSrc'));
-
-const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
-const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
-
-const getLeftColumnWidthCacheData = () =>
-  Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
-
-const getRightColumnWidthCacheData = () =>
-  Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
-
-const columnWidth = ref<Partial<GetColumnWidth>>({
-  left: getLeftColumnWidthCacheData(),
-  center: 0,
-  right: getRightColumnWidthCacheData(),
-});
-
-watch(pageLength, () => {
-  splitView.value?.updateWidth();
-});
-
-watch(
-  () => uiService?.get('hideSlideBar'),
-  (hideSlideBar) => {
-    columnWidth.value.left = hideSlideBar ? 0 : getLeftColumnWidthCacheData();
-  },
-);
-
-const columnWidthChange = (columnW: GetColumnWidth) => {
-  columnWidth.value = columnW;
-
-  globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.left}`);
-  globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.right}`);
-  uiService?.set('columnWidth', columnW);
-};
-
-const frameworkRect = computed(() => uiService?.get('frameworkRect'));
-
-const resizerObserver = new ResizeObserver((entries) => {
-  const { contentRect } = entries[0];
-  uiService?.set('frameworkRect', {
-    width: contentRect.width,
-    height: contentRect.height,
-    left: contentRect.left,
-    top: contentRect.top,
-  });
-});
-
-onMounted(() => {
-  if (content.value) {
-    resizerObserver.observe(content.value);
-  }
-});
-
-onBeforeUnmount(() => {
-  resizerObserver.disconnect();
-});
-
-const saveCode = (value: string) => {
-  try {
-    const parseDSL = getConfig('parseDSL');
-    editorService?.set('root', parseDSL(value));
-  } catch (e: any) {
-    console.error(e);
-  }
-};
-</script>

package/src/layouts/NavMenu.vue

@@ -1,200 +0,0 @@
-<template>
-  <div class="m-editor-nav-menu" :style="{ height: `${height}px` }" ref="navMenu">
-    <div v-for="key in keys" :class="`menu-${key}`" :key="key" :style="`width: ${columnWidth?.[key]}px`">
-      <ToolButton :data="item" v-for="(item, index) in buttons[key]" :key="index"></ToolButton>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, markRaw, onBeforeUnmount, onMounted, ref } from 'vue';
-import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
-
-import { NodeType } from '@tmagic/schema';
-
-import ToolButton from '@editor/components/ToolButton.vue';
-import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';
-
-defineOptions({
-  name: 'MEditorNavMenu',
-});
-
-const props = withDefaults(
-  defineProps<{
-    data?: MenuBarData;
-    height?: number;
-  }>(),
-  {
-    data: () => ({}),
-    height: 35,
-  },
-);
-
-const services = inject<Services>('services');
-const uiService = services?.uiService;
-
-const columnWidth = computed(() => services?.uiService.get('columnWidth'));
-const keys = Object.values(ColumnLayout);
-
-const showGuides = computed((): boolean => uiService?.get('showGuides') ?? true);
-const showRule = computed((): boolean => uiService?.get('showRule') ?? true);
-const zoom = computed((): number => uiService?.get('zoom') ?? 1);
-
-const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-const ctrl = isMac ? 'Command' : 'Ctrl';
-
-const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => {
-  if (typeof item !== 'string') {
-    return [item];
-  }
-  const config: (MenuButton | MenuComponent)[] = [];
-  switch (item) {
-    case '/':
-      config.push({
-        type: 'divider',
-        className: 'divider',
-      });
-      break;
-    case 'zoom':
-      config.push(
-        ...getConfig('zoom-out'),
-        ...getConfig(`${parseInt(`${zoom.value * 100}`, 10)}%`),
-        ...getConfig('zoom-in'),
-        ...getConfig('scale-to-original'),
-        ...getConfig('scale-to-fit'),
-      );
-      break;
-    case 'delete':
-      config.push({
-        type: 'button',
-        className: 'delete',
-        icon: markRaw(Delete),
-        tooltip: `刪除(Delete)`,
-        disabled: () => services?.editorService.get('node')?.type === NodeType.PAGE,
-        handler: () => {
-          const node = services?.editorService.get('node');
-          node && services?.editorService.remove(node);
-        },
-      });
-      break;
-    case 'undo':
-      config.push({
-        type: 'button',
-        className: 'undo',
-        icon: markRaw(Back),
-        tooltip: `后退(${ctrl}+z)`,
-        disabled: () => !services?.historyService.state.canUndo,
-        handler: () => services?.editorService.undo(),
-      });
-      break;
-    case 'redo':
-      config.push({
-        type: 'button',
-        className: 'redo',
-        icon: markRaw(Right),
-        tooltip: `前进(${ctrl}+Shift+z)`,
-        disabled: () => !services?.historyService.state.canRedo,
-        handler: () => services?.editorService.redo(),
-      });
-      break;
-    case 'zoom-in':
-      config.push({
-        type: 'button',
-        className: 'zoom-in',
-        icon: markRaw(ZoomIn),
-        tooltip: `放大(${ctrl}+=)`,
-        handler: () => uiService?.zoom(0.1),
-      });
-      break;
-    case 'zoom-out':
-      config.push({
-        type: 'button',
-        className: 'zoom-out',
-        icon: markRaw(ZoomOut),
-        tooltip: `縮小(${ctrl}+-)`,
-        handler: () => uiService?.zoom(-0.1),
-      });
-      break;
-    case 'scale-to-original':
-      config.push({
-        type: 'button',
-        className: 'scale-to-original',
-        icon: markRaw(ScaleToOriginal),
-        tooltip: `缩放到实际大小(${ctrl}+1)`,
-        handler: () => uiService?.set('zoom', 1),
-      });
-      break;
-    case 'scale-to-fit':
-      config.push({
-        type: 'button',
-        className: 'scale-to-fit',
-        icon: markRaw(FullScreen),
-        tooltip: `缩放以适应(${ctrl}+0)`,
-        handler: async () => uiService?.set('zoom', await uiService.calcZoom()),
-      });
-      break;
-    case 'rule':
-      config.push({
-        type: 'button',
-        className: 'rule',
-        icon: markRaw(Memo),
-        tooltip: showRule.value ? '隐藏标尺' : '显示标尺',
-        handler: () => uiService?.set('showRule', !showRule.value),
-      });
-      break;
-    case 'guides':
-      config.push({
-        type: 'button',
-        className: 'guides',
-        icon: markRaw(Grid),
-        tooltip: showGuides.value ? '隐藏参考线' : '显示参考线',
-        handler: () => uiService?.set('showGuides', !showGuides.value),
-      });
-      break;
-    default:
-      config.push({
-        type: 'text',
-        text: item,
-      });
-  }
-  return config;
-};
-
-const buttons = computed(() => {
-  const data: {
-    [ColumnLayout.LEFT]: (MenuButton | MenuComponent)[];
-    [ColumnLayout.CENTER]: (MenuButton | MenuComponent)[];
-    [ColumnLayout.RIGHT]: (MenuButton | MenuComponent)[];
-  } = {
-    [ColumnLayout.LEFT]: [],
-    [ColumnLayout.CENTER]: [],
-    [ColumnLayout.RIGHT]: [],
-  };
-  keys.forEach((key) => {
-    const items = props.data[key] || [];
-    items.forEach((item) => {
-      data[key].push(...getConfig(item));
-    });
-  });
-  return data;
-});
-
-const resizeObserver = new ResizeObserver(() => {
-  const rect = navMenu.value?.getBoundingClientRect();
-  if (rect) {
-    uiService?.set('navMenuRect', {
-      left: rect.left,
-      top: rect.top,
-      width: rect.width,
-      height: rect.height,
-    });
-  }
-});
-const navMenu = ref<HTMLDivElement>();
-onMounted(() => {
-  navMenu.value && resizeObserver.observe(navMenu.value);
-});
-onBeforeUnmount(() => {
-  resizeObserver.disconnect();
-});
-</script>