ngx-moveable
Version:
An Angular Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.
75 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 NgxMoveableComponent 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();
}
}
NgxMoveableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxMoveableComponent, deps: [{ token: NgZone }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Component });
NgxMoveableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NgxMoveableComponent, isStandalone: true, 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: NgxMoveableComponent, decorators: [{
type: Component,
args: [{
standalone: true,
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LW1vdmVhYmxlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC1tb3ZlYWJsZS9zcmMvbmd4LW1vdmVhYmxlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUtULFlBQVksRUFDWixVQUFVLEVBQ1YsTUFBTSxFQUNOLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLFFBQVEsRUFBRSxFQUFFLFVBQVUsRUFBRSxNQUFNLEVBQW1CLE1BQU0sVUFBVSxDQUFDO0FBR3pFLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ2hFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSx3QkFBd0IsRUFBRSxNQUFNLFVBQVUsQ0FBQzs7QUFTN0UsTUFBTSxPQUFPLG9CQUNYLFNBQVEsb0JBQW9CO0lBRzVCLFlBRVUsT0FBZSxFQUVmLFdBQW9DO1FBRTVDLEtBQUssRUFBRSxDQUFDO1FBSkEsWUFBTyxHQUFQLE9BQU8sQ0FBUTtRQUVmLGdCQUFXLEdBQVgsV0FBVyxDQUF5QjtRQUc1QyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUU7WUFDdEIsbUJBQW1CO1lBQ25CLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBQzNDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELFFBQVE7UUFDTixNQUFNLE9BQU8sR0FBb0IsRUFBRSxDQUFDO1FBQ3BDLE1BQU0sTUFBTSxHQUFpQixFQUFFLENBQUM7UUFFaEMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRTtZQUN4QixtQkFBbUI7WUFDbEIsT0FBZSxDQUFDLElBQUksQ0FBQyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUN0QyxDQUFDLENBQUMsQ0FBQztRQUVILE1BQU0sQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUU7WUFDcEIsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBVSxFQUFFLEVBQUU7Z0JBQzVCLG1CQUFtQjtnQkFDbkIsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUMzQixJQUFJLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLElBQUksT0FBTyxDQUFDLFNBQVMsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLEVBQUU7b0JBQ2pFLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztpQkFDN0M7WUFDSCxDQUFDLENBQUM7UUFDSixDQUFDLENBQUMsQ0FBQztRQUVILE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDO1FBRWpELElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxpQkFBaUIsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLFFBQVEsQ0FBQyxTQUFTLEVBQUU7WUFDM0UsR0FBRyxPQUFPO1lBQ1YsUUFBUSxFQUFFLElBQUk7U0FDZixDQUFDLENBQUMsQ0FBQztRQUNKLElBQUksQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQzNCLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQztRQUUvQixJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2IsT0FBTztTQUNSO1FBQ0QsS0FBSyxNQUFNLElBQUksSUFBSSxPQUFPLEVBQUU7WUFDMUIsTUFBTSxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsR0FBRyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUM7WUFFdEQsSUFBSSxhQUFhLEtBQUssWUFBWSxFQUFFO2dCQUNsQyxTQUFTO2FBQ1Y7WUFDRCxtQkFBbUI7WUFDbkIsUUFBUSxDQUFDLElBQUksQ0FBQyxHQUFHLFlBQVksQ0FBQztTQUMvQjtJQUNILENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUMxQixDQUFDOztpSEFoRVUsb0JBQW9CLGtCQUtyQixNQUFNLGFBRU4sVUFBVTtxR0FQVCxvQkFBb0IsMjNNQUpyQixFQUFFOzJGQUlELG9CQUFvQjtrQkFQaEMsU0FBUzttQkFBQztvQkFDVCxVQUFVLEVBQUUsSUFBSTtvQkFDaEIsUUFBUSxFQUFFLGNBQWM7b0JBQ3hCLFFBQVEsRUFBRSxFQUFFO29CQUNaLE1BQU0sRUFBRSx1QkFBdUI7b0JBQy9CLE9BQU8sRUFBRSx3QkFBd0I7aUJBQ2xDOzswQkFNSSxNQUFNOzJCQUFDLE1BQU07OzBCQUViLE1BQU07MkJBQUMsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIE9uQ2hhbmdlcyxcbiAgU2ltcGxlQ2hhbmdlcyxcbiAgRXZlbnRFbWl0dGVyLFxuICBFbGVtZW50UmVmLFxuICBOZ1pvbmUsXG4gIEluamVjdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgTW92ZWFibGUsIHsgUFJPUEVSVElFUywgRVZFTlRTLCBNb3ZlYWJsZU9wdGlvbnMgfSBmcm9tICdtb3ZlYWJsZSc7XG5pbXBvcnQgeyBJT2JqZWN0IH0gZnJvbSAnQGRheWJydXNoL3V0aWxzJztcblxuaW1wb3J0IHsgTmd4TW92ZWFibGVJbnRlcmZhY2UgfSBmcm9tICcuL25neC1tb3ZlYWJsZS5pbnRlcmZhY2UnO1xuaW1wb3J0IHsgQU5HVUxBUl9NT1ZFQUJMRV9JTlBVVFMsIEFOR1VMQVJfTU9WRUFCTEVfT1VUUFVUUyB9IGZyb20gJy4vY29uc3RzJztcblxuQENvbXBvbmVudCh7XG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHNlbGVjdG9yOiAnbmd4LW1vdmVhYmxlJyxcbiAgdGVtcGxhdGU6ICcnLFxuICBpbnB1dHM6IEFOR1VMQVJfTU9WRUFCTEVfSU5QVVRTLFxuICBvdXRwdXRzOiBBTkdVTEFSX01PVkVBQkxFX09VVFBVVFMsXG59KVxuZXhwb3J0IGNsYXNzIE5neE1vdmVhYmxlQ29tcG9uZW50XG4gIGV4dGVuZHMgTmd4TW92ZWFibGVJbnRlcmZhY2VcbiAgaW1wbGVtZW50cyBPbkRlc3Ryb3ksIE9uSW5pdCwgT25DaGFuZ2VzXG57XG4gIGNvbnN0cnVjdG9yKFxuICAgIEBJbmplY3QoTmdab25lKVxuICAgIHByaXZhdGUgX25nWm9uZTogTmdab25lLFxuICAgIEBJbmplY3QoRWxlbWVudFJlZilcbiAgICBwcml2YXRlIF9lbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgKSB7XG4gICAgc3VwZXIoKTtcbiAgICBFVkVOVFMuZm9yRWFjaCgobmFtZSkgPT4ge1xuICAgICAgLy8gQHRzLWV4cGVjdC1lcnJvclxuICAgICAgdGhpc1tuYW1lXSA9IG5ldyBFdmVudEVtaXR0ZXI8dW5rbm93bj4oKTtcbiAgICB9KTtcbiAgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIGNvbnN0IG9wdGlvbnM6IE1vdmVhYmxlT3B0aW9ucyA9IHt9O1xuICAgIGNvbnN0IGV2ZW50czogSU9iamVjdDxhbnk+ID0ge307XG5cbiAgICBQUk9QRVJUSUVTLmZvckVhY2gobmFtZSA9PiB7XG4gICAgICAvLyBAdHMtZXhwZWN0LWVycm9yXG4gICAgICAob3B0aW9ucyBhcyBhbnkpW25hbWVdID0gdGhpc1tuYW1lXTtcbiAgICB9KTtcblxuICAgIEVWRU5UUy5mb3JFYWNoKG5hbWUgPT4ge1xuICAgICAgZXZlbnRzW25hbWVdID0gKGV2ZW50OiBhbnkpID0+IHtcbiAgICAgICAgLy8gQHRzLWV4cGVjdC1lcnJvclxuICAgICAgICBjb25zdCBlbWl0dGVyID0gdGhpc1tuYW1lXTtcbiAgICAgICAgaWYgKGVtaXR0ZXIgJiYgKGVtaXR0ZXIub2JzZXJ2ZWQgfHwgZW1pdHRlci5vYnNlcnZlcnMubGVuZ3RoID4gMCkpIHtcbiAgICAgICAgICB0aGlzLl9uZ1pvbmUucnVuKCgpID0+IGVtaXR0ZXIuZW1pdChldmVudCkpO1xuICAgICAgICB9XG4gICAgICB9O1xuICAgIH0pO1xuXG4gICAgY29uc3QgY29udGFpbmVyID0gdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50O1xuXG4gICAgdGhpcy5tb3ZlYWJsZSA9IHRoaXMuX25nWm9uZS5ydW5PdXRzaWRlQW5ndWxhcigoKSA9PiBuZXcgTW92ZWFibGUoY29udGFpbmVyLCB7XG4gICAgICAuLi5vcHRpb25zLFxuICAgICAgd2FycFNlbGY6IHRydWUsXG4gICAgfSkpO1xuICAgIHRoaXMubW92ZWFibGUub24oZXZlbnRzKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBjb25zdCBtb3ZlYWJsZSA9IHRoaXMubW92ZWFibGU7XG5cbiAgICBpZiAoIW1vdmVhYmxlKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGZvciAoY29uc3QgbmFtZSBpbiBjaGFuZ2VzKSB7XG4gICAgICBjb25zdCB7IHByZXZpb3VzVmFsdWUsIGN1cnJlbnRWYWx1ZSB9ID0gY2hhbmdlc1tuYW1lXTtcblxuICAgICAgaWYgKHByZXZpb3VzVmFsdWUgPT09IGN1cnJlbnRWYWx1ZSkge1xuICAgICAgICBjb250aW51ZTtcbiAgICAgIH1cbiAgICAgIC8vIEB0cy1leHBlY3QtZXJyb3JcbiAgICAgIG1vdmVhYmxlW25hbWVdID0gY3VycmVudFZhbHVlO1xuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMubW92ZWFibGUuZGVzdHJveSgpO1xuICB9XG59XG4iXX0=