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

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();

package/src/theme/resizer.scss

@@ -4,14 +4,38 @@
   width: 8px;
   margin: 0 -5px;
   height: 100%;
-  opacity: 0.9;
+  opacity: 0.8;
   background: padding-box #d8dee8;
   box-sizing: border-box;
   cursor: col-resize;
   z-index: 1;
+  position: relative;
 
   &:hover {
     border-color: #d8dee8;
+
+    .icon-container {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  &.m-editor-resizer-draging {
+    &::after {
+      content: "";
+      position: absolute;
+      width: 600px;
+      height: 100%;
+      left: 0;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      width: 600px;
+      height: 100%;
+      right: 0;
+    }
   }
 
   .icon-container {
@@ -40,12 +64,3 @@
     font-size: 18px;
   }
 }
-
-.magic-editor-resizer:hover {
-  .icon-container {
-    visibility: visible;
-    opacity: 1;
-  }
-  // border-left: 5px solid rgba(0,0,0,.5);
-  // border-right: 5px solid rgba(0,0,0,.5);
-}

package/src/type.ts

@@ -30,11 +30,12 @@ import type {
 
 import type { CodeBlockService } from './services/codeBlock';
 import type { ComponentListService } from './services/componentList';
-import { DataSourceService } from './services/dataSource';
+import type { DataSourceService } from './services/dataSource';
 import type { DepService } from './services/dep';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
 import type { HistoryService } from './services/history';
+import type { KeybindingService } from './services/keybinding';
 import type { PropsService } from './services/props';
 import type { StorageService } from './services/storage';
 import type { UiService } from './services/ui';
@@ -58,6 +59,7 @@ export interface Services {
   codeBlockService: CodeBlockService;
   depService: DepService;
   dataSourceService: DataSourceService;
+  keybindingService: KeybindingService;
 }
 
 export interface StageOptions {

package/types/components/FunctionEditor.vue.d.ts

@@ -70,9 +70,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
             class?: unknown;
             style?: unknown;
             readonly id: Id;
+            readonly language?: string | undefined;
             readonly codeOptions?: Object | undefined;
             readonly content: string;
-            readonly language?: string | undefined;
             onClose?: ((...args: any[]) => any) | undefined;
             onSaveAndClose?: ((...args: any[]) => any) | undefined;
         };
@@ -98,6 +98,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            language: {
+                type: import("vue").PropType<string>;
+            };
             codeOptions: {
                 type: import("vue").PropType<Object>;
             };
@@ -105,9 +108,6 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
                 type: import("vue").PropType<string>;
                 required: true;
             };
-            language: {
-                type: import("vue").PropType<string>;
-            };
             autoSaveDraft: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -150,6 +150,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        language: {
+            type: import("vue").PropType<string>;
+        };
         codeOptions: {
             type: import("vue").PropType<Object>;
         };
@@ -157,9 +160,6 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
             type: import("vue").PropType<string>;
             required: true;
         };
-        language: {
-            type: import("vue").PropType<string>;
-        };
         autoSaveDraft: {
             type: import("vue").PropType<boolean>;
             default: boolean;

package/types/index.d.ts

@@ -28,7 +28,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';
 declare const _default: {
     install: (app: App, opt?: InstallOptions) => void;
 };

package/types/layouts/CodeEditor.vue.d.ts

@@ -1,7 +1,7 @@
 import * as monaco from 'monaco-editor';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    initValues?: string | Object | undefined;
-    modifiedValues?: string | Object | undefined;
+    initValues?: string | Record<string | number, any> | null | undefined;
+    modifiedValues?: string | Record<string | number, any> | null | undefined;
     type?: "diff" | undefined;
     language?: string | undefined;
     options?: {
@@ -18,9 +18,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     getEditor(): monaco.editor.IStandaloneCodeEditor | monaco.editor.IStandaloneDiffEditor | null;
     setEditorValue: (v: any, m: any) => void | undefined;
     focus(): void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("save" | "initd")[], "save" | "initd", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    initValues?: string | Object | undefined;
-    modifiedValues?: string | Object | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("initd" | "save")[], "initd" | "save", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    initValues?: string | Record<string | number, any> | null | undefined;
+    modifiedValues?: string | Record<string | number, any> | null | undefined;
     type?: "diff" | undefined;
     language?: string | undefined;
     options?: {
@@ -34,8 +34,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         tabSize: number;
     };
 }>>> & {
-    onSave?: ((...args: any[]) => any) | undefined;
     onInitd?: ((...args: any[]) => any) | undefined;
+    onSave?: ((...args: any[]) => any) | undefined;
 }, {
     options: {
         [key: string]: any;

package/types/layouts/Framework.vue.d.ts

@@ -1,42 +1,18 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    codeOptions?: Record<string, any> | undefined;
-}>, {
-    codeOptions: () => {};
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    codeOptions?: Record<string, any> | undefined;
-}>, {
-    codeOptions: () => {};
-}>>>, {
-    codeOptions: Record<string, any>;
-}, {}>, {
-    nav?(_: {
-        class: string;
-    }): any;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    header?(_: {}): any;
+    nav?(_: {}): any;
+    "content-before"?(_: {}): any;
+    "src-code"?(_: {}): any;
     sidebar?(_: {}): any;
     workspace?(_: {}): any;
     empty?(_: {}): any;
     "props-panel"?(_: {}): any;
+    "content-after"?(_: {}): any;
+    footer?(_: {}): any;
 }>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/types/services/keybinding.d.ts

@@ -0,0 +1,12 @@
+import BaseService from './BaseService';
+declare class Keybinding extends BaseService {
+    private keycon;
+    private ctrlKey;
+    constructor();
+    destroy(): void;
+    private isDisabledKeyEvent;
+    private removeNode;
+}
+export type KeybindingService = Keybinding;
+declare const _default: Keybinding;
+export default _default;

package/types/type.d.ts

@@ -5,11 +5,12 @@ import type StageCore from '@tmagic/stage';
 import type { ContainerHighlightType, CustomizeMoveableOptionsCallbackConfig, MoveableOptions, UpdateDragEl } from '@tmagic/stage';
 import type { CodeBlockService } from './services/codeBlock';
 import type { ComponentListService } from './services/componentList';
-import { DataSourceService } from './services/dataSource';
+import type { DataSourceService } from './services/dataSource';
 import type { DepService } from './services/dep';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
 import type { HistoryService } from './services/history';
+import type { KeybindingService } from './services/keybinding';
 import type { PropsService } from './services/props';
 import type { StorageService } from './services/storage';
 import type { UiService } from './services/ui';
@@ -30,6 +31,7 @@ export interface Services {
     codeBlockService: CodeBlockService;
     depService: DepService;
     dataSourceService: DataSourceService;
+    keybindingService: KeybindingService;
 }
 export interface StageOptions {
     runtimeUrl: string;