import { ChangeDetectionStrategy, Component, ElementRef, HostListener, Input, ViewChild, ViewEncapsulation, } from '@angular/core';
import { clamp, min, round } from 'lodash-es';
import { compose } from 'ramda';
import { isMac } from '../../core/utils/browser';
import { GraphStoreService } from '../graph-store.service';
import { getRect } from '../utils';
import * as i0 from "@angular/core";
import * as i1 from "../graph-store.service";
const _c0 = ["canvas"];
const _c1 = ["surface"];
function GraphCanvasComponent_div_21_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 11);
    i0.ɵɵlistener("wheel", function GraphCanvasComponent_div_21_Template_div_wheel_0_listener($event) { return $event.stopPropagation(); })("mousedown", function GraphCanvasComponent_div_21_Template_div_mousedown_0_listener($event) { return $event.stopPropagation(); });
    i0.ɵɵelement(1, "aui-icon", 12);
    i0.ɵɵelementStart(2, "span");
    i0.ɵɵtext(3);
    i0.ɵɵpipe(4, "translate");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 1, "loading"));
} }
const _c2 = ["*", [["acl-graph-links"]], [["acl-graph-actions"]]];
const _c3 = ["*", "acl-graph-links", "acl-graph-actions"];
const isMacSystem = isMac();
export class GraphCanvasComponent {
    constructor(graphStore) {
        this.graphStore = graphStore;
        this.loading = false;
        this.minScale = 0.25;
        this.maxScale = 2;
        this.originX = 'center';
        this.originY = 'top';
        this.boundary = 60;
        this.getCanvasRect = () => getRect(this.canvasRef.nativeElement);
        this.getSurfaceRect = () => getRect(this.surfaceRef.nativeElement);
    }
    get dragging() {
        return !!this.dragStartPoint;
    }
    get canvasStyle() {
        return {
            padding: this.boundary + 'px',
            justifyContent: this.transformState.origin[0] === 'left'
                ? 'flex-start'
                : this.transformState.origin[0] === 'right'
                    ? 'flex-end'
                    : 'center',
            alignItems: this.transformState.origin[1] === 'top'
                ? 'flex-start'
                : this.transformState.origin[1] === 'bottom'
                    ? 'flex-end'
                    : 'center',
            backgroundPosition: this.transformState.origin.join(' '),
            cursor: this.dragging ? 'grabbing' : 'grab',
        };
    }
    get surfaceStyle() {
        return {
            transformOrigin: this.transformState.origin.join(' '),
            transform: `translate(${this.transformState.translate[0]}px, ${this.transformState.translate[1]}px)  scale(${this.transformState.scale})`,
        };
    }
    ngOnInit() {
        this.transformState = {
            origin: [this.originX, this.originY],
            translate: [0, 0],
            scale: this.graphStore.getScale(),
        };
    }
    ngAfterViewInit() {
        this.graphStore.registerSurfaceNode({ getRect: this.getSurfaceRect });
    }
    handleWheelEvent(e) {
        e.preventDefault();
        e.stopPropagation();
        const { deltaX, deltaY, ctrlKey, shiftKey } = e;
        if (ctrlKey) {
            this.zoomByWheel(-deltaY);
        }
        else if (shiftKey && !isMacSystem) {
            this.move(-deltaY, -deltaX);
        }
        else {
            this.move(-deltaX, -deltaY);
        }
    }
    handleMouseDown(e) {
        this.dragStartPoint = [e.clientX, e.clientY];
    }
    handleMouseMove(e) {
        if (!this.dragStartPoint) {
            return;
        }
        this.move(e.clientX - this.dragStartPoint[0], e.clientY - this.dragStartPoint[1]);
        this.dragStartPoint = [e.clientX, e.clientY];
    }
    handleMouseUp() {
        this.dragStartPoint = null;
    }
    zoomByWheel(v) {
        this.dispatchTransform(({ scale }) => ({
            scale: scale + v / 500,
        }));
    }
    zoomByDefaultStep(direction) {
        this.dispatchTransform(({ scale }) => ({
            scale: scale + (direction === 'in' ? 0.25 : -0.25),
        }));
    }
    zoomOriginal() {
        this.dispatchTransform(() => ({
            origin: [this.originX, this.originY],
            translate: [0, 0],
            scale: 1,
        }));
    }
    zoomOverview() {
        this.dispatchTransform((_, { canvasRect, surfaceRect }) => {
            const scaleX = (canvasRect.offsetWidth - this.boundary * 2) / surfaceRect.offsetWidth;
            const scaleY = (canvasRect.offsetHeight - this.boundary * 2) /
                surfaceRect.offsetHeight;
            return {
                origin: ['center', 'center'],
                translate: [0, 0],
                scale: min([scaleX, scaleY, 1]),
            };
        });
    }
    move(x, y) {
        this.dispatchTransform(({ translate }) => ({
            translate: [translate[0] + x, translate[1] + y],
        }));
    }
    dispatchTransform(action) {
        const canvasRect = this.getCanvasRect();
        const surfaceRect = this.getSurfaceRect();
        const nextTransform = action(this.transformState, {
            canvasRect,
            surfaceRect,
        });
        const applyLimits = compose(this.scaleLimit(this.minScale, this.maxScale));
        this.transformState = Object.assign(this.transformState, applyLimits(nextTransform));
        this.graphStore.setScale(this.transformState.scale);
    }
    scaleLimit(min, max) {
        return (transform) => transform.scale === undefined
            ? transform
            : {
                ...transform,
                scale: clamp(round(transform.scale, 2), min, max),
            };
    }
}
GraphCanvasComponent.ɵfac = function GraphCanvasComponent_Factory(t) { return new (t || GraphCanvasComponent)(i0.ɵɵdirectiveInject(i1.GraphStoreService)); };
GraphCanvasComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GraphCanvasComponent, selectors: [["acl-graph-canvas"]], viewQuery: function GraphCanvasComponent_Query(rf, ctx) { if (rf & 1) {
        i0.ɵɵviewQuery(_c0, 7);
        i0.ɵɵviewQuery(_c1, 7);
    } if (rf & 2) {
        let _t;
        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.canvasRef = _t.first);
        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.surfaceRef = _t.first);
    } }, hostBindings: function GraphCanvasComponent_HostBindings(rf, ctx) { if (rf & 1) {
        i0.ɵɵlistener("mousemove", function GraphCanvasComponent_mousemove_HostBindingHandler($event) { return ctx.handleMouseMove($event); }, false, i0.ɵɵresolveDocument)("mouseup", function GraphCanvasComponent_mouseup_HostBindingHandler($event) { return ctx.handleMouseUp($event); }, false, i0.ɵɵresolveDocument);
    } }, inputs: { loading: "loading", minScale: "minScale", maxScale: "maxScale", originX: "originX", originY: "originY", boundary: "boundary" }, features: [i0.ɵɵProvidersFeature([GraphStoreService])], ngContentSelectors: _c3, decls: 22, vars: 20, consts: [[1, "acl-graph-canvas", 3, "ngStyle", "wheel", "mousedown"], ["canvas", ""], [1, "acl-graph-canvas__surface", 3, "ngStyle"], ["surface", ""], [1, "acl-graph-canvas__action-wrapper", "right", "bottom"], [1, "acl-graph-canvas__action", "square", 3, "title", "click", "mousedown"], ["icon", "basic:full_size"], [1, "acl-graph-canvas__scale-controller"], ["icon", "basic:minus", 3, "title", "click", "mousedown"], ["icon", "basic:plus", 3, "title", "click", "mousedown"], ["class", "acl-graph-canvas__loading-mask", 3, "wheel", "mousedown", 4, "ngIf"], [1, "acl-graph-canvas__loading-mask", 3, "wheel", "mousedown"], ["icon", "spinner"]], template: function GraphCanvasComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵprojectionDef(_c2);
        i0.ɵɵelementStart(0, "div", 0, 1);
        i0.ɵɵlistener("wheel", function GraphCanvasComponent_Template_div_wheel_0_listener($event) { return ctx.handleWheelEvent($event); })("mousedown", function GraphCanvasComponent_Template_div_mousedown_0_listener($event) { return ctx.handleMouseDown($event); });
        i0.ɵɵelementStart(2, "div", 2, 3);
        i0.ɵɵprojection(4);
        i0.ɵɵprojection(5, 1);
        i0.ɵɵelementEnd();
        i0.ɵɵelementStart(6, "div", 4)(7, "div", 5);
        i0.ɵɵlistener("click", function GraphCanvasComponent_Template_div_click_7_listener() { return ctx.zoomOverview(); })("mousedown", function GraphCanvasComponent_Template_div_mousedown_7_listener($event) { return $event.stopPropagation(); });
        i0.ɵɵpipe(8, "translate");
        i0.ɵɵelement(9, "aui-icon", 6);
        i0.ɵɵelementEnd();
        i0.ɵɵelementStart(10, "div", 7)(11, "aui-icon", 8);
        i0.ɵɵlistener("click", function GraphCanvasComponent_Template_aui_icon_click_11_listener() { return ctx.zoomByDefaultStep("out"); })("mousedown", function GraphCanvasComponent_Template_aui_icon_mousedown_11_listener($event) { return $event.stopPropagation(); });
        i0.ɵɵpipe(12, "translate");
        i0.ɵɵelementEnd();
        i0.ɵɵelementStart(13, "span");
        i0.ɵɵtext(14);
        i0.ɵɵelementEnd();
        i0.ɵɵelementStart(15, "aui-icon", 9);
        i0.ɵɵlistener("click", function GraphCanvasComponent_Template_aui_icon_click_15_listener() { return ctx.zoomByDefaultStep("in"); })("mousedown", function GraphCanvasComponent_Template_aui_icon_mousedown_15_listener($event) { return $event.stopPropagation(); });
        i0.ɵɵpipe(16, "translate");
        i0.ɵɵelementEnd()();
        i0.ɵɵelementStart(17, "div", 5);
        i0.ɵɵlistener("click", function GraphCanvasComponent_Template_div_click_17_listener() { return ctx.zoomOriginal(); })("mousedown", function GraphCanvasComponent_Template_div_mousedown_17_listener($event) { return $event.stopPropagation(); });
        i0.ɵɵpipe(18, "translate");
        i0.ɵɵtext(19, " 1:1 ");
        i0.ɵɵelementEnd()();
        i0.ɵɵprojection(20, 2);
        i0.ɵɵtemplate(21, GraphCanvasComponent_div_21_Template, 5, 3, "div", 10);
        i0.ɵɵelementEnd();
    } if (rf & 2) {
        i0.ɵɵproperty("ngStyle", ctx.canvasStyle);
        i0.ɵɵadvance(2);
        i0.ɵɵproperty("ngStyle", ctx.surfaceStyle);
        i0.ɵɵadvance(5);
        i0.ɵɵproperty("title", i0.ɵɵpipeBind1(8, 12, "panoramic_view"));
        i0.ɵɵadvance(4);
        i0.ɵɵclassProp("disabled", ctx.transformState.scale <= ctx.minScale);
        i0.ɵɵproperty("title", i0.ɵɵpipeBind1(12, 14, "zoom_out"));
        i0.ɵɵadvance(3);
        i0.ɵɵtextInterpolate1("", (ctx.transformState.scale * 100).toFixed(0), "%");
        i0.ɵɵadvance(1);
        i0.ɵɵclassProp("disabled", ctx.transformState.scale >= ctx.maxScale);
        i0.ɵɵproperty("title", i0.ɵɵpipeBind1(16, 16, "zoom_in"));
        i0.ɵɵadvance(2);
        i0.ɵɵproperty("title", i0.ɵɵpipeBind1(18, 18, "isometric_view"));
        i0.ɵɵadvance(4);
        i0.ɵɵproperty("ngIf", ctx.loading);
    } }, styles: [".acl-graph-canvas{display:flex;width:100%;height:100%;border-radius:var(--aui-border-radius-l);background-color:rgb(var(--aui-color-n-9));background-image:radial-gradient(rgba(var(--aui-color-n-7),.5) 1px,transparent 1px);background-size:10px 10px;position:relative;overflow:hidden}.acl-graph-canvas:after{content:\"\";display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;overflow:hidden;pointer-events:none}:root .acl-graph-canvas:after{box-shadow:inset 0 0 4px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .acl-graph-canvas:after{box-shadow:inset 0 0 4px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .acl-graph-canvas:after{box-shadow:inset 0 0 4px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .acl-graph-canvas:after{box-shadow:inset 0 0 4px 0 rgba(var(--aui-color-origin-shadow),.75)}.acl-graph-canvas__surface{position:relative}.acl-graph-canvas__links{position:absolute;top:0;left:0;width:1000px;height:1000px;overflow:visible;color:rgb(var(--aui-color-primary));pointer-events:none}.acl-graph-canvas__links .acl-graph-link__line{fill:none;stroke:currentcolor;stroke-width:2px}.acl-graph-canvas__links .acl-graph-link__dot,.acl-graph-canvas__links .acl-graph-link__arrow{fill:currentcolor}.acl-graph-canvas__loading-mask{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;font-size:var(--aui-font-size-xl);line-height:var(--aui-line-height-xl);color:rgb(var(--aui-color-help-text));background-color:rgba(var(--aui-color-n-10),.8);cursor:default}.acl-graph-canvas__loading-mask aui-icon{margin-right:var(--aui-spacing-m);font-size:var(--aui-icon-size-xl);color:rgb(var(--aui-color-primary))}.acl-graph-canvas__action-wrapper{position:absolute;display:flex}.acl-graph-canvas__action-wrapper.top{top:10px}.acl-graph-canvas__action-wrapper.right{right:10px}.acl-graph-canvas__action-wrapper.left{left:10px}.acl-graph-canvas__action-wrapper.bottom{bottom:10px}.acl-graph-canvas__action{padding:0 8px;height:24px;display:flex;align-items:center;justify-content:center;font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);color:rgb(var(--aui-color-secondary-text));background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);cursor:pointer;user-select:none}:root .acl-graph-canvas__action{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .acl-graph-canvas__action{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .acl-graph-canvas__action{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .acl-graph-canvas__action{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.acl-graph-canvas__action:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.acl-graph-canvas__action.square{width:24px}.acl-graph-canvas__action+.acl-graph-canvas__action{margin-left:4px}.acl-graph-canvas__scale-controller{display:flex;align-items:center;justify-content:center;margin:0 4px;font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);color:rgb(var(--aui-color-secondary-text));background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);user-select:none}:root .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.acl-graph-canvas__scale-controller aui-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer}.acl-graph-canvas__scale-controller aui-icon:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.acl-graph-canvas__scale-controller aui-icon.disabled{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-10));cursor:not-allowed}.acl-graph-canvas__scale-controller span{text-align:center;height:16px;width:50px;border-left:1px solid rgb(var(--aui-color-n-8));border-right:1px solid rgb(var(--aui-color-n-8))}\n"], encapsulation: 2, changeDetection: 0 });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GraphCanvasComponent, [{
        type: Component,
        args: [{ selector: 'acl-graph-canvas', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [GraphStoreService], template: "<div\n  #canvas\n  class=\"acl-graph-canvas\"\n  [ngStyle]=\"canvasStyle\"\n  (wheel)=\"handleWheelEvent($event)\"\n  (mousedown)=\"handleMouseDown($event)\"\n>\n  <div\n    #surface\n    class=\"acl-graph-canvas__surface\"\n    [ngStyle]=\"surfaceStyle\"\n  >\n    <ng-content></ng-content>\n    <ng-content select=\"acl-graph-links\"></ng-content>\n  </div>\n\n  <div class=\"acl-graph-canvas__action-wrapper right bottom\">\n    <div\n      class=\"acl-graph-canvas__action square\"\n      [title]=\"'panoramic_view' | translate\"\n      (click)=\"zoomOverview()\"\n      (mousedown)=\"$event.stopPropagation()\"\n    >\n      <aui-icon icon=\"basic:full_size\"></aui-icon>\n    </div>\n    <div class=\"acl-graph-canvas__scale-controller\">\n      <aui-icon\n        icon=\"basic:minus\"\n        [title]=\"'zoom_out' | translate\"\n        [class.disabled]=\"transformState.scale <= minScale\"\n        (click)=\"zoomByDefaultStep('out')\"\n        (mousedown)=\"$event.stopPropagation()\"\n      ></aui-icon>\n      <span>{{ (transformState.scale * 100).toFixed(0) }}%</span>\n      <aui-icon\n        icon=\"basic:plus\"\n        [title]=\"'zoom_in' | translate\"\n        [class.disabled]=\"transformState.scale >= maxScale\"\n        (click)=\"zoomByDefaultStep('in')\"\n        (mousedown)=\"$event.stopPropagation()\"\n      ></aui-icon>\n    </div>\n    <div\n      class=\"acl-graph-canvas__action square\"\n      [title]=\"'isometric_view' | translate\"\n      (click)=\"zoomOriginal()\"\n      (mousedown)=\"$event.stopPropagation()\"\n    >\n      1:1\n    </div>\n  </div>\n  <ng-content select=\"acl-graph-actions\"></ng-content>\n  <div\n    *ngIf=\"loading\"\n    class=\"acl-graph-canvas__loading-mask\"\n    (wheel)=\"$event.stopPropagation()\"\n    (mousedown)=\"$event.stopPropagation()\"\n  >\n    <aui-icon icon=\"spinner\"></aui-icon>\n    <span>{{ 'loading' | translate }}</span>\n  </div>\n</div>\n", styles: [".acl-graph-canvas{display:flex;width:100%;height:100%;border-radius:var(--aui-border-radius-l);background-color:rgb(var(--aui-color-n-9));background-image:radial-gradient(rgba(var(--aui-color-n-7),.5) 1px,transparent 1px);background-size:10px 10px;position:relative;overflow:hidden}.acl-graph-canvas:after{content:\"\";display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;overflow:hidden;pointer-events:none}:root .acl-graph-canvas:after{box-shadow:inset 0 0 4px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .acl-graph-canvas:after{box-shadow:inset 0 0 4px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .acl-graph-canvas:after{box-shadow:inset 0 0 4px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .acl-graph-canvas:after{box-shadow:inset 0 0 4px 0 rgba(var(--aui-color-origin-shadow),.75)}.acl-graph-canvas__surface{position:relative}.acl-graph-canvas__links{position:absolute;top:0;left:0;width:1000px;height:1000px;overflow:visible;color:rgb(var(--aui-color-primary));pointer-events:none}.acl-graph-canvas__links .acl-graph-link__line{fill:none;stroke:currentcolor;stroke-width:2px}.acl-graph-canvas__links .acl-graph-link__dot,.acl-graph-canvas__links .acl-graph-link__arrow{fill:currentcolor}.acl-graph-canvas__loading-mask{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;font-size:var(--aui-font-size-xl);line-height:var(--aui-line-height-xl);color:rgb(var(--aui-color-help-text));background-color:rgba(var(--aui-color-n-10),.8);cursor:default}.acl-graph-canvas__loading-mask aui-icon{margin-right:var(--aui-spacing-m);font-size:var(--aui-icon-size-xl);color:rgb(var(--aui-color-primary))}.acl-graph-canvas__action-wrapper{position:absolute;display:flex}.acl-graph-canvas__action-wrapper.top{top:10px}.acl-graph-canvas__action-wrapper.right{right:10px}.acl-graph-canvas__action-wrapper.left{left:10px}.acl-graph-canvas__action-wrapper.bottom{bottom:10px}.acl-graph-canvas__action{padding:0 8px;height:24px;display:flex;align-items:center;justify-content:center;font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);color:rgb(var(--aui-color-secondary-text));background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);cursor:pointer;user-select:none}:root .acl-graph-canvas__action{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .acl-graph-canvas__action{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .acl-graph-canvas__action{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .acl-graph-canvas__action{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.acl-graph-canvas__action:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.acl-graph-canvas__action.square{width:24px}.acl-graph-canvas__action+.acl-graph-canvas__action{margin-left:4px}.acl-graph-canvas__scale-controller{display:flex;align-items:center;justify-content:center;margin:0 4px;font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);color:rgb(var(--aui-color-secondary-text));background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);user-select:none}:root .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.acl-graph-canvas__scale-controller aui-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer}.acl-graph-canvas__scale-controller aui-icon:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.acl-graph-canvas__scale-controller aui-icon.disabled{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-10));cursor:not-allowed}.acl-graph-canvas__scale-controller span{text-align:center;height:16px;width:50px;border-left:1px solid rgb(var(--aui-color-n-8));border-right:1px solid rgb(var(--aui-color-n-8))}\n"] }]
    }], function () { return [{ type: i1.GraphStoreService }]; }, { loading: [{
            type: Input
        }], minScale: [{
            type: Input
        }], maxScale: [{
            type: Input
        }], originX: [{
            type: Input
        }], originY: [{
            type: Input
        }], boundary: [{
            type: Input
        }], canvasRef: [{
            type: ViewChild,
            args: ['canvas', { static: true }]
        }], surfaceRef: [{
            type: ViewChild,
            args: ['surface', { static: true }]
        }], handleMouseMove: [{
            type: HostListener,
            args: ['document:mousemove', ['$event']]
        }], handleMouseUp: [{
            type: HostListener,
            args: ['document:mouseup', ['$event']]
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 