@projectstorm/react-canvas-core - npm Package Compare versions

Comparing version 6.6.1 to 6.7.0

dist/@types/CanvasEngine.d.ts

@@ -21,2 +21,3 @@ import { CanvasModel } from './entities/canvas/CanvasModel';
     registerDefaultDeleteItemsAction?: boolean;
+    registerDefaultPanAndZoomCanvasAction?: boolean;
     registerDefaultZoomCanvasAction?: boolean;
@@ -23,0 +24,0 @@ /**

dist/@types/core-models/BasePositionModel.d.ts

@@ -18,4 +18,4 @@ import { BaseModel, BaseModelGenerics, BaseModelListener, BaseModelOptions } from './BaseModel';
     constructor(options: G['OPTIONS']);
-    setPosition(point: Point): any;
-    setPosition(x: number, y: number): any;
+    setPosition(point: Point): void;
+    setPosition(x: number, y: number): void;
     getBoundingBox(): Rectangle;
@@ -22,0 +22,0 @@ deserialize(event: DeserializeEvent<this>): void;

dist/@types/core/BaseObserver.d.ts

@@ -24,2 +24,3 @@ export interface BaseEvent {
     }) => void;
+} & {
     /**
@@ -26,0 +27,0 @@ * Type for other events that will fire

dist/@types/index.d.ts

@@ -34,1 +34,2 @@ export * from './CanvasEngine';
 export * from './actions/ZoomCanvasAction';
+export * from './actions/PanAndZoomCanvasAction';

dist/CanvasEngine.js

@@ -9,2 +9,3 @@ "use strict";
 const ActionEventBus_1 = require("./core-actions/ActionEventBus");
+const PanAndZoomCanvasAction_1 = require("./actions/PanAndZoomCanvasAction");
 const ZoomCanvasAction_1 = require("./actions/ZoomCanvasAction");
@@ -28,2 +29,5 @@ const DeleteItemsAction_1 = require("./actions/DeleteItemsAction");
         }
+        else if (this.options.registerDefaultPanAndZoomCanvasAction === true) {
+            this.eventBus.registerAction(new PanAndZoomCanvasAction_1.PanAndZoomCanvasAction());
+        }
         if (this.options.registerDefaultDeleteItemsAction === true) {
@@ -30,0 +34,0 @@ this.eventBus.registerAction(new DeleteItemsAction_1.DeleteItemsAction());

dist/core-models/BasePositionModel.js

@@ -12,6 +12,6 @@ "use strict";
     setPosition(x, y) {
-        if (typeof x === 'object') {
+        if (x instanceof geometry_1.Point) {
             this.position = x;
         }
-        else if (typeof x) {
+        else {
             this.position = new geometry_1.Point(x, y);
@@ -18,0 +18,0 @@ }

dist/index.js

@@ -46,2 +46,3 @@ "use strict";
 __exportStar(require("./actions/ZoomCanvasAction"), exports);
+__exportStar(require("./actions/PanAndZoomCanvasAction"), exports);
 //# sourceMappingURL=index.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["projectstorm/react-canvas-core"]=t():e["projectstorm/react-canvas-core"]=t()}(self,(function(){return(()=>{"use strict";var e={306:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CanvasEngine=void 0;const s=i(804),n=i(705),o=i(482),r=i(924),a=i(159),c=i(335),l=i(602),d=i(373);class h extends o.BaseObserver{constructor(e={}){super(),this.model=null,this.eventBus=new a.ActionEventBus(this),this.stateMachine=new d.StateMachine(this),this.layerFactories=new n.FactoryBank,this.registerFactoryBank(this.layerFactories),this.options=Object.assign({registerDefaultDeleteItemsAction:!0,registerDefaultZoomCanvasAction:!0,repaintDebounceMs:0},e),!0===this.options.registerDefaultZoomCanvasAction&&this.eventBus.registerAction(new c.ZoomCanvasAction),!0===this.options.registerDefaultDeleteItemsAction&&this.eventBus.registerAction(new l.DeleteItemsAction)}getStateMachine(){return this.stateMachine}getRelativeMousePoint(e){const t=this.getRelativePoint(e.clientX,e.clientY);return new r.Point((t.x-this.model.getOffsetX())/(this.model.getZoomLevel()/100),(t.y-this.model.getOffsetY())/(this.model.getZoomLevel()/100))}getRelativePoint(e,t){const i=this.canvas.getBoundingClientRect();return new r.Point(e-i.left,t-i.top)}registerFactoryBank(e){e.registerListener({factoryAdded:e=>{e.factory.setDiagramEngine(this)},factoryRemoved:e=>{e.factory.setDiagramEngine(null)}})}getActionEventBus(){return this.eventBus}getLayerFactories(){return this.layerFactories}getFactoryForLayer(e){return"string"==typeof e?this.layerFactories.getFactory(e):this.layerFactories.getFactory(e.getType())}setModel(e){this.model=e,this.canvas&&requestAnimationFrame((()=>{this.repaintCanvas()}))}getModel(){return this.model}repaintCanvas(e){const{repaintDebounceMs:t}=this.options,i=()=>{this.iterateListeners((e=>{e.repaintCanvas&&e.repaintCanvas()}))};let n=i;if(t>0&&(n=s.debounce(i,t)),e)return new Promise((e=>{const t=this.registerListener({rendered:()=>{e(),t.deregister()}});n()}));n()}setCanvas(e){this.canvas!==e&&(this.canvas=e,e&&this.fireEvent({},"canvasReady"))}getCanvas(){return this.canvas}getMouseElement(e){return null}zoomToFit(){const e=this.canvas.clientWidth/this.canvas.scrollWidth,t=this.canvas.clientHeight/this.canvas.scrollHeight,i=e<t?e:t;this.model.setZoomLevel(this.model.getZoomLevel()*i),this.model.setOffset(0,0),this.repaintCanvas()}}t.CanvasEngine=h},312:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Toolkit=void 0;class i{static UID(){return i.TESTING?(i.TESTING_UID++,`${i.TESTING_UID}`):"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(e=>{const t=16*Math.random()|0;return("x"===e?t:3&t|8).toString(16)}))}static closest(e,t){return Element.prototype.closest||(Element.prototype.closest=function(e){var t=this;do{if(Element.prototype.matches.call(t,e))return t;t=t.parentElement||t.parentNode}while(null!==t&&1===t.nodeType);return null}),e.closest(t)}}t.Toolkit=i,i.TESTING=!1,i.TESTING_UID=0},602:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.DeleteItemsAction=void 0;const s=i(402),n=i(804);class o extends s.Action{constructor(e={}){const t=e.keyCodes||[46,8],i=Object.assign({ctrlKey:!1,shiftKey:!1,altKey:!1,metaKey:!1},e.modifiers);super({type:s.InputType.KEY_DOWN,fire:e=>{const{keyCode:s,ctrlKey:o,shiftKey:r,altKey:a,metaKey:c}=e.event;-1!==t.indexOf(s)&&n.isEqual({ctrlKey:o,shiftKey:r,altKey:a,metaKey:c},i)&&(n.forEach(this.engine.getModel().getSelectedEntities(),(e=>{e.isLocked()||e.remove()})),this.engine.repaintCanvas())}})}}t.DeleteItemsAction=o},335:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ZoomCanvasAction=void 0;const s=i(402);class n extends s.Action{constructor(e={}){super({type:s.InputType.MOUSE_WHEEL,fire:t=>{const{event:i}=t;for(let e of this.engine.getModel().getLayers())e.allowRepaint(!1);const s=this.engine.getModel();i.stopPropagation();const n=this.engine.getModel().getZoomLevel()/100;let o=e.inverseZoom?-i.deltaY:i.deltaY;i.ctrlKey&&o%1!=0?o/=3:o/=60,s.getZoomLevel()+o>10&&s.setZoomLevel(s.getZoomLevel()+o);const r=s.getZoomLevel()/100,a=i.currentTarget.getBoundingClientRect(),c=a.width,l=a.height,d=c*r-c*n,h=l*r-l*n,p=i.clientX-a.left,g=i.clientY-a.top,u=(p-s.getOffsetX())/n/c,v=(g-s.getOffsetY())/n/l;s.setOffset(s.getOffsetX()-d*u,s.getOffsetY()-h*v),this.engine.repaintCanvas();for(let e of this.engine.getModel().getLayers())e.allowRepaint(!0)}})}}t.ZoomCanvasAction=n},402:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Action=t.InputType=void 0;const s=i(312);!function(e){e.MOUSE_DOWN="mouse-down",e.MOUSE_UP="mouse-up",e.MOUSE_MOVE="mouse-move",e.MOUSE_WHEEL="mouse-wheel",e.KEY_DOWN="key-down",e.KEY_UP="key-up",e.TOUCH_START="touch-start",e.TOUCH_END="touch-end",e.TOUCH_MOVE="touch-move"}(t.InputType||(t.InputType={}));t.Action=class{constructor(e){this.options=e,this.id=s.Toolkit.UID()}setEngine(e){this.engine=e}}},159:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ActionEventBus=void 0;const s=i(402),n=i(804);t.ActionEventBus=class{constructor(e){this.actions={},this.engine=e,this.keys={}}getKeys(){return n.keys(this.keys)}registerAction(e){return e.setEngine(this.engine),this.actions[e.id]=e,()=>{this.deregisterAction(e)}}deregisterAction(e){e.setEngine(null),delete this.actions[e.id]}getActionsForType(e){return n.filter(this.actions,(t=>t.options.type===e))}getModelForEvent(e){return e.model?e.model:this.engine.getMouseElement(e.event)}getActionsForEvent(e){const{event:t}=e;return"mousedown"===t.type?this.getActionsForType(s.InputType.MOUSE_DOWN):"mouseup"===t.type?this.getActionsForType(s.InputType.MOUSE_UP):"keydown"===t.type?(this.keys[t.key.toLowerCase()]=!0,this.getActionsForType(s.InputType.KEY_DOWN)):"keyup"===t.type?(delete this.keys[t.key.toLowerCase()],this.getActionsForType(s.InputType.KEY_UP)):"mousemove"===t.type?this.getActionsForType(s.InputType.MOUSE_MOVE):"wheel"===t.type?this.getActionsForType(s.InputType.MOUSE_WHEEL):"touchstart"===t.type?this.getActionsForType(s.InputType.TOUCH_START):"touchend"===t.type?this.getActionsForType(s.InputType.TOUCH_END):"touchmove"===t.type?this.getActionsForType(s.InputType.TOUCH_MOVE):[]}fireAction(e){const t=this.getActionsForEvent(e);for(let i of t)i.options.fire(e)}}},718:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.BaseEntity=void 0;const s=i(312),n=i(804),o=i(482);class r extends o.BaseObserver{constructor(e={}){super(),this.options=Object.assign({id:s.Toolkit.UID()},e)}getOptions(){return this.options}getID(){return this.options.id}doClone(e={},t){}clone(e={}){if(e[this.options.id])return e[this.options.id];let t=n.cloneDeep(this);return t.options=Object.assign(Object.assign({},this.options),{id:s.Toolkit.UID()}),t.clearListeners(),e[this.options.id]=t,this.doClone(e,t),t}clearListeners(){this.listeners={}}deserialize(e){this.options.id=e.data.id,this.options.locked=e.data.locked}serialize(){return{id:this.options.id,locked:this.options.locked}}fireEvent(e,t){super.fireEvent(Object.assign({entity:this},e),t)}isLocked(){return this.options.locked}setLocked(e=!0){this.options.locked=e,this.fireEvent({locked:e},"lockChanged")}}t.BaseEntity=r},625:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.BaseModel=void 0;const s=i(718),n=i(801);class o extends s.BaseEntity{constructor(e){super(e)}performanceTune(){return!0}getParentCanvasModel(){return this.parent?this.parent instanceof n.CanvasModel?this.parent:this.parent instanceof o?this.parent.getParentCanvasModel():null:null}getParent(){return this.parent}setParent(e){this.parent=e}getSelectionEntities(){return[this]}serialize(){return Object.assign(Object.assign({},super.serialize()),{type:this.options.type,selected:this.options.selected,extras:this.options.extras})}deserialize(e){super.deserialize(e),this.options.extras=e.data.extras,this.options.selected=e.data.selected}getType(){return this.options.type}isSelected(){return this.options.selected}isLocked(){return!!super.isLocked()||!!this.parent&&this.parent.isLocked()}setSelected(e=!0){this.options.selected!==e&&(this.options.selected=e,this.fireEvent({isSelected:e},"selectionChanged"))}remove(){this.fireEvent({},"entityRemoved")}}t.BaseModel=o},966:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.BasePositionModel=void 0;const s=i(625),n=i(924);class o extends s.BaseModel{constructor(e){super(e),this.position=e.position||new n.Point(0,0)}setPosition(e,t){this.position="object"==typeof e?e:new n.Point(e,t),this.fireEvent({},"positionChanged")}getBoundingBox(){return new n.Rectangle(this.position,0,0)}deserialize(e){super.deserialize(e),this.position=new n.Point(e.data.x,e.data.y)}serialize(){return Object.assign(Object.assign({},super.serialize()),{x:this.position.x,y:this.position.y})}getPosition(){return this.position}getX(){return this.position.x}getY(){return this.position.y}}t.BasePositionModel=o},619:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AbstractDisplacementState=void 0;const s=i(744),n=i(402);class o extends s.State{constructor(e){super(e),this.registerAction(new n.Action({type:n.InputType.MOUSE_DOWN,fire:e=>{const{clientX:t,clientY:i}=e.event;this.handleMoveStart(t,i)}})),this.registerAction(new n.Action({type:n.InputType.MOUSE_MOVE,fire:e=>{const{event:t}=e;if(0===t.buttons)return void this.eject();const{clientX:i,clientY:s}=t;this.handleMove(i,s,t)}})),this.registerAction(new n.Action({type:n.InputType.MOUSE_UP,fire:()=>this.handleMoveEnd()})),this.registerAction(new n.Action({type:n.InputType.TOUCH_START,fire:e=>{const{clientX:t,clientY:i}=e.event.touches[0];this.handleMoveStart(t,i)}})),this.registerAction(new n.Action({type:n.InputType.TOUCH_MOVE,fire:e=>{const{event:t}=e,{clientX:i,clientY:s}=t.touches[0];this.handleMove(i,s,t)}})),this.registerAction(new n.Action({type:n.InputType.TOUCH_END,fire:()=>this.handleMoveEnd()}))}handleMoveStart(e,t){this.initialX=e,this.initialY=t;const i=this.engine.getRelativePoint(e,t);this.initialXRelative=i.x,this.initialYRelative=i.y}handleMove(e,t,i){this.fireMouseMoved({displacementX:e-this.initialX,displacementY:t-this.initialY,virtualDisplacementX:(e-this.initialX)/(this.engine.getModel().getZoomLevel()/100),virtualDisplacementY:(t-this.initialY)/(this.engine.getModel().getZoomLevel()/100),event:i})}handleMoveEnd(){this.eject()}}t.AbstractDisplacementState=o},744:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.State=void 0;const s=i(402),n=i(804);t.State=class{constructor(e){this.actions=[],this.keys=[],this.childStates=[],this.options=e}setEngine(e){this.engine=e}getOptions(){return this.options}eject(){this.engine.getStateMachine().popState()}transitionWithEvent(e,t){this.engine.getStateMachine().pushState(e),this.engine.getActionEventBus().fireAction(t)}registerAction(e){this.actions.push(e)}tryActivateParentState(e){return this.keys.length>0&&!this.isKeysFullfilled(e)&&(this.eject(),!0)}tryActivateChildState(e){const t=this.findStateToActivate(e);return!!t&&(this.engine.getStateMachine().pushState(t),!0)}findStateToActivate(e){for(let t of this.childStates)if(t.isKeysFullfilled(e))return t;return null}isKeysFullfilled(e){return n.intersection(this.keys,e).length===this.keys.length}activated(e){const t=this.engine.getActionEventBus().getKeys();if(!this.tryActivateParentState(t)&&!this.tryActivateChildState(t)){this.handler1=this.engine.getActionEventBus().registerAction(new s.Action({type:s.InputType.KEY_DOWN,fire:()=>{this.tryActivateChildState(this.engine.getActionEventBus().getKeys())}})),this.handler2=this.engine.getActionEventBus().registerAction(new s.Action({type:s.InputType.KEY_UP,fire:()=>{this.tryActivateParentState(this.engine.getActionEventBus().getKeys())}}));for(let e of this.actions)this.engine.getActionEventBus().registerAction(e)}}deactivated(e){this.handler1&&this.handler1(),this.handler2&&this.handler2();for(let e of this.actions)this.engine.getActionEventBus().deregisterAction(e)}}},373:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StateMachine=void 0;const s=i(804),n=i(482);class o extends n.BaseObserver{constructor(e){super(),this.engine=e,this.stateStack=[]}getCurrentState(){return this.currentState}pushState(e){this.stateStack.push(e),this.setState(e)}popState(){this.stateStack.pop(),this.setState(s.last(this.stateStack))}setState(e){e.setEngine(this.engine),this.currentState&&this.currentState.deactivated(e);const t=this.currentState;this.currentState=e,this.currentState&&(this.currentState.activated(t),this.fireEvent({newState:e},"stateChanged"))}}t.StateMachine=o},256:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AbstractFactory=void 0;t.AbstractFactory=class{constructor(e){this.type=e}setDiagramEngine(e){this.engine=e}setFactoryBank(e){this.bank=e}getType(){return this.type}}},19:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AbstractModelFactory=void 0;const s=i(256);class n extends s.AbstractFactory{}t.AbstractModelFactory=n},388:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AbstractReactFactory=void 0;const s=i(19);class n extends s.AbstractModelFactory{}t.AbstractReactFactory=n},482:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.BaseObserver=void 0;const s=i(312);t.BaseObserver=class{constructor(){this.listeners={}}fireEventInternal(e,t,i){this.iterateListeners((s=>{if(!e&&!i.firing)return!1;s[t]&&s[t](i)}))}fireEvent(e,t){e=Object.assign({firing:!0,stopPropagation:()=>{e.firing=!1}},e),this.fireEventInternal(!0,"eventWillFire",Object.assign(Object.assign({},e),{function:t})),this.fireEventInternal(!1,t,e),this.fireEventInternal(!0,"eventDidFire",Object.assign(Object.assign({},e),{function:t}))}iterateListeners(e){for(let t in this.listeners){if(!1===e(this.listeners[t]))return}}getListenerHandle(e){for(let t in this.listeners)if(this.listeners[t]===e)return{id:t,listener:e,deregister:()=>{delete this.listeners[t]}}}registerListener(e){const t=s.Toolkit.UID();return this.listeners[t]=e,{id:t,listener:e,deregister:()=>{delete this.listeners[t]}}}deregisterListener(e){if("object"==typeof e)return e.deregister(),!0;const t=this.getListenerHandle(e);return!!t&&(t.deregister(),!0)}}},705:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.FactoryBank=void 0;const s=i(482),n=i(804);class o extends s.BaseObserver{constructor(){super(),this.factories={}}getFactories(){return n.values(this.factories)}clearFactories(){for(let e in this.factories)this.deregisterFactory(e)}getFactory(e){if(!this.factories[e])throw new Error(`Cannot find factory with type [${e}]`);return this.factories[e]}registerFactory(e){e.setFactoryBank(this),this.factories[e.getType()]=e,this.fireEvent({factory:e},"factoryAdded")}deregisterFactory(e){const t=this.factories[e];t.setFactoryBank(null),delete this.factories[e],this.fireEvent({factory:t},"factoryRemoved")}}t.FactoryBank=o},427:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0})},801:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CanvasModel=void 0;const s=i(804),n=i(718);class o extends n.BaseEntity{constructor(e={}){super(Object.assign({zoom:100,gridSize:0,offsetX:0,offsetY:0},e)),this.layers=[]}getSelectionEntities(){return s.flatMap(this.layers,(e=>e.getSelectionEntities()))}getSelectedEntities(){return s.filter(this.getSelectionEntities(),(e=>e.isSelected()))}clearSelection(){s.forEach(this.getSelectedEntities(),(e=>{e.setSelected(!1)}))}getModels(){return s.flatMap(this.layers,(e=>s.values(e.getModels())))}addLayer(e){e.setParent(this),e.registerListener({entityRemoved:e=>{}}),this.layers.push(e)}removeLayer(e){const t=this.layers.indexOf(e);return-1!==t&&(this.layers.splice(t,1),!0)}getLayers(){return this.layers}setGridSize(e=0){this.options.gridSize=e,this.fireEvent({size:e},"gridUpdated")}getGridPosition(e){return 0===this.options.gridSize?e:this.options.gridSize*Math.floor((e+this.options.gridSize/2)/this.options.gridSize)}deserializeModel(e,t){const i={},s={},n={},o={data:e,engine:t,registerModel:e=>{i[e.getID()]=e,n[e.getID()]&&n[e.getID()](e)},getModel:e=>i[e]?Promise.resolve(i[e]):(s[e]||(s[e]=new Promise((t=>{n[e]=t}))),s[e])};this.deserialize(o)}deserialize(e){super.deserialize(e),this.options.offsetX=e.data.offsetX,this.options.offsetY=e.data.offsetY,this.options.zoom=e.data.zoom,this.options.gridSize=e.data.gridSize,s.forEach(e.data.layers,(t=>{const i=e.engine.getFactoryForLayer(t.type).generateModel({initialConfig:t});i.deserialize(Object.assign(Object.assign({},e),{data:t})),this.addLayer(i)}))}serialize(){return Object.assign(Object.assign({},super.serialize()),{offsetX:this.options.offsetX,offsetY:this.options.offsetY,zoom:this.options.zoom,gridSize:this.options.gridSize,layers:s.map(this.layers,(e=>e.serialize()))})}setZoomLevel(e){this.options.zoom=e,this.fireEvent({zoom:e},"zoomUpdated")}setOffset(e,t){this.options.offsetX=e,this.options.offsetY=t,this.fireEvent({offsetX:e,offsetY:t},"offsetUpdated")}setOffsetX(e){this.setOffset(e,this.options.offsetY)}setOffsetY(e){this.setOffset(this.options.offsetX,e)}getOffsetY(){return this.options.offsetY}getOffsetX(){return this.options.offsetX}getZoomLevel(){return this.options.zoom}}t.CanvasModel=o},69:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CanvasWidget=void 0;const s=i(297),n=i(826),o=i(177),r=i(643);var a;!function(e){e.Canvas=o.default.div`
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["projectstorm/react-canvas-core"]=t():e["projectstorm/react-canvas-core"]=t()}(self,(function(){return(()=>{"use strict";var e={306:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CanvasEngine=void 0;const s=i(804),n=i(705),o=i(482),r=i(924),a=i(159),c=i(601),l=i(335),d=i(602),h=i(373);class p extends o.BaseObserver{constructor(e={}){super(),this.model=null,this.eventBus=new a.ActionEventBus(this),this.stateMachine=new h.StateMachine(this),this.layerFactories=new n.FactoryBank,this.registerFactoryBank(this.layerFactories),this.options=Object.assign({registerDefaultDeleteItemsAction:!0,registerDefaultZoomCanvasAction:!0,repaintDebounceMs:0},e),!0===this.options.registerDefaultZoomCanvasAction?this.eventBus.registerAction(new l.ZoomCanvasAction):!0===this.options.registerDefaultPanAndZoomCanvasAction&&this.eventBus.registerAction(new c.PanAndZoomCanvasAction),!0===this.options.registerDefaultDeleteItemsAction&&this.eventBus.registerAction(new d.DeleteItemsAction)}getStateMachine(){return this.stateMachine}getRelativeMousePoint(e){const t=this.getRelativePoint(e.clientX,e.clientY);return new r.Point((t.x-this.model.getOffsetX())/(this.model.getZoomLevel()/100),(t.y-this.model.getOffsetY())/(this.model.getZoomLevel()/100))}getRelativePoint(e,t){const i=this.canvas.getBoundingClientRect();return new r.Point(e-i.left,t-i.top)}registerFactoryBank(e){e.registerListener({factoryAdded:e=>{e.factory.setDiagramEngine(this)},factoryRemoved:e=>{e.factory.setDiagramEngine(null)}})}getActionEventBus(){return this.eventBus}getLayerFactories(){return this.layerFactories}getFactoryForLayer(e){return"string"==typeof e?this.layerFactories.getFactory(e):this.layerFactories.getFactory(e.getType())}setModel(e){this.model=e,this.canvas&&requestAnimationFrame((()=>{this.repaintCanvas()}))}getModel(){return this.model}repaintCanvas(e){const{repaintDebounceMs:t}=this.options,i=()=>{this.iterateListeners((e=>{e.repaintCanvas&&e.repaintCanvas()}))};let n=i;if(t>0&&(n=s.debounce(i,t)),e)return new Promise((e=>{const t=this.registerListener({rendered:()=>{e(),t.deregister()}});n()}));n()}setCanvas(e){this.canvas!==e&&(this.canvas=e,e&&this.fireEvent({},"canvasReady"))}getCanvas(){return this.canvas}getMouseElement(e){return null}zoomToFit(){const e=this.canvas.clientWidth/this.canvas.scrollWidth,t=this.canvas.clientHeight/this.canvas.scrollHeight,i=e<t?e:t;this.model.setZoomLevel(this.model.getZoomLevel()*i),this.model.setOffset(0,0),this.repaintCanvas()}}t.CanvasEngine=p},312:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Toolkit=void 0;class i{static UID(){return i.TESTING?(i.TESTING_UID++,`${i.TESTING_UID}`):"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(e=>{const t=16*Math.random()|0;return("x"===e?t:3&t|8).toString(16)}))}static closest(e,t){return Element.prototype.closest||(Element.prototype.closest=function(e){var t=this;do{if(Element.prototype.matches.call(t,e))return t;t=t.parentElement||t.parentNode}while(null!==t&&1===t.nodeType);return null}),e.closest(t)}}t.Toolkit=i,i.TESTING=!1,i.TESTING_UID=0},602:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.DeleteItemsAction=void 0;const s=i(402),n=i(804);class o extends s.Action{constructor(e={}){const t=e.keyCodes||[46,8],i=Object.assign({ctrlKey:!1,shiftKey:!1,altKey:!1,metaKey:!1},e.modifiers);super({type:s.InputType.KEY_DOWN,fire:e=>{const{keyCode:s,ctrlKey:o,shiftKey:r,altKey:a,metaKey:c}=e.event;-1!==t.indexOf(s)&&n.isEqual({ctrlKey:o,shiftKey:r,altKey:a,metaKey:c},i)&&(n.forEach(this.engine.getModel().getSelectedEntities(),(e=>{e.isLocked()||e.remove()})),this.engine.repaintCanvas())}})}}t.DeleteItemsAction=o},601:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PanAndZoomCanvasAction=void 0;const s=i(402);class n extends s.Action{constructor(e={}){super({type:s.InputType.MOUSE_WHEEL,fire:t=>{const{event:i}=t;for(let e of this.engine.getModel().getLayers())e.allowRepaint(!1);const s=this.engine.getModel();if(i.stopPropagation(),i.ctrlKey){const t=this.engine.getModel().getZoomLevel()/100;let n=e.inverseZoom?i.deltaY:-i.deltaY;n/=3,s.getZoomLevel()+n>10&&s.setZoomLevel(s.getZoomLevel()+n);const o=s.getZoomLevel()/100,r=i.currentTarget.getBoundingClientRect(),a=r.width,c=r.height,l=a*o-a*t,d=c*o-c*t,h=i.clientX-r.left,p=i.clientY-r.top,g=(h-s.getOffsetX())/t/a,u=(p-s.getOffsetY())/t/c;s.setOffset(s.getOffsetX()-l*g,s.getOffsetY()-d*u)}else{let t=e.inverseZoom?-i.deltaY:i.deltaY,n=e.inverseZoom?-i.deltaX:i.deltaX;s.setOffset(s.getOffsetX()-n,s.getOffsetY()-t)}this.engine.repaintCanvas();for(let e of this.engine.getModel().getLayers())e.allowRepaint(!0)}})}}t.PanAndZoomCanvasAction=n},335:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ZoomCanvasAction=void 0;const s=i(402);class n extends s.Action{constructor(e={}){super({type:s.InputType.MOUSE_WHEEL,fire:t=>{const{event:i}=t;for(let e of this.engine.getModel().getLayers())e.allowRepaint(!1);const s=this.engine.getModel();i.stopPropagation();const n=this.engine.getModel().getZoomLevel()/100;let o=e.inverseZoom?-i.deltaY:i.deltaY;i.ctrlKey&&o%1!=0?o/=3:o/=60,s.getZoomLevel()+o>10&&s.setZoomLevel(s.getZoomLevel()+o);const r=s.getZoomLevel()/100,a=i.currentTarget.getBoundingClientRect(),c=a.width,l=a.height,d=c*r-c*n,h=l*r-l*n,p=i.clientX-a.left,g=i.clientY-a.top,u=(p-s.getOffsetX())/n/c,v=(g-s.getOffsetY())/n/l;s.setOffset(s.getOffsetX()-d*u,s.getOffsetY()-h*v),this.engine.repaintCanvas();for(let e of this.engine.getModel().getLayers())e.allowRepaint(!0)}})}}t.ZoomCanvasAction=n},402:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Action=t.InputType=void 0;const s=i(312);!function(e){e.MOUSE_DOWN="mouse-down",e.MOUSE_UP="mouse-up",e.MOUSE_MOVE="mouse-move",e.MOUSE_WHEEL="mouse-wheel",e.KEY_DOWN="key-down",e.KEY_UP="key-up",e.TOUCH_START="touch-start",e.TOUCH_END="touch-end",e.TOUCH_MOVE="touch-move"}(t.InputType||(t.InputType={}));t.Action=class{constructor(e){this.options=e,this.id=s.Toolkit.UID()}setEngine(e){this.engine=e}}},159:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ActionEventBus=void 0;const s=i(402),n=i(804);t.ActionEventBus=class{constructor(e){this.actions={},this.engine=e,this.keys={}}getKeys(){return n.keys(this.keys)}registerAction(e){return e.setEngine(this.engine),this.actions[e.id]=e,()=>{this.deregisterAction(e)}}deregisterAction(e){e.setEngine(null),delete this.actions[e.id]}getActionsForType(e){return n.filter(this.actions,(t=>t.options.type===e))}getModelForEvent(e){return e.model?e.model:this.engine.getMouseElement(e.event)}getActionsForEvent(e){const{event:t}=e;return"mousedown"===t.type?this.getActionsForType(s.InputType.MOUSE_DOWN):"mouseup"===t.type?this.getActionsForType(s.InputType.MOUSE_UP):"keydown"===t.type?(this.keys[t.key.toLowerCase()]=!0,this.getActionsForType(s.InputType.KEY_DOWN)):"keyup"===t.type?(delete this.keys[t.key.toLowerCase()],this.getActionsForType(s.InputType.KEY_UP)):"mousemove"===t.type?this.getActionsForType(s.InputType.MOUSE_MOVE):"wheel"===t.type?this.getActionsForType(s.InputType.MOUSE_WHEEL):"touchstart"===t.type?this.getActionsForType(s.InputType.TOUCH_START):"touchend"===t.type?this.getActionsForType(s.InputType.TOUCH_END):"touchmove"===t.type?this.getActionsForType(s.InputType.TOUCH_MOVE):[]}fireAction(e){const t=this.getActionsForEvent(e);for(let i of t)i.options.fire(e)}}},718:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.BaseEntity=void 0;const s=i(312),n=i(804),o=i(482);class r extends o.BaseObserver{constructor(e={}){super(),this.options=Object.assign({id:s.Toolkit.UID()},e)}getOptions(){return this.options}getID(){return this.options.id}doClone(e={},t){}clone(e={}){if(e[this.options.id])return e[this.options.id];let t=n.cloneDeep(this);return t.options=Object.assign(Object.assign({},this.options),{id:s.Toolkit.UID()}),t.clearListeners(),e[this.options.id]=t,this.doClone(e,t),t}clearListeners(){this.listeners={}}deserialize(e){this.options.id=e.data.id,this.options.locked=e.data.locked}serialize(){return{id:this.options.id,locked:this.options.locked}}fireEvent(e,t){super.fireEvent(Object.assign({entity:this},e),t)}isLocked(){return this.options.locked}setLocked(e=!0){this.options.locked=e,this.fireEvent({locked:e},"lockChanged")}}t.BaseEntity=r},625:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.BaseModel=void 0;const s=i(718),n=i(801);class o extends s.BaseEntity{constructor(e){super(e)}performanceTune(){return!0}getParentCanvasModel(){return this.parent?this.parent instanceof n.CanvasModel?this.parent:this.parent instanceof o?this.parent.getParentCanvasModel():null:null}getParent(){return this.parent}setParent(e){this.parent=e}getSelectionEntities(){return[this]}serialize(){return Object.assign(Object.assign({},super.serialize()),{type:this.options.type,selected:this.options.selected,extras:this.options.extras})}deserialize(e){super.deserialize(e),this.options.extras=e.data.extras,this.options.selected=e.data.selected}getType(){return this.options.type}isSelected(){return this.options.selected}isLocked(){return!!super.isLocked()||!!this.parent&&this.parent.isLocked()}setSelected(e=!0){this.options.selected!==e&&(this.options.selected=e,this.fireEvent({isSelected:e},"selectionChanged"))}remove(){this.fireEvent({},"entityRemoved")}}t.BaseModel=o},966:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.BasePositionModel=void 0;const s=i(625),n=i(924);class o extends s.BaseModel{constructor(e){super(e),this.position=e.position||new n.Point(0,0)}setPosition(e,t){e instanceof n.Point?this.position=e:this.position=new n.Point(e,t),this.fireEvent({},"positionChanged")}getBoundingBox(){return new n.Rectangle(this.position,0,0)}deserialize(e){super.deserialize(e),this.position=new n.Point(e.data.x,e.data.y)}serialize(){return Object.assign(Object.assign({},super.serialize()),{x:this.position.x,y:this.position.y})}getPosition(){return this.position}getX(){return this.position.x}getY(){return this.position.y}}t.BasePositionModel=o},619:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AbstractDisplacementState=void 0;const s=i(744),n=i(402);class o extends s.State{constructor(e){super(e),this.registerAction(new n.Action({type:n.InputType.MOUSE_DOWN,fire:e=>{const{clientX:t,clientY:i}=e.event;this.handleMoveStart(t,i)}})),this.registerAction(new n.Action({type:n.InputType.MOUSE_MOVE,fire:e=>{const{event:t}=e;if(0===t.buttons)return void this.eject();const{clientX:i,clientY:s}=t;this.handleMove(i,s,t)}})),this.registerAction(new n.Action({type:n.InputType.MOUSE_UP,fire:()=>this.handleMoveEnd()})),this.registerAction(new n.Action({type:n.InputType.TOUCH_START,fire:e=>{const{clientX:t,clientY:i}=e.event.touches[0];this.handleMoveStart(t,i)}})),this.registerAction(new n.Action({type:n.InputType.TOUCH_MOVE,fire:e=>{const{event:t}=e,{clientX:i,clientY:s}=t.touches[0];this.handleMove(i,s,t)}})),this.registerAction(new n.Action({type:n.InputType.TOUCH_END,fire:()=>this.handleMoveEnd()}))}handleMoveStart(e,t){this.initialX=e,this.initialY=t;const i=this.engine.getRelativePoint(e,t);this.initialXRelative=i.x,this.initialYRelative=i.y}handleMove(e,t,i){this.fireMouseMoved({displacementX:e-this.initialX,displacementY:t-this.initialY,virtualDisplacementX:(e-this.initialX)/(this.engine.getModel().getZoomLevel()/100),virtualDisplacementY:(t-this.initialY)/(this.engine.getModel().getZoomLevel()/100),event:i})}handleMoveEnd(){this.eject()}}t.AbstractDisplacementState=o},744:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.State=void 0;const s=i(402),n=i(804);t.State=class{constructor(e){this.actions=[],this.keys=[],this.childStates=[],this.options=e}setEngine(e){this.engine=e}getOptions(){return this.options}eject(){this.engine.getStateMachine().popState()}transitionWithEvent(e,t){this.engine.getStateMachine().pushState(e),this.engine.getActionEventBus().fireAction(t)}registerAction(e){this.actions.push(e)}tryActivateParentState(e){return this.keys.length>0&&!this.isKeysFullfilled(e)&&(this.eject(),!0)}tryActivateChildState(e){const t=this.findStateToActivate(e);return!!t&&(this.engine.getStateMachine().pushState(t),!0)}findStateToActivate(e){for(let t of this.childStates)if(t.isKeysFullfilled(e))return t;return null}isKeysFullfilled(e){return n.intersection(this.keys,e).length===this.keys.length}activated(e){const t=this.engine.getActionEventBus().getKeys();if(!this.tryActivateParentState(t)&&!this.tryActivateChildState(t)){this.handler1=this.engine.getActionEventBus().registerAction(new s.Action({type:s.InputType.KEY_DOWN,fire:()=>{this.tryActivateChildState(this.engine.getActionEventBus().getKeys())}})),this.handler2=this.engine.getActionEventBus().registerAction(new s.Action({type:s.InputType.KEY_UP,fire:()=>{this.tryActivateParentState(this.engine.getActionEventBus().getKeys())}}));for(let e of this.actions)this.engine.getActionEventBus().registerAction(e)}}deactivated(e){this.handler1&&this.handler1(),this.handler2&&this.handler2();for(let e of this.actions)this.engine.getActionEventBus().deregisterAction(e)}}},373:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StateMachine=void 0;const s=i(804),n=i(482);class o extends n.BaseObserver{constructor(e){super(),this.engine=e,this.stateStack=[]}getCurrentState(){return this.currentState}pushState(e){this.stateStack.push(e),this.setState(e)}popState(){this.stateStack.pop(),this.setState(s.last(this.stateStack))}setState(e){e.setEngine(this.engine),this.currentState&&this.currentState.deactivated(e);const t=this.currentState;this.currentState=e,this.currentState&&(this.currentState.activated(t),this.fireEvent({newState:e},"stateChanged"))}}t.StateMachine=o},256:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AbstractFactory=void 0;t.AbstractFactory=class{constructor(e){this.type=e}setDiagramEngine(e){this.engine=e}setFactoryBank(e){this.bank=e}getType(){return this.type}}},19:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AbstractModelFactory=void 0;const s=i(256);class n extends s.AbstractFactory{}t.AbstractModelFactory=n},388:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AbstractReactFactory=void 0;const s=i(19);class n extends s.AbstractModelFactory{}t.AbstractReactFactory=n},482:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.BaseObserver=void 0;const s=i(312);t.BaseObserver=class{constructor(){this.listeners={}}fireEventInternal(e,t,i){this.iterateListeners((s=>{if(!e&&!i.firing)return!1;s[t]&&s[t](i)}))}fireEvent(e,t){e=Object.assign({firing:!0,stopPropagation:()=>{e.firing=!1}},e),this.fireEventInternal(!0,"eventWillFire",Object.assign(Object.assign({},e),{function:t})),this.fireEventInternal(!1,t,e),this.fireEventInternal(!0,"eventDidFire",Object.assign(Object.assign({},e),{function:t}))}iterateListeners(e){for(let t in this.listeners){if(!1===e(this.listeners[t]))return}}getListenerHandle(e){for(let t in this.listeners)if(this.listeners[t]===e)return{id:t,listener:e,deregister:()=>{delete this.listeners[t]}}}registerListener(e){const t=s.Toolkit.UID();return this.listeners[t]=e,{id:t,listener:e,deregister:()=>{delete this.listeners[t]}}}deregisterListener(e){if("object"==typeof e)return e.deregister(),!0;const t=this.getListenerHandle(e);return!!t&&(t.deregister(),!0)}}},705:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.FactoryBank=void 0;const s=i(482),n=i(804);class o extends s.BaseObserver{constructor(){super(),this.factories={}}getFactories(){return n.values(this.factories)}clearFactories(){for(let e in this.factories)this.deregisterFactory(e)}getFactory(e){if(!this.factories[e])throw new Error(`Cannot find factory with type [${e}]`);return this.factories[e]}registerFactory(e){e.setFactoryBank(this),this.factories[e.getType()]=e,this.fireEvent({factory:e},"factoryAdded")}deregisterFactory(e){const t=this.factories[e];t.setFactoryBank(null),delete this.factories[e],this.fireEvent({factory:t},"factoryRemoved")}}t.FactoryBank=o},427:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0})},801:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CanvasModel=void 0;const s=i(804),n=i(718);class o extends n.BaseEntity{constructor(e={}){super(Object.assign({zoom:100,gridSize:0,offsetX:0,offsetY:0},e)),this.layers=[]}getSelectionEntities(){return s.flatMap(this.layers,(e=>e.getSelectionEntities()))}getSelectedEntities(){return s.filter(this.getSelectionEntities(),(e=>e.isSelected()))}clearSelection(){s.forEach(this.getSelectedEntities(),(e=>{e.setSelected(!1)}))}getModels(){return s.flatMap(this.layers,(e=>s.values(e.getModels())))}addLayer(e){e.setParent(this),e.registerListener({entityRemoved:e=>{}}),this.layers.push(e)}removeLayer(e){const t=this.layers.indexOf(e);return-1!==t&&(this.layers.splice(t,1),!0)}getLayers(){return this.layers}setGridSize(e=0){this.options.gridSize=e,this.fireEvent({size:e},"gridUpdated")}getGridPosition(e){return 0===this.options.gridSize?e:this.options.gridSize*Math.floor((e+this.options.gridSize/2)/this.options.gridSize)}deserializeModel(e,t){const i={},s={},n={},o={data:e,engine:t,registerModel:e=>{i[e.getID()]=e,n[e.getID()]&&n[e.getID()](e)},getModel:e=>i[e]?Promise.resolve(i[e]):(s[e]||(s[e]=new Promise((t=>{n[e]=t}))),s[e])};this.deserialize(o)}deserialize(e){super.deserialize(e),this.options.offsetX=e.data.offsetX,this.options.offsetY=e.data.offsetY,this.options.zoom=e.data.zoom,this.options.gridSize=e.data.gridSize,s.forEach(e.data.layers,(t=>{const i=e.engine.getFactoryForLayer(t.type).generateModel({initialConfig:t});i.deserialize(Object.assign(Object.assign({},e),{data:t})),this.addLayer(i)}))}serialize(){return Object.assign(Object.assign({},super.serialize()),{offsetX:this.options.offsetX,offsetY:this.options.offsetY,zoom:this.options.zoom,gridSize:this.options.gridSize,layers:s.map(this.layers,(e=>e.serialize()))})}setZoomLevel(e){this.options.zoom=e,this.fireEvent({zoom:e},"zoomUpdated")}setOffset(e,t){this.options.offsetX=e,this.options.offsetY=t,this.fireEvent({offsetX:e,offsetY:t},"offsetUpdated")}setOffsetX(e){this.setOffset(e,this.options.offsetY)}setOffsetY(e){this.setOffset(this.options.offsetX,e)}getOffsetY(){return this.options.offsetY}getOffsetX(){return this.options.offsetX}getZoomLevel(){return this.options.zoom}}t.CanvasModel=o},69:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CanvasWidget=void 0;const s=i(297),n=i(826),o=i(177),r=i(643);var a;!function(e){e.Canvas=o.default.div`
 		position: relative;
@@ -24,3 +24,3 @@ cursor: move;
 		border: solid 2px rgb(0, 192, 255);
-	`}(o||(o={}));class r extends s.Component{render(){const{rect:e}=this.props;return e?s.createElement(o.Container,{style:{top:e.top,left:e.left,width:e.width,height:e.height}}):null}}t.SelectionBoxWidget=r},485:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.SelectionLayerModel=void 0;const s=i(558);class n extends s.LayerModel{constructor(){super({transformed:!1,isSvg:!1,type:"selection"})}setBox(e){this.box=e}getChildModelFactoryBank(){return null}}t.SelectionLayerModel=n},418:function(e,t,i){var s=this&&this.__createBinding||(Object.create?function(e,t,i,s){void 0===s&&(s=i),Object.defineProperty(e,s,{enumerable:!0,get:function(){return t[i]}})}:function(e,t,i,s){void 0===s&&(s=i),e[s]=t[i]}),n=this&&this.__exportStar||function(e,t){for(var i in e)"default"===i||Object.prototype.hasOwnProperty.call(t,i)||s(t,e,i)};Object.defineProperty(t,"__esModule",{value:!0}),n(i(306),t),n(i(312),t),n(i(801),t),n(i(256),t),n(i(19),t),n(i(388),t),n(i(482),t),n(i(705),t),n(i(427),t),n(i(402),t),n(i(159),t),n(i(718),t),n(i(625),t),n(i(966),t),n(i(801),t),n(i(69),t),n(i(558),t),n(i(826),t),n(i(643),t),n(i(803),t),n(i(582),t),n(i(485),t),n(i(90),t),n(i(619),t),n(i(744),t),n(i(373),t),n(i(944),t),n(i(58),t),n(i(884),t),n(i(597),t),n(i(640),t),n(i(602),t),n(i(335),t)},944:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.DefaultState=void 0;const s=i(744),n=i(402),o=i(58),r=i(884),a=i(640);class c extends s.State{constructor(){super({name:"default"}),this.childStates=[new r.SelectingState],this.registerAction(new n.Action({type:n.InputType.MOUSE_DOWN,fire:e=>{this.engine.getActionEventBus().getModelForEvent(e)?this.transitionWithEvent(new a.MoveItemsState,e):this.transitionWithEvent(new o.DragCanvasState,e)}})),this.registerAction(new n.Action({type:n.InputType.TOUCH_START,fire:e=>{this.transitionWithEvent(new o.DragCanvasState,e)}}))}}t.DefaultState=c},58:function(e,t,i){var s=this&&this.__awaiter||function(e,t,i,s){return new(i||(i=Promise))((function(n,o){function r(e){try{c(s.next(e))}catch(e){o(e)}}function a(e){try{c(s.throw(e))}catch(e){o(e)}}function c(e){var t;e.done?n(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(r,a)}c((s=s.apply(e,t||[])).next())}))};Object.defineProperty(t,"__esModule",{value:!0}),t.DragCanvasState=void 0;const n=i(619);class o extends n.AbstractDisplacementState{constructor(e={}){super({name:"drag-canvas"}),this.config=Object.assign({allowDrag:!0},e)}activated(e){const t=Object.create(null,{activated:{get:()=>super.activated}});return s(this,void 0,void 0,(function*(){t.activated.call(this,e),this.engine.getModel().clearSelection(),yield this.engine.repaintCanvas(!0);for(let e of this.engine.getModel().getLayers())e.allowRepaint(!1);this.initialCanvasX=this.engine.getModel().getOffsetX(),this.initialCanvasY=this.engine.getModel().getOffsetY()}))}deactivated(e){super.deactivated(e);for(let e of this.engine.getModel().getLayers())e.allowRepaint(!0)}fireMouseMoved(e){this.config.allowDrag&&(this.engine.getModel().setOffset(this.initialCanvasX+e.displacementX,this.initialCanvasY+e.displacementY),this.engine.repaintCanvas())}}t.DragCanvasState=o},640:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.MoveItemsState=void 0;const s=i(619),n=i(402),o=i(966);class r extends s.AbstractDisplacementState{constructor(){super({name:"move-items"}),this.registerAction(new n.Action({type:n.InputType.MOUSE_DOWN,fire:e=>{const t=this.engine.getActionEventBus().getModelForEvent(e);t&&(t.isSelected()||this.engine.getModel().clearSelection(),t.setSelected(!0),this.engine.repaintCanvas())}}))}activated(e){super.activated(e),this.initialPositions={}}fireMouseMoved(e){const t=this.engine.getModel().getSelectedEntities(),i=this.engine.getModel();for(let s of t)if(s instanceof o.BasePositionModel){if(s.isLocked())continue;this.initialPositions[s.getID()]||(this.initialPositions[s.getID()]={point:s.getPosition(),item:s});const t=this.initialPositions[s.getID()].point;s.setPosition(i.getGridPosition(t.x+e.virtualDisplacementX),i.getGridPosition(t.y+e.virtualDisplacementY))}this.engine.repaintCanvas()}}t.MoveItemsState=r},884:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.SelectingState=void 0;const s=i(744),n=i(402),o=i(597);class r extends s.State{constructor(){super({name:"selecting"}),this.keys=["shift"],this.registerAction(new n.Action({type:n.InputType.MOUSE_DOWN,fire:e=>{const t=this.engine.getActionEventBus().getModelForEvent(e);t?(t.setSelected(!0),this.engine.repaintCanvas()):this.transitionWithEvent(new o.SelectionBoxState,e)}}))}}t.SelectingState=r},597:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.SelectionBoxState=void 0;const s=i(619),n=i(485),o=i(924);class r extends s.AbstractDisplacementState{constructor(){super({name:"selection-box"})}activated(e){super.activated(e),this.layer=new n.SelectionLayerModel,this.engine.getModel().addLayer(this.layer)}deactivated(e){super.deactivated(e),this.layer.remove(),this.engine.repaintCanvas()}getBoxDimensions(e){let t;if("touches"in e.event){const i=e.event.touches[0];t=this.engine.getRelativePoint(i.clientX,i.clientY)}else t=this.engine.getRelativePoint(e.event.clientX,e.event.clientY);return{left:t.x>this.initialXRelative?this.initialXRelative:t.x,top:t.y>this.initialYRelative?this.initialYRelative:t.y,width:Math.abs(t.x-this.initialXRelative),height:Math.abs(t.y-this.initialYRelative),right:t.x<this.initialXRelative?this.initialXRelative:t.x,bottom:t.y<this.initialYRelative?this.initialYRelative:t.y}}fireMouseMoved(e){this.layer.setBox(this.getBoxDimensions(e));const t=this.engine.getRelativeMousePoint({clientX:this.initialX,clientY:this.initialY});e.virtualDisplacementX<0&&(t.x-=Math.abs(e.virtualDisplacementX)),e.virtualDisplacementY<0&&(t.y-=Math.abs(e.virtualDisplacementY));const i=new o.Rectangle(t,Math.abs(e.virtualDisplacementX),Math.abs(e.virtualDisplacementY));for(let e of this.engine.getModel().getSelectionEntities())if(e.getBoundingBox){const t=e.getBoundingBox();i.containsPoint(t.getTopLeft())&&i.containsPoint(t.getBottomRight())?e.setSelected(!0):e.setSelected(!1)}this.engine.repaintCanvas()}}t.SelectionBoxState=r},90:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PeformanceWidget=void 0;const s=i(297),n=i(804);class o extends s.Component{shouldComponentUpdate(e,t,i){return!this.props.model.performanceTune()||(this.props.model!==e.model||!n.isEqual(this.props.serialized,e.serialized))}render(){return this.props.children()}}t.PeformanceWidget=o},381:e=>{e.exports=require("@emotion/react")},177:e=>{e.exports=require("@emotion/styled")},924:e=>{e.exports=require("@projectstorm/geometry")},804:e=>{e.exports=require("lodash")},297:e=>{e.exports=require("react")}},t={};return function i(s){var n=t[s];if(void 0!==n)return n.exports;var o=t[s]={exports:{}};return e[s].call(o.exports,o,o.exports,i),o.exports}(418)})()}));
+	`}(o||(o={}));class r extends s.Component{render(){const{rect:e}=this.props;return e?s.createElement(o.Container,{style:{top:e.top,left:e.left,width:e.width,height:e.height}}):null}}t.SelectionBoxWidget=r},485:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.SelectionLayerModel=void 0;const s=i(558);class n extends s.LayerModel{constructor(){super({transformed:!1,isSvg:!1,type:"selection"})}setBox(e){this.box=e}getChildModelFactoryBank(){return null}}t.SelectionLayerModel=n},418:function(e,t,i){var s=this&&this.__createBinding||(Object.create?function(e,t,i,s){void 0===s&&(s=i),Object.defineProperty(e,s,{enumerable:!0,get:function(){return t[i]}})}:function(e,t,i,s){void 0===s&&(s=i),e[s]=t[i]}),n=this&&this.__exportStar||function(e,t){for(var i in e)"default"===i||Object.prototype.hasOwnProperty.call(t,i)||s(t,e,i)};Object.defineProperty(t,"__esModule",{value:!0}),n(i(306),t),n(i(312),t),n(i(801),t),n(i(256),t),n(i(19),t),n(i(388),t),n(i(482),t),n(i(705),t),n(i(427),t),n(i(402),t),n(i(159),t),n(i(718),t),n(i(625),t),n(i(966),t),n(i(801),t),n(i(69),t),n(i(558),t),n(i(826),t),n(i(643),t),n(i(803),t),n(i(582),t),n(i(485),t),n(i(90),t),n(i(619),t),n(i(744),t),n(i(373),t),n(i(944),t),n(i(58),t),n(i(884),t),n(i(597),t),n(i(640),t),n(i(602),t),n(i(335),t),n(i(601),t)},944:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.DefaultState=void 0;const s=i(744),n=i(402),o=i(58),r=i(884),a=i(640);class c extends s.State{constructor(){super({name:"default"}),this.childStates=[new r.SelectingState],this.registerAction(new n.Action({type:n.InputType.MOUSE_DOWN,fire:e=>{this.engine.getActionEventBus().getModelForEvent(e)?this.transitionWithEvent(new a.MoveItemsState,e):this.transitionWithEvent(new o.DragCanvasState,e)}})),this.registerAction(new n.Action({type:n.InputType.TOUCH_START,fire:e=>{this.transitionWithEvent(new o.DragCanvasState,e)}}))}}t.DefaultState=c},58:function(e,t,i){var s=this&&this.__awaiter||function(e,t,i,s){return new(i||(i=Promise))((function(n,o){function r(e){try{c(s.next(e))}catch(e){o(e)}}function a(e){try{c(s.throw(e))}catch(e){o(e)}}function c(e){var t;e.done?n(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(r,a)}c((s=s.apply(e,t||[])).next())}))};Object.defineProperty(t,"__esModule",{value:!0}),t.DragCanvasState=void 0;const n=i(619);class o extends n.AbstractDisplacementState{constructor(e={}){super({name:"drag-canvas"}),this.config=Object.assign({allowDrag:!0},e)}activated(e){const t=Object.create(null,{activated:{get:()=>super.activated}});return s(this,void 0,void 0,(function*(){t.activated.call(this,e),this.engine.getModel().clearSelection(),yield this.engine.repaintCanvas(!0);for(let e of this.engine.getModel().getLayers())e.allowRepaint(!1);this.initialCanvasX=this.engine.getModel().getOffsetX(),this.initialCanvasY=this.engine.getModel().getOffsetY()}))}deactivated(e){super.deactivated(e);for(let e of this.engine.getModel().getLayers())e.allowRepaint(!0)}fireMouseMoved(e){this.config.allowDrag&&(this.engine.getModel().setOffset(this.initialCanvasX+e.displacementX,this.initialCanvasY+e.displacementY),this.engine.repaintCanvas())}}t.DragCanvasState=o},640:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.MoveItemsState=void 0;const s=i(619),n=i(402),o=i(966);class r extends s.AbstractDisplacementState{constructor(){super({name:"move-items"}),this.registerAction(new n.Action({type:n.InputType.MOUSE_DOWN,fire:e=>{const t=this.engine.getActionEventBus().getModelForEvent(e);t&&(t.isSelected()||this.engine.getModel().clearSelection(),t.setSelected(!0),this.engine.repaintCanvas())}}))}activated(e){super.activated(e),this.initialPositions={}}fireMouseMoved(e){const t=this.engine.getModel().getSelectedEntities(),i=this.engine.getModel();for(let s of t)if(s instanceof o.BasePositionModel){if(s.isLocked())continue;this.initialPositions[s.getID()]||(this.initialPositions[s.getID()]={point:s.getPosition(),item:s});const t=this.initialPositions[s.getID()].point;s.setPosition(i.getGridPosition(t.x+e.virtualDisplacementX),i.getGridPosition(t.y+e.virtualDisplacementY))}this.engine.repaintCanvas()}}t.MoveItemsState=r},884:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.SelectingState=void 0;const s=i(744),n=i(402),o=i(597);class r extends s.State{constructor(){super({name:"selecting"}),this.keys=["shift"],this.registerAction(new n.Action({type:n.InputType.MOUSE_DOWN,fire:e=>{const t=this.engine.getActionEventBus().getModelForEvent(e);t?(t.setSelected(!0),this.engine.repaintCanvas()):this.transitionWithEvent(new o.SelectionBoxState,e)}}))}}t.SelectingState=r},597:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.SelectionBoxState=void 0;const s=i(619),n=i(485),o=i(924);class r extends s.AbstractDisplacementState{constructor(){super({name:"selection-box"})}activated(e){super.activated(e),this.layer=new n.SelectionLayerModel,this.engine.getModel().addLayer(this.layer)}deactivated(e){super.deactivated(e),this.layer.remove(),this.engine.repaintCanvas()}getBoxDimensions(e){let t;if("touches"in e.event){const i=e.event.touches[0];t=this.engine.getRelativePoint(i.clientX,i.clientY)}else t=this.engine.getRelativePoint(e.event.clientX,e.event.clientY);return{left:t.x>this.initialXRelative?this.initialXRelative:t.x,top:t.y>this.initialYRelative?this.initialYRelative:t.y,width:Math.abs(t.x-this.initialXRelative),height:Math.abs(t.y-this.initialYRelative),right:t.x<this.initialXRelative?this.initialXRelative:t.x,bottom:t.y<this.initialYRelative?this.initialYRelative:t.y}}fireMouseMoved(e){this.layer.setBox(this.getBoxDimensions(e));const t=this.engine.getRelativeMousePoint({clientX:this.initialX,clientY:this.initialY});e.virtualDisplacementX<0&&(t.x-=Math.abs(e.virtualDisplacementX)),e.virtualDisplacementY<0&&(t.y-=Math.abs(e.virtualDisplacementY));const i=new o.Rectangle(t,Math.abs(e.virtualDisplacementX),Math.abs(e.virtualDisplacementY));for(let e of this.engine.getModel().getSelectionEntities())if(e.getBoundingBox){const t=e.getBoundingBox();i.containsPoint(t.getTopLeft())&&i.containsPoint(t.getBottomRight())?e.setSelected(!0):e.setSelected(!1)}this.engine.repaintCanvas()}}t.SelectionBoxState=r},90:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PeformanceWidget=void 0;const s=i(297),n=i(804);class o extends s.Component{shouldComponentUpdate(e,t,i){return!this.props.model.performanceTune()||(this.props.model!==e.model||!n.isEqual(this.props.serialized,e.serialized))}render(){return this.props.children()}}t.PeformanceWidget=o},381:e=>{e.exports=require("@emotion/react")},177:e=>{e.exports=require("@emotion/styled")},924:e=>{e.exports=require("@projectstorm/geometry")},804:e=>{e.exports=require("lodash")},297:e=>{e.exports=require("react")}},t={};return function i(s){var n=t[s];if(void 0!==n)return n.exports;var o=t[s]={exports:{}};return e[s].call(o.exports,o,o.exports,i),o.exports}(418)})()}));
 //# sourceMappingURL=index.umd.js.map

package.json

 {
 	"name": "@projectstorm/react-canvas-core",
-	"version": "6.6.1",
+	"version": "6.7.0",
 	"author": "dylanvorster",
@@ -32,3 +32,3 @@ "license": "MIT",
 	"dependencies": {
-		"@projectstorm/geometry": "^6.6.1"
+		"@projectstorm/geometry": "^6.7.0"
 	},
@@ -39,3 +39,3 @@ "peerDependencies": {
 	},
-	"gitHead": "8b2f5c8961184d041244ec60afc3bd7258b5a36c"
+	"gitHead": "02a37fcf1f76c010a96a5a83f10ff7a104c4df51"
 }

src/CanvasEngine.ts

@@ -11,2 +11,3 @@ import { debounce } from 'lodash';
 import { ActionEventBus } from './core-actions/ActionEventBus';
+import { PanAndZoomCanvasAction } from './actions/PanAndZoomCanvasAction';
 import { ZoomCanvasAction } from './actions/ZoomCanvasAction';
@@ -29,2 +30,3 @@ import { DeleteItemsAction } from './actions/DeleteItemsAction';
 	registerDefaultDeleteItemsAction?: boolean;
+	registerDefaultPanAndZoomCanvasAction?: boolean;
 	registerDefaultZoomCanvasAction?: boolean;
@@ -67,2 +69,4 @@ /**
 			this.eventBus.registerAction(new ZoomCanvasAction());
+		} else if (this.options.registerDefaultPanAndZoomCanvasAction === true) {
+			this.eventBus.registerAction(new PanAndZoomCanvasAction());
 		}
@@ -69,0 +73,0 @@ if (this.options.registerDefaultDeleteItemsAction === true) {

src/core-models/BasePositionModel.ts

@@ -21,4 +21,3 @@ import { BaseModel, BaseModelGenerics, BaseModelListener, BaseModelOptions } from './BaseModel';
 	extends BaseModel<G>
-	implements ModelGeometryInterface
-{
+	implements ModelGeometryInterface {
 	protected position: Point;
@@ -31,8 +30,8 @@
 
-	setPosition(point: Point);
-	setPosition(x: number, y: number);
-	setPosition(x, y?) {
-		if (typeof x === 'object') {
+	setPosition(point: Point): void;
+	setPosition(x: number, y: number): void;
+	setPosition(x: number | Point, y?: number): void {
+		if (x instanceof Point) {
 			this.position = x;
-		} else if (typeof x) {
+		} else {
 			this.position = new Point(x, y);
@@ -39,0 +38,0 @@ }

src/core/BaseObserver.ts

@@ -25,2 +25,3 @@ import { Toolkit } from '../Toolkit';
 	eventDidFire?: (event: BaseEvent & { function: string }) => void;
+} & {
 	/**
@@ -27,0 +28,0 @@ * Type for other events that will fire

src/index.ts

@@ -44,1 +44,2 @@ export * from './CanvasEngine';
 export * from './actions/ZoomCanvasAction';
+export * from './actions/PanAndZoomCanvasAction';

No alert changes

Improved metrics

Total package byte prevSize

334052

increased by2.55%

Number of package files

140

increased by2.19%

Lines of code

4606

increased by2.97%

Dependency changes

• Updated@projectstorm/geometry@^6.7.0