@node-projects/web-component-designer 0.1.54 → 0.1.56

package/dist/elements/documentContainer.js

@@ -131,7 +131,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
             if (this._tabControl.selectedIndex === 2) {
                 let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
                 this._content = this.designerView.getHTML();
-                this.codeView.update(this._content);
+                this.codeView.update(this._content, this.designerView.instanceServiceContainer);
                 if (primarySelection) {
                     if (this.designerView.instanceServiceContainer.designItemDocumentPositionService) {
                         this._selectionPosition = this.designerView.instanceServiceContainer.designItemDocumentPositionService.getPosition(primarySelection);
@@ -177,7 +177,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
             if (this._tabControl.selectedIndex === 0)
                 this.designerView.parseHTML(this._content, this._firstLoad);
             else if (this._tabControl.selectedIndex === 1)
-                this.codeView.update(this._content);
+                this.codeView.update(this._content, this.designerView.instanceServiceContainer);
             else if (this._tabControl.selectedIndex === 2) {
             }
             else if (this._tabControl.selectedIndex === 3)
@@ -213,7 +213,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
             if (i.newIndex === 0 || i.newIndex === 2)
                 this.designerView.parseHTML(this._content, this._firstLoad);
             if (i.newIndex === 1 || i.newIndex === 2) {
-                this.codeView.update(this._content);
+                this.codeView.update(this._content, this.designerView.instanceServiceContainer);
                 if (this._selectionPosition) {
                     this.codeView.setSelection(this._selectionPosition);
                     this._selectionPosition = null;

package/dist/elements/services/elementsService/IElementDefinition.d.ts

@@ -1,6 +1,14 @@
 import { IBinding } from '../../item/IBinding.js';
 export interface IElementDefinition {
     tag: string;
+    /**
+     * A path or a Object URL to an image
+     */
+    icon?: string;
+    /**
+     * A HTML String wich is used in the Palette
+     */
+    displayHtml?: string;
     name?: string;
     description?: string;
     import?: string;

package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService.js

@@ -54,6 +54,12 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
         }
     ];
     textareaProperties = [
+        {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        },
         {
             name: "placeholder",
             type: "string",

package/dist/elements/services/selectionService/ISelectionService.d.ts

@@ -5,6 +5,7 @@ export interface ISelectionService {
     primarySelection: IDesignItem;
     selectedElements: IDesignItem[];
     setSelectedElements(designItems: IDesignItem[]): void;
+    setSelectionByTextRange(positionStart: number, positionEnd: number): any;
     clearSelectedElements(): void;
     isSelected(designItem: IDesignItem): boolean;
     readonly onSelectionChanged: TypedEvent<ISelectionChangedEvent>;

package/dist/elements/services/selectionService/SelectionService.d.ts

@@ -10,6 +10,7 @@ export declare class SelectionService implements ISelectionService {
     _undoSelectionChanges: boolean;
     constructor(designerCanvas: IDesignerCanvas, undoSelectionChanges: boolean);
     setSelectedElements(designItems: IDesignItem[]): void;
+    setSelectionByTextRange(positionStart: number, positionEnd: number): void;
     _withoutUndoSetSelectedElements(designItems: IDesignItem[]): void;
     clearSelectedElements(): void;
     isSelected(designItem: IDesignItem): boolean;

package/dist/elements/services/selectionService/SelectionService.js

@@ -1,5 +1,21 @@
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { SelectionChangedAction } from '../undoService/transactionItems/SelectionChangedAction.js';
+function findDesignItem(designItem, position) {
+    let usedItem = null;
+    if (designItem.hasChildren) {
+        for (let d of designItem.children()) {
+            const nodePosition = designItem.instanceServiceContainer.designItemDocumentPositionService.getPosition(d);
+            if (nodePosition) {
+                if (nodePosition.start <= position)
+                    usedItem = d;
+            }
+        }
+    }
+    if (usedItem) {
+        return findDesignItem(usedItem, position);
+    }
+    return designItem;
+}
 export class SelectionService {
     primarySelection;
     selectedElements = [];
@@ -20,6 +36,10 @@ export class SelectionService {
             }
         }
     }
+    setSelectionByTextRange(positionStart, positionEnd) {
+        const item = findDesignItem(this._designerCanvas.rootDesignItem, positionStart);
+        this.setSelectedElements([item]);
+    }
     _withoutUndoSetSelectedElements(designItems) {
         let oldSelectedElements = this.selectedElements;
         if (!designItems) {

package/dist/elements/widgets/codeView/ICodeView.d.ts

@@ -1,9 +1,10 @@
 import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
 import { IDisposable } from '../../../interfaces/IDisposable.js';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
 import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 export interface ICodeView extends IUiCommandHandler, IDisposable, HTMLElement {
-    update(code: string): any;
+    update(code: string, instanceServiceContainer?: InstanceServiceContainer): any;
     getText(): any;
     setSelection(position: IStringPosition): any;
     focusEditor(): any;

package/dist/elements/widgets/paletteView/paletteElements.d.ts

@@ -6,5 +6,5 @@ export declare class PaletteElements extends BaseCustomWebComponentLazyAppend {
     static readonly template: HTMLTemplateElement;
     private _table;
     constructor();
-    loadElements(serviceContainer: ServiceContainer, elementDefintions: IElementDefinition[]): void;
+    loadElements(serviceContainer: ServiceContainer, elementDefintions: IElementDefinition[], relativeImagePath?: string): void;
 }

package/dist/elements/widgets/paletteView/paletteElements.js

@@ -50,14 +50,27 @@ export class PaletteElements extends BaseCustomWebComponentLazyAppend {
         super();
         this._table = this._getDomElement('table');
     }
-    loadElements(serviceContainer, elementDefintions) {
+    loadElements(serviceContainer, elementDefintions, relativeImagePath) {
         for (const elementDefintion of elementDefintions) {
-            let option = document.createElement("option");
-            option.value = elementDefintion.tag;
             const tr = document.createElement("tr");
             const tdEl = document.createElement("td");
             const button = document.createElement("button");
-            button.innerText = elementDefintion.name ? elementDefintion.name : elementDefintion.tag;
+            button.setAttribute("part", "button");
+            if (elementDefintion.icon && !elementDefintion.displayHtml) {
+                let icon = elementDefintion.icon;
+                if (!elementDefintion.icon.startsWith('data:')) {
+                    icon = relativeImagePath + elementDefintion.icon;
+                }
+                button.innerHTML =
+                    '<table><tr>' +
+                        '<td align="left" valign="middle" style="width:20px;"><img style="width:16px;height:16px" src="' + icon + '"></td>' +
+                        '<td align="left" >' + elementDefintion.tag + '</td>' +
+                        '</tr></table>\n';
+            }
+            else if (elementDefintion.displayHtml)
+                button.innerHTML = elementDefintion.displayHtml;
+            else
+                button.innerText = elementDefintion.name ? elementDefintion.name : elementDefintion.tag;
             button.draggable = true;
             button.ondragstart = (e) => {
                 e.dataTransfer.setData(dragDropFormatNameElementDefinition, JSON.stringify(elementDefintion));

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.54",
+  "version": "0.1.56",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",