joint.ui.pathDrawer.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,e,p){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var i=p.mvc.View.extend({tagName:"g",svgElement:!0,className:"path-drawer",events:{"mousedown .start-point":"onStartPointPointerDown",mousedown:"onPointerDown","touchstart .start-point":"onStartPointPointerDown",touchstart:"onPointerDown",dblclick:"onDoubleClick",contextmenu:"onContextMenu"},documentEvents:{mousemove:"onPointerMove",touchmove:"onPointerMove",mouseup:"onPointerUp",touchend:"onPointerUp",touchcancel:"onPointerUp"},options:{pathAttributes:{class:null,fill:"#ffffff",stroke:"#000000","stroke-width":1,"pointer-events":"none"},startPointMarkup:'<circle r="5"/>',snapRadius:0},init:function(){var t=this.svgTarget=p.V(this.options.target);this.$document=e(t.node.ownerDocument),this.action="awaiting-input",this.render()},onRemove:function(){var t=this.pathNode;t&&p.V(t).remove(),this.clear()},clear:function(){var t=this.pathNode;t&&t.pathSegList.numberOfItems<=1&&p.V(t).remove(),this.svgStart.remove(),this.svgControl.remove(),this.pathNode=null,this.undelegateDocumentEvents(),this.action="awaiting-input",this.trigger("clear")},render:function(){var t=this.options;return this.svgPathTemplate=p.V("path").attr(t.pathAttributes),this.svgStart=p.V(t.startPointMarkup).addClass("start-point"),this.svgControl=p.V("path").addClass("control-path"),this.vel.append(p.V("rect",{x:0,y:0,width:"100%",height:"100%",fill:"transparent",stroke:"none"})),this.svgTarget.append(this.el),this},createPath:function(t,e){var i=this.svgPathTemplate.clone(),a=this.pathNode=i.node,n=this.svgStart.translate(t,e,{absolute:!0});this.trigger("path:create",a),this.addMoveSegment(t,e),this.vel.before(i),this.vel.append(n)},closePath:function(){var t=this.pathNode,e=t.pathSegList.getItem(0),i=t.pathSegList.getItem(t.pathSegList.numberOfItems-1);i.pathSegType==SVGPathSeg.PATHSEG_LINETO_ABS?t.pathSegList.replaceItem(t.createSVGPathSegClosePath(),t.pathSegList.numberOfItems-1):(i.x=e.x,i.y=e.y,t.pathSegList.appendItem(t.createSVGPathSegClosePath())),this.finishPath("path:close")},finishPath:function(t){var e=this.pathNode;e&&0<this.numberOfVisibleSegments()?(this.trigger("path:finish",e),this.trigger(t,e)):this.trigger("path:abort",e),this.clear()},numberOfVisibleSegments:function(){var t=this.pathNode,e=t.pathSegList.numberOfItems;return e-=1,t.pathSegList.getItem(t.pathSegList.numberOfItems-1).pathSegType==SVGPathSeg.PATHSEG_CLOSEPATH&&(e-=1),e},addMoveSegment:function(t,e){var i=this.pathNode,a=i.createSVGPathSegMovetoAbs(t,e);i.pathSegList.appendItem(a),this.trigger("path:segment:add",i),this.trigger("path:move-segment:add",i)},addLineSegment:function(t,e){var i=this.pathNode,a=i.createSVGPathSegLinetoAbs(t,e);i.pathSegList.appendItem(a),this.trigger("path:segment:add",i),this.trigger("path:line-segment:add",i)},addCurveSegment:function(t,e,i,a,n,s){var o=this.pathNode,r=o.createSVGPathSegCurvetoCubicAbs(t,e,i,a,n||t,s||e);o.pathSegList.appendItem(r),this.trigger("path:segment:add",o),this.trigger("path:curve-segment:add",o)},adjustLastSegment:function(t,e,i,a,n,s){var o=this.pathNode,r=this.options.snapRadius;if(r){var h=this.snapLastSegmentCoordinates(t,e,r);t=h.x,e=h.y}var g=o.pathSegList.getItem(o.pathSegList.numberOfItems-1);null!==t&&(g.x=t),null!==e&&(g.y=e),null!==i&&(g.x1=i),null!==a&&(g.y1=a),null!==n&&(g.x2=n),null!==s&&(g.y2=s),this.trigger("path:edit",o),this.trigger("path:last-segment:adjust",o)},snapLastSegmentCoordinates:function(t,e,i){for(var a=this.pathNode,n=!1,s=!1,o=t,r=e,h=a.pathSegList.numberOfItems-2;0<=h&&(!n||!s);h--){var g=a.pathSegList.getItem(h),c=g.x,l=g.y;!n&&Math.abs(c-t)<i&&(o=c,n=!0),!s&&Math.abs(l-e)<i&&(r=l,s=!0)}return new p.g.Point(o,r)},removeLastSegment:function(){var t=this.pathNode;t.pathSegList.removeItem(t.pathSegList.numberOfItems-1),this.trigger("path:edit",t),this.trigger("path:last-segment:remove",t)},findControlPoint:function(t,e){var i=this.pathNode,a=i.pathSegList.getItem(i.pathSegList.numberOfItems-1);return p.g.point(t,e).reflection(a)},replaceLastSegmentWithCurve:function(){var t=this.pathNode,e=t.pathSegList.getItem(t.pathSegList.numberOfItems-1),i=t.pathSegList.getItem(t.pathSegList.numberOfItems-2),a=t.createSVGPathSegCurvetoCubicAbs(e.x,e.y,i.x,i.y,e.x,e.y);t.pathSegList.replaceItem(a,t.pathSegList.numberOfItems-1),this.trigger("path:edit",t),this.trigger("path:last-segment:replace-with-curve",t)},adjustControlPath:function(t,e,i,a){var n=this.pathNode,s=this.svgControl.node;s.pathSegList.initialize(s.createSVGPathSegMovetoAbs(t,e)),s.pathSegList.appendItem(s.createSVGPathSegLinetoAbs(i,a)),this.vel.append(s),this.trigger("path:interact",n),this.trigger("path:control:adjust",n)},removeControlPath:function(){var t=this.pathNode,e=this.svgControl.node;e.pathSegList.clear(),this.vel.append(e),this.trigger("path:interact",t),this.trigger("path:control:remove",t)},onPointerDown:function(t){var e=p.util.normalizeEvent(t);if(e.stopPropagation(),!(1<e.which)&&!(1<e.originalEvent.detail)&&this.el.parentNode){var i=this.vel.toLocalPoint(e.clientX,e.clientY);switch(this.action){case"awaiting-input":this.createPath(i.x,i.y),this.action="path-created",this.delegateDocumentEvents();break;case"adjusting-line-end":this.action="awaiting-line-end";break;case"adjusting-curve-end":this.action="awaiting-curve-control-2"}this._timeStamp=e.timeStamp}},MOVEMENT_DETECTION_THRESHOLD:150,onPointerMove:function(t){var e=p.util.normalizeEvent(t);if(e.stopPropagation(),"awaiting-input"!=this.action){var i,a,n=this.vel.toLocalPoint(e.clientX,e.clientY),s=this._timeStamp;if(s)if(s&&e.timeStamp-s<this.MOVEMENT_DETECTION_THRESHOLD)switch(this.action){case"path-created":i=this.svgStart.translate(),this.adjustControlPath(i.tx,i.ty,n.x,n.y);break;case"awaiting-line-end":case"adjusting-curve-control-1":this.adjustLastSegment(n.x,n.y);break;case"awaiting-curve-control-2":this.adjustLastSegment(n.x,n.y,null,null,n.x,n.y)}else switch(this.action){case"path-created":this.action="adjusting-curve-control-1";break;case"awaiting-line-end":this.replaceLastSegmentWithCurve(),this.action="adjusting-curve-control-2";break;case"awaiting-curve-control-2":this.action="adjusting-curve-control-2";break;case"adjusting-curve-control-1":i=this.svgStart.translate(),this.adjustControlPath(i.tx,i.ty,n.x,n.y);break;case"adjusting-curve-control-2":a=this.findControlPoint(n.x,n.y),this.adjustLastSegment(null,null,null,null,a.x,a.y),this.adjustControlPath(a.x,a.y,n.x,n.y)}else switch(this.action){case"adjusting-line-end":this.adjustLastSegment(n.x,n.y);break;case"adjusting-curve-end":this.adjustLastSegment(n.x,n.y,null,null,n.x,n.y)}}},onPointerUp:function(t){this._timeStamp=null;var e=p.util.normalizeEvent(t);if(e.stopPropagation(),!(1<e.which||1<e.originalEvent.detail)){var i=this.vel.toLocalPoint(e.clientX,e.clientY);switch(this.action){case"path-created":case"awaiting-line-end":this.addLineSegment(i.x,i.y),this.action="adjusting-line-end";break;case"awaiting-curve-control-2":this.removeControlPath(),this.addLineSegment(i.x,i.y),this.action="adjusting-line-end";break;case"adjusting-curve-control-1":case"adjusting-curve-control-2":this.addCurveSegment(i.x,i.y,i.x,i.y),this.action="adjusting-curve-end"}}},onStartPointPointerDown:function(t){var e=p.util.normalizeEvent(t);e.stopPropagation(),1<e.which||1<e.originalEvent.detail||this.closePath()},onDoubleClick:function(t){var e=p.util.normalizeEvent(t);e.preventDefault(),e.stopPropagation(),1<e.which||this.pathNode&&0<this.numberOfVisibleSegments()&&(this.removeLastSegment(),this.finishPath("path:stop"))},onContextMenu:function(t){var e=p.util.normalizeEvent(t);e.preventDefault(),e.stopPropagation(),1<e.originalEvent.detail||this.pathNode&&0<this.numberOfVisibleSegments()&&(this.removeLastSegment(),this.finishPath("path:stop"))}});t.PathDrawer=i}(this.joint.ui=this.joint.ui||{},$,joint);