@node-projects/web-component-designer 0.0.215 → 0.0.217

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

@@ -1,11 +1,11 @@
-export declare class Screenshot {
-    private static _canvas;
-    private static _context;
-    private static _video;
-    private static _captureStream;
-    private static _disableStream;
-    static get screenshotsEnabled(): boolean;
-    static enableScreenshots(elementHostForVideo?: Element): Promise<void>;
-    static takeScreenshot(element: Element, width?: number, height?: number, elementHostForVideo?: Element): Promise<string>;
-    private static _sleep;
-}
+export declare class Screenshot {
+    private static _canvas;
+    private static _context;
+    private static _video;
+    private static _captureStream;
+    private static _disableStream;
+    static get screenshotsEnabled(): boolean;
+    static enableScreenshots(elementHostForVideo?: Element): Promise<void>;
+    static takeScreenshot(element: Element, width?: number, height?: number, elementHostForVideo?: Element): Promise<string>;
+    private static _sleep;
+}

package/dist/elements/helper/Screenshot.js

@@ -1,60 +1,60 @@
-// for screenshots to be genrated properly, you need to select the current tab only in media source selector
-export class Screenshot {
-    static _canvas;
-    static _context;
-    static _video;
-    static _captureStream;
-    static _disableStream() {
-        Screenshot._captureStream.getTracks().forEach(track => track.stop());
-        Screenshot._canvas = null;
-    }
-    static get screenshotsEnabled() {
-        return Screenshot._captureStream && Screenshot._captureStream.active;
-    }
-    static async enableScreenshots(elementHostForVideo = document.body) {
-        if (Screenshot._captureStream && !Screenshot._captureStream.active) {
-            Screenshot._disableStream();
-        }
-        if (Screenshot._canvas == null) {
-            Screenshot._canvas = document.createElement("canvas");
-            Screenshot._context = Screenshot._canvas.getContext("2d");
-            Screenshot._video = document.createElement("video");
-            const gdmOptions = {
-                video: {
-                    cursor: "never",
-                    displaySurface: 'browser'
-                },
-                audio: false
-            };
-            Screenshot._video.style.display = "none";
-            elementHostForVideo.appendChild(Screenshot._video);
-            //@ts-ignore
-            Screenshot._captureStream = await navigator.mediaDevices.getDisplayMedia(gdmOptions);
-            //@ts-ignore
-            const captureType = Screenshot._captureStream.getVideoTracks()[0].getSettings().displaySurface;
-            if (captureType != 'browser') {
-                Screenshot._disableStream();
-                alert('You need to share the current Tab, for the screenshot API to work');
-                throw 'You need to share the current Tab, for the screenshot API to work';
-            }
-            Screenshot._video.srcObject = Screenshot._captureStream;
-            Screenshot._video.play();
-            await Screenshot._sleep(150);
-        }
-    }
-    static async takeScreenshot(element, width = 100, height = 100, elementHostForVideo = document.body) {
-        await Screenshot.enableScreenshots(elementHostForVideo);
-        const rect = element.getBoundingClientRect();
-        Screenshot._canvas.width = width;
-        Screenshot._canvas.height = height;
-        Screenshot._context.drawImage(Screenshot._video, rect.left, rect.top, rect.width, rect.height, 0, 0, width, height);
-        const frame = Screenshot._canvas.toDataURL("image/png");
-        return frame;
-    }
-    static _sleep(timeout) {
-        let resolve = null;
-        const promise = new Promise(r => resolve = r);
-        window.setTimeout(resolve, timeout);
-        return promise;
-    }
-}
+// for screenshots to be genrated properly, you need to select the current tab only in media source selector
+export class Screenshot {
+    static _canvas;
+    static _context;
+    static _video;
+    static _captureStream;
+    static _disableStream() {
+        Screenshot._captureStream.getTracks().forEach(track => track.stop());
+        Screenshot._canvas = null;
+    }
+    static get screenshotsEnabled() {
+        return Screenshot._captureStream && Screenshot._captureStream.active;
+    }
+    static async enableScreenshots(elementHostForVideo = document.body) {
+        if (Screenshot._captureStream && !Screenshot._captureStream.active) {
+            Screenshot._disableStream();
+        }
+        if (Screenshot._canvas == null) {
+            Screenshot._canvas = document.createElement("canvas");
+            Screenshot._context = Screenshot._canvas.getContext("2d");
+            Screenshot._video = document.createElement("video");
+            const gdmOptions = {
+                video: {
+                    cursor: "never",
+                    displaySurface: 'browser'
+                },
+                audio: false
+            };
+            Screenshot._video.style.display = "none";
+            elementHostForVideo.appendChild(Screenshot._video);
+            //@ts-ignore
+            Screenshot._captureStream = await navigator.mediaDevices.getDisplayMedia(gdmOptions);
+            //@ts-ignore
+            const captureType = Screenshot._captureStream.getVideoTracks()[0].getSettings().displaySurface;
+            if (captureType != 'browser') {
+                Screenshot._disableStream();
+                alert('You need to share the current Tab, for the screenshot API to work');
+                throw 'You need to share the current Tab, for the screenshot API to work';
+            }
+            Screenshot._video.srcObject = Screenshot._captureStream;
+            Screenshot._video.play();
+            await Screenshot._sleep(150);
+        }
+    }
+    static async takeScreenshot(element, width = 100, height = 100, elementHostForVideo = document.body) {
+        await Screenshot.enableScreenshots(elementHostForVideo);
+        const rect = element.getBoundingClientRect();
+        Screenshot._canvas.width = width;
+        Screenshot._canvas.height = height;
+        Screenshot._context.drawImage(Screenshot._video, rect.left, rect.top, rect.width, rect.height, 0, 0, width, height);
+        const frame = Screenshot._canvas.toDataURL("image/png");
+        return frame;
+    }
+    static _sleep(timeout) {
+        let resolve = null;
+        const promise = new Promise(r => resolve = r);
+        window.setTimeout(resolve, timeout);
+        return promise;
+    }
+}

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

@@ -1,13 +1,13 @@
-import { ITextWriter } from './ITextWriter.js';
-export declare class SimpleTextWriter implements ITextWriter {
-    private _textHolder;
-    get position(): number;
-    isLastCharNewline(): boolean;
-    levelRaise(): void;
-    levelShrink(): void;
-    write(text: string): void;
-    writeLine(text: string): void;
-    writeIndent(): void;
-    writeNewline(): void;
-    getString(): string;
-}
+import { ITextWriter } from './ITextWriter.js';
+export declare class SimpleTextWriter implements ITextWriter {
+    private _textHolder;
+    get position(): number;
+    isLastCharNewline(): boolean;
+    levelRaise(): void;
+    levelShrink(): void;
+    write(text: string): void;
+    writeLine(text: string): void;
+    writeIndent(): void;
+    writeNewline(): void;
+    getString(): string;
+}

package/dist/elements/helper/SimpleTextWriter.js

@@ -1,26 +1,26 @@
-export class SimpleTextWriter {
-    _textHolder = '';
-    get position() {
-        return this._textHolder.length;
-    }
-    isLastCharNewline() {
-        return this._textHolder[this._textHolder.length - 1] === '\n';
-    }
-    levelRaise() {
-    }
-    levelShrink() {
-    }
-    write(text) {
-        this._textHolder += text;
-    }
-    writeLine(text) {
-        this._textHolder += text;
-    }
-    writeIndent() {
-    }
-    writeNewline() {
-    }
-    getString() {
-        return this._textHolder;
-    }
-}
+export class SimpleTextWriter {
+    _textHolder = '';
+    get position() {
+        return this._textHolder.length;
+    }
+    isLastCharNewline() {
+        return this._textHolder[this._textHolder.length - 1] === '\n';
+    }
+    levelRaise() {
+    }
+    levelShrink() {
+    }
+    write(text) {
+        this._textHolder += text;
+    }
+    writeLine(text) {
+        this._textHolder += text;
+    }
+    writeIndent() {
+    }
+    writeNewline() {
+    }
+    getString() {
+        return this._textHolder;
+    }
+}

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

@@ -1 +1 @@
-export declare function isVisualSvgElement(element: SVGElement): boolean;
+export declare function isVisualSvgElement(element: SVGElement): boolean;

package/dist/elements/helper/SvgHelper.js

@@ -1,13 +1,13 @@
-export function isVisualSvgElement(element) {
-    let el = element;
-    while (el) {
-        if (el instanceof SVGSVGElement)
-            return true;
-        if (el instanceof SVGDefsElement)
-            return false;
-        if (el instanceof SVGMetadataElement)
-            return false;
-        el = el.parentElement;
-    }
-    return true;
-}
+export function isVisualSvgElement(element) {
+    let el = element;
+    while (el) {
+        if (el instanceof SVGSVGElement)
+            return true;
+        if (el instanceof SVGDefsElement)
+            return false;
+        if (el instanceof SVGMetadataElement)
+            return false;
+        el = el.parentElement;
+    }
+    return true;
+}

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

@@ -1,2 +1,2 @@
-import { IDesignItem } from '../item/IDesignItem.js';
-export declare function switchContainer(items: IDesignItem[], newContainer: IDesignItem, resizeNewContainer?: boolean, newContainerOffset?: number): void;
+import { IDesignItem } from '../item/IDesignItem.js';
+export declare function switchContainer(items: IDesignItem[], newContainer: IDesignItem, resizeNewContainer?: boolean, newContainerOffset?: number): void;

package/dist/elements/helper/SwitchContainerHelper.js

@@ -1,45 +1,45 @@
-export function switchContainer(items, newContainer, resizeNewContainer = false, newContainerOffset = 0) {
-    //todo...
-    //- switch to other containers? like grid, flexbox, ...
-    //- position non absolute, or absolute from bottom or right
-    const firstItem = items[0];
-    const grp = firstItem.openGroup('switchContainerHelper');
-    const designerCanvas = firstItem.instanceServiceContainer.designerCanvas;
-    let minX = Number.MAX_VALUE;
-    let minY = Number.MAX_VALUE;
-    let maxX = 0;
-    let maxY = 0;
-    for (let e of items) {
-        let rect = designerCanvas.getNormalizedElementCoordinates(e.element);
-        if (rect.x < minX)
-            minX = rect.x;
-        if (rect.y < minY)
-            minY = rect.y;
-        if (rect.x + rect.width > maxX)
-            maxX = rect.x + rect.width;
-        if (rect.y + rect.height > maxY)
-            maxY = rect.y + rect.height;
-    }
-    let rectNewContainer = designerCanvas.getNormalizedElementCoordinates(newContainer.element);
-    for (let e of items) {
-        let rect = designerCanvas.getNormalizedElementCoordinates(e.element);
-        e.remove();
-        if (resizeNewContainer) {
-            e.setStyle('left', (rect.x - minX + newContainerOffset).toString() + 'px');
-            e.setStyle('top', (rect.y - minY + newContainerOffset).toString() + 'px');
-        }
-        else {
-            e.setStyle('left', (rect.x - rectNewContainer.x).toString() + 'px');
-            e.setStyle('top', (rect.y - rectNewContainer.y).toString() + 'px');
-        }
-        newContainer.insertChild(e);
-    }
-    if (resizeNewContainer) {
-        newContainer.setStyle('position', 'absolute');
-        newContainer.setStyle('left', (minX - newContainerOffset).toString() + 'px');
-        newContainer.setStyle('top', (minY - newContainerOffset).toString() + 'px');
-        newContainer.setStyle('width', (maxX - minX + 2 * newContainerOffset).toString() + 'px');
-        newContainer.setStyle('height', (maxY - minY + 2 * newContainerOffset).toString() + 'px');
-    }
-    grp.commit();
-}
+export function switchContainer(items, newContainer, resizeNewContainer = false, newContainerOffset = 0) {
+    //todo...
+    //- switch to other containers? like grid, flexbox, ...
+    //- position non absolute, or absolute from bottom or right
+    const firstItem = items[0];
+    const grp = firstItem.openGroup('switchContainerHelper');
+    const designerCanvas = firstItem.instanceServiceContainer.designerCanvas;
+    let minX = Number.MAX_VALUE;
+    let minY = Number.MAX_VALUE;
+    let maxX = 0;
+    let maxY = 0;
+    for (let e of items) {
+        let rect = designerCanvas.getNormalizedElementCoordinates(e.element);
+        if (rect.x < minX)
+            minX = rect.x;
+        if (rect.y < minY)
+            minY = rect.y;
+        if (rect.x + rect.width > maxX)
+            maxX = rect.x + rect.width;
+        if (rect.y + rect.height > maxY)
+            maxY = rect.y + rect.height;
+    }
+    let rectNewContainer = designerCanvas.getNormalizedElementCoordinates(newContainer.element);
+    for (let e of items) {
+        let rect = designerCanvas.getNormalizedElementCoordinates(e.element);
+        e.remove();
+        if (resizeNewContainer) {
+            e.setStyle('left', (rect.x - minX + newContainerOffset).toString() + 'px');
+            e.setStyle('top', (rect.y - minY + newContainerOffset).toString() + 'px');
+        }
+        else {
+            e.setStyle('left', (rect.x - rectNewContainer.x).toString() + 'px');
+            e.setStyle('top', (rect.y - rectNewContainer.y).toString() + 'px');
+        }
+        newContainer.insertChild(e);
+    }
+    if (resizeNewContainer) {
+        newContainer.setStyle('position', 'absolute');
+        newContainer.setStyle('left', (minX - newContainerOffset).toString() + 'px');
+        newContainer.setStyle('top', (minY - newContainerOffset).toString() + 'px');
+        newContainer.setStyle('width', (maxX - minX + 2 * newContainerOffset).toString() + 'px');
+        newContainer.setStyle('height', (maxY - minY + 2 * newContainerOffset).toString() + 'px');
+    }
+    grp.commit();
+}

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

@@ -1,10 +1,10 @@
-/**
-  * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
-  *
-  * @param {String} text The text to be rendered.
-  * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
-  *
-  * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
-  */
-export declare function getTextWidth(text: string, font: string): number;
-export declare function getFont(el: Element): string;
+/**
+  * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
+  *
+  * @param {String} text The text to be rendered.
+  * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
+  *
+  * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
+  */
+export declare function getTextWidth(text: string, font: string): number;
+export declare function getFont(el: Element): string;

package/dist/elements/helper/TextHelper.js

@@ -1,23 +1,23 @@
-let canvas;
-/**
-  * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
-  *
-  * @param {String} text The text to be rendered.
-  * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
-  *
-  * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
-  */
-export function getTextWidth(text, font) {
-    if (!canvas)
-        canvas = document.createElement("canvas");
-    const context = canvas.getContext("2d");
-    context.font = font;
-    const metrics = context.measureText(text);
-    return metrics.width;
-}
-export function getFont(el) {
-    const fontWeight = getComputedStyle(el).fontWeight || 'normal';
-    const fontSize = getComputedStyle(el).fontSize || '16px';
-    const fontFamily = getComputedStyle(el).fontFamily || 'Times New Roman';
-    return `${fontWeight} ${fontSize} ${fontFamily}`;
-}
+let canvas;
+/**
+  * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
+  *
+  * @param {String} text The text to be rendered.
+  * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
+  *
+  * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
+  */
+export function getTextWidth(text, font) {
+    if (!canvas)
+        canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    context.font = font;
+    const metrics = context.measureText(text);
+    return metrics.width;
+}
+export function getFont(el) {
+    const fontWeight = getComputedStyle(el).fontWeight || 'normal';
+    const fontSize = getComputedStyle(el).fontSize || '16px';
+    const fontFamily = getComputedStyle(el).fontFamily || 'Times New Roman';
+    return `${fontWeight} ${fontSize} ${fontFamily}`;
+}

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

@@ -1,23 +1,23 @@
-import { IPoint } from "../../interfaces/IPoint.js";
-import { IDesignerCanvas } from "../widgets/designerView/IDesignerCanvas.js";
-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;
-export declare function matrixArrayToCssMatrix(matrixArray: number[]): string;
-export declare function cssMatrixToMatrixArray(cssMatrix: string): number[];
-export declare function getRotationAngleFromMatrix(matrixArray: number[], domMatrix: DOMMatrix): any;
-export declare function addVectors(vectorA: [number, number], vectorB: [number, number]): [number, number];
-export declare function getDesignerCanvasNormalizedTransformedOriginWithoutParentTransformation(element: HTMLElement, designerCanvas: IDesignerCanvas): DOMPoint;
-export declare function getResultingTransformationBetweenElementAndAllAncestors(element: HTMLElement, ancestor: HTMLElement, excludeAncestor?: boolean): DOMMatrix;
-export declare function getByParentsTransformedPointRelatedToCanvas(element: HTMLElement, point: DOMPoint, designerCanvas: IDesignerCanvas): IPoint;
-export declare function getDesignerCanvasNormalizedTransformedPoint(element: HTMLElement, point: IPoint, designerCanvas: IDesignerCanvas): IPoint;
-export declare function getElementSize(element: HTMLElement): {
-    width: number;
-    height: number;
-};
-export declare function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element: HTMLElement, untransformedCornerPointsOffset: IPoint | null, designerCanvas: IDesignerCanvas): [DOMPoint, DOMPoint, DOMPoint, DOMPoint];
-export declare function extractTranslationFromDOMMatrix(matrix: DOMMatrix): DOMPoint;
-export declare function extractRotationAngleFromDOMMatrix(matrix: DOMMatrix): number;
-export declare function normalizeToAbsolutePosition(element: HTMLElement, normalizeProperty: "left" | "top"): string;
+import { IPoint } from "../../interfaces/IPoint.js";
+import { IDesignerCanvas } from "../widgets/designerView/IDesignerCanvas.js";
+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;
+export declare function matrixArrayToCssMatrix(matrixArray: number[]): string;
+export declare function cssMatrixToMatrixArray(cssMatrix: string): number[];
+export declare function getRotationAngleFromMatrix(matrixArray: number[], domMatrix: DOMMatrix): any;
+export declare function addVectors(vectorA: [number, number], vectorB: [number, number]): [number, number];
+export declare function getDesignerCanvasNormalizedTransformedOriginWithoutParentTransformation(element: HTMLElement, designerCanvas: IDesignerCanvas): DOMPoint;
+export declare function getResultingTransformationBetweenElementAndAllAncestors(element: HTMLElement, ancestor: HTMLElement, excludeAncestor?: boolean): DOMMatrix;
+export declare function getByParentsTransformedPointRelatedToCanvas(element: HTMLElement, point: DOMPoint, designerCanvas: IDesignerCanvas): IPoint;
+export declare function getDesignerCanvasNormalizedTransformedPoint(element: HTMLElement, point: IPoint, designerCanvas: IDesignerCanvas): IPoint;
+export declare function getElementSize(element: HTMLElement): {
+    width: number;
+    height: number;
+};
+export declare function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element: HTMLElement, untransformedCornerPointsOffset: IPoint | null, designerCanvas: IDesignerCanvas): [DOMPoint, DOMPoint, DOMPoint, DOMPoint];
+export declare function extractTranslationFromDOMMatrix(matrix: DOMMatrix): DOMPoint;
+export declare function extractRotationAngleFromDOMMatrix(matrix: DOMMatrix): number;
+export declare function normalizeToAbsolutePosition(element: HTMLElement, normalizeProperty: "left" | "top"): string;