@tmagic/editor 1.4.8 → 1.4.9

package/src/layouts/AddPageBox.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="m-editor-empty-panel">
+    <div class="m-editor-empty-content">
+      <div class="m-editor-empty-button" @click="clickHandler(NodeType.PAGE)">
+        <div>
+          <MIcon :icon="Plus"></MIcon>
+        </div>
+        <p>新增页面</p>
+      </div>
+
+      <div v-if="!disabledPageFragment" class="m-editor-empty-button" @click="clickHandler(NodeType.PAGE_FRAGMENT)">
+        <div>
+          <MIcon :icon="Plus"></MIcon>
+        </div>
+        <p>新增页面片</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject, toRaw } from 'vue';
+import { Plus } from '@element-plus/icons-vue';
+
+import { NodeType } from '@tmagic/schema';
+
+import MIcon from '@editor/components/Icon.vue';
+import type { Services } from '@editor/type';
+import { generatePageNameByApp } from '@editor/utils';
+
+defineOptions({
+  name: 'MEditorAddPageBox',
+});
+
+defineProps<{
+  disabledPageFragment: boolean;
+}>();
+
+const services = inject<Services>('services');
+
+const clickHandler = (type: NodeType.PAGE | NodeType.PAGE_FRAGMENT) => {
+  const { editorService } = services || {};
+
+  if (!editorService) return;
+
+  const root = toRaw(editorService.get('root'));
+  if (!root) throw new Error('root 不能为空');
+
+  editorService.add({
+    type,
+    name: generatePageNameByApp(root, type),
+    items: [],
+  });
+};
+</script>

package/src/layouts/CodeEditor.vue

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

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

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