add icons

Author: jogibear9988

ACKNOWLEDGMENTS

@@ -12,4 +12,6 @@
 - Domi for text-width code
   https://stackoverflow.com/a/21015393
 - gwwar for getClosestStackingContext
-  https://github.com/gwwar/z-context
+  https://github.com/gwwar/z-context
+- google icons
+  https://fonts.google.com/icons

packages/web-component-designer/assets/icons/alignHorizontalCenter.svg

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.134",
+  "version": "0.1.135",
   "type": "module",
   "main": "./dist/index.js",
   "author": "[email protected]",

packages/web-component-designer/assets/icons/alignHorizontalLeft.svg

@@ -50,6 +50,8 @@ export class ContextMenu implements IContextMenu {
 		padding-right: 1.7em;
 		cursor: pointer;
 		white-space: nowrap;
+		display: flex;
+		align-items: center;
 	  }
 	  
 	  .context_menu li:hover {
@@ -58,10 +60,16 @@ export class ContextMenu implements IContextMenu {
 	  
 	  .context_menu li .context_menu_icon_span {	
 		width: 28px;
-		display: inline-block;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
 		border-right: 1px solid #aaa;
 	  }
 
+	  .context_menu li .context_menu_icon_span img {	
+		height: 18px;
+	  }
+
 	  .context_menu li .context_menu_text {	
 		padding-left: 2px;
 		vertical-align: middle;

packages/web-component-designer/assets/icons/alignHorizontalRight.svg

@@ -94,6 +94,7 @@ import { GridChildToolbarExtensionProvider } from '../widgets/designerView/exten
 import { ToolbarExtensionsDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.js';
 import { PaddingExtensionProvider } from '../widgets/designerView/extensions/PaddingExtensionProvider.js';
 import { GridChildResizeExtensionProvider } from '../widgets/designerView/extensions/grid/GridChildResizeExtensionProvider.js';
+import { AlignItemsContextMenu } from '../widgets/designerView/extensions/contextMenu/AlignItemsContextMenu.js';
 
 export function createDefaultServiceContainer() {
   let serviceContainer = new ServiceContainer();
@@ -237,7 +238,7 @@ export function createDefaultServiceContainer() {
   serviceContainer.designerContextMenuExtensions = [
     new ChildContextMenu('edit', new CopyPasteContextMenu()),
     new SeperatorContextMenu(),
-    new ChildContextMenu('modify', new RotateLeftAndRight(), new SeperatorContextMenu(), new ZMoveContextMenu()),
+    new ChildContextMenu('modify', new RotateLeftAndRight(), new SeperatorContextMenu(), new ZMoveContextMenu(), new SeperatorContextMenu(), new AlignItemsContextMenu()),
     new SeperatorContextMenu(),
     new ChildContextMenu('view', new JumpToElementContextMenu(), new ZoomToElementContextMenu()),
     new SeperatorContextMenu(),

packages/web-component-designer/assets/icons/alignVerticalBottom.svg

@@ -12,7 +12,7 @@ export class DefaultModelCommandService implements IModelCommandService {
       command.type == CommandType.moveForward ||
       command.type == CommandType.moveToBack ||
       command.type == CommandType.moveToFront)
-      return designerCanvas.instanceServiceContainer.selectionService.primarySelection != null;
+      return designerCanvas.instanceServiceContainer.selectionService.primarySelection != null && !designerCanvas.instanceServiceContainer.selectionService.primarySelection.isRootItem;
     if (command.type == CommandType.arrangeBottom ||
       command.type == CommandType.arrangeCenter ||
       command.type == CommandType.arrangeLeft ||
@@ -26,7 +26,7 @@ export class DefaultModelCommandService implements IModelCommandService {
       command.type == CommandType.rotateClockwise ||
       command.type == CommandType.mirrorHorizontal ||
       command.type == CommandType.mirrorVertical)
-      return designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 0;
+      return designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 0 && !designerCanvas.instanceServiceContainer.selectionService.primarySelection.isRootItem;
     return null;
   }
 

packages/web-component-designer/assets/icons/alignVerticalCenter.svg

@@ -397,6 +397,34 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend implements
 
   /* --- start IUiCommandHandler --- */
 
+  canExecuteCommand(command: IUiCommand) {
+    const modelCommandService = this.serviceContainer.modelCommandService;
+    if (modelCommandService) {
+      let handeled = modelCommandService.canExecuteCommand(this, command)
+      if (handeled !== null)
+        return handeled;
+    }
+
+    if (command.type === CommandType.undo) {
+      return this.instanceServiceContainer.undoService.canUndo();
+    }
+    if (command.type === CommandType.redo) {
+      return this.instanceServiceContainer.undoService.canRedo();
+    }
+    if (command.type === CommandType.setTool) {
+      return this.serviceContainer.designerTools.has(command.parameter);
+    }
+
+    if (command.type === CommandType.paste) {
+      return true;
+    }
+    if (command.type === CommandType.copy || command.type === CommandType.cut || command.type === CommandType.delete) {
+      return this.instanceServiceContainer.selectionService.primarySelection != null && !this.instanceServiceContainer.selectionService.primarySelection.isRootItem;
+    }
+
+    return true;
+  }
+
   async executeCommand(command: IUiCommand) {
     const modelCommandService = this.serviceContainer.modelCommandService;
     if (modelCommandService) {
@@ -527,29 +555,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend implements
     //this._zoomInput.value = Math.round(this.zoomFactor * 100) + '%';
   }
 
-
-  canExecuteCommand(command: IUiCommand) {
-    const modelCommandService = this.serviceContainer.modelCommandService;
-    if (modelCommandService) {
-      let handeled = modelCommandService.canExecuteCommand(this, command)
-      if (handeled !== null)
-        return handeled;
-    }
-
-    if (command.type === CommandType.undo) {
-      return this.instanceServiceContainer.undoService.canUndo();
-    }
-    if (command.type === CommandType.redo) {
-      return this.instanceServiceContainer.undoService.canRedo();
-    }
-    if (command.type === CommandType.setTool) {
-      return this.serviceContainer.designerTools.has(command.parameter);
-    }
-
-
-    return true;
-  }
-
   /* --- end IUiCommandHandler --- */
 
   handleSelectAll() {

packages/web-component-designer/assets/icons/alignVerticalTop.svg

@@ -0,0 +1,26 @@
+import { CommandType } from '../../../../../commandHandling/CommandType.js';
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { NodeType } from '../../../../item/NodeType.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
+
+export class AlignItemsContextMenu implements IContextMenuExtension {
+
+  public shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) {
+    return !designItem?.isRootItem && designItem?.nodeType == NodeType.Element;
+  }
+
+  public provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] {
+    return [
+      { title: 'align left', icon: `<img src="${new URL('../../../../../../assets/icons/alignHorizontalLeft.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.arrangeLeft }); } },
+      { title: 'align center', icon: `<img src="${new URL('../../../../../../assets/icons/alignHorizontalCenter.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.arrangeCenter }); } },
+      { title: 'align right', icon: `<img src="${new URL('../../../../../../assets/icons/alignHorizontalRight.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.arrangeRight }); } },
+      { title: 'distribute horizontal', icon: `<img src="${new URL('../../../../../../assets/icons/horizontalDistribute.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.distributeHorizontal }); } },
+      { title: 'align top', icon: `<img src="${new URL('../../../../../../assets/icons/alignVerticalTop.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.arrangeTop }); } },
+      { title: 'align middle', icon: `<img src="${new URL('../../../../../../assets/icons/alignVerticalCenter.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.arrangeMiddle }); } },
+      { title: 'align bottom', icon: `<img src="${new URL('../../../../../../assets/icons/alignVerticalBottom.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.arrangeBottom }); } },
+      { title: 'distribute vertical', icon: `<img src="${new URL('../../../../../../assets/icons/verticalDistribute.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.distributeVertical }); } },
+    ]
+  }
+}

packages/web-component-designer/assets/icons/copy.svg

@@ -11,10 +11,10 @@ export class CopyPasteContextMenu implements IContextMenuExtension {
 
   public provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] {
     return [
-      { title: 'copy', action: () => { designerView.executeCommand({ type: CommandType.copy }); }, shortCut: 'Ctrl + C', disabled: designItem === null },
-      { title: 'cut', action: () => { designerView.executeCommand({ type: CommandType.cut }); }, shortCut: 'Ctrl + X', disabled: designItem === null },
-      { title: 'paste', action: () => { designerView.executeCommand({ type: CommandType.paste }); }, shortCut: 'Ctrl + V' },
-      { title: 'delete', action: () => { designerView.executeCommand({ type: CommandType.delete }); }, shortCut: 'Del', disabled: designItem === null },
+      { 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 },
+      { 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 },
+      { title: 'paste', icon: `<img src="${new URL('../../../../../../assets/icons/paste.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.paste }); }, shortCut: 'Ctrl + V' },
+      { 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 },
     ]
   }
 }