d3plus-shape - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

es/src/Shape/Shape.js

@@ -31,6 +31,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 import { transition } from "d3-transition";
-import { accessor, assign, attrize, BaseClass, configPrep, constant, elem } from "d3plus-common";
+import { accessor, assign, attrize, BaseClass, configPrep, constant, elem, unique } from "d3plus-common";
 import { colorContrast } from "d3plus-color";
 import * as paths from "d3-shape";
 import { strip, TextBox } from "d3plus-text";
+import textures from "textures";
 import Image from "../Image";
@@ -120,3 +121,3 @@ import pointDistance from "../geom/pointDistance";
     _this._stroke = function (d, i) {
-      return color(_this._fill(d, i)).darker(1);
+      return color(_this._fill(d, i)).darker(1).formatHex();
     };
@@ -130,2 +131,5 @@
     _this._textAnchor = constant("start");
+    _this._texture = constant(false);
+    _this._textureDefault = {};
+    _this._textureDefs = {};
     _this._vectorEffect = constant("non-scaling-stroke");
@@ -235,2 +239,4 @@ _this._verticalAlign = constant("top");
     value: function _applyStyle(elem) {
+      var _this3 = this;
+
       var that = this;
@@ -249,3 +255,7 @@ if (elem.size() && elem.node().tagName === "g") elem = elem.selectAll("*");
 
-      elem.attr("fill", styleLogic.bind(this._fill)).attr("fill-opacity", styleLogic.bind(this._fillOpacity)).attr("rx", styleLogic.bind(this._rx)).attr("ry", styleLogic.bind(this._ry)).attr("stroke", styleLogic.bind(this._stroke)).attr("stroke-dasharray", styleLogic.bind(this._strokeDasharray)).attr("stroke-linecap", styleLogic.bind(this._strokeLinecap)).attr("stroke-opacity", styleLogic.bind(this._strokeOpacity)).attr("stroke-width", styleLogic.bind(this._strokeWidth)).attr("vector-effect", styleLogic.bind(this._vectorEffect));
+      elem.attr("fill", function (d, i) {
+        var texture = _this3._getTextureKey.bind(_this3)(d, i);
+
+        return texture ? _this3._textureDefs[texture].url() : styleLogic.bind(_this3._fill)(d, i);
+      }).attr("fill-opacity", styleLogic.bind(this._fillOpacity)).attr("rx", styleLogic.bind(this._rx)).attr("ry", styleLogic.bind(this._ry)).attr("stroke", styleLogic.bind(this._stroke)).attr("stroke-dasharray", styleLogic.bind(this._strokeDasharray)).attr("stroke-linecap", styleLogic.bind(this._strokeLinecap)).attr("stroke-opacity", styleLogic.bind(this._strokeOpacity)).attr("stroke-width", styleLogic.bind(this._strokeWidth)).attr("vector-effect", styleLogic.bind(this._vectorEffect));
     }
@@ -262,6 +272,6 @@ /**
     value: function _applyTransform(elem) {
-      var _this3 = this;
+      var _this4 = this;
 
       elem.attr("transform", function (d, i) {
-        return "\n        translate(".concat(d.__d3plusShape__ ? d.translate ? d.translate : "".concat(_this3._x(d.data, d.i), ",").concat(_this3._y(d.data, d.i)) : "".concat(_this3._x(d, i), ",").concat(_this3._y(d, i)), ")\n        scale(").concat(d.__d3plusShape__ ? d.scale || _this3._scale(d.data, d.i) : _this3._scale(d, i), ")\n        rotate(").concat(d.__d3plusShape__ ? d.rotate ? d.rotate : _this3._rotate(d.data || d, d.i) : _this3._rotate(d.data || d, d.i), ")");
+        return "\n        translate(".concat(d.__d3plusShape__ ? d.translate ? d.translate : "".concat(_this4._x(d.data, d.i), ",").concat(_this4._y(d.data, d.i)) : "".concat(_this4._x(d, i), ",").concat(_this4._y(d, i)), ")\n        scale(").concat(d.__d3plusShape__ ? d.scale || _this4._scale(d.data, d.i) : _this4._scale(d, i), ")\n        rotate(").concat(d.__d3plusShape__ ? d.rotate ? d.rotate : _this4._rotate(d.data || d, d.i) : _this4._rotate(d.data || d, d.i), ")");
       });
@@ -271,2 +281,45 @@ }
         @memberof Shape
+        @desc Returns a full JSON string of the texture config for a given data point.
+        @param {Object} *d*
+        @param {Number} *i*
+        @private
+    */
+
+  }, {
+    key: "_getTextureKey",
+    value: function _getTextureKey(d, i) {
+      var _this5 = this;
+
+      var texture = this._texture(d, i);
+
+      if (!texture) return false;
+      /**
+              @desc Determines whether a shape is a nested collection of data points, and uses the appropriate data and index for the given function context.
+              @private
+          */
+
+      var styleLogic = function styleLogic(_) {
+        return typeof _ !== "function" ? _ : d.nested && d.key && d.values ? _(d.values[0], _this5._data.indexOf(d.values[0])) : _(d, i);
+      };
+
+      if (typeof texture === "string") texture = {
+        texture: texture
+      };
+      if (!texture.background) texture.background = styleLogic(this._fill);
+      if (!texture.stroke) texture.stroke = styleLogic(this._stroke);
+      var paths = ["squares", "nylon", "waves", "woven", "crosses", "caps", "hexagons"];
+
+      if (paths.includes(texture.texture)) {
+        texture.d = texture.texture;
+        texture.texture = "paths";
+      } else if (texture.texture === "grid") {
+        texture.orientation = ["vertical", "horizontal"];
+        texture.texture = "lines";
+      }
+
+      if (!texture.fill && texture.texture !== "paths") texture.fill = texture.stroke;
+      return JSON.stringify(assign({}, this._textureDefault, texture));
+    }
+    /**
+        @memberof Shape
         @desc Checks for nested data and uses the appropriate variables for accessor functions.
@@ -368,3 +421,3 @@ @param {HTMLElement} *elem*
     value: function _renderImage() {
-      var _this4 = this;
+      var _this6 = this;
 
@@ -374,3 +427,3 @@ var imageData = [];
       this._update.merge(this._enter).data().forEach(function (datum, i) {
-        var aes = _this4._aes(datum, i);
+        var aes = _this6._aes(datum, i);
 
@@ -382,12 +435,12 @@ if (aes.r || aes.width && aes.height) {
             d = datum.values[0];
-            i = _this4._data.indexOf(d);
+            i = _this6._data.indexOf(d);
           }
 
           var height = aes.r ? aes.r * 2 : aes.height,
-              url = _this4._backgroundImage(d, i),
+              url = _this6._backgroundImage(d, i),
               width = aes.r ? aes.r * 2 : aes.width;
 
           if (url) {
-            var x = d.__d3plusShape__ ? d.translate ? d.translate[0] : _this4._x(d.data, d.i) : _this4._x(d, i),
-                y = d.__d3plusShape__ ? d.translate ? d.translate[1] : _this4._y(d.data, d.i) : _this4._y(d, i);
+            var x = d.__d3plusShape__ ? d.translate ? d.translate[0] : _this6._x(d.data, d.i) : _this6._x(d, i),
+                y = d.__d3plusShape__ ? d.translate ? d.translate[1] : _this6._y(d.data, d.i) : _this6._y(d, i);
             if (aes.x) x += aes.x;
@@ -406,3 +459,3 @@ if (aes.y) y += aes.y;
               i: i,
-              id: _this4._id(d, i),
+              id: _this6._id(d, i),
               url: url,
@@ -433,3 +486,3 @@ width: width,
     value: function _renderLabels() {
-      var _this5 = this;
+      var _this7 = this;
 
@@ -443,14 +496,14 @@ var labelData = [];
           d = datum.values[0];
-          i = _this5._data.indexOf(d);
+          i = _this7._data.indexOf(d);
         }
 
-        var labels = _this5._label(d, i);
+        var labels = _this7._label(d, i);
 
-        if (_this5._labelBounds && labels !== false && labels !== undefined && labels !== null) {
-          var bounds = _this5._labelBounds.bind(_this5)(d, i, _this5._aes(datum, i));
+        if (_this7._labelBounds && labels !== false && labels !== undefined && labels !== null) {
+          var bounds = _this7._labelBounds.bind(_this7)(d, i, _this7._aes(datum, i));
 
           if (bounds) {
             if (labels.constructor !== Array) labels = [labels];
-            var x = d.__d3plusShape__ ? d.translate ? d.translate[0] : _this5._x(d.data, d.i) : _this5._x(d, i),
-                y = d.__d3plusShape__ ? d.translate ? d.translate[1] : _this5._y(d.data, d.i) : _this5._y(d, i);
+            var x = d.__d3plusShape__ ? d.translate ? d.translate[0] : _this7._x(d.data, d.i) : _this7._x(d, i),
+                y = d.__d3plusShape__ ? d.translate ? d.translate[1] : _this7._y(d.data, d.i) : _this7._y(d, i);
 
@@ -465,3 +518,3 @@ if (d.__d3plusShape__) {
 
-              var rotate = _this5._rotate(d, i);
+              var rotate = _this7._rotate(d, i);
 
@@ -476,3 +529,3 @@ var r = d.labelConfig && d.labelConfig.rotate ? d.labelConfig.rotate : bounds.angle !== undefined ? bounds.angle : 0;
                 l: l,
-                id: "".concat(_this5._id(d, i), "_").concat(l),
+                id: "".concat(_this7._id(d, i), "_").concat(l),
                 r: r,
@@ -511,3 +564,3 @@ rotateAnchor: rotateAnchor,
     value: function render(callback) {
-      var _this6 = this;
+      var _this8 = this;
 
@@ -537,6 +590,33 @@ if (this._select === void 0) {
 
-          return _this6._sort(a, b);
+          return _this8._sort(a, b);
         });
       }
 
+      var textureSet = unique(data.map(this._getTextureKey.bind(this))).filter(Boolean);
+      var existingTextureDefs = Object.keys(this._textureDefs);
+      existingTextureDefs.forEach(function (key) {
+        if (!textureSet.includes(key)) {
+          _select(_this8._select.select("pattern#".concat(_this8._textureDefs[key].id())).node().parentNode).remove();
+
+          delete _this8._textureDefs[key];
+        }
+      });
+      textureSet.forEach(function (key) {
+        if (!existingTextureDefs.includes(key)) {
+          var config = JSON.parse(key);
+          var textureClass = config.texture;
+          delete config.texture;
+          var t = textures[textureClass]();
+
+          for (var k in config) {
+            if ({}.hasOwnProperty.call(t, k) && k in t) {
+              config[k] instanceof Array ? t[k].apply(null, config[k]) : t[k](config[k]);
+            }
+          }
+
+          _this8._select.call(t);
+
+          _this8._textureDefs[key] = t;
+        }
+      });
       selectAll("g.d3plus-".concat(this._name, "-hover > *, g.d3plus-").concat(this._name, "-active > *")).each(function (d) {
@@ -566,3 +646,3 @@ if (d && d.parentNode) d.parentNode.appendChild(this);else this.parentNode.removeChild(this);
       var enter = this._enter = update.enter().append(this._tagName).attr("class", function (d, i) {
-        return "d3plus-Shape d3plus-".concat(_this6._name, " d3plus-id-").concat(strip(_this6._nestWrapper(_this6._id)(d, i)));
+        return "d3plus-Shape d3plus-".concat(_this8._name, " d3plus-id-").concat(strip(_this8._nestWrapper(_this8._id)(d, i)));
       }).call(this._applyTransform.bind(this)).attr("aria-label", this._ariaLabel).attr("role", this._role).attr("opacity", this._nestWrapper(this._opacity));
@@ -604,3 +684,3 @@ var enterUpdate = enter.merge(update);
       var hitEnter = hitAreas.enter().append(isLine ? "path" : "rect").attr("class", function (d, i) {
-        return "d3plus-HitArea d3plus-id-".concat(strip(_this6._nestWrapper(_this6._id)(d, i)));
+        return "d3plus-HitArea d3plus-id-".concat(strip(_this8._nestWrapper(_this8._id)(d, i)));
       }).attr("fill", "black").attr("stroke", "black").attr("pointer-events", "painted").attr("opacity", 0).call(this._applyTransform.bind(this));
@@ -620,3 +700,3 @@ var that = this;
       setTimeout(function () {
-        if (_this6._active) _this6._renderActive();else if (_this6._hover) _this6._renderHover();
+        if (_this8._active) _this8._renderActive();else if (_this8._hover) _this8._renderHover();
         if (callback) callback();
@@ -1076,2 +1156,26 @@ }, this._duration + 100);
         @memberof Shape
+        @desc Defines the texture used inside of each shape. This uses the [textures.js](https://riccardoscalco.it/textures/) package, and expects either a simple string (`"lines"` or `"circles"`) or a more complex Object containing the various properties of the texture (ie. `{texture: "lines", orientation: "3/8", stroke: "darkorange"}`). If multiple textures are necessary, provide an accsesor Function that returns the correct String/Object for each given data point and index.
+        @param {String|Object|Function} [*value*]
+        @chainable
+    */
+
+  }, {
+    key: "texture",
+    value: function texture(_) {
+      return arguments.length ? (this._texture = typeof _ === "function" ? _ : constant(_), this) : this._texture;
+    }
+    /**
+            @memberof Shape
+            @desc A series of global texture methods to be used for all textures (ie. `{stroke: "darkorange", strokeWidth: 2}`).
+            @param {Object} [*value*]
+            @chainable
+        */
+
+  }, {
+    key: "textureDefault",
+    value: function textureDefault(_) {
+      return arguments.length ? (this._textureDefault = assign(this._textureDefault, _), this) : this._textureDefault;
+    }
+    /**
+        @memberof Shape
         @desc If *value* is specified, sets the vector-effect accessor to the specified function or string and returns the current class instance.
@@ -1078,0 +1182,0 @@ @param {Function|String} [*value* = "non-scaling-stroke"]

package.json

 {
   "name": "d3plus-shape",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Fancy SVG shapes for visualizations",
@@ -34,5 +34,6 @@ "main": "build/d3plus-shape.full.js",
     "d3-transition": "^2.0.0",
-    "d3plus-color": "~1.0.0",
-    "d3plus-common": "~1.1.2",
-    "d3plus-text": "~1.0.3"
+    "d3plus-color": "^1.0.0",
+    "d3plus-common": "^1.1.0",
+    "d3plus-text": "^1.0.2",
+    "textures": "^1.2.3"
   },
@@ -48,3 +49,3 @@ "scripts": {
   "devDependencies": {
-    "d3plus-dev": "~1.1.0"
+    "d3plus-dev": "^1.1.0"
   },
@@ -51,0 +52,0 @@ "module": "es/index",

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

1895626

increased by1.98%

Lines of code

40543

increased by1.58%

Number of lines in readme file

1651

increased by1.1%

Worsened metrics

Dependency count

12

increased by9.09%

Dependency changes

• + Addedtextures@^1.2.3

• + Addedd3-array@3.2.4(transitive)

• + Addedd3-color@3.1.0(transitive)

• + Addedd3-format@3.1.0(transitive)

• + Addedd3-scale@4.0.2(transitive)

• + Addedd3-selection@3.0.0(transitive)

• + Addedd3-time@3.1.0(transitive)

• + Addedd3-time-format@4.1.0(transitive)

• + Addedd3-transition@3.0.1(transitive)

• + Addedd3plus-color@1.1.2(transitive)

• + Addedd3plus-common@1.2.8(transitive)

• + Addedd3plus-text@1.2.5(transitive)

• + Addedtextures@1.2.3(transitive)

• - Removedd3-format@2.0.0(transitive)

• - Removedd3-scale@3.3.0(transitive)

• - Removedd3-time@2.1.1(transitive)

• - Removedd3-time-format@3.0.0(transitive)

• - Removedd3plus-color@1.0.0(transitive)

• - Removedd3plus-common@1.1.2(transitive)

• - Removedd3plus-text@1.0.6(transitive)

• Updatedd3plus-color@^1.0.0

• Updatedd3plus-common@^1.1.0

• Updatedd3plus-text@^1.0.2