@node-projects/web-component-designer 0.0.73 → 0.0.74

package/dist/elements/services/placementService/SnaplinesProviderService.d.ts

@@ -1,6 +1,8 @@
 import { IRect } from '../../../interfaces/IRect.js';
 import type { IDesignItem } from '../../item/IDesignItem.js';
 import { ISnaplinesProviderService } from './ISnaplinesProviderService.js';
+export declare const provideSnaplinesWithDistance = "provideSnaplinesWithDistance";
+export declare const provideSnaplinesWithDistanceDistance = "provideSnaplinesWithDistanceDistance";
 export declare class SnaplinesProviderService implements ISnaplinesProviderService {
     provideSnaplines(containerItem: IDesignItem, ignoredItems: IDesignItem[]): {
         outerRect: DOMRect;

package/dist/elements/services/placementService/SnaplinesProviderService.js

@@ -1,10 +1,14 @@
 import { DomHelper } from '@node-projects/base-custom-webcomponent';
+export const provideSnaplinesWithDistance = 'provideSnaplinesWithDistance';
+export const provideSnaplinesWithDistanceDistance = 'provideSnaplinesWithDistanceDistance';
 export class SnaplinesProviderService {
     provideSnaplines(containerItem, ignoredItems) {
         {
             const canvas = containerItem.instanceServiceContainer.designerCanvas;
             const ignMap = new Map(ignoredItems.map(i => [i.element, i]));
             const outerRect = containerItem.element.getBoundingClientRect();
+            const provideWithDist = canvas.instanceServiceContainer.designContext.extensionOptions[provideSnaplinesWithDistance] !== false;
+            const provideWithDistDist = canvas.instanceServiceContainer.designContext.extensionOptions[provideSnaplinesWithDistanceDistance] ?? 5;
             const positionsH = [];
             const positionsMiddleH = [];
             const positionsV = [];
@@ -20,16 +24,22 @@ export class SnaplinesProviderService {
                     const pMidV = (p.y - outerRect.y + p.height / 2) / canvas.scaleFactor;
                     const pBottom = (p.y - outerRect.y + p.height) / canvas.scaleFactor;
                     const transformedP = { x: pLeft + outerRect.x, y: pTop + outerRect.y, width: p.width / canvas.scaleFactor, height: p.height / canvas.scaleFactor };
+                    if (provideWithDist)
+                        positionsH.push([pLeft - provideWithDistDist, transformedP]);
                     positionsH.push([pLeft, transformedP]);
                     positionsMiddleH.push([pMidH, transformedP]);
                     positionsH.push([pRight, transformedP]);
+                    if (provideWithDist)
+                        positionsH.push([pRight + provideWithDistDist, transformedP]);
                     positionsV.push([pTop, transformedP]);
                     positionsMiddleV.push([pMidV, transformedP]);
                     positionsV.push([pBottom, transformedP]);
                 }
             }
+            positionsH.push([0, { x: 0, y: 0, width: 0, height: 0 }]);
             positionsH.sort((a, b) => a[0] - b[0]);
             positionsMiddleH.sort((a, b) => a[0] - b[0]);
+            positionsV.push([0, { x: 0, y: 0, width: 0, height: 0 }]);
             positionsV.sort((a, b) => a[0] - b[0]);
             positionsMiddleV.sort((a, b) => a[0] - b[0]);
             return { outerRect, positionsH, positionsMiddleH, positionsV, positionsMiddleV };

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

@@ -29,9 +29,8 @@ export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
     `;
     constructor() {
         super();
-        let externalCss = document.createElement('style');
-        externalCss.innerHTML = '@import url("./node_modules/jquery.fancytree/dist/skin-win8/ui.fancytree.css");';
-        this.shadowRoot.appendChild(externalCss);
+        //@ts-ignore
+        import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this._treeDiv = document.createElement('div');
         this._treeDiv.style.height = '100%';
         this._treeDiv.style.overflow = 'auto';

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

@@ -12,16 +12,15 @@ export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
       display: block;
       height: 100%;
       width: 100%;
-    }
-    `;
+    }`;
     static template = html `
-<style>@import "./node_modules/codemirror/lib/codemirror.css";</style>
-<div  style="width: 100%; height: 100%;">
-<div id="textarea"></div>
-</div>
-`;
+    <div  style="width: 100%; height: 100%;">
+      <div id="textarea"></div>
+    </div>`;
     constructor() {
         super();
+        //@ts-ignore
+        import("codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this.style.display = 'block';
         this._editor = this._getDomElement('textarea');
     }

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

@@ -18,7 +18,6 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
     }
     `;
     static template = html `
-      <style>@import "./node_modules/monaco-editor/min/vs/editor/editor.main.css";</style>
       <div id="container" style="width: 100%; height: 100%; position: absolute;"></div>
   `;
     executeCommand(command) {
@@ -54,6 +53,9 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
         return false;
     }
     async ready() {
+        //@ts-ignore
+        const style = await import("monaco-editor/min/vs/editor/editor.main.css", { assert: { type: 'css' } });
+        this.shadowRoot.adoptedStyleSheets = [style.default, this.constructor.style];
         this._editor = this._getDomElement('container');
         //@ts-ignore
         require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' } });

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

@@ -55,9 +55,8 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
   </div>`;
     constructor() {
         super();
-        let externalCss = document.createElement('style');
-        externalCss.innerHTML = '@import url("./node_modules/jquery.fancytree/dist/skin-win8/ui.fancytree.css");';
-        this.shadowRoot.appendChild(externalCss);
+        //@ts-ignore
+        import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this._filter = this._getDomElement('input');
         this._filter.onkeyup = () => {
             let match = this._filter.value;

package/dist/elements/widgets/treeView/treeViewExtended.js

@@ -89,9 +89,8 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
   </div>`;
     constructor() {
         super();
-        let externalCss = document.createElement('style');
-        externalCss.innerHTML = '@import url("./node_modules/jquery.fancytree/dist/skin-win8/ui.fancytree.css");';
-        this.shadowRoot.appendChild(externalCss);
+        //@ts-ignore
+        import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this._filter = this._getDomElement('input');
         this._filter.onkeyup = () => {
             let match = this._filter.value;
@@ -100,11 +99,6 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
             });
         };
         this._treeDiv = this._getDomElement('treetable');
-        /*this._treeDiv = document.createElement('div');
-        this._treeDiv.style.height = 'calc(100% - 21px)'
-        this._treeDiv.style.overflow = 'auto';
-        this._treeDiv.setAttribute('id', 'tree');
-        this.shadowRoot.appendChild(this._treeDiv);*/
     }
     _showHideAtDesignTimeState(img, designItem) {
         if (designItem.hideAtDesignTime)

package/dist/index.d.ts

@@ -173,3 +173,4 @@ export type { IDisposable } from "./interfaces/IDisposable.js";
 export type { IPoint } from "./interfaces/IPoint.js";
 export type { IRect } from "./interfaces/IRect.js";
 export type { ISize } from "./interfaces/ISize.js";
+export type { ICommandHandler } from "./interfaces/ICommandHandler.js";

package/dist/interfaces/ICommandHandler.d.ts

@@ -0,0 +1,5 @@
+import { CommandType } from "../commandHandling/CommandType";
+export interface ICommandHandler {
+    executeCommand(type: CommandType, parameter: any): Promise<void>;
+    canExecuteCommand(type: CommandType, parameter: any): boolean;
+}

package/dist/interfaces/ICommandHandler.js

@@ -0,0 +1 @@
+export {};

package/package.json

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