@tmagic/editor 1.7.14-beta.1 → 1.7.14-beta.3

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.
Files changed (21) hide show
  1. package/dist/es/components/ToolButton.vue_vue_type_script_setup_true_lang.js +6 -2
  2. package/dist/es/layouts/CodeEditor.vue_vue_type_script_setup_true_lang.js +8 -8
  3. package/dist/es/layouts/NavMenu.vue_vue_type_script_setup_true_lang.js +11 -11
  4. package/dist/es/layouts/NavMenuColumn.js +5 -0
  5. package/dist/es/layouts/NavMenuColumn.vue_vue_type_script_setup_true_lang.js +201 -0
  6. package/dist/es/services/editor.js +88 -31
  7. package/dist/es/services/storage.js +5 -5
  8. package/dist/es/style.css +51 -0
  9. package/dist/es/utils/keybinding-config.js +19 -19
  10. package/dist/style.css +51 -0
  11. package/dist/tmagic-editor.umd.cjs +353 -93
  12. package/package.json +8 -8
  13. package/src/components/ToolButton.vue +7 -1
  14. package/src/layouts/CodeEditor.vue +18 -10
  15. package/src/layouts/NavMenu.vue +9 -4
  16. package/src/layouts/NavMenuColumn.vue +252 -0
  17. package/src/services/editor.ts +132 -40
  18. package/src/theme/nav-menu.scss +61 -0
  19. package/src/type.ts +42 -0
  20. package/src/utils/undo-redo.ts +2 -0
  21. package/types/index.d.ts +456 -437
package/dist/es/style.css CHANGED
@@ -477,6 +477,10 @@ fieldset.m-fieldset .m-form-tip {
477
477
  height: 100%;
478
478
  z-index: 1;
479
479
  align-items: center;
480
+ flex-wrap: nowrap;
481
+ overflow: hidden;
482
+ position: relative;
483
+ min-width: 0;
480
484
  }
481
485
  .m-editor-nav-menu .menu-center {
482
486
  justify-content: center;
@@ -484,8 +488,29 @@ fieldset.m-fieldset .m-form-tip {
484
488
  .m-editor-nav-menu .menu-right {
485
489
  justify-content: flex-end;
486
490
  }
491
+ .m-editor-nav-menu .m-editor-nav-menu-slot-hidden {
492
+ position: absolute;
493
+ left: -99999px;
494
+ top: 0;
495
+ visibility: hidden;
496
+ pointer-events: none;
497
+ }
498
+ .m-editor-nav-menu .m-editor-nav-menu-more-wrapper {
499
+ flex: 0 0 auto;
500
+ display: flex;
501
+ align-items: center;
502
+ height: 100%;
503
+ }
504
+ .m-editor-nav-menu .m-editor-nav-menu-more-wrapper.m-editor-nav-menu-more-wrapper-hidden {
505
+ visibility: hidden;
506
+ pointer-events: none;
507
+ }
508
+ .m-editor-nav-menu .m-editor-nav-menu-more {
509
+ flex: 0 0 auto;
510
+ }
487
511
  .m-editor-nav-menu .menu-item {
488
512
  flex-direction: row;
513
+ flex: 0 0 auto;
489
514
  -webkit-box-align: center;
490
515
  align-items: center;
491
516
  vertical-align: middle;
@@ -499,6 +524,7 @@ fieldset.m-fieldset .m-form-tip {
499
524
  transition: all 0.3s ease 0s;
500
525
  border-bottom: 2px solid transparent;
501
526
  margin: 0;
527
+ white-space: nowrap;
502
528
  }
503
529
  .m-editor-nav-menu .menu-item .is-disabled {
504
530
  opacity: 0.5;
@@ -518,6 +544,7 @@ fieldset.m-fieldset .m-form-tip {
518
544
  }
519
545
  .m-editor-nav-menu .menu-item .menu-item-text {
520
546
  color: #313a40;
547
+ white-space: nowrap;
521
548
  }
522
549
  .m-editor-nav-menu .menu-item.rule .el-icon {
523
550
  transform: rotate(-90deg);
@@ -527,6 +554,30 @@ fieldset.m-fieldset .m-form-tip {
527
554
  padding-right: 1px;
528
555
  }
529
556
 
557
+ .m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list {
558
+ display: flex;
559
+ flex-direction: column;
560
+ gap: 4px;
561
+ padding: 4px 0;
562
+ }
563
+ .m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list .menu-item {
564
+ display: flex;
565
+ align-items: center;
566
+ padding: 4px 8px;
567
+ cursor: pointer;
568
+ border-radius: 4px;
569
+ }
570
+ .m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list .menu-item:hover {
571
+ background-color: rgba(0, 0, 0, 0.05);
572
+ }
573
+ .m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list .menu-item.divider {
574
+ padding: 0;
575
+ cursor: default;
576
+ }
577
+ .m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list .menu-item.divider:hover {
578
+ background-color: transparent;
579
+ }
580
+
530
581
  .m-editor {
531
582
  display: flex;
532
583
  flex-direction: column;
package/dist/es/utils/keybinding-config.js CHANGED
@@ -9,97 +9,97 @@ var keybinding_config_default = [
9
9
  {
10
10
  command: KeyBindingCommand.DELETE_NODE,
11
11
  keybinding: ["delete", "backspace"],
12
- when: [[KeyBindingContainerKey.STAGE, "keyup"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
12
+ when: [["stage", "keyup"], ["layer-panel", "keydown"]]
13
13
  },
14
14
  {
15
15
  command: KeyBindingCommand.COPY_NODE,
16
16
  keybinding: "ctrl+c",
17
- when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
17
+ when: [["stage", "keydown"], ["layer-panel", "keydown"]]
18
18
  },
19
19
  {
20
20
  command: KeyBindingCommand.PASTE_NODE,
21
21
  keybinding: "ctrl+v",
22
- when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
22
+ when: [["stage", "keydown"], ["layer-panel", "keydown"]]
23
23
  },
24
24
  {
25
25
  command: KeyBindingCommand.CUT_NODE,
26
26
  keybinding: "ctrl+x",
27
- when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
27
+ when: [["stage", "keydown"], ["layer-panel", "keydown"]]
28
28
  },
29
29
  {
30
30
  command: KeyBindingCommand.UNDO,
31
31
  keybinding: "ctrl+z",
32
- when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
32
+ when: [["stage", "keydown"], ["layer-panel", "keydown"]]
33
33
  },
34
34
  {
35
35
  command: KeyBindingCommand.REDO,
36
36
  keybinding: "ctrl+shift+z",
37
- when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
37
+ when: [["stage", "keydown"], ["layer-panel", "keydown"]]
38
38
  },
39
39
  {
40
40
  command: KeyBindingCommand.MOVE_UP_1,
41
41
  keybinding: "up",
42
- when: [[KeyBindingContainerKey.STAGE, "keydown"]]
42
+ when: [["stage", "keydown"]]
43
43
  },
44
44
  {
45
45
  command: KeyBindingCommand.MOVE_DOWN_1,
46
46
  keybinding: "down",
47
- when: [[KeyBindingContainerKey.STAGE, "keydown"]]
47
+ when: [["stage", "keydown"]]
48
48
  },
49
49
  {
50
50
  command: KeyBindingCommand.MOVE_LEFT_1,
51
51
  keybinding: "left",
52
- when: [[KeyBindingContainerKey.STAGE, "keydown"]]
52
+ when: [["stage", "keydown"]]
53
53
  },
54
54
  {
55
55
  command: KeyBindingCommand.MOVE_RIGHT_1,
56
56
  keybinding: "right",
57
- when: [[KeyBindingContainerKey.STAGE, "keydown"]]
57
+ when: [["stage", "keydown"]]
58
58
  },
59
59
  {
60
60
  command: KeyBindingCommand.MOVE_UP_10,
61
61
  keybinding: "ctrl+up",
62
- when: [[KeyBindingContainerKey.STAGE, "keydown"]]
62
+ when: [["stage", "keydown"]]
63
63
  },
64
64
  {
65
65
  command: KeyBindingCommand.MOVE_DOWN_10,
66
66
  keybinding: "ctrl+down",
67
- when: [[KeyBindingContainerKey.STAGE, "keydown"]]
67
+ when: [["stage", "keydown"]]
68
68
  },
69
69
  {
70
70
  command: KeyBindingCommand.MOVE_LEFT_10,
71
71
  keybinding: "ctrl+left",
72
- when: [[KeyBindingContainerKey.STAGE, "keydown"]]
72
+ when: [["stage", "keydown"]]
73
73
  },
74
74
  {
75
75
  command: KeyBindingCommand.MOVE_RIGHT_10,
76
76
  keybinding: "ctrl+right",
77
- when: [[KeyBindingContainerKey.STAGE, "keydown"]]
77
+ when: [["stage", "keydown"]]
78
78
  },
79
79
  {
80
80
  command: KeyBindingCommand.SWITCH_NODE,
81
81
  keybinding: "tab",
82
- when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
82
+ when: [["stage", "keydown"], ["layer-panel", "keydown"]]
83
83
  },
84
84
  {
85
85
  command: KeyBindingCommand.ZOOM_IN,
86
86
  keybinding: ["ctrl+=", "ctrl+numpadplus"],
87
- when: [[KeyBindingContainerKey.STAGE, "keydown"]]
87
+ when: [["stage", "keydown"]]
88
88
  },
89
89
  {
90
90
  command: KeyBindingCommand.ZOOM_OUT,
91
91
  keybinding: ["ctrl+-", "ctrl+numpad-"],
92
- when: [[KeyBindingContainerKey.STAGE, "keydown"]]
92
+ when: [["stage", "keydown"]]
93
93
  },
94
94
  {
95
95
  command: KeyBindingCommand.ZOOM_FIT,
96
96
  keybinding: "ctrl+0",
97
- when: [[KeyBindingContainerKey.STAGE, "keydown"]]
97
+ when: [["stage", "keydown"]]
98
98
  },
99
99
  {
100
100
  command: KeyBindingCommand.ZOOM_RESET,
101
101
  keybinding: "ctrl+1",
102
- when: [[KeyBindingContainerKey.STAGE, "keydown"]]
102
+ when: [["stage", "keydown"]]
103
103
  }
104
104
  ];
105
105
  //#endregion
package/dist/style.css CHANGED
@@ -477,6 +477,10 @@ fieldset.m-fieldset .m-form-tip {
477
477
  height: 100%;
478
478
  z-index: 1;
479
479
  align-items: center;
480
+ flex-wrap: nowrap;
481
+ overflow: hidden;
482
+ position: relative;
483
+ min-width: 0;
480
484
  }
481
485
  .m-editor-nav-menu .menu-center {
482
486
  justify-content: center;
@@ -484,8 +488,29 @@ fieldset.m-fieldset .m-form-tip {
484
488
  .m-editor-nav-menu .menu-right {
485
489
  justify-content: flex-end;
486
490
  }
491
+ .m-editor-nav-menu .m-editor-nav-menu-slot-hidden {
492
+ position: absolute;
493
+ left: -99999px;
494
+ top: 0;
495
+ visibility: hidden;
496
+ pointer-events: none;
497
+ }
498
+ .m-editor-nav-menu .m-editor-nav-menu-more-wrapper {
499
+ flex: 0 0 auto;
500
+ display: flex;
501
+ align-items: center;
502
+ height: 100%;
503
+ }
504
+ .m-editor-nav-menu .m-editor-nav-menu-more-wrapper.m-editor-nav-menu-more-wrapper-hidden {
505
+ visibility: hidden;
506
+ pointer-events: none;
507
+ }
508
+ .m-editor-nav-menu .m-editor-nav-menu-more {
509
+ flex: 0 0 auto;
510
+ }
487
511
  .m-editor-nav-menu .menu-item {
488
512
  flex-direction: row;
513
+ flex: 0 0 auto;
489
514
  -webkit-box-align: center;
490
515
  align-items: center;
491
516
  vertical-align: middle;
@@ -499,6 +524,7 @@ fieldset.m-fieldset .m-form-tip {
499
524
  transition: all 0.3s ease 0s;
500
525
  border-bottom: 2px solid transparent;
501
526
  margin: 0;
527
+ white-space: nowrap;
502
528
  }
503
529
  .m-editor-nav-menu .menu-item .is-disabled {
504
530
  opacity: 0.5;
@@ -518,6 +544,7 @@ fieldset.m-fieldset .m-form-tip {
518
544
  }
519
545
  .m-editor-nav-menu .menu-item .menu-item-text {
520
546
  color: #313a40;
547
+ white-space: nowrap;
521
548
  }
522
549
  .m-editor-nav-menu .menu-item.rule .el-icon {
523
550
  transform: rotate(-90deg);
@@ -527,6 +554,30 @@ fieldset.m-fieldset .m-form-tip {
527
554
  padding-right: 1px;
528
555
  }
529
556
 
557
+ .m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list {
558
+ display: flex;
559
+ flex-direction: column;
560
+ gap: 4px;
561
+ padding: 4px 0;
562
+ }
563
+ .m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list .menu-item {
564
+ display: flex;
565
+ align-items: center;
566
+ padding: 4px 8px;
567
+ cursor: pointer;
568
+ border-radius: 4px;
569
+ }
570
+ .m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list .menu-item:hover {
571
+ background-color: rgba(0, 0, 0, 0.05);
572
+ }
573
+ .m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list .menu-item.divider {
574
+ padding: 0;
575
+ cursor: default;
576
+ }
577
+ .m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list .menu-item.divider:hover {
578
+ background-color: transparent;
579
+ }
580
+
530
581
  .m-editor {
531
582
  display: flex;
532
583
  flex-direction: column;