@anglr/dynamic 1.0.0-beta.20231204053311 → 1.0.0-beta.20231207124014

package/es2015/layout/src/directives/layoutComponentRenderer/layoutComponentRenderer.directive.js

@@ -141,7 +141,6 @@ export class LayoutComponentRendererSADirective {
                     (_q = this.logger) === null || _q === void 0 ? void 0 : _q.debug('LayoutComponentRendererSADirective: initializing component {{@id}}', { id: componentMetadata === null || componentMetadata === void 0 ? void 0 : componentMetadata.id });
                     yield ((_r = component.ngOnInit) === null || _r === void 0 ? void 0 : _r.call(component));
                     (_s = this.logger) === null || _s === void 0 ? void 0 : _s.debug('LayoutComponentRendererSADirective: invalidating component visuals {{@id}}', { id: componentMetadata === null || componentMetadata === void 0 ? void 0 : componentMetadata.id });
-                    // component.invalidateVisuals();
                     (_t = this.ɵComponentRef) === null || _t === void 0 ? void 0 : _t.changeDetectorRef.markForCheck();
                     this.componentElementChange.next((_w = (_v = (_u = this.ɵComponentRef) === null || _u === void 0 ? void 0 : _u.hostView) === null || _v === void 0 ? void 0 : _v.rootNodes) === null || _w === void 0 ? void 0 : _w[0]);
                     this.componentChange.next(this.ɵComponentRef);

package/es2015/layout/src/directives/layoutComponentRenderer/layoutComponentRenderer.directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"layoutComponentRenderer.directive.js","sourceRoot":"","sources":["../../../../../layout/src/directives/layoutComponentRenderer/layoutComponentRenderer.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {ComponentRef, Directive, EmbeddedViewRef, EventEmitter, Inject, Injector, Input, OnChanges, OnDestroy, Optional, Output, SimpleChanges, SkipSelf, ValueProvider, ViewContainerRef} from '@angular/core';\nimport {Logger, LOGGER} from '@anglr/common';\nimport {addSimpleChange, DynamicItemExtensionType, DynamicItemLoader, SCOPE_ID} from '@anglr/dynamic';\nimport {nameof} from '@jscrpt/common';\n\nimport {LayoutComponentRendererDirectiveOptions} from './layoutComponentRenderer.options';\nimport {MissingTypeBehavior} from './layoutComponentRenderer.types';\nimport {NotFoundLayoutTypeSAComponent} from '../../components';\nimport {LayoutComponent, LayoutComponentMetadata, LayoutComponentTransform} from '../../interfaces';\nimport {LAYOUT_COMPONENTS_LOADER, LAYOUT_COMPONENT_CHILD_EXTENSIONS, LAYOUT_COMPONENT_TRANSFORM} from '../../misc/tokens';\nimport {LayoutComponentDef} from '../../misc/types';\n\n//TODO: refactor input, output names\n\n/**\n * Renders layout component from metadata\n */\n@Directive(\n{\n    selector: '[layoutComponentRenderer]',\n    exportAs: 'layoutComponentRenderer',\n    providers: \n    [\n        <ValueProvider>\n        {\n            provide: LAYOUT_COMPONENT_CHILD_EXTENSIONS,\n            useValue: null,\n        }\n    ],\n    standalone: true\n})\nexport class LayoutComponentRendererSADirective<TComponent extends LayoutComponent<TComponentOptions> = any, TComponentOptions = any> implements OnChanges, OnDestroy\n{\n    //######################### protected properties #########################\n\n    /**\n     * Created component reference\n     */\n    protected ɵComponentRef: ComponentRef<TComponent>|null = null;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Type that should be dynamically created into current container\n     */\n    @Input('layoutComponentRenderer')\n    public componentMetadata: LayoutComponentMetadata<TComponentOptions>|undefined|null = null;\n\n    /**\n     * Custom injector used as parent for layout components tree\n     */\n    @Input('layoutComponentRendererInjector')\n    public customInjector: Injector|undefined|null;\n\n    /**\n     * Disables component metadata transformer\n     */\n    @Input('layoutComponentRendererDisableTransformer')\n    public disableTransformer: boolean = false;\n\n    //######################### public properties - outputs #########################\n\n    /**\n     * Occurs when rendered component changes\n     */\n    @Output('layoutComponentRendererComponentChange')\n    public componentChange: EventEmitter<ComponentRef<TComponent>|null> = new EventEmitter<ComponentRef<TComponent>|null>();\n\n    /**\n     * Occurs when components element changes\n     */\n    @Output()\n    public componentElementChange: EventEmitter<HTMLElement|null> = new EventEmitter<HTMLElement|null>();\n\n    //######################### protected properties #########################\n\n    /**\n     * Instance of dynamically created component\n     */\n    protected get component(): TComponent|null\n    {\n        if(!this.ɵComponentRef)\n        {\n            return null;\n        }\n\n        return this.ɵComponentRef.instance;\n    }\n\n    //######################### public properties #########################\n\n    /**\n     * Gets component ref of created component or null\n     */\n    public get componentRef(): ComponentRef<TComponent>|null\n    {\n        return this.ɵComponentRef;\n    }\n\n    //######################### constructor #########################\n    constructor(protected viewContainerRef: ViewContainerRef,\n                @Inject(LAYOUT_COMPONENTS_LOADER) protected loader: DynamicItemLoader<LayoutComponentDef>,\n                @Inject(LAYOUT_COMPONENT_CHILD_EXTENSIONS) @Optional() @SkipSelf() protected childExtensions?: DynamicItemExtensionType[]|null,\n                @Inject(SCOPE_ID) @Optional() protected scopeId?: string,\n                @Optional() protected options?: LayoutComponentRendererDirectiveOptions,\n                @Inject(LAYOUT_COMPONENT_TRANSFORM) @Optional() protected metadataTransformer?: LayoutComponentTransform,\n                @Inject(LOGGER) @Optional() protected logger?: Logger,)\n    {\n        if(!this.options || !(this.options instanceof LayoutComponentRendererDirectiveOptions))\n        {\n            this.options = new LayoutComponentRendererDirectiveOptions();\n        }\n    }\n\n    //######################### public methods - implementation of OnChanges #########################\n\n    /**\n     * Called when input value changes\n     */\n    public async ngOnChanges(changes: SimpleChanges): Promise<void>\n    {\n        this.logger?.debug('LayoutComponentRendererSADirective: rendering component {{@id}}', {id: this.componentMetadata?.id});\n\n        this.ngOnDestroy();\n        this.viewContainerRef.clear();\n\n        // component metadata is present\n        if(nameof<LayoutComponentRendererSADirective<TComponent, TComponentOptions>>('componentMetadata') in changes && this.componentMetadata)\n        {\n            const injector = this.customInjector ?? this.viewContainerRef.injector;\n            let componentMetadata = this.componentMetadata;\n            const scopeId = this.componentMetadata.scope;\n\n            if(this.metadataTransformer && !this.disableTransformer)\n            {\n                componentMetadata = this.metadataTransformer(this.componentMetadata, injector);\n            }\n            \n            const layoutComponentType = await this.loader.loadItem(componentMetadata);\n\n            if(!layoutComponentType)\n            {\n                this.logger?.warn('LayoutComponentRendererSADirective: Unable to find layout component type {{@type}}', {type: {name: componentMetadata.name, package: componentMetadata.package}});\n\n                switch(this.options?.missingTypeBehavior)\n                {\n                    default:\n                    //case MissingTypeBehavior.ShowNotFound:\n                    {\n                        this.viewContainerRef.createComponent(NotFoundLayoutTypeSAComponent);\n\n                        break;\n                    }\n                    case MissingTypeBehavior.Ignore:\n                    {\n                        //do nothing\n\n                        break;\n                    }\n                    case MissingTypeBehavior.ThrowError:\n                    {\n                        throw new Error(`LayoutComponentRendererSADirective: Unable to find layout component type Name: ${componentMetadata.name} Package: ${componentMetadata.package}`);\n                    }\n                }\n\n                return;\n            }\n\n            const usedInjector = Injector.create(\n            {\n                parent: injector,\n                providers:\n                [\n                    <ValueProvider>\n                    {\n                        provide: SCOPE_ID,\n                        useValue: scopeId ?? this.scopeId ?? null,\n                    },\n                    <ValueProvider>\n                    {\n                        provide: LAYOUT_COMPONENT_CHILD_EXTENSIONS,\n                        useValue: layoutComponentType.childExtensions,\n                    }\n                ]\n            });\n\n            this.ɵComponentRef = this.viewContainerRef.createComponent(layoutComponentType.data,\n                                                                       {\n                                                                           injector: usedInjector,\n                                                                       }) as ComponentRef<TComponent>;\n\n            this.logger?.debug('LayoutComponentRendererSADirective: component rendered {{@id}}', {id: componentMetadata?.id});\n            const component = this.component;\n\n            if(component)\n            {\n                //registers extensions and child extensions\n                component.registerExtensions(\n                [\n                    ...this.childExtensions?.map(itm => new itm(componentMetadata)) ?? [],\n                    ...layoutComponentType?.extensions?.map(itm => new itm(componentMetadata)) ?? [],\n                ]);\n\n                const changes: SimpleChanges = {};\n                addSimpleChange<LayoutComponent>(changes, 'options', componentMetadata.options, component.options, true);\n\n                this.logger?.debug('LayoutComponentRendererSADirective: setting options for component {{@id}}', {id: componentMetadata?.id});\n                component.options = componentMetadata.options;\n                \n                this.logger?.debug('LayoutComponentRendererSADirective: setting changes for component {{@id}}', {id: componentMetadata?.id});\n                await component.ngOnChanges?.(changes);\n\n                this.logger?.debug('LayoutComponentRendererSADirective: initializing component {{@id}}', {id: componentMetadata?.id});\n                await component.ngOnInit?.();\n\n                this.logger?.debug('LayoutComponentRendererSADirective: invalidating component visuals {{@id}}', {id: componentMetadata?.id});\n                // component.invalidateVisuals();\n                this.ɵComponentRef?.changeDetectorRef.markForCheck();\n\n                this.componentElementChange.next((this.ɵComponentRef?.hostView as EmbeddedViewRef<unknown>)?.rootNodes?.[0] as HTMLElement);\n                this.componentChange.next(this.ɵComponentRef);\n            }\n        }\n    }\n\n    //######################### public methods - implementation of OnDestroy #########################\n\n    /**\n     * Called when component is destroyed\n     */\n    public ngOnDestroy(): void\n    {\n        if(this.ɵComponentRef)\n        {\n            this.logger?.debug('LayoutComponentRendererSADirective: destroying component {{@id}}', {id: this.componentMetadata?.id, designer: this.disableTransformer});\n    \n            this.ɵComponentRef?.destroy();\n            this.ɵComponentRef = null;\n            this.componentChange.next(null);\n            this.componentElementChange.next(null);\n        }\n    }\n}"]}
+{"version":3,"file":"layoutComponentRenderer.directive.js","sourceRoot":"","sources":["../../../../../layout/src/directives/layoutComponentRenderer/layoutComponentRenderer.directive.ts"],"names":[],"mappings":";AAAA,OAAO,EAAe,SAAS,EAAmB,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAwB,QAAQ,EAAE,MAAM,EAAiB,QAAQ,EAAiB,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAChN,OAAO,EAAS,MAAM,EAAC,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAC,eAAe,EAA4B,iBAAiB,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AACtG,OAAO,EAAC,MAAM,EAAC,MAAM,gBAAgB,CAAC;AAEtC,OAAO,EAAC,uCAAuC,EAAC,MAAM,mCAAmC,CAAC;AAC1F,OAAO,EAAC,mBAAmB,EAAC,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAC,6BAA6B,EAAC,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAC,wBAAwB,EAAE,iCAAiC,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAC;;;;AAG1H,oCAAoC;AAEpC;;GAEG;AAeH,MAAM,OAAO,kCAAkC;IA2C3C,0EAA0E;IAE1E;;OAEG;IACH,IAAc,SAAS;QAEnB,IAAG,CAAC,IAAI,CAAC,aAAa,EACtB;YACI,OAAO,IAAI,CAAC;SACf;QAED,OAAO,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;IACvC,CAAC;IAED,uEAAuE;IAEvE;;OAEG;IACH,IAAW,YAAY;QAEnB,OAAO,IAAI,CAAC,aAAa,CAAC;IAC9B,CAAC;IAED,iEAAiE;IACjE,YAAsB,gBAAkC,EACA,MAA6C,EACZ,eAAiD,EACtF,OAAgB,EAClC,OAAiD,EACb,mBAA8C,EAClE,MAAe;QAN3C,qBAAgB,GAAhB,gBAAgB,CAAkB;QACA,WAAM,GAAN,MAAM,CAAuC;QACZ,oBAAe,GAAf,eAAe,CAAkC;QACtF,YAAO,GAAP,OAAO,CAAS;QAClC,YAAO,GAAP,OAAO,CAA0C;QACb,wBAAmB,GAAnB,mBAAmB,CAA2B;QAClE,WAAM,GAAN,MAAM,CAAS;QAzEjE,0EAA0E;QAE1E;;WAEG;QACO,kBAAa,GAAkC,IAAI,CAAC;QAE9D,gFAAgF;QAEhF;;WAEG;QAEI,sBAAiB,GAA8D,IAAI,CAAC;QAQ3F;;WAEG;QAEI,uBAAkB,GAAY,KAAK,CAAC;QAE3C,iFAAiF;QAEjF;;WAEG;QAEI,oBAAe,GAAgD,IAAI,YAAY,EAAiC,CAAC;QAExH;;WAEG;QAEI,2BAAsB,GAAmC,IAAI,YAAY,EAAoB,CAAC;QAoCjG,IAAG,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,YAAY,uCAAuC,CAAC,EACtF;YACI,IAAI,CAAC,OAAO,GAAG,IAAI,uCAAuC,EAAE,CAAC;SAChE;IACL,CAAC;IAED,kGAAkG;IAElG;;OAEG;IACU,WAAW,CAAC,OAAsB;;;YAE3C,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,CAAC,iEAAiE,EAAE,EAAC,EAAE,EAAE,MAAA,IAAI,CAAC,iBAAiB,0CAAE,EAAE,EAAC,CAAC,CAAC;YAExH,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;YAE9B,gCAAgC;YAChC,IAAG,MAAM,CAAoE,mBAAmB,CAAC,IAAI,OAAO,IAAI,IAAI,CAAC,iBAAiB,EACtI;gBACI,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,cAAc,mCAAI,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;gBACvE,IAAI,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC;gBAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;gBAE7C,IAAG,IAAI,CAAC,mBAAmB,IAAI,CAAC,IAAI,CAAC,kBAAkB,EACvD;oBACI,iBAAiB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC;iBAClF;gBAED,MAAM,mBAAmB,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;gBAE1E,IAAG,CAAC,mBAAmB,EACvB;oBACI,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,CAAC,oFAAoF,EAAE,EAAC,IAAI,EAAE,EAAC,IAAI,EAAE,iBAAiB,CAAC,IAAI,EAAE,OAAO,EAAE,iBAAiB,CAAC,OAAO,EAAC,EAAC,CAAC,CAAC;oBAEpL,QAAO,MAAA,IAAI,CAAC,OAAO,0CAAE,mBAAmB,EACxC;wBACI;4BACA,wCAAwC;4BACxC;gCACI,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,6BAA6B,CAAC,CAAC;gCAErE,MAAM;6BACT;wBACD,KAAK,mBAAmB,CAAC,MAAM;4BAC/B;gCACI,YAAY;gCAEZ,MAAM;6BACT;wBACD,KAAK,mBAAmB,CAAC,UAAU;4BACnC;gCACI,MAAM,IAAI,KAAK,CAAC,kFAAkF,iBAAiB,CAAC,IAAI,aAAa,iBAAiB,CAAC,OAAO,EAAE,CAAC,CAAC;6BACrK;qBACJ;oBAED,OAAO;iBACV;gBAED,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CACpC;oBACI,MAAM,EAAE,QAAQ;oBAChB,SAAS,EACT;wBAEI;4BACI,OAAO,EAAE,QAAQ;4BACjB,QAAQ,EAAE,MAAA,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,IAAI,CAAC,OAAO,mCAAI,IAAI;yBAC5C;wBAED;4BACI,OAAO,EAAE,iCAAiC;4BAC1C,QAAQ,EAAE,mBAAmB,CAAC,eAAe;yBAChD;qBACJ;iBACJ,CAAC,CAAC;gBAEH,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,mBAAmB,CAAC,IAAI,EACxB;oBACI,QAAQ,EAAE,YAAY;iBACzB,CAA6B,CAAC;gBAE1F,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,CAAC,gEAAgE,EAAE,EAAC,EAAE,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,EAAE,EAAC,CAAC,CAAC;gBAClH,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;gBAEjC,IAAG,SAAS,EACZ;oBACI,2CAA2C;oBAC3C,SAAS,CAAC,kBAAkB,CAC5B;wBACI,GAAG,MAAA,MAAA,IAAI,CAAC,eAAe,0CAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,iBAAiB,CAAC,CAAC,mCAAI,EAAE;wBACrE,GAAG,MAAA,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,UAAU,0CAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,iBAAiB,CAAC,CAAC,mCAAI,EAAE;qBACnF,CAAC,CAAC;oBAEH,MAAM,OAAO,GAAkB,EAAE,CAAC;oBAClC,eAAe,CAAkB,OAAO,EAAE,SAAS,EAAE,iBAAiB,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;oBAEzG,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,CAAC,2EAA2E,EAAE,EAAC,EAAE,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,EAAE,EAAC,CAAC,CAAC;oBAC7H,SAAS,CAAC,OAAO,GAAG,iBAAiB,CAAC,OAAO,CAAC;oBAE9C,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,CAAC,2EAA2E,EAAE,EAAC,EAAE,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,EAAE,EAAC,CAAC,CAAC;oBAC7H,MAAM,CAAA,MAAA,SAAS,CAAC,WAAW,0DAAG,OAAO,CAAC,CAAA,CAAC;oBAEvC,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,CAAC,oEAAoE,EAAE,EAAC,EAAE,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,EAAE,EAAC,CAAC,CAAC;oBACtH,MAAM,CAAA,MAAA,SAAS,CAAC,QAAQ,yDAAI,CAAA,CAAC;oBAE7B,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,CAAC,4EAA4E,EAAE,EAAC,EAAE,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,EAAE,EAAC,CAAC,CAAC;oBAC9H,MAAA,IAAI,CAAC,aAAa,0CAAE,iBAAiB,CAAC,YAAY,EAAE,CAAC;oBAErD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,MAAA,MAAC,MAAA,IAAI,CAAC,aAAa,0CAAE,QAAqC,0CAAE,SAAS,0CAAG,CAAC,CAAgB,CAAC,CAAC;oBAC5H,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;iBACjD;aACJ;;KACJ;IAED,kGAAkG;IAElG;;OAEG;IACI,WAAW;;QAEd,IAAG,IAAI,CAAC,aAAa,EACrB;YACI,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,CAAC,kEAAkE,EAAE,EAAC,EAAE,EAAE,MAAA,IAAI,CAAC,iBAAiB,0CAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAC,CAAC,CAAC;YAE5J,MAAA,IAAI,CAAC,aAAa,0CAAE,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAChC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC1C;IACL,CAAC;;+HAjNQ,kCAAkC,kDAsEvB,wBAAwB,aACxB,iCAAiC,6CACjC,QAAQ,oGAER,0BAA0B,6BAC1B,MAAM;mHA3EjB,kCAAkC,mbAT3C;QAEI;YACI,OAAO,EAAE,iCAAiC;YAC1C,QAAQ,EAAE,IAAI;SACjB;KACJ;2FAGQ,kCAAkC;kBAd9C,SAAS;mBACV;oBACI,QAAQ,EAAE,2BAA2B;oBACrC,QAAQ,EAAE,yBAAyB;oBACnC,SAAS,EACT;wBAEI;4BACI,OAAO,EAAE,iCAAiC;4BAC1C,QAAQ,EAAE,IAAI;yBACjB;qBACJ;oBACD,UAAU,EAAE,IAAI;iBACnB;;0BAuEgB,MAAM;2BAAC,wBAAwB;;0BAC/B,MAAM;2BAAC,iCAAiC;;0BAAG,QAAQ;;0BAAI,QAAQ;;0BAC/D,MAAM;2BAAC,QAAQ;;0BAAG,QAAQ;;0BAC1B,QAAQ;;0BACR,MAAM;2BAAC,0BAA0B;;0BAAG,QAAQ;;0BAC5C,MAAM;2BAAC,MAAM;;0BAAG,QAAQ;yCA5D9B,iBAAiB;sBADvB,KAAK;uBAAC,yBAAyB;gBAOzB,cAAc;sBADpB,KAAK;uBAAC,iCAAiC;gBAOjC,kBAAkB;sBADxB,KAAK;uBAAC,2CAA2C;gBAS3C,eAAe;sBADrB,MAAM;uBAAC,wCAAwC;gBAOzC,sBAAsB;sBAD5B,MAAM","sourcesContent":["import {ComponentRef, Directive, EmbeddedViewRef, EventEmitter, Inject, Injector, Input, OnChanges, OnDestroy, Optional, Output, SimpleChanges, SkipSelf, ValueProvider, ViewContainerRef} from '@angular/core';\nimport {Logger, LOGGER} from '@anglr/common';\nimport {addSimpleChange, DynamicItemExtensionType, DynamicItemLoader, SCOPE_ID} from '@anglr/dynamic';\nimport {nameof} from '@jscrpt/common';\n\nimport {LayoutComponentRendererDirectiveOptions} from './layoutComponentRenderer.options';\nimport {MissingTypeBehavior} from './layoutComponentRenderer.types';\nimport {NotFoundLayoutTypeSAComponent} from '../../components';\nimport {LayoutComponent, LayoutComponentMetadata, LayoutComponentTransform} from '../../interfaces';\nimport {LAYOUT_COMPONENTS_LOADER, LAYOUT_COMPONENT_CHILD_EXTENSIONS, LAYOUT_COMPONENT_TRANSFORM} from '../../misc/tokens';\nimport {LayoutComponentDef} from '../../misc/types';\n\n//TODO: refactor input, output names\n\n/**\n * Renders layout component from metadata\n */\n@Directive(\n{\n    selector: '[layoutComponentRenderer]',\n    exportAs: 'layoutComponentRenderer',\n    providers: \n    [\n        <ValueProvider>\n        {\n            provide: LAYOUT_COMPONENT_CHILD_EXTENSIONS,\n            useValue: null,\n        }\n    ],\n    standalone: true\n})\nexport class LayoutComponentRendererSADirective<TComponent extends LayoutComponent<TComponentOptions> = any, TComponentOptions = any> implements OnChanges, OnDestroy\n{\n    //######################### protected properties #########################\n\n    /**\n     * Created component reference\n     */\n    protected ɵComponentRef: ComponentRef<TComponent>|null = null;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Type that should be dynamically created into current container\n     */\n    @Input('layoutComponentRenderer')\n    public componentMetadata: LayoutComponentMetadata<TComponentOptions>|undefined|null = null;\n\n    /**\n     * Custom injector used as parent for layout components tree\n     */\n    @Input('layoutComponentRendererInjector')\n    public customInjector: Injector|undefined|null;\n\n    /**\n     * Disables component metadata transformer\n     */\n    @Input('layoutComponentRendererDisableTransformer')\n    public disableTransformer: boolean = false;\n\n    //######################### public properties - outputs #########################\n\n    /**\n     * Occurs when rendered component changes\n     */\n    @Output('layoutComponentRendererComponentChange')\n    public componentChange: EventEmitter<ComponentRef<TComponent>|null> = new EventEmitter<ComponentRef<TComponent>|null>();\n\n    /**\n     * Occurs when components element changes\n     */\n    @Output()\n    public componentElementChange: EventEmitter<HTMLElement|null> = new EventEmitter<HTMLElement|null>();\n\n    //######################### protected properties #########################\n\n    /**\n     * Instance of dynamically created component\n     */\n    protected get component(): TComponent|null\n    {\n        if(!this.ɵComponentRef)\n        {\n            return null;\n        }\n\n        return this.ɵComponentRef.instance;\n    }\n\n    //######################### public properties #########################\n\n    /**\n     * Gets component ref of created component or null\n     */\n    public get componentRef(): ComponentRef<TComponent>|null\n    {\n        return this.ɵComponentRef;\n    }\n\n    //######################### constructor #########################\n    constructor(protected viewContainerRef: ViewContainerRef,\n                @Inject(LAYOUT_COMPONENTS_LOADER) protected loader: DynamicItemLoader<LayoutComponentDef>,\n                @Inject(LAYOUT_COMPONENT_CHILD_EXTENSIONS) @Optional() @SkipSelf() protected childExtensions?: DynamicItemExtensionType[]|null,\n                @Inject(SCOPE_ID) @Optional() protected scopeId?: string,\n                @Optional() protected options?: LayoutComponentRendererDirectiveOptions,\n                @Inject(LAYOUT_COMPONENT_TRANSFORM) @Optional() protected metadataTransformer?: LayoutComponentTransform,\n                @Inject(LOGGER) @Optional() protected logger?: Logger,)\n    {\n        if(!this.options || !(this.options instanceof LayoutComponentRendererDirectiveOptions))\n        {\n            this.options = new LayoutComponentRendererDirectiveOptions();\n        }\n    }\n\n    //######################### public methods - implementation of OnChanges #########################\n\n    /**\n     * Called when input value changes\n     */\n    public async ngOnChanges(changes: SimpleChanges): Promise<void>\n    {\n        this.logger?.debug('LayoutComponentRendererSADirective: rendering component {{@id}}', {id: this.componentMetadata?.id});\n\n        this.ngOnDestroy();\n        this.viewContainerRef.clear();\n\n        // component metadata is present\n        if(nameof<LayoutComponentRendererSADirective<TComponent, TComponentOptions>>('componentMetadata') in changes && this.componentMetadata)\n        {\n            const injector = this.customInjector ?? this.viewContainerRef.injector;\n            let componentMetadata = this.componentMetadata;\n            const scopeId = this.componentMetadata.scope;\n\n            if(this.metadataTransformer && !this.disableTransformer)\n            {\n                componentMetadata = this.metadataTransformer(this.componentMetadata, injector);\n            }\n            \n            const layoutComponentType = await this.loader.loadItem(componentMetadata);\n\n            if(!layoutComponentType)\n            {\n                this.logger?.warn('LayoutComponentRendererSADirective: Unable to find layout component type {{@type}}', {type: {name: componentMetadata.name, package: componentMetadata.package}});\n\n                switch(this.options?.missingTypeBehavior)\n                {\n                    default:\n                    //case MissingTypeBehavior.ShowNotFound:\n                    {\n                        this.viewContainerRef.createComponent(NotFoundLayoutTypeSAComponent);\n\n                        break;\n                    }\n                    case MissingTypeBehavior.Ignore:\n                    {\n                        //do nothing\n\n                        break;\n                    }\n                    case MissingTypeBehavior.ThrowError:\n                    {\n                        throw new Error(`LayoutComponentRendererSADirective: Unable to find layout component type Name: ${componentMetadata.name} Package: ${componentMetadata.package}`);\n                    }\n                }\n\n                return;\n            }\n\n            const usedInjector = Injector.create(\n            {\n                parent: injector,\n                providers:\n                [\n                    <ValueProvider>\n                    {\n                        provide: SCOPE_ID,\n                        useValue: scopeId ?? this.scopeId ?? null,\n                    },\n                    <ValueProvider>\n                    {\n                        provide: LAYOUT_COMPONENT_CHILD_EXTENSIONS,\n                        useValue: layoutComponentType.childExtensions,\n                    }\n                ]\n            });\n\n            this.ɵComponentRef = this.viewContainerRef.createComponent(layoutComponentType.data,\n                                                                       {\n                                                                           injector: usedInjector,\n                                                                       }) as ComponentRef<TComponent>;\n\n            this.logger?.debug('LayoutComponentRendererSADirective: component rendered {{@id}}', {id: componentMetadata?.id});\n            const component = this.component;\n\n            if(component)\n            {\n                //registers extensions and child extensions\n                component.registerExtensions(\n                [\n                    ...this.childExtensions?.map(itm => new itm(componentMetadata)) ?? [],\n                    ...layoutComponentType?.extensions?.map(itm => new itm(componentMetadata)) ?? [],\n                ]);\n\n                const changes: SimpleChanges = {};\n                addSimpleChange<LayoutComponent>(changes, 'options', componentMetadata.options, component.options, true);\n\n                this.logger?.debug('LayoutComponentRendererSADirective: setting options for component {{@id}}', {id: componentMetadata?.id});\n                component.options = componentMetadata.options;\n                \n                this.logger?.debug('LayoutComponentRendererSADirective: setting changes for component {{@id}}', {id: componentMetadata?.id});\n                await component.ngOnChanges?.(changes);\n\n                this.logger?.debug('LayoutComponentRendererSADirective: initializing component {{@id}}', {id: componentMetadata?.id});\n                await component.ngOnInit?.();\n\n                this.logger?.debug('LayoutComponentRendererSADirective: invalidating component visuals {{@id}}', {id: componentMetadata?.id});\n                this.ɵComponentRef?.changeDetectorRef.markForCheck();\n\n                this.componentElementChange.next((this.ɵComponentRef?.hostView as EmbeddedViewRef<unknown>)?.rootNodes?.[0] as HTMLElement);\n                this.componentChange.next(this.ɵComponentRef);\n            }\n        }\n    }\n\n    //######################### public methods - implementation of OnDestroy #########################\n\n    /**\n     * Called when component is destroyed\n     */\n    public ngOnDestroy(): void\n    {\n        if(this.ɵComponentRef)\n        {\n            this.logger?.debug('LayoutComponentRendererSADirective: destroying component {{@id}}', {id: this.componentMetadata?.id, designer: this.disableTransformer});\n    \n            this.ɵComponentRef?.destroy();\n            this.ɵComponentRef = null;\n            this.componentChange.next(null);\n            this.componentElementChange.next(null);\n        }\n    }\n}"]}

package/es2015/math-components/src/dynamicItems/divide/divide.relations.js

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from "tslib";
 import { Input } from '@angular/core';
 import { DynamicOutput, PureRelationsComponent } from '@anglr/dynamic/relations';
 import { RelationsEditorMetadata } from '@anglr/dynamic/relations-editor';
-import { isNumber, isPresent, nameof } from '@jscrpt/common';
+import { isNumber, isPresent, isString, nameof } from '@jscrpt/common';
 import { MathDivideRelationsMetadataLoader } from './divide.metadata';
 let MathDivideRelations = class MathDivideRelations {
     //######################### public methods #########################
@@ -11,6 +11,12 @@ let MathDivideRelations = class MathDivideRelations {
     ngOnChanges(changes) {
         if (nameof('input1') in changes ||
             nameof('input2') in changes) {
+            if (isString(this.input1)) {
+                this.input1 = parseFloat(this.input1);
+            }
+            if (isString(this.input2)) {
+                this.input2 = parseFloat(this.input2);
+            }
             if (isNumber(this.input1) &&
                 isNumber(this.input2)) {
                 if (this.input2 === 0) {

package/es2015/math-components/src/dynamicItems/divide/divide.relations.js.map

@@ -1 +1 @@
-{"version":3,"file":"divide.relations.js","sourceRoot":"","sources":["../../../../../math-components/src/dynamicItems/divide/divide.relations.ts"],"names":[],"mappings":";AAAA,OAAO,EAAC,KAAK,EAAgB,MAAM,eAAe,CAAC;AACnD,OAAO,EAAC,aAAa,EAAE,sBAAsB,EAAqB,MAAM,0BAA0B,CAAC;AACnG,OAAO,EAAC,uBAAuB,EAAC,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAC,MAAM,gBAAgB,CAAC;AAE3D,OAAO,EAAC,iCAAiC,EAAC,MAAM,mBAAmB,CAAC;AAK7D,IAAM,mBAAmB,GAAzB,MAAM,mBAAmB;IAmB5B,oEAAoE;IAE7D,iBAAiB;IAExB,CAAC;IAEM,WAAW,CAAC,OAAsB;QAErC,IAAG,MAAM,CAA6B,QAAQ,CAAC,IAAI,OAAO;YACvD,MAAM,CAA6B,QAAQ,CAAC,IAAI,OAAO,EAC1D;YACI,IAAI,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;gBACrB,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EACzB;gBACI,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EACrB;oBACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;oBACnB,OAAO;iBACV;gBAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;gBACxC,OAAO;aACV;YAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAC3B;gBACI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;gBAChB,OAAO;aACV;YAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAC3B;gBACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;gBAC1B,OAAO;aACV;YAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACtB;IACL,CAAC;CAEJ,CAAA;AAtDU;IADN,KAAK,EAAE;;mDAC6B;AAG9B;IADN,KAAK,EAAE;;mDAC6B;AAK9B;IADN,aAAa,EAAE;;mDACqB;AAb5B,mBAAmB;IAF/B,sBAAsB,EAAE;IACxB,uBAAuB,CAAC,iCAAiC,CAAC;GAC9C,mBAAmB,CA2D/B","sourcesContent":["import {Input, SimpleChanges} from '@angular/core';\nimport {DynamicOutput, PureRelationsComponent, RelationsComponent} from '@anglr/dynamic/relations';\nimport {RelationsEditorMetadata} from '@anglr/dynamic/relations-editor';\nimport {isNumber, isPresent, nameof} from '@jscrpt/common';\n\nimport {MathDivideRelationsMetadataLoader} from './divide.metadata';\nimport {MathDivideRelationsOptions} from './divide.options';\n\n@PureRelationsComponent()\n@RelationsEditorMetadata(MathDivideRelationsMetadataLoader)\nexport class MathDivideRelations implements RelationsComponent<MathDivideRelationsOptions>\n{\n    //######################### public proeperties - inputs #########################\n\n    @Input()\n    public input1: number|null|undefined;\n\n    @Input()\n    public input2: number|null|undefined;\n\n    //######################### public properties - dynamic outputs #########################\n\n    @DynamicOutput()\n    public result: number|null|undefined;\n\n    //######################### public properties #########################\n\n    relationsOptions: MathDivideRelationsOptions|undefined;\n\n    //######################### public methods #########################\n\n    public invalidateVisuals(): void\n    {\n    }\n\n    public ngOnChanges(changes: SimpleChanges): void\n    {\n        if(nameof<MathDivideRelationsOptions>('input1') in changes ||\n           nameof<MathDivideRelationsOptions>('input2') in changes)\n        {\n            if (isNumber(this.input1) &&\n                isNumber(this.input2))\n            {\n                if (this.input2 === 0)\n                {\n                    this.result = null;\n                    return;\n                }\n\n                this.result = this.input1 / this.input2;\n                return;\n            }\n\n            if (!isPresent(this.input1))\n            {\n                this.result = 0;\n                return;\n            }\n\n            if (!isPresent(this.input2))\n            {\n                this.result = this.input1;\n                return;\n            }\n\n            this.result = null;\n        }\n    }\n\n}"]}
+{"version":3,"file":"divide.relations.js","sourceRoot":"","sources":["../../../../../math-components/src/dynamicItems/divide/divide.relations.ts"],"names":[],"mappings":";AAAA,OAAO,EAAC,KAAK,EAAgB,MAAM,eAAe,CAAC;AACnD,OAAO,EAAC,aAAa,EAAE,sBAAsB,EAAqB,MAAM,0BAA0B,CAAC;AACnG,OAAO,EAAC,uBAAuB,EAAC,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAC,MAAM,gBAAgB,CAAC;AAErE,OAAO,EAAC,iCAAiC,EAAC,MAAM,mBAAmB,CAAC;AAK7D,IAAM,mBAAmB,GAAzB,MAAM,mBAAmB;IAmB5B,oEAAoE;IAE7D,iBAAiB;IAExB,CAAC;IAEM,WAAW,CAAC,OAAsB;QAErC,IAAG,MAAM,CAA6B,QAAQ,CAAC,IAAI,OAAO;YACvD,MAAM,CAA6B,QAAQ,CAAC,IAAI,OAAO,EAC1D;YACI,IAAI,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EACzB;gBACI,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;aACzC;YAED,IAAI,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EACzB;gBACI,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;aACzC;YAED,IAAI,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;gBACrB,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EACzB;gBACI,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EACrB;oBACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;oBACnB,OAAO;iBACV;gBAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;gBACxC,OAAO;aACV;YAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAC3B;gBACI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;gBAChB,OAAO;aACV;YAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAC3B;gBACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;gBAC1B,OAAO;aACV;YAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACtB;IACL,CAAC;CAEJ,CAAA;AAhEU;IADN,KAAK,EAAE;;mDAC6B;AAG9B;IADN,KAAK,EAAE;;mDAC6B;AAK9B;IADN,aAAa,EAAE;;mDACqB;AAb5B,mBAAmB;IAF/B,sBAAsB,EAAE;IACxB,uBAAuB,CAAC,iCAAiC,CAAC;GAC9C,mBAAmB,CAqE/B","sourcesContent":["import {Input, SimpleChanges} from '@angular/core';\nimport {DynamicOutput, PureRelationsComponent, RelationsComponent} from '@anglr/dynamic/relations';\nimport {RelationsEditorMetadata} from '@anglr/dynamic/relations-editor';\nimport {isNumber, isPresent, isString, nameof} from '@jscrpt/common';\n\nimport {MathDivideRelationsMetadataLoader} from './divide.metadata';\nimport {MathDivideRelationsOptions} from './divide.options';\n\n@PureRelationsComponent()\n@RelationsEditorMetadata(MathDivideRelationsMetadataLoader)\nexport class MathDivideRelations implements RelationsComponent<MathDivideRelationsOptions>\n{\n    //######################### public proeperties - inputs #########################\n\n    @Input()\n    public input1: number|null|undefined;\n\n    @Input()\n    public input2: number|null|undefined;\n\n    //######################### public properties - dynamic outputs #########################\n\n    @DynamicOutput()\n    public result: number|null|undefined;\n\n    //######################### public properties #########################\n\n    relationsOptions: MathDivideRelationsOptions|undefined;\n\n    //######################### public methods #########################\n\n    public invalidateVisuals(): void\n    {\n    }\n\n    public ngOnChanges(changes: SimpleChanges): void\n    {\n        if(nameof<MathDivideRelationsOptions>('input1') in changes ||\n           nameof<MathDivideRelationsOptions>('input2') in changes)\n        {\n            if (isString(this.input1))\n            {\n                this.input1 = parseFloat(this.input1);\n            }\n\n            if (isString(this.input2))\n            {\n                this.input2 = parseFloat(this.input2);\n            }\n\n            if (isNumber(this.input1) &&\n                isNumber(this.input2))\n            {\n                if (this.input2 === 0)\n                {\n                    this.result = null;\n                    return;\n                }\n\n                this.result = this.input1 / this.input2;\n                return;\n            }\n\n            if (!isPresent(this.input1))\n            {\n                this.result = 0;\n                return;\n            }\n\n            if (!isPresent(this.input2))\n            {\n                this.result = this.input1;\n                return;\n            }\n\n            this.result = null;\n        }\n    }\n\n}"]}

package/es2015/math-components/src/dynamicItems/subtract/subtract.relations.js

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from "tslib";
 import { Input } from '@angular/core';
 import { DynamicOutput, PureRelationsComponent } from '@anglr/dynamic/relations';
 import { RelationsEditorMetadata } from '@anglr/dynamic/relations-editor';
-import { isNumber, isPresent, nameof } from '@jscrpt/common';
+import { isNumber, isPresent, isString, nameof } from '@jscrpt/common';
 import { MathSubtractRelationsMetadataLoader } from './subtract.metadata';
 let MathSubtractRelations = class MathSubtractRelations {
     //######################### public methods #########################
@@ -11,9 +11,15 @@ let MathSubtractRelations = class MathSubtractRelations {
     ngOnChanges(changes) {
         if (nameof('input1') in changes ||
             nameof('input2') in changes) {
+            if (isString(this.input1)) {
+                this.input1 = parseFloat(this.input1);
+            }
+            if (isString(this.input2)) {
+                this.input2 = parseFloat(this.input2);
+            }
             if (isNumber(this.input1) &&
                 isNumber(this.input2)) {
-                this.result = this.input1 - this.input2;
+                this.result = +this.input1 - +this.input2;
                 return;
             }
             if (!isPresent(this.input1) &&

package/es2015/math-components/src/dynamicItems/subtract/subtract.relations.js.map

@@ -1 +1 @@
-{"version":3,"file":"subtract.relations.js","sourceRoot":"","sources":["../../../../../math-components/src/dynamicItems/subtract/subtract.relations.ts"],"names":[],"mappings":";AAAA,OAAO,EAAC,KAAK,EAAgB,MAAM,eAAe,CAAC;AACnD,OAAO,EAAC,aAAa,EAAE,sBAAsB,EAAqB,MAAM,0BAA0B,CAAC;AACnG,OAAO,EAAC,uBAAuB,EAAC,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAC,MAAM,gBAAgB,CAAC;AAE3D,OAAO,EAAC,mCAAmC,EAAC,MAAM,qBAAqB,CAAC;AAKjE,IAAM,qBAAqB,GAA3B,MAAM,qBAAqB;IAmB9B,oEAAoE;IAE7D,iBAAiB;IAExB,CAAC;IAEM,WAAW,CAAC,OAAsB;QAErC,IAAG,MAAM,CAA+B,QAAQ,CAAC,IAAI,OAAO;YACzD,MAAM,CAA+B,QAAQ,CAAC,IAAI,OAAO,EAC5D;YACI,IAAI,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;gBACrB,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EACzB;gBACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;gBACxC,OAAO;aACV;YAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;gBACvB,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EACzB;gBACI,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;gBAC9B,OAAO;aACV;YAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAC3B;gBACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;gBAC1B,OAAO;aACV;YAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACtB;IACL,CAAC;CAEJ,CAAA;AAjDU;IADN,KAAK,EAAE;;qDAC6B;AAG9B;IADN,KAAK,EAAE;;qDAC6B;AAK9B;IADN,aAAa,EAAE;;qDACqB;AAb5B,qBAAqB;IAFjC,sBAAsB,EAAE;IACxB,uBAAuB,CAAC,mCAAmC,CAAC;GAChD,qBAAqB,CAsDjC","sourcesContent":["import {Input, SimpleChanges} from '@angular/core';\nimport {DynamicOutput, PureRelationsComponent, RelationsComponent} from '@anglr/dynamic/relations';\nimport {RelationsEditorMetadata} from '@anglr/dynamic/relations-editor';\nimport {isNumber, isPresent, nameof} from '@jscrpt/common';\n\nimport {MathSubtractRelationsMetadataLoader} from './subtract.metadata';\nimport {MathSubtractRelationsOptions} from './subtract.options';\n\n@PureRelationsComponent()\n@RelationsEditorMetadata(MathSubtractRelationsMetadataLoader)\nexport class MathSubtractRelations implements RelationsComponent<MathSubtractRelationsOptions>\n{\n    //######################### public proeperties - inputs #########################\n\n    @Input()\n    public input1: number|null|undefined;\n\n    @Input()\n    public input2: number|null|undefined;\n\n    //######################### public properties - dynamic outputs #########################\n\n    @DynamicOutput()\n    public result: number|null|undefined;\n\n    //######################### public properties #########################\n\n    relationsOptions: MathSubtractRelationsOptions|undefined;\n\n    //######################### public methods #########################\n\n    public invalidateVisuals(): void\n    {\n    }\n\n    public ngOnChanges(changes: SimpleChanges): void\n    {\n        if(nameof<MathSubtractRelationsOptions>('input1') in changes ||\n           nameof<MathSubtractRelationsOptions>('input2') in changes)\n        {\n            if (isNumber(this.input1) &&\n                isNumber(this.input2))\n            {\n                this.result = this.input1 - this.input2;\n                return;\n            }\n\n            if (!isPresent(this.input1) &&\n                isNumber(this.input2))\n            {\n                this.result = 0 - this.input2;\n                return;\n            }\n\n            if (!isPresent(this.input2))\n            {\n                this.result = this.input1;\n                return;\n            }\n\n            this.result = null;\n        }\n    }\n\n}"]}
+{"version":3,"file":"subtract.relations.js","sourceRoot":"","sources":["../../../../../math-components/src/dynamicItems/subtract/subtract.relations.ts"],"names":[],"mappings":";AAAA,OAAO,EAAC,KAAK,EAAgB,MAAM,eAAe,CAAC;AACnD,OAAO,EAAC,aAAa,EAAE,sBAAsB,EAAqB,MAAM,0BAA0B,CAAC;AACnG,OAAO,EAAC,uBAAuB,EAAC,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAC,MAAM,gBAAgB,CAAC;AAErE,OAAO,EAAC,mCAAmC,EAAC,MAAM,qBAAqB,CAAC;AAKjE,IAAM,qBAAqB,GAA3B,MAAM,qBAAqB;IAmB9B,oEAAoE;IAE7D,iBAAiB;IAExB,CAAC;IAEM,WAAW,CAAC,OAAsB;QAErC,IAAG,MAAM,CAA+B,QAAQ,CAAC,IAAI,OAAO;YACzD,MAAM,CAA+B,QAAQ,CAAC,IAAI,OAAO,EAC5D;YACI,IAAI,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EACzB;gBACI,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;aACzC;YAED,IAAI,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EACzB;gBACI,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;aACzC;YAED,IAAI,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;gBACrB,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EACzB;gBACI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;gBAC1C,OAAO;aACV;YAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;gBACvB,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EACzB;gBACI,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;gBAC9B,OAAO;aACV;YAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAC3B;gBACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;gBAC1B,OAAO;aACV;YAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACtB;IACL,CAAC;CAEJ,CAAA;AA3DU;IADN,KAAK,EAAE;;qDAC6B;AAG9B;IADN,KAAK,EAAE;;qDAC6B;AAK9B;IADN,aAAa,EAAE;;qDACqB;AAb5B,qBAAqB;IAFjC,sBAAsB,EAAE;IACxB,uBAAuB,CAAC,mCAAmC,CAAC;GAChD,qBAAqB,CAgEjC","sourcesContent":["import {Input, SimpleChanges} from '@angular/core';\nimport {DynamicOutput, PureRelationsComponent, RelationsComponent} from '@anglr/dynamic/relations';\nimport {RelationsEditorMetadata} from '@anglr/dynamic/relations-editor';\nimport {isNumber, isPresent, isString, nameof} from '@jscrpt/common';\n\nimport {MathSubtractRelationsMetadataLoader} from './subtract.metadata';\nimport {MathSubtractRelationsOptions} from './subtract.options';\n\n@PureRelationsComponent()\n@RelationsEditorMetadata(MathSubtractRelationsMetadataLoader)\nexport class MathSubtractRelations implements RelationsComponent<MathSubtractRelationsOptions>\n{\n    //######################### public proeperties - inputs #########################\n\n    @Input()\n    public input1: number|null|undefined;\n\n    @Input()\n    public input2: number|null|undefined;\n\n    //######################### public properties - dynamic outputs #########################\n\n    @DynamicOutput()\n    public result: number|null|undefined;\n\n    //######################### public properties #########################\n\n    relationsOptions: MathSubtractRelationsOptions|undefined;\n\n    //######################### public methods #########################\n\n    public invalidateVisuals(): void\n    {\n    }\n\n    public ngOnChanges(changes: SimpleChanges): void\n    {\n        if(nameof<MathSubtractRelationsOptions>('input1') in changes ||\n           nameof<MathSubtractRelationsOptions>('input2') in changes)\n        {\n            if (isString(this.input1))\n            {\n                this.input1 = parseFloat(this.input1);\n            }\n\n            if (isString(this.input2))\n            {\n                this.input2 = parseFloat(this.input2);\n            }\n\n            if (isNumber(this.input1) &&\n                isNumber(this.input2))\n            {\n                this.result = +this.input1 - +this.input2;\n                return;\n            }\n\n            if (!isPresent(this.input1) &&\n                isNumber(this.input2))\n            {\n                this.result = 0 - this.input2;\n                return;\n            }\n\n            if (!isPresent(this.input2))\n            {\n                this.result = this.input1;\n                return;\n            }\n\n            this.result = null;\n        }\n    }\n\n}"]}

package/es2015/relations-editor/src/components/relationsCanvas/relationsCanvas.component.js

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, HostBinding, HostListener, ViewChild, ElementRef, Input, Inject, ChangeDetectorRef } from '@angular/core';
+import { Component, ChangeDetectionStrategy, HostBinding, HostListener, ViewChild, ElementRef, Input, Inject, ChangeDetectorRef, EventEmitter, Output } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MetadataHistoryManager } from '@anglr/dynamic';
 import { select } from 'd3';
@@ -22,9 +22,13 @@ const DEFAULT_BACKGROUND_SIZE = 16;
  */
 const SCALE_FACTOR_MIN = 0.2;
 /**
- * Maximum sclae factor
+ * Maximum scale factor
  */
 const SCALE_FACTOR_MAX = 2;
+/**
+ * Maximal movement delta
+ */
+const MOVEMENT_DELTA_MAX = 10;
 /**
  * Component used as designer component wrapper for relations component
  */
@@ -55,6 +59,11 @@ export class RelationsCanvasSAComponent {
         this.relationManager = relationManager;
         this._changeDetector = _changeDetector;
         this.history = history;
+        //######################### private properties #########################
+        /**
+         * Identifier of canvas move timer
+         */
+        this._canvasMoveTimer = null;
         //######################### protected properties #########################
         /**
          * Subscriptions created during initialization
@@ -76,6 +85,10 @@ export class RelationsCanvasSAComponent {
          * Canvas position
          */
         this.canvasPosition = { x: 0, y: 0 };
+        /**
+         * Mouse position in canvas
+         */
+        this.mousePosition = { x: 0, y: 0 };
         /**
          * Zoom level
          */
@@ -89,6 +102,8 @@ export class RelationsCanvasSAComponent {
          * Node definition data to render
          */
         this.nodeDefinitions = [];
+        //######################### public properties - outputs #########################
+        this.convasPositionChanged = new EventEmitter();
     }
     //######################### public methods - implementation of OnInit #########################
     /**
@@ -159,6 +174,10 @@ export class RelationsCanvasSAComponent {
      * @param event - Mouse event that occured
      */
     onMouseMove(event) {
+        this.mousePosition = {
+            x: event.clientX - this.boundingBox.left,
+            y: event.clientY - this.boundingBox.top
+        };
         if (this.isDragging) {
             this.canvasPosition =
                 {
@@ -166,6 +185,36 @@ export class RelationsCanvasSAComponent {
                     y: event.clientY - this.dragStartPosition.y
                 };
         }
+        else {
+            if ((event === null || event === void 0 ? void 0 : event.buttons) === MouseButton.LEFT) {
+                if (!this._canvasMoveTimer) {
+                    this._canvasMoveTimer = setInterval(() => {
+                        const delta = {
+                            x: 0,
+                            y: 0,
+                        };
+                        if (this.mousePosition.x >= this.boundingBox.width * 0.9) {
+                            delta.x -= Math.min((this.mousePosition.x - this.boundingBox.width * 0.9) / (this.boundingBox.width / 10) * MOVEMENT_DELTA_MAX, MOVEMENT_DELTA_MAX);
+                        }
+                        else if (this.mousePosition.x <= this.boundingBox.width / 10) {
+                            delta.x += Math.min((this.boundingBox.width / 10 - this.mousePosition.x) / (this.boundingBox.width / 10) * MOVEMENT_DELTA_MAX, MOVEMENT_DELTA_MAX);
+                        }
+                        if (this.mousePosition.y >= this.boundingBox.height * 0.9) {
+                            delta.y -= Math.min((this.mousePosition.y - this.boundingBox.height * 0.9) / (this.boundingBox.height / 10) * MOVEMENT_DELTA_MAX, MOVEMENT_DELTA_MAX);
+                        }
+                        else if (this.mousePosition.y <= this.boundingBox.height / 10) {
+                            delta.y += Math.min((this.boundingBox.height / 10 - this.mousePosition.y) / (this.boundingBox.height / 10) * MOVEMENT_DELTA_MAX, MOVEMENT_DELTA_MAX);
+                        }
+                        if (delta.x != 0 || delta.y != 0) {
+                            this.convasPositionChanged.emit();
+                            this.canvasPosition.x += delta.x;
+                            this.canvasPosition.y += delta.y;
+                            this._changeDetector.detectChanges();
+                        }
+                    }, 33);
+                }
+            }
+        }
     }
     /**
      * Mouse up event, handles moving of canvas
@@ -175,6 +224,10 @@ export class RelationsCanvasSAComponent {
         if (this.isDragging) {
             this.isDragging = false;
         }
+        if (this._canvasMoveTimer) {
+            clearInterval(this._canvasMoveTimer);
+            this._canvasMoveTimer = null;
+        }
     }
     /**
      * Wheel event, used for zooming
@@ -243,7 +296,7 @@ export class RelationsCanvasSAComponent {
     }
 }
 RelationsCanvasSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: RelationsCanvasSAComponent, deps: [{ token: i0.ElementRef }, { token: i1.RelationsNodeManager }, { token: i0.ChangeDetectorRef }, { token: RELATIONS_HISTORY_MANAGER }], target: i0.ɵɵFactoryTarget.Component });
-RelationsCanvasSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: RelationsCanvasSAComponent, isStandalone: true, selector: "relations-canvas", inputs: { nodeDefinitions: "nodeDefinitions" }, host: { listeners: { "mousedown": "onMouseDown($event)", "mousemove": "onMouseMove($event)", "window:mouseup": "onMouseUp($event)", "wheel": "onWheel($event)" }, properties: { "style.backgroundSize": "this.backgroundSizeStyle", "style.backgroundPosition": "this._backgroundPositionStyle" } }, viewQueries: [{ propertyName: "relationsGroup", first: true, predicate: ["relationsGroup"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flow-area\" [style.transform]=\"'translate(' + canvasPosition.x + 'px, ' + canvasPosition.y + 'px) scale(' + zoomLevel + ')'\">\n    <svg class=\"relations-wrapper\">\n        <g #relationsGroup></g>\n    </svg>\n\n    <ng-container *ngFor=\"let nodeDefinition of nodeDefinitions\">\n        <ng-container [relationsNodeRenderer]=\"nodeDefinition\" [zoomLevel]=\"zoomLevel\" (destroy)=\"destroyNode($event)\"></ng-container>\n    </ng-container>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: RelationsNodeRendererSADirective, selector: "[relationsNodeRenderer]", inputs: ["relationsNodeRenderer", "zoomLevel"], outputs: ["create", "destroy"], exportAs: ["relationsNodeRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RelationsCanvasSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: RelationsCanvasSAComponent, isStandalone: true, selector: "relations-canvas", inputs: { nodeDefinitions: "nodeDefinitions" }, outputs: { convasPositionChanged: "convasPositionChanged" }, host: { listeners: { "mousedown": "onMouseDown($event)", "mousemove": "onMouseMove($event)", "window:mouseup": "onMouseUp($event)", "wheel": "onWheel($event)" }, properties: { "style.backgroundSize": "this.backgroundSizeStyle", "style.backgroundPosition": "this._backgroundPositionStyle" } }, viewQueries: [{ propertyName: "relationsGroup", first: true, predicate: ["relationsGroup"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flow-area\" [style.transform]=\"'translate(' + canvasPosition.x + 'px, ' + canvasPosition.y + 'px) scale(' + zoomLevel + ')'\">\n    <svg class=\"relations-wrapper\">\n        <g #relationsGroup></g>\n    </svg>\n\n    <ng-container *ngFor=\"let nodeDefinition of nodeDefinitions\">\n        <ng-container [relationsNodeRenderer]=\"nodeDefinition\" [zoomLevel]=\"zoomLevel\" (destroy)=\"destroyNode($event)\"></ng-container>\n    </ng-container>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: RelationsNodeRendererSADirective, selector: "[relationsNodeRenderer]", inputs: ["relationsNodeRenderer", "zoomLevel"], outputs: ["create", "destroy"], exportAs: ["relationsNodeRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: RelationsCanvasSAComponent, decorators: [{
             type: Component,
             args: [{ selector: 'relations-canvas', standalone: true, imports: [
@@ -264,6 +317,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                 args: ['relationsGroup', { read: ElementRef }]
             }], nodeDefinitions: [{
                 type: Input
+            }], convasPositionChanged: [{
+                type: Output
             }], onMouseDown: [{
                 type: HostListener,
                 args: ['mousedown', ['$event']]

package/es2015/relations-editor/src/components/relationsCanvas/relationsCanvas.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"relationsCanvas.component.js","sourceRoot":"","sources":["../../../../../relations-editor/src/components/relationsCanvas/relationsCanvas.component.ts","../../../../../relations-editor/src/components/relationsCanvas/relationsCanvas.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, HostBinding, HostListener, ViewChild, ElementRef, Input, Inject, OnInit, ChangeDetectorRef, OnDestroy} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MetadataHistoryManager} from '@anglr/dynamic';\nimport {select} from 'd3';\nimport {Subscription} from 'rxjs';\n\nimport {Coordinates, RelationsNodeMetadata} from '../../interfaces';\nimport {RelationsNodeManager} from '../../services';\nimport {NodeRelationPath} from '../../misc/nodeRelationPath';\nimport {MouseButton} from '../../misc/enums';\nimport {clamp} from '../../misc/utils';\nimport {RelationsNodeRendererSADirective} from '../../directives';\nimport {RELATIONS_HISTORY_MANAGER} from '../../misc/tokens';\n\n/**\n * Default background size in pixels\n */\nconst DEFAULT_BACKGROUND_SIZE = 16;\n\n/**\n * Minimum scale factor\n */\nconst SCALE_FACTOR_MIN = 0.2;\n\n/**\n * Maximum sclae factor\n */\nconst SCALE_FACTOR_MAX = 2;\n\n/**\n * Component used as designer component wrapper for relations component\n */\n@Component(\n{\n    selector: 'relations-canvas',\n    templateUrl: 'relationsCanvas.component.html',\n    standalone: true,\n    imports:\n    [\n        CommonModule,\n        RelationsNodeRendererSADirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class RelationsCanvasSAComponent implements OnInit, OnDestroy\n{\n    //######################### protected properties #########################\n\n    /**\n     * Subscriptions created during initialization\n     */\n    protected _initSubscriptions: Subscription = new Subscription();\n\n    /**\n     * Background pattern size\n     */\n    protected backgroundSize: number = DEFAULT_BACKGROUND_SIZE;\n\n    /**\n     * Drag start position coordinates\n     */\n    protected dragStartPosition: Coordinates =\n    {\n        x: 0,\n        y: 0,\n    };\n\n    //######################### protected properties - host bindings #########################\n\n    /**\n     * Background size css styles\n     */\n    @HostBinding('style.backgroundSize')\n    protected get backgroundSizeStyle(): string\n    {\n        return `${this.backgroundSize}px ${this.backgroundSize}px`;\n    }\n\n    /**\n     * Background position css styles\n     */\n    @HostBinding('style.backgroundPosition')\n    protected get _backgroundPositionStyle(): string\n    {\n        return `${this.canvasPosition.x % this.backgroundSize}px ${this.canvasPosition.y % this.backgroundSize}px`;\n    }\n\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Canvas position\n     */\n    protected canvasPosition: Coordinates = {x: 0, y: 0};\n\n    /**\n     * Zoom level\n     */\n    protected zoomLevel = 1;\n\n    /**\n     * Indication whether canvas is being dragged\n     */\n    protected isDragging: boolean = false;\n\n    \n    //######################### protected properties - getters and setters #########################\n\n    /**\n     * Canvas bounding box\n     */\n    protected get boundingBox(): DOMRect\n    {\n        return this.element.nativeElement.getBoundingClientRect();\n    }\n\n    //######################### protected properties - children #########################\n\n    /**\n     * Node relations svg group\n     */\n    @ViewChild('relationsGroup', {read: ElementRef})\n    protected relationsGroup: ElementRef|null|undefined;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Node definition data to render\n     */\n    @Input()\n    public nodeDefinitions: RelationsNodeMetadata[] = [];\n\n    //######################### constructor #########################\n    constructor(protected element: ElementRef,\n                protected relationManager: RelationsNodeManager,\n                private _changeDetector: ChangeDetectorRef,\n                @Inject(RELATIONS_HISTORY_MANAGER) protected history: MetadataHistoryManager<RelationsNodeMetadata[]>,)\n    {\n    }\n\n    //######################### public methods - implementation of OnInit #########################\n    \n    /**\n     * Initialize component\n     */\n    public ngOnInit(): void\n    {\n        this._initSubscriptions.add(this.relationManager.activeNodeChange.subscribe(() => this.focusNode(this.relationManager.activeNode)));\n    }\n\n    //######################### public methods - implementation of OnDestroy #########################\n    \n    /**\n     * Called when component is destroyed\n     */\n    public ngOnDestroy(): void\n    {\n        this._initSubscriptions.unsubscribe();\n    }\n\n    //######################### public methods #########################\n\n    /**\n     * Focuses canvas to selected node\n     * @param id Relations node identifier\n     * @returns \n     */\n    public focusNode(id?: string|null): void\n    {\n        if (!id)\n        {\n            return;\n        }\n\n        const node = this.nodeDefinitions?.find(node => node.id === id);\n\n        if (node?.nodeMetadata?.coordinates)\n        {\n            // this._setZoomLevel(1);\n            this.canvasPosition = \n            {\n                x: (-node?.nodeMetadata?.coordinates.x) * this.zoomLevel  + this.boundingBox.width/2,\n                y: (-node?.nodeMetadata?.coordinates.y) * this.zoomLevel  + this.boundingBox.height/2,\n            };\n            \n            this._changeDetector.detectChanges();\n        }\n    }\n\n    /**\n     * Creates node relation path\n     */\n    public createRelation(): NodeRelationPath\n    {\n        return new NodeRelationPath(select(this.relationsGroup?.nativeElement), this.relationManager, this.history, null, null);\n    }\n\n    public getPositionInCanvas(point: {x: number, y: number}): Coordinates\n    {\n        return {\n            x: (point.x - this.boundingBox.left - this.canvasPosition.x)/this.zoomLevel,\n            y: (point.y - this.boundingBox.top - this.canvasPosition.y)/this.zoomLevel\n        };\n    }\n\n    //######################### protected methods - host listeners #########################\n\n    /**\n     * Mouse down event, handles moving of canvas\n     * @param event - Mouse event that occured\n     */\n    @HostListener('mousedown', ['$event'])\n    protected onMouseDown(event: MouseEvent): void\n    {\n        if (event.buttons == MouseButton.LEFT)\n        {\n            this.dragStartPosition =\n            {\n                x: event.clientX - this.canvasPosition.x,\n                y: event.clientY - this.canvasPosition.y\n            };\n            \n            this.isDragging = true;\n        }\n    }\n\n    /**\n     * Mouse move event, handles moving of canvas\n     * @param event - Mouse event that occured\n     */\n    @HostListener('mousemove', ['$event'])\n    protected onMouseMove(event: MouseEvent): void\n    {\n        if (this.isDragging)\n        {\n            this.canvasPosition =\n            {\n                x: event.clientX - this.dragStartPosition.x,\n                y: event.clientY - this.dragStartPosition.y\n            };\n        }\n    }\n\n    /**\n     * Mouse up event, handles moving of canvas\n     * @param event - Mouse event that occured\n     */\n    @HostListener('window:mouseup', ['$event'])\n    protected onMouseUp(_: MouseEvent): void\n    {\n        if (this.isDragging)\n        {\n            this.isDragging = false;\n        }\n    }\n\n    /**\n     * Wheel event, used for zooming\n     * @param event - Wheel event that occured\n     */\n    @HostListener('wheel', ['$event'])\n    protected onWheel(event: WheelEvent): void\n    {\n        if (event.deltaY)\n        {\n            const newZoomLevel = this._calculateNewZoomLevel(event.deltaY > 1 ? -1 : 1);    \n            \n            const posX = (event.clientX - this.canvasPosition.x - this.boundingBox.left) / this.zoomLevel;\n            const posY = (event.clientY - this.canvasPosition.y - this.boundingBox.top) / this.zoomLevel;\n\n            this.canvasPosition.x = event.clientX - this.boundingBox.left - posX*newZoomLevel;\n            this.canvasPosition.y = event.clientY - this.boundingBox.top - posY*newZoomLevel;\n\n            this._setZoomLevel(newZoomLevel);\n        }\n        \n        event.preventDefault();\n        event.stopImmediatePropagation();\n    }\n\n    //######################### public methods #########################\n\n    /**\n     * Zooms canvas in by one step\n     */\n    public zoomIn(): void\n    {\n        this._setZoomLevel(this._calculateNewZoomLevel(1));\n    }\n\n    /**\n     * Zooms canvas out by one step\n     */\n    public zoomOut(): void\n    {\n        this._setZoomLevel(this._calculateNewZoomLevel(-1));\n    }\n\n    /**\n     * Resets zoom level\n     */\n    public resetZoom(): void\n    {\n        this._setZoomLevel(1);\n    }\n\n    //######################### protected methods - template bindings #########################\n\n    /**\n     * Destroys node\n     * @param node - Definition of node to be destroyed\n     */\n    protected destroyNode(node: RelationsNodeMetadata): void\n    {\n        const index = this.nodeDefinitions.indexOf(node);\n\n        if(index < 0)\n        {\n            return;\n        }\n\n        this.nodeDefinitions.splice(index, 1);\n\n        this.history.getNewState();\n    }\n\n    //######################### private methods #########################\n\n    /**\n     * Calculates new zoom level based on dalte\n     * @param delta \n     * @returns \n     */\n    private _calculateNewZoomLevel(delta: number): number\n    {\n        return clamp(this.zoomLevel + delta * 0.05, SCALE_FACTOR_MIN, SCALE_FACTOR_MAX);\n    }\n\n    /**\n     * Sets zoom level\n     * @param newZoomLevel new zoom level\n     */\n    private _setZoomLevel(newZoomLevel: number): void\n    {\n        this.zoomLevel = newZoomLevel;\n        this.backgroundSize = DEFAULT_BACKGROUND_SIZE * this.zoomLevel;\n    }\n}","<div class=\"flow-area\" [style.transform]=\"'translate(' + canvasPosition.x + 'px, ' + canvasPosition.y + 'px) scale(' + zoomLevel + ')'\">\n    <svg class=\"relations-wrapper\">\n        <g #relationsGroup></g>\n    </svg>\n\n    <ng-container *ngFor=\"let nodeDefinition of nodeDefinitions\">\n        <ng-container [relationsNodeRenderer]=\"nodeDefinition\" [zoomLevel]=\"zoomLevel\" (destroy)=\"destroyNode($event)\"></ng-container>\n    </ng-container>\n</div>"]}
+{"version":3,"file":"relationsCanvas.component.js","sourceRoot":"","sources":["../../../../../relations-editor/src/components/relationsCanvas/relationsCanvas.component.ts","../../../../../relations-editor/src/components/relationsCanvas/relationsCanvas.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, HostBinding, HostListener, ViewChild, ElementRef, Input, Inject, OnInit, ChangeDetectorRef, OnDestroy, EventEmitter, Output} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MetadataHistoryManager} from '@anglr/dynamic';\nimport {select} from 'd3';\nimport {Subscription} from 'rxjs';\n\nimport {Coordinates, RelationsNodeMetadata} from '../../interfaces';\nimport {RelationsNodeManager} from '../../services';\nimport {NodeRelationPath} from '../../misc/nodeRelationPath';\nimport {MouseButton} from '../../misc/enums';\nimport {clamp} from '../../misc/utils';\nimport {RelationsNodeRendererSADirective} from '../../directives';\nimport {RELATIONS_HISTORY_MANAGER} from '../../misc/tokens';\n\n/**\n * Default background size in pixels\n */\nconst DEFAULT_BACKGROUND_SIZE = 16;\n\n/**\n * Minimum scale factor\n */\nconst SCALE_FACTOR_MIN = 0.2;\n\n/**\n * Maximum scale factor\n */\nconst SCALE_FACTOR_MAX = 2;\n\n/**\n * Maximal movement delta\n */\nconst MOVEMENT_DELTA_MAX = 10;\n\n/**\n * Component used as designer component wrapper for relations component\n */\n@Component(\n{\n    selector: 'relations-canvas',\n    templateUrl: 'relationsCanvas.component.html',\n    standalone: true,\n    imports:\n    [\n        CommonModule,\n        RelationsNodeRendererSADirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class RelationsCanvasSAComponent implements OnInit, OnDestroy\n{\n    //######################### private properties #########################\n\n    /**\n     * Identifier of canvas move timer\n     */\n    private _canvasMoveTimer: number|null = null;\n\n    //######################### protected properties #########################\n\n    /**\n     * Subscriptions created during initialization\n     */\n    protected _initSubscriptions: Subscription = new Subscription();\n\n    /**\n     * Background pattern size\n     */\n    protected backgroundSize: number = DEFAULT_BACKGROUND_SIZE;\n\n    /**\n     * Drag start position coordinates\n     */\n    protected dragStartPosition: Coordinates =\n    {\n        x: 0,\n        y: 0,\n    };\n\n    //######################### protected properties - host bindings #########################\n\n    /**\n     * Background size css styles\n     */\n    @HostBinding('style.backgroundSize')\n    protected get backgroundSizeStyle(): string\n    {\n        return `${this.backgroundSize}px ${this.backgroundSize}px`;\n    }\n\n    /**\n     * Background position css styles\n     */\n    @HostBinding('style.backgroundPosition')\n    protected get _backgroundPositionStyle(): string\n    {\n        return `${this.canvasPosition.x % this.backgroundSize}px ${this.canvasPosition.y % this.backgroundSize}px`;\n    }\n\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Canvas position\n     */\n    protected canvasPosition: Coordinates = {x: 0, y: 0};\n\n    /**\n     * Mouse position in canvas\n     */\n    protected mousePosition: Coordinates = {x: 0, y: 0};\n\n    /**\n     * Zoom level\n     */\n    protected zoomLevel = 1;\n\n    /**\n     * Indication whether canvas is being dragged\n     */\n    protected isDragging: boolean = false;\n\n    //######################### protected properties - getters and setters #########################\n\n    /**\n     * Canvas bounding box\n     */\n    public get boundingBox(): DOMRect\n    {\n        return this.element.nativeElement.getBoundingClientRect();\n    }\n\n    //######################### protected properties - children #########################\n\n    /**\n     * Node relations svg group\n     */\n    @ViewChild('relationsGroup', {read: ElementRef})\n    protected relationsGroup: ElementRef|null|undefined;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Node definition data to render\n     */\n    @Input()\n    public nodeDefinitions: RelationsNodeMetadata[] = [];\n\n    //######################### public properties - outputs #########################\n\n    @Output()\n    public convasPositionChanged: EventEmitter<void> = new EventEmitter<void>();\n\n    //######################### constructor #########################\n    constructor(protected element: ElementRef,\n                protected relationManager: RelationsNodeManager,\n                private _changeDetector: ChangeDetectorRef,\n                @Inject(RELATIONS_HISTORY_MANAGER) protected history: MetadataHistoryManager<RelationsNodeMetadata[]>,)\n    {\n    }\n\n    //######################### public methods - implementation of OnInit #########################\n    \n    /**\n     * Initialize component\n     */\n    public ngOnInit(): void\n    {\n        this._initSubscriptions.add(this.relationManager.activeNodeChange.subscribe(() => this.focusNode(this.relationManager.activeNode)));\n    }\n\n    //######################### public methods - implementation of OnDestroy #########################\n    \n    /**\n     * Called when component is destroyed\n     */\n    public ngOnDestroy(): void\n    {\n        this._initSubscriptions.unsubscribe();\n    }\n\n    //######################### public methods #########################\n\n    /**\n     * Focuses canvas to selected node\n     * @param id Relations node identifier\n     * @returns \n     */\n    public focusNode(id?: string|null): void\n    {\n        if (!id)\n        {\n            return;\n        }\n\n        const node = this.nodeDefinitions?.find(node => node.id === id);\n\n        if (node?.nodeMetadata?.coordinates)\n        {\n            // this._setZoomLevel(1);\n            this.canvasPosition = \n            {\n                x: (-node?.nodeMetadata?.coordinates.x) * this.zoomLevel  + this.boundingBox.width/2,\n                y: (-node?.nodeMetadata?.coordinates.y) * this.zoomLevel  + this.boundingBox.height/2,\n            };\n            \n            this._changeDetector.detectChanges();\n        }\n    }\n\n    /**\n     * Creates node relation path\n     */\n    public createRelation(): NodeRelationPath\n    {\n        return new NodeRelationPath(select(this.relationsGroup?.nativeElement), this.relationManager, this.history, null, null);\n    }\n\n    public getPositionInCanvas(point: {x: number, y: number}): Coordinates\n    {\n        return {\n            x: (point.x - this.boundingBox.left - this.canvasPosition.x)/this.zoomLevel,\n            y: (point.y - this.boundingBox.top - this.canvasPosition.y)/this.zoomLevel\n        };\n    }\n\n    //######################### protected methods - host listeners #########################\n\n    /**\n     * Mouse down event, handles moving of canvas\n     * @param event - Mouse event that occured\n     */\n    @HostListener('mousedown', ['$event'])\n    protected onMouseDown(event: MouseEvent): void\n    {\n        if (event.buttons == MouseButton.LEFT)\n        {\n            this.dragStartPosition =\n            {\n                x: event.clientX - this.canvasPosition.x,\n                y: event.clientY - this.canvasPosition.y\n            };\n            \n            this.isDragging = true;\n        }\n    }\n\n    /**\n     * Mouse move event, handles moving of canvas\n     * @param event - Mouse event that occured\n     */\n    @HostListener('mousemove', ['$event'])\n    protected onMouseMove(event: MouseEvent): void\n    {\n        this.mousePosition = {\n            x: event.clientX - this.boundingBox.left,\n            y: event.clientY - this.boundingBox.top\n        };\n\n        if (this.isDragging)\n        {\n            this.canvasPosition =\n            {\n                x: event.clientX - this.dragStartPosition.x,\n                y: event.clientY - this.dragStartPosition.y\n            };\n        }\n        else\n        {\n            if (event?.buttons === MouseButton.LEFT)\n            {\n                if (!this._canvasMoveTimer)\n                {\n                    this._canvasMoveTimer = setInterval(() =>\n                    {\n                        const delta: Coordinates = {\n                            x: 0,\n                            y: 0,\n                        };\n\n                        if (this.mousePosition.x >= this.boundingBox.width*0.9)\n                        {\n                            delta.x -= Math.min((this.mousePosition.x - this.boundingBox.width*0.9)/(this.boundingBox.width/10)*MOVEMENT_DELTA_MAX, MOVEMENT_DELTA_MAX);\n                        }\n                        else if (this.mousePosition.x <= this.boundingBox.width/10)\n                        {\n                            delta.x += Math.min((this.boundingBox.width/10 - this.mousePosition.x)/(this.boundingBox.width/10)*MOVEMENT_DELTA_MAX, MOVEMENT_DELTA_MAX);\n                        }\n\n                        if (this.mousePosition.y >= this.boundingBox.height*0.9)\n                        {\n                            delta.y -= Math.min((this.mousePosition.y - this.boundingBox.height*0.9)/(this.boundingBox.height/10)*MOVEMENT_DELTA_MAX, MOVEMENT_DELTA_MAX);\n                        }\n                        else if (this.mousePosition.y <= this.boundingBox.height/10)\n                        {\n                            delta.y += Math.min((this.boundingBox.height/10 - this.mousePosition.y)/(this.boundingBox.height/10)*MOVEMENT_DELTA_MAX, MOVEMENT_DELTA_MAX);\n                        }\n\n                        if (delta.x != 0 || delta.y != 0)\n                        {\n                            this.convasPositionChanged.emit();\n                            this.canvasPosition.x += delta.x;\n                            this.canvasPosition.y += delta.y;\n                            this._changeDetector.detectChanges();\n                        }\n                    }, 33) as unknown as number;\n                }\n            }\n        }\n    }\n\n    /**\n     * Mouse up event, handles moving of canvas\n     * @param event - Mouse event that occured\n     */\n    @HostListener('window:mouseup', ['$event'])\n    protected onMouseUp(_: MouseEvent): void\n    {\n        if (this.isDragging)\n        {\n            this.isDragging = false;\n        }\n\n        if (this._canvasMoveTimer)\n        {\n            clearInterval(this._canvasMoveTimer);\n            this._canvasMoveTimer = null;\n        }\n    }\n\n    /**\n     * Wheel event, used for zooming\n     * @param event - Wheel event that occured\n     */\n    @HostListener('wheel', ['$event'])\n    protected onWheel(event: WheelEvent): void\n    {\n        if (event.deltaY)\n        {\n            const newZoomLevel = this._calculateNewZoomLevel(event.deltaY > 1 ? -1 : 1);    \n            \n            const posX = (event.clientX - this.canvasPosition.x - this.boundingBox.left) / this.zoomLevel;\n            const posY = (event.clientY - this.canvasPosition.y - this.boundingBox.top) / this.zoomLevel;\n\n            this.canvasPosition.x = event.clientX - this.boundingBox.left - posX*newZoomLevel;\n            this.canvasPosition.y = event.clientY - this.boundingBox.top - posY*newZoomLevel;\n\n            this._setZoomLevel(newZoomLevel);\n        }\n        \n        event.preventDefault();\n        event.stopImmediatePropagation();\n    }\n\n    //######################### public methods #########################\n\n    /**\n     * Zooms canvas in by one step\n     */\n    public zoomIn(): void\n    {\n        this._setZoomLevel(this._calculateNewZoomLevel(1));\n    }\n\n    /**\n     * Zooms canvas out by one step\n     */\n    public zoomOut(): void\n    {\n        this._setZoomLevel(this._calculateNewZoomLevel(-1));\n    }\n\n    /**\n     * Resets zoom level\n     */\n    public resetZoom(): void\n    {\n        this._setZoomLevel(1);\n    }\n\n    //######################### protected methods - template bindings #########################\n\n    /**\n     * Destroys node\n     * @param node - Definition of node to be destroyed\n     */\n    protected destroyNode(node: RelationsNodeMetadata): void\n    {\n        const index = this.nodeDefinitions.indexOf(node);\n\n        if(index < 0)\n        {\n            return;\n        }\n\n        this.nodeDefinitions.splice(index, 1);\n\n        this.history.getNewState();\n    }\n\n    //######################### private methods #########################\n\n    /**\n     * Calculates new zoom level based on dalte\n     * @param delta \n     * @returns \n     */\n    private _calculateNewZoomLevel(delta: number): number\n    {\n        return clamp(this.zoomLevel + delta * 0.05, SCALE_FACTOR_MIN, SCALE_FACTOR_MAX);\n    }\n\n    /**\n     * Sets zoom level\n     * @param newZoomLevel new zoom level\n     */\n    private _setZoomLevel(newZoomLevel: number): void\n    {\n        this.zoomLevel = newZoomLevel;\n        this.backgroundSize = DEFAULT_BACKGROUND_SIZE * this.zoomLevel;\n    }\n}","<div class=\"flow-area\" [style.transform]=\"'translate(' + canvasPosition.x + 'px, ' + canvasPosition.y + 'px) scale(' + zoomLevel + ')'\">\n    <svg class=\"relations-wrapper\">\n        <g #relationsGroup></g>\n    </svg>\n\n    <ng-container *ngFor=\"let nodeDefinition of nodeDefinitions\">\n        <ng-container [relationsNodeRenderer]=\"nodeDefinition\" [zoomLevel]=\"zoomLevel\" (destroy)=\"destroyNode($event)\"></ng-container>\n    </ng-container>\n</div>"]}

package/es2015/relations-editor/src/components/relationsEditor/relationsEditor.component.js

@@ -90,7 +90,7 @@ export class RelationsEditorSAComponent {
     }
 }
 RelationsEditorSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: RelationsEditorSAComponent, deps: [{ token: RELATIONS_HISTORY_MANAGER }, { token: i0.ChangeDetectorRef }, { token: i1.EditorHotkeys, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-RelationsEditorSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: RelationsEditorSAComponent, isStandalone: true, selector: "relations-editor", inputs: { metadata: "metadata", packages: "packages", whiteList: "whiteList", blackList: "blackList" }, viewQueries: [{ propertyName: "relationCanvas", first: true, predicate: RelationsCanvasSAComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-flex-row dynamic-flex-1\">\n    <div class=\"overflow-vertical-scroll dynamic-thin-scrollbar\">\n        <package-manager></package-manager>\n        <nodes-palette [canvasDropList]=\"dropList\" [packages]=\"packages\" [whiteList]=\"whiteList\" [blackList]=\"blackList\" style=\"width: 250px;\"></nodes-palette>\n    </div>\n\n    <relations-canvas #dropList=\"cdkDropList\" [nodeDefinitions]=\"metadata\" class=\"dynamic-flex-1\" cdkDropList (cdkDropListDropped)=\"addNode($event)\"></relations-canvas>\n</div>", styles: [":host{display: flex;}"], dependencies: [{ kind: "component", type: NodesPaletteSAComponent, selector: "nodes-palette", inputs: ["canvasDropList", "packages", "whiteList", "blackList"] }, { kind: "component", type: RelationsCanvasSAComponent, selector: "relations-canvas", inputs: ["nodeDefinitions"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: PackageManagerModule }, { kind: "component", type: i3.PackageManagerComponent, selector: "package-manager" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RelationsEditorSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: RelationsEditorSAComponent, isStandalone: true, selector: "relations-editor", inputs: { metadata: "metadata", packages: "packages", whiteList: "whiteList", blackList: "blackList" }, viewQueries: [{ propertyName: "relationCanvas", first: true, predicate: RelationsCanvasSAComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-flex-row dynamic-flex-1\">\n    <div class=\"overflow-vertical-scroll dynamic-thin-scrollbar\">\n        <package-manager></package-manager>\n        <nodes-palette [canvasDropList]=\"dropList\" [packages]=\"packages\" [whiteList]=\"whiteList\" [blackList]=\"blackList\" style=\"width: 250px;\"></nodes-palette>\n    </div>\n\n    <relations-canvas #dropList=\"cdkDropList\" [nodeDefinitions]=\"metadata\" class=\"dynamic-flex-1\" cdkDropList (cdkDropListDropped)=\"addNode($event)\"></relations-canvas>\n</div>", styles: [":host{display: flex;}"], dependencies: [{ kind: "component", type: NodesPaletteSAComponent, selector: "nodes-palette", inputs: ["canvasDropList", "packages", "whiteList", "blackList"] }, { kind: "component", type: RelationsCanvasSAComponent, selector: "relations-canvas", inputs: ["nodeDefinitions"], outputs: ["convasPositionChanged"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: PackageManagerModule }, { kind: "component", type: i3.PackageManagerComponent, selector: "package-manager" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: RelationsEditorSAComponent, decorators: [{
             type: Component,
             args: [{ selector: 'relations-editor', standalone: true, imports: [

package/es2015/relations-editor/src/components/relationsEditor/relationsEditor.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"relationsEditor.component.js","sourceRoot":"","sources":["../../../../../relations-editor/src/components/relationsEditor/relationsEditor.component.ts","../../../../../relations-editor/src/components/relationsEditor/relationsEditor.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, Input, OnDestroy, OnInit, Inject, ChangeDetectorRef, OnChanges, SimpleChanges, ViewChild, Optional} from '@angular/core';\nimport {CdkDragDrop, DragDropModule} from '@angular/cdk/drag-drop';\nimport {HostDisplayFlexStyle} from '@anglr/common';\nimport {DynamicItemSource, EditorHotkeys, MetadataHistoryManager, PackageManagerModule} from '@anglr/dynamic';\nimport {nameof} from '@jscrpt/common';\nimport {Subscription} from 'rxjs';\n\nimport {NodesPaletteSAComponent} from '../nodesPalette/nodesPalette.component';\nimport {RelationsCanvasSAComponent} from '../relationsCanvas/relationsCanvas.component';\nimport {RelationsNodeDragData, RelationsNodeMetadata} from '../../interfaces';\nimport {RELATIONS_HISTORY_MANAGER} from '../../misc/tokens';\n\n/**\n * Component that represents relations editor with palette and canvas\n */\n@Component(\n{\n    selector: 'relations-editor',\n    templateUrl: 'relationsEditor.component.html',\n    styles: [HostDisplayFlexStyle],\n    standalone: true,\n    imports:\n    [\n        NodesPaletteSAComponent,\n        RelationsCanvasSAComponent,\n        DragDropModule,\n        PackageManagerModule,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class RelationsEditorSAComponent implements OnInit, OnChanges, OnDestroy\n{\n    //######################### protected properties #########################\n\n    /**\n     * Subscriptions created during initialization\n     */\n    protected initSubscriptions: Subscription = new Subscription();\n\n\n    //######################### protected properties - view children #########################\n\n    /**\n     * Relation canvas\n     */\n    @ViewChild(RelationsCanvasSAComponent)\n    protected relationCanvas: RelationsCanvasSAComponent|undefined|null;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Metadata used for rendering relations in canvas\n     */\n    @Input()\n    public metadata: RelationsNodeMetadata[] = [];\n\n    /**\n     * Array of packages that should be used, if specified, package manager is not displayed\n     */\n    @Input()\n    public packages: string[]|undefined|null;\n\n    /**\n     * Array of dynamic items sources which should be whitelisted, if this is used, package which is whitelisted will override black list and only components from whitelist will be available\n     */\n    @Input()\n    public whiteList: DynamicItemSource[]|undefined|null;\n\n    /**\n     * Array of dynamic items sources which should be blacklisted, components used in this list will not be available, only if overriden by whitelist\n     */\n    @Input()\n    public blackList: DynamicItemSource[]|undefined|null;\n\n    //######################### constructor #########################\n    constructor(@Inject(RELATIONS_HISTORY_MANAGER) protected history: MetadataHistoryManager<RelationsNodeMetadata[]>,\n                protected changeDetector: ChangeDetectorRef,\n                @Optional() protected hotkeys?: EditorHotkeys,)\n    {\n        hotkeys?.init();\n    }\n\n    //######################### public methods - implementation of OnInit #########################\n    \n    /**\n     * Initialize component\n     */\n    public ngOnInit(): void\n    {\n        this.initSubscriptions.add(this.history.pop.subscribe(metadata =>\n        {\n            this.metadata = metadata;\n            this.changeDetector.detectChanges();\n        }));\n\n        if(this.hotkeys)\n        {\n            this.initSubscriptions.add(this.hotkeys.undo.subscribe(() => this.history.undo()));\n            this.initSubscriptions.add(this.hotkeys.redo.subscribe(() => this.history.redo()));\n        }\n    }\n\n    //######################### public methods - implementation of OnChanges #########################\n    \n    /**\n     * Called when input value changes\n     */\n    public ngOnChanges(changes: SimpleChanges): void\n    {\n        if(nameof<RelationsEditorSAComponent>('metadata') in changes)\n        {\n            this.history.clean();\n            \n            if(this.metadata)\n            {\n                this.history.setInitialState(this.metadata);\n            }\n        }\n    }\n\n    //######################### public methods - implementation of OnDestroy #########################\n    \n    /**\n     * Called when component is destroyed\n     */\n    public ngOnDestroy(): void\n    {\n        this.initSubscriptions.unsubscribe();\n        this.hotkeys?.destroy();\n    }\n\n    //######################### protected methods - template bindings #########################\n\n    /**\n     * Adds new node into canvas and metadata\n     * @param event - Drop event that occured\n     */\n    protected addNode(event: CdkDragDrop<RelationsNodeDragData, RelationsNodeDragData, RelationsNodeDragData>): void\n    {        \n        if (event.item.data.metadata.nodeMetadata?.coordinates)\n        {\n            const coordinates = this.relationCanvas?.getPositionInCanvas(event.dropPoint);\n\n            if(coordinates)\n            {\n                event.item.data.metadata.nodeMetadata.coordinates.x = coordinates.x;\n                event.item.data.metadata.nodeMetadata.coordinates.y = coordinates.y;\n            }\n        }\n\n        this.metadata =\n        [\n            ...this.metadata,\n            event.item.data.metadata,\n        ];\n\n        this.history.getNewState();\n    }\n}","<div class=\"dynamic-flex-row dynamic-flex-1\">\n    <div class=\"overflow-vertical-scroll dynamic-thin-scrollbar\">\n        <package-manager></package-manager>\n        <nodes-palette [canvasDropList]=\"dropList\" [packages]=\"packages\" [whiteList]=\"whiteList\" [blackList]=\"blackList\" style=\"width: 250px;\"></nodes-palette>\n    </div>\n\n    <relations-canvas #dropList=\"cdkDropList\" [nodeDefinitions]=\"metadata\" class=\"dynamic-flex-1\" cdkDropList (cdkDropListDropped)=\"addNode($event)\"></relations-canvas>\n</div>"]}
+{"version":3,"file":"relationsEditor.component.js","sourceRoot":"","sources":["../../../../../relations-editor/src/components/relationsEditor/relationsEditor.component.ts","../../../../../relations-editor/src/components/relationsEditor/relationsEditor.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, Input, OnDestroy, OnInit, Inject, ChangeDetectorRef, OnChanges, SimpleChanges, ViewChild, Optional} from '@angular/core';\nimport {CdkDragDrop, DragDropModule} from '@angular/cdk/drag-drop';\nimport {HostDisplayFlexStyle} from '@anglr/common';\nimport {DynamicItemSource, EditorHotkeys, MetadataHistoryManager, PackageManagerModule} from '@anglr/dynamic';\nimport {nameof} from '@jscrpt/common';\nimport {Subscription} from 'rxjs';\n\nimport {NodesPaletteSAComponent} from '../nodesPalette/nodesPalette.component';\nimport {RelationsCanvasSAComponent} from '../relationsCanvas/relationsCanvas.component';\nimport {RelationsNodeDragData, RelationsNodeMetadata} from '../../interfaces';\nimport {RELATIONS_HISTORY_MANAGER} from '../../misc/tokens';\n\n/**\n * Component that represents relations editor with palette and canvas\n */\n@Component(\n{\n    selector: 'relations-editor',\n    templateUrl: 'relationsEditor.component.html',\n    styles: [HostDisplayFlexStyle],\n    standalone: true,\n    imports:\n    [\n        NodesPaletteSAComponent,\n        RelationsCanvasSAComponent,\n        DragDropModule,\n        PackageManagerModule,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class RelationsEditorSAComponent implements OnInit, OnChanges, OnDestroy\n{\n    //######################### protected properties #########################\n\n    /**\n     * Subscriptions created during initialization\n     */\n    protected initSubscriptions: Subscription = new Subscription();\n\n\n    //######################### protected properties - view children #########################\n\n    /**\n     * Relation canvas\n     */\n    @ViewChild(RelationsCanvasSAComponent)\n    protected relationCanvas: RelationsCanvasSAComponent|undefined|null;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Metadata used for rendering relations in canvas\n     */\n    @Input()\n    public metadata: RelationsNodeMetadata[] = [];\n\n    /**\n     * Array of packages that should be used, if specified, package manager is not displayed\n     */\n    @Input()\n    public packages: string[]|undefined|null;\n\n    /**\n     * Array of dynamic items sources which should be whitelisted, if this is used, package which is whitelisted will override black list and only components from whitelist will be available\n     */\n    @Input()\n    public whiteList: DynamicItemSource[]|undefined|null;\n\n    /**\n     * Array of dynamic items sources which should be blacklisted, components used in this list will not be available, only if overriden by whitelist\n     */\n    @Input()\n    public blackList: DynamicItemSource[]|undefined|null;\n\n    //######################### constructor #########################\n    constructor(@Inject(RELATIONS_HISTORY_MANAGER) protected history: MetadataHistoryManager<RelationsNodeMetadata[]>,\n                protected changeDetector: ChangeDetectorRef,\n                @Optional() protected hotkeys?: EditorHotkeys,)\n    {\n        hotkeys?.init();\n    }\n\n    //######################### public methods - implementation of OnInit #########################\n    \n    /**\n     * Initialize component\n     */\n    public ngOnInit(): void\n    {\n        this.initSubscriptions.add(this.history.pop.subscribe(metadata =>\n        {\n            this.metadata = metadata;\n            this.changeDetector.detectChanges();\n        }));\n\n        if(this.hotkeys)\n        {\n            this.initSubscriptions.add(this.hotkeys.undo.subscribe(() => this.history.undo()));\n            this.initSubscriptions.add(this.hotkeys.redo.subscribe(() => this.history.redo()));\n        }\n    }\n\n    //######################### public methods - implementation of OnChanges #########################\n    \n    /**\n     * Called when input value changes\n     */\n    public ngOnChanges(changes: SimpleChanges): void\n    {\n        if(nameof<RelationsEditorSAComponent>('metadata') in changes)\n        {\n            this.history.clean();\n            \n            if(this.metadata)\n            {\n                this.history.setInitialState(this.metadata);\n            }\n        }\n    }\n\n    //######################### public methods - implementation of OnDestroy #########################\n    \n    /**\n     * Called when component is destroyed\n     */\n    public ngOnDestroy(): void\n    {\n        this.initSubscriptions.unsubscribe();\n        this.hotkeys?.destroy();\n    }\n\n    //######################### protected methods - template bindings #########################\n\n    /**\n     * Adds new node into canvas and metadata\n     * @param event - Drop event that occured\n     */\n    protected addNode(event: CdkDragDrop<RelationsNodeDragData, RelationsNodeDragData, RelationsNodeDragData>): void\n    {        \n        if (event.item.data.metadata.nodeMetadata?.coordinates)\n        {\n            const coordinates = this.relationCanvas?.getPositionInCanvas(event.dropPoint);\n\n            if(coordinates)\n            {\n                event.item.data.metadata.nodeMetadata.coordinates.x = coordinates.x;\n                event.item.data.metadata.nodeMetadata.coordinates.y = coordinates.y;\n            }\n        }\n\n        this.metadata =\n        [\n            ...this.metadata,\n            event.item.data.metadata,\n        ];\n\n        this.history.getNewState();\n    }\n}","<div class=\"dynamic-flex-row dynamic-flex-1\">\n    <div class=\"overflow-vertical-scroll dynamic-thin-scrollbar\">\n        <package-manager></package-manager>\n        <nodes-palette [canvasDropList]=\"dropList\" [packages]=\"packages\" [whiteList]=\"whiteList\" [blackList]=\"blackList\" style=\"width: 250px;\"></nodes-palette>\n    </div>\n\n    <relations-canvas #dropList=\"cdkDropList\" [nodeDefinitions]=\"metadata\" class=\"dynamic-flex-1\" cdkDropList (cdkDropListDropped)=\"addNode($event)\"></relations-canvas>\n</div>"]}

package/es2015/relations-editor/src/components/relationsNodeBase.js

@@ -4,6 +4,7 @@ import { Subject } from 'rxjs';
 import { RelationNodeOutputSAComponent } from './relationsNodeOutput/relationsNodeOutput.component';
 import { RelationNodeInputSAComponent } from './relationsNodeInput/relationsNodeInput.component';
 import { RELATIONS_HISTORY_MANAGER } from '../misc/tokens';
+import { RelationsCanvasSAComponent } from './relationsCanvas/relationsCanvas.component';
 import * as i0 from "@angular/core";
 /**
  * Base class for relations node components
@@ -40,10 +41,22 @@ export class RelationsNodeBase {
     get destroy() {
         return this.destroySubject.asObservable();
     }
+    /**
+     * Node bounding box
+     */
+    get boundingBox() {
+        return this.element.nativeElement.getBoundingClientRect();
+    }
     //######################### constructor #########################
     constructor(changeDetector, element) {
         this.changeDetector = changeDetector;
         this.element = element;
+        //######################### protected properties #########################
+        this.canvas = inject(RelationsCanvasSAComponent);
+        /**
+         * Canvas position change subscription
+         */
+        this.canvasPositionChangeSubscription = null;
         /**
          * Metadata history manager
          */
@@ -63,14 +76,14 @@ export class RelationsNodeBase {
         /**
          * Last mouse down position
          */
-        this.lastMouseDownPosition = {
+        this.lastMouseMovePosition = {
             x: 0,
             y: 0
         };
         /**
-         * Node position on last mouse down event
+         * Last mouse down offset position
          */
-        this.lastMouseDownNodePosition = {
+        this.lastMouseDownOffset = {
             x: 0,
             y: 0
         };
@@ -127,8 +140,10 @@ export class RelationsNodeBase {
      * Called when component is destroyed
      */
     ngOnDestroy() {
-        var _a;
+        var _a, _b;
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.canvasPositionChangeSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+        this.canvasPositionChangeSubscription = null;
     }
     //######################### public methods - implementation of RelationsNode #########################
     /**
@@ -154,16 +169,20 @@ export class RelationsNodeBase {
     onMouseDown(event) {
         this.moved = false;
         this.isDragging = true;
-        this.lastMouseDownPosition =
+        this.lastMouseDownOffset =
             {
-                x: event.clientX,
-                y: event.clientY
-            };
-        this.lastMouseDownNodePosition =
-            {
-                x: this.nodePosition.x,
-                y: this.nodePosition.y
+                x: event.clientX - this.boundingBox.left,
+                y: event.clientY - this.boundingBox.top
             };
+        this.canvasPositionChangeSubscription = this.canvas.convasPositionChanged.subscribe(() => {
+            this.nodePosition = this.canvas.getPositionInCanvas({
+                x: this.lastMouseMovePosition.x - this.lastMouseDownOffset.x,
+                y: this.lastMouseMovePosition.y - this.lastMouseDownOffset.y,
+            });
+            this.invalidateVisuals();
+            this.updatePosition();
+            this.updateRelations();
+        });
         event.stopImmediatePropagation();
     }
     /**
@@ -173,11 +192,15 @@ export class RelationsNodeBase {
     onMouseMove(event) {
         if (this.isDragging) {
             this.moved = true;
-            this.nodePosition =
+            this.lastMouseMovePosition =
                 {
-                    x: this.lastMouseDownNodePosition.x + (event.clientX - this.lastMouseDownPosition.x) * 1 / this.zoomLevel,
-                    y: this.lastMouseDownNodePosition.y + (event.clientY - this.lastMouseDownPosition.y) * 1 / this.zoomLevel,
+                    x: event.clientX,
+                    y: event.clientY
                 };
+            this.nodePosition = this.canvas.getPositionInCanvas({
+                x: this.lastMouseMovePosition.x - this.lastMouseDownOffset.x,
+                y: this.lastMouseMovePosition.y - this.lastMouseDownOffset.y,
+            });
             this.updatePosition();
             event.stopImmediatePropagation();
             event.preventDefault();
@@ -189,11 +212,14 @@ export class RelationsNodeBase {
      * @param event
      */
     onMouseUp(event) {
+        var _a;
         if (this.isDragging) {
             if (this.moved) {
                 this.history.getNewState();
             }
             this.isDragging = false;
+            (_a = this.canvasPositionChangeSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            this.canvasPositionChangeSubscription = null;
             event.stopImmediatePropagation();
             event.preventDefault();
         }