@node-projects/web-component-designer 0.1.334 → 0.1.335

package/dist/elements/widgets/miniatureView/miniatureView.js

@@ -0,0 +1,171 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
+export class MiniatureView extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+        :host {
+          overflow:hidden;
+          display: block;
+          width: 100%;
+          height: 100%;
+          position: relative;
+        }
+        #outerDiv {
+          width: 100%;
+          height: 100%;
+        }
+        #innerDiv {
+          transform-origin: top left;
+          height: 100%;
+          width: 100%;
+          image-rendering: pixelated;
+        }
+        #above {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: auto;
+          background: transparent;
+          cursor: pointer;
+        }
+        #viewRect {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          border: 1px solid black;
+          pointer-events: none;
+        }`;
+    static template = html `
+        <div id="outerDiv">
+          <div id="innerDiv"></div> 
+        </div>
+        <div id="above">
+          <div id="viewRect"></div>
+        </div>`;
+    _innerDiv;
+    _outerDiv;
+    _above;
+    _instanceServiceContainer;
+    _contentChangedHandler;
+    _maxX = 0;
+    _maxY = 0;
+    _resizeObserver;
+    _innerShadow;
+    _zoomFactorChangedHandler;
+    _viewRect;
+    _minatureScaleX = 1;
+    _minatureScaleY = 1;
+    _reRenderFlag = false;
+    _isDragging = false;
+    _boundMouseMove;
+    _boundMouseUp;
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+        this._outerDiv = this._getDomElement('outerDiv');
+        this._innerDiv = this._getDomElement('innerDiv');
+        this._viewRect = this._getDomElement('viewRect');
+        this._above = this._getDomElement('above');
+        this._innerShadow = this._innerDiv.attachShadow({ mode: 'open' });
+        this._boundMouseMove = this._onMouseMove.bind(this);
+        this._boundMouseUp = this._onMouseUp.bind(this);
+        this._above.addEventListener('mousedown', (e) => this._onMouseDown(e));
+        this._resizeObserver = new ResizeObserver(() => {
+            this._reSize();
+        });
+    }
+    ready() {
+        this._resizeObserver.observe(this);
+    }
+    _reSize() {
+        const outerRect = this._outerDiv.getBoundingClientRect();
+        this._minatureScaleX = outerRect.width / this._maxX;
+        this._minatureScaleY = outerRect.height / this._maxY;
+        this._innerDiv.style.scale = this._minatureScaleX + ' ' + this._minatureScaleY;
+    }
+    async _reRender() {
+        if (this._instanceServiceContainer) {
+            const designerCanvas = this._instanceServiceContainer?.designerCanvas;
+            this._innerShadow.adoptedStyleSheets = [...designerCanvas.rootDesignItem.element.shadowRoot.adoptedStyleSheets];
+            const pixelSize = designerCanvas.designerPixelSize;
+            this._maxX = pixelSize.width;
+            this._maxY = pixelSize.height;
+            const miniatureViewContent = await this._instanceServiceContainer.designerCanvas.serviceContainer.miniatureViewService.provideMiniatureView(designerCanvas);
+            this._innerShadow.replaceChildren(miniatureViewContent);
+            this._reSize();
+            this._reDrawRect();
+            this._reRenderFlag = false;
+        }
+    }
+    _reDrawRect() {
+        const designerCanvas = this._instanceServiceContainer?.designerCanvas;
+        const offset = designerCanvas.canvasOffset;
+        const zoom = designerCanvas.zoomFactor;
+        this._viewRect.style.left = (-offset.x / this._maxX * 100) + '%';
+        this._viewRect.style.top = (-offset.y / this._maxY * 100) + '%';
+        this._viewRect.style.width = (designerCanvas.clientWidth / zoom / this._maxX * 100) + '%';
+        this._viewRect.style.height = (designerCanvas.clientHeight / zoom / this._maxY * 100) + '%';
+    }
+    _onMouseDown(e) {
+        if (!this._instanceServiceContainer)
+            return;
+        this._isDragging = true;
+        this._moveCanvasToMousePosition(e);
+        window.addEventListener('mousemove', this._boundMouseMove);
+        window.addEventListener('mouseup', this._boundMouseUp);
+        e.preventDefault();
+    }
+    _onMouseMove(e) {
+        if (!this._isDragging)
+            return;
+        this._moveCanvasToMousePosition(e);
+        e.preventDefault();
+    }
+    _onMouseUp(e) {
+        this._isDragging = false;
+        window.removeEventListener('mousemove', this._boundMouseMove);
+        window.removeEventListener('mouseup', this._boundMouseUp);
+    }
+    _moveCanvasToMousePosition(e) {
+        const designerCanvas = this._instanceServiceContainer.designerCanvas;
+        const zoom = designerCanvas.zoomFactor;
+        const aboveRect = this._above.getBoundingClientRect();
+        const mouseX = e.clientX - aboveRect.left;
+        const mouseY = e.clientY - aboveRect.top;
+        const contentX = (mouseX / aboveRect.width) * this._maxX;
+        const contentY = (mouseY / aboveRect.height) * this._maxY;
+        const halfViewW = designerCanvas.clientWidth / zoom / 2;
+        const halfViewH = designerCanvas.clientHeight / zoom / 2;
+        designerCanvas.canvasOffset = {
+            x: -(contentX - halfViewW),
+            y: -(contentY - halfViewH)
+        };
+    }
+    set instanceServiceContainer(value) {
+        this._contentChangedHandler?.dispose();
+        this._zoomFactorChangedHandler?.dispose();
+        this._instanceServiceContainer = value;
+        if (this._instanceServiceContainer) {
+            this._zoomFactorChangedHandler = this._instanceServiceContainer.designerCanvas.onZoomFactorChanged.on(() => {
+                this._reDrawRect();
+            });
+            this._contentChangedHandler = this._instanceServiceContainer.contentService.onContentChanged.on(e => {
+                if (this._reRenderFlag === false) {
+                    this._reRenderFlag = true;
+                    setTimeout(() => this._reRender(), 50);
+                }
+            });
+            if (this._reRenderFlag === false) {
+                this._reRenderFlag = true;
+                setTimeout(() => this._reRender(), 50);
+            }
+        }
+        else {
+            this._innerShadow.innerHTML = "";
+        }
+    }
+}
+customElements.define('node-projects-web-component-designer-miniature-view', MiniatureView);
+//# sourceMappingURL=miniatureView.js.map

package/dist/elements/widgets/miniatureView/miniatureView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"miniatureView.js","sourceRoot":"","sources":["../../../../src/elements/widgets/miniatureView/miniatureView.ts"],"names":[],"mappings":"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"}