joint.ui.pathEditor.min.js

/*! Rappid v3.1.1 - HTML5 Diagramming Framework - TRIAL VERSION

Copyright (c) 2015 client IO

 2020-06-11 


This Source Code Form is subject to the terms of the Rappid Trial License
, v. 2.0. If a copy of the Rappid License was not distributed with this
file, You can obtain one at http://jointjs.com/license/rappid_v2.txt
 or from the Rappid archive as was distributed by client IO. See the LICENSE file.*/


this.joint=this.joint||{},function(t,c,_){"use strict";c=c&&c.hasOwnProperty("default")?c.default:c;var e=_.mvc.View.extend({tagName:"g",svgElement:!0,className:"path-editor",events:{"mousedown .anchor-point":"onAnchorPointPointerDown","mousedown .control-point":"onControlPointPointerDown","mousedown .segment-path":"onSegmentPathPointerDown","touchstart .anchor-point":"onAnchorPointPointerDown","touchstart .control-point":"onControlPointPointerDown","touchstart .segment-path":"onSegmentPathPointerDown","dblclick .anchor-point":"onAnchorPointDoubleClick","dblclick .control-point":"onControlPointDoubleClick","dblclick .segment-path":"onSegmentPathDoubleClick"},documentEvents:{mousemove:"onPointerMove",touchmove:"onPointerMove",mouseup:"onPointerUp",touchend:"onPointerUp",touchcancel:"onPointerUp"},options:{anchorPointMarkup:'<circle r="2.5"/>',controlPointMarkup:'<circle r="2.5"/>'},init:function(){var t=this.pathNode=_.V(this.options.pathElement).normalizePath().node;this.segList=t.pathSegList,this.svgRoot=_.V(t.ownerSVGElement),this.$document=c(t.ownerDocument),this.render()},onRemove:function(){this.undelegateDocumentEvents(),this.clear()},clear:function(){this.vel.empty(),this.directionPaths=[],this.segmentPaths=[],this.controlPoints=[],this.anchorPoints=[],this._subPathIndices=[0],this.trigger("clear",this.pathNode)},_transformPoint:function(t,e,i){return _.V.transformPoint(new _.g.Point(t,e),i)},_getPathCTM:function(){return this.pathNode.getCTM()},render:function(){this.clear();var t,e,i,n=this.vel,o=this._getPathCTM(),a=_.V(this.options.anchorPointMarkup).addClass("anchor-point"),r=_.V(this.options.controlPointMarkup).addClass("control-point"),s=_.V('<path class="direction-path"/>'),h=_.V('<path class="segment-path"/>'),c=this.segList,g=this.anchorPoints,P=this.controlPoints,p=this.directionPaths,l=this.segmentPaths,d=this._subPathIndices;for(i=e=t=0;t<c.numberOfItems;t++){var u=c.getItem(t),S=this._transformPoint(u.x,u.y,o),v=S.x,m=S.y;if(u.pathSegType!=SVGPathSeg.PATHSEG_CLOSEPATH&&(g[t]=a.clone().attr({index:t,cx:v,cy:m})),u.pathSegType!=SVGPathSeg.PATHSEG_MOVETO_ABS){var x=h.clone().attr("index",t).node;switch(x.pathSegList.initialize(x.createSVGPathSegMovetoAbs(e,i)),u.pathSegType){case SVGPathSeg.PATHSEG_CLOSEPATH:var y=c.getItem(d[0]),f=this._transformPoint(y.x,y.y,o);v=f.x,m=f.y,x.pathSegList.appendItem(x.createSVGPathSegLinetoAbs(v,m)),d.unshift(t+1);break;case SVGPathSeg.PATHSEG_LINETO_ABS:x.pathSegList.appendItem(x.createSVGPathSegLinetoAbs(v,m));break;case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS:var C=this._transformPoint(u.x1,u.y1,o),E=r.clone().attr({index:t,"attribute-index":1,cx:C.x,cy:C.y}),I=this._transformPoint(u.x2,u.y2,o),T=r.clone().attr({index:t,"attribute-index":2,cx:I.x,cy:I.y});P[t]=[E,T],x.pathSegList.appendItem(x.createSVGPathSegCurvetoCubicAbs(v,m,C.x,C.y,I.x,I.y)),p[t]=[s.clone().attr("d",["M",e,i,"L",C.x,C.y].join(" ")),s.clone().attr("d",["M",v,m,"L",I.x,I.y].join(" "))]}l[t]=x}e=v,i=m}var A=[];l.forEach(function(t){t&&A.push(t)}),p.forEach(function(t){t&&Array.prototype.push.apply(A,t)}),g.forEach(function(t){t&&A.push(t)}),P.forEach(function(t){t&&Array.prototype.push.apply(A,t)}),n.append(A),this.svgRoot.append(n)},startMoving:function(t){var e=_.util.normalizeEvent(t),i=this.$point=c(e.target);this.prevClientX=e.clientX,this.prevClientY=e.clientY;var n=parseInt(this.$point.attr("index"),10);if(this.trigger("path:interact"),i.hasClass("anchor-point"))this.trigger("path:anchor-point:select",n);else if(i.hasClass("control-point")){var o=parseInt(this.$point.attr("attribute-index"),10);this.trigger("path:control-point:select",n,o)}else this.trigger("path:segment:select",n);e.stopPropagation(),e.preventDefault(),this.index=void 0,this.controlPointIndex=void 0,this.segPoint=void 0,this.pathEditedEventType=void 0},move:function(t){var e=this.$point;if(e){var i=_.util.normalizeEvent(t),n=i.clientX-this.prevClientX,o=i.clientY-this.prevClientY,a=parseInt(e.attr("index"),10);if(e.hasClass("anchor-point"))this.adjustAnchorPoint(a,n,o,i);else if(e.hasClass("control-point")){var r=parseInt(e.attr("attribute-index"),10);this.adjustControlPoint(a,r,n,o,i)}else this.adjustSegment(a,n,o,i);this.prevClientX=i.clientX,this.prevClientY=i.clientY}},adjustSegment:function(t,e,i,n,o){void 0===o&&(o={});var a=o.dry;void 0===a&&(a=void 0),this.adjustAnchorPoint(t-1,e,i,{dry:!0}),this.adjustAnchorPoint(t,e,i,{dry:!0}),a||(this.pathEditedEventType="path:segment:adjust",this.index=t,this.trigger("path:editing",this.pathNode,n),this.trigger("path:segment:adjusting",this.pathNode,n,{index:t}))},adjustControlPoint:function(t,e,i,n,o,a){void 0===a&&(a={});var r=a.dry;void 0===r&&(r=void 0);var s=this._getPathCTM(),h=this.segList,c=h.getItem(t),g=this.controlPoints,P=s.inverse();P.e=0,P.f=0;var p=this._transformPoint(i,n,P),l="x"+e,d="y"+e;c[l]+=p.x,c[d]+=p.y;var u=this._transformPoint(c[l],c[d],s),S=new _.g.Point(u);if(g[t][e-1].attr({cx:u.x,cy:u.y}).hasClass("locked")){var v=this.getBoundIndex(t,e),m=1===e?2:1,x=h.getItem(v),y="x"+m,f="y"+m,C=new _.g.Point(1===e?x.x:c.x,1===e?x.y:c.y),E=new _.g.Point(c[l],c[d]),I=C.distance(new _.g.Point(x[y],x[f])),T=C.move(E,I);x[y]=T.x,x[f]=T.y;var A=this._transformPoint(x[y],x[f],s);g[v][m-1].attr({cx:A.x,cy:A.y}),this.updateDirectionPaths(v),this.updateSegmentPath(v)}this.updateDirectionPaths(t),this.updateSegmentPath(t),r||(this.pathEditedEventType="path:control-point:adjust",this.index=t,this.controlPointIndex=e,this.segPoint=S,this.trigger("path:editing",this.pathNode,o),this.trigger("path:control-point:adjusting",this.pathNode,o,{index:t,controlPointIndex:e,segPoint:S}))},findSubpathIndex:function(t){for(var e=this._subPathIndices,i=0,n=e.length;i<n;i++)if(e[i]<t)return e[i]},findReversedSubpathIndex:function(t){for(var e=this._subPathIndices,i=e.length-1;0<=i;i--)if(e[i]>t)return e[i]},adjustAnchorPoint:function(t,e,i,n,o){void 0===o&&(o={});var a=o.dry;void 0===a&&(a=void 0);var r=this._getPathCTM(),s=this.segList,h=s.getItem(t);h.pathSegType==SVGPathSeg.PATHSEG_CLOSEPATH&&(t=this.findSubpathIndex(t),h=s.getItem(t));var c=this.anchorPoints,g=this.controlPoints,P=c.length-1;if((0===t||t===P)&&g[1]&&g[P]){var p=g[1][0],l=g[P][1];p&&p.hasClass("locked")&&p.removeClass("locked"),l&&l.hasClass("locked")&&l.removeClass("locked")}var d=r.inverse();d.e=0,d.f=0;var u=this._transformPoint(e,i,d);h.x+=u.x,h.y+=u.y;var S=this._transformPoint(h.x,h.y,r),v=new _.g.Point(S);if(c[t].attr({cx:S.x,cy:S.y}),h.pathSegType==SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS){h.x2+=u.x,h.y2+=u.y;var m=this._transformPoint(h.x2,h.y2,r);g[t][1].attr({cx:m.x,cy:m.y})}var x=t+1<s.numberOfItems?s.getItem(t+1):0;if(x){if(x.pathSegType==SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS){x.x1+=u.x,x.y1+=u.y;var y=this._transformPoint(x.x1,x.y1,r);g[t+1][0].attr({cx:y.x,cy:y.y}),this.updateDirectionPaths(t+1)}this.updateSegmentPath(t+1)}this.updateDirectionPaths(t),this.updateSegmentPath(t),a||(this.pathEditedEventType="path:anchor-point:adjust",this.index=t,this.segPoint=v,this.trigger("path:editing",this.pathNode,n),this.trigger("path:anchor-point:adjusting",this.pathNode,n,{index:t,segPoint:v}))},updateDirectionPaths:function(t){var n=this._getPathCTM(),e=this.segList,o=e.getItem(t),a=this._transformPoint(o.x,o.y,n),r=0<t?e.getItem(t-1):null,s=r?this._transformPoint(r.x,r.y,n):null,i=this.directionPaths[t];Array.isArray(i)&&i.forEach(function(t,e){e++;var i=this._transformPoint(o["x"+e],o["y"+e],n);t.attr("d",["M",1<e||!r?a.x:s.x,1<e||!r?a.y:s.y,i.x,i.y].join(" "))},this)},updateSegmentPath:function(t){var e=this.segList;if(this._subPathIndices.includes(t)){var i=this.findReversedSubpathIndex(t)||e.numberOfItems;if(i--,e.getItem(i).pathSegType!=SVGPathSeg.PATHSEG_CLOSEPATH)return;t=i}var n=this.segmentPaths[t];if(n){var o=this._getPathCTM(),a=e.getItem(t-1),r=this._transformPoint(a.x,a.y,o),s=n.createSVGPathSegMovetoAbs(r.x,r.y);n.pathSegList.initialize(s);var h=e.getItem(t),c=this._transformPoint(h.x,h.y,o);switch(h.pathSegType){case SVGPathSeg.PATHSEG_CLOSEPATH:var g=e.getItem(this.findSubpathIndex(t)),P=this._transformPoint(g.x,g.y,o);s=n.createSVGPathSegLinetoAbs(P.x,P.y);break;case SVGPathSeg.PATHSEG_LINETO_ABS:s=n.createSVGPathSegLinetoAbs(c.x,c.y);break;case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS:var p=this._transformPoint(h.x1,h.y1,o),l=this._transformPoint(h.x2,h.y2,o);s=n.createSVGPathSegCurvetoCubicAbs(c.x,c.y,p.x,p.y,l.x,l.y)}n.pathSegList.appendItem(s)}},stopMoving:function(t){var e=_.util.normalizeEvent(t);if(this.$point=void 0,this.pathEditedEventType){var i=this.pathNode,n=this.index,o=this.controlPointIndex,a=this.segPoint;this.trigger("path:edit",i,e),this.trigger(this.pathEditedEventType,i,e,{index:n,controlPointIndex:o,segPoint:a})}this.index=void 0,this.controlPointIndex=void 0,this.segPoint=void 0,this.pathEditedEventType=void 0},createAnchorPoint:function(t){var e=_.util.normalizeEvent(t),i=_.V(e.target).attr("index"),n=this.pathNode,o=this.segList,a=_.V(n).toLocalPoint(e.pageX,e.pageY),r=o.getItem(i),s=o.getItem(i-1);switch(r.pathSegType){case SVGPathSeg.PATHSEG_CLOSEPATH:var h=o.getItem(0),c=new _.g.Point(s.x,s.y),g=new _.g.Point(h.x,h.y),P=new _.g.Line(c,g).closestPoint(a);o.insertItemBefore(n.createSVGPathSegLinetoAbs(P.x,P.y),i);break;case SVGPathSeg.PATHSEG_LINETO_ABS:var p=new _.g.Point(s.x,s.y),l=new _.g.Point(r.x,r.y),d=new _.g.Line(p,l).closestPoint(a);o.insertItemBefore(n.createSVGPathSegLinetoAbs(d.x,d.y),i);break;case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS:var u=new _.g.Point(s.x,s.y),S=new _.g.Point(r.x1,r.y1),v=new _.g.Point(r.x2,r.y2),m=new _.g.Point(r.x,r.y),x=new _.g.Curve(u,S,v,m),y=x.closestPointT(a),f=x.divideAtT(y);o.insertItemBefore(n.createSVGPathSegCurvetoCubicAbs(f[0].end.x,f[0].end.y,f[0].controlPoint1.x,f[0].controlPoint1.y,f[0].controlPoint2.x,f[0].controlPoint2.y),i),r.x1=f[1].controlPoint1.x,r.y1=f[1].controlPoint1.y,r.x2=f[1].controlPoint2.x,r.y2=f[1].controlPoint2.y}this.render(),this.trigger("path:edit",n,e),this.trigger("path:anchor-point:create",n,e)},removeAnchorPoint:function(t){var e,i,n=_.util.normalizeEvent(t),o=parseInt(c(n.target).attr("index"),10),a=this.pathNode,r=this.segList,s=r.getItem(o);switch(s.pathSegType){case SVGPathSeg.PATHSEG_MOVETO_ABS:e=r.getItem(o+1),i=a.createSVGPathSegMovetoAbs(e.x,e.y),r.replaceItem(i,o+1),r.removeItem(o);break;case SVGPathSeg.PATHSEG_LINETO_ABS:r.removeItem(o);break;case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS:o+1<=r.numberOfItems-1&&(e=r.getItem(o+1)).pathSegType==SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS&&(e.x1=s.x1,e.y1=s.y1),r.removeItem(o)}this.render(),this.trigger("path:edit",a,n),this.trigger("path:anchor-point:remove",a,n);var h=r.numberOfItems;r.getItem(r.numberOfItems-1).pathSegType==SVGPathSeg.PATHSEG_CLOSEPATH&&(h-=1),h<2&&this.trigger("path:invalid",a,n)},lockControlPoint:function(t){var e=_.util.normalizeEvent(t),i=c(e.target),n=parseInt(i.attr("index")),o=parseInt(i.attr("attribute-index"),10),a=this.getBoundIndex(n,o),r=1===o?2:1,s=this.controlPoints[a];if(s){var h=i.hasClass("locked");i.toggleClass("locked"),s[r-1].toggleClass("locked"),this.trigger("path:interact"),h?this.trigger("path:control-point:unlock",n,o):(this.trigger("path:control-point:lock",n,o),this.adjustControlPoint(n,o,0,0,{dry:!0}))}},getBoundIndex:function(t,e){var i,n,o,a,r,s=this.segList,h=this.anchorPoints,c=h.length-1;return 1===e?0===(i=t-1)&&(n=s.numberOfItems-1,o=s.getItem(n).pathSegType==SVGPathSeg.PATHSEG_CLOSEPATH,a=h[0].attr("cx")===h[c].attr("cx"),r=h[0].attr("cy")===h[c].attr("cy"),o&&a&&r&&(i=c)):(i=t+1)===1+c&&(n=s.numberOfItems-1,o=s.getItem(n).pathSegType==SVGPathSeg.PATHSEG_CLOSEPATH,a=h[0].attr("cx")===h[c].attr("cx"),r=h[0].attr("cy")===h[c].attr("cy"),o&&a&&r&&(i=1)),i},getControlPointLockedStates:function(){for(var t=this.controlPoints,e=[],i=0;i<t.length;i++)if(t[i]){e[i]=[];for(var n=0;n<=1;n++)if(t[i][n]){var o=n+1;t[i][n].hasClass("locked")?e[i][o]=!0:e[i][o]=!1}}return e},setControlPointLockedStates:function(t){for(var e=this.controlPoints,i=0;i<e.length;i++)if(t[i]&&e[i])for(var n=1;n<=2;n++)t[i][n]&&e[i][n-1]&&(!0===t[i][n]?e[i][n-1].addClass("locked"):e[i][n-1].removeClass("locked"))},convertSegmentPath:function(t){var e=_.util.normalizeEvent(t),i=_.V(e.target).attr("index"),n=this.pathNode,o=this.segList,a=o.getItem(i);switch(a.pathSegType){case SVGPathSeg.PATHSEG_CLOSEPATH:var r=o.getItem(i-1),s=o.getItem(0);o.insertItemBefore(n.createSVGPathSegCurvetoCubicAbs(s.x,s.y,r.x,r.y,s.x,s.y),i);break;case SVGPathSeg.PATHSEG_LINETO_ABS:var h=o.getItem(i-1);o.replaceItem(n.createSVGPathSegCurvetoCubicAbs(a.x,a.y,h.x,h.y,a.x,a.y),i);break;case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS:o.replaceItem(n.createSVGPathSegLinetoAbs(a.x,a.y),i)}this.render(),this.trigger("path:edit",n,e),this.trigger("path:segment:convert",n,e)},addClosePathSegment:function(t){var e=_.util.normalizeEvent(t),i=parseInt(c(e.target).attr("index"),10),n=this.segList;if((0===i||i===n.numberOfItems-1)&&n.getItem(n.numberOfItems-1).pathSegType!=SVGPathSeg.PATHSEG_CLOSEPATH){var o=this.pathNode;n.appendItem(o.createSVGPathSegClosePath()),this.render(),this.trigger("path:edit",o,e),this.trigger("path:closepath-segment:add",o,e)}},removeClosePathSegment:function(t){var e=_.util.normalizeEvent(t),i=_.V(e.target).attr("index"),n=this.segList;if(n.getItem(i).pathSegType==SVGPathSeg.PATHSEG_CLOSEPATH){var o=this.pathNode;n.removeItem(i),this.render(),this.trigger("path:edit",o,e),this.trigger("path:closepath-segment:remove",o,e)}},isMoreThanFirstClick:function(){return this.clickCounter=this.clickCounter||0,this.clickCounter+=1,this.timeout&&clearTimeout(this.timeout),this.timeout=setTimeout(function(){this.clickCounter=0},400),2<=this.clickCounter&&(this.clickCounter=0,clearTimeout(this.timeout),!0)},onAnchorPointPointerDown:function(t){var e=_.util.normalizeEvent(t);e.stopPropagation(),1===e.which&&(this.isMoreThanFirstClick()||(this.startMoving(e),this.delegateDocumentEvents()))},onControlPointPointerDown:function(t){var e=_.util.normalizeEvent(t);e.stopPropagation(),1===e.which&&(this.isMoreThanFirstClick()||(this.startMoving(e),this.delegateDocumentEvents()))},onSegmentPathPointerDown:function(t){var e=_.util.normalizeEvent(t);e.stopPropagation(),1===e.which&&(this.isMoreThanFirstClick()||(this.startMoving(e),this.delegateDocumentEvents()))},onPointerMove:function(t){var e=_.util.normalizeEvent(t);e.stopPropagation(),this.move(e)},onPointerUp:function(t){this.undelegateDocumentEvents();var e=_.util.normalizeEvent(t);e.stopPropagation(),this.stopMoving(e)},onAnchorPointDoubleClick:function(t){var e=_.util.normalizeEvent(t);e.stopPropagation(),e.preventDefault(),1===e.which&&this.removeAnchorPoint(e)},onControlPointDoubleClick:function(t){var e=_.util.normalizeEvent(t);e.stopPropagation(),e.preventDefault(),1===e.which&&this.lockControlPoint(e)},onSegmentPathDoubleClick:function(t){var e=_.util.normalizeEvent(t);e.stopPropagation(),e.preventDefault(),1===e.which&&this.createAnchorPoint(e)}});t.PathEditor=e}(this.joint.ui=this.joint.ui||{},$,joint);