semiotic-mark - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

lib/index.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.MarkContext = exports.Mark = exports.DraggableMark = undefined;
+exports.Mark = undefined;
 
@@ -13,19 +13,7 @@ var _Mark = require("./Mark");
 
-var _DraggableMark = require("./DraggableMark");
-
-var _DraggableMark2 = _interopRequireDefault(_DraggableMark);
-
-var _MarkContext = require("./MarkContext");
-
-var _MarkContext2 = _interopRequireDefault(_MarkContext);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 exports.default = {
-  DraggableMark: _DraggableMark2.default,
-  Mark: _Mark2.default,
-  MarkContext: _MarkContext2.default
+  Mark: _Mark2.default
 };
-exports.DraggableMark = _DraggableMark2.default;
-exports.Mark = _Mark2.default;
-exports.MarkContext = _MarkContext2.default;
+exports.Mark = _Mark2.default;

lib/Mark.js

@@ -23,10 +23,4 @@ "use strict";
 
-var _generator = require("roughjs-es5/lib/generator");
-
 var _markTransition = require("./constants/markTransition");
 
-var _propTypes = require("prop-types");
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -59,6 +53,2 @@
 
-    _this._mouseup = _this._mouseup.bind(_this);
-    _this._mousedown = _this._mousedown.bind(_this);
-    _this._mousemove = _this._mousemove.bind(_this);
-
     _this.state = {
@@ -89,6 +79,9 @@ translate: [0, 0],
     value: function updateSketchy(nextProps) {
+
+      var RoughGenerator = nextProps.sketchyGenerator;
+
       var renderOptions = nextProps.renderMode !== null && _typeof(nextProps.renderMode) === "object" ? nextProps.renderMode : { renderMode: nextProps.renderMode };
 
       var sketchyHash = renderOptions.renderMode === "sketchy" && generateSketchyHash(nextProps);
-      if (sketchyHash && sketchyHash !== this.state.sketchyHash) {
+      if (RoughGenerator && sketchyHash && sketchyHash !== this.state.sketchyHash) {
         var _nextProps$style = nextProps.style,
@@ -112,3 +105,3 @@ style = _nextProps$style === undefined ? {} : _nextProps$style;
 
-        var roughGenerator = new _generator.RoughGenerator({}, { width: 1000, height: 1000 });
+        var roughGenerator = RoughGenerator({}, { width: 1000, height: 1000 });
         var drawingInstructions = void 0;
@@ -214,4 +207,2 @@ var roughOptions = {
 
-      var canvas = this.props.canvas !== true && this.props.canvas || this.context && this.context.canvas;
-
       var node = this.node;
@@ -310,50 +301,2 @@
   }, {
-    key: "_mouseup",
-    value: function _mouseup() {
-      document.onmousemove = null;
-
-      var finalTranslate = [0, 0];
-      if (!this.props.resetAfter) finalTranslate = this.state.translate;
-
-      this.setState({
-        dragging: false,
-        translate: finalTranslate,
-        uiUpdate: false
-      });
-      if (this.props.dropFunction && this.props.context && this.props.context.dragSource) {
-        this.props.dropFunction(this.props.context.dragSource.props, this.props);
-        this.props.updateContext("dragSource", undefined);
-      }
-    }
-  }, {
-    key: "_mousedown",
-    value: function _mousedown(event) {
-      this.setState({
-        mouseOrigin: [event.pageX, event.pageY],
-        translateOrigin: this.state.translate,
-        dragging: true
-      });
-      document.onmouseup = this._mouseup;
-      document.onmousemove = this._mousemove;
-    }
-  }, {
-    key: "_mousemove",
-    value: function _mousemove(event) {
-      var xAdjust = this.props.freezeX ? 0 : 1;
-      var yAdjust = this.props.freezeY ? 0 : 1;
-
-      var adjustedPosition = [event.pageX - this.state.mouseOrigin[0], event.pageY - this.state.mouseOrigin[1]];
-      var adjustedTranslate = [(adjustedPosition[0] + this.state.translateOrigin[0]) * xAdjust, (adjustedPosition[1] + this.state.translateOrigin[1]) * yAdjust];
-      if (this.props.dropFunction && this.state.uiUpdate === false) {
-        this.props.updateContext("dragSource", this);
-        this.setState({
-          translate: adjustedTranslate,
-          uiUpdate: true,
-          dragging: true
-        });
-      } else {
-        this.setState({ translate: adjustedTranslate });
-      }
-    }
-  }, {
     key: "render",
@@ -365,43 +308,15 @@ value: function render() {
 
-      var mouseIn = null;
-      var mouseOut = null;
-
       var actualSVG = (this.props.renderMode === "sketchy" || this.props.renderMode && this.props.renderMode.renderMode === "sketchy") && this.state.sketchyFill || (0, _drawing.generateSVG)(this.props, className);
 
-      if (this.props.draggable) {
-        return _react2.default.createElement(
-          "g",
-          {
-            ref: function ref(node) {
-              return _this3.node = node;
-            },
-            className: className,
-            onMouseEnter: mouseIn,
-            onMouseOut: mouseOut,
-            onDoubleClick: this._doubleclick,
-            style: {
-              pointerEvents: this.props.dropFunction && this.state.dragging ? "none" : "all"
-            },
-            onMouseDown: this._mousedown,
-            onMouseUp: this._mouseup,
-            transform: "translate(" + this.state.translate + ")",
-            "aria-label": this.props["aria-label"]
+      return _react2.default.createElement(
+        "g",
+        {
+          ref: function ref(node) {
+            return _this3.node = node;
           },
-          actualSVG
-        );
-      } else {
-        return _react2.default.createElement(
-          "g",
-          {
-            ref: function ref(node) {
-              return _this3.node = node;
-            },
-            className: className,
-            onMouseEnter: mouseIn,
-            onMouseOut: mouseOut,
-            "aria-label": this.props["aria-label"]
-          },
-          actualSVG
-        );
-      }
+          className: className,
+          "aria-label": this.props["aria-label"]
+        },
+        actualSVG
+      );
     }
@@ -413,21 +328,3 @@ }]);
 
-Mark.propTypes = {
-  markType: _propTypes2.default.string.isRequired,
-  forceUpdate: _propTypes2.default.bool,
-  renderMode: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),
-  draggable: _propTypes2.default.bool,
-  dropFunction: _propTypes2.default.func,
-  resetAfter: _propTypes2.default.bool,
-  freezeX: _propTypes2.default.bool,
-  freezeY: _propTypes2.default.bool,
-  context: _propTypes2.default.object,
-  updateContext: _propTypes2.default.func,
-  className: _propTypes2.default.string
-};
-
-Mark.contextTypes = {
-  canvas: _propTypes2.default.object
-};
-
 exports.default = Mark;
 module.exports = exports['default'];

lib/markBehavior/drawing.js

@@ -11,6 +11,2 @@ "use strict";
 
-exports.areaLineGenerator = areaLineGenerator;
-exports.areaLine = areaLine;
-exports.verticalbar = verticalbar;
-exports.horizontalbar = horizontalbar;
 exports.pathStr = pathStr;
@@ -20,7 +16,2 @@ exports.circlePath = circlePath;
 exports.linePath = linePath;
-exports.jitterLine = jitterLine;
-exports.cheapSketchy = cheapSketchy;
-exports.cheapPopArtsy = cheapPopArtsy;
-exports.randomColor = randomColor;
-exports.painty = painty;
 exports.generateSVG = generateSVG;
@@ -32,10 +23,2 @@
 
-var _d3Shape = require("d3-shape");
-
-var _d3Color = require("d3-color");
-
-var _d3Selection = require("d3-selection");
-
-var _d3Scale = require("d3-scale");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -48,29 +31,2 @@
 
-function areaLineGenerator(customAccessors, interpolator) {
-  var lineGenerator = (0, _d3Shape.area)().x0(customAccessors.x).y0(customAccessors.y).x1(customAccessors.x1).y1(customAccessors.y1).interpolate(interpolator || "linear");
-  return lineGenerator;
-}
-
-function areaLine(props) {
-  var lineGenerator = areaLineGenerator(props.customAccessors, props.interpolate);
-  props.d = lineGenerator(props.coordinates);
-
-  return props;
-}
-
-function verticalbar(props) {
-  props.y = props.y - props.height;
-  return props;
-}
-
-function horizontalbar(props) {
-  //just flips height for width
-  var originalHeight = props.height;
-  var originalWidth = props.width;
-  props.width = originalHeight;
-  props.height = originalWidth;
-
-  return props;
-}
-
 function pathStr(_ref) {
@@ -103,167 +59,2 @@ var x = _ref.x,
 
-function jitterLine(pathNode) {
-  var length = pathNode.getTotalLength();
-  var j = 2;
-  var x = j + Math.random() * j * 5;
-  var jitteredPoints = [];
-  var lineGen = (0, _d3Shape.line)().x(function (d) {
-    return d.x;
-  }).y(function (d) {
-    return d.y;
-  }).curve(_d3Shape.curveBasis);
-
-  var newPoint = pathNode.getPointAtLength(0);
-  jitteredPoints.push(newPoint);
-
-  while (x < length) {
-    newPoint = pathNode.getPointAtLength(x);
-    var newX = newPoint.x + (Math.random() * j - j / 2);
-    var newY = newPoint.y + (Math.random() * j - j / 2);
-    jitteredPoints.push({ x: newX, y: newY });
-    x += j + Math.random() * j * 5;
-  }
-  newPoint = pathNode.getPointAtLength(length);
-  jitteredPoints.push(newPoint);
-
-  return lineGen(jitteredPoints);
-}
-
-function cheapSketchy(path) {
-  var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-
-  if (opacity === 0) {
-    //no fill
-    return "";
-  }
-  var opacitySketchyScale = (0, _d3Scale.scaleLinear)().domain([0, 1]).range([10, 1]).clamp(true);
-  var length = path.getTotalLength();
-  var drawCode = "";
-  var x = 0;
-  var step = opacitySketchyScale(opacity);
-
-  while (x < length / 2) {
-    var start = path.getPointAtLength(x);
-    var end = path.getPointAtLength(length - x);
-
-    drawCode += " M" + (start.x + (Math.random() * step - step / 2)) + " " + (start.y + (Math.random() * step - step / 2)) + "L" + (end.x + (Math.random() * step - step / 2)) + " " + (end.y + (Math.random() * step - step / 2));
-
-    x += step + Math.random() * step;
-  }
-
-  return drawCode;
-}
-
-function cheapPopArtsy(path, size) {
-  var length = path.getTotalLength();
-  var circles = [];
-  var x = 0;
-  var step = size * 3;
-
-  while (x < length / 2) {
-    var start = path.getPointAtLength(x);
-    var end = path.getPointAtLength(length - x);
-    var distance = Math.sqrt(Math.pow(end.x - start.x, 2) + Math.pow(end.y - start.y, 2));
-    var begin = size / 2;
-    while (begin < distance - size / 2) {
-      var percent = begin / distance;
-      var circleXa = percent * start.x;
-      var circleXb = (1 - percent) * end.x;
-      var circleYa = percent * start.y;
-      var circleYb = (1 - percent) * end.y;
-      circles.push([circleXa + circleXb, circleYa + circleYb]);
-      begin = begin + (step + Math.random());
-    }
-    x = x + step;
-  }
-
-  return circles;
-}
-
-function randomColor(baseColor, range) {
-  var hslBase = (0, _d3Color.hsl)(baseColor);
-  hslBase.h = hslBase.h + (Math.floor(Math.random() * (range * 255)) - Math.floor(range / 2));
-  hslBase.s = hslBase.s + (Math.floor(Math.random() * range) - Math.floor(range / 2));
-  hslBase.l = hslBase.l + (Math.floor(Math.random() * range) - Math.floor(range / 2));
-  return hslBase.toString();
-}
-
-function painty(markType, cloneProps) {
-  delete cloneProps.markType;
-  if ((markType === "path" || markType === "circle" || markType === "line" || markType === "rect") && cloneProps.style && (cloneProps.style.stroke || cloneProps.style.fill)) {
-    if (markType === "circle") {
-      cloneProps.d = circlePath(cloneProps.cx || 0, cloneProps.cy || 0, cloneProps.r);
-    }
-
-    if (markType === "rect") {
-      cloneProps.d = rectPath(cloneProps.x || 0, cloneProps.y || 0, cloneProps.width, cloneProps.height);
-    }
-
-    if (markType === "line") {
-      cloneProps.d = linePath(cloneProps.x1, cloneProps.x2, cloneProps.y1, cloneProps.y2);
-    }
-
-    (0, _d3Selection.select)("body").append("svg").attr("id", "sketchyTempSVG");
-
-    var fills = [];
-    var outlines = [];
-
-    cloneProps.d.split("M").filter(function (d, i) {
-      return i !== 0;
-    }).forEach(function (pathD, i) {
-      var pathDummy = (0, _d3Selection.select)("#sketchyTempSVG").append("path").attr("class", cloneProps.className).attr("d", "M" + pathD);
-
-      var pathNode = pathDummy.node();
-
-      if (cloneProps.style && cloneProps.style.fill !== "none") {
-        var sketchyFill = cheapPopArtsy(pathNode, 4);
-        var fillProps = _extends({}, cloneProps);
-        var fillStyle = _extends({}, cloneProps.style);
-        var fillValue = fillStyle.fill;
-        fillProps.style = fillStyle;
-        delete fillProps.d;
-        delete fillProps.style.fillOpacity;
-        delete fillProps.style.stroke;
-        delete fillProps.style.strokeWidth;
-
-        fills.push(sketchyFill.map(function (circle, ci) {
-          fillProps.key = "painty-fill-" + i + "-" + ci;
-          fillProps.cx = circle[0];
-          fillProps.cy = circle[1];
-          fillProps.style = _extends({}, fillProps.style);
-          fillProps.style.fill = fillProps.style.fill.substr(0, 3) === "url" ? fillProps.style.fill : randomColor(fillValue, 0.05);
-          fillProps.r = Math.random() * 2 + 3;
-          return _react2.default.createElement("circle", fillProps);
-        }));
-      }
-
-      if (cloneProps.style && cloneProps.style.stroke !== "none" && cloneProps.style.strokeWidth !== 0) {
-        var sketchyOutline = jitterLine(pathNode);
-
-        var outlineProps = _extends({}, cloneProps);
-        var outlineStyle = _extends({}, cloneProps.style);
-        outlineProps.style = outlineStyle;
-        outlineProps.d = sketchyOutline;
-        outlineProps.key = "painty-outline-" + i;
-        outlineProps.style.fill = "none";
-
-        outlines.push(_react2.default.createElement("path", outlineProps));
-      }
-    });
-
-    (0, _d3Selection.select)("#sketchyTempSVG").remove();
-
-    return [_react2.default.createElement("path", {
-      key: "painty-interaction-overlay",
-      d: cloneProps.d,
-      style: { opacity: 0 }
-    }), _react2.default.createElement(
-      "g",
-      { key: "painty-fill", style: { filter: "url(#paintyFilterHeavy)" } },
-      fills
-    ), outlines];
-  }
-
-  return _react2.default.createElement(markType, cloneProps);
-}
-
 function generateSVG(props, className) {
@@ -294,13 +85,2 @@ var markType = props.markType;
 
-  if (markType === "verticalbar") {
-    markType = "rect";
-    cloneProps = verticalbar(cloneProps);
-  } else if (markType === "horizontalbar") {
-    markType = "rect";
-    cloneProps = horizontalbar(cloneProps);
-  } else if (markType === "simpleline") {
-    markType = "path";
-    cloneProps = areaLine(cloneProps);
-  }
-
   //        let transform = cloneProps['transform'];
@@ -315,5 +95,3 @@ if (props.draggable) {
 
-  if (renderMode === "painty") {
-    actualSVG = painty(markType, cloneProps);
-  } else if (renderMode === "forcePath" && markType === "circle") {
+  if (renderMode === "forcePath" && markType === "circle") {
     cloneProps.d = circlePath(cloneProps.cx || 0, cloneProps.cy || 0, cloneProps.r);
@@ -320,0 +98,0 @@ markType = "path";

package.json

 {
   "name": "semiotic-mark",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Smart data visualization marks for React",
@@ -30,4 +30,3 @@ "main": "lib/index.js",
   "contributors": [
-    "Susie Lu <[e-mail]>",
-    "James J. Womack (@james_womack)"
+    "Susie Lu <[e-mail]>"
   ],
@@ -42,2 +41,4 @@ "license": "Apache-2.0",
     "conventional-recommended-bump": "0.3.0",
+    "d3-interpolate": "^1.3.2",
+    "d3-shape": "^1.3.5",
     "dentist": "1.0.3",
@@ -52,5 +53,5 @@ "enzyme": "3.1.0",
     "less": "2.7.1",
+    "material-design-icons-svg": "1.1.2",
     "material-ui": "v1.0.0-beta.13",
     "material-ui-icons": "1.0.0-beta.15",
-    "material-design-icons-svg": "1.1.2",
     "nyc": "5.5.0",
@@ -65,5 +66,5 @@ "react": "^16.0.0",
     "react-scripts": "1.0.13",
-    "react-tap-event-plugin": "3.0.2",
     "react-test-renderer": "16.0.0",
     "reactstrap": "git://github.com/jameswomack/reactstrap#react-popper_react-dom-16",
+    "roughjs": "^3.1.0",
     "tap-difflet": "0.4.0",
@@ -74,13 +75,8 @@ "tap-notify": "1.0.0",
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0"
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
   },
   "dependencies": {
-    "d3-interpolate": "^1.1.5",
-    "d3-scale": "^1.0.3",
-    "d3-selection": "^1.1.0",
-    "d3-shape": "^1.2.0",
-    "d3-transition": "^1.0.3",
-    "prop-types": "^15.6.0",
-    "roughjs-es5": "0.1.0"
+    "d3-selection": "^1.4.0",
+    "d3-transition": "^1.2.0"
   },
@@ -87,0 +83,0 @@ "nyc": {

No alert changes

Improved metrics

Dependency count

4

decreased by-55.56%

Worsened metrics

Total package byte prevSize

53642

decreased by-24.74%

Dev dependency count

35

increased by6.06%

Number of package files

16

decreased by-5.88%

Lines of code

1085

decreased by-20.75%

Dependency changes

• - Removedd3-interpolate@^1.1.5

• - Removedd3-scale@^1.0.3

• - Removedd3-shape@^1.2.0

• - Removedprop-types@^15.6.0

• - Removedroughjs-es5@0.1.0

• - Removedbabel-runtime@6.26.0(transitive)

• - Removedcore-js@2.6.12(transitive)

• - Removedd3-array@1.2.4(transitive)

• - Removedd3-collection@1.0.7(transitive)

• - Removedd3-format@1.4.5(transitive)

• - Removedd3-path@1.0.9(transitive)

• - Removedd3-scale@1.0.7(transitive)

• - Removedd3-shape@1.3.7(transitive)

• - Removedd3-time@1.1.0(transitive)

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

• - Removedregenerator-runtime@0.11.1(transitive)

• - Removedroughjs-es5@0.1.0(transitive)

• Updatedd3-selection@^1.4.0

• Updatedd3-transition@^1.2.0