x6-plugin-dnd.js

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@antv/x6")):"function"==typeof define&&define.amd?define(["exports","@antv/x6"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).X6PluginDnd={},t.X6)}(this,(function(t,e){"use strict";class n extends e.View{get targetScroller(){return this.options.target.getPlugin("scroller")}get targetGraph(){return this.options.target}get targetModel(){return this.targetGraph.model}get snapline(){return this.options.target.getPlugin("snapline")}constructor(t){super(),this.name="dnd",this.options=Object.assign(Object.assign({},n.defaults),t),this.init()}init(){e.CssLoader.ensure(this.name,".x6-widget-dnd {\n  position: absolute;\n  top: -10000px;\n  left: -10000px;\n  z-index: 999999;\n  display: none;\n  cursor: move;\n  opacity: 0.7;\n  pointer-events: 'cursor';\n}\n.x6-widget-dnd.dragging {\n  display: inline-block;\n}\n.x6-widget-dnd.dragging * {\n  pointer-events: none !important;\n}\n.x6-widget-dnd .x6-graph {\n  background: transparent;\n  box-shadow: none;\n}\n"),this.container=document.createElement("div"),e.Dom.addClass(this.container,this.prefixClassName("widget-dnd")),this.draggingGraph=new e.Graph(Object.assign(Object.assign({},this.options.delegateGraphOptions),{container:document.createElement("div"),width:1,height:1,async:!1})),e.Dom.append(this.container,this.draggingGraph.container)}start(t,i){const s=i;s.preventDefault(),this.targetModel.startBatch("dnd"),e.Dom.addClass(this.container,"dragging"),e.Dom.appendTo(this.container,this.options.draggingContainer||document.body),this.sourceNode=t,this.prepareDragging(t,s.clientX,s.clientY);const o=this.updateNodePosition(s.clientX,s.clientY);this.isSnaplineEnabled()&&(this.snapline.captureCursorOffset({e:s,node:t,cell:t,view:this.draggingView,x:o.x,y:o.y}),this.draggingNode.on("change:position",this.snap,this)),this.delegateDocumentEvents(n.documentEvents,s.data)}isSnaplineEnabled(){return this.snapline&&this.snapline.isEnabled()}prepareDragging(t,e,n){const i=this.draggingGraph,s=i.model,o=this.options.getDragNode(t,{sourceNode:t,draggingGraph:i,targetGraph:this.targetGraph});o.position(0,0);let a=5;if(this.isSnaplineEnabled()&&(a+=this.snapline.options.tolerance||0),this.isSnaplineEnabled()||this.options.scaled){const t=this.targetGraph.transform.getScale();i.scale(t.sx,t.sy),a*=Math.max(t.sx,t.sy)}else i.scale(1,1);this.clearDragging(),s.resetCells([o]);const r=i.findViewByCell(o);r.undelegateEvents(),r.cell.off("changed"),i.fitToContent({padding:a,allowNewOrigin:"any"});const d=r.getBBox();this.geometryBBox=r.getBBox({useCellGeometry:!0}),this.delta=this.geometryBBox.getTopLeft().diff(d.getTopLeft()),this.draggingNode=o,this.draggingView=r,this.draggingBBox=o.getBBox(),this.padding=a,this.originOffset=this.updateGraphPosition(e,n)}updateGraphPosition(t,n){const i=document.body.scrollTop||document.documentElement.scrollTop,s=this.delta,o=this.geometryBBox,a=this.padding||5,r={left:t-s.x-o.width/2-a,top:n-s.y-o.height/2-a+i};return this.draggingGraph&&e.Dom.css(this.container,{left:`${r.left}px`,top:`${r.top}px`}),r}updateNodePosition(t,e){const n=this.targetGraph.clientToLocal(t,e),i=this.draggingBBox;return n.x-=i.width/2,n.y-=i.height/2,this.draggingNode.position(n.x,n.y),n}snap({cell:t,current:e,options:n}){const i=t;if(n.snapped){const t=this.draggingBBox;i.position(t.x+n.tx,t.y+n.ty,{silent:!0}),this.draggingView.translate(),i.position(e.x,e.y,{silent:!0}),this.snapOffset={x:n.tx,y:n.ty}}else this.snapOffset=null}onDragging(t){const e=this.draggingView;if(e){t.preventDefault();const n=this.normalizeEvent(t),i=n.clientX,s=n.clientY;this.updateGraphPosition(i,s);const o=this.updateNodePosition(i,s),a=this.targetGraph.options.embedding.enabled,r=(a||this.isSnaplineEnabled())&&this.isInsideValidArea({x:i,y:s});if(a){e.setEventData(n,{graph:this.targetGraph,candidateEmbedView:this.candidateEmbedView});const t=e.getEventData(n);r?e.processEmbedding(n,t):e.clearEmbedding(t),this.candidateEmbedView=t.candidateEmbedView}this.isSnaplineEnabled()&&(r?this.snapline.snapOnMoving({e:n,view:e,x:o.x,y:o.y}):this.snapline.hide())}}onDragEnd(t){const n=this.draggingNode;if(n){const i=this.normalizeEvent(t),s=this.draggingView,o=this.draggingBBox,a=this.snapOffset;let r=o.x,d=o.y;a&&(r+=a.x,d+=a.y),n.position(r,d,{silent:!0});const g=this.drop(n,{x:i.clientX,y:i.clientY}),h=t=>{t?(this.onDropped(n),this.targetGraph.options.embedding.enabled&&s&&(s.setEventData(i,{cell:t,graph:this.targetGraph,candidateEmbedView:this.candidateEmbedView}),s.finalizeEmbedding(i,s.getEventData(i)))):this.onDropInvalid(),this.candidateEmbedView=null,this.targetModel.stopBatch("dnd")};e.FunctionExt.isAsync(g)?(this.undelegateDocumentEvents(),g.then(h)):h(g)}}clearDragging(){this.draggingNode&&(this.sourceNode=null,this.draggingNode.remove(),this.draggingNode=null,this.draggingView=null,this.delta=null,this.padding=null,this.snapOffset=null,this.originOffset=null,this.undelegateDocumentEvents())}onDropped(t){this.draggingNode===t&&(this.clearDragging(),e.Dom.removeClass(this.container,"dragging"),e.Dom.remove(this.container))}onDropInvalid(){const t=this.draggingNode;t&&this.onDropped(t)}isInsideValidArea(t){let e,n=null;const i=this.targetGraph,s=this.targetScroller;this.options.dndContainer&&(n=this.getDropArea(this.options.dndContainer));const o=n&&n.containsPoint(t);if(s)if(s.options.autoResize)e=this.getDropArea(s.container);else{const t=this.getDropArea(s.container);e=this.getDropArea(i.container).intersectsWithRect(t)}else e=this.getDropArea(i.container);return!o&&e&&e.containsPoint(t)}getDropArea(t){const n=e.Dom.offset(t),i=document.body.scrollTop||document.documentElement.scrollTop,s=document.body.scrollLeft||document.documentElement.scrollLeft;return e.Rectangle.create({x:n.left+parseInt(e.Dom.css(t,"border-left-width"),10)-s,y:n.top+parseInt(e.Dom.css(t,"border-top-width"),10)-i,width:t.clientWidth,height:t.clientHeight})}drop(t,n){if(this.isInsideValidArea(n)){const i=this.targetGraph,s=i.model,o=i.clientToLocal(n),a=this.sourceNode,r=this.options.getDropNode(t,{sourceNode:a,draggingNode:t,targetGraph:this.targetGraph,draggingGraph:this.draggingGraph}),d=r.getBBox();o.x+=d.x-d.width/2,o.y+=d.y-d.height/2;const g=this.snapOffset?1:i.getGridSize();r.position(e.GeometryUtil.snapToGrid(o.x,g),e.GeometryUtil.snapToGrid(o.y,g)),r.removeZIndex();const h=this.options.validateNode,l=!h||h(r,{sourceNode:a,draggingNode:t,droppingNode:r,targetGraph:i,draggingGraph:this.draggingGraph});return"boolean"==typeof l?l?(s.addCell(r,{stencil:this.cid}),r):null:e.FunctionExt.toDeferredBoolean(l).then((t=>t?(s.addCell(r,{stencil:this.cid}),r):null))}return null}onRemove(){this.draggingGraph&&(this.draggingGraph.view.remove(),this.draggingGraph.dispose())}dispose(){this.remove(),e.CssLoader.clean(this.name)}}!function(t,e,n,i){var s,o=arguments.length,a=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,n,i);else for(var r=t.length-1;r>=0;r--)(s=t[r])&&(a=(o<3?s(a):o>3?s(e,n,a):s(e,n))||a);o>3&&a&&Object.defineProperty(e,n,a)}([e.View.dispose()],n.prototype,"dispose",null),function(t){t.defaults={getDragNode:t=>t.clone(),getDropNode:t=>t.clone()},t.documentEvents={mousemove:"onDragging",touchmove:"onDragging",mouseup:"onDragEnd",touchend:"onDragEnd",touchcancel:"onDragEnd"}}(n||(n={})),t.Dnd=n}));
//# sourceMappingURL=index.js.map