@tmagic/editor 1.3.0-alpha.5 → 1.3.0-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/style.css +23 -5
- package/dist/tmagic-editor.js +502 -246
- package/dist/tmagic-editor.js.map +1 -1
- package/dist/tmagic-editor.umd.cjs +505 -247
- package/dist/tmagic-editor.umd.cjs.map +1 -1
- package/package.json +10 -10
- package/src/Editor.vue +5 -0
- package/src/components/ContentMenu.vue +15 -8
- package/src/components/FunctionEditor.vue +6 -4
- package/src/{layouts → components}/Resizer.vue +15 -6
- package/src/components/{Layout.vue → SplitView.vue} +1 -1
- package/src/fields/CodeLink.vue +4 -2
- package/src/index.ts +5 -3
- package/src/initService.ts +2 -0
- package/src/layouts/Framework.vue +6 -5
- package/src/layouts/sidebar/LayerPanel.vue +58 -22
- package/src/layouts/sidebar/code-block/CodeBlockEditor.vue +3 -3
- package/src/layouts/workspace/Stage.vue +13 -3
- package/src/layouts/workspace/Workspace.vue +4 -133
- package/src/services/codeBlock.ts +3 -2
- package/src/services/keybinding.ts +185 -0
- package/src/services/storage.ts +3 -2
- package/src/theme/resizer.scss +25 -10
- package/src/theme/stage.scss +4 -0
- package/src/type.ts +59 -1
- package/src/utils/config.ts +1 -1
- package/src/utils/keybinding-config.ts +120 -0
- package/types/components/ContentMenu.vue.d.ts +2 -0
- package/types/index.d.ts +3 -2
- package/types/initService.d.ts +1 -1
- package/types/layouts/workspace/Workspace.vue.d.ts +1 -1
- package/types/services/keybinding.d.ts +20 -0
- package/types/type.d.ts +56 -1
- package/types/utils/config.d.ts +1 -1
- package/types/utils/keybinding-config.d.ts +3 -0
- /package/types/{layouts → components}/Resizer.vue.d.ts +0 -0
- /package/types/components/{Layout.vue.d.ts → SplitView.vue.d.ts} +0 -0
|
@@ -23,6 +23,7 @@ import { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
|
|
|
23
23
|
|
|
24
24
|
import type { CodeState } from '@editor/type';
|
|
25
25
|
import { CODE_DRAFT_STORAGE_KEY } from '@editor/type';
|
|
26
|
+
import { getConfig } from '@editor/utils/config';
|
|
26
27
|
|
|
27
28
|
import BaseService from './BaseService';
|
|
28
29
|
|
|
@@ -95,8 +96,8 @@ class CodeBlock extends BaseService {
|
|
|
95
96
|
const codeConfigProcessed = codeConfig;
|
|
96
97
|
if (codeConfig.content) {
|
|
97
98
|
// 在保存的时候转换代码内容
|
|
98
|
-
|
|
99
|
-
codeConfigProcessed.content =
|
|
99
|
+
const parseDSL = getConfig('parseDSL');
|
|
100
|
+
codeConfigProcessed.content = parseDSL(codeConfig.content);
|
|
100
101
|
}
|
|
101
102
|
|
|
102
103
|
const existContent = codeDsl[id] || {};
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
import KeyController, { KeyControllerEvent } from 'keycon';
|
|
2
|
+
|
|
3
|
+
import { isPage } from '@tmagic/utils';
|
|
4
|
+
|
|
5
|
+
import { KeyBindingCacheItem, KeyBindingCommand, KeyBindingItem } from '@editor/type';
|
|
6
|
+
|
|
7
|
+
import BaseService from './BaseService';
|
|
8
|
+
import editorService from './editor';
|
|
9
|
+
import uiService from './ui';
|
|
10
|
+
|
|
11
|
+
class Keybinding extends BaseService {
|
|
12
|
+
public ctrlKey = /mac os x/.test(navigator.userAgent.toLowerCase()) ? 'meta' : 'ctrl';
|
|
13
|
+
|
|
14
|
+
private controllers = new Map<string, KeyController>();
|
|
15
|
+
|
|
16
|
+
private bindingList: KeyBindingCacheItem[] = [];
|
|
17
|
+
|
|
18
|
+
private commands: Record<KeyBindingCommand | string, (e: KeyboardEvent) => void | Promise<void>> = {
|
|
19
|
+
[KeyBindingCommand.DELETE_NODE]: () => {
|
|
20
|
+
const nodes = editorService.get('nodes');
|
|
21
|
+
|
|
22
|
+
if (!nodes || isPage(nodes[0])) return;
|
|
23
|
+
editorService.remove(nodes);
|
|
24
|
+
},
|
|
25
|
+
[KeyBindingCommand.COPY_NODE]: () => {
|
|
26
|
+
const nodes = editorService.get('nodes');
|
|
27
|
+
nodes && editorService.copy(nodes);
|
|
28
|
+
},
|
|
29
|
+
[KeyBindingCommand.CUT_NODE]: () => {
|
|
30
|
+
const nodes = editorService.get('nodes');
|
|
31
|
+
|
|
32
|
+
if (!nodes || isPage(nodes[0])) return;
|
|
33
|
+
editorService.copy(nodes);
|
|
34
|
+
editorService.remove(nodes);
|
|
35
|
+
},
|
|
36
|
+
[KeyBindingCommand.PASTE_NODE]: () => {
|
|
37
|
+
const nodes = editorService.get('nodes');
|
|
38
|
+
nodes && editorService.paste({ offsetX: 10, offsetY: 10 });
|
|
39
|
+
},
|
|
40
|
+
[KeyBindingCommand.UNDO]: () => {
|
|
41
|
+
editorService.undo();
|
|
42
|
+
},
|
|
43
|
+
[KeyBindingCommand.REDO]: () => {
|
|
44
|
+
editorService.redo();
|
|
45
|
+
},
|
|
46
|
+
[KeyBindingCommand.ZOOM_IN]: () => {
|
|
47
|
+
uiService.zoom(0.1);
|
|
48
|
+
},
|
|
49
|
+
[KeyBindingCommand.ZOOM_OUT]: () => {
|
|
50
|
+
uiService.zoom(-0.1);
|
|
51
|
+
},
|
|
52
|
+
[KeyBindingCommand.ZOOM_RESET]: () => {
|
|
53
|
+
uiService.set('zoom', 1);
|
|
54
|
+
},
|
|
55
|
+
[KeyBindingCommand.ZOOM_FIT]: async () => {
|
|
56
|
+
uiService.set('zoom', await uiService.calcZoom());
|
|
57
|
+
},
|
|
58
|
+
[KeyBindingCommand.MOVE_UP_1]: () => {
|
|
59
|
+
editorService.move(0, -1);
|
|
60
|
+
},
|
|
61
|
+
[KeyBindingCommand.MOVE_DOWN_1]: () => {
|
|
62
|
+
editorService.move(0, 1);
|
|
63
|
+
},
|
|
64
|
+
[KeyBindingCommand.MOVE_LEFT_1]: () => {
|
|
65
|
+
editorService.move(-1, 0);
|
|
66
|
+
},
|
|
67
|
+
[KeyBindingCommand.MOVE_RIGHT_1]: () => {
|
|
68
|
+
editorService.move(1, 0);
|
|
69
|
+
},
|
|
70
|
+
[KeyBindingCommand.MOVE_UP_10]: () => {
|
|
71
|
+
editorService.move(0, -10);
|
|
72
|
+
},
|
|
73
|
+
[KeyBindingCommand.MOVE_DOWN_10]: () => {
|
|
74
|
+
editorService.move(0, 10);
|
|
75
|
+
},
|
|
76
|
+
[KeyBindingCommand.MOVE_LEFT_10]: () => {
|
|
77
|
+
editorService.move(-10, 0);
|
|
78
|
+
},
|
|
79
|
+
[KeyBindingCommand.MOVE_RIGHT_10]: () => {
|
|
80
|
+
editorService.move(10, 0);
|
|
81
|
+
},
|
|
82
|
+
[KeyBindingCommand.SWITCH_NODE]: () => {
|
|
83
|
+
editorService.selectNextNode();
|
|
84
|
+
},
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
public registeCommand(command: string, handler: (e: KeyboardEvent) => void | Promise<void>) {
|
|
88
|
+
this.commands[command] = handler;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
public unregisteCommand(command: string) {
|
|
92
|
+
delete this.commands[command];
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
public registeEl(name: string, el?: HTMLElement) {
|
|
96
|
+
if (name !== 'global' && !el) {
|
|
97
|
+
throw new Error('只有name为global可以不传el');
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
const keycon = new KeyController(el);
|
|
101
|
+
this.controllers.set(name, keycon);
|
|
102
|
+
this.bind(name);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
public unregisteEl(name: string) {
|
|
106
|
+
this.controllers.get(name)?.destroy();
|
|
107
|
+
this.controllers.delete(name);
|
|
108
|
+
this.bindingList.forEach((item) => {
|
|
109
|
+
item.binded = false;
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
public registe(maps: KeyBindingItem[]) {
|
|
114
|
+
for (const keybindingItem of maps) {
|
|
115
|
+
const { command, keybinding, when } = keybindingItem;
|
|
116
|
+
|
|
117
|
+
for (const [type = '', eventType = 'keydown'] of when) {
|
|
118
|
+
const cacheItem: KeyBindingCacheItem = { type, command, keybinding, eventType, binded: false };
|
|
119
|
+
|
|
120
|
+
this.bindingList.push(cacheItem);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
this.bind();
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
public reset() {
|
|
128
|
+
this.controllers.forEach((keycon) => {
|
|
129
|
+
keycon.destroy();
|
|
130
|
+
});
|
|
131
|
+
this.controllers.clear();
|
|
132
|
+
this.bindingList = [];
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
public destroy() {
|
|
136
|
+
this.reset();
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
private bind(name?: string) {
|
|
140
|
+
for (const item of this.bindingList) {
|
|
141
|
+
const { type, eventType, command, keybinding, binded } = item;
|
|
142
|
+
|
|
143
|
+
if (name && name !== type) {
|
|
144
|
+
continue;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
if (binded) {
|
|
148
|
+
continue;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
const keycon = this.controllers.get(type);
|
|
152
|
+
if (!keycon) {
|
|
153
|
+
continue;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
const handler = (e: KeyControllerEvent) => {
|
|
157
|
+
e.inputEvent.preventDefault();
|
|
158
|
+
|
|
159
|
+
this.commands[command]?.(e.inputEvent);
|
|
160
|
+
};
|
|
161
|
+
this.getKeyconKeys(keybinding).forEach((keys) => {
|
|
162
|
+
if (keys[0]) {
|
|
163
|
+
keycon[eventType](keys, handler);
|
|
164
|
+
} else {
|
|
165
|
+
keycon[eventType](handler);
|
|
166
|
+
}
|
|
167
|
+
});
|
|
168
|
+
|
|
169
|
+
item.binded = true;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
private getKeyconKeys(keybinding: string | string[] = '') {
|
|
174
|
+
const splitKey = (key: string) => key.split('+').map((k) => (k === 'ctrl' ? this.ctrlKey : k));
|
|
175
|
+
|
|
176
|
+
if (Array.isArray(keybinding)) {
|
|
177
|
+
return keybinding.map((key) => splitKey(key));
|
|
178
|
+
}
|
|
179
|
+
return [splitKey(keybinding)];
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
export type KeybindingService = Keybinding;
|
|
184
|
+
|
|
185
|
+
export default new Keybinding();
|
package/src/services/storage.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import serialize from 'serialize-javascript';
|
|
2
2
|
|
|
3
|
+
import { getConfig } from '@editor/utils/config';
|
|
4
|
+
|
|
3
5
|
import BaseService from './BaseService';
|
|
4
6
|
|
|
5
7
|
interface Options {
|
|
@@ -64,8 +66,7 @@ export class WebStorage extends BaseService {
|
|
|
64
66
|
|
|
65
67
|
switch (protocol) {
|
|
66
68
|
case Protocol.OBJECT:
|
|
67
|
-
|
|
68
|
-
return eval(`(${item})`);
|
|
69
|
+
return getConfig('parseDSL')(`(${item})`);
|
|
69
70
|
case Protocol.JSON:
|
|
70
71
|
return JSON.parse(item);
|
|
71
72
|
case Protocol.NUMBER:
|
package/src/theme/resizer.scss
CHANGED
|
@@ -4,14 +4,38 @@
|
|
|
4
4
|
width: 8px;
|
|
5
5
|
margin: 0 -5px;
|
|
6
6
|
height: 100%;
|
|
7
|
-
opacity: 0.
|
|
7
|
+
opacity: 0.8;
|
|
8
8
|
background: padding-box #d8dee8;
|
|
9
9
|
box-sizing: border-box;
|
|
10
10
|
cursor: col-resize;
|
|
11
11
|
z-index: 1;
|
|
12
|
+
position: relative;
|
|
12
13
|
|
|
13
14
|
&:hover {
|
|
14
15
|
border-color: #d8dee8;
|
|
16
|
+
|
|
17
|
+
.icon-container {
|
|
18
|
+
visibility: visible;
|
|
19
|
+
opacity: 1;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&.m-editor-resizer-draging {
|
|
24
|
+
&::after {
|
|
25
|
+
content: "";
|
|
26
|
+
position: absolute;
|
|
27
|
+
width: 600px;
|
|
28
|
+
height: 100%;
|
|
29
|
+
left: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&::before {
|
|
33
|
+
content: "";
|
|
34
|
+
position: absolute;
|
|
35
|
+
width: 600px;
|
|
36
|
+
height: 100%;
|
|
37
|
+
right: 0;
|
|
38
|
+
}
|
|
15
39
|
}
|
|
16
40
|
|
|
17
41
|
.icon-container {
|
|
@@ -40,12 +64,3 @@
|
|
|
40
64
|
font-size: 18px;
|
|
41
65
|
}
|
|
42
66
|
}
|
|
43
|
-
|
|
44
|
-
.magic-editor-resizer:hover {
|
|
45
|
-
.icon-container {
|
|
46
|
-
visibility: visible;
|
|
47
|
-
opacity: 1;
|
|
48
|
-
}
|
|
49
|
-
// border-left: 5px solid rgba(0,0,0,.5);
|
|
50
|
-
// border-right: 5px solid rgba(0,0,0,.5);
|
|
51
|
-
}
|
package/src/theme/stage.scss
CHANGED
package/src/type.ts
CHANGED
|
@@ -30,11 +30,12 @@ import type {
|
|
|
30
30
|
|
|
31
31
|
import type { CodeBlockService } from './services/codeBlock';
|
|
32
32
|
import type { ComponentListService } from './services/componentList';
|
|
33
|
-
import { DataSourceService } from './services/dataSource';
|
|
33
|
+
import type { DataSourceService } from './services/dataSource';
|
|
34
34
|
import type { DepService } from './services/dep';
|
|
35
35
|
import type { EditorService } from './services/editor';
|
|
36
36
|
import type { EventsService } from './services/events';
|
|
37
37
|
import type { HistoryService } from './services/history';
|
|
38
|
+
import type { KeybindingService } from './services/keybinding';
|
|
38
39
|
import type { PropsService } from './services/props';
|
|
39
40
|
import type { StorageService } from './services/storage';
|
|
40
41
|
import type { UiService } from './services/ui';
|
|
@@ -44,6 +45,7 @@ export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> |
|
|
|
44
45
|
export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
|
|
45
46
|
|
|
46
47
|
export interface InstallOptions {
|
|
48
|
+
parseDSL: (dsl: string) => MApp;
|
|
47
49
|
[key: string]: any;
|
|
48
50
|
}
|
|
49
51
|
|
|
@@ -58,6 +60,7 @@ export interface Services {
|
|
|
58
60
|
codeBlockService: CodeBlockService;
|
|
59
61
|
depService: DepService;
|
|
60
62
|
dataSourceService: DataSourceService;
|
|
63
|
+
keybindingService: KeybindingService;
|
|
61
64
|
}
|
|
62
65
|
|
|
63
66
|
export interface StageOptions {
|
|
@@ -427,3 +430,58 @@ export interface EventSelectConfig {
|
|
|
427
430
|
/** 联动代码配置 */
|
|
428
431
|
codeActionConfig?: FormItem;
|
|
429
432
|
}
|
|
433
|
+
|
|
434
|
+
export enum KeyBindingCommand {
|
|
435
|
+
/** 复制 */
|
|
436
|
+
COPY_NODE = 'tmagic-system-copy-node',
|
|
437
|
+
/** 粘贴 */
|
|
438
|
+
PASTE_NODE = 'tmagic-system-paste-node',
|
|
439
|
+
/** 删除 */
|
|
440
|
+
DELETE_NODE = 'tmagic-system-delete-node',
|
|
441
|
+
/** 剪切 */
|
|
442
|
+
CUT_NODE = 'tmagic-system-cut-node',
|
|
443
|
+
/** 撤销 */
|
|
444
|
+
UNDO = 'tmagic-system-undo',
|
|
445
|
+
/** 重做 */
|
|
446
|
+
REDO = 'tmagic-system-redo',
|
|
447
|
+
/** 放大 */
|
|
448
|
+
ZOOM_IN = 'tmagic-system-zoom-in',
|
|
449
|
+
/** 缩小 */
|
|
450
|
+
ZOOM_OUT = 'tmagic-system-zoom-out',
|
|
451
|
+
/** 缩放到实际大小 */
|
|
452
|
+
ZOOM_RESET = 'tmagic-system-zoom-reset',
|
|
453
|
+
/** 缩放以适应 */
|
|
454
|
+
ZOOM_FIT = 'tmagic-system-zoom-fit',
|
|
455
|
+
/** 向上移动1px */
|
|
456
|
+
MOVE_UP_1 = 'tmagic-system-move-up-1',
|
|
457
|
+
/** 向下移动1px */
|
|
458
|
+
MOVE_DOWN_1 = 'tmagic-system-move-down-1',
|
|
459
|
+
/** 向左移动1px */
|
|
460
|
+
MOVE_LEFT_1 = 'tmagic-system-move-left-1',
|
|
461
|
+
/** 向右移动1px */
|
|
462
|
+
MOVE_RIGHT_1 = 'tmagic-system-move-right-1',
|
|
463
|
+
/** 向上移动10px */
|
|
464
|
+
MOVE_UP_10 = 'tmagic-system-move-up-10',
|
|
465
|
+
/** 向下移动10px */
|
|
466
|
+
MOVE_DOWN_10 = 'tmagic-system-move-down-10',
|
|
467
|
+
/** 向左移动10px */
|
|
468
|
+
MOVE_LEFT_10 = 'tmagic-system-move-left-10',
|
|
469
|
+
/** 向右移动10px */
|
|
470
|
+
MOVE_RIGHT_10 = 'tmagic-system-move-right-10',
|
|
471
|
+
/** 切换组件 */
|
|
472
|
+
SWITCH_NODE = 'tmagic-system-switch-node',
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
export interface KeyBindingItem {
|
|
476
|
+
command: KeyBindingCommand | string;
|
|
477
|
+
keybinding?: string | string[];
|
|
478
|
+
when: [string, 'keyup' | 'keydown'][];
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
export interface KeyBindingCacheItem {
|
|
482
|
+
type: string;
|
|
483
|
+
command: KeyBindingCommand | string;
|
|
484
|
+
keybinding?: string | string[];
|
|
485
|
+
eventType: 'keyup' | 'keydown';
|
|
486
|
+
binded: boolean;
|
|
487
|
+
}
|
package/src/utils/config.ts
CHANGED
|
@@ -24,6 +24,6 @@ const setConfig = (option: InstallOptions): void => {
|
|
|
24
24
|
$TMAGIC_EDITOR = option;
|
|
25
25
|
};
|
|
26
26
|
|
|
27
|
-
const getConfig = (key:
|
|
27
|
+
const getConfig = <K extends keyof InstallOptions>(key: K): InstallOptions[K] => $TMAGIC_EDITOR[key];
|
|
28
28
|
|
|
29
29
|
export { getConfig, setConfig };
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { KeyBindingCommand, KeyBindingItem } from '@editor/type';
|
|
2
|
+
|
|
3
|
+
export default [
|
|
4
|
+
{
|
|
5
|
+
command: KeyBindingCommand.DELETE_NODE,
|
|
6
|
+
keybinding: ['delete', 'backspace'],
|
|
7
|
+
when: [
|
|
8
|
+
['stage', 'keyup'],
|
|
9
|
+
['layer-panel', 'keydown'],
|
|
10
|
+
],
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
command: KeyBindingCommand.COPY_NODE,
|
|
14
|
+
keybinding: 'ctrl+c',
|
|
15
|
+
when: [
|
|
16
|
+
['stage', 'keydown'],
|
|
17
|
+
['layer-panel', 'keydown'],
|
|
18
|
+
],
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
command: KeyBindingCommand.PASTE_NODE,
|
|
22
|
+
keybinding: 'ctrl+v',
|
|
23
|
+
when: [
|
|
24
|
+
['stage', 'keydown'],
|
|
25
|
+
['layer-panel', 'keydown'],
|
|
26
|
+
],
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
command: KeyBindingCommand.CUT_NODE,
|
|
30
|
+
keybinding: 'ctrl+x',
|
|
31
|
+
when: [
|
|
32
|
+
['stage', 'keydown'],
|
|
33
|
+
['layer-panel', 'keydown'],
|
|
34
|
+
],
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
command: KeyBindingCommand.UNDO,
|
|
38
|
+
keybinding: 'ctrl+z',
|
|
39
|
+
when: [
|
|
40
|
+
['stage', 'keydown'],
|
|
41
|
+
['layer-panel', 'keydown'],
|
|
42
|
+
],
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
command: KeyBindingCommand.REDO,
|
|
46
|
+
keybinding: 'ctrl+shift+z',
|
|
47
|
+
when: [
|
|
48
|
+
['stage', 'keydown'],
|
|
49
|
+
['layer-panel', 'keydown'],
|
|
50
|
+
],
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
command: KeyBindingCommand.MOVE_UP_1,
|
|
54
|
+
keybinding: 'up',
|
|
55
|
+
when: [['stage', 'keydown']],
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
command: KeyBindingCommand.MOVE_DOWN_1,
|
|
59
|
+
keybinding: 'down',
|
|
60
|
+
when: [['stage', 'keydown']],
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
command: KeyBindingCommand.MOVE_LEFT_1,
|
|
64
|
+
keybinding: 'left',
|
|
65
|
+
when: [['stage', 'keydown']],
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
command: KeyBindingCommand.MOVE_RIGHT_1,
|
|
69
|
+
keybinding: 'right',
|
|
70
|
+
when: [['stage', 'keydown']],
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
command: KeyBindingCommand.MOVE_UP_10,
|
|
74
|
+
keybinding: 'ctrl+up',
|
|
75
|
+
when: [['stage', 'keydown']],
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
command: KeyBindingCommand.MOVE_DOWN_10,
|
|
79
|
+
keybinding: 'ctrl+down',
|
|
80
|
+
when: [['stage', 'keydown']],
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
command: KeyBindingCommand.MOVE_LEFT_10,
|
|
84
|
+
keybinding: 'ctrl+left',
|
|
85
|
+
when: [['stage', 'keydown']],
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
command: KeyBindingCommand.MOVE_RIGHT_10,
|
|
89
|
+
keybinding: 'ctrl+right',
|
|
90
|
+
when: [['stage', 'keydown']],
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
command: KeyBindingCommand.SWITCH_NODE,
|
|
94
|
+
keybinding: 'tab',
|
|
95
|
+
when: [
|
|
96
|
+
['stage', 'keydown'],
|
|
97
|
+
['layer-panel', 'keydown'],
|
|
98
|
+
],
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
command: KeyBindingCommand.ZOOM_IN,
|
|
102
|
+
keybinding: ['ctrl+=', 'ctrl+numpadplus'],
|
|
103
|
+
when: [['stage', 'keydown']],
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
command: KeyBindingCommand.ZOOM_OUT,
|
|
107
|
+
keybinding: ['ctrl+-', 'ctrl+numpad-'],
|
|
108
|
+
when: [['stage', 'keydown']],
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
command: KeyBindingCommand.ZOOM_FIT,
|
|
112
|
+
keybinding: 'ctrl+0',
|
|
113
|
+
when: [['stage', 'keydown']],
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
command: KeyBindingCommand.ZOOM_RESET,
|
|
117
|
+
keybinding: 'ctrl+1',
|
|
118
|
+
when: [['stage', 'keydown']],
|
|
119
|
+
},
|
|
120
|
+
] as KeyBindingItem[];
|
|
@@ -6,8 +6,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
6
6
|
menuData: () => never[];
|
|
7
7
|
isSubMenu: boolean;
|
|
8
8
|
}>, {
|
|
9
|
+
menu: import("vue").Ref<HTMLDivElement | undefined>;
|
|
9
10
|
hide: () => void;
|
|
10
11
|
show: (e: MouseEvent) => void;
|
|
12
|
+
contains: (el: HTMLElement) => any;
|
|
11
13
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show")[], "hide" | "show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
12
14
|
menuData?: (MenuButton | MenuComponent)[] | undefined;
|
|
13
15
|
isSubMenu?: boolean | undefined;
|
package/types/index.d.ts
CHANGED
|
@@ -28,8 +28,9 @@ export { default as PropsPanel } from './layouts/PropsPanel.vue';
|
|
|
28
28
|
export { default as ToolButton } from './components/ToolButton.vue';
|
|
29
29
|
export { default as ContentMenu } from './components/ContentMenu.vue';
|
|
30
30
|
export { default as Icon } from './components/Icon.vue';
|
|
31
|
-
export { default as LayoutContainer } from './components/
|
|
31
|
+
export { default as LayoutContainer } from './components/SplitView.vue';
|
|
32
|
+
export { default as SplitView } from './components/SplitView.vue';
|
|
32
33
|
declare const _default: {
|
|
33
|
-
install: (app: App, opt?: InstallOptions) => void;
|
|
34
|
+
install: (app: App, opt?: Partial<InstallOptions>) => void;
|
|
34
35
|
};
|
|
35
36
|
export default _default;
|
package/types/initService.d.ts
CHANGED
|
@@ -4,5 +4,5 @@ import type { Services } from './type';
|
|
|
4
4
|
export declare type LooseRequired<T> = {
|
|
5
5
|
[P in string & keyof T]: T[P];
|
|
6
6
|
};
|
|
7
|
-
export declare const initServiceState: (props: Readonly<LooseRequired<Readonly<ExtractPropTypes<typeof editorProps>>>>, { editorService, historyService, componentListService, propsService, eventsService, uiService, codeBlockService, }: Services) => void;
|
|
7
|
+
export declare const initServiceState: (props: Readonly<LooseRequired<Readonly<ExtractPropTypes<typeof editorProps>>>>, { editorService, historyService, componentListService, propsService, eventsService, uiService, codeBlockService, keybindingService, }: Services) => void;
|
|
8
8
|
export declare const initServiceEvents: (props: Readonly<LooseRequired<Readonly<ExtractPropTypes<typeof editorProps>>>>, emit: (event: 'props-panel-mounted' | 'update:modelValue', ...args: any[]) => void, { editorService, codeBlockService, dataSourceService, depService }: Services) => void;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { MenuButton, MenuComponent } from '../../type';
|
|
2
2
|
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
|
|
3
3
|
stageContentMenu: (MenuButton | MenuComponent)[];
|
|
4
4
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { KeyBindingItem } from '../type';
|
|
2
|
+
import BaseService from './BaseService';
|
|
3
|
+
declare class Keybinding extends BaseService {
|
|
4
|
+
ctrlKey: string;
|
|
5
|
+
private controllers;
|
|
6
|
+
private bindingList;
|
|
7
|
+
private commands;
|
|
8
|
+
registeCommand(command: string, handler: (e: KeyboardEvent) => void | Promise<void>): void;
|
|
9
|
+
unregisteCommand(command: string): void;
|
|
10
|
+
registeEl(name: string, el?: HTMLElement): void;
|
|
11
|
+
unregisteEl(name: string): void;
|
|
12
|
+
registe(maps: KeyBindingItem[]): void;
|
|
13
|
+
reset(): void;
|
|
14
|
+
destroy(): void;
|
|
15
|
+
private bind;
|
|
16
|
+
private getKeyconKeys;
|
|
17
|
+
}
|
|
18
|
+
export type KeybindingService = Keybinding;
|
|
19
|
+
declare const _default: Keybinding;
|
|
20
|
+
export default _default;
|
package/types/type.d.ts
CHANGED
|
@@ -5,11 +5,12 @@ import type StageCore from '@tmagic/stage';
|
|
|
5
5
|
import type { ContainerHighlightType, CustomizeMoveableOptionsCallbackConfig, MoveableOptions, UpdateDragEl } from '@tmagic/stage';
|
|
6
6
|
import type { CodeBlockService } from './services/codeBlock';
|
|
7
7
|
import type { ComponentListService } from './services/componentList';
|
|
8
|
-
import { DataSourceService } from './services/dataSource';
|
|
8
|
+
import type { DataSourceService } from './services/dataSource';
|
|
9
9
|
import type { DepService } from './services/dep';
|
|
10
10
|
import type { EditorService } from './services/editor';
|
|
11
11
|
import type { EventsService } from './services/events';
|
|
12
12
|
import type { HistoryService } from './services/history';
|
|
13
|
+
import type { KeybindingService } from './services/keybinding';
|
|
13
14
|
import type { PropsService } from './services/props';
|
|
14
15
|
import type { StorageService } from './services/storage';
|
|
15
16
|
import type { UiService } from './services/ui';
|
|
@@ -17,6 +18,7 @@ import type { UndoRedo } from './utils/undo-redo';
|
|
|
17
18
|
export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
|
|
18
19
|
export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
|
|
19
20
|
export interface InstallOptions {
|
|
21
|
+
parseDSL: (dsl: string) => MApp;
|
|
20
22
|
[key: string]: any;
|
|
21
23
|
}
|
|
22
24
|
export interface Services {
|
|
@@ -30,6 +32,7 @@ export interface Services {
|
|
|
30
32
|
codeBlockService: CodeBlockService;
|
|
31
33
|
depService: DepService;
|
|
32
34
|
dataSourceService: DataSourceService;
|
|
35
|
+
keybindingService: KeybindingService;
|
|
33
36
|
}
|
|
34
37
|
export interface StageOptions {
|
|
35
38
|
runtimeUrl: string;
|
|
@@ -344,3 +347,55 @@ export interface EventSelectConfig {
|
|
|
344
347
|
/** 联动代码配置 */
|
|
345
348
|
codeActionConfig?: FormItem;
|
|
346
349
|
}
|
|
350
|
+
export declare enum KeyBindingCommand {
|
|
351
|
+
/** 复制 */
|
|
352
|
+
COPY_NODE = "tmagic-system-copy-node",
|
|
353
|
+
/** 粘贴 */
|
|
354
|
+
PASTE_NODE = "tmagic-system-paste-node",
|
|
355
|
+
/** 删除 */
|
|
356
|
+
DELETE_NODE = "tmagic-system-delete-node",
|
|
357
|
+
/** 剪切 */
|
|
358
|
+
CUT_NODE = "tmagic-system-cut-node",
|
|
359
|
+
/** 撤销 */
|
|
360
|
+
UNDO = "tmagic-system-undo",
|
|
361
|
+
/** 重做 */
|
|
362
|
+
REDO = "tmagic-system-redo",
|
|
363
|
+
/** 放大 */
|
|
364
|
+
ZOOM_IN = "tmagic-system-zoom-in",
|
|
365
|
+
/** 缩小 */
|
|
366
|
+
ZOOM_OUT = "tmagic-system-zoom-out",
|
|
367
|
+
/** 缩放到实际大小 */
|
|
368
|
+
ZOOM_RESET = "tmagic-system-zoom-reset",
|
|
369
|
+
/** 缩放以适应 */
|
|
370
|
+
ZOOM_FIT = "tmagic-system-zoom-fit",
|
|
371
|
+
/** 向上移动1px */
|
|
372
|
+
MOVE_UP_1 = "tmagic-system-move-up-1",
|
|
373
|
+
/** 向下移动1px */
|
|
374
|
+
MOVE_DOWN_1 = "tmagic-system-move-down-1",
|
|
375
|
+
/** 向左移动1px */
|
|
376
|
+
MOVE_LEFT_1 = "tmagic-system-move-left-1",
|
|
377
|
+
/** 向右移动1px */
|
|
378
|
+
MOVE_RIGHT_1 = "tmagic-system-move-right-1",
|
|
379
|
+
/** 向上移动10px */
|
|
380
|
+
MOVE_UP_10 = "tmagic-system-move-up-10",
|
|
381
|
+
/** 向下移动10px */
|
|
382
|
+
MOVE_DOWN_10 = "tmagic-system-move-down-10",
|
|
383
|
+
/** 向左移动10px */
|
|
384
|
+
MOVE_LEFT_10 = "tmagic-system-move-left-10",
|
|
385
|
+
/** 向右移动10px */
|
|
386
|
+
MOVE_RIGHT_10 = "tmagic-system-move-right-10",
|
|
387
|
+
/** 切换组件 */
|
|
388
|
+
SWITCH_NODE = "tmagic-system-switch-node"
|
|
389
|
+
}
|
|
390
|
+
export interface KeyBindingItem {
|
|
391
|
+
command: KeyBindingCommand | string;
|
|
392
|
+
keybinding?: string | string[];
|
|
393
|
+
when: [string, 'keyup' | 'keydown'][];
|
|
394
|
+
}
|
|
395
|
+
export interface KeyBindingCacheItem {
|
|
396
|
+
type: string;
|
|
397
|
+
command: KeyBindingCommand | string;
|
|
398
|
+
keybinding?: string | string[];
|
|
399
|
+
eventType: 'keyup' | 'keydown';
|
|
400
|
+
binded: boolean;
|
|
401
|
+
}
|
package/types/utils/config.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { InstallOptions } from '../type';
|
|
2
2
|
declare const setConfig: (option: InstallOptions) => void;
|
|
3
|
-
declare const getConfig: (key:
|
|
3
|
+
declare const getConfig: <K extends keyof InstallOptions>(key: K) => InstallOptions[K];
|
|
4
4
|
export { getConfig, setConfig };
|
|
File without changes
|
|
File without changes
|