@node-projects/web-component-designer 0.1.134 → 0.1.135
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/assets/icons/alignHorizontalCenter.svg +1 -0
- package/assets/icons/alignHorizontalLeft.svg +1 -0
- package/assets/icons/alignHorizontalRight.svg +1 -0
- package/assets/icons/alignVerticalBottom.svg +1 -0
- package/assets/icons/alignVerticalCenter.svg +1 -0
- package/assets/icons/alignVerticalTop.svg +1 -0
- package/assets/icons/copy.svg +1 -0
- package/assets/icons/cut.svg +1 -0
- package/assets/icons/delete.svg +1 -0
- package/assets/icons/file.svg +1 -0
- package/assets/icons/github.svg +3 -0
- package/assets/icons/horizontalDistribute.svg +1 -0
- package/assets/icons/moveFirst.svg +1 -0
- package/assets/icons/moveLeft.svg +1 -0
- package/assets/icons/paste.svg +1 -0
- package/assets/icons/redo.svg +1 -0
- package/assets/icons/rotateLeft.svg +1 -0
- package/assets/icons/rotateRight.svg +1 -0
- package/assets/icons/save.svg +1 -0
- package/assets/icons/screenshot.svg +1 -0
- package/assets/icons/undo.svg +1 -0
- package/assets/icons/verticalDistribute.svg +1 -0
- package/assets/icons/zoomIn.svg +1 -0
- package/assets/icons/zoomOut.svg +1 -0
- package/assets/icons//303/247.svg +1 -0
- package/dist/elements/helper/contextMenu/ContextMenu.js +9 -1
- package/dist/elements/services/DefaultServiceBootstrap.js +2 -1
- package/dist/elements/services/modelCommandService/DefaultModelCommandService.js +2 -2
- package/dist/elements/widgets/designerView/designerCanvas.d.ts +1 -1
- package/dist/elements/widgets/designerView/designerCanvas.js +24 -18
- package/dist/elements/widgets/designerView/extensions/contextMenu/AlignItemsContextMenu.d.ts +8 -0
- package/dist/elements/widgets/designerView/extensions/contextMenu/AlignItemsContextMenu.js +19 -0
- package/dist/elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js +4 -4
- package/dist/elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu copy.d.ts +8 -0
- package/dist/elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu copy.js +13 -0
- package/dist/elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js +2 -2
- package/dist/elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js +4 -4
- package/dist/elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-80v-200H240v-120h200v-160H120v-120h320v-200h80v200h320v120H520v160h200v120H520v200h-80Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M80-80v-800h80v800H80Zm160-200v-120h400v120H240Zm0-280v-120h640v120H240Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M800-80v-800h80v800h-80ZM320-280v-120h400v120H320ZM80-560v-120h640v120H80Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M80-80v-80h800v80H80Zm200-160v-640h120v640H280Zm280 0v-400h120v400H560Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120v-320H80v-80h200v-320h120v320h160v-200h120v200h200v80H680v200H560v-200H400v320H280Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-80v-640h120v640H280Zm280-240v-400h120v400H560ZM80-800v-80h800v80H80Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M760-120 480-400l-94 94q8 15 11 32t3 34q0 66-47 113T240-80q-66 0-113-47T80-240q0-66 47-113t113-47q17 0 34 3t32 11l94-94-94-94q-15 8-32 11t-34 3q-66 0-113-47T80-720q0-66 47-113t113-47q66 0 113 47t47 113q0 17-3 34t-11 32l494 494v40H760ZM600-520l-80-80 240-240h120v40L600-520ZM240-640q33 0 56.5-23.5T320-720q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720q0 33 23.5 56.5T240-640Zm240 180q8 0 14-6t6-14q0-8-6-14t-14-6q-8 0-14 6t-6 14q0 8 6 14t14 6ZM240-160q33 0 56.5-23.5T320-240q0-33-23.5-56.5T240-320q-33 0-56.5 23.5T160-240q0 33 23.5 56.5T240-160Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32">
|
|
2
|
+
<path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M80-80v-800h80v800H80Zm340-200v-400h120v400H420ZM800-80v-800h80v800h-80Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M240-240v-480h80v480h-80Zm440 0L440-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h167q11-35 43-57.5t70-22.5q40 0 71.5 22.5T594-840h166q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560h-80v120H280v-120h-80v560Zm280-560q17 0 28.5-11.5T520-800q0-17-11.5-28.5T480-840q-17 0-28.5 11.5T440-800q0 17 11.5 28.5T480-760Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M396-200q-97 0-166.5-63T160-420q0-94 69.5-157T396-640h252L544-744l56-56 200 200-200 200-56-56 104-104H396q-63 0-109.5 40T240-420q0 60 46.5 100T396-280h284v80H396Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-80q-50-5-96-24.5T256-156l56-58q29 21 61.5 34t66.5 18v82Zm80 0v-82q104-15 172-93.5T760-438q0-117-81.5-198.5T480-718h-8l64 64-56 56-160-160 160-160 56 58-62 62h6q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-438q0 137-91 238.5T520-80ZM198-214q-32-42-51.5-88T122-398h82q5 34 18 66.5t34 61.5l-58 56Zm-76-264q6-51 25-98t51-86l58 56q-21 29-34 61.5T204-478h-82Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M522-80v-82q34-5 66.5-18t61.5-34l56 58q-42 32-88 51.5T522-80Zm-80 0Q304-98 213-199.5T122-438q0-75 28.5-140.5t77-114q48.5-48.5 114-77T482-798h6l-62-62 56-58 160 160-160 160-56-56 64-64h-8q-117 0-198.5 81.5T202-438q0 104 68 182.5T442-162v82Zm322-134-58-56q21-29 34-61.5t18-66.5h82q-5 50-24.5 96T764-214Zm76-264h-82q-5-34-18-66.5T706-606l58-56q32 39 51 86t25 98Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M840-680v480q0 33-23.5 56.5T760-120H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h480l160 160Zm-80 34L646-760H200v560h560v-446ZM480-240q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35ZM240-560h360v-160H240v160Zm-40-86v446-560 114Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm80-80h480v-320H240v320Zm-80 80v-480 480Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-200v-80h284q63 0 109.5-40T720-420q0-60-46.5-100T564-560H312l104 104-56 56-200-200 200-200 56 56-104 104h252q97 0 166.5 63T800-420q0 94-69.5 157T564-200H280Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M80-80v-80h800v80H80Zm200-340v-120h400v120H280ZM80-800v-80h800v80H80Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Zm-40-60v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400ZM280-540v-80h200v80H280Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-80v-640h120v640H280Zm280-240v-400h120v400H560ZM80-800v-80h800v80H80Z"/></svg>
|
|
@@ -39,6 +39,8 @@ export class ContextMenu {
|
|
|
39
39
|
padding-right: 1.7em;
|
|
40
40
|
cursor: pointer;
|
|
41
41
|
white-space: nowrap;
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
42
44
|
}
|
|
43
45
|
|
|
44
46
|
.context_menu li:hover {
|
|
@@ -47,10 +49,16 @@ export class ContextMenu {
|
|
|
47
49
|
|
|
48
50
|
.context_menu li .context_menu_icon_span {
|
|
49
51
|
width: 28px;
|
|
50
|
-
display: inline-
|
|
52
|
+
display: inline-flex;
|
|
53
|
+
align-items: center;
|
|
54
|
+
justify-content: center;
|
|
51
55
|
border-right: 1px solid #aaa;
|
|
52
56
|
}
|
|
53
57
|
|
|
58
|
+
.context_menu li .context_menu_icon_span img {
|
|
59
|
+
height: 18px;
|
|
60
|
+
}
|
|
61
|
+
|
|
54
62
|
.context_menu li .context_menu_text {
|
|
55
63
|
padding-left: 2px;
|
|
56
64
|
vertical-align: middle;
|
|
@@ -93,6 +93,7 @@ import { GridChildToolbarExtensionProvider } from '../widgets/designerView/exten
|
|
|
93
93
|
import { ToolbarExtensionsDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.js';
|
|
94
94
|
import { PaddingExtensionProvider } from '../widgets/designerView/extensions/PaddingExtensionProvider.js';
|
|
95
95
|
import { GridChildResizeExtensionProvider } from '../widgets/designerView/extensions/grid/GridChildResizeExtensionProvider.js';
|
|
96
|
+
import { AlignItemsContextMenu } from '../widgets/designerView/extensions/contextMenu/AlignItemsContextMenu.js';
|
|
96
97
|
export function createDefaultServiceContainer() {
|
|
97
98
|
let serviceContainer = new ServiceContainer();
|
|
98
99
|
let defaultPlacementService = new DefaultPlacementService();
|
|
@@ -196,7 +197,7 @@ export function createDefaultServiceContainer() {
|
|
|
196
197
|
serviceContainer.designerContextMenuExtensions = [
|
|
197
198
|
new ChildContextMenu('edit', new CopyPasteContextMenu()),
|
|
198
199
|
new SeperatorContextMenu(),
|
|
199
|
-
new ChildContextMenu('modify', new RotateLeftAndRight(), new SeperatorContextMenu(), new ZMoveContextMenu()),
|
|
200
|
+
new ChildContextMenu('modify', new RotateLeftAndRight(), new SeperatorContextMenu(), new ZMoveContextMenu(), new SeperatorContextMenu(), new AlignItemsContextMenu()),
|
|
200
201
|
new SeperatorContextMenu(),
|
|
201
202
|
new ChildContextMenu('view', new JumpToElementContextMenu(), new ZoomToElementContextMenu()),
|
|
202
203
|
new SeperatorContextMenu(),
|
|
@@ -7,7 +7,7 @@ export class DefaultModelCommandService {
|
|
|
7
7
|
command.type == CommandType.moveForward ||
|
|
8
8
|
command.type == CommandType.moveToBack ||
|
|
9
9
|
command.type == CommandType.moveToFront)
|
|
10
|
-
return designerCanvas.instanceServiceContainer.selectionService.primarySelection != null;
|
|
10
|
+
return designerCanvas.instanceServiceContainer.selectionService.primarySelection != null && !designerCanvas.instanceServiceContainer.selectionService.primarySelection.isRootItem;
|
|
11
11
|
if (command.type == CommandType.arrangeBottom ||
|
|
12
12
|
command.type == CommandType.arrangeCenter ||
|
|
13
13
|
command.type == CommandType.arrangeLeft ||
|
|
@@ -21,7 +21,7 @@ export class DefaultModelCommandService {
|
|
|
21
21
|
command.type == CommandType.rotateClockwise ||
|
|
22
22
|
command.type == CommandType.mirrorHorizontal ||
|
|
23
23
|
command.type == CommandType.mirrorVertical)
|
|
24
|
-
return designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 0;
|
|
24
|
+
return designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 0 && !designerCanvas.instanceServiceContainer.selectionService.primarySelection.isRootItem;
|
|
25
25
|
return null;
|
|
26
26
|
}
|
|
27
27
|
async executeCommand(designerCanvas, command) {
|
|
@@ -76,11 +76,11 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
|
|
|
76
76
|
get additionalStyles(): CSSStyleSheet[];
|
|
77
77
|
private applyAllStyles;
|
|
78
78
|
ignoreEvent(event: Event): void;
|
|
79
|
+
canExecuteCommand(command: IUiCommand): boolean;
|
|
79
80
|
executeCommand(command: IUiCommand): Promise<void>;
|
|
80
81
|
disableBackgroud(): void;
|
|
81
82
|
enableBackground(): void;
|
|
82
83
|
zoomToFit(): void;
|
|
83
|
-
canExecuteCommand(command: IUiCommand): boolean;
|
|
84
84
|
handleSelectAll(): void;
|
|
85
85
|
handleCopyCommand(): Promise<void>;
|
|
86
86
|
handlePasteCommand(disableRestoreOfPositions: boolean): Promise<void>;
|
|
@@ -346,6 +346,30 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
|
346
346
|
this._ignoreEvent = event;
|
|
347
347
|
}
|
|
348
348
|
/* --- start IUiCommandHandler --- */
|
|
349
|
+
canExecuteCommand(command) {
|
|
350
|
+
const modelCommandService = this.serviceContainer.modelCommandService;
|
|
351
|
+
if (modelCommandService) {
|
|
352
|
+
let handeled = modelCommandService.canExecuteCommand(this, command);
|
|
353
|
+
if (handeled !== null)
|
|
354
|
+
return handeled;
|
|
355
|
+
}
|
|
356
|
+
if (command.type === CommandType.undo) {
|
|
357
|
+
return this.instanceServiceContainer.undoService.canUndo();
|
|
358
|
+
}
|
|
359
|
+
if (command.type === CommandType.redo) {
|
|
360
|
+
return this.instanceServiceContainer.undoService.canRedo();
|
|
361
|
+
}
|
|
362
|
+
if (command.type === CommandType.setTool) {
|
|
363
|
+
return this.serviceContainer.designerTools.has(command.parameter);
|
|
364
|
+
}
|
|
365
|
+
if (command.type === CommandType.paste) {
|
|
366
|
+
return true;
|
|
367
|
+
}
|
|
368
|
+
if (command.type === CommandType.copy || command.type === CommandType.cut || command.type === CommandType.delete) {
|
|
369
|
+
return this.instanceServiceContainer.selectionService.primarySelection != null && !this.instanceServiceContainer.selectionService.primarySelection.isRootItem;
|
|
370
|
+
}
|
|
371
|
+
return true;
|
|
372
|
+
}
|
|
349
373
|
async executeCommand(command) {
|
|
350
374
|
const modelCommandService = this.serviceContainer.modelCommandService;
|
|
351
375
|
if (modelCommandService) {
|
|
@@ -473,24 +497,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
|
473
497
|
this.zoomFactor = fak;
|
|
474
498
|
//this._zoomInput.value = Math.round(this.zoomFactor * 100) + '%';
|
|
475
499
|
}
|
|
476
|
-
canExecuteCommand(command) {
|
|
477
|
-
const modelCommandService = this.serviceContainer.modelCommandService;
|
|
478
|
-
if (modelCommandService) {
|
|
479
|
-
let handeled = modelCommandService.canExecuteCommand(this, command);
|
|
480
|
-
if (handeled !== null)
|
|
481
|
-
return handeled;
|
|
482
|
-
}
|
|
483
|
-
if (command.type === CommandType.undo) {
|
|
484
|
-
return this.instanceServiceContainer.undoService.canUndo();
|
|
485
|
-
}
|
|
486
|
-
if (command.type === CommandType.redo) {
|
|
487
|
-
return this.instanceServiceContainer.undoService.canRedo();
|
|
488
|
-
}
|
|
489
|
-
if (command.type === CommandType.setTool) {
|
|
490
|
-
return this.serviceContainer.designerTools.has(command.parameter);
|
|
491
|
-
}
|
|
492
|
-
return true;
|
|
493
|
-
}
|
|
494
500
|
/* --- end IUiCommandHandler --- */
|
|
495
501
|
handleSelectAll() {
|
|
496
502
|
const selection = Array.from(this.rootDesignItem.children(true));
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
|
|
2
|
+
import { IDesignItem } from '../../../../item/IDesignItem.js';
|
|
3
|
+
import { IDesignerCanvas } from '../../IDesignerCanvas.js';
|
|
4
|
+
import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
|
|
5
|
+
export declare class AlignItemsContextMenu implements IContextMenuExtension {
|
|
6
|
+
shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
|
|
7
|
+
provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
|
|
8
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { CommandType } from '../../../../../commandHandling/CommandType.js';
|
|
2
|
+
import { NodeType } from '../../../../item/NodeType.js';
|
|
3
|
+
export class AlignItemsContextMenu {
|
|
4
|
+
shouldProvideContextmenu(event, designerView, designItem, initiator) {
|
|
5
|
+
return !designItem?.isRootItem && designItem?.nodeType == NodeType.Element;
|
|
6
|
+
}
|
|
7
|
+
provideContextMenuItems(event, designerView, designItem) {
|
|
8
|
+
return [
|
|
9
|
+
{ title: 'align left', icon: `<img src="${new URL('../../../../../../assets/icons/alignHorizontalLeft.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.arrangeLeft }); } },
|
|
10
|
+
{ title: 'align center', icon: `<img src="${new URL('../../../../../../assets/icons/alignHorizontalCenter.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.arrangeCenter }); } },
|
|
11
|
+
{ title: 'align right', icon: `<img src="${new URL('../../../../../../assets/icons/alignHorizontalRight.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.arrangeRight }); } },
|
|
12
|
+
{ title: 'distribute horizontal', icon: `<img src="${new URL('../../../../../../assets/icons/horizontalDistribute.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.distributeHorizontal }); } },
|
|
13
|
+
{ title: 'align top', icon: `<img src="${new URL('../../../../../../assets/icons/alignVerticalTop.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.arrangeTop }); } },
|
|
14
|
+
{ title: 'align middle', icon: `<img src="${new URL('../../../../../../assets/icons/alignVerticalCenter.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.arrangeMiddle }); } },
|
|
15
|
+
{ title: 'align bottom', icon: `<img src="${new URL('../../../../../../assets/icons/alignVerticalBottom.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.arrangeBottom }); } },
|
|
16
|
+
{ title: 'distribute vertical', icon: `<img src="${new URL('../../../../../../assets/icons/verticalDistribute.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.distributeVertical }); } },
|
|
17
|
+
];
|
|
18
|
+
}
|
|
19
|
+
}
|
|
@@ -5,10 +5,10 @@ export class CopyPasteContextMenu {
|
|
|
5
5
|
}
|
|
6
6
|
provideContextMenuItems(event, designerView, designItem) {
|
|
7
7
|
return [
|
|
8
|
-
{ title: 'copy', action: () => { designerView.executeCommand({ type: CommandType.copy }); }, shortCut: 'Ctrl + C', disabled: designItem === null },
|
|
9
|
-
{ title: 'cut', action: () => { designerView.executeCommand({ type: CommandType.cut }); }, shortCut: 'Ctrl + X', disabled: designItem === null },
|
|
10
|
-
{ title: 'paste', action: () => { designerView.executeCommand({ type: CommandType.paste }); }, shortCut: 'Ctrl + V' },
|
|
11
|
-
{ title: 'delete', action: () => { designerView.executeCommand({ type: CommandType.delete }); }, shortCut: 'Del', disabled: designItem === null },
|
|
8
|
+
{ title: 'copy', icon: `<img src="${new URL('../../../../../../assets/icons/copy.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.copy }); }, shortCut: 'Ctrl + C', disabled: designItem === null },
|
|
9
|
+
{ title: 'cut', icon: `<img src="${new URL('../../../../../../assets/icons/cut.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.cut }); }, shortCut: 'Ctrl + X', disabled: designItem === null },
|
|
10
|
+
{ title: 'paste', icon: `<img src="${new URL('../../../../../../assets/icons/paste.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.paste }); }, shortCut: 'Ctrl + V' },
|
|
11
|
+
{ title: 'delete', icon: `<img src="${new URL('../../../../../../assets/icons/delete.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.delete }); }, shortCut: 'Del', disabled: designItem === null },
|
|
12
12
|
];
|
|
13
13
|
}
|
|
14
14
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
|
|
2
|
+
import { IDesignItem } from '../../../../item/IDesignItem.js';
|
|
3
|
+
import { IDesignerCanvas } from '../../IDesignerCanvas.js';
|
|
4
|
+
import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
|
|
5
|
+
export declare class RotateLeftAndRight implements IContextMenuExtension {
|
|
6
|
+
shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
|
|
7
|
+
provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
|
|
8
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { CommandType } from '../../../../../commandHandling/CommandType.js';
|
|
2
|
+
import { NodeType } from '../../../../item/NodeType.js';
|
|
3
|
+
export class RotateLeftAndRight {
|
|
4
|
+
shouldProvideContextmenu(event, designerView, designItem, initiator) {
|
|
5
|
+
return !designItem?.isRootItem && designItem?.nodeType == NodeType.Element;
|
|
6
|
+
}
|
|
7
|
+
provideContextMenuItems(event, designerView, designItem) {
|
|
8
|
+
return [
|
|
9
|
+
{ title: 'rotate right', icon: `<img src="${new URL('../../../../../../assets/icons/rotateRight.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.rotateClockwise }); }, shortCut: 'Ctrl + R' },
|
|
10
|
+
{ title: 'rotate left', icon: `<img src="${new URL('../../../../../../assets/icons/rotateLeft.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.rotateCounterClockwise }); }, shortCut: 'Ctrl + Shift + R' }
|
|
11
|
+
];
|
|
12
|
+
}
|
|
13
|
+
}
|
package/dist/elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js
CHANGED
|
@@ -6,8 +6,8 @@ export class RotateLeftAndRight {
|
|
|
6
6
|
}
|
|
7
7
|
provideContextMenuItems(event, designerView, designItem) {
|
|
8
8
|
return [
|
|
9
|
-
{ title: 'rotate right', action: () => { designerView.executeCommand({ type: CommandType.rotateClockwise }); }, shortCut: 'Ctrl + R' },
|
|
10
|
-
{ title: 'rotate left', action: () => { designerView.executeCommand({ type: CommandType.rotateCounterClockwise }); }, shortCut: 'Ctrl + Shift + R' }
|
|
9
|
+
{ title: 'rotate right', icon: `<img src="${new URL('../../../../../../assets/icons/rotateRight.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.rotateClockwise }); }, shortCut: 'Ctrl + R' },
|
|
10
|
+
{ title: 'rotate left', icon: `<img src="${new URL('../../../../../../assets/icons/rotateLeft.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.rotateCounterClockwise }); }, shortCut: 'Ctrl + Shift + R' }
|
|
11
11
|
];
|
|
12
12
|
}
|
|
13
13
|
}
|
|
@@ -6,10 +6,10 @@ export class ZMoveContextMenu {
|
|
|
6
6
|
}
|
|
7
7
|
provideContextMenuItems(event, designerView, designItem) {
|
|
8
8
|
return [
|
|
9
|
-
{ title: 'to front', action: () => { designerView.executeCommand({ type: CommandType.moveToFront }); } },
|
|
10
|
-
{ title: 'move forward', action: () => { designerView.executeCommand({ type: CommandType.moveForward }); } },
|
|
11
|
-
{ title: 'move backward', action: () => { designerView.executeCommand({ type: CommandType.moveBackward }); } },
|
|
12
|
-
{ title: 'to back', action: () => { designerView.executeCommand({ type: CommandType.moveToBack }); } },
|
|
9
|
+
{ title: 'to front', icon: `<img style="rotate: 90deg" src="${new URL('../../../../../../assets/icons/moveFirst.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.moveToFront }); } },
|
|
10
|
+
{ title: 'move forward', icon: `<img style="rotate: 90deg" src="${new URL('../../../../../../assets/icons/moveLeft.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.moveForward }); } },
|
|
11
|
+
{ title: 'move backward', icon: `<img style="rotate: 270deg" src="${new URL('../../../../../../assets/icons/moveLeft.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.moveBackward }); } },
|
|
12
|
+
{ title: 'to back', icon: `<img style="rotate: 270deg" src="${new URL('../../../../../../assets/icons/moveFirst.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.moveToBack }); } },
|
|
13
13
|
];
|
|
14
14
|
}
|
|
15
15
|
}
|
package/dist/elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js
CHANGED
|
@@ -6,7 +6,7 @@ export class ZoomToElementContextMenu {
|
|
|
6
6
|
provideContextMenuItems(event, designerCanvas, designItem) {
|
|
7
7
|
return [
|
|
8
8
|
{
|
|
9
|
-
title: 'zoom to', action: () => {
|
|
9
|
+
title: 'zoom to', icon: `<img src="${new URL('../../../../../../assets/icons/zoomIn.svg', import.meta.url)}">`, action: () => {
|
|
10
10
|
const coord = designerCanvas.getNormalizedElementCoordinates(designItem.element);
|
|
11
11
|
const startPoint = { x: coord.x - offset, y: coord.y - offset };
|
|
12
12
|
const endPoint = { x: coord.x + coord.width + offset, y: coord.y + coord.height + offset };
|
package/package.json
CHANGED