@antv/x6-plugin-snapline/dist/index.js

snapline plugin for X6

!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).X6PluginSnapline={},t.X6)}(this,(function(t,e){"use strict";function i(t,e,i,n){var s,a=arguments.length,o=a<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,n);else for(var r=t.length-1;r>=0;r--)(s=t[r])&&(o=(a<3?s(o):a>3?s(e,i,o):s(e,i))||o);return a>3&&o&&Object.defineProperty(e,i,o),o}class n extends e.View{get model(){return this.graph.model}get containerClassName(){return this.prefixClassName("widget-snapline")}get verticalClassName(){return`${this.containerClassName}-vertical`}get horizontalClassName(){return`${this.containerClassName}-horizontal`}constructor(t){super();const{graph:e}=t,i=function(t,e){var i={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(i[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(n=Object.getOwnPropertySymbols(t);s<n.length;s++)e.indexOf(n[s])<0&&Object.prototype.propertyIsEnumerable.call(t,n[s])&&(i[n[s]]=t[n[s]])}return i}(t,["graph"]);this.graph=e,this.options=Object.assign({},i),this.offset={x:0,y:0},this.render(),this.disabled||this.startListening()}get disabled(){return!0!==this.options.enabled}enable(){this.disabled&&(this.options.enabled=!0,this.startListening())}disable(){this.disabled||(this.options.enabled=!1,this.stopListening())}setFilter(t){this.options.filter=t}render(){const t=this.containerWrapper=new e.Vector("svg"),i=this.horizontal=new e.Vector("line"),n=this.vertical=new e.Vector("line");t.addClass(this.containerClassName),i.addClass(this.horizontalClassName),n.addClass(this.verticalClassName),t.setAttribute("width","100%"),t.setAttribute("height","100%"),i.setAttribute("display","none"),n.setAttribute("display","none"),t.append([i,n]),this.options.className&&t.addClass(this.options.className),this.container=this.containerWrapper.node}startListening(){this.stopListening(),this.graph.on("node:mousedown",this.captureCursorOffset,this),this.graph.on("node:mousemove",this.snapOnMoving,this),this.model.on("batch:stop",this.onBatchStop,this),this.delegateDocumentEvents({mouseup:"hide",touchend:"hide"})}stopListening(){this.graph.off("node:mousedown",this.captureCursorOffset,this),this.graph.off("node:mousemove",this.snapOnMoving,this),this.model.off("batch:stop",this.onBatchStop,this),this.undelegateDocumentEvents()}onBatchStop({name:t,data:e}){"resize"===t&&this.snapOnResizing(e.cell,e)}captureCursorOffset({view:t,x:e,y:i}){const n=t.getDelegatedView();if(n&&this.isNodeMovable(n)){const n=t.cell.getPosition();this.offset={x:e-n.x,y:i-n.y}}}isNodeMovable(t){return t&&t.cell.isNode()&&t.can("nodeMovable")}getRestrictArea(t){const i=this.graph.options.translating.restrict,n="function"==typeof i?e.FunctionExt.call(i,this.graph,t):i;return"number"==typeof n?this.graph.transform.getGraphArea().inflate(n):!0===n?this.graph.transform.getGraphArea():n||null}snapOnResizing(t,i){if(this.options.resizing&&!i.snapped&&i.ui&&i.direction&&i.trueDirection){const n=this.graph.renderer.findViewByCell(t);if(n&&n.cell.isNode()){const s=t.getBBox(),a=s.bbox(t.getAngle()),o=a.getTopLeft(),r=a.getBottomRight(),h=e.Angle.normalize(t.getAngle()),l=this.options.tolerance||0;let p,c,g,d,u,b;const f={vertical:0,horizontal:0},m=i.direction,y=i.trueDirection,x=i.relativeDirection;-1!==y.indexOf("right")?f.vertical=r.x:f.vertical=o.x,-1!==y.indexOf("bottom")?f.horizontal=r.y:f.horizontal=o.y,this.model.getNodes().some((i=>{if(this.isIgnored(t,i))return!1;const n=i.getBBox().bbox(i.getAngle()),s=n.getTopLeft(),o=n.getBottomRight(),h={vertical:[s.x,o.x],horizontal:[s.y,o.y]},m={};return Object.keys(h).forEach((t=>{const i=t,n=h[i].map((t=>({position:t,distance:Math.abs(t-f[i])}))).filter((t=>t.distance<=l));m[i]=e.ArrayExt.sortBy(n,(t=>t.distance))})),null==p&&m.vertical.length>0&&(p=m.vertical[0].position,c=Math.min(a.y,n.y),g=Math.max(r.y,o.y)-c),null==d&&m.horizontal.length>0&&(d=m.horizontal[0].position,u=Math.min(a.x,n.x),b=Math.max(r.x,o.x)-u),null!=p&&null!=d})),this.hide();let v=0,z=0;null==d&&null==p||(null!=p&&(v=-1!==y.indexOf("right")?p-r.x:o.x-p),null!=d&&(z=-1!==y.indexOf("bottom")?d-r.y:o.y-d));let O=0,M=0;if(h%90==0)90===h||270===h?(O=z,M=v):(O=v,M=z);else{const t=h>=0&&h<90?1:h>=90&&h<180?4:h>=180&&h<270?3:2;null!=d&&null!=p&&(v<z?(z=0,d=void 0):(v=0,p=void 0));const i=e.Angle.toRad(h%90);v&&(O=3===t?v/Math.cos(i):v/Math.sin(i)),z&&(M=3===t?z/Math.cos(i):z/Math.sin(i));const n=1===t||3===t;switch(x){case"top":case"bottom":M=z?z/(n?Math.cos(i):Math.sin(i)):v/(n?Math.sin(i):Math.cos(i));break;case"left":case"right":O=v?v/(n?Math.cos(i):Math.sin(i)):z/(n?Math.sin(i):Math.cos(i))}}switch(x){case"top":case"bottom":O=0;break;case"left":case"right":M=0}const w=this.graph.getGridSize();let S=Math.max(s.width+O,w),R=Math.max(s.height+M,w);i.minWidth&&i.minWidth>w&&(S=Math.max(S,i.minWidth)),i.minHeight&&i.minHeight>w&&(R=Math.max(R,i.minHeight)),i.maxWidth&&(S=Math.min(S,i.maxWidth)),i.maxHeight&&(R=Math.min(R,i.maxHeight)),i.preserveAspectRatio&&(M<O?R=S*(s.height/s.width):S=R*(s.width/s.height)),S===s.width&&R===s.height||(t.resize(S,R,{direction:m,relativeDirection:x,trueDirection:y,snapped:!0,snaplines:this.cid,restrict:this.getRestrictArea(n)}),g&&(g+=R-s.height),b&&(b+=S-s.width));const T=t.getBBox().bbox(h);p&&Math.abs(T.x-p)>1&&Math.abs(T.width+T.x-p)>1&&(p=void 0),d&&Math.abs(T.y-d)>1&&Math.abs(T.height+T.y-d)>1&&(d=void 0),this.update({verticalLeft:p,verticalTop:c,verticalHeight:g,horizontalTop:d,horizontalLeft:u,horizontalWidth:b})}}}snapOnMoving({view:t,e:i,x:n,y:s}){const a=t.getEventData(i).delegatedView||t;if(!this.isNodeMovable(a))return;const o=a.cell,r=o.getSize(),h=o.getPosition(),l=new e.Rectangle(n-this.offset.x,s-this.offset.y,r.width,r.height),p=o.getAngle(),c=l.getCenter(),g=l.bbox(p),d=g.getTopLeft(),u=g.getBottomRight(),b=this.options.tolerance||0;let f,m,y,x,v,z,O=0,M=0;if(this.model.getNodes().some((t=>{if(this.isIgnored(o,t))return!1;const e=t.getBBox().bbox(t.getAngle()),i=e.getCenter(),n=e.getTopLeft(),s=e.getBottomRight();return null==f&&(Math.abs(i.x-c.x)<b?(f=i.x,O=.5):Math.abs(n.x-d.x)<b?(f=n.x,O=0):Math.abs(n.x-u.x)<b?(f=n.x,O=1):Math.abs(s.x-u.x)<b?(f=s.x,O=1):Math.abs(s.x-d.x)<b&&(f=s.x),null!=f&&(m=Math.min(g.y,e.y),y=Math.max(u.y,s.y)-m)),null==x&&(Math.abs(i.y-c.y)<b?(x=i.y,M=.5):Math.abs(n.y-d.y)<b?x=n.y:Math.abs(n.y-u.y)<b?(x=n.y,M=1):Math.abs(s.y-u.y)<b?(x=s.y,M=1):Math.abs(s.y-d.y)<b&&(x=s.y),null!=x&&(v=Math.min(g.x,e.x),z=Math.max(u.x,s.x)-v)),null!=f&&null!=x})),this.hide(),null!=x||null!=f){null!=x&&(g.y=x-M*g.height),null!=f&&(g.x=f-O*g.width);const t=g.getCenter(),e=t.x-l.width/2,i=t.y-l.height/2,n=e-h.x,s=i-h.y;0===n&&0===s||(o.translate(n,s,{snapped:!0,restrict:this.getRestrictArea(a)}),z&&(z+=n),y&&(y+=s)),this.update({verticalLeft:f,verticalTop:m,verticalHeight:y,horizontalTop:x,horizontalLeft:v,horizontalWidth:z})}}isIgnored(t,e){return e.id===t.id||e.isDescendantOf(t)||!this.filter(e)}filter(t){const i=this.options.filter;return Array.isArray(i)?i.some((e=>"string"==typeof e?t.shape===e:t.id===e.id)):"function"!=typeof i||e.FunctionExt.call(i,this.graph,t)}update(t){if(t.horizontalTop){const i=this.graph.localToGraph(new e.Point(t.horizontalLeft,t.horizontalTop)),n=this.graph.localToGraph(new e.Point(t.horizontalLeft+t.horizontalWidth,t.horizontalTop));this.horizontal.setAttributes({x1:this.options.sharp?`${i.x}`:"0",y1:`${i.y}`,x2:this.options.sharp?`${n.x}`:"100%",y2:`${n.y}`,display:"inherit"})}else this.horizontal.setAttribute("display","none");if(t.verticalLeft){const i=this.graph.localToGraph(new e.Point(t.verticalLeft,t.verticalTop)),n=this.graph.localToGraph(new e.Point(t.verticalLeft,t.verticalTop+t.verticalHeight));this.vertical.setAttributes({x1:`${i.x}`,y1:this.options.sharp?`${i.y}`:"0",x2:`${n.x}`,y2:this.options.sharp?`${n.y}`:"100%",display:"inherit"})}else this.vertical.setAttribute("display","none");this.show()}resetTimer(){this.timer&&(clearTimeout(this.timer),this.timer=null)}show(){return this.resetTimer(),null==this.container.parentNode&&this.graph.container.appendChild(this.container),this}hide(){this.resetTimer(),this.vertical.setAttribute("display","none"),this.horizontal.setAttribute("display","none");const t=this.options.clean,e="number"==typeof t?t:!1!==t?3e3:0;return e>0&&(this.timer=window.setTimeout((()=>{null!==this.container.parentNode&&this.unmount()}),e)),this}onRemove(){this.stopListening(),this.hide()}dispose(){this.remove()}}i([e.View.dispose()],n.prototype,"dispose",null);e.Graph.prototype.isSnaplineEnabled=function(){const t=this.getPlugin("snapline");return!!t&&t.isEnabled()},e.Graph.prototype.enableSnapline=function(){const t=this.getPlugin("snapline");return t&&t.enable(),this},e.Graph.prototype.disableSnapline=function(){const t=this.getPlugin("snapline");return t&&t.disable(),this},e.Graph.prototype.toggleSnapline=function(){const t=this.getPlugin("snapline");return t&&t.toggleEnabled(),this},e.Graph.prototype.hideSnapline=function(){const t=this.getPlugin("snapline");return t&&t.hide(),this},e.Graph.prototype.setSnaplineFilter=function(t){const e=this.getPlugin("snapline");return e&&e.setFilter(t),this},e.Graph.prototype.isSnaplineOnResizingEnabled=function(){const t=this.getPlugin("snapline");return!!t&&t.isOnResizingEnabled()},e.Graph.prototype.enableSnaplineOnResizing=function(){const t=this.getPlugin("snapline");return t&&t.enableOnResizing(),this},e.Graph.prototype.disableSnaplineOnResizing=function(){const t=this.getPlugin("snapline");return t&&t.disableOnResizing(),this},e.Graph.prototype.toggleSnaplineOnResizing=function(t){const e=this.getPlugin("snapline");return e&&e.toggleOnResizing(t),this},e.Graph.prototype.isSharpSnapline=function(){const t=this.getPlugin("snapline");return!!t&&t.isSharp()},e.Graph.prototype.enableSharpSnapline=function(){const t=this.getPlugin("snapline");return t&&t.enableSharp(),this},e.Graph.prototype.disableSharpSnapline=function(){const t=this.getPlugin("snapline");return t&&t.disableSharp(),this},e.Graph.prototype.toggleSharpSnapline=function(t){const e=this.getPlugin("snapline");return e&&e.toggleSharp(t),this},e.Graph.prototype.getSnaplineTolerance=function(){const t=this.getPlugin("snapline");if(t)return t.getTolerance()},e.Graph.prototype.setSnaplineTolerance=function(t){const e=this.getPlugin("snapline");return e&&e.setTolerance(t),this};class s extends e.Disposable{constructor(t={}){super(),this.name="snapline",this.options=Object.assign({enabled:!0,tolerance:10},t),e.CssLoader.ensure(this.name,".x6-widget-snapline {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  pointer-events: none;\n}\n.x6-widget-snapline-vertical,\n.x6-widget-snapline-horizontal {\n  stroke: #2ecc71;\n  stroke-width: 1px;\n}\n")}init(t){this.snaplineImpl=new n(Object.assign(Object.assign({},this.options),{graph:t}))}isEnabled(){return!this.snaplineImpl.disabled}enable(){this.snaplineImpl.enable()}disable(){this.snaplineImpl.disable()}toggleEnabled(t){if(null==t)return this.isEnabled()?this.disable():this.enable(),this;t!==this.isEnabled()&&(t?this.enable():this.disable())}hide(){return this.snaplineImpl.hide(),this}setFilter(t){return this.snaplineImpl.setFilter(t),this}isOnResizingEnabled(){return!0===this.snaplineImpl.options.resizing}enableOnResizing(){return this.snaplineImpl.options.resizing=!0,this}disableOnResizing(){return this.snaplineImpl.options.resizing=!1,this}toggleOnResizing(t){return null!=t?t!==this.isOnResizingEnabled()&&(t?this.enableOnResizing():this.disableOnResizing()):this.isOnResizingEnabled()?this.disableOnResizing():this.enableOnResizing(),this}isSharp(){return!0===this.snaplineImpl.options.sharp}enableSharp(){return this.snaplineImpl.options.sharp=!0,this}disableSharp(){return this.snaplineImpl.options.sharp=!1,this}toggleSharp(t){return null!=t?t!==this.isSharp()&&(t?this.enableSharp():this.disableSharp()):this.isSharp()?this.disableSharp():this.enableSharp(),this}getTolerance(){return this.snaplineImpl.options.tolerance}setTolerance(t){return this.snaplineImpl.options.tolerance=t,this}captureCursorOffset(t){this.snaplineImpl.captureCursorOffset(t)}snapOnMoving(t){this.snaplineImpl.snapOnMoving(t)}dispose(){this.snaplineImpl.dispose(),e.CssLoader.clean(this.name)}}i([e.Disposable.dispose()],s.prototype,"dispose",null),t.Snapline=s}));
//# sourceMappingURL=index.js.map