@tmagic/editor 1.3.0-alpha.5 → 1.3.0-alpha.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.5",
+  "version": "1.3.0-alpha.7",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,13 +46,13 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-alpha.5",
-    "@tmagic/design": "1.3.0-alpha.5",
-    "@tmagic/form": "1.3.0-alpha.5",
-    "@tmagic/schema": "1.3.0-alpha.5",
-    "@tmagic/stage": "1.3.0-alpha.5",
-    "@tmagic/table": "1.3.0-alpha.5",
-    "@tmagic/utils": "1.3.0-alpha.5",
+    "@tmagic/core": "1.3.0-alpha.7",
+    "@tmagic/design": "1.3.0-alpha.7",
+    "@tmagic/form": "1.3.0-alpha.7",
+    "@tmagic/schema": "1.3.0-alpha.7",
+    "@tmagic/stage": "1.3.0-alpha.7",
+    "@tmagic/table": "1.3.0-alpha.7",
+    "@tmagic/utils": "1.3.0-alpha.7",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -64,8 +64,8 @@
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-alpha.5",
-    "@tmagic/form": "1.3.0-alpha.5",
+    "@tmagic/design": "1.3.0-alpha.7",
+    "@tmagic/form": "1.3.0-alpha.7",
     "monaco-editor": "^0.34.0",
     "vue": "^3.3.4"
   },

package/src/Editor.vue

@@ -96,9 +96,11 @@ import depService from './services/dep';
 import editorService from './services/editor';
 import eventsService from './services/events';
 import historyService from './services/history';
+import keybindingService from './services/keybinding';
 import propsService from './services/props';
 import storageService from './services/storage';
 import uiService from './services/ui';
+import keybindingConfig from './utils/keybinding-config';
 import editorProps from './editorProps';
 import { initServiceEvents, initServiceState } from './initService';
 import type { Services } from './type';
@@ -130,10 +132,13 @@ export default defineComponent({
       codeBlockService,
       depService,
       dataSourceService,
+      keybindingService,
     };
 
     initServiceEvents(props, emit, services);
     initServiceState(props, services);
+    keybindingService.registe(keybindingConfig);
+    keybindingService.registeEl('global');
 
     provide('services', services);
 

package/src/components/ContentMenu.vue

@@ -12,6 +12,7 @@
     </div>
     <teleport to="body">
       <content-menu
+        v-if="subMenuData.length"
         class="sub-menu"
         ref="subMenu"
         :menu-data="subMenuData"
@@ -55,6 +56,8 @@ const menuStyle = ref({
   top: '0',
 });
 
+const contains = (el: HTMLElement) => menu.value?.contains(el) || subMenu.value?.contains(el);
+
 const hide = () => {
   if (!visible.value) return;
 
@@ -69,7 +72,7 @@ const hideHandler = (e: MouseEvent) => {
   if (!visible.value || !target) {
     return;
   }
-  if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+  if (contains(target)) {
     return;
   }
   hide();
@@ -104,13 +107,15 @@ const showSubMenu = (item: MenuButton | MenuComponent) => {
     return;
   }
 
-  subMenuData.value = menuItem.items;
-  if (menu.value) {
-    subMenu.value.show({
-      clientX: menu.value.offsetLeft + menu.value.clientWidth,
-      clientY: menu.value.offsetTop,
-    });
-  }
+  subMenuData.value = menuItem.items || [];
+  setTimeout(() => {
+    if (menu.value) {
+      subMenu.value?.show({
+        clientX: menu.value.offsetLeft + menu.value.clientWidth,
+        clientY: menu.value.offsetTop,
+      });
+    }
+  }, 0);
 };
 
 onMounted(() => {
@@ -126,7 +131,9 @@ onUnmounted(() => {
 });
 
 defineExpose({
+  menu,
   hide,
   show,
+  contains,
 });
 </script>

package/src/components/FunctionEditor.vue

@@ -33,7 +33,7 @@
   </TMagicCard>
 </template>
 <script lang="ts" setup>
-import { inject, ref, watchEffect } from 'vue';
+import { inject, provide, ref, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import { TMagicCard, TMagicInput, tMagicMessage } from '@tmagic/design';
@@ -41,6 +41,7 @@ import { ColumnConfig, TableConfig } from '@tmagic/form';
 import { CodeParam, Id } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
+import { getConfig } from '@editor/utils/config';
 
 import CodeDraftEditor from './CodeDraftEditor.vue';
 
@@ -48,6 +49,8 @@ defineOptions({
   name: 'MEditorFunctionEditor',
 });
 
+provide('mForm', {});
+
 const defaultParamColConfig: ColumnConfig = {
   type: 'row',
   label: '参数类型',
@@ -147,9 +150,8 @@ initTableModel();
 // 保存前钩子
 const beforeSave = (codeValue: string): boolean => {
   try {
-    // eval检测js代码是否存在语法错误
-    // eslint-disable-next-line no-eval
-    eval(codeValue);
+    // 检测js代码是否存在语法错误
+    getConfig('parseDSL')(codeValue);
     return true;
   } catch (e: any) {
     tMagicMessage.error(e.stack);

package/src/{layouts → components}/Resizer.vue

@@ -1,5 +1,5 @@
 <template>
-  <span ref="target" class="m-editor-resizer">
+  <span ref="target" class="m-editor-resizer" :class="{ 'm-editor-resizer-draging': isDraging }">
     <slot></slot>
   </span>
 </template>
@@ -15,6 +15,7 @@ defineOptions({
 const emit = defineEmits(['change']);
 
 const target = ref<HTMLSpanElement>();
+const isDraging = ref(false);
 
 let getso: Gesto;
 
@@ -23,14 +24,22 @@ onMounted(() => {
   getso = new Gesto(target.value, {
     container: window,
     pinchOutside: true,
-  }).on('drag', (e) => {
-    if (!target.value) return;
-
-    emit('change', e.deltaX);
-  });
+  })
+    .on('drag', (e) => {
+      if (!target.value) return;
+
+      emit('change', e.deltaX);
+    })
+    .on('dragStart', () => {
+      isDraging.value = true;
+    })
+    .on('dragEnd', () => {
+      isDraging.value = false;
+    });
 });
 
 onUnmounted(() => {
   getso?.unset();
+  isDraging.value = false;
 });
 </script>

package/src/components/{Layout.vue → SplitView.vue}

@@ -23,7 +23,7 @@
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 
-import Resizer from '@editor/layouts/Resizer.vue';
+import Resizer from './Resizer.vue';
 
 defineOptions({
   name: 'MEditorLayout',

package/src/fields/CodeLink.vue

@@ -6,6 +6,8 @@
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
+import { getConfig } from '@editor/utils/config';
+
 defineOptions({
   name: 'MEditorCodeLink',
 });
@@ -69,8 +71,8 @@ const changeHandler = (v: Record<string, any>) => {
   if (!props.name || !props.model) return;
 
   try {
-    // eslint-disable-next-line no-eval
-    props.model[props.name] = eval(`(${v[props.name]})`);
+    const parseDSL = getConfig('parseDSL');
+    props.model[props.name] = parseDSL(`(${v[props.name]})`);
     emit('change', props.model[props.name]);
   } catch (e) {
     console.error(e);

package/src/index.ts

@@ -60,14 +60,16 @@ export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
 export { default as ContentMenu } from './components/ContentMenu.vue';
 export { default as Icon } from './components/Icon.vue';
-export { default as LayoutContainer } from './components/Layout.vue';
+export { default as LayoutContainer } from './components/SplitView.vue';
+export { default as SplitView } from './components/SplitView.vue';
 
 const defaultInstallOpt: InstallOptions = {
-  // @todo, 自定义图片上传方法等编辑器依赖的外部选项
+  // eslint-disable-next-line no-eval
+  parseDSL: (dsl: string) => eval(dsl),
 };
 
 export default {
-  install: (app: App, opt?: InstallOptions): void => {
+  install: (app: App, opt?: Partial<InstallOptions>): void => {
     const option = Object.assign(defaultInstallOpt, opt || {});
 
     // eslint-disable-next-line no-param-reassign

package/src/initService.ts

@@ -25,6 +25,7 @@ export const initServiceState = (
     eventsService,
     uiService,
     codeBlockService,
+    keybindingService,
   }: Services,
 ) => {
   // 初始值变化，重新设置节点信息
@@ -104,6 +105,7 @@ export const initServiceState = (
     uiService.resetState();
     componentListService.resetState();
     codeBlockService.resetState();
+    keybindingService.reset();
   });
 };
 

package/src/layouts/Framework.vue

@@ -10,7 +10,7 @@
       <CodeEditor class="m-editor-content" :init-values="root" :options="codeOptions" @save="saveCode"></CodeEditor>
     </slot>
 
-    <Layout
+    <SplitView
       v-else
       class="m-editor-content"
       left-class="m-editor-framework-left"
@@ -38,7 +38,7 @@
           <slot name="props-panel"></slot>
         </TMagicScrollbar>
       </template>
-    </Layout>
+    </SplitView>
 
     <slot name="content-after"></slot>
     <slot name="footer"></slot>
@@ -50,8 +50,9 @@ import { computed, inject, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
 
-import Layout from '@editor/components/Layout.vue';
+import SplitView from '@editor/components/SplitView.vue';
 import type { GetColumnWidth, Services } from '@editor/type';
+import { getConfig } from '@editor/utils/config';
 
 import AddPageBox from './AddPageBox.vue';
 import CodeEditor from './CodeEditor.vue';
@@ -131,8 +132,8 @@ const columnWidthChange = (columnW: GetColumnWidth) => {
 
 const saveCode = (value: string) => {
   try {
-    // eslint-disable-next-line no-eval
-    editorService?.set('root', eval(value));
+    const parseDSL = getConfig('parseDSL');
+    editorService?.set('root', parseDSL(value));
   } catch (e: any) {
     console.error(e);
   }

package/src/layouts/sidebar/LayerPanel.vue

@@ -10,6 +10,7 @@
       ref="tree"
       node-key="id"
       empty-text="页面空荡荡的"
+      tabindex="-1"
       draggable
       :default-expanded-keys="expandedKeys"
       :default-checked-keys="checkedKeys"
@@ -49,8 +50,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue';
-import KeyController from 'keycon';
+import { computed, inject, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
 import { difference, throttle, union } from 'lodash-es';
 
 import { TMagicScrollbar, TMagicTree } from '@tmagic/design';
@@ -75,6 +75,7 @@ defineProps<{
 const throttleTime = 150;
 const services = inject<Services>('services');
 const editorService = services?.editorService;
+const keybindingService = services?.keybindingService;
 
 const tree = ref<InstanceType<typeof TMagicTree>>();
 const menu = ref<InstanceType<typeof LayerMenu>>();
@@ -246,34 +247,69 @@ const windowBlurHandler = () => {
   isCtrlKeyDown.value = false;
 };
 
-let keycon: KeyController;
+keybindingService?.registeCommand('layer-panel-not-ctrl-keydown', (e) => {
+  if (e.key !== keybindingService.ctrlKey) {
+    isCtrlKeyDown.value = false;
+  }
+});
+
+keybindingService?.registeCommand('layer-panel-ctrl-keydown', () => {
+  isCtrlKeyDown.value = true;
+});
+
+keybindingService?.registeCommand('layer-panel-ctrl-keyup', () => {
+  isCtrlKeyDown.value = false;
+});
+
+keybindingService?.registeCommand('layer-panel-global-keydwon', () => {
+  if (!tree.value?.$el.contains(document.activeElement)) {
+    isCtrlKeyDown.value = false;
+  }
+});
+
+keybindingService?.registe([
+  {
+    command: 'layer-panel-not-ctrl-keydown',
+    when: [['layer-panel', 'keydown']],
+  },
+  {
+    command: 'layer-panel-ctrl-keydown',
+    keybinding: 'ctrl',
+    when: [['layer-panel', 'keydown']],
+  },
+  {
+    command: 'layer-panel-ctrl-keyup',
+    keybinding: 'ctrl',
+    when: [['layer-panel', 'keyup']],
+  },
+  {
+    command: 'layer-panel-global-keydwon',
+    keybinding: 'ctrl',
+    when: [['global', 'keydown']],
+  },
+]);
+
+watch(tree, () => {
+  if (tree.value?.$el) {
+    keybindingService?.registeEl('layer-panel', tree.value.$el);
+
+    tree.value.$el.addEventListener('blur', windowBlurHandler);
+  } else {
+    keybindingService?.unregisteEl('layer-panel');
+  }
+});
 
 onMounted(() => {
   editorService?.on('remove', editorServiceRemoveHandler);
 
-  keycon = new KeyController();
-  const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-  const ctrl = isMac ? 'meta' : 'ctrl';
-
-  keycon
-    .keydown((e) => {
-      if (e.key !== ctrl) {
-        isCtrlKeyDown.value = false;
-      }
-    })
-    .keydown(ctrl, () => {
-      isCtrlKeyDown.value = true;
-    })
-    .keyup(ctrl, () => {
-      isCtrlKeyDown.value = false;
-    });
-
   globalThis.addEventListener('blur', windowBlurHandler);
 });
 
-onUnmounted(() => {
-  keycon.destroy();
+onBeforeUnmount(() => {
+  tree.value?.$el.removeEventListener('blur', windowBlurHandler);
+});
 
+onUnmounted(() => {
   editorService?.off('remove', editorServiceRemoveHandler);
   globalThis.removeEventListener('blur', windowBlurHandler);
 });

package/src/layouts/sidebar/code-block/CodeBlockEditor.vue

@@ -10,7 +10,7 @@
     :size="size"
     :before-close="handleClose"
   >
-    <Layout v-model:left="left" :min-left="45" class="code-editor-layout">
+    <SplitView v-model:left="left" :min-left="45" class="code-editor-layout">
       <!-- 右侧区域 -->
       <template #center>
         <div v-if="!isEmpty(codeConfig)" class="m-editor-code-block-editor-panel">
@@ -28,7 +28,7 @@
           ></FunctionEditor>
         </div>
       </template>
-    </Layout>
+    </SplitView>
   </TMagicDrawer>
 </template>
 
@@ -41,7 +41,7 @@ import { ColumnConfig } from '@tmagic/form';
 import { CodeBlockContent } from '@tmagic/schema';
 
 import FunctionEditor from '@editor/components/FunctionEditor.vue';
-import Layout from '@editor/components/Layout.vue';
+import SplitView from '@editor/components/SplitView.vue';
 import type { ListState, Services } from '@editor/type';
 import { serializeConfig } from '@editor/utils/editor';
 

package/src/layouts/workspace/Stage.vue

@@ -2,6 +2,7 @@
   <ScrollViewer
     class="m-editor-stage"
     ref="stageWrap"
+    tabindex="-1"
     :width="stageRect?.width"
     :height="stageRect?.height"
     :wrap-width="stageContainerRect?.width"
@@ -35,6 +36,7 @@ import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stag
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { Layout, MenuButton, MenuComponent, Services, StageOptions } from '@editor/type';
+import { getConfig } from '@editor/utils/config';
 import { useStage } from '@editor/utils/stage';
 
 import ViewerMenu from './ViewerMenu.vue';
@@ -74,6 +76,10 @@ watchEffect(() => {
 
   stage = useStage(stageOptions);
 
+  stage.on('select', () => {
+    stageWrap.value?.container?.focus();
+  });
+
   services?.editorService.set('stage', markRaw(stage));
 
   stage?.mount(stageContainer.value);
@@ -120,13 +126,17 @@ const resizeObserver = new ResizeObserver((entries) => {
 });
 
 onMounted(() => {
-  stageWrap.value?.container && resizeObserver.observe(stageWrap.value.container);
+  if (stageWrap.value?.container) {
+    resizeObserver.observe(stageWrap.value.container);
+    services?.keybindingService.registeEl('stage', stageWrap.value.container);
+  }
 });
 
 onUnmounted(() => {
   stage?.destroy();
   resizeObserver.disconnect();
   services?.editorService.set('stage', null);
+  services?.keybindingService.unregisteEl('stage');
 });
 
 const contextmenuHandler = (e: MouseEvent) => {
@@ -153,8 +163,8 @@ const dropHandler = async (e: DragEvent) => {
   }
 
   if (e.dataTransfer && parent && stageContainer.value && stage) {
-    // eslint-disable-next-line no-eval
-    const config = eval(`(${e.dataTransfer.getData('data')})`);
+    const parseDSL = getConfig('parseDSL');
+    const config = parseDSL(`(${e.dataTransfer.getData('data')})`);
     const layout = await services?.editorService.getLayout(parent);
 
     const containerRect = stageContainer.value.getBoundingClientRect();

package/src/layouts/workspace/Workspace.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-workspace" tabindex="-1" ref="workspace">
+  <div class="m-editor-workspace">
     <Breadcrumb></Breadcrumb>
 
     <slot name="stage">
@@ -16,12 +16,9 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
-import KeyController from 'keycon';
+import { computed, inject } from 'vue';
 
-import { isPage } from '@tmagic/utils';
-
-import type { MenuButton, MenuComponent, Services } from '@editor/type';
+import { MenuButton, MenuComponent, Services } from '@editor/type';
 
 import Breadcrumb from './Breadcrumb.vue';
 import PageBar from './PageBar.vue';
@@ -36,132 +33,6 @@ defineProps<{
 }>();
 
 const services = inject<Services>('services');
-const workspace = ref<HTMLDivElement>();
-const nodes = computed(() => services?.editorService.get('nodes'));
-const page = computed(() => services?.editorService.get('page'));
-
-const mouseenterHandler = () => {
-  workspace.value?.focus();
-};
-
-const mouseleaveHandler = () => {
-  workspace.value?.blur();
-};
-
-let keycon: KeyController;
-
-onMounted(() => {
-  workspace.value?.addEventListener('mouseenter', mouseenterHandler);
-  workspace.value?.addEventListener('mouseleave', mouseleaveHandler);
-
-  keycon = new KeyController(workspace.value);
 
-  const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-
-  const ctrl = isMac ? 'meta' : 'ctrl';
-
-  keycon
-    .keyup('delete', (e) => {
-      e.inputEvent.preventDefault();
-      if (!nodes.value || isPage(nodes.value[0])) return;
-      services?.editorService.remove(nodes.value);
-    })
-    .keyup('backspace', (e) => {
-      e.inputEvent.preventDefault();
-      if (!nodes.value || isPage(nodes.value[0])) return;
-      services?.editorService.remove(nodes.value);
-    })
-    .keydown([ctrl, 'c'], (e) => {
-      e.inputEvent.preventDefault();
-      nodes.value && services?.editorService.copy(nodes.value);
-    })
-    .keydown([ctrl, 'v'], (e) => {
-      e.inputEvent.preventDefault();
-      nodes.value && services?.editorService.paste({ offsetX: 10, offsetY: 10 });
-    })
-    .keydown([ctrl, 'x'], (e) => {
-      e.inputEvent.preventDefault();
-      if (!nodes.value || isPage(nodes.value[0])) return;
-      services?.editorService.copy(nodes.value);
-      services?.editorService.remove(nodes.value);
-    })
-    .keydown([ctrl, 'z'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.undo();
-    })
-    .keydown([ctrl, 'shift', 'z'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.redo();
-    })
-    .keydown('up', (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(0, -1);
-    })
-    .keydown('down', (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(0, 1);
-    })
-    .keydown('left', (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(-1, 0);
-    })
-    .keydown('right', (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(1, 0);
-    })
-    .keydown([ctrl, 'up'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(0, -10);
-    })
-    .keydown([ctrl, 'down'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(0, 10);
-    })
-    .keydown([ctrl, 'left'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(-10, 0);
-    })
-    .keydown([ctrl, 'right'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(10, 0);
-    })
-    .keydown('tab', (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.selectNextNode();
-    })
-    .keydown([ctrl, 'tab'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.selectNextPage();
-    })
-    .keydown([ctrl, '='], (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.zoom(0.1);
-    })
-    .keydown([ctrl, 'numpadplus'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.zoom(0.1);
-    })
-    .keydown([ctrl, '-'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.zoom(-0.1);
-    })
-    .keydown([ctrl, 'numpad-'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.zoom(-0.1);
-    })
-    .keydown([ctrl, '0'], async (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.set('zoom', await services.uiService.calcZoom());
-    })
-    .keydown([ctrl, '1'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.set('zoom', 1);
-    });
-});
-
-onUnmounted(() => {
-  workspace.value?.removeEventListener('mouseenter', mouseenterHandler);
-  workspace.value?.removeEventListener('mouseleave', mouseleaveHandler);
-  keycon.destroy();
-});
+const page = computed(() => services?.editorService.get('page'));
 </script>