diff --git a/CITATION.cff b/CITATION.cff new file mode 100644 index 0000000..55ed7d3 --- /dev/null +++ b/CITATION.cff @@ -0,0 +1,49 @@ +cff-version: 1.2.0 +message: "If you use this software, please cite it as below." +authors: +- family-names: "Dogrusoz" + given-names: "Ugur" + orcid: "https://orcid.org/0000-0002-7153-0784" +- family-names: "Karacelik" + given-names: "Alper" + orcid: "https://orcid.org/0000-0000-0000-0000" +- family-names: "Safarli" + given-names: "Ilkin" +- family-names: "Balci" + given-names: "Hasan" + orcid: "https://orcid.org/0000-0001-8319-7758" +- family-names: "Dervishi" + given-names: "Leonard" +- family-names: "Siper" + given-names: "Metin Can" +title: "cytoscape-node-editing" +version: 4.1.0 +date-released: 2021-06-16 +url: "https://github.com/iVis-at-Bilkent/cytoscape.js-node-editing" +preferred-citation: + type: article + authors: + - family-names: "Dogrusoz" + given-names: "Ugur" + orcid: "https://orcid.org/0000-0002-7153-0784" + - family-names: "Karacelik" + given-names: "Alper" + orcid: "https://orcid.org/0000-0000-0000-0000" + - family-names: "Safarli" + given-names: "Ilkin" + - family-names: "Balci" + given-names: "Hasan" + orcid: "https://orcid.org/0000-0001-8319-7758" + - family-names: "Dervishi" + given-names: "Leonard" + - family-names: "Siper" + given-names: "Metin Can" + doi: "10.1371/journal.pone.0197238" + journal: "PLOS ONE" + month: 5 + start: 1 # First page number + end: 18 # Last page number + title: "Efficient methods and readily customizable libraries for managing complexity of large networks" + issue: 5 + volume: 13 + year: 2018 diff --git a/README.md b/README.md index a485c0f..abba7ed 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ U. Dogrusoz , A. Karacelik, I. Safarli, H. Balci, L. Dervishi, and M.C. Siper, " ## Demo -Click [here](https://raw.githack.com/iVis-at-Bilkent/cytoscape.js-node-editing/unstable/demo.html) (simple) or [here](https://raw.githack.com/iVis-at-Bilkent/cytoscape.js-node-editing/unstable/undoable_demo.html) (undoable) for demos +Click [here](https://ivis-at-bilkent.github.io/cytoscape.js-node-editing/demo.html) (simple) or [here](https://ivis-at-bilkent.github.io/cytoscape.js-node-editing/undoable_demo.html) (undoable) for demos ## Default Options @@ -91,7 +91,17 @@ Click [here](https://raw.githack.com/iVis-at-Bilkent/cytoscape.js-node-editing/u s: "s-resize", sw: "sw-resize", w: "w-resize" - } + }, + grappleLocations: [ // the locations to show the grapples. Remove "topcenter" for example to avoid overlap with cytoscape.js-node-editing + "topleft", + "topcenter", + "topright", + "centerright", + "bottomright", + "bottomcenter", + "bottomleft", + "centerleft", + ], // enable resize content cue according to the node resizeToContentCueEnabled: function (node) { @@ -186,7 +196,7 @@ This project is set up to automatically be published to npm and bower. To publi 1. Bump the version number and tag: `npm version major|minor|patch` 1. Push to origin: `git push && git push --tags` 1. Publish to npm: `npm publish .` -1. If publishing to bower for the first time, you'll need to run `bower register cytoscape-edge-editing https://github.com/iVis-at-Bilkent/cytoscape.js-edge-editing.git` +1. If publishing to bower for the first time, you'll need to run `bower register cytoscape-node-editing https://github.com/iVis-at-Bilkent/cytoscape.js-node-editing.git` ## Team diff --git a/cytoscape-node-editing.js b/cytoscape-node-editing.js index 9d7617c..30a5c99 100644 --- a/cytoscape-node-editing.js +++ b/cytoscape-node-editing.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.cytoscapeNodeEditing=t():e.cytoscapeNodeEditing=t()}(self,(function(){return(()=>{"use strict";var e={265:(e,t,i)=>{var n,o,s,a,r,d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};o=Math.max,s=Date.now||function(){return(new Date).getTime()},a=function(e,t,i){var n,a,r,h,u,p,c,g,f,l=0,m=!1,v=!0;if("function"!=typeof e)throw new TypeError("Expected a function");if(t=t<0?0:+t||0,!0===i){var y=!0;v=!1}else f=void 0===(g=i)?"undefined":d(g),!g||"object"!=f&&"function"!=f||(y=!!i.leading,m="maxWait"in i&&o(+i.maxWait||0,t),v="trailing"in i?!!i.trailing:v);function C(t,i){i&&clearTimeout(i),a=p=c=void 0,t&&(l=s(),r=e.apply(u,n),p||a||(n=u=void 0))}function x(){var e=t-(s()-h);e<=0||e>t?C(c,a):p=setTimeout(x,e)}function b(){C(v,p)}function M(){if(n=arguments,h=s(),u=this,c=v&&(p||!y),!1===m)var i=y&&!p;else{a||y||(l=h);var o=m-(h-l),d=o<=0||o>m;d?(a&&(a=clearTimeout(a)),l=h,r=e.apply(u,n)):a||(a=setTimeout(b,o))}return d&&p?p=clearTimeout(p):p||t===m||(p=setTimeout(x,t)),i&&(d=!0,r=e.apply(u,n)),!d||p||a||(n=u=void 0),r}return M.cancel=function(){p&&clearTimeout(p),a&&clearTimeout(a),l=0,a=p=c=void 0},M},r=function(e,t,i){if(e&&t&&i){var n=0;e("core","nodeEditing",(function(e){var s,r=this;if("get"===e)return o(r,"api");var d,h,u=1.1,p=t.extend(!0,{padding:5,undoable:!0,grappleSize:8,grappleColor:"green",inactiveGrappleStroke:"inside 1px blue",boundingRectangleLineDash:[4,8],boundingRectangleLineColor:"red",boundingRectangleLineWidth:1.5,zIndex:999,moveSelectedNodesOnKeyEvents:function(){return!0},minWidth:function(e){return e.data("resizeMinWidth")||15},minHeight:function(e){return e.data("resizeMinHeight")||15},getCompoundMinWidth:function(e){return e.css("min-width")},getCompoundMinHeight:function(e){return e.css("min-height")},getCompoundMinWidthBiasRight:function(e){return e.css("min-width-bias-right")},getCompoundMinWidthBiasLeft:function(e){return e.css("min-width-bias-left")},getCompoundMinHeightBiasTop:function(e){return e.css("min-height-bias-top")},getCompoundMinHeightBiasBottom:function(e){return e.css("min-height-bias-bottom")},setWidth:function(e,t){e.css("width",t)},setHeight:function(e,t){e.css("height",t)},setCompoundMinWidth:function(e,t){e.css("min-width",t)},setCompoundMinHeight:function(e,t){e.css("min-height",t)},setCompoundMinWidthBiasLeft:function(e,t){e.css("min-width-bias-left",t)},setCompoundMinWidthBiasRight:function(e,t){e.css("min-width-bias-right",t)},setCompoundMinHeightBiasTop:function(e,t){e.css("min-height-bias-top",t)},setCompoundMinHeightBiasBottom:function(e,t){e.css("min-height-bias-bottom",t)},isFixedAspectRatioResizeMode:function(e){return e.is(".fixedAspectRatioResizeMode")},isNoResizeMode:function(e){return e.is(".noResizeMode, :parent")},isNoControlsMode:function(e){return e.is(".noControlsMode")},cursors:{default:"default",inactive:"not-allowed",nw:"nw-resize",n:"n-resize",ne:"ne-resize",e:"e-resize",se:"se-resize",s:"s-resize",sw:"sw-resize",w:"w-resize"},resizeToContentCueEnabled:function(e){return!0},resizeToContentFunction:void 0,resizeToContentCuePosition:"bottom-right",resizeToContentCueImage:"/node_modules/cytoscape-node-editing/resizeCue.svg",enableMovementWithArrowKeys:!0,autoRemoveResizeToContentCue:!1},e),c=t(r.container()),g="cy-node-edge-editing-stage"+n;n++;var f,l,m=t('
');c.find("#"+g).length<1&&c.append(m),(f=i.stages.length=0)&&(o=!1),this.grapples.push(new x(e,this,n,o))}!p.resizeToContentCueEnabled(e)||p.isNoResizeMode(e)||p.autoRemoveResizeToContentCue&&(!p.autoRemoveResizeToContentCue||B(e))||(this.resizeCue=new b(e,this)),l.draw()};y.prototype.update=function(){this.boundingRectangle.update();for(var e=0;e=0||p.isNoResizeMode(d))){if(o){var a=n(d)/i(d),r=(Math.min(l,f),"topright"==m||"bottomleft"==m);l>f?f=l*a*(r?-1:1):l=f/a*(r?-1:1)}var h=d.position(),u=h.x,c=h.y,g=!1,v=!1,y=0,C=0,x=0,b=0;if(d.isParent()){var M=i(d)-s.w,z=n(d)-s.h;M>0&&(C=M-(y=M*parseFloat(p.getCompoundMinWidthBiasLeft(d))/(parseFloat(p.getCompoundMinWidthBiasLeft(d))+parseFloat(p.getCompoundMinWidthBiasRight(d))))),z>0&&(b=z-(x=z*parseFloat(p.getCompoundMinHeightBiasTop(d))/(parseFloat(p.getCompoundMinHeightBiasTop(d))+parseFloat(p.getCompoundMinHeightBiasBottom(d)))))}if(m.startsWith("top")){if(n(d)-f>p.minHeight(d)&&(!d.isParent()||x-f>=0))c=h.y+f/2,v=!0,t(d,n(d)-f);else if(o)return}else if(m.startsWith("bottom"))if(n(d)+f>p.minHeight(d)&&(!d.isParent()||b+f>=0))c=h.y+f/2,v=!0,t(d,n(d)+f);else if(o)return;if(m.endsWith("left")&&i(d)-l>p.minWidth(d)&&(!d.isParent()||y-l>=0)?(u=h.x+l/2,g=!0,e(d,i(d)-l)):m.endsWith("right")&&i(d)+l>p.minWidth(d)&&(!d.isParent()||C+l>=0)&&(u=h.x+l/2,g=!0,e(d,i(d)+l)),d.isParent()||!g&&!v||d.position({x:u,y:c}),d.isParent()){if(M=i(d)-s.w,z=n(d)-s.h,g&&M>0){m.endsWith("right")?C=M-y:m.endsWith("left")&&(y=M-C);var w=y/(y+C)*100,B=100-w;if(w<0||B<0)return;p.setCompoundMinWidthBiasLeft(d,w+"%"),p.setCompoundMinWidthBiasRight(d,B+"%")}if(v&&z>0){m.startsWith("top")?x=z-b:m.startsWith("bottom")&&(b=z-x);var R=x/(x+b)*100,W=100-R;if(R<0||W<0)return;p.setCompoundMinHeightBiasTop(d,R+"%"),p.setCompoundMinHeightBiasBottom(d,W+"%")}}}})),h.x=c,h.y=g,a.resizeControls.update(),r.trigger("nodeediting.resizedrag",[m,d])},f=function(e){e.target.getStage().container().style.cursor=p.cursors[u[a.location]]},m=function(e){null!=e.target.getStage()&&(e.target.getStage().container().style.cursor=p.cursors.default)};this.shape.on("mouseenter",f),this.shape.on("mouseleave",m),this.shape.on("touchstart mousedown",(function(v){s=d.children().boundingBox(),e=d.isParent()?p.setCompoundMinWidth:p.setWidth,t=d.isParent()?p.setCompoundMinHeight:p.setHeight,i=function(e){return e.isParent()?Math.max(parseFloat(p.getCompoundMinWidth(e)),s.w):e.width()},n=function(e){return e.isParent()?Math.max(parseFloat(p.getCompoundMinHeight(e)),s.h):e.height()},r.trigger("nodeediting.resizestart",[a.location,a.parent]),r.style()._private.coreStyle["active-bg-opacity"]&&(o=r.style()._private.coreStyle["active-bg-opacity"].value),r.style().selector("core").style("active-bg-opacity",0).update(),v.target.getStage().container().style.cursor=p.cursors[u[a.location]];var y=v.target.getStage().getPointerPosition();h.x=y.x,h.y=y.y,r.boxSelectionEnabled(!1),r.panningEnabled(!1),r.autounselectify(!0),r.autoungrabify(!0),a.shape.off("mouseenter",f),a.shape.off("mouseleave",m),l.getStage().on("contentTouchend contentMouseup",c),l.getStage().on("contentTouchmove contentMousemove",g)}))},x.prototype.update=function(){var e=this.parent.renderedPosition(),t=this.parent.renderedOuterWidth()+H(),i=this.parent.renderedOuterHeight()+H(),n={x:e.x-t/2,y:e.y-i/2},o=R(this.parent);this.shape.width(o),this.shape.height(o),this.updateShapePosition(n,t,i,o)},x.prototype.unbindAllEvents=function(){this.shape.off("mouseenter"),this.shape.off("mouseleave"),this.shape.off("touchstart mousedown")},x.prototype.updateShapePosition=function(e,t,i,n){switch(this.location){case"topleft":this.shape.x(e.x-n/2),this.shape.y(e.y-n/2);break;case"topcenter":this.shape.x(e.x+t/2-n/2),this.shape.y(e.y-n/2);break;case"topright":this.shape.x(e.x+t-n/2),this.shape.y(e.y-n/2);break;case"centerright":this.shape.x(e.x+t-n/2),this.shape.y(e.y+i/2-n/2);break;case"bottomright":this.shape.x(e.x+t-n/2),this.shape.y(e.y+i-n/2);break;case"bottomcenter":this.shape.x(e.x+t/2-n/2),this.shape.y(e.y+i-n/2);break;case"bottomleft":this.shape.x(e.x-n/2),this.shape.y(e.y+i-n/2);break;case"centerleft":this.shape.x(e.x-n/2),this.shape.y(e.y+i/2-n/2)}};var b=function(e,t){this.parent=e,this.resizeControls=t;var n=e.renderedPosition(),o=e.renderedOuterWidth()+H(),s=e.renderedOuterHeight()+H(),a={x:n.x-o/2,y:n.y-s/2},r=W(e),d=T(e),h=new Image;h.src=p.resizeToContentCueImage,this.shape=new i.Image({width:d,height:r,image:h}),h.onload=function(){l.draw()},this.updateShapePosition(a,o,s,d,r),this.bindEvents(),l.add(this.shape)};b.prototype.update=function(){var e=this.parent.renderedPosition(),t=this.parent.renderedOuterWidth()+H(),i=this.parent.renderedOuterHeight()+H(),n={x:e.x-t/2,y:e.y-i/2},o=W(this.parent),s=T(this.parent);this.shape.width(s),this.shape.height(o),this.updateShapePosition(n,t,i,s,o)},b.prototype.updateShapePosition=function(e,t,i,n,o){switch(p.resizeToContentCuePosition){case"top-left":this.shape.x(e.x+.4*n),this.shape.y(e.y+.4*o);break;case"top-right":this.shape.x(e.x+t-1.4*n),this.shape.y(e.y+.4*o);break;case"bottom-left":this.shape.x(e.x+.4*n),this.shape.y(e.y+i-1.4*o);break;default:this.shape.x(e.x+t-1.4*n),this.shape.y(e.y+i-1.4*o)}},b.prototype.bindEvents=function(){var e=this.parent,t=this;this.shape.on("mousedown",(function(e){e.evt.preventDefault(),e.evt.stopPropagation()})),this.shape.on("click",(function(i){i.evt.preventDefault(),"function"==typeof p.resizeToContentFunction?p.resizeToContentFunction([e]):r.undoRedo&&p.undoable?r.trigger("nodeediting.resizetocontent",[t]):P({self:t,firstTime:!0})}))},b.prototype.unbindEvents=function(){this.shape.off("mousedown"),this.shape.off("click")};var M,z=function(e){if(e.isParent())return e.children().boundingBox().h;var t=document.createElement("canvas").getContext("2d"),i=e.style();return t.font=i["font-size"]+" "+i["font-family"],Math.max(1.1*t.measureText("M").width,30)},w=function(e){if(e.isParent())return e.children().boundingBox().w;var t=document.createElement("canvas").getContext("2d"),i=e.style();t.font=i["font-size"]+" "+i["font-family"];var n=i.label.split("\n"),o=0;return n.forEach((function(e){var i=t.measureText(e).width;o=o&&r>=n?(o=a,n=r):n=(o=o=o&&h>=a?(o=d,a=h):a=(o=o40)return;N[e.keyCode]=!0,e.preventDefault(),L||(M=r.nodes(":selected"),r.trigger("nodeediting.movestart",[M]),L=!0);var i=3;if(e.altKey&&e.shiftKey)return;e.altKey?i=1:e.shiftKey&&(i=10);var n=0,o=0;n+=N[39]?i:0,n-=N[37]?i:0,o+=N[40]?i:0,S({x:n,y:o-=N[38]?i:0},M)}}}),!0),document.addEventListener("keyup",(function(e){e.keyCode<"37"||e.keyCode>"40"||(e.preventDefault(),N[e.keyCode]=!1,("function"==typeof p.moveSelectedNodesOnKeyEvents?p.moveSelectedNodesOnKeyEvents():p.moveSelectedNodesOnKeyEvents)&&(r.trigger("nodeediting.moveend",[M]),M=void 0,L=!1))}),!0)),r.undoRedo&&p.undoable){var F,O;r.on("nodeediting.resizestart",(function(e,i,n){F={node:n,css:{}},n.isParent()?(F.css.minWidth=parseFloat(p.getCompoundMinWidth(n)),F.css.minHeight=parseFloat(p.getCompoundMinHeight(n)),F.css.biasLeft=p.getCompoundMinWidthBiasLeft(n),F.css.biasRight=p.getCompoundMinWidthBiasRight(n),F.css.biasTop=p.getCompoundMinHeightBiasTop(n),F.css.biasBottom=p.getCompoundMinHeightBiasBottom(n)):(F.css.width=n.width(),F.css.height=n.height(),F.position=t.extend({},n.position()))})),r.on("nodeediting.resizeend",(function(e,t,i){F.firstTime=!0,r.undoRedo().do("resize",F),F=void 0})),r.on("nodeediting.movestart",(function(e,t){null!=t[0]&&(O={firstTime:!0,firstNodePosition:{x:t[0].position("x"),y:t[0].position("y")},nodes:t})})),r.on("nodeediting.moveend",(function(e,t){if(null!=O){var i=O.firstNodePosition;O.positionDiff={x:-t[0].position("x")+i.x,y:-t[0].position("y")+i.y},delete O.firstNodePosition,r.undoRedo().do("nodeediting.move",O),O=void 0}})),r.on("nodeediting.resizetocontent",(function(e,t){var i={self:t,firstTime:!0};r.undoRedo().do("resizeToContent",i)}));var A=function(e){if(e.firstTime)return s&&s.update(),delete e.firstTime,e;var i=e.node,n={node:i,css:{}};return i.isParent()?(n.css.minWidth=parseFloat(p.getCompoundMinWidth(i)),n.css.minHeight=parseFloat(p.getCompoundMinHeight(i)),n.css.biasLeft=p.getCompoundMinWidthBiasLeft(i),n.css.biasRight=p.getCompoundMinWidthBiasRight(i),n.css.biasTop=p.getCompoundMinHeightBiasTop(i),n.css.biasBottom=p.getCompoundMinHeightBiasBottom(i)):(n.css.width=i.width(),n.css.height=i.height(),n.position=t.extend({},i.position())),r.startBatch(),i.isParent()?(p.setCompoundMinWidth(i,e.css.minWidth),p.setCompoundMinHeight(i,e.css.minHeight),p.setCompoundMinWidthBiasLeft(i,e.css.biasLeft),p.setCompoundMinWidthBiasRight(i,e.css.biasRight),p.setCompoundMinHeightBiasTop(i,e.css.biasTop),p.setCompoundMinHeightBiasBottom(i,e.css.biasBottom)):(i.position(e.position),p.setWidth(i,e.css.width),p.setHeight(i,e.css.height)),r.endBatch(),s&&s.update(),n},K=function(e){if(e.firstTime)return delete e.firstTime,e;var t=e.nodes,i=e.positionDiff,n={nodes:t,positionDiff:{x:-i.x,y:-i.y}};return S(i,t),n};r.undoRedo().action("resize",A,A),r.undoRedo().action("nodeediting.move",K,K),r.undoRedo().action("resizeToContent",P,P)}var D,I={refreshGrapples:function(){if(s){var e=s.parent;s.remove(),s=new y(e)}},removeGrapples:function(){s&&(s.remove(),s=null)}};return"api",D=I,o(r).api=D,I}))}function o(e,t){void 0===e.scratch("_cyNodeEditing")&&e.scratch("_cyNodeEditing",{});var i=e.scratch("_cyNodeEditing");return void 0===t?i:i[t]}},e.exports&&(e.exports=r),void 0===(n=function(){return r}.call(t,i,t,e))||(e.exports=n),"undefined"!=typeof cytoscape&&"undefined"!=typeof jQuery&&"undefined"!=typeof Konva&&r(cytoscape,jQuery,Konva)}},t={};return function i(n){var o=t[n];if(void 0!==o)return o.exports;var s=t[n]={exports:{}};return e[n](s,s.exports,i),s.exports}(265)})()})); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.cytoscapeNodeEditing=t():e.cytoscapeNodeEditing=t()}(self,(function(){return(()=>{"use strict";var e={265:(e,t,i)=>{var n,o,s,a,r,d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};o=Math.max,s=Date.now||function(){return(new Date).getTime()},a=function(e,t,i){var n,a,r,h,u,p,c,g,f,l=0,m=!1,v=!0;if("function"!=typeof e)throw new TypeError("Expected a function");if(t=t<0?0:+t||0,!0===i){var y=!0;v=!1}else f=void 0===(g=i)?"undefined":d(g),!g||"object"!=f&&"function"!=f||(y=!!i.leading,m="maxWait"in i&&o(+i.maxWait||0,t),v="trailing"in i?!!i.trailing:v);function C(t,i){i&&clearTimeout(i),a=p=c=void 0,t&&(l=s(),r=e.apply(u,n),p||a||(n=u=void 0))}function x(){var e=t-(s()-h);e<=0||e>t?C(c,a):p=setTimeout(x,e)}function b(){C(v,p)}function M(){if(n=arguments,h=s(),u=this,c=v&&(p||!y),!1===m)var i=y&&!p;else{a||y||(l=h);var o=m-(h-l),d=o<=0||o>m;d?(a&&(a=clearTimeout(a)),l=h,r=e.apply(u,n)):a||(a=setTimeout(b,o))}return d&&p?p=clearTimeout(p):p||t===m||(p=setTimeout(x,t)),i&&(d=!0,r=e.apply(u,n)),!d||p||a||(n=u=void 0),r}return M.cancel=function(){p&&clearTimeout(p),a&&clearTimeout(a),l=0,a=p=c=void 0},M},r=function(e,t,i){if(e&&t&&i){var n=0;e("core","nodeEditing",(function(e){var s,r=this;if("get"===e)return o(r,"api");var d,h,u=1.1,p=t.extend(!0,{padding:5,undoable:!0,grappleSize:8,grappleColor:"green",inactiveGrappleStroke:"inside 1px blue",boundingRectangleLineDash:[4,8],boundingRectangleLineColor:"red",boundingRectangleLineWidth:1.5,zIndex:999,moveSelectedNodesOnKeyEvents:function(){return!0},minWidth:function(e){return e.data("resizeMinWidth")||15},minHeight:function(e){return e.data("resizeMinHeight")||15},getCompoundMinWidth:function(e){return e.css("min-width")},getCompoundMinHeight:function(e){return e.css("min-height")},getCompoundMinWidthBiasRight:function(e){return e.css("min-width-bias-right")},getCompoundMinWidthBiasLeft:function(e){return e.css("min-width-bias-left")},getCompoundMinHeightBiasTop:function(e){return e.css("min-height-bias-top")},getCompoundMinHeightBiasBottom:function(e){return e.css("min-height-bias-bottom")},setWidth:function(e,t){e.css("width",t)},setHeight:function(e,t){e.css("height",t)},setCompoundMinWidth:function(e,t){e.css("min-width",t)},setCompoundMinHeight:function(e,t){e.css("min-height",t)},setCompoundMinWidthBiasLeft:function(e,t){e.css("min-width-bias-left",t)},setCompoundMinWidthBiasRight:function(e,t){e.css("min-width-bias-right",t)},setCompoundMinHeightBiasTop:function(e,t){e.css("min-height-bias-top",t)},setCompoundMinHeightBiasBottom:function(e,t){e.css("min-height-bias-bottom",t)},isFixedAspectRatioResizeMode:function(e){return e.is(".fixedAspectRatioResizeMode")},isNoResizeMode:function(e){return e.is(".noResizeMode, :parent")},isNoControlsMode:function(e){return e.is(".noControlsMode")},cursors:{default:"default",inactive:"not-allowed",nw:"nw-resize",n:"n-resize",ne:"ne-resize",e:"e-resize",se:"se-resize",s:"s-resize",sw:"sw-resize",w:"w-resize"},grappleLocations:["topleft","topcenter","topright","centerright","bottomright","bottomcenter","bottomleft","centerleft"],resizeToContentCueEnabled:function(e){return!0},resizeToContentFunction:void 0,resizeToContentCuePosition:"bottom-right",resizeToContentCueImage:"/node_modules/cytoscape-node-editing/resizeCue.svg",enableMovementWithArrowKeys:!0,autoRemoveResizeToContentCue:!1},e),c=t(r.container()),g="cy-node-edge-editing-stage"+n;n++;var f,l,m=t('
');c.find("#"+g).length<1&&c.append(m),(f=i.stages.length=0)&&(n=!1),this.grapples.push(new x(e,this,i,n))}!p.resizeToContentCueEnabled(e)||p.isNoResizeMode(e)||p.autoRemoveResizeToContentCue&&(!p.autoRemoveResizeToContentCue||B(e))||(this.resizeCue=new b(e,this)),l.draw()};y.prototype.update=function(){this.boundingRectangle.update();for(var e=0;e=0||p.isNoResizeMode(d))){if(o){var a=n(d)/i(d),r=(Math.min(l,f),"topright"==m||"bottomleft"==m);l>f?f=l*a*(r?-1:1):l=f/a*(r?-1:1)}var h=d.position(),u=h.x,c=h.y,g=!1,v=!1,y=0,C=0,x=0,b=0;if(d.isParent()){var M=i(d)-s.w,z=n(d)-s.h;M>0&&(C=M-(y=M*parseFloat(p.getCompoundMinWidthBiasLeft(d))/(parseFloat(p.getCompoundMinWidthBiasLeft(d))+parseFloat(p.getCompoundMinWidthBiasRight(d))))),z>0&&(b=z-(x=z*parseFloat(p.getCompoundMinHeightBiasTop(d))/(parseFloat(p.getCompoundMinHeightBiasTop(d))+parseFloat(p.getCompoundMinHeightBiasBottom(d)))))}if(m.startsWith("top")){if(n(d)-f>p.minHeight(d)&&(!d.isParent()||x-f>=0))c=h.y+f/2,v=!0,t(d,n(d)-f);else if(o)return}else if(m.startsWith("bottom"))if(n(d)+f>p.minHeight(d)&&(!d.isParent()||b+f>=0))c=h.y+f/2,v=!0,t(d,n(d)+f);else if(o)return;if(m.endsWith("left")&&i(d)-l>p.minWidth(d)&&(!d.isParent()||y-l>=0)?(u=h.x+l/2,g=!0,e(d,i(d)-l)):m.endsWith("right")&&i(d)+l>p.minWidth(d)&&(!d.isParent()||C+l>=0)&&(u=h.x+l/2,g=!0,e(d,i(d)+l)),d.isParent()||!g&&!v||d.position({x:u,y:c}),d.isParent()){if(M=i(d)-s.w,z=n(d)-s.h,g&&M>0){m.endsWith("right")?C=M-y:m.endsWith("left")&&(y=M-C);var w=y/(y+C)*100,B=100-w;if(w<0||B<0)return;p.setCompoundMinWidthBiasLeft(d,w+"%"),p.setCompoundMinWidthBiasRight(d,B+"%")}if(v&&z>0){m.startsWith("top")?x=z-b:m.startsWith("bottom")&&(b=z-x);var R=x/(x+b)*100,W=100-R;if(R<0||W<0)return;p.setCompoundMinHeightBiasTop(d,R+"%"),p.setCompoundMinHeightBiasBottom(d,W+"%")}}}})),h.x=c,h.y=g,a.resizeControls.update(),r.trigger("nodeediting.resizedrag",[m,d])},f=function(e){e.target.getStage().container().style.cursor=p.cursors[u[a.location]]},m=function(e){null!=e.target.getStage()&&(e.target.getStage().container().style.cursor=p.cursors.default)};this.shape.on("mouseenter",f),this.shape.on("mouseleave",m),this.shape.on("touchstart mousedown",(function(v){s=d.children().boundingBox(),e=d.isParent()?p.setCompoundMinWidth:p.setWidth,t=d.isParent()?p.setCompoundMinHeight:p.setHeight,i=function(e){return e.isParent()?Math.max(parseFloat(p.getCompoundMinWidth(e)),s.w):e.width()},n=function(e){return e.isParent()?Math.max(parseFloat(p.getCompoundMinHeight(e)),s.h):e.height()},r.trigger("nodeediting.resizestart",[a.location,a.parent]),r.style()._private.coreStyle["active-bg-opacity"]&&(o=r.style()._private.coreStyle["active-bg-opacity"].value),r.style().selector("core").style("active-bg-opacity",0).update(),v.target.getStage().container().style.cursor=p.cursors[u[a.location]];var y=v.target.getStage().getPointerPosition();h.x=y.x,h.y=y.y,r.boxSelectionEnabled(!1),r.panningEnabled(!1),r.autounselectify(!0),r.autoungrabify(!0),a.shape.off("mouseenter",f),a.shape.off("mouseleave",m),l.getStage().on("contentTouchend contentMouseup",c),l.getStage().on("contentTouchmove contentMousemove",g)}))},x.prototype.update=function(){var e=this.parent.renderedPosition(),t=this.parent.renderedOuterWidth()+H(),i=this.parent.renderedOuterHeight()+H(),n={x:e.x-t/2,y:e.y-i/2},o=R(this.parent);this.shape.width(o),this.shape.height(o),this.updateShapePosition(n,t,i,o)},x.prototype.unbindAllEvents=function(){this.shape.off("mouseenter"),this.shape.off("mouseleave"),this.shape.off("touchstart mousedown")},x.prototype.updateShapePosition=function(e,t,i,n){switch(this.location){case"topleft":this.shape.x(e.x-n/2),this.shape.y(e.y-n/2);break;case"topcenter":this.shape.x(e.x+t/2-n/2),this.shape.y(e.y-n/2);break;case"topright":this.shape.x(e.x+t-n/2),this.shape.y(e.y-n/2);break;case"centerright":this.shape.x(e.x+t-n/2),this.shape.y(e.y+i/2-n/2);break;case"bottomright":this.shape.x(e.x+t-n/2),this.shape.y(e.y+i-n/2);break;case"bottomcenter":this.shape.x(e.x+t/2-n/2),this.shape.y(e.y+i-n/2);break;case"bottomleft":this.shape.x(e.x-n/2),this.shape.y(e.y+i-n/2);break;case"centerleft":this.shape.x(e.x-n/2),this.shape.y(e.y+i/2-n/2)}};var b=function(e,t){this.parent=e,this.resizeControls=t;var n=e.renderedPosition(),o=e.renderedOuterWidth()+H(),s=e.renderedOuterHeight()+H(),a={x:n.x-o/2,y:n.y-s/2},r=W(e),d=T(e),h=new Image;h.src=p.resizeToContentCueImage,this.shape=new i.Image({width:d,height:r,image:h}),h.onload=function(){l.draw()},this.updateShapePosition(a,o,s,d,r),this.bindEvents(),l.add(this.shape)};b.prototype.update=function(){var e=this.parent.renderedPosition(),t=this.parent.renderedOuterWidth()+H(),i=this.parent.renderedOuterHeight()+H(),n={x:e.x-t/2,y:e.y-i/2},o=W(this.parent),s=T(this.parent);this.shape.width(s),this.shape.height(o),this.updateShapePosition(n,t,i,s,o)},b.prototype.updateShapePosition=function(e,t,i,n,o){switch(p.resizeToContentCuePosition){case"top-left":this.shape.x(e.x+.4*n),this.shape.y(e.y+.4*o);break;case"top-right":this.shape.x(e.x+t-1.4*n),this.shape.y(e.y+.4*o);break;case"bottom-left":this.shape.x(e.x+.4*n),this.shape.y(e.y+i-1.4*o);break;default:this.shape.x(e.x+t-1.4*n),this.shape.y(e.y+i-1.4*o)}},b.prototype.bindEvents=function(){var e=this.parent,t=this;this.shape.on("mousedown",(function(e){e.evt.preventDefault(),e.evt.stopPropagation()})),this.shape.on("click",(function(i){i.evt.preventDefault(),"function"==typeof p.resizeToContentFunction?p.resizeToContentFunction([e]):r.undoRedo&&p.undoable?r.trigger("nodeediting.resizetocontent",[t]):P({self:t,firstTime:!0})}))},b.prototype.unbindEvents=function(){this.shape.off("mousedown"),this.shape.off("click")};var M,z=function(e){if(e.isParent())return e.children().boundingBox().h;var t=document.createElement("canvas").getContext("2d"),i=e.style();return t.font=i["font-size"]+" "+i["font-family"],Math.max(1.1*t.measureText("M").width,30)},w=function(e){if(e.isParent())return e.children().boundingBox().w;var t=document.createElement("canvas").getContext("2d"),i=e.style();t.font=i["font-size"]+" "+i["font-family"];var n=i.label.split("\n"),o=0;return n.forEach((function(e){var i=t.measureText(e).width;o=o&&r>=n?(o=a,n=r):n=(o=o=o&&h>=a?(o=d,a=h):a=(o=o40)return;N[e.keyCode]=!0,e.preventDefault(),k||(M=r.nodes(":selected"),r.trigger("nodeediting.movestart",[M]),k=!0);var i=3;if(e.altKey&&e.shiftKey)return;e.altKey?i=1:e.shiftKey&&(i=10);var n=0,o=0;n+=N[39]?i:0,n-=N[37]?i:0,o+=N[40]?i:0,S({x:n,y:o-=N[38]?i:0},M)}}}),!0),document.addEventListener("keyup",(function(e){e.keyCode<"37"||e.keyCode>"40"||(e.preventDefault(),N[e.keyCode]=!1,("function"==typeof p.moveSelectedNodesOnKeyEvents?p.moveSelectedNodesOnKeyEvents():p.moveSelectedNodesOnKeyEvents)&&(r.trigger("nodeediting.moveend",[M]),M=void 0,k=!1))}),!0)),r.undoRedo&&p.undoable){var F,O;r.on("nodeediting.resizestart",(function(e,i,n){F={node:n,css:{}},n.isParent()?(F.css.minWidth=parseFloat(p.getCompoundMinWidth(n)),F.css.minHeight=parseFloat(p.getCompoundMinHeight(n)),F.css.biasLeft=p.getCompoundMinWidthBiasLeft(n),F.css.biasRight=p.getCompoundMinWidthBiasRight(n),F.css.biasTop=p.getCompoundMinHeightBiasTop(n),F.css.biasBottom=p.getCompoundMinHeightBiasBottom(n)):(F.css.width=n.width(),F.css.height=n.height(),F.position=t.extend({},n.position()))})),r.on("nodeediting.resizeend",(function(e,t,i){F.firstTime=!0,r.undoRedo().do("resize",F),F=void 0})),r.on("nodeediting.movestart",(function(e,t){null!=t[0]&&(O={firstTime:!0,firstNodePosition:{x:t[0].position("x"),y:t[0].position("y")},nodes:t})})),r.on("nodeediting.moveend",(function(e,t){if(null!=O){var i=O.firstNodePosition;O.positionDiff={x:-t[0].position("x")+i.x,y:-t[0].position("y")+i.y},delete O.firstNodePosition,r.undoRedo().do("nodeediting.move",O),O=void 0}})),r.on("nodeediting.resizetocontent",(function(e,t){var i={self:t,firstTime:!0};r.undoRedo().do("resizeToContent",i)}));var A=function(e){if(e.firstTime)return s&&s.update(),delete e.firstTime,e;var i=e.node,n={node:i,css:{}};return i.isParent()?(n.css.minWidth=parseFloat(p.getCompoundMinWidth(i)),n.css.minHeight=parseFloat(p.getCompoundMinHeight(i)),n.css.biasLeft=p.getCompoundMinWidthBiasLeft(i),n.css.biasRight=p.getCompoundMinWidthBiasRight(i),n.css.biasTop=p.getCompoundMinHeightBiasTop(i),n.css.biasBottom=p.getCompoundMinHeightBiasBottom(i)):(n.css.width=i.width(),n.css.height=i.height(),n.position=t.extend({},i.position())),r.startBatch(),i.isParent()?(p.setCompoundMinWidth(i,e.css.minWidth),p.setCompoundMinHeight(i,e.css.minHeight),p.setCompoundMinWidthBiasLeft(i,e.css.biasLeft),p.setCompoundMinWidthBiasRight(i,e.css.biasRight),p.setCompoundMinHeightBiasTop(i,e.css.biasTop),p.setCompoundMinHeightBiasBottom(i,e.css.biasBottom)):(i.position(e.position),p.setWidth(i,e.css.width),p.setHeight(i,e.css.height)),r.endBatch(),s&&s.update(),n},K=function(e){if(e.firstTime)return delete e.firstTime,e;var t=e.nodes,i=e.positionDiff,n={nodes:t,positionDiff:{x:-i.x,y:-i.y}};return S(i,t),n};r.undoRedo().action("resize",A,A),r.undoRedo().action("nodeediting.move",K,K),r.undoRedo().action("resizeToContent",P,P)}var D,I={refreshGrapples:function(){if(s){var e=s.parent;s.remove(),s=new y(e)}},removeGrapples:function(){s&&(s.remove(),s=null)}};return"api",D=I,o(r).api=D,I}))}function o(e,t){void 0===e.scratch("_cyNodeEditing")&&e.scratch("_cyNodeEditing",{});var i=e.scratch("_cyNodeEditing");return void 0===t?i:i[t]}},e.exports&&(e.exports=r),void 0===(n=function(){return r}.call(t,i,t,e))||(e.exports=n),"undefined"!=typeof cytoscape&&"undefined"!=typeof jQuery&&"undefined"!=typeof Konva&&r(cytoscape,jQuery,Konva)}},t={};return function i(n){var o=t[n];if(void 0!==o)return o.exports;var s=t[n]={exports:{}};return e[n](s,s.exports,i),s.exports}(265)})()})); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 3f3d543..e477827 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { - "name": "cytoscape-node-editing", - "version": "3.2.0", + "name": "cytoscape-node-resize", + "version": "4.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 78e35b6..fb78534 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cytoscape-node-editing", - "version": "3.2.0", + "version": "4.1.0", "description": "", "main": "cytoscape-node-editing.js", "spm": { diff --git a/src/cytoscape-node-editing.js b/src/cytoscape-node-editing.js index 6a890a3..5942ad7 100644 --- a/src/cytoscape-node-editing.js +++ b/src/cytoscape-node-editing.js @@ -342,7 +342,16 @@ sw: "sw-resize", w: "w-resize" }, - + grappleLocations: [ + "topleft", + "topcenter", + "topright", + "centerright", + "bottomright", + "bottomcenter", + "bottomleft", + "centerleft", + ], resizeToContentCueEnabled: function (node) { return true; }, @@ -480,11 +489,10 @@ var ResizeControls = function (node) { this.parent = node; this.boundingRectangle = new BoundingRectangle(node); - var grappleLocations = ["topleft", "topcenter", "topright", "centerright", "bottomright", - "bottomcenter", "bottomleft", "centerleft"]; + this.grapples = []; - for(var i=0; i < grappleLocations.length; i++) { - var location = grappleLocations[i]; + for(var i=0; i < options.grappleLocations.length; i++) { + var location = options.grappleLocations[i]; var isActive = true; if (options.isNoResizeMode(node) || (options.isFixedAspectRatioResizeMode(node) && location.indexOf("center") >= 0)) { isActive = false;