inugami-ng 0.0.19 → 0.0.21

package/fesm2022/inugami-ng-components-inu-svg-isometric.mjs

@@ -0,0 +1,790 @@
+import * as i0 from '@angular/core';
+import { input, viewChild, computed, signal, model, effect, HostListener, Component } from '@angular/core';
+import { InuTemplateRegistryService } from 'inugami-ng/directives';
+import { SVG_BUILDER, SVG_ASSETS, SvgAssetUtils, SVG_MATH, SVG_TRANSFORM, SVG } from 'inugami-ng/services';
+import { InuPointPipe } from 'inugami-ng/pipes';
+
+const POINTER = 'cursor-pointer';
+const ASSETS_TOOLS = 'tools';
+class InuSvgIsometricHud {
+    //====================================================================================================================
+    // ATTRIBUTES
+    //====================================================================================================================
+    parent;
+    height;
+    width;
+    scale = 0.7;
+    toolbarMargin = 1.25;
+    option;
+    //
+    hud = null;
+    hudToolbar = null;
+    hudToolbarAssets = [];
+    hudInspector = null;
+    hudSettings = null;
+    hudNavigation = null;
+    //====================================================================================================================
+    // INIT
+    //====================================================================================================================
+    constructor(option) {
+        this.parent = option.parent;
+        this.height = option.height;
+        this.width = option.width;
+        this.option = option;
+        this.render();
+    }
+    //====================================================================================================================
+    // RENDERING
+    //====================================================================================================================
+    render() {
+        this.hud = SVG_BUILDER.createGroup(this.parent, { styleClass: `hud` });
+        this.hudToolbar = this.renderHudToolbar(this.hud);
+        this.hudInspector = this.renderHudInspector(this.hud);
+        this.hudSettings = this.renderHudSettings(this.hud);
+        this.hudNavigation = this.renderHudNavigation(this.hud);
+    }
+    renderHudToolbar(parent) {
+        const result = SVG_BUILDER.createGroup(this.hud, { styleClass: `toolbar` });
+        const buttons = [
+            {
+                name: 'add-asset',
+                icon: 'category',
+                onover: (event, node) => this.onOverAsset(node),
+                onmouseleave: (event, node) => this.onLeaveAsset(node)
+            },
+            {
+                name: 'download',
+                icon: 'download',
+                onover: (event, node) => this.onOverAsset(node),
+                onmouseleave: (event, node) => this.onLeaveAsset(node),
+                onclick: (event) => this.option.onDownload()
+            },
+            {
+                name: 'zoom-div',
+                icon: 'div'
+            },
+            {
+                name: 'zoom-plus',
+                icon: 'zoom',
+                onover: (event, node) => this.onOverAsset(node),
+                onmouseleave: (event, node) => this.onLeaveAsset(node),
+                onclick: (event) => this.option.onZoomIn(event)
+            },
+            {
+                name: 'zoom-min',
+                icon: 'zoom',
+                type: 'min',
+                onover: (event, node) => this.onOverAsset(node),
+                onmouseleave: (event, node) => this.onLeaveAsset(node),
+                onclick: (event) => this.option.onZoomOut(event)
+            },
+        ];
+        for (let button of buttons) {
+            const buttonAsset = this.createAsset({
+                parent: result,
+                name: button.name,
+                asset: {
+                    assetSet: ASSETS_TOOLS,
+                    assetName: button.icon,
+                    type: button.type ? button.type : 'default',
+                    state: button.state ? button.state : 'default'
+                },
+                styleClass: POINTER
+            });
+            if (!buttonAsset) {
+                continue;
+            }
+            if (button.onover)
+                buttonAsset.onover = button.onover;
+            if (button.onclick)
+                buttonAsset.onclick = button.onclick;
+            if (button.onmousedown)
+                buttonAsset.onmousedown = button.onmousedown;
+            if (button.onmousemove)
+                buttonAsset.onmousemove = button.onmousemove;
+            if (button.onmouseleave)
+                buttonAsset.onmouseleave = button.onmouseleave;
+            if (button.ondblclick)
+                buttonAsset.ondblclick = button.ondblclick;
+            if (button.ondrag)
+                buttonAsset.ondrag = button.ondrag;
+            if (button.ondrop)
+                buttonAsset.ondrop = button.ondrop;
+            if (button.ondragend)
+                buttonAsset.ondragend = button.ondragend;
+            if (button.ondragstart)
+                buttonAsset.ondragstart = button.ondragstart;
+            if (button.ondragleave)
+                buttonAsset.ondragleave = button.ondragleave;
+            if (button.ondragover)
+                buttonAsset.ondragover = button.ondragover;
+            if (button.ondragenter)
+                buttonAsset.ondragenter = button.ondragenter;
+            this.hudToolbarAssets.push(buttonAsset);
+        }
+        return result;
+    }
+    renderHudInspector(parent) {
+        const result = SVG_BUILDER.createGroup(this.hud, { styleClass: `layers-inspector` });
+        return result;
+    }
+    renderHudSettings(parent) {
+        const result = SVG_BUILDER.createGroup(this.hud, { styleClass: `settings` });
+        return result;
+    }
+    renderHudNavigation(parent) {
+        const result = SVG_BUILDER.createGroup(this.hud, { styleClass: `navigation` });
+        return result;
+    }
+    //====================================================================================================================
+    // ACTIONS
+    //====================================================================================================================
+    updatePosition(height, width) {
+        this.updatePositionHudToolbar(height, width);
+    }
+    updatePositionHudToolbar(height, width) {
+        if (this.hudToolbarAssets.length == 0) {
+            return;
+        }
+        const size = this.hudToolbarAssets[0].getComponentSize();
+        for (let i = 1; i < this.hudToolbarAssets.length; i++) {
+            this.hudToolbarAssets[i].move({ x: (i * size.width) * this.toolbarMargin, y: 0 });
+        }
+    }
+    //====================================================================================================================
+    // EVENTS
+    //====================================================================================================================
+    onOverAsset(node) {
+        node.addStyleClass('over');
+    }
+    onLeaveAsset(node) {
+        node.removeStyleClass('over');
+    }
+    //====================================================================================================================
+    // TOOLS
+    //====================================================================================================================
+    createAsset(option) {
+        const assetIcon = SVG_ASSETS.getAsset(option.asset.assetSet, option.asset.assetName);
+        if (!assetIcon || !parent) {
+            return undefined;
+        }
+        const asset = option.asset;
+        asset.x = 0;
+        asset.y = 0;
+        asset.size = this.scale;
+        asset.name = option.name;
+        return SvgAssetUtils.createAsset({
+            parent: option.parent,
+            asset: asset,
+            scale: this.scale,
+            isometric: false,
+            enableHitBox: true
+        });
+    }
+}
+
+class InuSvgIsometric {
+    //====================================================================================================================
+    // ATTRIBUTES
+    //====================================================================================================================
+    isometric = input(true, ...(ngDevMode ? [{ debugName: "isometric" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    styleclass = input('', ...(ngDevMode ? [{ debugName: "styleclass" }] : []));
+    styleclassheight = input('', ...(ngDevMode ? [{ debugName: "styleclassheight" }] : []));
+    //
+    component = viewChild('component', ...(ngDevMode ? [{ debugName: "component" }] : []));
+    container = viewChild('container', ...(ngDevMode ? [{ debugName: "container" }] : []));
+    _styleClass = computed(() => {
+        return [
+            'inu-svg',
+            'inu-svg-isometric',
+            this.disabled() ? 'disabled' : '',
+            this.styleclass() ? this.styleclass() : ''
+        ].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "_styleClass" }] : []));
+    //---
+    height = signal(400, ...(ngDevMode ? [{ debugName: "height" }] : []));
+    width = signal(600, ...(ngDevMode ? [{ debugName: "width" }] : []));
+    viewportSize = computed(() => ({ x: this.height(), y: this.width() }), ...(ngDevMode ? [{ debugName: "viewportSize" }] : []));
+    center = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "center" }] : []));
+    zoom = signal(50, ...(ngDevMode ? [{ debugName: "zoom" }] : []));
+    assetSelected = signal(undefined, ...(ngDevMode ? [{ debugName: "assetSelected" }] : []));
+    trackMouseMove = signal(false, ...(ngDevMode ? [{ debugName: "trackMouseMove" }] : []));
+    mousePosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "mousePosition" }] : []));
+    previousMouseMove = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "previousMouseMove" }] : []));
+    value = model([], ...(ngDevMode ? [{ debugName: "value" }] : []));
+    //---
+    defaultSize = 50;
+    position = { x: 0, y: 0 };
+    //--- SVG components
+    scale = 1;
+    ratio = 1;
+    parent = null;
+    hiddenAssetLayer = null;
+    locator = null;
+    defs = null;
+    canvas = null;
+    graph = null;
+    gridPattern = null;
+    patternGroup = null;
+    gridPatternRect = null;
+    layers = null;
+    layersComponents = [];
+    hud = undefined;
+    //====================================================================================================================
+    // INIT
+    //====================================================================================================================
+    constructor() {
+        effect(() => {
+            this.updateValues();
+        });
+    }
+    ngAfterViewInit() {
+        const component = this.component();
+        const container = this.container();
+        if (component && container) {
+            this.resolveParentSize(component, container);
+            this.initializeLayout(container);
+            this.updateAfterZoom();
+            this.resize();
+        }
+    }
+    //====================================================================================================================
+    // RENDERING
+    //====================================================================================================================
+    resolveParentSize(component, container) {
+        if (component?.nativeElement && component?.nativeElement.parentNode && component?.nativeElement.parentNode.parentNode) {
+            this.parent = component?.nativeElement.parentNode.parentNode;
+        }
+        if (this.parent) {
+            let parentSize = SVG_MATH.size(this.parent);
+            this.height.set(parentSize.height);
+            this.width.set(parentSize.width);
+        }
+        this.center.set({ y: this.width() / 2, x: this.height() / 2 });
+        container?.nativeElement
+            .setAttribute('style', `display: block; height:${this.height()}px;width:${this.width()}px`);
+    }
+    initializeLayout(container) {
+        this.defs = SVG_BUILDER.createDefs(container?.nativeElement);
+        const gridGrp = SVG_BUILDER.createGroup(container?.nativeElement);
+        this.hiddenAssetLayer = SVG_BUILDER.createGroup(container?.nativeElement, { styleClass: 'hidden-layer' });
+        this.locator = SVG_BUILDER.createGroup(container?.nativeElement, { styleClass: 'locator' });
+        this.canvas = SVG_BUILDER.createGroup(this.locator, { styleClass: 'canvas' });
+        container.nativeElement.onmousedown = (event) => this.trackMouse(true, event);
+        container.nativeElement.onmouseup = (event) => this.trackMouse(false, event);
+        container.nativeElement.onmousemove = (event) => this.moveViewport(event);
+        if (this.hiddenAssetLayer) {
+            this.hiddenAssetLayer.setAttribute('inkscape:label', 'hidden');
+            this.hiddenAssetLayer.setAttribute('inkscape:groupmode', 'layer');
+            this.hiddenAssetLayer.setAttribute('style', 'display: hidden;');
+        }
+        if (this.defs) {
+            this.createGridDefs(this.defs);
+        }
+        const filter = SVG_BUILDER.createFilter(this.defs, 'shadow', { style: 'color-interpolation-filters: sRGB;' });
+        const gaussian = SVG_BUILDER.createNode('feGaussianBlur', filter);
+        if (gaussian) {
+            gaussian.setAttribute('stdDeviation', '1');
+        }
+        if (gridGrp) {
+            this.renderGrid(gridGrp);
+        }
+        if (this.canvas) {
+            this.graph = SVG_BUILDER.createGroup(this.canvas, { styleClass: 'graph' });
+        }
+        if (this.graph) {
+            this.renderLayers(this.graph);
+        }
+        if (container?.nativeElement) {
+            this.hud = new InuSvgIsometricHud({
+                parent: container?.nativeElement,
+                height: this.height(),
+                width: this.width(),
+                //
+                onZoomIn: (e) => this.onZoomIn(e),
+                onZoomOut: (e) => this.onZoomOut(e),
+                onDownload: () => this.download()
+            });
+        }
+        this.updateValues();
+    }
+    renderLayers(graph) {
+        this.layers = SVG_BUILDER.createGroup(this.graph, { styleClass: 'layers' });
+    }
+    createLayer(name) {
+        if (this.layers) {
+            const layer = SVG_BUILDER.createGroup(this.layers, { styleClass: `layer ${name}` });
+            if (layer) {
+                const result = {
+                    name: name,
+                    node: layer,
+                    assets: []
+                };
+                this.layersComponents.push(result);
+                return result;
+            }
+        }
+        return undefined;
+    }
+    //--------------------------------------------------------------------------------------------------------------------
+    // GRID
+    //--------------------------------------------------------------------------------------------------------------------
+    createGridDefs(defs) {
+        this.gridPattern = SVG_BUILDER.createDefsPattern(defs, 'gridBackground', {
+            x: 0,
+            y: 0,
+            height: SVG_MATH.zoom(1, this.zoom()),
+            width: SVG_MATH.zoom(1, this.zoom()),
+            patternUnits: "userSpaceOnUse"
+        });
+        this.patternGroup = SVG_BUILDER.createGroup(this.gridPattern, { styleClass: 'inu-svg-isometric-grid-background' });
+        if (this.patternGroup) {
+            const isometric = this.isometric();
+            if (isometric) {
+                SVG_BUILDER.createCurve(this.patternGroup, 'M 0,14.4337 L 25,0 L 50,14.4337 L 25,28.8675 Z');
+            }
+            else {
+                this.gridPatternRect = SVG_BUILDER.createRect(this.patternGroup, {
+                    height: SVG_MATH.zoom(1, this.zoom()),
+                    width: SVG_MATH.zoom(1, this.zoom())
+                });
+            }
+        }
+    }
+    renderGrid(graph) {
+        const gridGroup = SVG_BUILDER.createGroup(graph, { styleClass: 'inu-svg-isometric-grid' });
+        if (gridGroup) {
+            this.renderBackground(gridGroup);
+        }
+    }
+    renderBackground(graph) {
+        const result = SVG_BUILDER.createRect(graph, {
+            height: this.height(),
+            width: this.width(),
+            styleClass: 'inu-svg-isometric-border'
+        });
+        if (result) {
+            result.setAttribute('fill', 'url(#gridBackground)');
+        }
+        return result;
+    }
+    //====================================================================================================================
+    // EVENTS
+    //====================================================================================================================
+    //--------------------------------------------------------------------------------------------------------------------
+    // ZOOM
+    //--------------------------------------------------------------------------------------------------------------------
+    onResize() {
+        const component = this.component();
+        const container = this.container();
+        if (component && container) {
+            this.resolveParentSize(component, container);
+            this.resize();
+        }
+    }
+    onMouseWheel(event) {
+        event.preventDefault();
+        let step = 1;
+        if (event.ctrlKey) {
+            step = 10;
+        }
+        if (event.shiftKey) {
+            step = 0.1;
+        }
+        if (event.deltaY > 0) {
+            this.zoom.set(this.zoom() - step);
+        }
+        else {
+            this.zoom.set(this.zoom() - step);
+        }
+        if (this.zoom() <= 0) {
+            this.zoom.set(0.001);
+        }
+        this.updateAfterZoom();
+    }
+    onMouseDown(event) {
+        if (event.button === 1) {
+            event.preventDefault();
+            let startZoom = this.zoom();
+            let endZoom = this.defaultSize;
+            let delta = endZoom - startZoom;
+            let currentX = 0;
+            let currentY = 0;
+            let x = 0;
+            let y = 0;
+            if (this.parent && this.locator) {
+                const currentTransfoAttr = this.locator.getAttribute('transform');
+                const currentTransfo = SVG_TRANSFORM.extractTransformInformation(this.locator);
+                SVG_TRANSFORM.center(this.locator, this.parent, true, true);
+                const centerTransfo = SVG_TRANSFORM.extractTransformInformation(this.locator);
+                this.locator.setAttribute('transform', currentTransfoAttr);
+                currentX = currentTransfo.x;
+                currentY = currentTransfo.y;
+                x = centerTransfo.x - currentX;
+                y = centerTransfo.y - currentY;
+                startZoom = currentTransfo.scaleX;
+                endZoom = centerTransfo.scaleX;
+                delta = endZoom - startZoom;
+            }
+            SVG.ANIMATION.animate((progress) => {
+                const newZoom = startZoom + (delta * progress);
+                const newX = currentX + (x * progress);
+                const newY = currentY + (y * progress);
+                if (this.locator) {
+                    SVG_TRANSFORM.translateY(this.locator, newY);
+                    SVG_TRANSFORM.translateX(this.locator, newX);
+                    SVG_TRANSFORM.scale(this.locator, newZoom, newZoom);
+                }
+                this.updateGridSize(this.defaultSize * (newZoom));
+            }, {
+                duration: 2000,
+                timer: SVG.ANIMATION.TYPES.easeOutCubic,
+                onDone: () => {
+                    this.zoom.set(this.defaultSize);
+                    if (this.locator) {
+                        if (this.parent) {
+                            SVG_TRANSFORM.center(this.locator, this.parent, true, true);
+                            const doneTransfo = SVG_TRANSFORM.extractTransformInformation(this.locator);
+                            this.position.x = doneTransfo.x;
+                            this.position.y = doneTransfo.y;
+                        }
+                        this.updateGridSize(this.zoom());
+                    }
+                }
+            });
+        }
+    }
+    updateGridSize(zoom) {
+        const width = SVG_MATH.zoom(1, zoom);
+        const height = this.isometric() ? width / Math.sqrt(3) : width;
+        if (this.patternGroup) {
+            const currentZoom = width / this.defaultSize;
+            SVG_TRANSFORM.scale(this.patternGroup, currentZoom, currentZoom);
+            if (this.gridPattern) {
+                this.gridPattern.setAttribute('height', `${height}`);
+                this.gridPattern.setAttribute('width', `${width}`);
+            }
+        }
+    }
+    onZoomIn(event) {
+        const zoom = this.zoom();
+        this.zoom.set(zoom + 1);
+        this.updateAfterZoom();
+    }
+    onZoomOut(event) {
+        const zoom = this.zoom() - 1;
+        this.zoom.set(zoom <= 0 ? 0.001 : zoom);
+        this.updateAfterZoom();
+    }
+    //--------------------------------------------------------------------------------------------------------------------
+    // DOWNALOD
+    //--------------------------------------------------------------------------------------------------------------------
+    download() {
+        console.log('download');
+        const container = this.container()?.nativeElement;
+        if (!container) {
+            return;
+        }
+        const clone = container.cloneNode(true);
+        const copyStyles = (source, target) => {
+            const computed = window.getComputedStyle(source);
+            const svgProps = [
+                "fill", "stroke", "stroke-width", "opacity", "display",
+                "font-family", "font-size", "font-weight", "text-anchor",
+                "transform", "filter", "stop-color", "stop-opacity"
+            ];
+            svgProps.forEach(prop => {
+                target.style[prop] = computed.getPropertyValue(prop);
+            });
+            for (let i = 0; i < source.children.length; i++) {
+                const currentStyleClass = source.children[i].getAttribute('class');
+                if (currentStyleClass == 'inu-svg-isometric-grid' || currentStyleClass == 'hud') {
+                    target.children[i].replaceChildren();
+                    continue;
+                }
+                copyStyles(source.children[i], target.children[i]);
+            }
+        };
+        copyStyles(container, clone);
+        const realLocator = container.querySelector('.locator');
+        const locator = clone.querySelector('.locator');
+        let positionGrp = undefined;
+        if (locator && clone) {
+            const svgLocator = locator;
+            clone.replaceChildren();
+            positionGrp = SVG_BUILDER.createGroup(clone, { styleClass: 'position' });
+            if (positionGrp) {
+                positionGrp.appendChild(svgLocator);
+            }
+        }
+        const padding = 20;
+        const size = SVG_MATH.size(container);
+        const viewBoxValue = `${size.x - padding} ${size.y - padding} ${size.width + padding * 2} ${size.height + padding * 2}`;
+        const htmlCloneNode = clone;
+        htmlCloneNode.setAttribute('viewBox', viewBoxValue);
+        htmlCloneNode.setAttribute('xmlns:inkscape', 'http://www.inkscape.org/namespaces/inkscape');
+        htmlCloneNode.setAttribute('xmlns:sodipodi', 'http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd');
+        htmlCloneNode.style.width = `${size.width}px`;
+        htmlCloneNode.style.height = `${size.height}px`;
+        if (positionGrp && clone && realLocator) {
+            const locatorSize = SVG.MATH.size(realLocator);
+            const posGrp = SVG.MATH.size(positionGrp);
+            const diffSizeX = size.width - locatorSize.width;
+            const newPosX = (-posGrp.x) + (diffSizeX / 2);
+            const diffSizeY = size.height - locatorSize.height;
+            const newPosY = (-posGrp.y) + (diffSizeY / 2);
+            SVG.TRANSFORM.translateX(positionGrp, newPosX);
+            SVG.TRANSFORM.translateY(positionGrp, newPosY);
+        }
+        const svgData = new XMLSerializer().serializeToString(clone);
+        const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
+        const svgUrl = URL.createObjectURL(svgBlob);
+        const downloadLink = document.createElement("a");
+        downloadLink.href = svgUrl;
+        downloadLink.download = 'graph.svg';
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+        document.body.removeChild(downloadLink);
+        URL.revokeObjectURL(svgUrl);
+    }
+    //====================================================================================================================
+    // UPDATE VALUES
+    //====================================================================================================================
+    updateValues() {
+        const value = this.value();
+        if (value.length == 0) {
+            this.clearAllLayers();
+        }
+        else {
+            for (let layer of value) {
+                this.updateLayer(layer);
+            }
+        }
+    }
+    clearAllLayers() {
+        for (let layer of this.layersComponents) {
+            for (let asset of layer.assets) {
+                asset.remove();
+            }
+            layer.assets.splice(0, layer.assets.length - 1);
+        }
+    }
+    updateLayer(layer) {
+        let currentLayer = this.layersComponents.find(l => layer.name);
+        if (!currentLayer) {
+            currentLayer = this.createLayer(layer.name);
+        }
+        if (!currentLayer) {
+            return;
+        }
+        const removedAssets = this.searchAssetsRemoved(layer.asserts, currentLayer.assets);
+        removedAssets.forEach(a => a.remove());
+        for (let asset of layer.asserts) {
+            this.updateOrCreateAsset(asset, currentLayer);
+        }
+    }
+    searchAssetsRemoved(asserts, existingAssets) {
+        const result = [];
+        for (let existingAsset of existingAssets) {
+            const foundAsset = asserts.find(a => a.name == existingAsset.name);
+            if (!foundAsset) {
+                result.push(existingAsset);
+            }
+        }
+        return result;
+    }
+    updateOrCreateAsset(asset, layer) {
+        const existingAsset = layer.assets.find(a => a.name == asset.name);
+        if (existingAsset) {
+            existingAsset.update(asset, this.center(), this.scale, this.isometric());
+        }
+        else {
+            const newAsset = SvgAssetUtils.createAsset({
+                parent: layer.node,
+                asset: asset,
+                scale: this.scale,
+                center: this.center(),
+                isometric: this.isometric(),
+                enableHitBox: false
+            });
+            if (newAsset) {
+                layer.assets.push(newAsset);
+            }
+        }
+    }
+    updateAfterZoom() {
+        const width = SVG_MATH.zoom(1, this.zoom());
+        const height = this.isometric() ? width / Math.sqrt(3) : width;
+        if (this.patternGroup) {
+            const zoom = width / this.defaultSize;
+            SVG_TRANSFORM.scale(this.patternGroup, zoom, zoom);
+            if (this.layers) {
+                SVG_TRANSFORM.scale(this.layers, zoom, zoom);
+            }
+            if (this.gridPattern) {
+                this.gridPattern.setAttribute('height', `${height}`);
+                this.gridPattern.setAttribute('width', `${width}`);
+            }
+        }
+        this.computeRatio();
+    }
+    //====================================================================================================================
+    // TOOLS
+    //====================================================================================================================
+    resize() {
+        if (this.locator && this.parent) {
+            this.computeRatio();
+            SVG_TRANSFORM.center(this.locator, this.parent, true, true);
+            const doneTransfo = SVG_TRANSFORM.extractTransformInformation(this.locator);
+            this.position.x = doneTransfo.x;
+            this.position.y = doneTransfo.y;
+        }
+        this.hud?.updatePosition(this.height(), this.width());
+    }
+    computeRatio() {
+        if (!this.parent || !this.locator) {
+            return;
+        }
+        const parentSize = SVG_MATH.size(this.parent);
+        const locatorSize = SVG_MATH.size(this.locator);
+        this.ratio = parentSize.width / locatorSize.width;
+    }
+    trackMouse(track, event) {
+        event.preventDefault();
+        this.trackMouseMove.set(track);
+        if (track) {
+            this.previousMouseMove.set({ x: event.x, y: event.y });
+        }
+        else {
+            this.previousMouseMove.set({ x: 0, y: 0 });
+        }
+    }
+    moveViewport(event) {
+        const container = this.container()?.nativeElement;
+        if (!container) {
+            return;
+        }
+        this.mousePosition.set({
+            x: event.x,
+            y: event.y
+        });
+        const trackMouse = this.trackMouseMove();
+        if (!trackMouse) {
+            return;
+        }
+        const currentMove = {
+            x: event.x,
+            y: event.y
+        };
+        const previousMouseMove = this.previousMouseMove();
+        const delta = {
+            x: previousMouseMove.x - currentMove.x,
+            y: previousMouseMove.y - currentMove.y
+        };
+        const asset = this.searchDragComponent();
+        if (!asset) {
+            event.preventDefault();
+            this.position.x = this.position.x - delta.x;
+            this.position.y = this.position.y - delta.y;
+            if (this.locator) {
+                SVG.TRANSFORM.translateY(this.locator, this.position.y);
+                SVG.TRANSFORM.translateX(this.locator, this.position.x);
+            }
+        }
+        else {
+            asset.moveDrag({
+                x: delta.x,
+                y: delta.y
+            }, this.ratio);
+        }
+        this.previousMouseMove.set(currentMove);
+    }
+    searchDragComponent() {
+        for (let layer of this.layersComponents) {
+            const assert = layer.assets.find(a => a.isDrag());
+            if (assert) {
+                return assert;
+            }
+        }
+        return undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuSvgIsometric, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: InuSvgIsometric, isStandalone: true, selector: "inu-svg-isometric", inputs: { isometric: { classPropertyName: "isometric", publicName: "isometric", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, styleclass: { classPropertyName: "styleclass", publicName: "styleclass", isSignal: true, isRequired: false, transformFunction: null }, styleclassheight: { classPropertyName: "styleclassheight", publicName: "styleclassheight", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "window:resize": "onResize()", "wheel": "onMouseWheel($event)", "mousedown": "onMouseDown($event)" } }, providers: [InuTemplateRegistryService], viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="inu-svg-isometric-debug">
+      <div class="inu-svg-isometric-debug-content">
+        <dl>
+          <dt>viewport size</dt>
+          <dd>{{ viewportSize()| inuPipePoint }}</dd>
+          <dt>center</dt>
+          <dd>{{ center()| inuPipePoint }}</dd>
+
+        </dl>
+        <dl>
+          <dt>zoom</dt>
+          <dd>{{ zoom() }}</dd>
+          <dt>trackMouseMove</dt>
+          <dd>{{ trackMouseMove() }}</dd>
+          <dt>mousePosition</dt>
+          <dd>{{ mousePosition()| inuPipePoint }}</dd>
+          <dt>previousMouseMove</dt>
+          <dd>{{ previousMouseMove()| inuPipePoint }}</dd>
+        </dl>
+      </div>
+
+    </div>
+
+    <div [class]="_styleClass()" #component>
+      <svg #container xmlns="http://www.w3.org/2000/svg"></svg>
+    </div>
+  `, isInline: true, styles: ["::ng-deep .inu-svg-isometric-grid-background rect{fill:none;stroke-width:1;paint-order:stroke;stroke:var(--neutral-light);stroke-opacity:1}::ng-deep .inu-svg-isometric-grid-background path{fill:none;stroke-width:1;paint-order:stroke;stroke:var(--neutral-light);stroke-opacity:1}::ng-deep .hud .toolbar .inu-svg-asset.over{fill:var(--secondary)}.inu-svg-isometric-debug{display:block}.inu-svg-isometric-debug .inu-svg-isometric-debug-content{display:flex;flex-direction:row;flex-wrap:wrap}.inu-svg-isometric-debug .inu-svg-isometric-debug-content dl{width:33%}\n"], dependencies: [{ kind: "pipe", type: InuPointPipe, name: "inuPipePoint" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuSvgIsometric, decorators: [{
+            type: Component,
+            args: [{ selector: 'inu-svg-isometric', standalone: true, providers: [InuTemplateRegistryService], imports: [
+                        InuPointPipe
+                    ], template: `
+    <div class="inu-svg-isometric-debug">
+      <div class="inu-svg-isometric-debug-content">
+        <dl>
+          <dt>viewport size</dt>
+          <dd>{{ viewportSize()| inuPipePoint }}</dd>
+          <dt>center</dt>
+          <dd>{{ center()| inuPipePoint }}</dd>
+
+        </dl>
+        <dl>
+          <dt>zoom</dt>
+          <dd>{{ zoom() }}</dd>
+          <dt>trackMouseMove</dt>
+          <dd>{{ trackMouseMove() }}</dd>
+          <dt>mousePosition</dt>
+          <dd>{{ mousePosition()| inuPipePoint }}</dd>
+          <dt>previousMouseMove</dt>
+          <dd>{{ previousMouseMove()| inuPipePoint }}</dd>
+        </dl>
+      </div>
+
+    </div>
+
+    <div [class]="_styleClass()" #component>
+      <svg #container xmlns="http://www.w3.org/2000/svg"></svg>
+    </div>
+  `, styles: ["::ng-deep .inu-svg-isometric-grid-background rect{fill:none;stroke-width:1;paint-order:stroke;stroke:var(--neutral-light);stroke-opacity:1}::ng-deep .inu-svg-isometric-grid-background path{fill:none;stroke-width:1;paint-order:stroke;stroke:var(--neutral-light);stroke-opacity:1}::ng-deep .hud .toolbar .inu-svg-asset.over{fill:var(--secondary)}.inu-svg-isometric-debug{display:block}.inu-svg-isometric-debug .inu-svg-isometric-debug-content{display:flex;flex-direction:row;flex-wrap:wrap}.inu-svg-isometric-debug .inu-svg-isometric-debug-content dl{width:33%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isometric: [{ type: i0.Input, args: [{ isSignal: true, alias: "isometric", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], styleclass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleclass", required: false }] }], styleclassheight: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleclassheight", required: false }] }], component: [{ type: i0.ViewChild, args: ['component', { isSignal: true }] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onMouseWheel: [{
+                type: HostListener,
+                args: ['wheel', ['$event']]
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InuSvgIsometric };
+//# sourceMappingURL=inugami-ng-components-inu-svg-isometric.mjs.map