@stemy/ngx-utils 19.7.0 → 19.7.1

package/ngx-utils/common-types.d.ts

@@ -283,9 +283,9 @@ export interface IPaginationData {
 }
 export type PaginationDataLoader = (page: number, itemsPerPage: number) => Promise<IPaginationData>;
 export declare class PaginationItemContext {
-    item: any;
-    parallelItem: any;
-    count: number;
+    readonly item: any;
+    readonly parallelItem: any;
+    readonly count: number;
     index: number;
     dataIndex: number;
     constructor(item: any, parallelItem: any, count: number, index: number, dataIndex: number);
@@ -309,37 +309,52 @@ export interface IShape extends IPoint {
 }
 export type CanvasItemDirection = "horizontal" | "vertical" | "free" | "none";
 export type CanvasPaintFunc = (ctx: CanvasRenderingContext2D) => MaybePromise<GlobalCompositeOperation | null>;
+/**
+ * Interface for an interactive canvas item
+ */
+export interface InteractiveCanvasItem {
+    readonly position: IPoint;
+    readonly shapes: ReadonlyArray<IShape>;
+    readonly canvas: InteractiveCanvas;
+    readonly index: number;
+    readonly active: boolean;
+    readonly isValid: boolean;
+    readonly validPosition: IPoint;
+    draw(ctx: CanvasRenderingContext2D): MaybePromise<void>;
+}
+export type InteractiveCanvasItems = ReadonlyArray<InteractiveCanvasItem>;
+/**
+ * Interface for an interactive canvas component
+ * Some properties are optional for compatibility with other kind of renderer functions
+ */
 export interface InteractiveCanvas {
     readonly params?: Record<string, any>;
-    readonly items?: ReadonlyArray<InteractiveCanvasItem>;
+    readonly $items?: Observable<InteractiveCanvasItems>;
+    readonly items?: InteractiveCanvasItems;
     readonly canvas: HTMLCanvasElement;
+    readonly lockedItem?: InteractiveCanvasItem;
+    readonly selectedItem?: InteractiveCanvasItem;
+    hoveredItem?: InteractiveCanvasItem;
     readonly ratio: number;
     readonly styles: CSSStyleDeclaration;
     readonly ctx: CanvasRenderingContext2D;
     readonly canvasWidth: number;
     readonly canvasHeight: number;
     readonly fullHeight: number;
+    readonly viewRatio: number;
     readonly rotation: number;
     readonly basePan: number;
+    readonly cycles?: ReadonlyArray<number>;
     rendered?: boolean;
     tempPaint(cb: CanvasPaintFunc): Promise<void>;
 }
-export interface InteractiveCanvasItem {
-    readonly position: IPoint;
-    readonly shapes: ReadonlyArray<IShape>;
-    readonly canvas: InteractiveCanvas;
-    readonly index: number;
-    readonly active: boolean;
-    readonly isValid: boolean;
-    readonly validPosition: IPoint;
-    draw(ctx: CanvasRenderingContext2D): MaybePromise<void>;
-}
-export type InteractiveDrawFn = (ctx: InteractiveCanvas) => void | Promise<void>;
+export type InteractiveCanvasRenderer = (renderCanvas: InteractiveCanvas, renderCtx: Record<string, any>) => MaybePromise<void>;
 export interface InteractivePanEvent {
+    canvas: InteractiveCanvas;
+    item: InteractiveCanvasItem;
     pointers?: any[];
     deltaX?: number;
     deltaY?: number;
-    item?: InteractiveCanvasItem;
     [key: string]: any;
 }
 export interface InteractiveCanvasPointer {
@@ -477,6 +492,7 @@ export interface ITableTemplates {
 export interface ITableDataQuery {
     [column: string]: string | string[] | boolean;
 }
+export type TableDataItems = ReadonlyArray<any>;
 export type TableDataLoader = (page: number, rowsPerPage: number, orderBy: string, orderDescending: boolean, filter: string, query: ITableDataQuery) => Promise<IPaginationData>;
 export type DragDropEvent<K extends string = "item", T = any> = {
     [key in K]: T;

package/ngx-utils/components/dynamic-table/dynamic-table.component.d.ts

@@ -1,17 +1,18 @@
-import { AfterContentInit, AfterViewInit, ElementRef, OnChanges, QueryList, SimpleChanges, TemplateRef } from "@angular/core";
-import { DragEventHandler, IPaginationData, ITableColumns, ITableDataQuery, ITableTemplates, PaginationItemContext, TableColumns, TableDataLoader } from "../../common-types";
+import { AfterContentInit, AfterViewInit, ElementRef, OnChanges, OnDestroy, QueryList, SimpleChanges, TemplateRef } from "@angular/core";
+import { DragEventHandler, IPaginationData, ITableColumns, ITableDataQuery, ITableTemplates, PaginationItemContext, TableColumns, TableDataItems, TableDataLoader } from "../../common-types";
 import { DynamicTableTemplateDirective } from "../../directives/dynamic-table-template.directive";
 import { PaginationDirective } from "../../directives/pagination.directive";
 import { DropdownDirective } from "../../directives/dropdown.directive";
+import { Observable, Subscription } from "rxjs";
 import * as i0 from "@angular/core";
-export declare class DynamicTableComponent implements AfterContentInit, AfterViewInit, OnChanges {
+export declare class DynamicTableComponent implements AfterContentInit, AfterViewInit, OnChanges, OnDestroy {
     protected element: ElementRef<HTMLElement>;
     dataLoader: TableDataLoader;
-    data: any[];
+    data: TableDataItems | Observable<TableDataItems>;
     selected: any;
     page: number;
     urlParam: string;
-    parallelData: any[];
+    parallelData: TableDataItems;
     columns: TableColumns;
     /**
      * Parameter for displaying a simple filter search box
@@ -52,7 +53,10 @@ export declare class DynamicTableComponent implements AfterContentInit, AfterVie
     hasQuery: boolean;
     realColumns: ITableColumns;
     cols: string[];
+    sortable: boolean;
     get items(): any[];
+    protected localData: TableDataItems;
+    protected subscription: Subscription;
     rowTemplate: TemplateRef<any>;
     wrapperTemplate: TemplateRef<any>;
     columnsTemplate: TemplateRef<any>;
@@ -65,6 +69,7 @@ export declare class DynamicTableComponent implements AfterContentInit, AfterVie
     setProperty(name: string, value: any): void;
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     ngOnChanges(changes: SimpleChanges): void;
     onDragStart(ev: DragEvent, elem: HTMLElement, item: any): void;
     onDragEnter(ev: DragEvent, elem: HTMLElement, item: any): void;

package/ngx-utils/components/interactive-canvas/interactive-canvas.component.d.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, QueryList, Renderer2 } from "@angular/core";
-import { Subscription } from "rxjs";
-import { CanvasPaintFunc, InteractiveCanvas, InteractiveCanvasItem, InteractiveCanvasPointer, InteractiveDrawFn, InteractivePanEvent } from "../../common-types";
+import { BehaviorSubject, Subscription } from "rxjs";
+import { CanvasPaintFunc, InteractiveCanvas, InteractiveCanvasPointer, InteractiveCanvasRenderer, InteractivePanEvent } from "../../common-types";
 import { InteractiveItemComponent } from "./interactive-item.component";
 import { UniversalService } from "../../services/universal.service";
 import * as i0 from "@angular/core";
@@ -17,16 +17,22 @@ export declare class InteractiveCanvasComponent implements InteractiveCanvas, On
     realHeight: number;
     panOffset: number;
     params: Record<string, any>;
-    beforeItems: InteractiveDrawFn;
-    afterItems: InteractiveDrawFn;
+    renderCtx: Record<string, any>;
+    beforeItems: ReadonlyArray<InteractiveCanvasRenderer>;
+    afterItems: ReadonlyArray<InteractiveCanvasRenderer>;
     selectedIndexChange: EventEmitter<number>;
-    itemPan: EventEmitter<InteractivePanEvent>;
-    itemPanEnd: EventEmitter<InteractivePanEvent>;
-    get items(): ReadonlyArray<InteractiveCanvasItem>;
+    onRotate: EventEmitter<number>;
+    onItemPan: EventEmitter<InteractivePanEvent>;
+    onItemPanned: EventEmitter<InteractivePanEvent>;
+    onPan: EventEmitter<InteractivePanEvent>;
+    onPanned: EventEmitter<InteractivePanEvent>;
+    readonly $items: BehaviorSubject<InteractiveItemComponent[]>;
+    get items(): ReadonlyArray<InteractiveItemComponent>;
     get canvas(): HTMLCanvasElement;
     get lockedItem(): InteractiveItemComponent;
     get selectedItem(): InteractiveItemComponent;
     get hoveredItem(): InteractiveItemComponent;
+    set hoveredItem(item: InteractiveItemComponent);
     ratio: number;
     styles: CSSStyleDeclaration;
     ctx: CanvasRenderingContext2D;
@@ -34,11 +40,12 @@ export declare class InteractiveCanvasComponent implements InteractiveCanvas, On
     canvasHeight: number;
     rotation: number;
     basePan: number;
+    cycles: number[];
     fullHeight: number;
+    viewRatio: number;
     protected tempCanvas: HTMLCanvasElement;
     protected shouldDraw: boolean;
     protected hoveredIndex: number;
-    protected itemComponents: InteractiveItemComponent[];
     protected subscription: Subscription;
     protected containerElem: ElementRef<HTMLDivElement>;
     protected canvasElem: ElementRef<HTMLCanvasElement>;
@@ -57,12 +64,12 @@ export declare class InteractiveCanvasComponent implements InteractiveCanvas, On
     resize(): void;
     onTouchStart($event: TouchEvent): void;
     onTouchEnd($event: TouchEvent): void;
-    onMouseDown(): void;
+    onMouseDown($event: MouseEvent): void;
     onMouseUp($event: MouseEvent): void;
     onMouseMove($event: MouseEvent): void;
     onMouseLeave(): void;
-    onPanStart($event: InteractivePanEvent): void;
-    onPan($event: InteractivePanEvent): void;
+    onPanStart(): void;
+    onPanMove($event: any): void;
     onPanEnd(): void;
     protected fixRotation(): void;
     protected fixItems(): void;
@@ -74,5 +81,5 @@ export declare class InteractiveCanvasComponent implements InteractiveCanvas, On
     protected drawItems(): Promise<void>;
     protected draw(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<InteractiveCanvasComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InteractiveCanvasComponent, "interactive-canvas", never, { "debug": { "alias": "debug"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "resizeMode": { "alias": "resizeMode"; "required": false; }; "realWidth": { "alias": "realWidth"; "required": false; }; "realHeight": { "alias": "realHeight"; "required": false; }; "panOffset": { "alias": "panOffset"; "required": false; }; "params": { "alias": "params"; "required": false; }; "beforeItems": { "alias": "beforeItems"; "required": false; }; "afterItems": { "alias": "afterItems"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "itemPan": "itemPan"; "itemPanEnd": "itemPanEnd"; }, ["itemList"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InteractiveCanvasComponent, "interactive-canvas", never, { "debug": { "alias": "debug"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "resizeMode": { "alias": "resizeMode"; "required": false; }; "realWidth": { "alias": "realWidth"; "required": false; }; "realHeight": { "alias": "realHeight"; "required": false; }; "panOffset": { "alias": "panOffset"; "required": false; }; "params": { "alias": "params"; "required": false; }; "renderCtx": { "alias": "renderCtx"; "required": false; }; "beforeItems": { "alias": "beforeItems"; "required": false; }; "afterItems": { "alias": "afterItems"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "onRotate": "onRotate"; "onItemPan": "onItemPan"; "onItemPanned": "onItemPanned"; "onPan": "onPan"; "onPanned": "onPanned"; }, ["itemList"], never, false, never>;
 }

package/ngx-utils/components/interactive-canvas/interactive-item.component.d.ts

@@ -4,10 +4,11 @@ import { Point } from "../../utils/geometry";
 import { MaybePromise } from "../../helper-types";
 import * as i0 from "@angular/core";
 export declare class InteractiveItemComponent implements OnChanges, InteractiveCanvasItem {
-    protected cycles: number[];
     protected pos: Point;
     protected mShapes: IShape[];
     get shapes(): ReadonlyArray<IShape>;
+    get hovered(): boolean;
+    set hovered(value: boolean);
     get x(): number;
     set x(value: number);
     get y(): number;
@@ -27,12 +28,13 @@ export declare class InteractiveItemComponent implements OnChanges, InteractiveC
     constructor();
     draw(ctx: CanvasRenderingContext2D): MaybePromise<void>;
     ngOnChanges(): void;
-    calcShapes(cycles?: number[]): void;
+    calcShapes(): void;
     hit(point: Point): boolean;
-    move(dx: number, dy: number): void;
+    moveBy(dx: number, dy: number): void;
     moveEnd(): void;
     protected isValidByParams(): boolean;
     protected isValidByDistance(other: InteractiveCanvasItem): boolean;
+    protected distToPixels(value: number): number;
     protected getMinDistance(other: InteractiveCanvasItem): number;
     protected calcShape(x: number, y: number): IShape;
     static ɵfac: i0.ɵɵFactoryDeclaration<InteractiveItemComponent, never>;

package/ngx-utils/utils/math.utils.d.ts

@@ -1,5 +1,5 @@
+export declare const EPSILON = 1e-9;
 export declare class MathUtils {
-    static readonly EPSILON: number;
     static equal(a: number, b: number, epsilon?: number): boolean;
     static clamp(value: number, min: number, max: number): number;
     static round(value: number, precision?: number, divider?: number): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stemy/ngx-utils",
-  "version": "19.7.0",
+  "version": "19.7.1",
   "license": "MIT",
   "public": true,
   "repository": "https://github.com/stemyke/ngx-utils.git",

package/public_api.d.ts

@@ -1,6 +1,6 @@
 import "zone.js";
 export { MaybePromise, MaybeArray, KeysOfType, ObjOfType, StringKeys, CapitalizeFirst, CamelJoin, PrefixedPick } from "./ngx-utils/helper-types";
-export { DurationUnit, TypedFactoryProvider, TypedValueProvider, TypedExistingProvider, TypedClassProvider, TypedTokenProvider, TypedProvider, CachedFactory, ResolveFactory, IResolveFactory, CanvasColor, IIconService, ITranslation, ITranslations, ILanguageSetting, ILanguageSettings, ILanguageService, IUserData, IAuthService, RouteValidator, IRouteData, IRoute, IAclComponent, IDialogButtonConfig, IDialogConfig, IConfirmMessageConfig, IConfirmDialogConfig, IDialogService, IPromiseService, IRouteStateInfo, NavigationUrlParam, StorageMode, ToastType, IToasterService, IAsyncMessage, AsyncMethod, IconMap, IconProps, ButtonType, ButtonSize, ButtonProps, TabValue, TabOption, ChipValue, ChipStatus, ChipOption, DropdownAttachTo, UnorderedListTemplate, UnorderedListTemplates, UnorderedListStyle, UploadType, IFileUploadResult, IFileUploadProcess, IAjaxRequestDetails, AjaxRequestCallback, ScriptType, ILoadableElement, ILoaderPromises, ISearchObservable, FactoryDependencies, ObjectType, ITimer, IExtraProperties, IGroupMap, TranslationQuery, IPageInfo, IPaginationData, PaginationDataLoader, PaginationItemContext, IPoint, IShape, CanvasItemDirection, CanvasPaintFunc, InteractiveCanvas, InteractiveCanvasItem, InteractiveDrawFn, InteractivePanEvent, InteractiveCanvasPointer, HttpRequestHeaders, HttpRequestQuery, HttpClientRequestOptions, HttpRequestOptions, UploadData, IIssueContext, IProgress, ProgressListener, CacheExpireMode, IHttpService, IApiService, DynamicSchemaRef, OpenApiSchemaProperty, OpenApiSchema, OpenApiSchemas, TableFilterType, ITableOrders, ITableColumn, ITableColumns, TableColumns, ITableTemplate, ITableTemplates, ITableDataQuery, TableDataLoader, DragDropEvent, DragEventHandler, ITableDragEvent, DynamicTableDragHandler, ResourceIfContext, CssSelector, CssSelectorList, DynamicComponentLocation, DynamicModuleInfo, DynamicEntryComponents, IConfiguration, IConfigService, ResizeEventStrategy, ErrorHandlerCallback, GlobalComponentModifier, AppInitializerFunc, IModuleConfig, ValuedPromise } from "./ngx-utils/common-types";
+export { DurationUnit, TypedFactoryProvider, TypedValueProvider, TypedExistingProvider, TypedClassProvider, TypedTokenProvider, TypedProvider, CachedFactory, ResolveFactory, IResolveFactory, CanvasColor, IIconService, ITranslation, ITranslations, ILanguageSetting, ILanguageSettings, ILanguageService, IUserData, IAuthService, RouteValidator, IRouteData, IRoute, IAclComponent, IDialogButtonConfig, IDialogConfig, IConfirmMessageConfig, IConfirmDialogConfig, IDialogService, IPromiseService, IRouteStateInfo, NavigationUrlParam, StorageMode, ToastType, IToasterService, IAsyncMessage, AsyncMethod, IconMap, IconProps, ButtonType, ButtonSize, ButtonProps, TabValue, TabOption, ChipValue, ChipStatus, ChipOption, DropdownAttachTo, UnorderedListTemplate, UnorderedListTemplates, UnorderedListStyle, UploadType, IFileUploadResult, IFileUploadProcess, IAjaxRequestDetails, AjaxRequestCallback, ScriptType, ILoadableElement, ILoaderPromises, ISearchObservable, FactoryDependencies, ObjectType, ITimer, IExtraProperties, IGroupMap, TranslationQuery, IPageInfo, IPaginationData, PaginationDataLoader, PaginationItemContext, IPoint, IShape, CanvasItemDirection, CanvasPaintFunc, InteractiveCanvasItem, InteractiveCanvasItems, InteractiveCanvas, InteractiveCanvasRenderer, InteractivePanEvent, InteractiveCanvasPointer, HttpRequestHeaders, HttpRequestQuery, HttpClientRequestOptions, HttpRequestOptions, UploadData, IIssueContext, IProgress, ProgressListener, CacheExpireMode, IHttpService, IApiService, DynamicSchemaRef, OpenApiSchemaProperty, OpenApiSchema, OpenApiSchemas, TableFilterType, ITableOrders, ITableColumn, ITableColumns, TableColumns, ITableTemplate, ITableTemplates, ITableDataQuery, TableDataItems, TableDataLoader, DragDropEvent, DragEventHandler, ITableDragEvent, DynamicTableDragHandler, ResourceIfContext, CssSelector, CssSelectorList, DynamicComponentLocation, DynamicModuleInfo, DynamicEntryComponents, IConfiguration, IConfigService, ResizeEventStrategy, ErrorHandlerCallback, GlobalComponentModifier, AppInitializerFunc, IModuleConfig, ValuedPromise } from "./ngx-utils/common-types";
 export { ICON_TYPE, ICON_MAP, BUTTON_TYPE, ERROR_HANDLER, STATIC_SCHEMAS, RESIZE_STRATEGY, RESIZE_DELAY, ROOT_ELEMENT, SCRIPT_PARAMS, BASE_CONFIG, CONFIG_SERVICE, APP_BASE_URL, API_SERVICE, EXPRESS_REQUEST, PROMISE_SERVICE, DIALOG_SERVICE, TOASTER_SERVICE, AUTH_SERVICE, LANGUAGE_SERVICE, ICON_SERVICE, OPTIONS_TOKEN } from "./ngx-utils/tokens";
 export { AjaxRequestHandler } from "./ngx-utils/utils/ajax-request-handler";
 export { ArrayUtils } from "./ngx-utils/utils/array.utils";