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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.5",
+  "version": "1.3.0-alpha.6",
   "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.6",
+    "@tmagic/design": "1.3.0-alpha.6",
+    "@tmagic/form": "1.3.0-alpha.6",
+    "@tmagic/schema": "1.3.0-alpha.6",
+    "@tmagic/stage": "1.3.0-alpha.6",
+    "@tmagic/table": "1.3.0-alpha.6",
+    "@tmagic/utils": "1.3.0-alpha.6",
     "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.6",
+    "@tmagic/form": "1.3.0-alpha.6",
     "monaco-editor": "^0.34.0",
     "vue": "^3.3.4"
   },

package/src/Editor.vue

@@ -96,6 +96,7 @@ 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';
@@ -130,6 +131,7 @@ export default defineComponent({
       codeBlockService,
       depService,
       dataSourceService,
+      keybindingService,
     };
 
     initServiceEvents(props, emit, services);

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/index.ts

@@ -60,7 +60,8 @@ 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, 自定义图片上传方法等编辑器依赖的外部选项

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,7 +50,7 @@ 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 AddPageBox from './AddPageBox.vue';

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"
@@ -75,6 +76,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,27 +248,40 @@ const windowBlurHandler = () => {
   isCtrlKeyDown.value = false;
 };
 
+const globalKeyupHandler = () => {
+  if (document.activeElement !== tree.value?.$el) {
+    isCtrlKeyDown.value = false;
+  }
+};
+
 let keycon: KeyController;
 
 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) {
+  if (tree.value?.$el) {
+    // 如果是在树上按下ctrl，那么在树外松开ctrl时，也要触发松开事件
+    keybindingService?.on('keyup', globalKeyupHandler);
+
+    keycon = new KeyController(tree.value.$el);
+    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;
-      }
-    })
-    .keydown(ctrl, () => {
-      isCtrlKeyDown.value = true;
-    })
-    .keyup(ctrl, () => {
-      isCtrlKeyDown.value = false;
-    });
+      });
+
+    tree.value.$el.addEventListener('blur', windowBlurHandler);
+  }
 
   globalThis.addEventListener('blur', windowBlurHandler);
 });
@@ -275,7 +290,9 @@ onUnmounted(() => {
   keycon.destroy();
 
   editorService?.off('remove', editorServiceRemoveHandler);
+  keybindingService?.off('keyup', globalKeyupHandler);
   globalThis.removeEventListener('blur', windowBlurHandler);
+  tree.value?.$el.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/Workspace.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-workspace" tabindex="-1" ref="workspace">
+  <div class="m-editor-workspace" tabindex="-1">
     <Breadcrumb></Breadcrumb>
 
     <slot name="stage">
@@ -16,10 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
-import KeyController from 'keycon';
-
-import { isPage } from '@tmagic/utils';
+import { computed, inject } from 'vue';
 
 import type { MenuButton, MenuComponent, Services } from '@editor/type';
 
@@ -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>

package/src/services/keybinding.ts

@@ -0,0 +1,240 @@
+import KeyController from 'keycon';
+
+import { isPage } from '@tmagic/utils';
+
+import BaseService from './BaseService';
+import editorService from './editor';
+import uiService from './ui';
+
+class Keybinding extends BaseService {
+  private keycon = new KeyController();
+
+  private ctrlKey = /mac os x/.test(navigator.userAgent.toLowerCase()) ? 'meta' : 'ctrl';
+
+  constructor() {
+    super();
+
+    this.keycon
+      .keyup((e) => {
+        this.emit('keyup', e.inputEvent);
+      })
+      .keyup('delete', (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+
+        this.removeNode();
+      })
+      .keyup('backspace', (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+
+        this.removeNode();
+      })
+      .keydown([this.ctrlKey, 'c'], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+
+        const nodes = editorService.get('nodes');
+        nodes && editorService.copy(nodes);
+      })
+      .keydown([this.ctrlKey, 'v'], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+
+        const nodes = editorService.get('nodes');
+        nodes && editorService.paste({ offsetX: 10, offsetY: 10 });
+      })
+      .keydown([this.ctrlKey, 'x'], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        const nodes = editorService.get('nodes');
+
+        if (!nodes || isPage(nodes[0])) return;
+        editorService.copy(nodes);
+        editorService.remove(nodes);
+      })
+      .keydown([this.ctrlKey, 'z'], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        editorService.undo();
+      })
+      .keydown([this.ctrlKey, 'shift', 'z'], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        editorService.redo();
+      })
+      .keydown('up', (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        editorService.move(0, -1);
+      })
+      .keydown('down', (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        editorService.move(0, 1);
+      })
+      .keydown('left', (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        editorService.move(-1, 0);
+      })
+      .keydown('right', (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        editorService.move(1, 0);
+      })
+      .keydown([this.ctrlKey, 'up'], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        editorService.move(0, -10);
+      })
+      .keydown([this.ctrlKey, 'down'], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        editorService.move(0, 10);
+      })
+      .keydown([this.ctrlKey, 'left'], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        editorService.move(-10, 0);
+      })
+      .keydown([this.ctrlKey, 'right'], (e) => {
+        e.inputEvent.preventDefault();
+        editorService.move(10, 0);
+      })
+      .keydown('tab', (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        editorService.selectNextNode();
+      })
+      .keydown([this.ctrlKey, 'tab'], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        editorService.selectNextPage();
+      })
+      .keydown([this.ctrlKey, '='], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        uiService.zoom(0.1);
+      })
+      .keydown([this.ctrlKey, 'numpadplus'], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        uiService.zoom(0.1);
+      })
+      .keydown([this.ctrlKey, '-'], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        uiService.zoom(-0.1);
+      })
+      .keydown([this.ctrlKey, 'numpad-'], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        uiService.zoom(-0.1);
+      })
+      .keydown([this.ctrlKey, '0'], async (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        uiService.set('zoom', await uiService.calcZoom());
+      })
+      .keydown([this.ctrlKey, '1'], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+
+        e.inputEvent.preventDefault();
+        uiService.set('zoom', 1);
+      });
+  }
+
+  public destroy() {
+    this.keycon.destroy();
+  }
+
+  private isDisabledKeyEvent(node: EventTarget | null) {
+    const el = node as HTMLElement | null;
+
+    if (!el) return false;
+
+    // 当前是在输入框中，禁止响应画布快捷键
+    return el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable;
+  }
+
+  private removeNode() {
+    const nodes = editorService.get('nodes');
+
+    if (!nodes || isPage(nodes[0])) return;
+    editorService.remove(nodes);
+  }
+}
+
+export type KeybindingService = Keybinding;
+
+export default new Keybinding();