@node-projects/web-component-designer 0.1.0 → 0.1.2

package/dist/elements/controls/ThicknessEditor.d.ts

@@ -0,0 +1,33 @@
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export type ThicknessEditorValueChangedEventArgs = {
+    newValue?: string;
+    oldValue?: string;
+};
+export declare class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _leftInput;
+    private _topInput;
+    private _rightInput;
+    private _bottomInput;
+    private _valueLeft;
+    get valueLeft(): string;
+    set valueLeft(value: string);
+    valueLeftChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueTop;
+    get valueTop(): string;
+    set valueTop(value: string);
+    valueTopChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueRight;
+    get valueRight(): string;
+    set valueRight(value: string);
+    valueRightChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueBottom;
+    get valueBottom(): string;
+    set valueBottom(value: string);
+    valueBottomChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    property: string;
+    unsetValue: string;
+    _updateValue(): void;
+    ready(): void;
+}

package/dist/elements/controls/ThicknessEditor.js

@@ -0,0 +1,145 @@
+import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+  :host {
+    margin: 4px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  #container {
+    display: grid;
+    grid-template-columns: minmax(30px, 40px) minmax(30px, 60px) minmax(30px, 40px);
+    grid-template-rows: auto;
+    grid-template-areas: 
+          "  .   top     ."
+          "left middle right"
+          "  .  bottom   .";
+    column-gap: 2px;
+    row-gap: 2px;
+  }
+  input {
+    width: 20px;
+    text-align: center;
+    font-size: 10px;
+    height: 20px;
+    padding: 0;
+  }
+  #left {
+    grid-area: left;
+    justify-self: end;
+  }
+  #top {
+    grid-area: top;
+    align-self: end;
+    justify-self: center;
+  }
+  #right {
+    grid-area: right;
+    justify-self: start;
+  }
+  #bottom {
+    grid-area: bottom;
+    align-self: start;
+    justify-self: center;
+  }
+  #rect {
+    grid-area: middle;
+    border: 1px solid black;
+    background: lightgray;
+  }
+  `;
+    static template = html `
+    <div id="container">
+      <input id="left">
+      <input id="top">
+      <input id="right">
+      <input id="bottom">
+      <div id="rect"></div>
+    </div>
+  `;
+    _leftInput;
+    _topInput;
+    _rightInput;
+    _bottomInput;
+    _valueLeft;
+    get valueLeft() {
+        return this._valueLeft;
+    }
+    set valueLeft(value) {
+        const oldValue = this._valueLeft;
+        this._valueLeft = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueLeftChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueLeftChanged = new TypedEvent();
+    _valueTop;
+    get valueTop() {
+        return this._valueTop;
+    }
+    set valueTop(value) {
+        const oldValue = this._valueTop;
+        this._valueTop = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueTopChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueTopChanged = new TypedEvent();
+    _valueRight;
+    get valueRight() {
+        return this._valueRight;
+    }
+    set valueRight(value) {
+        const oldValue = this._valueRight;
+        this._valueRight = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueRightChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueRightChanged = new TypedEvent();
+    _valueBottom;
+    get valueBottom() {
+        return this._valueBottom;
+    }
+    set valueBottom(value) {
+        const oldValue = this._valueBottom;
+        this._valueBottom = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueBottomChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueBottomChanged = new TypedEvent();
+    property;
+    unsetValue;
+    _updateValue() {
+        this._leftInput.value = this.valueLeft;
+        this._topInput.value = this.valueTop;
+        this._rightInput.value = this.valueRight;
+        this._bottomInput.value = this._valueBottom;
+    }
+    ready() {
+        this._parseAttributesToProperties();
+        this._leftInput = this._getDomElement('left');
+        this._topInput = this._getDomElement('top');
+        this._rightInput = this._getDomElement('right');
+        this._bottomInput = this._getDomElement('bottom');
+        this._leftInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueLeft = this._leftInput.value; };
+        this._topInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueTop = this._topInput.value; };
+        this._rightInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueRight = this._rightInput.value; };
+        this._bottomInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueBottom = this._bottomInput.value; };
+        this._leftInput.onblur = (e) => this._valueLeft = this._leftInput.value;
+        this._topInput.onblur = (e) => this._valueTop = this._topInput.value;
+        this._rightInput.onblur = (e) => this._valueRight = this._rightInput.value;
+        this._bottomInput.onblur = (e) => this._valueBottom = this._bottomInput.value;
+        this._updateValue();
+    }
+}
+customElements.define('node-projects-thickness-editor', ThicknessEditor);

package/dist/elements/documentContainer.d.ts

@@ -0,0 +1,54 @@
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { DesignerView } from './widgets/designerView/designerView.js';
+import { ServiceContainer } from './services/ServiceContainer.js';
+import { InstanceServiceContainer } from './services/InstanceServiceContainer.js';
+import { ICodeView } from './widgets/codeView/ICodeView.js';
+import { IDemoView } from './widgets/demoView/IDemoView.js';
+import { IUiCommandHandler } from '../commandHandling/IUiCommandHandler.js';
+import { IUiCommand } from '../commandHandling/IUiCommand.js';
+import { IDisposable } from '../interfaces/IDisposable.js';
+import { ISelectionChangedEvent } from "./services/selectionService/ISelectionChangedEvent.js";
+import { IStylesheet } from "./services/stylesheetService/IStylesheetService.js";
+export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend implements IUiCommandHandler, IDisposable {
+    designerView: DesignerView;
+    codeView: ICodeView & HTMLElement;
+    demoView: IDemoView & HTMLElement;
+    additionalData: any;
+    private _firstLoad;
+    private _stylesheetChangedEventRegistered;
+    private _additionalStyle;
+    set additionalStyleString(style: string);
+    get additionalStyleString(): string;
+    private _additionalStylesheets;
+    set additionalStylesheets(stylesheets: IStylesheet[]);
+    get additionalStylesheets(): IStylesheet[];
+    additionalStylesheetChanged: TypedEvent<{
+        name: string;
+        newStyle: string;
+        oldStyle: string;
+        changeSource: 'extern' | 'styleupdate' | 'undo';
+    }>;
+    onContentChanged: TypedEvent<void>;
+    private _serviceContainer;
+    private _content;
+    private _tabControl;
+    private _selectionPosition;
+    private _splitDiv;
+    private _designerDiv;
+    private _codeDiv;
+    private refreshInSplitViewDebounced;
+    private _disableChangeNotificationDesigner;
+    private _disableChangeNotificationEditor;
+    static get style(): CSSStyleSheet;
+    constructor(serviceContainer: ServiceContainer, content?: string);
+    refreshInSplitView(): Promise<void>;
+    designerSelectionChanged(e: ISelectionChangedEvent): void;
+    designerContentChanged(): void;
+    dispose(): void;
+    executeCommand(command: IUiCommand): void;
+    canExecuteCommand(command: IUiCommand): boolean;
+    set content(value: string);
+    get content(): string;
+    ready(): void;
+    get instanceServiceContainer(): InstanceServiceContainer;
+}

package/dist/elements/documentContainer.js

@@ -0,0 +1,243 @@
+import { BaseCustomWebComponentLazyAppend, css, cssFromString, debounce, TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { DesignerTabControl } from './controls/DesignerTabControl.js';
+import { DesignerView } from './widgets/designerView/designerView.js';
+import { SimpleSplitView } from './controls/SimpleSplitView.js';
+export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
+    designerView;
+    codeView;
+    demoView;
+    additionalData;
+    _firstLoad = true;
+    _stylesheetChangedEventRegistered;
+    _additionalStyle;
+    set additionalStyleString(style) {
+        this._additionalStyle = style;
+        this.designerView.additionalStyles = [cssFromString(style)];
+    }
+    ;
+    get additionalStyleString() {
+        return this._additionalStyle;
+    }
+    ;
+    _additionalStylesheets;
+    set additionalStylesheets(stylesheets) {
+        this._additionalStylesheets = stylesheets;
+        if (this.designerView.instanceServiceContainer.stylesheetService)
+            this.designerView.instanceServiceContainer.stylesheetService.setStylesheets(stylesheets);
+        if (!this._stylesheetChangedEventRegistered) {
+            this._stylesheetChangedEventRegistered = true;
+            this.designerView.instanceServiceContainer.stylesheetService.stylesheetChanged.on(e => this.additionalStylesheetChanged.emit({ name: e.name, newStyle: e.newStyle, oldStyle: e.oldStyle, changeSource: e.changeSource }));
+        }
+    }
+    ;
+    get additionalStylesheets() {
+        return this._additionalStylesheets;
+    }
+    ;
+    additionalStylesheetChanged = new TypedEvent;
+    onContentChanged = new TypedEvent();
+    _serviceContainer;
+    _content = '';
+    _tabControl;
+    _selectionPosition;
+    _splitDiv;
+    _designerDiv;
+    _codeDiv;
+    refreshInSplitViewDebounced;
+    _disableChangeNotificationDesigner;
+    _disableChangeNotificationEditor;
+    static get style() {
+        return css `
+      div {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }                            
+      node-projects-designer-view {
+        height: 100%;
+        overflow: hidden;
+      }
+      `;
+    }
+    constructor(serviceContainer, content) {
+        super();
+        this.refreshInSplitViewDebounced = debounce(this.refreshInSplitView, 200);
+        this._serviceContainer = serviceContainer;
+        if (content != null)
+            this._content = content;
+        let div = document.createElement("div");
+        this._tabControl = new DesignerTabControl();
+        div.appendChild(this._tabControl);
+        this.designerView = new DesignerView();
+        this.designerView.setAttribute('exportparts', 'canvas');
+        this.designerView.slot = 'top';
+        this._designerDiv = document.createElement("div");
+        this._tabControl.appendChild(this._designerDiv);
+        this._designerDiv.title = 'Designer';
+        this._designerDiv.appendChild(this.designerView);
+        this.designerView.initialize(this._serviceContainer);
+        this.designerView.instanceServiceContainer.selectionService.onSelectionChanged.on(e => this.designerSelectionChanged(e));
+        this.designerView.designerCanvas.onContentChanged.on(() => this.designerContentChanged());
+        this.codeView = new serviceContainer.config.codeViewWidget();
+        this.codeView.slot = 'bottom';
+        this.codeView.style.position = 'relative';
+        this._codeDiv = document.createElement("div");
+        this._tabControl.appendChild(this._codeDiv);
+        this._codeDiv.title = 'Code';
+        this._codeDiv.style.position = 'relative';
+        this._codeDiv.appendChild(this.codeView);
+        this.codeView.onTextChanged.on(text => {
+            if (!this._disableChangeNotificationDesigner) {
+                this._disableChangeNotificationEditor = true;
+                if (this._tabControl.selectedIndex === 2) {
+                    this._content = text;
+                    this.refreshInSplitViewDebounced();
+                }
+            }
+        });
+        this._splitDiv = new SimpleSplitView();
+        this._splitDiv.style.height = '100%';
+        this._splitDiv.title = 'Split';
+        this._tabControl.appendChild(this._splitDiv);
+        this.demoView = new serviceContainer.config.demoViewWidget();
+        this.demoView.title = 'Preview';
+        this._tabControl.appendChild(this.demoView);
+        queueMicrotask(() => {
+            this.shadowRoot.appendChild(div);
+            this._tabControl.selectedIndex = 0;
+        });
+    }
+    async refreshInSplitView() {
+        await this.designerView.parseHTML(this._content);
+        this._disableChangeNotificationEditor = false;
+    }
+    designerSelectionChanged(e) {
+        if (this._tabControl.selectedIndex === 2) {
+            let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
+            if (primarySelection) {
+                this._content = this.designerView.getHTML();
+                if (this.designerView.instanceServiceContainer.designItemDocumentPositionService) {
+                    this._selectionPosition = this.designerView.instanceServiceContainer.designItemDocumentPositionService.getPosition(primarySelection);
+                    this.codeView.setSelection(this._selectionPosition);
+                    this._selectionPosition = null;
+                }
+            }
+        }
+    }
+    designerContentChanged() {
+        this.onContentChanged.emit();
+        if (!this._disableChangeNotificationEditor) {
+            this._disableChangeNotificationDesigner = true;
+            if (this._tabControl.selectedIndex === 2) {
+                let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
+                this._content = this.designerView.getHTML();
+                this.codeView.update(this._content);
+                if (primarySelection) {
+                    if (this.designerView.instanceServiceContainer.designItemDocumentPositionService) {
+                        this._selectionPosition = this.designerView.instanceServiceContainer.designItemDocumentPositionService.getPosition(primarySelection);
+                        if (this._selectionPosition)
+                            this.codeView.setSelection(this._selectionPosition);
+                        this._selectionPosition = null;
+                    }
+                }
+            }
+            this._disableChangeNotificationDesigner = false;
+        }
+    }
+    dispose() {
+        this.codeView.dispose();
+        this.demoView.dispose();
+    }
+    executeCommand(command) {
+        if (this._tabControl.selectedIndex === 0 || this._tabControl.selectedIndex === 2)
+            this.designerView.executeCommand(command);
+        else if (this._tabControl.selectedIndex === 1)
+            this.codeView.executeCommand(command);
+        else if (this._tabControl.selectedIndex === 3)
+            this.demoView.executeCommand(command);
+    }
+    canExecuteCommand(command) {
+        if (this._tabControl.selectedIndex === 0 || this._tabControl.selectedIndex === 2) {
+            if (this.designerView?.canExecuteCommand)
+                return this.designerView.canExecuteCommand(command);
+        }
+        else if (this._tabControl.selectedIndex === 1) {
+            if (this.codeView?.canExecuteCommand)
+                return this.codeView.canExecuteCommand(command);
+        }
+        else if (this._tabControl.selectedIndex === 3) {
+            if (this.demoView?.canExecuteCommand)
+                return this.demoView.canExecuteCommand(command);
+        }
+        return false;
+    }
+    set content(value) {
+        this._content = value;
+        if (this._tabControl) {
+            if (this._tabControl.selectedIndex === 0)
+                this.designerView.parseHTML(this._content, this._firstLoad);
+            else if (this._tabControl.selectedIndex === 1)
+                this.codeView.update(this._content);
+            else if (this._tabControl.selectedIndex === 2) {
+            }
+            else if (this._tabControl.selectedIndex === 3)
+                this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content, this.additionalStyleString);
+        }
+    }
+    get content() {
+        if (this._tabControl) {
+            if (this._tabControl.selectedIndex === 0)
+                this._content = this.designerView.getHTML();
+            else if (this._tabControl.selectedIndex === 1)
+                this._content = this.codeView.getText();
+            return this._content;
+        }
+        return null;
+    }
+    ready() {
+        this._tabControl.onSelectedTabChanged.on(i => {
+            if (i.oldIndex === 0) {
+                let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
+                this._content = this.designerView.getHTML();
+                if (this.designerView.instanceServiceContainer.designItemDocumentPositionService) {
+                    this._selectionPosition = this.designerView.instanceServiceContainer.designItemDocumentPositionService.getPosition(primarySelection);
+                }
+            }
+            else if (i.oldIndex === 1) {
+                this._content = this.codeView.getText();
+            }
+            else if (i.oldIndex === 2) {
+                this._designerDiv.appendChild(this.designerView);
+                this._codeDiv.appendChild(this.codeView);
+            }
+            if (i.newIndex === 0 || i.newIndex === 2)
+                this.designerView.parseHTML(this._content);
+            if (i.newIndex === 1 || i.newIndex === 2) {
+                this.codeView.update(this._content);
+                if (this._selectionPosition) {
+                    this.codeView.setSelection(this._selectionPosition);
+                    this._selectionPosition = null;
+                }
+                if (i.changedViaClick) {
+                    this.codeView.focusEditor();
+                }
+            }
+            if (i.newIndex === 2) {
+                this._splitDiv.appendChild(this.designerView);
+                this._splitDiv.appendChild(this.codeView);
+            }
+            if (i.newIndex === 3) {
+                this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content, this.additionalStyleString);
+            }
+        });
+        if (this._content) {
+            this.content = this._content;
+            this._firstLoad = false;
+        }
+    }
+    get instanceServiceContainer() {
+        return this.designerView.instanceServiceContainer;
+    }
+}
+//@ts-ignore
+customElements.define("node-projects-document-container", DocumentContainer);

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

@@ -0,0 +1,8 @@
+import { Orientation } from '../../enums/Orientation.js';
+import { IDesignItem } from '../item/IDesignItem.js';
+import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js';
+export declare abstract class ArrangeHelper {
+    static arrangeElements(orientation: Orientation, designerCanvas: IDesignerCanvas, arrangeElements: IDesignItem[]): void;
+    private static arrange;
+    private static formGroup;
+}

package/dist/elements/helper/ArrangeHelper.js

@@ -0,0 +1,105 @@
+import { Orientation } from '../../enums/Orientation.js';
+export class ArrangeHelper {
+    static arrangeElements(orientation, designerCanvas, arrangeElements) {
+        switch (orientation) {
+            case Orientation.TOP: {
+                const grp = this.formGroup(ArrangeDirection.TOP, designerCanvas);
+                const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
+                for (let elem of arrangeElements) {
+                    let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
+                    if (primaryCoordinates.y != selectedCoordinates.y) {
+                        let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
+                        let top = primaryCoordinates.y - parent.y;
+                        this.arrange(elem, 'top', top + "px");
+                    }
+                }
+                grp.commit();
+                break;
+            }
+            case Orientation.RIGHT: {
+                const grp = this.formGroup(ArrangeDirection.RIGHT, designerCanvas);
+                const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
+                for (let elem of arrangeElements) {
+                    let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
+                    if (primaryCoordinates.x != selectedCoordinates.x) {
+                        let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
+                        let right = primaryCoordinates.x - parent.x;
+                        this.arrange(elem, 'left', right + "px");
+                    }
+                }
+                grp.commit();
+                break;
+            }
+            case Orientation.BOTTOM:
+                const grp = this.formGroup(ArrangeDirection.BOTTOM, designerCanvas);
+                const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
+                for (let elem of arrangeElements) {
+                    let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
+                    if (primaryCoordinates.y != selectedCoordinates.y) {
+                        let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
+                        let bottom = primaryCoordinates.y - parent.y;
+                        this.arrange(elem, 'top', bottom + "px");
+                    }
+                }
+                grp.commit();
+                break;
+            case Orientation.LEFT: {
+                const grp = this.formGroup(ArrangeDirection.LEFT, designerCanvas);
+                const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
+                for (let elem of arrangeElements) {
+                    let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
+                    if (primaryCoordinates.x != selectedCoordinates.x) {
+                        let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
+                        let left = primaryCoordinates.x - parent.x;
+                        this.arrange(elem, 'left', left + "px");
+                    }
+                }
+                grp.commit();
+                break;
+            }
+            case Orientation.VERTICAL_CENTER: {
+                const grp = this.formGroup(ArrangeDirection.VERTICAL_CENTER, designerCanvas);
+                const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
+                for (let elem of arrangeElements) {
+                    let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
+                    if (primaryCoordinates.y != selectedCoordinates.y) {
+                        let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
+                        let center = primaryCoordinates.y - parent.y + (primaryCoordinates.height / 2) - (selectedCoordinates.height / 2);
+                        this.arrange(elem, 'top', center + "px");
+                    }
+                }
+                grp.commit();
+                break;
+            }
+            case Orientation.HORIZONTAL_CENTER: {
+                const grp = this.formGroup(ArrangeDirection.HORIZONTAL_CENTER, designerCanvas);
+                const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
+                for (let elem of arrangeElements) {
+                    let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
+                    if (primaryCoordinates.x != selectedCoordinates.x) {
+                        let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
+                        let center = primaryCoordinates.x - parent.x + (primaryCoordinates.width / 2) - (selectedCoordinates.width / 2);
+                        this.arrange(elem, 'left', center + "px");
+                    }
+                }
+                grp.commit();
+                break;
+            }
+        }
+    }
+    static arrange(element, attribut, value) {
+        element.setStyle(attribut, value);
+    }
+    static formGroup(name, designerCanvas) {
+        return designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup(name);
+    }
+}
+var ArrangeDirection;
+(function (ArrangeDirection) {
+    ArrangeDirection["TOP"] = "arrangeTop";
+    ArrangeDirection["RIGHT"] = "arrangeRight";
+    ArrangeDirection["BOTTOM"] = "arrangeBottom";
+    ArrangeDirection["LEFT"] = "arrangeLeft";
+    ArrangeDirection["HORIZONTAL_CENTER"] = "arrangeHorizontalCenter";
+    ArrangeDirection["VERTICAL_CENTER"] = "arrangeVerticalCenter";
+})(ArrangeDirection || (ArrangeDirection = {}));

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

@@ -0,0 +1,4 @@
+export declare function copyTextToClipboard(text: any): Promise<void>;
+export declare function copyToClipboard(items: [format: string, data: string][]): Promise<void>;
+export declare function getTextFromClipboard(): Promise<string>;
+export declare function getFromClipboard(): Promise<ClipboardItems>;

package/dist/elements/helper/ClipboardHelper.js

@@ -0,0 +1,90 @@
+export async function copyTextToClipboard(text) {
+    copyToClipboard([['text/plain', text]]);
+}
+//used, so you could copy internal if you have no clipboard access
+let internalClipboard = null;
+export async function copyToClipboard(items) {
+    if (navigator.clipboard) {
+        try {
+            let data = [];
+            for (let n of items) {
+                data.push(new ClipboardItem({ [n[0]]: new Blob([n[1]], { type: n[0] }) }));
+            }
+            await navigator.clipboard.write(data);
+        }
+        catch (err) {
+            await navigator.clipboard.writeText(items[0][1]);
+            internalClipboard = items[0][1];
+        }
+        console.info('Copy to clipboard successful');
+    }
+    else {
+        internalClipboard = items[0][1];
+        const textArea = document.createElement('textarea');
+        textArea.style.position = 'fixed';
+        textArea.style.top = '0';
+        textArea.style.left = '0';
+        textArea.style.width = '2em';
+        textArea.style.height = '2em';
+        textArea.style.padding = '0';
+        textArea.style.border = 'none';
+        textArea.style.outline = 'none';
+        textArea.style.boxShadow = 'none';
+        textArea.style.background = 'transparent';
+        textArea.value = items[0][1];
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+            document.execCommand('copy');
+        }
+        catch (err) {
+            try {
+                document.execCommand('copy');
+            }
+            catch (err) {
+                console.error(err);
+            }
+        }
+        document.body.removeChild(textArea);
+    }
+}
+export async function getTextFromClipboard() {
+    if (navigator.clipboard) {
+        return new Promise(async (resolve, reject) => {
+            const clipText = await navigator.clipboard.readText();
+            resolve(clipText);
+        });
+    }
+    else {
+        return new Promise(async (resolve, reject) => {
+            const textArea = document.createElement('textarea');
+            textArea.style.position = 'fixed';
+            textArea.style.top = '0';
+            textArea.style.left = '0';
+            textArea.style.width = '2em';
+            textArea.style.height = '2em';
+            textArea.style.padding = '0';
+            textArea.style.border = 'none';
+            textArea.style.outline = 'none';
+            textArea.style.boxShadow = 'none';
+            textArea.style.background = 'transparent';
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+            document.execCommand('paste');
+            let value = textArea.value;
+            if (!value)
+                value = internalClipboard;
+            document.body.removeChild(textArea);
+            resolve(value);
+        });
+    }
+}
+export async function getFromClipboard() {
+    if (navigator.clipboard) {
+        return await navigator.clipboard.read();
+    }
+    else {
+        return null;
+    }
+}