fabric - npm Package Compare versions

Comparing version 4.4.0 to 4.5.0-browser

build.js

@@ -235,2 +235,5 @@ var fs = require('fs'),
   ifSpecifiedInclude('interaction', 'src/mixins/default_controls.js'),
+
+  //  extends fabric.StaticCanvas, fabric.Canvas, fabric.Object, depends on fabric.PencilBrush and fabric.Rect
+  ifSpecifiedInclude('erasing', 'src/mixins/eraser_brush.mixin.js'),
 ];
@@ -237,0 +240,0 @@

HEADER.js

 /*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */
 
-var fabric = fabric || { version: '4.4.0' };
+var fabric = fabric || { version: '4.5.0' };
 if (typeof exports !== 'undefined') {
@@ -5,0 +5,0 @@ exports.fabric = fabric;

package.json

 {
-  "name": "fabric",
-  "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
-  "homepage": "http://fabricjs.com/",
-  "version": "4.4.0",
-  "author": "Juriy Zaytsev <[e-mail]>",
-  "contributors": [
-    {
-      "name": "Andrea Bogazzi",
-      "email": "[e-mail]"
-    }
-  ],
-  "keywords": [
-    "canvas",
-    "graphic",
-    "graphics",
-    "SVG",
-    "node-canvas",
-    "parser",
-    "HTML5",
-    "object model"
-  ],
-  "browser": {
-    "canvas": false,
-    "fs": false,
-    "jsdom": false,
-    "jsdom/lib/jsdom/living/generated/utils": false,
-    "jsdom/lib/jsdom/utils": false,
-    "http": false,
-    "https": false,
-    "xmldom": false,
-    "url": false
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/fabricjs/fabric.js"
-  },
-  "bugs": {
-    "url": "https://github.com/fabricjs/fabric.js/issues"
-  },
-  "license": "MIT",
-  "scripts": {
-    "build": "node build.js modules=ALL requirejs exclude=gestures,accessors",
-    "build:fast": "node build.js modules=ALL requirejs fast exclude=gestures,accessors",
-    "build:watch": "onchange 'src/**/**' 'HEADER.js' 'lib/**/**' -- npm run build_export",
-    "link:watch": "onchange 'src/**/**' 'HEADER.js' 'lib/**/**' -- npm link",
-    "build_with_gestures": "node build.js modules=ALL exclude=accessors",
-    "build_export": "npm run build:fast && npm run export_dist_to_site",
-    "test:single": "qunit test/node_test_setup.js test/lib",
-    "test:coverage": "nyc --silent qunit test/node_test_setup.js test/lib test/unit",
-    "test:visual:coverage": "nyc --silent --no-clean qunit test/node_test_setup.js test/lib test/visual",
-    "coverage:report": "nyc report --reporter=lcov --reporter=text",
-    "test": "qunit test/node_test_setup.js test/lib test/unit",
-    "test:visual": "qunit test/node_test_setup.js test/lib test/visual",
-    "test:visual:single": "qunit test/node_test_setup.js test/lib",
-    "test:all": "npm run test && npm run test:visual",
-    "lint": "eslint --config .eslintrc.json src",
-    "lint_tests": "eslint test/unit --config .eslintrc_tests && eslint test/visual --config .eslintrc_tests",
-    "export_gesture_to_site": "cp dist/fabric.js ../fabricjs.com/lib/fabric_with_gestures.js",
-    "export_dist_to_site": "cp dist/fabric.js ../fabricjs.com/lib/fabric.js && cp package.json ../fabricjs.com/lib/package.json && cp -r src HEADER.js lib ../fabricjs.com/build/files/",
-    "export_tests_to_site": "cp test/unit/*.js ../fabricjs.com/test/unit && cp -r test/visual/* ../fabricjs.com/test/visual && cp -r test/fixtures/* ../fabricjs.com/test/fixtures && cp -r test/lib/* ../fabricjs.com/test/lib",
-    "all": "npm run build && npm run test && npm run test:visual && npm run lint && npm run lint_tests && npm run export_dist_to_site && npm run export_tests_to_site",
-    "testem": "testem .",
-    "testem:ci": "testem ci"
-  },
-  "optionalDependencies": {
-    "canvas": "^2.6.1",
-    "jsdom": "^15.2.1"
-  },
-  "devDependencies": {
-    "chalk": "^2.4.1",
-    "eslint": "4.18.x",
-    "nyc": "^15.1.0",
-    "onchange": "^3.x.x",
-    "pixelmatch": "^4.0.2",
-    "qunit": "^2.13.0",
-    "testem": "^3.2.0",
-    "uglify-js": "3.3.x"
-  },
-  "engines": {
-    "node": ">=8.0.0"
-  },
-  "main": "./dist/fabric.js",
-  "dependencies": {}
-}
+	"name": "fabric",
+	"description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
+	"homepage": "http://fabricjs.com/",
+	"version": "4.5.0-browser",
+	"author": "Juriy Zaytsev <[e-mail]>",
+	"contributors": [
+		{
+			"name": "Andrea Bogazzi",
+			"email": "[e-mail]"
+		}
+	],
+	"keywords": [
+		"canvas",
+		"graphic",
+		"graphics",
+		"SVG",
+		"node-canvas",
+		"parser",
+		"HTML5",
+		"object model"
+	],
+	"browser": {
+		"canvas": false,
+		"fs": false,
+		"jsdom": false,
+		"jsdom/lib/jsdom/living/generated/utils": false,
+		"jsdom/lib/jsdom/utils": false,
+		"http": false,
+		"https": false,
+		"xmldom": false,
+		"url": false
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/fabricjs/fabric.js"
+	},
+	"bugs": {
+		"url": "https://github.com/fabricjs/fabric.js/issues"
+	},
+	"license": "MIT",
+	"scripts": {
+		"build": "node build.js modules=ALL requirejs exclude=gestures,accessors,erasing",
+		"build:fast": "node build.js modules=ALL requirejs fast exclude=gestures,accessors,erasing",
+		"build:watch": "onchange 'src/**/**' 'HEADER.js' 'lib/**/**' -- npm run build_export",
+		"link:watch": "onchange 'src/**/**' 'HEADER.js' 'lib/**/**' -- npm link",
+		"build_with_gestures": "node build.js modules=ALL exclude=accessors",
+		"build_export": "npm run build:fast && npm run export_dist_to_site",
+		"test:single": "qunit test/node_test_setup.js test/lib",
+		"test:coverage": "nyc --silent qunit test/node_test_setup.js test/lib test/unit",
+		"test:visual:coverage": "nyc --silent --no-clean qunit test/node_test_setup.js test/lib test/visual",
+		"coverage:report": "nyc report --reporter=lcov --reporter=text",
+		"test": "qunit test/node_test_setup.js test/lib test/unit",
+		"test:visual": "qunit test/node_test_setup.js test/lib test/visual",
+		"test:visual:single": "qunit test/node_test_setup.js test/lib",
+		"test:all": "npm run test && npm run test:visual",
+		"lint": "eslint --config .eslintrc.json src",
+		"lint_tests": "eslint test/unit --config .eslintrc_tests && eslint test/visual --config .eslintrc_tests",
+		"export_gesture_to_site": "cp dist/fabric.js ../fabricjs.com/lib/fabric_with_gestures.js",
+		"export_dist_to_site": "cp dist/fabric.js ../fabricjs.com/lib/fabric.js && cp package.json ../fabricjs.com/lib/package.json && cp -r src HEADER.js lib ../fabricjs.com/build/files/",
+		"export_tests_to_site": "cp test/unit/*.js ../fabricjs.com/test/unit && cp -r test/visual/* ../fabricjs.com/test/visual && cp -r test/fixtures/* ../fabricjs.com/test/fixtures && cp -r test/lib/* ../fabricjs.com/test/lib",
+		"all": "npm run build && npm run test && npm run test:visual && npm run lint && npm run lint_tests && npm run export_dist_to_site && npm run export_tests_to_site",
+		"testem": "testem .",
+		"testem:ci": "testem ci"
+	},
+	"optionalDependencies": {},
+	"devDependencies": {
+		"chalk": "^2.4.1",
+		"eslint": "4.18.x",
+		"nyc": "^15.1.0",
+		"onchange": "^3.x.x",
+		"pixelmatch": "^4.0.2",
+		"qunit": "^2.13.0",
+		"testem": "^3.2.0",
+		"uglify-js": "3.3.x"
+	},
+	"engines": {
+		"node": ">=8.0.0"
+	},
+	"main": "./dist/fabric.js",
+	"dependencies": {}
+}

src/brushes/pencil_brush.class.js

@@ -249,3 +249,3 @@ (function() {
           cDistance;
-      for (i = 1; i < l; i++) {
+      for (i = 1; i < l - 1; i++) {
         cDistance = Math.pow(lastPoint.x - points[i].x, 2) + Math.pow(lastPoint.y - points[i].y, 2);
@@ -257,5 +257,7 @@ if (cDistance >= adjustedDistance) {
       }
-      if (newPoints.length === 1) {
-        newPoints.push(new fabric.Point(newPoints[0].x, newPoints[0].y));
-      }
+      /**
+       * Add the last point from the original line to the end of the array.
+       * This ensures decimate doesn't delete the last point on the line, and ensures the line is > 1 point.
+       */
+      newPoints.push(points[l]);
       return newPoints;
@@ -262,0 +264,0 @@ },

src/controls.actions.js

@@ -205,2 +205,17 @@ (function(global) {
   /**
+   * Wrap an action handler with firing an event if the action is performed
+   * @param {Function} actionHandler the function to wrap
+   * @return {Function} a function with an action handler signature
+   */
+  function wrapWithFireEvent(eventName, actionHandler) {
+    return function(eventData, transform, x, y) {
+      var actionPerformed = actionHandler(eventData, transform, x, y);
+      if (actionPerformed) {
+        fireEvent(eventName, commonEventInfo(eventData, transform, x, y));
+      }
+      return actionPerformed;
+    };
+  }
+
+  /**
    * Transforms a point described by x and y in a distance from the top left corner of the object
@@ -298,3 +313,2 @@ * bounding box.
       compensateScaleForSkew(target, 'skewY', 'scaleY', 'y', dimBeforeSkewing);
-      fireEvent('skewing', commonEventInfo(eventData, transform, x, y));
     }
@@ -343,3 +357,2 @@ return hasSkewed;
       compensateScaleForSkew(target, 'skewX', 'scaleX', 'x', dimBeforeSkewing);
-      fireEvent('skewing', commonEventInfo(eventData, transform, x, y));
     }
@@ -395,3 +408,3 @@ return hasSkewed;
     transform.originX = originX;
-    var finalHandler = wrapWithFixedAnchor(skewObjectX);
+    var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectX));
     return finalHandler(eventData, transform, x, y);
@@ -446,3 +459,3 @@ }
     transform.originY = originY;
-    var finalHandler = wrapWithFixedAnchor(skewObjectY);
+    var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectY));
     return finalHandler(eventData, transform, x, y);
@@ -497,5 +510,2 @@ }
     target.angle = angle;
-    if (hasRotated) {
-      fireEvent('rotating', commonEventInfo(eventData, transform, x, y));
-    }
     return hasRotated;
@@ -562,3 +572,3 @@ }
               Math.abs(dim.y * original.scaleY / target.scaleY),
-            scale = distance / originalDistance, hasScaled;
+            scale = distance / originalDistance;
         scaleX = original.scaleX * scale;
@@ -598,7 +608,3 @@ scaleY = original.scaleY * scale;
     }
-    hasScaled = oldScaleX !== target.scaleX || oldScaleY !== target.scaleY;
-    if (hasScaled) {
-      fireEvent('scaling', commonEventInfo(eventData, transform, x, y));
-    }
-    return hasScaled;
+    return oldScaleX !== target.scaleX || oldScaleY !== target.scaleY;
   }
@@ -692,10 +698,6 @@
         multiplier = isTransformCentered(transform) ? 2 : 1,
-        oldWidth = target.width, hasResized,
+        oldWidth = target.width,
         newWidth = Math.abs(localPoint.x * multiplier / target.scaleX) - strokePadding;
     target.set('width', Math.max(newWidth, 0));
-    hasResized = oldWidth !== newWidth;
-    if (hasResized) {
-      fireEvent('resizing', commonEventInfo(eventData, transform, x, y));
-    }
-    return hasResized;
+    return oldWidth !== newWidth;
   }
@@ -729,9 +731,9 @@
   controls.scaleSkewCursorStyleHandler = scaleSkewCursorStyleHandler;
-  controls.rotationWithSnapping = wrapWithFixedAnchor(rotationWithSnapping);
-  controls.scalingEqually = wrapWithFixedAnchor(scaleObjectFromCorner);
-  controls.scalingX = wrapWithFixedAnchor(scaleObjectX);
-  controls.scalingY = wrapWithFixedAnchor(scaleObjectY);
+  controls.rotationWithSnapping = wrapWithFireEvent('rotating', wrapWithFixedAnchor(rotationWithSnapping));
+  controls.scalingEqually = wrapWithFireEvent('scaling', wrapWithFixedAnchor( scaleObjectFromCorner));
+  controls.scalingX = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectX));
+  controls.scalingY = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectY));
   controls.scalingYOrSkewingX = scalingYOrSkewingX;
   controls.scalingXOrSkewingY = scalingXOrSkewingY;
-  controls.changeWidth = wrapWithFixedAnchor(changeWidth);
+  controls.changeWidth = wrapWithFireEvent('resizing', wrapWithFixedAnchor(changeWidth));
   controls.skewHandlerX = skewHandlerX;
@@ -744,2 +746,3 @@ controls.skewHandlerY = skewHandlerY;
   controls.wrapWithFixedAnchor = wrapWithFixedAnchor;
+  controls.wrapWithFireEvent = wrapWithFireEvent;
   controls.getLocalPoint = getLocalPoint;
@@ -746,0 +749,0 @@ fabric.controlsUtils = controls;

src/controls.render.js

@@ -25,3 +25,3 @@ (function(global) {
         transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ?
-          styleOverride.transparentCorners : this.transparentCorners,
+          styleOverride.transparentCorners : fabricObject.transparentCorners,
         methodName = transparentCorners ? 'stroke' : 'fill',
@@ -28,0 +28,0 @@ stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor),

src/mixins/itext_click_behavior.mixin.js

@@ -221,3 +221,2 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {
         line;
-
     for (var i = 0, len = this._textLines.length; i < len; i++) {
@@ -238,2 +237,9 @@ if (height <= mouseOffset.y) {
     line = this._textLines[lineIndex];
+    // handling of RTL: in order to get things work correctly,
+    // we assume RTL writing is mirrored compared to LTR writing.
+    // so in position detection we mirror the X offset, and when is time
+    // of rendering it, we mirror it again.
+    if (this.direction === 'rtl') {
+      mouseOffset.x = this.width * this.scaleX - mouseOffset.x + width;
+    }
     for (var j = 0, jlen = line.length; j < jlen; j++) {
@@ -240,0 +246,0 @@ prevWidth = width;

src/mixins/itext_key_behavior.mixin.js

@@ -62,2 +62,15 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {
 
+  keysMapRtl: {
+    9:  'exitEditing',
+    27: 'exitEditing',
+    33: 'moveCursorUp',
+    34: 'moveCursorDown',
+    35: 'moveCursorLeft',
+    36: 'moveCursorRight',
+    37: 'moveCursorRight',
+    38: 'moveCursorUp',
+    39: 'moveCursorLeft',
+    40: 'moveCursorDown',
+  },
+
   /**
@@ -92,4 +105,5 @@ * For functionalities on keyUp + ctrl || cmd
     }
-    if (e.keyCode in this.keysMap) {
-      this[this.keysMap[e.keyCode]](e);
+    var keyMap = this.direction === 'rtl' ? this.keysMapRtl : this.keysMap;
+    if (e.keyCode in keyMap) {
+      this[keyMap[e.keyCode]](e);
     }
@@ -96,0 +110,0 @@ else if ((e.keyCode in this.ctrlKeysMapDown) && (e.ctrlKey || e.metaKey)) {

src/parser.js

@@ -474,3 +474,9 @@ (function(global) {
       var el = nodelist[i],
-          xlink = (el.getAttribute('xlink:href') || el.getAttribute('href')).substr(1),
+          xlinkAttribute = el.getAttribute('xlink:href') || el.getAttribute('href');
+
+      if (xlinkAttribute === null) {
+        return;
+      }
+
+      var xlink = xlinkAttribute.substr(1),
           x = el.getAttribute('x') || 0,
@@ -480,3 +486,8 @@ y = el.getAttribute('y') || 0,
           currentTrans = (el2.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')',
-          parentNode, oldLength = nodelist.length, attr, j, attrs, len, namespace = fabric.svgNS;
+          parentNode,
+          oldLength = nodelist.length, attr,
+          j,
+          attrs,
+          len,
+          namespace = fabric.svgNS;
 
@@ -563,3 +574,3 @@ applyViewboxTransform(el2);
     if (missingViewBox) {
-      if (((x || y) && element.parentNode.nodeName !== '#document')) {
+      if (((x || y) && element.parentNode && element.parentNode.nodeName !== '#document')) {
         translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') ';
@@ -566,0 +577,0 @@ matrix = (element.getAttribute('transform') || '') + translateMatrix;

src/shadow.class.js

@@ -101,5 +101,5 @@ (function(global) {
         color: color.trim(),
-        offsetX: parseInt(offsetsAndBlur[1], 10) || 0,
-        offsetY: parseInt(offsetsAndBlur[2], 10) || 0,
-        blur: parseInt(offsetsAndBlur[3], 10) || 0
+        offsetX: parseFloat(offsetsAndBlur[1], 10) || 0,
+        offsetY: parseFloat(offsetsAndBlur[2], 10) || 0,
+        blur: parseFloat(offsetsAndBlur[3], 10) || 0
       };
@@ -194,4 +194,4 @@ },
   // eslint-disable-next-line max-len
-  fabric.Shadow.reOffsetsAndBlur = /(?:\s|^)(-?\d+(?:px)?(?:\s?|$))?(-?\d+(?:px)?(?:\s?|$))?(\d+(?:px)?)?(?:\s?|$)(?:$|\s)/;
+  fabric.Shadow.reOffsetsAndBlur = /(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/;
 
 })(typeof exports !== 'undefined' ? exports : this);

src/shapes/itext.class.js

@@ -321,3 +321,2 @@ (function() {
           offsets = this._getCursorBoundariesOffsets(position);
-
       return {
@@ -360,2 +359,5 @@ left: left,
       };
+      if (this.direction === 'rtl') {
+        boundaries.left *= -1;
+      }
       this.cursorOffsetCache = boundaries;
@@ -379,3 +381,2 @@ return this.cursorOffsetCache;
           dy = this.getValueOfPropertyAt(lineIndex, charIndex, 'deltaY');
-
       topOffset += (1 - this._fontSizeFraction) * this.getHeightOfLine(lineIndex) / this.lineHeight
@@ -387,3 +388,2 @@ - charHeight * (1 - this._fontSizeFraction);
       }
-
       ctx.fillStyle = this.cursorColor || this.getValueOfPropertyAt(lineIndex, charIndex, 'fill');
@@ -440,20 +440,21 @@ ctx.globalAlpha = this.__isMousedown ? 1 : this._currentCursorOpacity;
         }
+        var drawStart = boundaries.left + lineOffset + boxStart,
+            drawWidth = boxEnd - boxStart,
+            drawHeight = lineHeight, extraTop = 0;
         if (this.inCompositionMode) {
           ctx.fillStyle = this.compositionColor || 'black';
-          ctx.fillRect(
-            boundaries.left + lineOffset + boxStart,
-            boundaries.top + boundaries.topOffset + lineHeight,
-            boxEnd - boxStart,
-            1);
+          drawHeight = 1;
+          extraTop = lineHeight;
         }
         else {
           ctx.fillStyle = this.selectionColor;
-          ctx.fillRect(
-            boundaries.left + lineOffset + boxStart,
-            boundaries.top + boundaries.topOffset,
-            boxEnd - boxStart,
-            lineHeight);
         }
-
-
+        if (this.direction === 'rtl') {
+          drawStart = this.width - drawStart - drawWidth;
+        }
+        ctx.fillRect(
+          drawStart,
+          boundaries.top + boundaries.topOffset + extraTop,
+          drawWidth,
+          drawHeight);
         boundaries.topOffset += realLineHeight;
@@ -460,0 +461,0 @@ }

src/shapes/text.class.js

@@ -262,2 +262,15 @@ (function(global) {
     /**
+     * WARNING: EXPERIMENTAL. NOT SUPPORTED YET
+     * determine the direction of the text.
+     * This has to be set manually together with textAlign and originX for proper
+     * experience.
+     * some interesting link for the future
+     * https://www.w3.org/International/questions/qa-bidi-unicode-controls
+     * @since 4.5.0
+     * @type {String} 'ltr|rtl'
+     * @default
+     */
+    direction: 'ltr',
+
+    /**
      * Array of properties that define a style unit (of 'styles').
@@ -556,3 +569,4 @@ * @type {Array}
           lineTopOffset = this._getTopOffset(),
-          boxStart = 0, boxWidth = 0, charBox, currentColor, path = this.path;
+          boxStart = 0, boxWidth = 0, charBox, currentColor, path = this.path,
+          drawStart;
 
@@ -587,5 +601,9 @@ for (var i = 0, len = this._textLines.length; i < len; i++) {
           else if (currentColor !== lastColor) {
+            drawStart = leftOffset + lineLeftOffset + boxStart;
+            if (this.direction === 'rtl') {
+              drawStart = this.width - drawStart - boxWidth;
+            }
             ctx.fillStyle = lastColor;
             lastColor && ctx.fillRect(
-              leftOffset + lineLeftOffset + boxStart,
+              drawStart,
               lineTopOffset,
@@ -604,5 +622,9 @@ boxWidth,
         if (currentColor && !path) {
+          drawStart = leftOffset + lineLeftOffset + boxStart;
+          if (this.direction === 'rtl') {
+            drawStart = this.width - drawStart - boxWidth;
+          }
           ctx.fillStyle = currentColor;
           ctx.fillRect(
-            leftOffset + lineLeftOffset + boxStart,
+            drawStart,
             lineTopOffset,
@@ -855,3 +877,3 @@ boxWidth,
     _getLeftOffset: function() {
-      return -this.width / 2;
+      return this.direction === 'ltr' ? -this.width / 2 : this.width / 2;
     },
@@ -945,3 +967,5 @@
           path = this.path,
-          shortCut = !isJustify && this.charSpacing === 0 && this.isEmptyStyles(lineIndex) && !path;
+          shortCut = !isJustify && this.charSpacing === 0 && this.isEmptyStyles(lineIndex) && !path,
+          isLtr = this.direction === 'ltr', sign = this.direction === 'ltr' ? 1 : -1,
+          drawingLeft;
 
@@ -952,2 +976,5 @@ ctx.save();
         // render all the line in one pass without checking
+        // drawingLeft = isLtr ? left : left - this.getLineWidth(lineIndex);
+        ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl');
+        ctx.direction = isLtr ? 'ltr' : 'rtl';
         this._renderChar(method, ctx, lineIndex, 0, line.join(''), left, top, lineHeight);
@@ -962,3 +989,3 @@ ctx.restore();
         if (boxWidth === 0) {
-          left += charBox.kernedWidth - charBox.width;
+          left += sign * (charBox.kernedWidth - charBox.width);
           boxWidth += charBox.width;
@@ -989,7 +1016,10 @@ }
           else {
-            this._renderChar(method, ctx, lineIndex, i, charsToRender, left, top, lineHeight);
+            drawingLeft = left;
+            ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl');
+            ctx.direction = isLtr ? 'ltr' : 'rtl';
+            this._renderChar(method, ctx, lineIndex, i, charsToRender, drawingLeft, top, lineHeight);
           }
           charsToRender = '';
           actualStyle = nextStyle;
-          left += boxWidth;
+          left += sign * boxWidth;
           boxWidth = 0;
@@ -1182,16 +1212,28 @@ }
     _getLineLeftOffset: function(lineIndex) {
-      var lineWidth = this.getLineWidth(lineIndex);
-      if (this.textAlign === 'center') {
-        return (this.width - lineWidth) / 2;
+      var lineWidth = this.getLineWidth(lineIndex),
+          lineDiff = this.width - lineWidth, textAlign = this.textAlign, direction = this.direction,
+          isEndOfWrapping, leftOffset = 0, isEndOfWrapping = this.isEndOfWrapping(lineIndex);
+      if (textAlign === 'justify'
+        || (textAlign === 'justify-center' && !isEndOfWrapping)
+        || (textAlign === 'justify-right' && !isEndOfWrapping)
+        || (textAlign === 'justify-left' && !isEndOfWrapping)
+      ) {
+        return 0;
       }
-      if (this.textAlign === 'right') {
-        return this.width - lineWidth;
+      if (textAlign === 'center') {
+        leftOffset = lineDiff / 2;
       }
-      if (this.textAlign === 'justify-center' && this.isEndOfWrapping(lineIndex)) {
-        return (this.width - lineWidth) / 2;
+      if (textAlign === 'right') {
+        leftOffset = lineDiff;
       }
-      if (this.textAlign === 'justify-right' && this.isEndOfWrapping(lineIndex)) {
-        return this.width - lineWidth;
+      if (textAlign === 'justify-center') {
+        leftOffset = lineDiff / 2;
       }
-      return 0;
+      if (textAlign === 'justify-right') {
+        leftOffset = lineDiff;
+      }
+      if (direction === 'rtl') {
+        leftOffset -= lineDiff;
+      }
+      return leftOffset;
     },
@@ -1324,6 +1366,10 @@
           ) {
+            var drawStart = leftOffset + lineLeftOffset + boxStart;
+            if (this.direction === 'rtl') {
+              drawStart = this.width - drawStart - boxWidth;
+            }
             if (lastDecoration && lastFill) {
               ctx.fillStyle = lastFill;
               ctx.fillRect(
-                leftOffset + lineLeftOffset + boxStart,
+                drawStart,
                 top + this.offsets[type] * size + dy,
@@ -1436,3 +1482,4 @@ boxWidth,
         'charSpacing',
-        'path'
+        'path',
+        'direction',
       ].concat(propertiesToInclude);
@@ -1439,0 +1486,0 @@ var obj = this.callSuper('toObject', additionalProperties);

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

2527661

increased by1.31%

Dependency count

0

decreased by-100%

Number of package files

115

increased by0.88%

Lines of code

58929

increased by1.44%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes