ngx-moveable
Version:
An Angular Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.
74 lines • 15.4 kB
JavaScript
import { Component, EventEmitter, ElementRef, NgZone, Inject, } from '@angular/core';
import Moveable, { PROPERTIES, EVENTS } from 'moveable';
import { NgxMoveableInterface } from './ngx-moveable.interface';
import { ANGULAR_MOVEABLE_INPUTS, ANGULAR_MOVEABLE_OUTPUTS } from './consts';
import * as i0 from "@angular/core";
export class NgxLegacyMoveableComponent extends NgxMoveableInterface {
constructor(_ngZone, _elementRef) {
super();
this._ngZone = _ngZone;
this._elementRef = _elementRef;
EVENTS.forEach((name) => {
// @ts-expect-error
this[name] = new EventEmitter();
});
}
ngOnInit() {
const options = {};
const events = {};
PROPERTIES.forEach(name => {
// @ts-expect-error
options[name] = this[name];
});
EVENTS.forEach(name => {
events[name] = (event) => {
// @ts-expect-error
const emitter = this[name];
if (emitter && (emitter.observed || emitter.observers.length > 0)) {
this._ngZone.run(() => emitter.emit(event));
}
};
});
const container = this._elementRef.nativeElement;
this.moveable = this._ngZone.runOutsideAngular(() => new Moveable(container, {
...options,
warpSelf: true,
}));
this.moveable.on(events);
}
ngOnChanges(changes) {
const moveable = this.moveable;
if (!moveable) {
return;
}
for (const name in changes) {
const { previousValue, currentValue } = changes[name];
if (previousValue === currentValue) {
continue;
}
// @ts-expect-error
moveable[name] = currentValue;
}
}
ngOnDestroy() {
this.moveable.destroy();
}
}
NgxLegacyMoveableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxLegacyMoveableComponent, deps: [{ token: NgZone }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Component });
NgxLegacyMoveableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NgxLegacyMoveableComponent, selector: "ngx-moveable", inputs: { target: "target", dragTargetSelf: "dragTargetSelf", dragTarget: "dragTarget", dragContainer: "dragContainer", container: "container", warpSelf: "warpSelf", rootContainer: "rootContainer", useResizeObserver: "useResizeObserver", useMutationObserver: "useMutationObserver", zoom: "zoom", dragFocusedInput: "dragFocusedInput", transformOrigin: "transformOrigin", ables: "ables", className: "className", pinchThreshold: "pinchThreshold", pinchOutside: "pinchOutside", triggerAblesSimultaneously: "triggerAblesSimultaneously", checkInput: "checkInput", cspNonce: "cspNonce", translateZ: "translateZ", hideDefaultLines: "hideDefaultLines", props: "props", flushSync: "flushSync", stopPropagation: "stopPropagation", preventClickEventOnDrag: "preventClickEventOnDrag", preventClickDefault: "preventClickDefault", viewContainer: "viewContainer", persistData: "persistData", useAccuratePosition: "useAccuratePosition", firstRenderState: "firstRenderState", linePadding: "linePadding", controlPadding: "controlPadding", preventDefault: "preventDefault", preventRightClick: "preventRightClick", preventWheelClick: "preventWheelClick", requestStyles: "requestStyles", snappable: "snappable", snapContainer: "snapContainer", snapDirections: "snapDirections", elementSnapDirections: "elementSnapDirections", snapGap: "snapGap", snapGridWidth: "snapGridWidth", snapGridHeight: "snapGridHeight", isDisplaySnapDigit: "isDisplaySnapDigit", isDisplayInnerSnapDigit: "isDisplayInnerSnapDigit", isDisplayGridGuidelines: "isDisplayGridGuidelines", snapDigit: "snapDigit", snapThreshold: "snapThreshold", snapRenderThreshold: "snapRenderThreshold", snapGridAll: "snapGridAll", snapRotationThreshold: "snapRotationThreshold", snapRotationDegrees: "snapRotationDegrees", snapHorizontalThreshold: "snapHorizontalThreshold", snapVerticalThreshold: "snapVerticalThreshold", horizontalGuidelines: "horizontalGuidelines", verticalGuidelines: "verticalGuidelines", elementGuidelines: "elementGuidelines", bounds: "bounds", innerBounds: "innerBounds", snapDistFormat: "snapDistFormat", maxSnapElementGuidelineDistance: "maxSnapElementGuidelineDistance", maxSnapElementGapDistance: "maxSnapElementGapDistance", pinchable: "pinchable", draggable: "draggable", throttleDrag: "throttleDrag", throttleDragRotate: "throttleDragRotate", hideThrottleDragRotateLine: "hideThrottleDragRotateLine", startDragRotate: "startDragRotate", edgeDraggable: "edgeDraggable", resizable: "resizable", throttleResize: "throttleResize", renderDirections: "renderDirections", displayAroundControls: "displayAroundControls", keepRatio: "keepRatio", resizeFormat: "resizeFormat", keepRatioFinally: "keepRatioFinally", edge: "edge", checkResizableError: "checkResizableError", scalable: "scalable", throttleScale: "throttleScale", warpable: "warpable", rotatable: "rotatable", rotationPosition: "rotationPosition", throttleRotate: "throttleRotate", rotationTarget: "rotationTarget", rotateAroundControls: "rotateAroundControls", resolveAblesWithRotatable: "resolveAblesWithRotatable", scrollable: "scrollable", scrollContainer: "scrollContainer", scrollThreshold: "scrollThreshold", scrollThrottleTime: "scrollThrottleTime", getScrollPosition: "getScrollPosition", scrollOptions: "scrollOptions", padding: "padding", origin: "origin", svgOrigin: "svgOrigin", originDraggable: "originDraggable", originRelative: "originRelative", clippable: "clippable", defaultClipPath: "defaultClipPath", customClipPath: "customClipPath", clipRelative: "clipRelative", clipArea: "clipArea", dragWithClip: "dragWithClip", clipTargetBounds: "clipTargetBounds", clipVerticalGuidelines: "clipVerticalGuidelines", clipHorizontalGuidelines: "clipHorizontalGuidelines", clipSnapThreshold: "clipSnapThreshold", roundable: "roundable", roundRelative: "roundRelative", minRoundControls: "minRoundControls", maxRoundControls: "maxRoundControls", roundClickable: "roundClickable", roundPadding: "roundPadding", isDisplayShadowRoundControls: "isDisplayShadowRoundControls", defaultGroupRotate: "defaultGroupRotate", useDefaultGroupRotate: "useDefaultGroupRotate", defaultGroupOrigin: "defaultGroupOrigin", groupable: "groupable", groupableProps: "groupableProps", targetGroups: "targetGroups", hideChildMoveableDefaultLines: "hideChildMoveableDefaultLines", individualGroupable: "individualGroupable", individualGroupableProps: "individualGroupableProps", clickable: "clickable", dragArea: "dragArea", passDragArea: "passDragArea" }, outputs: { beforeRenderStart: "beforeRenderStart", beforeRender: "beforeRender", beforeRenderEnd: "beforeRenderEnd", beforeRenderGroupStart: "beforeRenderGroupStart", beforeRenderGroup: "beforeRenderGroup", beforeRenderGroupEnd: "beforeRenderGroupEnd", changeTargets: "changeTargets", snap: "snap", bound: "bound", pinchStart: "pinchStart", pinch: "pinch", pinchEnd: "pinchEnd", pinchGroupStart: "pinchGroupStart", pinchGroup: "pinchGroup", pinchGroupEnd: "pinchGroupEnd", dragStart: "dragStart", drag: "drag", dragEnd: "dragEnd", dragGroupStart: "dragGroupStart", dragGroup: "dragGroup", dragGroupEnd: "dragGroupEnd", resizeStart: "resizeStart", beforeResize: "beforeResize", resize: "resize", resizeEnd: "resizeEnd", resizeGroupStart: "resizeGroupStart", beforeResizeGroup: "beforeResizeGroup", resizeGroup: "resizeGroup", resizeGroupEnd: "resizeGroupEnd", scaleStart: "scaleStart", beforeScale: "beforeScale", scale: "scale", scaleEnd: "scaleEnd", scaleGroupStart: "scaleGroupStart", beforeScaleGroup: "beforeScaleGroup", scaleGroup: "scaleGroup", scaleGroupEnd: "scaleGroupEnd", warpStart: "warpStart", warp: "warp", warpEnd: "warpEnd", rotateStart: "rotateStart", beforeRotate: "beforeRotate", rotate: "rotate", rotateEnd: "rotateEnd", rotateGroupStart: "rotateGroupStart", beforeRotateGroup: "beforeRotateGroup", rotateGroup: "rotateGroup", rotateGroupEnd: "rotateGroupEnd", scroll: "scroll", scrollGroup: "scrollGroup", dragOriginStart: "dragOriginStart", dragOrigin: "dragOrigin", dragOriginEnd: "dragOriginEnd", clipStart: "clipStart", clip: "clip", clipEnd: "clipEnd", roundStart: "roundStart", round: "round", roundEnd: "roundEnd", roundGroupStart: "roundGroupStart", roundGroup: "roundGroup", roundGroupEnd: "roundGroupEnd", click: "click", clickGroup: "clickGroup", renderStart: "renderStart", render: "render", renderEnd: "renderEnd", renderGroupStart: "renderGroupStart", renderGroup: "renderGroup", renderGroupEnd: "renderGroupEnd" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxLegacyMoveableComponent, decorators: [{
type: Component,
args: [{
selector: 'ngx-moveable',
template: '',
inputs: ANGULAR_MOVEABLE_INPUTS,
outputs: ANGULAR_MOVEABLE_OUTPUTS,
}]
}], ctorParameters: function () { return [{ type: i0.NgZone, decorators: [{
type: Inject,
args: [NgZone]
}] }, { type: i0.ElementRef, decorators: [{
type: Inject,
args: [ElementRef]
}] }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LW1vdmVhYmxlLmxlZ2FjeS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbW92ZWFibGUvc3JjL25neC1tb3ZlYWJsZS5sZWdhY3kuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBS1QsWUFBWSxFQUNaLFVBQVUsRUFDVixNQUFNLEVBQ04sTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sUUFBUSxFQUFFLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBbUIsTUFBTSxVQUFVLENBQUM7QUFHekUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDaEUsT0FBTyxFQUFFLHVCQUF1QixFQUFFLHdCQUF3QixFQUFFLE1BQU0sVUFBVSxDQUFDOztBQVE3RSxNQUFNLE9BQU8sMEJBQ1gsU0FBUSxvQkFBb0I7SUFHNUIsWUFFVSxPQUFlLEVBRWYsV0FBb0M7UUFFNUMsS0FBSyxFQUFFLENBQUM7UUFKQSxZQUFPLEdBQVAsT0FBTyxDQUFRO1FBRWYsZ0JBQVcsR0FBWCxXQUFXLENBQXlCO1FBRzVDLE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRTtZQUN0QixtQkFBbUI7WUFDbkIsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFDM0MsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsUUFBUTtRQUNOLE1BQU0sT0FBTyxHQUFvQixFQUFFLENBQUM7UUFDcEMsTUFBTSxNQUFNLEdBQWlCLEVBQUUsQ0FBQztRQUVoQyxVQUFVLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxFQUFFO1lBQ3hCLG1CQUFtQjtZQUNsQixPQUFlLENBQUMsSUFBSSxDQUFDLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3RDLENBQUMsQ0FBQyxDQUFDO1FBRUgsTUFBTSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRTtZQUNwQixNQUFNLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxLQUFVLEVBQUUsRUFBRTtnQkFDNUIsbUJBQW1CO2dCQUNuQixNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBQzNCLElBQUksT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsSUFBSSxPQUFPLENBQUMsU0FBUyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsRUFBRTtvQkFDakUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsR0FBRyxFQUFFLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO2lCQUM3QztZQUNILENBQUMsQ0FBQztRQUNKLENBQUMsQ0FBQyxDQUFDO1FBRUgsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUM7UUFFakQsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLGlCQUFpQixDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksUUFBUSxDQUFDLFNBQVMsRUFBRTtZQUMzRSxHQUFHLE9BQU87WUFDVixRQUFRLEVBQUUsSUFBSTtTQUNmLENBQUMsQ0FBQyxDQUFDO1FBQ0osSUFBSSxDQUFDLFFBQVEsQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDO1FBRS9CLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDYixPQUFPO1NBQ1I7UUFDRCxLQUFLLE1BQU0sSUFBSSxJQUFJLE9BQU8sRUFBRTtZQUMxQixNQUFNLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxHQUFHLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUV0RCxJQUFJLGFBQWEsS0FBSyxZQUFZLEVBQUU7Z0JBQ2xDLFNBQVM7YUFDVjtZQUNELG1CQUFtQjtZQUNuQixRQUFRLENBQUMsSUFBSSxDQUFDLEdBQUcsWUFBWSxDQUFDO1NBQy9CO0lBQ0gsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sRUFBRSxDQUFDO0lBQzFCLENBQUM7O3VIQWhFVSwwQkFBMEIsa0JBSzNCLE1BQU0sYUFFTixVQUFVOzJHQVBULDBCQUEwQix1Mk1BSjNCLEVBQUU7MkZBSUQsMEJBQTBCO2tCQU50QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxjQUFjO29CQUN4QixRQUFRLEVBQUUsRUFBRTtvQkFDWixNQUFNLEVBQUUsdUJBQXVCO29CQUMvQixPQUFPLEVBQUUsd0JBQXdCO2lCQUNsQzs7MEJBTUksTUFBTTsyQkFBQyxNQUFNOzswQkFFYixNQUFNOzJCQUFDLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIE9uRGVzdHJveSxcbiAgT25Jbml0LFxuICBPbkNoYW5nZXMsXG4gIFNpbXBsZUNoYW5nZXMsXG4gIEV2ZW50RW1pdHRlcixcbiAgRWxlbWVudFJlZixcbiAgTmdab25lLFxuICBJbmplY3QsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IE1vdmVhYmxlLCB7IFBST1BFUlRJRVMsIEVWRU5UUywgTW92ZWFibGVPcHRpb25zIH0gZnJvbSAnbW92ZWFibGUnO1xuaW1wb3J0IHsgSU9iamVjdCB9IGZyb20gJ0BkYXlicnVzaC91dGlscyc7XG5cbmltcG9ydCB7IE5neE1vdmVhYmxlSW50ZXJmYWNlIH0gZnJvbSAnLi9uZ3gtbW92ZWFibGUuaW50ZXJmYWNlJztcbmltcG9ydCB7IEFOR1VMQVJfTU9WRUFCTEVfSU5QVVRTLCBBTkdVTEFSX01PVkVBQkxFX09VVFBVVFMgfSBmcm9tICcuL2NvbnN0cyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC1tb3ZlYWJsZScsXG4gIHRlbXBsYXRlOiAnJyxcbiAgaW5wdXRzOiBBTkdVTEFSX01PVkVBQkxFX0lOUFVUUyxcbiAgb3V0cHV0czogQU5HVUxBUl9NT1ZFQUJMRV9PVVRQVVRTLFxufSlcbmV4cG9ydCBjbGFzcyBOZ3hMZWdhY3lNb3ZlYWJsZUNvbXBvbmVudFxuICBleHRlbmRzIE5neE1vdmVhYmxlSW50ZXJmYWNlXG4gIGltcGxlbWVudHMgT25EZXN0cm95LCBPbkluaXQsIE9uQ2hhbmdlc1xue1xuICBjb25zdHJ1Y3RvcihcbiAgICBASW5qZWN0KE5nWm9uZSlcbiAgICBwcml2YXRlIF9uZ1pvbmU6IE5nWm9uZSxcbiAgICBASW5qZWN0KEVsZW1lbnRSZWYpXG4gICAgcHJpdmF0ZSBfZWxlbWVudFJlZjogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4sXG4gICkge1xuICAgIHN1cGVyKCk7XG4gICAgRVZFTlRTLmZvckVhY2goKG5hbWUpID0+IHtcbiAgICAgIC8vIEB0cy1leHBlY3QtZXJyb3JcbiAgICAgIHRoaXNbbmFtZV0gPSBuZXcgRXZlbnRFbWl0dGVyPHVua25vd24+KCk7XG4gICAgfSk7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBjb25zdCBvcHRpb25zOiBNb3ZlYWJsZU9wdGlvbnMgPSB7fTtcbiAgICBjb25zdCBldmVudHM6IElPYmplY3Q8YW55PiA9IHt9O1xuXG4gICAgUFJPUEVSVElFUy5mb3JFYWNoKG5hbWUgPT4ge1xuICAgICAgLy8gQHRzLWV4cGVjdC1lcnJvclxuICAgICAgKG9wdGlvbnMgYXMgYW55KVtuYW1lXSA9IHRoaXNbbmFtZV07XG4gICAgfSk7XG5cbiAgICBFVkVOVFMuZm9yRWFjaChuYW1lID0+IHtcbiAgICAgIGV2ZW50c1tuYW1lXSA9IChldmVudDogYW55KSA9PiB7XG4gICAgICAgIC8vIEB0cy1leHBlY3QtZXJyb3JcbiAgICAgICAgY29uc3QgZW1pdHRlciA9IHRoaXNbbmFtZV07XG4gICAgICAgIGlmIChlbWl0dGVyICYmIChlbWl0dGVyLm9ic2VydmVkIHx8IGVtaXR0ZXIub2JzZXJ2ZXJzLmxlbmd0aCA+IDApKSB7XG4gICAgICAgICAgdGhpcy5fbmdab25lLnJ1bigoKSA9PiBlbWl0dGVyLmVtaXQoZXZlbnQpKTtcbiAgICAgICAgfVxuICAgICAgfTtcbiAgICB9KTtcblxuICAgIGNvbnN0IGNvbnRhaW5lciA9IHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudDtcblxuICAgIHRoaXMubW92ZWFibGUgPSB0aGlzLl9uZ1pvbmUucnVuT3V0c2lkZUFuZ3VsYXIoKCkgPT4gbmV3IE1vdmVhYmxlKGNvbnRhaW5lciwge1xuICAgICAgLi4ub3B0aW9ucyxcbiAgICAgIHdhcnBTZWxmOiB0cnVlLFxuICAgIH0pKTtcbiAgICB0aGlzLm1vdmVhYmxlLm9uKGV2ZW50cyk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgY29uc3QgbW92ZWFibGUgPSB0aGlzLm1vdmVhYmxlO1xuXG4gICAgaWYgKCFtb3ZlYWJsZSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBmb3IgKGNvbnN0IG5hbWUgaW4gY2hhbmdlcykge1xuICAgICAgY29uc3QgeyBwcmV2aW91c1ZhbHVlLCBjdXJyZW50VmFsdWUgfSA9IGNoYW5nZXNbbmFtZV07XG5cbiAgICAgIGlmIChwcmV2aW91c1ZhbHVlID09PSBjdXJyZW50VmFsdWUpIHtcbiAgICAgICAgY29udGludWU7XG4gICAgICB9XG4gICAgICAvLyBAdHMtZXhwZWN0LWVycm9yXG4gICAgICBtb3ZlYWJsZVtuYW1lXSA9IGN1cnJlbnRWYWx1ZTtcbiAgICB9XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLm1vdmVhYmxlLmRlc3Ryb3koKTtcbiAgfVxufVxuIl19