cytoscape - npm Package Compare versions

Comparing version 3.5.6 to 3.6.0

.size-snapshot.json

 {
   "build/cytoscape.umd.js": {
-    "bundled": 899745,
-    "minified": 333140,
-    "gzipped": 103676
+    "bundled": 906680,
+    "minified": 334394,
+    "gzipped": 103934
   },
   "build/cytoscape.cjs.js": {
-    "bundled": 828963,
-    "minified": 350400,
-    "gzipped": 105733
+    "bundled": 835122,
+    "minified": 354595,
+    "gzipped": 106753
   },
   "build/cytoscape.esm.js": {
-    "bundled": 828790,
-    "minified": 350257,
-    "gzipped": 105693,
+    "bundled": 834949,
+    "minified": 354452,
+    "gzipped": 106720,
     "treeshaked": {
       "rollup": {
-        "code": 327836,
+        "code": 328943,
         "import_statements": 51
       },
       "webpack": {
-        "code": 329703
+        "code": 330951
       }
@@ -24,0 +24,0 @@ }

package.json

 {
   "name": "cytoscape",
-  "version": "3.5.6",
+  "version": "3.6.0",
   "license": "MIT",
@@ -81,3 +81,4 @@ "description": "Graph theory (a.k.a. network) library for analysis and visualisation",
     "dist": "cross-env NODE_ENV=production run-s build dist:*",
-    "release": "run-s copyright dist",
+    "release": "run-s copyright dist docs",
+    "postpublish": "run-s docs:push",
     "watch": "run-s watch:fast",
@@ -116,3 +117,3 @@ "watch:sync": "livereload \"build, debug\"",
     "download-cli": "^1.0.5",
-    "eslint": "^5.5.0",
+    "eslint": "^5.16.0",
     "esm": "^3.0.8",
@@ -126,6 +127,6 @@ "gh-pages": "^2.0.1",
     "marked": "^0.6.0",
-    "mocha": "^6.0.2",
+    "mocha": "^6.1.2",
     "npm-run-all": "^4.1.5",
     "rimraf": "^2.6.2",
-    "rollup": "^1.1.0",
+    "rollup": "^1.10.1",
     "rollup-plugin-babel": "^4.3.0",
@@ -132,0 +133,0 @@ "rollup-plugin-commonjs": "^9.1.0",

src/collection/index.js

@@ -83,3 +83,3 @@ import * as util from '../util';
   for( let i = 0, l = elements.length; i < l; i++ ){
-    let element = elements[ i ];
+    let element = elements[i][0]; // [0] in case elements is an array of collections, rather than array of elements
     if( element == null ){  continue; }
@@ -86,0 +86,0 @@

src/extensions/renderer/base/coord-ele-math/labels.js

@@ -5,19 +5,19 @@ import * as math from '../../../../math';
 
-var BRp = {};
+let BRp = {};
 
 BRp.recalculateNodeLabelProjection = function( node ){
-  var content = node.pstyle( 'label' ).strValue;
+  let content = node.pstyle( 'label' ).strValue;
 
   if( is.emptyString(content) ){ return; }
 
-  var textX, textY;
-  var _p = node._private;
-  var nodeWidth = node.width();
-  var nodeHeight = node.height();
-  var padding = node.padding();
-  var nodePos = node.position();
-  var textHalign = node.pstyle( 'text-halign' ).strValue;
-  var textValign = node.pstyle( 'text-valign' ).strValue;
-  var rs = _p.rscratch;
-  var rstyle = _p.rstyle;
+  let textX, textY;
+  let _p = node._private;
+  let nodeWidth = node.width();
+  let nodeHeight = node.height();
+  let padding = node.padding();
+  let nodePos = node.position();
+  let textHalign = node.pstyle( 'text-halign' ).strValue;
+  let textValign = node.pstyle( 'text-valign' ).strValue;
+  let rs = _p.rscratch;
+  let rstyle = _p.rstyle;
 
@@ -58,4 +58,4 @@ switch( textHalign ){
 
-var lineAngleFromDelta = function( dx, dy ){
-  var angle = Math.atan( dy / dx );
+let lineAngleFromDelta = function( dx, dy ){
+  let angle = Math.atan( dy / dx );
 
@@ -69,5 +69,5 @@ if( dx === 0 && angle < 0 ){
 
-var lineAngle = function( p0, p1 ){
-  var dx = p1.x - p0.x;
-  var dy = p1.y - p0.y;
+let lineAngle = function( p0, p1 ){
+  let dx = p1.x - p0.x;
+  let dy = p1.y - p0.y;
 
@@ -77,8 +77,8 @@ return lineAngleFromDelta( dx, dy );
 
-var bezierAngle = function( p0, p1, p2, t ){
-  var t0 = math.bound( 0, t - 0.001, 1 );
-  var t1 = math.bound( 0, t + 0.001, 1 );
+let bezierAngle = function( p0, p1, p2, t ){
+  let t0 = math.bound( 0, t - 0.001, 1 );
+  let t1 = math.bound( 0, t + 0.001, 1 );
 
-  var lp0 = math.qbezierPtAt( p0, p1, p2, t0 );
-  var lp1 = math.qbezierPtAt( p0, p1, p2, t1 );
+  let lp0 = math.qbezierPtAt( p0, p1, p2, t0 );
+  let lp1 = math.qbezierPtAt( p0, p1, p2, t1 );
 
@@ -89,7 +89,7 @@ return lineAngle( lp0, lp1 );
 BRp.recalculateEdgeLabelProjections = function( edge ){
-  var p;
-  var _p = edge._private;
-  var rs = _p.rscratch;
-  var r = this;
-  var content = {
+  let p;
+  let _p = edge._private;
+  let rs = _p.rscratch;
+  let r = this;
+  let content = {
     mid: edge.pstyle('label').strValue,
@@ -113,3 +113,3 @@ source: edge.pstyle('source-label').strValue,
 
-  var setRs = function( propName, prefix, value ){
+  let setRs = function( propName, prefix, value ){
     util.setPrefixedProperty( _p.rscratch, propName, prefix, value );
@@ -122,15 +122,15 @@ util.setPrefixedProperty( _p.rstyle, propName, prefix, value );
 
-  var midAngle = lineAngleFromDelta(rs.midDispX, rs.midDispY);
+  let midAngle = lineAngleFromDelta(rs.midDispX, rs.midDispY);
   setRs( 'labelAutoAngle', null, midAngle );
 
-  var createControlPointInfo = function(){
+  let createControlPointInfo = function(){
     if( createControlPointInfo.cache ){ return createControlPointInfo.cache; } // use cache so only 1x per edge
 
-    var ctrlpts = [];
+    let ctrlpts = [];
 
     // store each ctrlpt info init
-    for( var i = 0; i + 5 < rs.allpts.length; i += 4 ){
-      var p0 = { x: rs.allpts[i], y: rs.allpts[i+1] };
-      var p1 = { x: rs.allpts[i+2], y: rs.allpts[i+3] }; // ctrlpt
-      var p2 = { x: rs.allpts[i+4], y: rs.allpts[i+5] };
+    for( let i = 0; i + 5 < rs.allpts.length; i += 4 ){
+      let p0 = { x: rs.allpts[i], y: rs.allpts[i+1] };
+      let p1 = { x: rs.allpts[i+2], y: rs.allpts[i+3] }; // ctrlpt
+      let p2 = { x: rs.allpts[i+4], y: rs.allpts[i+5] };
 
@@ -147,9 +147,9 @@ ctrlpts.push({
 
-    var bpts = _p.rstyle.bezierPts;
-    var nProjs = r.bezierProjPcts.length;
+    let bpts = _p.rstyle.bezierPts;
+    let nProjs = r.bezierProjPcts.length;
 
     function addSegment( cp, p0, p1, t0, t1 ){
-      var length = math.dist( p0, p1 );
-      var prevSegment = cp.segments[ cp.segments.length - 1 ];
-      var segment = {
+      let length = math.dist( p0, p1 );
+      let prevSegment = cp.segments[ cp.segments.length - 1 ];
+      let segment = {
         p0: p0,
@@ -169,5 +169,5 @@ p1: p1,
     // update each ctrlpt with segment info
-    for( var i = 0; i < ctrlpts.length; i++ ){
-      var cp = ctrlpts[i];
-      var prevCp = ctrlpts[i - 1];
+    for( let i = 0; i < ctrlpts.length; i++ ){
+      let cp = ctrlpts[i];
+      let prevCp = ctrlpts[i - 1];
 
@@ -184,3 +184,3 @@ if( prevCp ){
 
-      for( var j = 0; j < nProjs - 1; j++ ){
+      for( let j = 0; j < nProjs - 1; j++ ){
         addSegment(
@@ -203,9 +203,9 @@ cp,
 
-  var calculateEndProjection = function( prefix ){
-    var angle;
-    var isSrc = prefix === 'source';
+  let calculateEndProjection = function( prefix ){
+    let angle;
+    let isSrc = prefix === 'source';
 
     if( !content[ prefix ] ){ return; }
 
-    var offset = edge.pstyle(prefix+'-text-offset').pfValue;
+    let offset = edge.pstyle(prefix+'-text-offset').pfValue;
 
@@ -216,15 +216,15 @@ switch( rs.edgeType ){
       case 'bezier':
-      case 'multibezier':
-        var cps = createControlPointInfo();
-        var selected;
-        var startDist = 0;
-        var totalDist = 0;
+      case 'multibezier': {
+        let cps = createControlPointInfo();
+        let selected;
+        let startDist = 0;
+        let totalDist = 0;
 
         // find the segment we're on
-        for( var i = 0; i < cps.length; i++ ){
-          var cp = cps[ isSrc ? i : cps.length - 1 - i ];
+        for( let i = 0; i < cps.length; i++ ){
+          let cp = cps[ isSrc ? i : cps.length - 1 - i ];
 
-          for( var j = 0; j < cp.segments.length; j++ ){
-            var seg = cp.segments[ isSrc ? j : cp.segments.length - 1 - j ];
-            var lastSeg = i === cps.length - 1 && j === cp.segments.length - 1;
+          for( let j = 0; j < cp.segments.length; j++ ){
+            let seg = cp.segments[ isSrc ? j : cp.segments.length - 1 - j ];
+            let lastSeg = i === cps.length - 1 && j === cp.segments.length - 1;
 
@@ -243,7 +243,7 @@ startDist = totalDist;
 
-        var cp = selected.cp;
-        var seg = selected.segment;
-        var tSegment = ( offset - startDist ) / ( seg.length );
-        var segDt = seg.t1 - seg.t0;
-        var t = isSrc ? seg.t0 + segDt * tSegment : seg.t1 - segDt * tSegment;
+        let cp = selected.cp;
+        let seg = selected.segment;
+        let tSegment = ( offset - startDist ) / ( seg.length );
+        let segDt = seg.t1 - seg.t0;
+        let t = isSrc ? seg.t0 + segDt * tSegment : seg.t1 - segDt * tSegment;
 
@@ -255,11 +255,11 @@ t = math.bound( 0, t, 1 );
         break;
-
+      }
       case 'straight':
       case 'segments':
-      case 'haystack':
-        var d = 0, di, d0;
-        var p0, p1;
-        var l = rs.allpts.length;
+      case 'haystack': {
+        let d = 0, di, d0;
+        let p0, p1;
+        let l = rs.allpts.length;
 
-        for( var i = 0; i + 3 < l; i += 2 ){
+        for( let i = 0; i + 3 < l; i += 2 ){
           if( isSrc ){
@@ -280,4 +280,4 @@ p0 = { x: rs.allpts[i],     y: rs.allpts[i+1] };
 
-        var pD = offset - d0;
-        var t = pD / di;
+        let pD = offset - d0;
+        let t = pD / di;
 
@@ -289,2 +289,3 @@ t  = math.bound( 0, t, 1 );
         break;
+      }
     }
@@ -313,20 +314,30 @@
 BRp.applyPrefixedLabelDimensions = function( ele, prefix ){
-  var _p = ele._private;
+  let _p = ele._private;
 
-  var text = this.getLabelText( ele, prefix );
-  var labelDims = this.calculateLabelDimensions( ele, text );
+  let text = this.getLabelText( ele, prefix );
+  let labelDims = this.calculateLabelDimensions( ele, text );
+  let lineHeight = ele.pstyle('line-height').pfValue;
+  let textWrap = ele.pstyle('text-wrap').strValue;
+  let numLines = textWrap !== 'wrap' ? 1 : (util.getPrefixedProperty( _p.rscratch, 'labelWrapCachedLines', prefix ).length || 1);
+  let normPerLineHeight = labelDims.height / numLines;
+  let labelLineHeight = normPerLineHeight * lineHeight;
 
-  util.setPrefixedProperty( _p.rstyle,   'labelWidth', prefix, labelDims.width );
-  util.setPrefixedProperty( _p.rscratch, 'labelWidth', prefix, labelDims.width );
+  let width = labelDims.width;
+  let height = labelDims.height + (numLines - 1) * (lineHeight - 1) * normPerLineHeight;
 
-  util.setPrefixedProperty( _p.rstyle,   'labelHeight', prefix, labelDims.height );
-  util.setPrefixedProperty( _p.rscratch, 'labelHeight', prefix, labelDims.height );
+  util.setPrefixedProperty( _p.rstyle,   'labelWidth', prefix, width );
+  util.setPrefixedProperty( _p.rscratch, 'labelWidth', prefix, width );
+
+  util.setPrefixedProperty( _p.rstyle,   'labelHeight', prefix, height );
+  util.setPrefixedProperty( _p.rscratch, 'labelHeight', prefix, height );
+
+  _p.rscratch.labelLineHeight = labelLineHeight;
 };
 
 BRp.getLabelText = function( ele, prefix ){
-  var _p = ele._private;
-  var pfd = prefix ? prefix + '-' : '';
-  var text = ele.pstyle( pfd + 'label' ).strValue;
-  var textTransform = ele.pstyle( 'text-transform' ).value;
-  var rscratch = function( propName, value ){
+  let _p = ele._private;
+  let pfd = prefix ? prefix + '-' : '';
+  let text = ele.pstyle( pfd + 'label' ).strValue;
+  let textTransform = ele.pstyle( 'text-transform' ).value;
+  let rscratch = function( propName, value ){
     if( value ){
@@ -351,40 +362,48 @@ util.setPrefixedProperty( _p.rscratch, propName, prefix, value );
 
-  var wrapStyle = ele.pstyle( 'text-wrap' ).value;
+  let wrapStyle = ele.pstyle( 'text-wrap' ).value;
 
   if( wrapStyle === 'wrap' ){
-    //console.log('wrap');
+    let labelKey = rscratch( 'labelKey' );
 
-    var labelKey = rscratch( 'labelKey' );
-
     // save recalc if the label is the same as before
     if( labelKey != null && rscratch( 'labelWrapKey' ) === labelKey ){
-      // console.log('wrap cache hit');
       return rscratch( 'labelWrapCachedText' );
     }
-    // console.log('wrap cache miss');
 
-    var lines = text.split( '\n' );
-    var maxW = ele.pstyle( 'text-max-width' ).pfValue;
-    var wrappedLines = [];
+    let zwsp = '\u200b';
+    let lines = text.split('\n');
+    let maxW = ele.pstyle('text-max-width').pfValue;
+    let overflow = ele.pstyle('text-overflow-wrap').value;
+    let overflowAny = overflow === 'anywhere';
+    let wrappedLines = [];
+    let wordsRegex = /[\s\u200b]+/;
+    let wordSeparator = overflowAny ? '' : ' ';
 
-    for( var l = 0; l < lines.length; l++ ){
-      var line = lines[ l ];
-      var lineDims = this.calculateLabelDimensions( ele, line );
-      var lineW = lineDims.width;
+    for( let l = 0; l < lines.length; l++ ){
+      let line = lines[ l ];
 
+      let lineDims = this.calculateLabelDimensions( ele, line );
+      let lineW = lineDims.width;
+
+      if( overflowAny ){
+        let processedLine = line.split('').join(zwsp);
+
+        line = processedLine;
+      }
+
       if( lineW > maxW ){ // line is too long
-        var words = line.split( /\s+/ ); // NB: assume collapsed whitespace into single space
-        var subline = '';
+        let words = line.split(wordsRegex);
+        let subline = '';
 
-        for( var w = 0; w < words.length; w++ ){
-          var word = words[ w ];
-          var testLine = subline.length === 0 ? word : subline + ' ' + word;
-          var testDims = this.calculateLabelDimensions( ele, testLine );
-          var testW = testDims.width;
+        for( let w = 0; w < words.length; w++ ){
+          let word = words[ w ];
+          let testLine = subline.length === 0 ? word : subline + wordSeparator + word;
+          let testDims = this.calculateLabelDimensions( ele, testLine );
+          let testW = testDims.width;
 
           if( testW <= maxW ){ // word fits on current line
-            subline += word + ' ';
+            subline += word + wordSeparator;
           } else { // word starts new line
             wrappedLines.push( subline );
-            subline = word + ' ';
+            subline = word + wordSeparator;
           }
@@ -394,3 +413,3 @@ }
         // if there's remaining text, put it in a wrapped line
-        if( !subline.match( /^\s+$/ ) ){
+        if( !subline.match( /^[\s\u200b]+$/ ) ){
           wrappedLines.push( subline );
@@ -407,11 +426,10 @@ }
 
-    // console.log(text)
   } else if( wrapStyle === 'ellipsis' ){
-    var maxW = ele.pstyle( 'text-max-width' ).pfValue;
-    var ellipsized = '';
-    var ellipsis = '\u2026';
-    var incLastCh = false;
+    let maxW = ele.pstyle( 'text-max-width' ).pfValue;
+    let ellipsized = '';
+    let ellipsis = '\u2026';
+    let incLastCh = false;
 
-    for( var i = 0; i < text.length; i++ ){
-      var widthWithNextCh = this.calculateLabelDimensions( ele, ellipsized + text[i] + ellipsis ).width;
+    for( let i = 0; i < text.length; i++ ){
+      let widthWithNextCh = this.calculateLabelDimensions( ele, ellipsized + text[i] + ellipsis ).width;
 
@@ -435,10 +453,32 @@ if( widthWithNextCh > maxW ){ break; }
 
+BRp.getLabelJustification = function(ele){
+  let justification = ele.pstyle('text-justification').strValue;
+  let textHalign = ele.pstyle('text-halign').strValue;
+
+  if( justification === 'auto' ){
+    if( ele.isNode() ){
+      switch( textHalign ){
+        case 'left':
+          return 'right';
+        case 'right':
+          return 'left';
+        default:
+          return 'center';
+      }
+    } else {
+      return 'center';
+    }
+  } else {
+    return justification;
+  }
+};
+
 BRp.calculateLabelDimensions = function( ele, text ){
-  var r = this;
+  let r = this;
 
-  var cacheKey = util.hashString( text, ele._private.labelDimsKey );
+  let cacheKey = util.hashString( text, ele._private.labelDimsKey );
 
-  var cache = r.labelDimCache || (r.labelDimCache = []);
+  let cache = r.labelDimCache || (r.labelDimCache = []);
 
-  var existingVal = cache[ cacheKey ];
+  let existingVal = cache[ cacheKey ];
 
@@ -449,9 +489,9 @@ if( existingVal != null ){
 
-  var sizeMult = 1; // increase the scale to increase accuracy w.r.t. zoomed text
-  var fStyle = ele.pstyle( 'font-style' ).strValue;
-  var size = ( sizeMult * ele.pstyle( 'font-size' ).pfValue ) + 'px';
-  var family = ele.pstyle( 'font-family' ).strValue;
-  var weight = ele.pstyle( 'font-weight' ).strValue;
+  let sizeMult = 1; // increase the scale to increase accuracy w.r.t. zoomed text
+  let fStyle = ele.pstyle('font-style').strValue;
+  let size = (sizeMult * ele.pstyle('font-size').pfValue) + 'px';
+  let family = ele.pstyle('font-family').strValue;
+  let weight = ele.pstyle('font-weight').strValue;
 
-  var div = this.labelCalcDiv;
+  let div = this.labelCalcDiv;
 
@@ -463,3 +503,3 @@ if( !div ){
 
-  var ds = div.style;
+  let ds = div.style;
 
@@ -499,8 +539,8 @@ // from ele style
 BRp.calculateLabelAngle = function( ele, prefix ){
-  var _p = ele._private;
-  var rs = _p.rscratch;
-  var isEdge = ele.isEdge();
-  var prefixDash = prefix ? prefix + '-' : '';
-  var rot = ele.pstyle( prefixDash + 'text-rotation' );
-  var rotStr = rot.strValue;
+  let _p = ele._private;
+  let rs = _p.rscratch;
+  let isEdge = ele.isEdge();
+  let prefixDash = prefix ? prefix + '-' : '';
+  let rot = ele.pstyle( prefixDash + 'text-rotation' );
+  let rotStr = rot.strValue;
 
@@ -519,6 +559,6 @@ if( rotStr === 'none' ){
 BRp.calculateLabelAngles = function( ele ){
-  var r = this;
-  var isEdge = ele.isEdge();
-  var _p = ele._private;
-  var rs = _p.rscratch;
+  let r = this;
+  let isEdge = ele.isEdge();
+  let _p = ele._private;
+  let rs = _p.rscratch;
 
@@ -525,0 +565,0 @@ rs.labelAngle = r.calculateLabelAngle(ele);

src/extensions/renderer/canvas/drawing-label-text.js

 import * as util from '../../../util';
 import * as math from '../../../math';
 
-var CRp = {};
+let CRp = {};
 
 CRp.eleTextBiggerThanMin = function( ele, scale ){
   if( !scale ){
-    var zoom = ele.cy().zoom();
-    var pxRatio = this.getPixelRatio();
-    var lvl = Math.ceil( math.log2( zoom * pxRatio ) ); // the effective texture level
+    let zoom = ele.cy().zoom();
+    let pxRatio = this.getPixelRatio();
+    let lvl = Math.ceil( math.log2( zoom * pxRatio ) ); // the effective texture level
 
@@ -15,4 +15,4 @@ scale = Math.pow( 2, lvl );
 
-  var computedSize = ele.pstyle( 'font-size' ).pfValue * scale;
-  var minSize = ele.pstyle( 'min-zoomed-font-size' ).pfValue;
+  let computedSize = ele.pstyle( 'font-size' ).pfValue * scale;
+  let minSize = ele.pstyle( 'min-zoomed-font-size' ).pfValue;
 
@@ -27,3 +27,3 @@ if( computedSize < minSize ){
 CRp.drawElementText = function( context, ele, shiftToOriginWithBb, force, prefix, useEleOpacity = true ){
-  var r = this;
+  let r = this;
 
@@ -37,26 +37,14 @@ if( force == null ){
   if( ele.isNode() ){
-    var label = ele.pstyle( 'label' );
+    let label = ele.pstyle( 'label' );
 
     if( !label || !label.value ){ return; }
 
-    var textHalign = ele.pstyle( 'text-halign' ).strValue;
+    let justification = r.getLabelJustification(ele);
 
-    switch( textHalign ){
-      case 'left':
-        context.textAlign = 'right';
-        break;
-
-      case 'right':
-        context.textAlign = 'left';
-        break;
-
-      default: // e.g. center
-        context.textAlign = 'center';
-    }
-
+    context.textAlign = justification;
     context.textBaseline = 'bottom';
   } else {
-    var label = ele.pstyle( 'label' );
-    var srcLabel = ele.pstyle( 'source-label' );
-    var tgtLabel = ele.pstyle( 'target-label' );
+    let label = ele.pstyle( 'label' );
+    let srcLabel = ele.pstyle( 'source-label' );
+    let tgtLabel = ele.pstyle( 'target-label' );
 
@@ -102,7 +90,7 @@ if(
 CRp.getFontCache = function( context ){
-  var cache;
+  let cache;
 
   this.fontCaches = this.fontCaches || [];
 
-  for( var i = 0; i < this.fontCaches.length; i++ ){
+  for( let i = 0; i < this.fontCaches.length; i++ ){
     cache = this.fontCaches[ i ];
@@ -127,10 +115,10 @@
   // Font style
-  var labelStyle = ele.pstyle( 'font-style' ).strValue;
-  var labelSize = ele.pstyle( 'font-size' ).pfValue + 'px';
-  var labelFamily = ele.pstyle( 'font-family' ).strValue;
-  var labelWeight = ele.pstyle( 'font-weight' ).strValue;
-  var opacity = ele.pstyle('text-opacity').value * (useEleOpacity ? ele.effectiveOpacity() : 1);
-  var outlineOpacity = ele.pstyle( 'text-outline-opacity' ).value * opacity;
-  var color = ele.pstyle( 'color' ).value;
-  var outlineColor = ele.pstyle( 'text-outline-color' ).value;
+  let labelStyle = ele.pstyle( 'font-style' ).strValue;
+  let labelSize = ele.pstyle( 'font-size' ).pfValue + 'px';
+  let labelFamily = ele.pstyle( 'font-family' ).strValue;
+  let labelWeight = ele.pstyle( 'font-weight' ).strValue;
+  let opacity = ele.pstyle('text-opacity').value * (useEleOpacity ? ele.effectiveOpacity() : 1);
+  let outlineOpacity = ele.pstyle( 'text-outline-opacity' ).value * opacity;
+  let color = ele.pstyle( 'color' ).value;
+  let outlineColor = ele.pstyle( 'text-outline-color' ).value;
 
@@ -147,4 +135,3 @@ context.font = labelStyle + ' ' + labelWeight + ' ' + labelSize + ' ' + labelFamily;
 // TODO ensure re-used
-function roundRect( ctx, x, y, width, height, radius ){
-  var radius = radius || 5;
+function roundRect( ctx, x, y, width, height, radius = 5 ){
   ctx.beginPath();
@@ -169,3 +156,3 @@ ctx.moveTo( x + radius, y );
   let pdash = prefix ? prefix + '-' : '';
-  var rotation = ele.pstyle( pdash + 'text-rotation' );
+  let rotation = ele.pstyle( pdash + 'text-rotation' );
   let textAngle = util.getPrefixedProperty( rscratch, 'labelAngle', prefix );
@@ -185,5 +172,5 @@
 CRp.drawText = function( context, ele, prefix, applyRotation = true, useEleOpacity = true ){
-  var _p = ele._private;
-  var rscratch = _p.rscratch;
-  var parentOpacity = useEleOpacity ? ele.effectiveOpacity() : 1;
+  let _p = ele._private;
+  let rscratch = _p.rscratch;
+  let parentOpacity = useEleOpacity ? ele.effectiveOpacity() : 1;
 
@@ -197,5 +184,6 @@ if( parentOpacity === 0 || ele.pstyle( 'text-opacity' ).value === 0 ){
 
-  var textX = util.getPrefixedProperty( rscratch, 'labelX', prefix );
-  var textY = util.getPrefixedProperty( rscratch, 'labelY', prefix );
-  var text = this.getLabelText( ele, prefix );
+  let textX = util.getPrefixedProperty( rscratch, 'labelX', prefix );
+  let textY = util.getPrefixedProperty( rscratch, 'labelY', prefix );
+  let orgTextX, orgTextY; // used for rotation
+  let text = this.getLabelText( ele, prefix );
 
@@ -205,12 +193,12 @@ if( text != null && text !== '' && !isNaN( textX ) && !isNaN( textY ) ){
 
-    var pdash = prefix ? prefix + '-' : '';
-    var textW = util.getPrefixedProperty( rscratch, 'labelWidth', prefix );
-    var textH = util.getPrefixedProperty( rscratch, 'labelHeight', prefix );
-    var marginX = ele.pstyle( pdash + 'text-margin-x' ).pfValue;
-    var marginY = ele.pstyle( pdash + 'text-margin-y' ).pfValue;
+    let pdash = prefix ? prefix + '-' : '';
+    let textW = util.getPrefixedProperty( rscratch, 'labelWidth', prefix );
+    let textH = util.getPrefixedProperty( rscratch, 'labelHeight', prefix );
+    let marginX = ele.pstyle( pdash + 'text-margin-x' ).pfValue;
+    let marginY = ele.pstyle( pdash + 'text-margin-y' ).pfValue;
 
-    var isEdge = ele.isEdge();
+    let isEdge = ele.isEdge();
 
-    var halign = ele.pstyle( 'text-halign' ).value;
-    var valign = ele.pstyle( 'text-valign' ).value;
+    let halign = ele.pstyle( 'text-halign' ).value;
+    let valign = ele.pstyle( 'text-valign' ).value;
 
@@ -225,3 +213,3 @@ if( isEdge ){
 
-    var theta;
+    let theta;
 
@@ -235,4 +223,4 @@ if( !applyRotation ){
     if( theta !== 0 ){
-      var orgTextX = textX;
-      var orgTextY = textY;
+      orgTextX = textX;
+      orgTextY = textY;
 
@@ -257,9 +245,9 @@ context.translate( orgTextX, orgTextY );
 
-    var backgroundOpacity = ele.pstyle( 'text-background-opacity' ).value;
-    var borderOpacity = ele.pstyle( 'text-border-opacity' ).value;
-    var textBorderWidth = ele.pstyle( 'text-border-width' ).pfValue;
-    var backgroundPadding = ele.pstyle( 'text-background-padding' ).pfValue;
+    let backgroundOpacity = ele.pstyle( 'text-background-opacity' ).value;
+    let borderOpacity = ele.pstyle( 'text-border-opacity' ).value;
+    let textBorderWidth = ele.pstyle( 'text-border-width' ).pfValue;
+    let backgroundPadding = ele.pstyle( 'text-background-padding' ).pfValue;
 
     if( backgroundOpacity > 0 || ( textBorderWidth > 0 && borderOpacity > 0 ) ){
-      var bgX = textX - backgroundPadding;
+      let bgX = textX - backgroundPadding;
 
@@ -277,12 +265,12 @@ switch( halign ){
 
-      var bgY = textY - textH - backgroundPadding;
-      var bgW = textW + 2*backgroundPadding;
-      var bgH = textH + 2*backgroundPadding;
+      let bgY = textY - textH - backgroundPadding;
+      let bgW = textW + 2*backgroundPadding;
+      let bgH = textH + 2*backgroundPadding;
 
       if( backgroundOpacity > 0 ){
-        var textFill = context.fillStyle;
-        var textBackgroundColor = ele.pstyle( 'text-background-color' ).value;
+        let textFill = context.fillStyle;
+        let textBackgroundColor = ele.pstyle( 'text-background-color' ).value;
 
         context.fillStyle = 'rgba(' + textBackgroundColor[ 0 ] + ',' + textBackgroundColor[ 1 ] + ',' + textBackgroundColor[ 2 ] + ',' + backgroundOpacity * parentOpacity + ')';
-        var styleShape = ele.pstyle( 'text-background-shape' ).strValue;
+        let styleShape = ele.pstyle( 'text-background-shape' ).strValue;
         if( styleShape == 'roundrectangle' ){
@@ -297,6 +285,6 @@ roundRect( context, bgX, bgY, bgW, bgH, 2 );
       if( textBorderWidth > 0 && borderOpacity > 0 ){
-        var textStroke = context.strokeStyle;
-        var textLineWidth = context.lineWidth;
-        var textBorderColor = ele.pstyle( 'text-border-color' ).value;
-        var textBorderStyle = ele.pstyle( 'text-border-style' ).value;
+        let textStroke = context.strokeStyle;
+        let textLineWidth = context.lineWidth;
+        let textBorderColor = ele.pstyle( 'text-border-color' ).value;
+        let textBorderStyle = ele.pstyle( 'text-border-style' ).value;
 
@@ -327,3 +315,3 @@ context.strokeStyle = 'rgba(' + textBorderColor[ 0 ] + ',' + textBorderColor[ 1 ] + ',' + textBorderColor[ 2 ] + ',' + borderOpacity * parentOpacity + ')';
         if( textBorderStyle === 'double' ){
-          var whiteWidth = textBorderWidth / 2;
+          let whiteWidth = textBorderWidth / 2;
 
@@ -342,3 +330,3 @@ context.strokeRect( bgX + whiteWidth, bgY + whiteWidth, bgW - whiteWidth * 2, bgH - whiteWidth * 2 );
 
-    var lineWidth = 2 * ele.pstyle( 'text-outline-width' ).pfValue; // *2 b/c the stroke is drawn centred on the middle
+    let lineWidth = 2 * ele.pstyle( 'text-outline-width' ).pfValue; // *2 b/c the stroke is drawn centred on the middle
 
@@ -350,5 +338,29 @@ if( lineWidth > 0 ){
     if( ele.pstyle( 'text-wrap' ).value === 'wrap' ){
-      var lines = util.getPrefixedProperty( rscratch, 'labelWrapCachedLines', prefix );
-      var lineHeight = textH / lines.length;
+      let lines = util.getPrefixedProperty( rscratch, 'labelWrapCachedLines', prefix );
+      let lineHeight = _p.rscratch.labelLineHeight;
+      let halfTextW = textW/2;
+      let justification = this.getLabelJustification(ele);
 
+      if( justification === 'auto' ){
+        // then it's already ok, so skip all the other ifs
+      } else if( halign === 'left' ){ // auto justification : right
+        if( justification === 'left' ){
+          textX += -textW;
+        } else if( justification === 'center' ){
+          textX += -halfTextW;
+        } // else same as auto
+      } else if( halign === 'center' ){ // auto justfication : center
+        if( justification === 'left' ){
+          textX += -halfTextW;
+        } else if( justification === 'right' ){
+          textX += halfTextW;
+        } // else same as auto
+      } else if( halign === 'right' ){ // auto justification : left
+        if( justification === 'center' ){
+          textX += halfTextW;
+        } else if( justification === 'right' ){
+          textX += textW;
+        } // else same as auto
+      }
+
       switch( valign ){
@@ -364,3 +376,3 @@ case 'top':
 
-      for( var l = 0; l < lines.length; l++ ){
+      for( let l = 0; l < lines.length; l++ ){
         if( lineWidth > 0 ){
@@ -367,0 +379,0 @@ context.strokeText( lines[ l ], textX, textY );

src/extensions/renderer/canvas/index.js

@@ -53,7 +53,7 @@ /*
 
-  var tapHlOff = '-webkit-tap-highlight-color: rgba(0,0,0,0);';
-
+  var tapHlOffAttr = '-webkit-tap-highlight-color';
+  var tapHlOffStyle = 'rgba(0,0,0,0)';
   r.data.canvasContainer = document.createElement( 'div' ); // eslint-disable-line no-undef
   var containerStyle = r.data.canvasContainer.style;
-  r.data.canvasContainer.setAttribute( 'style', tapHlOff );
+  r.data.canvasContainer.style[tapHlOffAttr] = tapHlOffStyle;
   containerStyle.position = 'relative';
@@ -65,5 +65,15 @@ containerStyle.zIndex = '0';
   container.appendChild( r.data.canvasContainer );
+  container.style[tapHlOffAttr] = tapHlOffStyle;
 
-  if( (container.getAttribute('style') || '').indexOf(tapHlOff) < 0 ){
-    container.setAttribute( 'style', ( container.getAttribute( 'style' ) || '' ) + tapHlOff );
+  var styleMap = {
+    '-webkit-user-select': 'none',
+    '-moz-user-select': '-moz-none',
+    'user-select': 'none',
+    '-webkit-tap-highlight-color': 'rgba(0,0,0,0)',
+    'outline-style': 'none',
+  };
+
+  if(is.ms()) {
+    styleMap['-ms-touch-action'] = 'none';
+    styleMap['touch-action'] = 'none';
   }
@@ -74,3 +84,5 @@
     r.data.contexts[ i ] = canvas.getContext( '2d' );
-    canvas.setAttribute( 'style', '-webkit-user-select: none; -moz-user-select: -moz-none; user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); outline-style: none;' + ( is.ms() ? ' -ms-touch-action: none; touch-action: none; ' : '' ) );
+    Object.keys(styleMap).forEach((k) => {
+      canvas.style[k] = styleMap[k];
+    });
     canvas.style.position = 'absolute';
@@ -77,0 +89,0 @@ canvas.setAttribute( 'data-id', 'layer' + i );

src/style/properties.js

@@ -64,2 +64,3 @@ import * as util from '../util';
     textWrap: { enums: [ 'none', 'wrap', 'ellipsis' ] },
+    textOverflowWrap: { enums: [ 'whitespace', 'anywhere' ] },
     textBackgroundShape: { enums: [ 'rectangle', 'roundrectangle', 'round-rectangle' ]},
@@ -80,2 +81,3 @@ nodeShape: { enums: [
     halign: { enums: [ 'left', 'center', 'right' ] },
+    justification: { enums: [ 'left', 'center', 'right', 'auto' ] },
     text: { string: true },
@@ -188,4 +190,6 @@ data: { mapping: true, regex: data( 'data' ) },
     { name: 'text-wrap', type: t.textWrap, triggersBounds: diff.any },
+    { name: 'text-overflow-wrap', type: t.textOverflowWrap, triggersBounds: diff.any },
     { name: 'text-max-width', type: t.size, triggersBounds: diff.any },
-    { name: 'text-outline-width', type: t.size, triggersBounds: diff.any }
+    { name: 'text-outline-width', type: t.size, triggersBounds: diff.any },
+    { name: 'line-height', type: t.positiveNumber, triggersBounds: diff.any }
   ];
@@ -206,3 +210,4 @@
     { name: 'text-border-style', type: t.borderStyle, triggersBounds: diff.any },
-    { name: 'text-background-shape', type: t.textBackgroundShape, triggersBounds: diff.any }
+    { name: 'text-background-shape', type: t.textBackgroundShape, triggersBounds: diff.any },
+    { name: 'text-justification', type: t.justification }
   ];
@@ -508,2 +513,4 @@
     'text-halign': 'center',
+    'text-justification': 'auto',
+    'line-height': 1,
     'color': '#000',
@@ -517,2 +524,3 @@ 'text-outline-color': '#000',
     'text-wrap': 'none',
+    'text-overflow-wrap': 'whitespace',
     'text-max-width': 9999,
@@ -519,0 +527,0 @@ 'text-background-color': '#000',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3776028

increased by0.61%

Lines of code

102590

increased by0.69%

No dependency changes