@node-projects/web-component-designer 0.1.53 → 0.1.55

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/DefaultServiceBootstrap.js

@@ -84,6 +84,7 @@ import { MultipleSelectionRectExtensionProvider } from '../widgets/designerView/
 import { DragDropService } from './dragDropService/DragDropService.js';
 import { EventsService } from './eventsService/EventsService.js';
 import { SimpleDemoProviderService } from './demoProviderService/SimpleDemoProviderService.js';
+import { DrawElementTool } from '../widgets/designerView/tools/DrawElementTool.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     let defaultPlacementService = new DefaultPlacementService();
@@ -175,6 +176,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerTools.set(NamedTools.MagicWandSelector, new MagicWandSelectorTool());
     serviceContainer.designerTools.set(NamedTools.PickColor, new PickColorTool());
     serviceContainer.designerTools.set(NamedTools.Text, new TextTool());
+    serviceContainer.designerTools.set(NamedTools.DrawElementTool, DrawElementTool);
     serviceContainer.designerPointerExtensions.push(
     //new CursorLinePointerExtensionProvider()
     );

package/dist/elements/services/ServiceContainer.d.ts

@@ -94,7 +94,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     readonly options: {
         zoomDesignerBackground: boolean;
     };
-    readonly designerTools: Map<string | NamedTools, ITool>;
+    readonly designerTools: Map<string | NamedTools, ITool | (new (IElementDefinition: any) => ITool)>;
     get bindingService(): IBindingService;
     get bindableObjectsServices(): IBindableObjectsService[];
     get bindableObjectDragDropService(): IBindableObjectDragDropService;

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/designerView/tools/NamedTools.d.ts

@@ -11,5 +11,5 @@ export declare enum NamedTools {
     RectangleSelector = "RectangleSelector",
     PickColor = "PickColor",
     Text = "Text",
-    TextBoc = "TextBoc"
+    DrawElementTool = "DrawElementTool"
 }

package/dist/elements/widgets/designerView/tools/NamedTools.js

@@ -12,5 +12,5 @@ export var NamedTools;
     NamedTools["RectangleSelector"] = "RectangleSelector";
     NamedTools["PickColor"] = "PickColor";
     NamedTools["Text"] = "Text";
-    NamedTools["TextBoc"] = "TextBoc";
+    NamedTools["DrawElementTool"] = "DrawElementTool";
 })(NamedTools || (NamedTools = {}));

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

@@ -1,6 +1,6 @@
 import { dragDropFormatNameElementDefinition } from '../../../Constants.js';
 import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
-import { DrawElementTool } from '../designerView/tools/DrawElementTool.js';
+import { NamedTools } from '../designerView/tools/NamedTools.js';
 export class PaletteElements extends BaseCustomWebComponentLazyAppend {
     static style = css `
     :host {
@@ -125,7 +125,10 @@ export class PaletteElements extends BaseCustomWebComponentLazyAppend {
                 e.preventDefault();
             };
             button.onclick = (x) => {
-                serviceContainer.globalContext.tool = new DrawElementTool(elementDefintion);
+                let tool = serviceContainer.designerTools.get(elementDefintion.tool ?? NamedTools.DrawElementTool);
+                if (typeof tool == 'function')
+                    tool = new tool(elementDefintion);
+                serviceContainer.globalContext.tool = tool;
             };
             tdEl.appendChild(button);
             tr.appendChild(tdEl);

package/package.json

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