mirror of
https://github.com/sotam0316/drawNET.git
synced 2026-04-24 19:48:36 +09:00
sotam0316
2 lines
15 KiB
JavaScript
2 lines
15 KiB
JavaScript
!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).X6PluginTransform={},t.X6)}(this,(function(t,e){"use strict";function i(t,e,i,o){var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,o);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r}class o extends e.View{get model(){return this.graph.model}get view(){return this.graph.renderer.findViewByCell(this.node)}get containerClassName(){return this.prefixClassName("widget-transform")}get resizeClassName(){return`${this.containerClassName}-resize`}get rotateClassName(){return`${this.containerClassName}-rotate`}constructor(t,e,i){super(),this.node=e,this.graph=i,this.options=Object.assign(Object.assign({},s.defaultOptions),t),this.render(),this.startListening()}startListening(){this.delegateEvents({[`mousedown .${this.resizeClassName}`]:"startResizing",[`touchstart .${this.resizeClassName}`]:"startResizing",[`mousedown .${this.rotateClassName}`]:"startRotating",[`touchstart .${this.rotateClassName}`]:"startRotating"}),this.model.on("*",this.update,this),this.graph.on("scale",this.update,this),this.graph.on("translate",this.update,this),this.node.on("removed",this.remove,this),this.model.on("reseted",this.remove,this),this.view.on("cell:knob:mousedown",this.onKnobMouseDown,this),this.view.on("cell:knob:mouseup",this.onKnobMouseUp,this)}stopListening(){this.undelegateEvents(),this.model.off("*",this.update,this),this.graph.off("scale",this.update,this),this.graph.off("translate",this.update,this),this.node.off("removed",this.remove,this),this.model.off("reseted",this.remove,this),this.view.off("cell:knob:mousedown",this.onKnobMouseDown,this),this.view.off("cell:knob:mouseup",this.onKnobMouseUp,this)}renderHandles(){this.container=document.createElement("div");const t=document.createElement("div");e.Dom.attr(t,"draggable","false");const i=t.cloneNode(!0);e.Dom.addClass(i,this.rotateClassName);const o=s.POSITIONS.map((i=>{const o=t.cloneNode(!0);return e.Dom.addClass(o,this.resizeClassName),e.Dom.attr(o,"data-position",i),o}));this.empty(),e.Dom.append(this.container,[...o,i])}render(){return this.renderHandles(),this.view&&this.view.addClass(s.NODE_CLS),e.Dom.addClass(this.container,this.containerClassName),e.Dom.toggleClass(this.container,"no-orth-resize",this.options.preserveAspectRatio||!this.options.orthogonalResizing),e.Dom.toggleClass(this.container,"no-resize",!this.options.resizable),e.Dom.toggleClass(this.container,"no-rotate",!this.options.rotatable),this.options.className&&e.Dom.addClass(this.container,this.options.className),this.graph.container.appendChild(this.container),this.update()}update(){const t=this.graph.matrix(),i=this.node.getBBox();i.x*=t.a,i.x+=t.e,i.y*=t.d,i.y+=t.f,i.width*=t.a,i.height*=t.d;const o=e.Angle.normalize(this.node.getAngle()),s=0!==o?`rotate(${o}deg)`:"";return e.Dom.css(this.container,{transform:s,width:i.width,height:i.height,left:i.x,top:i.y}),this.updateResizerDirections(),this}remove(){return this.view&&this.view.removeClass(s.NODE_CLS),super.remove()}onKnobMouseDown(){this.startHandle()}onKnobMouseUp(){this.stopHandle()}updateResizerDirections(){const t=e.Angle.normalize(this.node.getAngle()),i=Math.floor(t*(s.DIRECTIONS.length/360));if(i!==this.prevShift){const t=s.DIRECTIONS.slice(i).concat(s.DIRECTIONS.slice(0,i)),o=t=>`${this.containerClassName}-cursor-${t}`;this.container.querySelectorAll(`.${this.resizeClassName}`).forEach(((i,n)=>{e.Dom.removeClass(i,s.DIRECTIONS.map((t=>o(t))).join(" ")),e.Dom.addClass(i,o(t[n]))})),this.prevShift=i}}getTrueDirection(t){const i=e.Angle.normalize(this.node.getAngle());let o=s.POSITIONS.indexOf(t);return o+=Math.floor(i*(s.POSITIONS.length/360)),o%=s.POSITIONS.length,s.POSITIONS[o]}toValidResizeDirection(t){return{top:"top-left",bottom:"bottom-right",left:"bottom-left",right:"top-right"}[t]||t}startResizing(t){t.stopPropagation(),this.model.startBatch("resize",{cid:this.cid});const i=e.Dom.attr(t.target,"data-position");this.prepareResizing(t,i),this.startAction(t)}prepareResizing(t,i){const o=this.getTrueDirection(i);let s=0,n=0;i.split("-").forEach((t=>{s={left:-1,right:1}[t]||s,n={top:-1,bottom:1}[t]||n}));const r=this.toValidResizeDirection(i),a={"top-right":"bottomLeft","top-left":"bottomRight","bottom-left":"topRight","bottom-right":"topLeft"}[r],h=e.Angle.normalize(this.node.getAngle());this.setEventData(t,{selector:a,direction:r,trueDirection:o,relativeDirection:i,angle:h,resizeX:s,resizeY:n,action:"resizing"})}startRotating(t){t.stopPropagation(),this.model.startBatch("rotate",{cid:this.cid});const i=this.node.getBBox().getCenter(),o=this.normalizeEvent(t),s=this.graph.snapToGrid(o.clientX,o.clientY);this.setEventData(t,{center:i,action:"rotating",angle:e.Angle.normalize(this.node.getAngle()),start:e.Point.create(s).theta(i)}),this.startAction(t)}onMouseMove(t){const i=this.graph.findViewByCell(this.node);let o=this.getEventData(t);if(o.action){const s=this.normalizeEvent(t);let n=s.clientX,r=s.clientY;const a=this.graph.getPlugin("scroller"),h=this.options.restrictedResizing;if(!0===h||"number"==typeof h){const t=!0===h?0:h,i=a?Math.max(t,8):t,o=this.graph.container.getBoundingClientRect();n=e.NumberExt.clamp(n,o.left+i,o.right-i),r=e.NumberExt.clamp(r,o.top+i,o.bottom-i)}else this.options.autoScrollOnResizing&&a&&a.autoScroll(n,r);const d=this.graph.snapToGrid(n,r),l=this.graph.getGridSize(),g=this.node,p=this.options;if("resizing"===o.action){o.resized||(i&&(i.addClass("node-resizing"),this.notify("node:resize",t,i)),o.resized=!0);const s=g.getBBox(),n=e.Point.create(d).rotate(o.angle,s.getCenter()).diff(s[o.selector]);let r=o.resizeX?n.x*o.resizeX:s.width,a=o.resizeY?n.y*o.resizeY:s.height;const h=r,c=a;if(r=e.GeometryUtil.snapToGrid(r,l),a=e.GeometryUtil.snapToGrid(a,l),r=Math.max(r,p.minWidth||l),a=Math.max(a,p.minHeight||l),r=Math.min(r,p.maxWidth||1/0),a=Math.min(a,p.maxHeight||1/0),p.preserveAspectRatio){const t=s.width*a/s.height,e=s.height*r/s.width;r<t?a=e:r=t}const m=o.relativeDirection;if(p.allowReverse&&(h<=-r||c<=-a)){let e;"left"===m?h<=-r&&(e="right"):"right"===m?h<=-r&&(e="left"):"top"===m?c<=-a&&(e="bottom"):"bottom"===m?c<=-a&&(e="top"):"top-left"===m?h<=-r&&c<=-a?e="bottom-right":h<=-r?e="top-right":c<=-a&&(e="bottom-left"):"top-right"===m?h<=-r&&c<=-a?e="bottom-left":h<=-r?e="top-left":c<=-a&&(e="bottom-right"):"bottom-left"===m?h<=-r&&c<=-a?e="top-right":h<=-r?e="bottom-right":c<=-a&&(e="top-left"):"bottom-right"===m&&(h<=-r&&c<=-a?e="top-left":h<=-r?e="bottom-left":c<=-a&&(e="top-right"));const i=e;this.stopHandle();const o=this.container.querySelector(`.${this.resizeClassName}[data-position="${i}"]`);this.startHandle(o),this.prepareResizing(t,i),this.onMouseMove(t)}if(s.width!==r||s.height!==a){const e={ui:!0,direction:o.direction,relativeDirection:o.relativeDirection,trueDirection:o.trueDirection,minWidth:p.minWidth,minHeight:p.minHeight,maxWidth:p.maxWidth,maxHeight:p.maxHeight,preserveAspectRatio:!0===p.preserveAspectRatio};g.resize(r,a,e),this.notify("node:resizing",t,i)}}else if("rotating"===o.action){o.rotated||(i&&(i.addClass("node-rotating"),this.notify("node:rotate",t,i)),o.rotated=!0);const s=g.getAngle(),n=o.start-e.Point.create(d).theta(o.center);let r=o.angle+n;p.rotateGrid&&(r=e.GeometryUtil.snapToGrid(r,p.rotateGrid)),r=e.Angle.normalize(r),s!==r&&(g.rotate(r,{absolute:!0}),this.notify("node:rotating",t,i))}}}onMouseUp(t){const e=this.getEventData(t);e.action&&(this.stopAction(t),this.model.stopBatch("resizing"===e.action?"resize":"rotate",{cid:this.cid}))}startHandle(t){if(this.handle=t||null,e.Dom.addClass(this.container,`${this.containerClassName}-active`),t){e.Dom.addClass(t,`${this.containerClassName}-active-handle`);const i=t.getAttribute("data-position");if(i){const t=s.DIRECTIONS[s.POSITIONS.indexOf(i)];e.Dom.addClass(this.container,`${this.containerClassName}-cursor-${t}`)}}}stopHandle(){if(e.Dom.removeClass(this.container,`${this.containerClassName}-active`),this.handle){e.Dom.removeClass(this.handle,`${this.containerClassName}-active-handle`);const t=this.handle.getAttribute("data-position");if(t){const i=s.DIRECTIONS[s.POSITIONS.indexOf(t)];e.Dom.removeClass(this.container,`${this.containerClassName}-cursor-${i}`)}this.handle=null}}startAction(t){this.startHandle(t.target),this.graph.view.undelegateEvents(),this.delegateDocumentEvents(s.documentEvents,t.data)}stopAction(t){this.stopHandle(),this.undelegateDocumentEvents(),this.graph.view.delegateEvents();const e=this.graph.findViewByCell(this.node),i=this.getEventData(t);e&&(e.removeClass(`node-${i.action}`),"resizing"===i.action&&i.resized?this.notify("node:resized",t,e):"rotating"===i.action&&i.rotated&&this.notify("node:rotated",t,e))}notify(t,e,i,o={}){if(i){const s=i.graph,n=s.view.normalizeEvent(e),r=s.snapToGrid(n.clientX,n.clientY);this.trigger(t,Object.assign({e:n,view:i,node:i.cell,cell:i.cell,x:r.x,y:r.y},o))}}dispose(){this.stopListening(),this.remove(),this.off()}}var s;i([e.View.dispose()],o.prototype,"dispose",null),function(t){t.NODE_CLS="has-widget-transform",t.DIRECTIONS=["nw","n","ne","e","se","s","sw","w"],t.POSITIONS=["top-left","top","top-right","right","bottom-right","bottom","bottom-left","left"],t.documentEvents={mousemove:"onMouseMove",touchmove:"onMouseMove",mouseup:"onMouseUp",touchend:"onMouseUp"},t.defaultOptions={minWidth:0,minHeight:0,maxWidth:1/0,maxHeight:1/0,rotateGrid:15,rotatable:!0,preserveAspectRatio:!1,orthogonalResizing:!0,restrictedResizing:!1,autoScrollOnResizing:!0,allowReverse:!0}}(s||(s={}));e.Graph.prototype.createTransformWidget=function(t){const e=this.getPlugin("transform");return e&&e.createWidget(t),this},e.Graph.prototype.clearTransformWidgets=function(){const t=this.getPlugin("transform");return t&&t.clearWidgets(),this};class n extends e.Basecoat{constructor(t={}){super(),this.name="transform",this.widgets=new Map,this.disabled=!1,this.options=t,e.CssLoader.ensure(this.name,".x6-widget-transform {\n position: absolute;\n box-sizing: content-box !important;\n margin: -5px 0 0 -5px;\n padding: 4px;\n border: 1px dashed #000;\n border-radius: 5px;\n user-select: none;\n pointer-events: none;\n}\n.x6-widget-transform > div {\n position: absolute;\n box-sizing: border-box;\n background-color: #fff;\n border: 1px solid #000;\n transition: background-color 0.2s;\n pointer-events: auto;\n -webkit-user-drag: none;\n user-drag: none;\n /* stylelint-disable-line */\n}\n.x6-widget-transform > div:hover {\n background-color: #d3d3d3;\n}\n.x6-widget-transform-cursor-n {\n cursor: n-resize;\n}\n.x6-widget-transform-cursor-s {\n cursor: s-resize;\n}\n.x6-widget-transform-cursor-e {\n cursor: e-resize;\n}\n.x6-widget-transform-cursor-w {\n cursor: w-resize;\n}\n.x6-widget-transform-cursor-ne {\n cursor: ne-resize;\n}\n.x6-widget-transform-cursor-nw {\n cursor: nw-resize;\n}\n.x6-widget-transform-cursor-se {\n cursor: se-resize;\n}\n.x6-widget-transform-cursor-sw {\n cursor: sw-resize;\n}\n.x6-widget-transform-resize {\n width: 10px;\n height: 10px;\n border-radius: 6px;\n}\n.x6-widget-transform-resize[data-position='top-left'] {\n top: -5px;\n left: -5px;\n}\n.x6-widget-transform-resize[data-position='top-right'] {\n top: -5px;\n right: -5px;\n}\n.x6-widget-transform-resize[data-position='bottom-left'] {\n bottom: -5px;\n left: -5px;\n}\n.x6-widget-transform-resize[data-position='bottom-right'] {\n right: -5px;\n bottom: -5px;\n}\n.x6-widget-transform-resize[data-position='top'] {\n top: -5px;\n left: 50%;\n margin-left: -5px;\n}\n.x6-widget-transform-resize[data-position='bottom'] {\n bottom: -5px;\n left: 50%;\n margin-left: -5px;\n}\n.x6-widget-transform-resize[data-position='left'] {\n top: 50%;\n left: -5px;\n margin-top: -5px;\n}\n.x6-widget-transform-resize[data-position='right'] {\n top: 50%;\n right: -5px;\n margin-top: -5px;\n}\n.x6-widget-transform.prevent-aspect-ratio .x6-widget-transform-resize[data-position='top'],\n.x6-widget-transform.prevent-aspect-ratio .x6-widget-transform-resize[data-position='bottom'],\n.x6-widget-transform.prevent-aspect-ratio .x6-widget-transform-resize[data-position='left'],\n.x6-widget-transform.prevent-aspect-ratio .x6-widget-transform-resize[data-position='right'] {\n display: none;\n}\n.x6-widget-transform.no-orth-resize .x6-widget-transform-resize[data-position='bottom'],\n.x6-widget-transform.no-orth-resize .x6-widget-transform-resize[data-position='left'],\n.x6-widget-transform.no-orth-resize .x6-widget-transform-resize[data-position='right'],\n.x6-widget-transform.no-orth-resize .x6-widget-transform-resize[data-position='top'] {\n display: none;\n}\n.x6-widget-transform.no-resize .x6-widget-transform-resize {\n display: none;\n}\n.x6-widget-transform-rotate {\n top: -20px;\n left: -20px;\n width: 12px;\n height: 12px;\n border-radius: 6px;\n cursor: crosshair;\n}\n.x6-widget-transform.no-rotate .x6-widget-transform-rotate {\n display: none;\n}\n.x6-widget-transform-active {\n border-color: transparent;\n pointer-events: all;\n}\n.x6-widget-transform-active > div {\n display: none;\n}\n.x6-widget-transform-active > .x6-widget-transform-active-handle {\n display: block;\n background-color: #808080;\n}\n")}init(t){this.graph=t,this.disabled||this.startListening()}startListening(){this.graph.on("node:click",this.onNodeClick,this),this.graph.on("blank:mousedown",this.onBlankMouseDown,this)}stopListening(){this.graph.off("node:click",this.onNodeClick,this),this.graph.off("blank:mousedown",this.onBlankMouseDown,this)}enable(){this.disabled&&(this.disabled=!1,this.startListening())}disable(){this.disabled||(this.disabled=!0,this.stopListening())}isEnabled(){return!this.disabled}createWidget(t){this.clearWidgets();const e=this.createTransform(t);e&&(this.widgets.set(t,e),e.on("*",((t,e)=>{this.trigger(t,e),this.graph.trigger(t,e)})))}onNodeClick({node:t}){this.createWidget(t)}onBlankMouseDown(){this.clearWidgets()}createTransform(t){const e=this.getTransformOptions(t);return e.resizable||e.rotatable?new o(e,t,this.graph):null}getTransformOptions(t){this.options.resizing||(this.options.resizing={enabled:!1}),this.options.rotating||(this.options.rotating={enabled:!1}),"boolean"==typeof this.options.resizing&&(this.options.resizing={enabled:this.options.resizing}),"boolean"==typeof this.options.rotating&&(this.options.rotating={enabled:this.options.rotating});const e=n.parseOptionGroup(this.graph,t,this.options.resizing),i=n.parseOptionGroup(this.graph,t,this.options.rotating);return{resizable:!!e.enabled,minWidth:e.minWidth||0,maxWidth:e.maxWidth||Number.MAX_SAFE_INTEGER,minHeight:e.minHeight||0,maxHeight:e.maxHeight||Number.MAX_SAFE_INTEGER,orthogonalResizing:"boolean"!=typeof e.orthogonal||e.orthogonal,restrictedResizing:!!e.restrict,autoScrollOnResizing:"boolean"!=typeof e.autoScroll||e.autoScroll,preserveAspectRatio:!!e.preserveAspectRatio,allowReverse:"boolean"!=typeof e.allowReverse||e.allowReverse,rotatable:!!i.enabled,rotateGrid:i.grid||15}}clearWidgets(){this.widgets.forEach(((t,e)=>{this.graph.getCellById(e.id)&&t.dispose()})),this.widgets.clear()}dispose(){this.clearWidgets(),this.stopListening(),this.off(),e.CssLoader.clean(this.name)}}i([e.Basecoat.dispose()],n.prototype,"dispose",null),function(t){t.parseOptionGroup=function(t,e,i){const o={};return Object.keys(i||{}).forEach((s=>{const n=i[s];o[s]="function"==typeof n?n.call(t,e):n})),o}}(n||(n={})),t.Transform=n}));
|