@node-projects/web-component-designer 0.0.279 → 0.0.281

package/dist/commandHandling/CommandType.d.ts

@@ -9,6 +9,8 @@ export declare enum CommandType {
     'holdRedo' = "holdRedo",
     'rotateCounterClockwise' = "rotateCounterClockwise",
     'rotateClockwise' = "rotateClockwise",
+    'mirrorHorizontal' = "mirrorHorizontal",
+    'mirrorVertical' = "mirrorVertical",
     'selectAll' = "selectAll",
     'moveToFront' = "moveToFront",
     'moveForward' = "moveForward",

package/dist/commandHandling/CommandType.js

@@ -10,6 +10,8 @@ export var CommandType;
     CommandType["holdRedo"] = "holdRedo";
     CommandType["rotateCounterClockwise"] = "rotateCounterClockwise";
     CommandType["rotateClockwise"] = "rotateClockwise";
+    CommandType["mirrorHorizontal"] = "mirrorHorizontal";
+    CommandType["mirrorVertical"] = "mirrorVertical";
     CommandType["selectAll"] = "selectAll";
     CommandType["moveToFront"] = "moveToFront";
     CommandType["moveForward"] = "moveForward";

package/dist/elements/helper/TransformHelper.d.ts

@@ -2,7 +2,6 @@ import { IPoint } from "../../interfaces/IPoint.js";
 import { IDesignerCanvas } from "../widgets/designerView/IDesignerCanvas.js";
 export declare function getElementCombinedTransform(element: HTMLElement): DOMMatrix;
 export declare function combineTransforms(element: HTMLElement, actualTransforms: string, requestedTransformation: string): void;
-export declare function getDomMatrix(element: HTMLElement): DOMMatrix;
 export declare function transformPointByInverseMatrix(point: DOMPoint, matrix: DOMMatrix): DOMPoint;
 export declare function getRotationMatrix3d(axisOfRotation: 'x' | 'y' | 'z' | 'X' | 'Y' | 'Z', angle: number): any[];
 export declare function rotateElementByMatrix3d(element: HTMLElement, matrix: number[]): void;

package/dist/elements/helper/TransformHelper.js

@@ -33,9 +33,6 @@ export function combineTransforms(element, actualTransforms, requestedTransforma
     const newTransformationMatrix = requestedTransformationMatrix.multiply(actualTransformationMatrix);
     element.style.transform = newTransformationMatrix.toString();
 }
-export function getDomMatrix(element) {
-    return new DOMMatrix(window.getComputedStyle(element).transform);
-}
 export function transformPointByInverseMatrix(point, matrix) {
     const inverse = matrix.inverse();
     //fix chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1395645

package/dist/elements/services/modelCommandService/DefaultModelCommandService.js

@@ -17,6 +17,11 @@ export class DefaultModelCommandService {
             command.type == CommandType.unifyHeight ||
             command.type == CommandType.unifyWidth)
             return designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 1;
+        if (command.type == CommandType.rotateCounterClockwise ||
+            command.type == CommandType.rotateClockwise ||
+            command.type == CommandType.mirrorHorizontal ||
+            command.type == CommandType.mirrorVertical)
+            return designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 0;
         return null;
     }
     async executeCommand(designerCanvas, command) {
@@ -120,9 +125,24 @@ export class DefaultModelCommandService {
             }
             grp.commit();
         }
+        else if (command.type == CommandType.mirrorHorizontal) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('mirrorHorizontal');
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('transform', 'scaleX(-1)');
+            }
+            grp.commit();
+        }
+        else if (command.type == CommandType.mirrorVertical) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('mirrorHorizontal');
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('transform', 'scaleY(-1)');
+            }
+            grp.commit();
+        }
         else
             return null;
         designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(selection);
         return true;
     }
 }
+//TODO: combine transforms, could be easy, add new transform, get the matrix and convert back to simple ones (if possible)

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.d.ts

@@ -1,10 +1,14 @@
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { IBindableObject } from '../../services/bindableObjectsService/IBindableObject.js';
 import { ServiceContainer } from '../../services/ServiceContainer.js';
 export declare class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
     private _treeDiv;
     private _tree;
+    selectedObject: IBindableObject<any>;
+    objectDoubleclicked: TypedEvent<void>;
     static readonly style: CSSStyleSheet;
     constructor();
     initialize(serviceContainer: ServiceContainer): Promise<void>;
+    private deselectNodes;
     private lazyLoad;
 }

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.js

@@ -1,8 +1,10 @@
-import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, TypedEvent, css } from '@node-projects/base-custom-webcomponent';
 import { dragDropFormatNameBindingObject } from '../../../Constants.js';
 export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
     _treeDiv;
     _tree;
+    selectedObject;
+    objectDoubleclicked = new TypedEvent;
     static style = css `
       span.drag-source {
         border: 1px solid grey;
@@ -45,10 +47,31 @@ export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
         $(this._treeDiv).fancytree({
             debugLevel: 0,
             icon: false,
-            extensions: ['dnd5'],
+            extensions: ['dnd5', 'filter'],
             quicksearch: true,
             source: [],
             lazyLoad: this.lazyLoad,
+            dblclick: (e) => {
+                this.objectDoubleclicked.emit();
+                return true;
+            },
+            activate: (event, data) => {
+                this.deselectNodes();
+                let node = data.node;
+                this.selectedObject = node.data.bindable;
+            },
+            filter: {
+                autoApply: true,
+                autoExpand: false,
+                counter: true,
+                fuzzy: false,
+                hideExpandedCounter: true,
+                hideExpanders: false,
+                highlight: true,
+                leavesOnly: false,
+                nodata: true,
+                mode: "dimm" // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
+            },
             dnd5: {
                 dropMarkerParent: this.shadowRoot,
                 preventRecursion: true,
@@ -85,6 +108,13 @@ export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
             rootNode.addNode(newNode);
         }
     }
+    deselectNodes() {
+        let nodes = this._tree.getSelectedNodes();
+        nodes.forEach(node => {
+            node.setSelected(false);
+            node.setActive(false);
+        });
+    }
     lazyLoad(event, data) {
         data.result = new Promise(async (resolve) => {
             const service = data.node.data.service;

package/dist/elements/widgets/codeView/code-view-monaco.js

@@ -186,9 +186,11 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
             let model = this._monacoEditor.getModel();
             let point1 = model.getPositionAt(position.start);
             let point2 = model.getPositionAt(position.start + position.length);
-            this._monacoEditor.setSelection({ startLineNumber: point1.lineNumber, startColumn: point1.column, endLineNumber: point2.lineNumber, endColumn: point2.column });
-            //@ts-ignore
-            this._monacoEditor.revealRangeInCenterIfOutsideViewport(new monaco.Range(point1.lineNumber, point1.column, point2.lineNumber, point2.column), 1);
+            setTimeout(() => {
+                this._monacoEditor.setSelection({ startLineNumber: point1.lineNumber, startColumn: point1.column, endLineNumber: point2.lineNumber, endColumn: point2.column });
+                //@ts-ignore
+                this._monacoEditor.revealRangeInCenterIfOutsideViewport(new monaco.Range(point1.lineNumber, point1.column, point2.lineNumber, point2.column), 1);
+            }, 50);
         }
     }
 }

package/dist/elements/widgets/designerView/extensions/ResizeExtension.js

@@ -1,6 +1,6 @@
 import { EventNames } from '../../../../enums/EventNames.js';
 import { getContentBoxContentOffsets } from '../../../helper/ElementHelper.js';
-import { transformPointByInverseMatrix, getDomMatrix, getDesignerCanvasNormalizedTransformedCornerDOMPoints, normalizeToAbsolutePosition } from "../../../helper/TransformHelper.js";
+import { transformPointByInverseMatrix, getDesignerCanvasNormalizedTransformedCornerDOMPoints, normalizeToAbsolutePosition, getElementCombinedTransform } from "../../../helper/TransformHelper.js";
 import { AbstractExtension } from './AbstractExtension.js';
 export class ResizeExtension extends AbstractExtension {
     resizeAllSelected;
@@ -161,7 +161,7 @@ export class ResizeExtension extends AbstractExtension {
                     const diff = containerService.placePoint(event, this.designerCanvas, this.extendedItem.parent, this._initialPoint, { x: 0, y: 0 }, currentPoint, this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                     let trackX = Math.round(diff.x - this._initialPoint.x - this._offsetPoint.x);
                     let trackY = Math.round(diff.y - this._initialPoint.y - this._offsetPoint.y);
-                    let matrix = getDomMatrix(this.extendedItem.element);
+                    let matrix = getElementCombinedTransform(this.extendedItem.element);
                     let transformedTrack = transformPointByInverseMatrix(new DOMPoint(trackX, trackY, 0, 0), matrix);
                     let deltaX = transformedTrack.x;
                     let deltaY = transformedTrack.y;

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.279",
+  "version": "0.0.281",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",

package/_build/1_UpdatePackages.bat

@@ -1,3 +0,0 @@
-@echo off
-call npm install
-pause

package/_build/2_Compile.bat

@@ -1,13 +0,0 @@
-rem @echo off
-cd ..
-
-echo Run typescript convert...
-
-rmdir build /S /Q
-rmdir dist /S /Q
-node .\node_modules\typescript\bin\tsc
-mkdir build
-xcopy assets build /E
-call polymer build
-
-pause

package/_build/3_InstallTestComponents.bat

@@ -1,6 +0,0 @@
-@echo off
-cd ..
-call npm install --no-save @vanillawc/wc-marquee
-cd build
-xcopy /e ..\node_modules\@vanillawc\wc-marquee node_modules\@vanillawc\wc-marquee\
-pause

package/_build/RunPolymerWebserver.bat

@@ -1,3 +0,0 @@
-@echo off
-cd ..
-npx polymer serve --open