workflow-svg.js - npm Package Compare versions

Comparing version 1.1.1 to 2.0.0

dist/workflow-svg.js

@@ -33,3 +33,3 @@ var WorkflowSVG = (function () {
         //assginment and default values for entities
-        entity.backgroundcolor = entity.backgroundcolor ? entity.backgroundcolor : '#f06';
+        entity.background_color = entity.background_color ? entity.background_color : '#f06';
         entity.color = entity.color ? entity.color : '#ffffff';
@@ -44,8 +44,8 @@ entity.radius = entity.radius ? entity.radius : 0;
             .cy((entity.height/2))
-            .attr({ fill: entity.backgroundcolor })
+            .attr({ fill: entity.background_color })
             .radius(entity.radius);
 
-        group.entity.displaytype = entity.displaytype;
+        group.entity.type = entity.type;
 
-        if(entity.displaytype==='operation'){
+        if(entity.type==='operation'){
             group.entity.transform({'rotate': 45, origin: 'center center'});
@@ -58,20 +58,30 @@ }
 
-        var text = group.text(entity.text)
+        var text = group.plain(entity.text)
             .cx((entity.width/2))
             .cy(entity.height/2)
-            .attr({ fill: entity.color})
-            .font({
-                family: 'Helvetica'
-            });
+            .attr({ fill: entity.color});
 
-        if(entity.faicon && entity.faicon.length>0){
+        if(entity.fa_unicode && entity.fa_unicode.length>0){
             text.dx(10);
-
-            group.foreignObject(20, 20)
+                
+            group.icon = group.plain()
                 .cy(entity.height/2)
                 .x( entity.text.length>0 ? text.x()-20 : (entity.height/2)-10)
-                .add(SVG('<i class="'+entity.faicon+'" style="color:'+entity.color+'"></i>'));     
-        }
+                .attr({ fill: entity.color});
 
+            if(_json.configuration.font_awesome == 4){
+                group.icon.font({
+                    family: 'font_awesome'
+                });
+            }
+    
+            if(_json.configuration.font_awesome == 5){
+                group.icon.font({
+                    family: '"Font Awesome 5 Free"'
+                });
+            }
 
+            var faContentCode = entity.fa_unicode.startsWith('&#x') ? entity.fa_unicode : '&#x'+entity.fa_unicode+';';
+            group.icon.node.innerHTML = faContentCode;
+        }
 
@@ -85,3 +95,3 @@ group.arrows = group.group();
 
-        if(entity.displaytype==='operation'){
+        if(entity.type==='operation'){
             hoverArea.transform({'rotate': 45});
@@ -98,3 +108,3 @@ }
 
-        if(!_json.configuration.readonly){
+        if(!_json.configuration.read_only){
             draggableElement.draggable()
@@ -171,3 +181,2 @@ .on('dragmove.namespace', (e) => {
         group.move(entity.x-MARGIN, entity.y-MARGIN);
-
     }
@@ -217,3 +226,3 @@
                 var label = _draw.labels.text(l.value).x(l.x).y(l.y);
-                if(_json.configuration.readonly!=true){
+                if(_json.configuration.read_only!=true){
                     label
@@ -413,3 +422,3 @@ .attr({'cursor': 'move', 'fill': l.color})
             if(line.from.point === 'top' ){
-                if(y1 <= y2){
+                if(y1 < (y2+20)){
                     pointsInBetween.push({x: x1, y:y1-20});
@@ -431,3 +440,3 @@
             if(line.from.point === 'bottom'){
-                if(y1 >= y2){
+                if(y1 > (y2-20)){
                     pointsInBetween.push({x: x1, y:y1+20});
@@ -448,3 +457,3 @@ if(line.to.point === 'left'){
             if(line.from.point === 'left'){
-                if(y1 > y2){
+                if(y1 > (y2-20)){
                     if(line.to.point === 'top'){
@@ -470,3 +479,3 @@ pointsInBetween.push({x: x1-20,  y:y1});
             if(line.from.point === 'right'){
-                if(y1 > y2){
+                if(y1 > (y2-20)){
                     if(line.to.point === 'top'){
@@ -505,3 +514,3 @@ pointsInBetween.push({x: x1+20,  y:y1});
     function _calculateX(group, position){
-        var width = (group.entity.displaytype==='operation') ? _pythagorean(group.entity.attr('width'), group.entity.attr('height')) : group.entity.attr('width');
+        var width = (group.entity.type==='operation') ? _pythagorean(group.entity.attr('width'), group.entity.attr('height')) : group.entity.attr('width');
 
@@ -520,3 +529,3 @@ switch(position){
     function _calculateY(group, position){
-        var height = (group.entity.displaytype==='operation') ? _pythagorean(group.entity.attr('width'), group.entity.attr('height')) : group.entity.attr('height');
+        var height = (group.entity.type==='operation') ? _pythagorean(group.entity.attr('width'), group.entity.attr('height')) : group.entity.attr('height');
 
@@ -579,3 +588,3 @@ switch(position){
 
-        _json.configuration.readonly = _json.configuration.readonly ? _json.configuration.readonly  : false; 
+        _json.configuration.read_only = _json.configuration.read_only ? _json.configuration.read_only  : false; 
         _json.configuration.line_color = _json.configuration.line_color ? _json.configuration.line_color : '#000000';
@@ -606,5 +615,5 @@ _json.configuration.arrow_type = _json.configuration.arrow_type ? _json.configuration.arrow_type : 'default';
         _json.entities.map(entity => {
-            entity.displaytype = entity.displaytype ? entity.displaytype: 'entity';
+            entity.type = entity.type ? entity.type: 'entity';
 
-            if(entity.displaytype==='operation'){
+            if(entity.type==='operation'){
                 entity.height = entity.width;
@@ -611,0 +620,0 @@ }

dist/workflow-svg.minified.js

@@ -1,8 +0,8 @@
-"use strict";var WorkflowSVG=function(){function a(a,b){var c=a.group().attr({id:b.id});a.entities.push(c),b.backgroundcolor=b.backgroundcolor?b.backgroundcolor:"#f06",b.color=b.color?b.color:"#ffffff",b.radius=b.radius?b.radius:0,c.dragPoints=[],c.entity=c.rect(b.width,b.height).cx(b.width/2).cy(b.height/2).attr({fill:b.backgroundcolor}).radius(b.radius),c.entity.displaytype=b.displaytype,"operation"===b.displaytype&&c.entity.transform({rotate:45,origin:"center center"}),b.class&&c.entity.attr("class",b.class);var e=c.text(b.text).cx(b.width/2).cy(b.height/2).attr({fill:b.color}).font({family:"Helvetica"});b.faicon&&0<b.faicon.length&&(e.dx(10),c.foreignObject(20,20).cy(b.height/2).x(0<b.text.length?e.x()-20:b.height/2-10).add(SVG("<i class=\""+b.faicon+"\" style=\"color:"+b.color+"\"></i>"))),c.arrows=c.group();var g=c.rect(b.width+50,b.height+50).cx(b.width/2).cy(b.height/2).attr({opacity:"0",fill:"#FFBF00"});"operation"===b.displaytype&&g.transform({rotate:45}),c.dragGroup=c.group();//dragabble area
-var h=c.rect(b.width-20,b.height-20).cx(b.width/2).cy(b.height/2).attr({opacity:0});u.configuration.readonly||(h.draggable().on("dragmove.namespace",function(d){d.preventDefault();var e=d.detail.box;//to update json
-a.grid.x.forEach(function(a){var b=e.cx-a.value;10>b&&-10<b?(e.cx=a.value,a.line.show()):"static"!=u.configuration.grid_type&&a.line.hide()}),a.grid.y.forEach(function(a){var b=e.cy-a.value;10>b&&-10<b?(e.cy=a.value,a.line.show()):"static"!=u.configuration.grid_type&&a.line.hide()}),c.cx(e.cx),c.cy(e.cy),b.x=c.x()+25,b.y=c.y()+25,f(a,w)}).attr({cursor:"move"}).on("dragstart",function(){v.forEach(function(a){return a.remove()}),v=[]}).on("dragend",function(b){"static"!=u.configuration.grid_type&&(a.grid.y.forEach(function(a){return a.line.hide()}),a.grid.x.forEach(function(a){return a.line.hide()})),p("entity:moved",q(b))}).on("click",function(a){p("entity:clicked",q(a))}),g.on("mouseover",function(b){d(a,c,"top"),d(a,c,"right"),d(a,c,"bottom"),d(a,c,"left"),b.stopPropagation()}),a.on("mouseover",function(){c.dragPoints.forEach(function(a){v.includes(a)||a.remove()})})),c.move(b.x-25,b.y-25)}function b(){u.configuration.grid_x&&0<u.configuration.grid_x.length&&(u.configuration.grid_x.forEach(function(a){t.grid.x.push({value:a.value,line:t.gridGroup.polyline([[a.value,0],[a.value,t.height()]]).fill("none").stroke({color:a.color?a.color:"black",width:a.width?a.width:1,linecap:"round",linejoin:"round"})})}),"static"!=u.configuration.grid_type&&t.grid.x.forEach(function(a){return a.line.hide()})),u.configuration.grid_y&&0<u.configuration.grid_y.length&&(u.configuration.grid_y.forEach(function(a){t.grid.y.push({value:a.value,line:t.gridGroup.polyline([[0,a.value],[t.width(),a.value]]).fill("none").stroke({color:a.color?a.color:"black",width:a.width?a.width:1,linecap:"round",linejoin:"round"})})}),"static"!=u.configuration.grid_type&&t.grid.y.forEach(function(a){return a.line.hide()}))}function c(){u.labels&&0<u.labels.length&&u.labels.forEach(function(a){var b=t.labels.text(a.value).x(a.x).y(a.y);!0!=u.configuration.readonly&&b.attr({cursor:"move",fill:a.color}).draggable().on("dragend",function(b){var c=b.detail.box;a.x=c.x,a.y=c.y,p("label:moved",q(b))})})}function d(a,b,c){var d=k(b,c),e=l(b,c);b.dragPoints.push(b.dragGroup.circle(10,10).attr({fill:"white",stroke:"#d4d4d4",id:c}).move(d-5,e-5).on("mouseover",function(a){// make point bigger
-this.transform({scale:2}),a.stopPropagation()}).on("click",function(){if(!!v.includes(this))v=[];else if(v.push(this),2==v.length){var b={id:"line-"+w.length,from:{element:v[0].parent().parent().attr("id"),point:v[0].attr("id")},to:{element:v[1].parent().parent().attr("id"),point:v[1].attr("id")}};w.push(b),u.lines.push(n(b)),f(a,w),v=[],p("line:added",b)}}).on("mouseout",function(a){v.includes(this)||this.transform({scale:1}),a.stopPropagation()}))}function f(a,b){b.forEach(function(b){return g(a,b)})}function g(a,b){var c="",d=u.configuration.line_color,e=a.findOne("#"+b.from.element),f=a.findOne("#"+b.to.element),g=i(b,e,f);c+=k(e,b.from.point)+","+l(e,b.from.point)+" ",g.forEach(function(a){return c+=a.x+","+a.y+" "}),c+="top"===b.to.point?k(f,b.to.point)+","+(l(f,b.to.point)-5)+" ":"right"===b.to.point?k(f,b.to.point)+5+","+l(f,b.to.point)+" ":"bottom"===b.to.point?k(f,b.to.point)+","+(l(f,b.to.point)+5)+" ":k(f,b.to.point)-5+","+l(f,b.to.point)+" ";b.polyline?b.polyline.plot(c):b.polyline=a.lines.polyline(c).fill("none").stroke({color:d,width:4,linecap:"round",linejoin:"round"}).on("click",function(a){p("line:clicked",a.target.id)}).attr("id",b.id);h(b,f,d)}function h(a,b,c){if(!a.to.arrow&&"default"===u.configuration.arrow_type){var d=k(b,a.to.point)+","+l(b,a.to.point)+" ";"top"===a.to.point?(d+=k(b,a.to.point)+7+","+(l(b,a.to.point)-14)+" ",d+=k(b,a.to.point)-7+","+(l(b,a.to.point)-14)+" "):"right"===a.to.point?(d+=k(b,a.to.point)+14+","+(l(b,a.to.point)-7)+" ",d+=k(b,a.to.point)+14+","+(l(b,a.to.point)+7)+" "):"bottom"===a.to.point?(d+=k(b,a.to.point)+7+","+(l(b,a.to.point)+14)+" ",d+=k(b,a.to.point)-7+","+(l(b,a.to.point)+14)+" "):(d+=k(b,a.to.point)-14+","+(l(b,a.to.point)-7)+" ",d+=k(b,a.to.point)-14+","+(l(b,a.to.point)+7)+" "),a.to.arrow=b.arrows.polygon(d).fill(c).stroke({width:1})}}function i(a,b,c){var d=[],e=l(b,a.from.point),f=l(c,a.to.point),g=k(b,a.from.point),h=k(c,a.to.point),i=j(a.from.point),m=j(a.to.point),n=i-m;return 0===n&&("top"===a.from.point?e<=f?(d.push({x:g,y:e-20}),d.push({x:h,y:e-20})):(d.push({x:g,y:f-20}),d.push({x:h,y:f-20})):"bottom"===a.from.point?e<=f?(d.push({x:g,y:f+20}),d.push({x:h,y:f+20})):(d.push({x:g,y:e+20}),d.push({x:h,y:e+20})):"left"===a.from.point?g<=h?(d.push({x:g-20,y:e}),d.push({x:g-20,y:f})):(d.push({x:h-20,y:e}),d.push({x:h-20,y:f})):g<=h?(d.push({x:h+20,y:e}),d.push({x:h+20,y:f})):(d.push({x:g+20,y:e}),d.push({x:g+20,y:f}))),(2===n||-2===n)&&("left"===a.from.point||"right"===a.from.point?e!==f&&(d.push({x:g+(h-g)/2,y:e}),d.push({x:g+(h-g)/2,y:f})):g!==h&&(d.push({x:g,y:f+(e-f)/2}),d.push({x:h,y:f+(e-f)/2}))),(1===n||-1===n||3===n||-3===n)&&("top"===a.from.point&&(e<=f?(d.push({x:g,y:e-20}),"left"===a.to.point?(d.push({x:h-20,y:e-20}),d.push({x:h-20,y:f})):(d.push({x:h+20,y:e-20}),d.push({x:h+20,y:f}))):d.push({x:g,y:f})),"bottom"===a.from.point&&(e>=f?(d.push({x:g,y:e+20}),"left"===a.to.point?(d.push({x:h-20,y:e+20}),d.push({x:h-20,y:f})):(d.push({x:h+20,y:e+20}),d.push({x:h+20,y:f}))):d.push({x:g,y:f})),"left"===a.from.point&&(e>f?"top"===a.to.point?(d.push({x:g-20,y:e}),d.push({x:g-20,y:f-20}),d.push({x:h,y:f-20})):d.push({x:h,y:e}):"top"===a.to.point?d.push({x:h,y:e}):(d.push({x:g-20,y:e}),d.push({x:g-20,y:f+20}),d.push({x:h,y:f+20}))),"right"===a.from.point&&(e>f?"top"===a.to.point?(d.push({x:g+20,y:e}),d.push({x:g+20,y:f-20}),d.push({x:h,y:f-20})):d.push({x:h,y:e}):"top"===a.to.point?d.push({x:h,y:e}):(d.push({x:g+20,y:e}),d.push({x:g+20,y:f+20}),d.push({x:h,y:f+20})))),d}function j(a){return"top"===a?0:"right"===a?1:"bottom"===a?2:3}function k(a,b){var c="operation"===a.entity.displaytype?m(a.entity.attr("width"),a.entity.attr("height")):a.entity.attr("width");return"right"===b?a.cx()+c/2:"top"===b||"bottom"===b?a.cx():a.cx()-c/2}function l(a,b){var c="operation"===a.entity.displaytype?m(a.entity.attr("width"),a.entity.attr("height")):a.entity.attr("height");return"right"===b?a.cy():"top"===b?a.cy()-c/2:"bottom"===b?a.cy()+c/2:a.cy()}function m(c,a){var b=Math.pow;return Math.sqrt(b(c,2)+b(a,2))}function n(a){return JSON.parse(JSON.stringify(a))}function o(){//clean up
+"use strict";var WorkflowSVG=function(){function a(a,b){var c=a.group().attr({id:b.id});a.entities.push(c),b.background_color=b.background_color?b.background_color:"#f06",b.color=b.color?b.color:"#ffffff",b.radius=b.radius?b.radius:0,c.dragPoints=[],c.entity=c.rect(b.width,b.height).cx(b.width/2).cy(b.height/2).attr({fill:b.background_color}).radius(b.radius),c.entity.type=b.type,"operation"===b.type&&c.entity.transform({rotate:45,origin:"center center"}),b.class&&c.entity.attr("class",b.class);var e=c.plain(b.text).cx(b.width/2).cy(b.height/2).attr({fill:b.color});if(b.fa_unicode&&0<b.fa_unicode.length){e.dx(10),c.icon=c.plain().cy(b.height/2).x(0<b.text.length?e.x()-20:b.height/2-10).attr({fill:b.color}),4==u.configuration.font_awesome&&c.icon.font({family:"font_awesome"}),5==u.configuration.font_awesome&&c.icon.font({family:"\"Font Awesome 5 Free\""});var g=b.fa_unicode.startsWith("&#x")?b.fa_unicode:"&#x"+b.fa_unicode+";";c.icon.node.innerHTML=g}c.arrows=c.group();var h=c.rect(b.width+50,b.height+50).cx(b.width/2).cy(b.height/2).attr({opacity:"0",fill:"#FFBF00"});"operation"===b.type&&h.transform({rotate:45}),c.dragGroup=c.group();//dragabble area
+var i=c.rect(b.width-20,b.height-20).cx(b.width/2).cy(b.height/2).attr({opacity:0});u.configuration.read_only||(i.draggable().on("dragmove.namespace",function(d){d.preventDefault();var e=d.detail.box;//to update json
+a.grid.x.forEach(function(a){var b=e.cx-a.value;10>b&&-10<b?(e.cx=a.value,a.line.show()):"static"!=u.configuration.grid_type&&a.line.hide()}),a.grid.y.forEach(function(a){var b=e.cy-a.value;10>b&&-10<b?(e.cy=a.value,a.line.show()):"static"!=u.configuration.grid_type&&a.line.hide()}),c.cx(e.cx),c.cy(e.cy),b.x=c.x()+25,b.y=c.y()+25,f(a,w)}).attr({cursor:"move"}).on("dragstart",function(){v.forEach(function(a){return a.remove()}),v=[]}).on("dragend",function(b){"static"!=u.configuration.grid_type&&(a.grid.y.forEach(function(a){return a.line.hide()}),a.grid.x.forEach(function(a){return a.line.hide()})),p("entity:moved",q(b))}).on("click",function(a){p("entity:clicked",q(a))}),h.on("mouseover",function(b){d(a,c,"top"),d(a,c,"right"),d(a,c,"bottom"),d(a,c,"left"),b.stopPropagation()}),a.on("mouseover",function(){c.dragPoints.forEach(function(a){v.includes(a)||a.remove()})})),c.move(b.x-25,b.y-25)}function b(){u.configuration.grid_x&&0<u.configuration.grid_x.length&&(u.configuration.grid_x.forEach(function(a){t.grid.x.push({value:a.value,line:t.gridGroup.polyline([[a.value,0],[a.value,t.height()]]).fill("none").stroke({color:a.color?a.color:"black",width:a.width?a.width:1,linecap:"round",linejoin:"round"})})}),"static"!=u.configuration.grid_type&&t.grid.x.forEach(function(a){return a.line.hide()})),u.configuration.grid_y&&0<u.configuration.grid_y.length&&(u.configuration.grid_y.forEach(function(a){t.grid.y.push({value:a.value,line:t.gridGroup.polyline([[0,a.value],[t.width(),a.value]]).fill("none").stroke({color:a.color?a.color:"black",width:a.width?a.width:1,linecap:"round",linejoin:"round"})})}),"static"!=u.configuration.grid_type&&t.grid.y.forEach(function(a){return a.line.hide()}))}function c(){u.labels&&0<u.labels.length&&u.labels.forEach(function(a){var b=t.labels.text(a.value).x(a.x).y(a.y);!0!=u.configuration.read_only&&b.attr({cursor:"move",fill:a.color}).draggable().on("dragend",function(b){var c=b.detail.box;a.x=c.x,a.y=c.y,p("label:moved",q(b))})})}function d(a,b,c){var d=k(b,c),e=l(b,c);b.dragPoints.push(b.dragGroup.circle(10,10).attr({fill:"white",stroke:"#d4d4d4",id:c}).move(d-5,e-5).on("mouseover",function(a){// make point bigger
+this.transform({scale:2}),a.stopPropagation()}).on("click",function(){if(!!v.includes(this))v=[];else if(v.push(this),2==v.length){var b={id:"line-"+w.length,from:{element:v[0].parent().parent().attr("id"),point:v[0].attr("id")},to:{element:v[1].parent().parent().attr("id"),point:v[1].attr("id")}};w.push(b),u.lines.push(n(b)),f(a,w),v=[],p("line:added",b)}}).on("mouseout",function(a){v.includes(this)||this.transform({scale:1}),a.stopPropagation()}))}function f(a,b){b.forEach(function(b){return g(a,b)})}function g(a,b){var c="",d=u.configuration.line_color,e=a.findOne("#"+b.from.element),f=a.findOne("#"+b.to.element),g=i(b,e,f);c+=k(e,b.from.point)+","+l(e,b.from.point)+" ",g.forEach(function(a){return c+=a.x+","+a.y+" "}),c+="top"===b.to.point?k(f,b.to.point)+","+(l(f,b.to.point)-5)+" ":"right"===b.to.point?k(f,b.to.point)+5+","+l(f,b.to.point)+" ":"bottom"===b.to.point?k(f,b.to.point)+","+(l(f,b.to.point)+5)+" ":k(f,b.to.point)-5+","+l(f,b.to.point)+" ";b.polyline?b.polyline.plot(c):b.polyline=a.lines.polyline(c).fill("none").stroke({color:d,width:4,linecap:"round",linejoin:"round"}).on("click",function(a){p("line:clicked",a.target.id)}).attr("id",b.id);h(b,f,d)}function h(a,b,c){if(!a.to.arrow&&"default"===u.configuration.arrow_type){var d=k(b,a.to.point)+","+l(b,a.to.point)+" ";"top"===a.to.point?(d+=k(b,a.to.point)+7+","+(l(b,a.to.point)-14)+" ",d+=k(b,a.to.point)-7+","+(l(b,a.to.point)-14)+" "):"right"===a.to.point?(d+=k(b,a.to.point)+14+","+(l(b,a.to.point)-7)+" ",d+=k(b,a.to.point)+14+","+(l(b,a.to.point)+7)+" "):"bottom"===a.to.point?(d+=k(b,a.to.point)+7+","+(l(b,a.to.point)+14)+" ",d+=k(b,a.to.point)-7+","+(l(b,a.to.point)+14)+" "):(d+=k(b,a.to.point)-14+","+(l(b,a.to.point)-7)+" ",d+=k(b,a.to.point)-14+","+(l(b,a.to.point)+7)+" "),a.to.arrow=b.arrows.polygon(d).fill(c).stroke({width:1})}}function i(a,b,c){var d=[],e=l(b,a.from.point),f=l(c,a.to.point),g=k(b,a.from.point),h=k(c,a.to.point),i=j(a.from.point),m=j(a.to.point),n=i-m;return 0===n&&("top"===a.from.point?e<=f?(d.push({x:g,y:e-20}),d.push({x:h,y:e-20})):(d.push({x:g,y:f-20}),d.push({x:h,y:f-20})):"bottom"===a.from.point?e<=f?(d.push({x:g,y:f+20}),d.push({x:h,y:f+20})):(d.push({x:g,y:e+20}),d.push({x:h,y:e+20})):"left"===a.from.point?g<=h?(d.push({x:g-20,y:e}),d.push({x:g-20,y:f})):(d.push({x:h-20,y:e}),d.push({x:h-20,y:f})):g<=h?(d.push({x:h+20,y:e}),d.push({x:h+20,y:f})):(d.push({x:g+20,y:e}),d.push({x:g+20,y:f}))),(2===n||-2===n)&&("left"===a.from.point||"right"===a.from.point?e!==f&&(d.push({x:g+(h-g)/2,y:e}),d.push({x:g+(h-g)/2,y:f})):g!==h&&(d.push({x:g,y:f+(e-f)/2}),d.push({x:h,y:f+(e-f)/2}))),(1===n||-1===n||3===n||-3===n)&&("top"===a.from.point&&(e<f+20?(d.push({x:g,y:e-20}),"left"===a.to.point?(d.push({x:h-20,y:e-20}),d.push({x:h-20,y:f})):(d.push({x:h+20,y:e-20}),d.push({x:h+20,y:f}))):d.push({x:g,y:f})),"bottom"===a.from.point&&(e>f-20?(d.push({x:g,y:e+20}),"left"===a.to.point?(d.push({x:h-20,y:e+20}),d.push({x:h-20,y:f})):(d.push({x:h+20,y:e+20}),d.push({x:h+20,y:f}))):d.push({x:g,y:f})),"left"===a.from.point&&(e>f-20?"top"===a.to.point?(d.push({x:g-20,y:e}),d.push({x:g-20,y:f-20}),d.push({x:h,y:f-20})):d.push({x:h,y:e}):"top"===a.to.point?d.push({x:h,y:e}):(d.push({x:g-20,y:e}),d.push({x:g-20,y:f+20}),d.push({x:h,y:f+20}))),"right"===a.from.point&&(e>f-20?"top"===a.to.point?(d.push({x:g+20,y:e}),d.push({x:g+20,y:f-20}),d.push({x:h,y:f-20})):d.push({x:h,y:e}):"top"===a.to.point?d.push({x:h,y:e}):(d.push({x:g+20,y:e}),d.push({x:g+20,y:f+20}),d.push({x:h,y:f+20})))),d}function j(a){return"top"===a?0:"right"===a?1:"bottom"===a?2:3}function k(a,b){var c="operation"===a.entity.type?m(a.entity.attr("width"),a.entity.attr("height")):a.entity.attr("width");return"right"===b?a.cx()+c/2:"top"===b||"bottom"===b?a.cx():a.cx()-c/2}function l(a,b){var c="operation"===a.entity.type?m(a.entity.attr("width"),a.entity.attr("height")):a.entity.attr("height");return"right"===b?a.cy():"top"===b?a.cy()-c/2:"bottom"===b?a.cy()+c/2:a.cy()}function m(c,a){var b=Math.pow;return Math.sqrt(b(c,2)+b(a,2))}function n(a){return JSON.parse(JSON.stringify(a))}function o(){//clean up
 //rendering
 // needed to have no circular dependencies
-t.entities.forEach(function(a){return a.remove()}),t.entities=[],t.lines.children().forEach(function(a){return a.remove()}),w=[],t.grid.x.forEach(function(a){return a.line.remove()}),t.grid.y.forEach(function(){return x.line.remove()}),t.grid={x:[],y:[]},v.forEach(function(a){return a.remove()}),v=[],u.labels||(u.labels=[]),u.labels=u.labels.map(function(a){return{id:a.id,value:a.value?a.value:"",x:a.x?a.x:0,y:a.y?a.y:0,color:a.color?a.color:"black"}}),u.configuration||(u.configuration={}),u.configuration.readonly=!!u.configuration.readonly&&u.configuration.readonly,u.configuration.line_color=u.configuration.line_color?u.configuration.line_color:"#000000",u.configuration.arrow_type=u.configuration.arrow_type?u.configuration.arrow_type:"default",u.configuration.grid_type=u.configuration.grid_type?u.configuration.grid_type:"dynamic",u.configuration.grid_x=u.configuration.grid_x&&0<u.configuration.grid_x.length?u.configuration.grid_x.map(function(a){return{value:a.value?a.value:0,width:a.width?a.width:1,color:a.color?a.color:"black"}}):[],u.configuration.grid_y=u.configuration.grid_y&&0<u.configuration.grid_y.length?u.configuration.grid_y.map(function(a){return{value:a.value?a.value:0,width:a.width?a.width:1,color:a.color?a.color:"black"}}):[],u.entities.map(function(a){a.displaytype=a.displaytype?a.displaytype:"entity","operation"===a.displaytype&&(a.height=a.width)}),b(),c(),u.entities.forEach(function(b){return a(t,b)}),w=n(u.lines),f(t,w)}function p(a,b){null!==z[a]&&z[a]!==void 0&&z[a].forEach(function(a){return a(b)})}function q(a){var b="";return a&&a.target&&a.target.parentElement&&(b=a.target.parentElement.id),b}function r(a){u=n(a),y?o():SVG.on(document,"DOMContentLoaded",function(){o(),y=!0})}function s(){return u}var t,u={entities:[]},v=[],w=[],y=!1,z={};return{initalize:function(a,b,c){SVG.on(document,"DOMContentLoaded",function(){//grid
+t.entities.forEach(function(a){return a.remove()}),t.entities=[],t.lines.children().forEach(function(a){return a.remove()}),w=[],t.grid.x.forEach(function(a){return a.line.remove()}),t.grid.y.forEach(function(){return x.line.remove()}),t.grid={x:[],y:[]},v.forEach(function(a){return a.remove()}),v=[],u.labels||(u.labels=[]),u.labels=u.labels.map(function(a){return{id:a.id,value:a.value?a.value:"",x:a.x?a.x:0,y:a.y?a.y:0,color:a.color?a.color:"black"}}),u.configuration||(u.configuration={}),u.configuration.read_only=!!u.configuration.read_only&&u.configuration.read_only,u.configuration.line_color=u.configuration.line_color?u.configuration.line_color:"#000000",u.configuration.arrow_type=u.configuration.arrow_type?u.configuration.arrow_type:"default",u.configuration.grid_type=u.configuration.grid_type?u.configuration.grid_type:"dynamic",u.configuration.grid_x=u.configuration.grid_x&&0<u.configuration.grid_x.length?u.configuration.grid_x.map(function(a){return{value:a.value?a.value:0,width:a.width?a.width:1,color:a.color?a.color:"black"}}):[],u.configuration.grid_y=u.configuration.grid_y&&0<u.configuration.grid_y.length?u.configuration.grid_y.map(function(a){return{value:a.value?a.value:0,width:a.width?a.width:1,color:a.color?a.color:"black"}}):[],u.entities.map(function(a){a.type=a.type?a.type:"entity","operation"===a.type&&(a.height=a.width)}),b(),c(),u.entities.forEach(function(b){return a(t,b)}),w=n(u.lines),f(t,w)}function p(a,b){null!==z[a]&&z[a]!==void 0&&z[a].forEach(function(a){return a(b)})}function q(a){var b="";return a&&a.target&&a.target.parentElement&&(b=a.target.parentElement.id),b}function r(a){u=n(a),y?o():SVG.on(document,"DOMContentLoaded",function(){o(),y=!0})}function s(){return u}var t,u={entities:[]},v=[],w=[],y=!1,z={};return{initalize:function(a,b,c){SVG.on(document,"DOMContentLoaded",function(){//grid
 t=SVG().addTo(a).size(b,c),t.gridGroup=t.group(),t.grid={x:[],y:[]},t.entities=[],t.lines=t.group(),t.labels=t.group()})},update:r,register:function(a,b){(null===z[a]||z[a]===void 0)&&(z[a]=[]),z[a].push(b)},get:s}},_module=_module||{};_module.exports=WorkflowSVG;

package.json

 {
   "name": "workflow-svg.js",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "./dist/workflow-svg.minified.js",

README.md

@@ -60,8 +60,8 @@ # workflow-svg.js
 |text| string | Text of the entity |
-|displaytype| string | Type of entity. Default is 'entity'. For workflow operations use: 'operation' |
+|type| string | Type of entity. Default is 'entity'. For workflow operations use: 'operation' |
 |x| integer | X coordinate of the entity |
 |y| integer | Y coordinate of the entity |
-|backgroundcolor| string(hex) | Background Color of the entity|
+|background_color| string(hex) | Background Color of the entity|
 |color| string(hex) | Font Color of the entity |
-|faicon|string|Class Name for Font Awesome 4 or 5 (they have to be imported separately, Firefox is not supported yet)|
+|fa_unicode|string|Unicode for FontAwesome Icon (note: don't forget to specify which version of FontAwesome you use - see )|
 |radius| integer| Radius of the corners of the entity |
@@ -97,3 +97,4 @@ |class|string|Class Name for css styling|
 | arrow_type | 'default' or 'none'| At the moment there are only two arrow type: default or none| 'default'|
-| readonly | boolean |If true, the chart will be readonly| false |
+| read_only | boolean |If true, the chart will be read_only| false |
+| font_awesome | integer | Version of Font Awesome that you want to use: 4 or 5 are allowed | undefined |
 | grid_type | 'static' or 'dynamic' | If 'static' - grid lines will always be shown. Otherwise the grid line will only be shown if the dragged entity is near enough -tjis is called 'dynamic'. | 'dynamic' |
@@ -104,1 +105,8 @@ | grid_x | array | Array of objects <br> - 'value': the x coordinate of the line <br> - 'width': width of the line <br> - 'color': color of the line | [] |
 The configuration is completely optional. All non-existent values ​​are set automatically.
+
+## Use [FontAwesome](https://fontawesome.com/) icons
+workflow-svg.js support [FontAwesome](https://fontawesome.com/) Icons in Version 4 and 5. What you need to do:
+* import FontAwesome CSS, e.g.: `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css">`
+* provide in the JSON (see chapter above) in the config part `font_awesome: 5` (or 4 if you imported version 4)
+* add on the entities the unicode of the FontAwesome Icon you want to use, e.g.: `fa_unicode:'f256'`
+  

src/workflow-svg.js

@@ -33,3 +33,3 @@ var WorkflowSVG = (function () {
         //assginment and default values for entities
-        entity.backgroundcolor = entity.backgroundcolor ? entity.backgroundcolor : '#f06';
+        entity.background_color = entity.background_color ? entity.background_color : '#f06';
         entity.color = entity.color ? entity.color : '#ffffff';
@@ -44,8 +44,8 @@ entity.radius = entity.radius ? entity.radius : 0;
             .cy((entity.height/2))
-            .attr({ fill: entity.backgroundcolor })
+            .attr({ fill: entity.background_color })
             .radius(entity.radius);
 
-        group.entity.displaytype = entity.displaytype;
+        group.entity.type = entity.type;
 
-        if(entity.displaytype==='operation'){
+        if(entity.type==='operation'){
             group.entity.transform({'rotate': 45, origin: 'center center'});
@@ -58,20 +58,30 @@ }
 
-        var text = group.text(entity.text)
+        var text = group.plain(entity.text)
             .cx((entity.width/2))
             .cy(entity.height/2)
-            .attr({ fill: entity.color})
-            .font({
-                family: 'Helvetica'
-            });
+            .attr({ fill: entity.color});
 
-        if(entity.faicon && entity.faicon.length>0){
+        if(entity.fa_unicode && entity.fa_unicode.length>0){
             text.dx(10);
-
-            group.foreignObject(20, 20)
+                
+            group.icon = group.plain()
                 .cy(entity.height/2)
                 .x( entity.text.length>0 ? text.x()-20 : (entity.height/2)-10)
-                .add(SVG('<i class="'+entity.faicon+'" style="color:'+entity.color+'"></i>'));     
-        }
+                .attr({ fill: entity.color});
 
+            if(_json.configuration.font_awesome == 4){
+                group.icon.font({
+                    family: 'font_awesome'
+                });
+            }
+    
+            if(_json.configuration.font_awesome == 5){
+                group.icon.font({
+                    family: '"Font Awesome 5 Free"'
+                });
+            }
 
+            var faContentCode = entity.fa_unicode.startsWith('&#x') ? entity.fa_unicode : '&#x'+entity.fa_unicode+';';
+            group.icon.node.innerHTML = faContentCode;
+        }
 
@@ -85,3 +95,3 @@ group.arrows = group.group();
 
-        if(entity.displaytype==='operation'){
+        if(entity.type==='operation'){
             hoverArea.transform({'rotate': 45});
@@ -98,3 +108,3 @@ }
 
-        if(!_json.configuration.readonly){
+        if(!_json.configuration.read_only){
             draggableElement.draggable()
@@ -171,3 +181,2 @@ .on('dragmove.namespace', (e) => {
         group.move(entity.x-MARGIN, entity.y-MARGIN);
-
     }
@@ -217,3 +226,3 @@
                 var label = _draw.labels.text(l.value).x(l.x).y(l.y);
-                if(_json.configuration.readonly!=true){
+                if(_json.configuration.read_only!=true){
                     label
@@ -413,3 +422,3 @@ .attr({'cursor': 'move', 'fill': l.color})
             if(line.from.point === 'top' ){
-                if(y1 <= y2){
+                if(y1 < (y2+20)){
                     pointsInBetween.push({x: x1, y:y1-20});
@@ -431,3 +440,3 @@
             if(line.from.point === 'bottom'){
-                if(y1 >= y2){
+                if(y1 > (y2-20)){
                     pointsInBetween.push({x: x1, y:y1+20});
@@ -448,3 +457,3 @@ if(line.to.point === 'left'){
             if(line.from.point === 'left'){
-                if(y1 > y2){
+                if(y1 > (y2-20)){
                     if(line.to.point === 'top'){
@@ -470,3 +479,3 @@ pointsInBetween.push({x: x1-20,  y:y1});
             if(line.from.point === 'right'){
-                if(y1 > y2){
+                if(y1 > (y2-20)){
                     if(line.to.point === 'top'){
@@ -505,3 +514,3 @@ pointsInBetween.push({x: x1+20,  y:y1});
     function _calculateX(group, position){
-        var width = (group.entity.displaytype==='operation') ? _pythagorean(group.entity.attr('width'), group.entity.attr('height')) : group.entity.attr('width');
+        var width = (group.entity.type==='operation') ? _pythagorean(group.entity.attr('width'), group.entity.attr('height')) : group.entity.attr('width');
 
@@ -520,3 +529,3 @@ switch(position){
     function _calculateY(group, position){
-        var height = (group.entity.displaytype==='operation') ? _pythagorean(group.entity.attr('width'), group.entity.attr('height')) : group.entity.attr('height');
+        var height = (group.entity.type==='operation') ? _pythagorean(group.entity.attr('width'), group.entity.attr('height')) : group.entity.attr('height');
 
@@ -579,3 +588,3 @@ switch(position){
 
-        _json.configuration.readonly = _json.configuration.readonly ? _json.configuration.readonly  : false; 
+        _json.configuration.read_only = _json.configuration.read_only ? _json.configuration.read_only  : false; 
         _json.configuration.line_color = _json.configuration.line_color ? _json.configuration.line_color : '#000000';
@@ -606,5 +615,5 @@ _json.configuration.arrow_type = _json.configuration.arrow_type ? _json.configuration.arrow_type : 'default';
         _json.entities.map(entity => {
-            entity.displaytype = entity.displaytype ? entity.displaytype: 'entity';
+            entity.type = entity.type ? entity.type: 'entity';
 
-            if(entity.displaytype==='operation'){
+            if(entity.type==='operation'){
                 entity.height = entity.width;
@@ -611,0 +620,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

68270

increased by2.29%

Lines of code

1203

increased by1.6%

Number of lines in readme file

110

increased by7.84%

No dependency changes