diagram-js-origin - npm Package Compare versions

Comparing version 0.15.2 to 0.16.0

lib/configure-origin.js

@@ -7,59 +7,112 @@ 'use strict';
 
-function ConfigureOrigin(canvas) {
+var HIGH_COLOR= '#CCC',
+    LOW_COLOR = '#F6F6F6';
 
-  var base = canvas.getLayer('bg');
 
-  var g = svgCreate('g');
+/**
+ * A diagram-js extension that shows a (0, 0) origin indicator
+ * on the canvas as well as (optionally) the canvas borders.
+ *
+ * @param {Object} [config]
+ * @param {Canvas} canvas
+ */
+function ConfigureOrigin(config, canvas) {
 
-  svgAppend(base, g);
+  config = config || {};
 
   var w = 30, h = 2,
-      style = {
-        'fill': '#CCC',
-        'pointer-events': 'none'
-      };
+      w_half = w / 2,
+      s = -h / 2,
+      lineStart = w_half + 7;
 
-  // two rectangles that mark the diagram origin
-  var horizontal = svgCreate('rect');
+  var g,
+      line,
+      cross,
+      label;
 
-  svgAttr(horizontal, {
-    x: w / -2 - 1,
-    y: h / -2 - 1,
-    width: w,
-    height: h,
-    rx: h / 2
+  g = createEl('g', {
+    'pointer-events': 'none'
   });
-  svgAttr(horizontal, style);
 
-  svgAppend(g, horizontal);
+  svgAppend(canvas.getLayer('bg'), g);
 
-  var vertical = svgCreate('rect');
+  if (config.showBorder !== false) {
 
-  svgAttr(vertical, {
-    x: h / -2 - 1,
-    y: w / -2 - 1,
-    width: h,
-    height: w,
-    rx: h / 2
+    // the dashed lines, marking positive document coordinates
+    line = createEl('path', {
+      'class': cls('border'),
+      'd': path([
+        'M', -lineStart, s,
+        'H', -1000,
+        'M', lineStart, s,
+        'H', 6000,
+        'M', s, -lineStart,
+        'V', -1000,
+        'M', s, lineStart,
+        'V', 3000
+      ]),
+      'fill': 'none',
+      'stroke': LOW_COLOR,
+      'stroke-width': h + 'px',
+      'stroke-dasharray': '6, 6',
+      'shape-rendering': 'crispedges'
+    });
+
+    svgAppend(g, line);
+  }
+
+  // the cross that marks the diagram origin
+  cross = createEl('path', {
+    d: path([
+      'M', -w_half, s,
+      'H', w_half,
+      'M', s, -w_half,
+      'V', w_half
+    ]),
+    'class': cls('cross'),
+    'fill': 'none',
+    'stroke': HIGH_COLOR,
+    'stroke-width': h + 'px',
+    'stroke-linecap': 'round'
   });
-  svgAttr(vertical, style);
 
-  svgAppend(g, vertical);
+  svgAppend(g, cross);
 
-  var text = svgCreate('text');
-
-  svgAttr(text, {
+  label = createEl('text', {
     x: -40,
-    y: -10
+    y: -10,
+    fill: HIGH_COLOR,
+    'class': cls('label'),
   });
 
-  text.textContent = '(0, 0)';
+  label.textContent = '(0, 0)';
 
-  svgAttr(text, style);
+  svgAppend(g, label);
+}
 
-  svgAppend(g, text);
+ConfigureOrigin.$inject = [
+  'config.origin',
+  'canvas'
+];
+
+module.exports = ConfigureOrigin;
+
+
+/////////// helpers ///////////////////////////////////
+
+function path(parts) {
+  return parts.join(' ');
 }
 
-ConfigureOrigin.$inject = [ 'canvas' ];
+function cls(name) {
+  return 'djs-origin-' + name;
+}
 
-module.exports = ConfigureOrigin;
+function createEl(type, attrs) {
+
+  var el = svgCreate(type);
+
+  svgAttr(el, attrs);
+
+  return el;
+}

package.json

 {
   "name": "diagram-js-origin",
-  "version": "0.15.2",
+  "version": "0.16.0",
   "description": "A origin crosshair for diagram-js",
   "scripts": {
-    "all": "grunt",
-    "dev": "grunt auto-test",
-    "test": "grunt test"
+    "all": "run-s lint test",
+    "lint": "eslint .",
+    "dev": "npm test -- --auto-watch --no-single-run",
+    "test": "karma start"
   },
@@ -21,27 +22,24 @@ "repository": {
   "dependencies": {
-    "tiny-svg": "^0.1.0"
+    "tiny-svg": "^0.1.3"
   },
   "devDependencies": {
     "brfs": "^1.2.0",
-    "chai": "^1.9.1",
-    "diagram-js": "^0.17.0",
-    "grunt": "~0.4.4",
-    "grunt-cli": "^1.2.0",
-    "grunt-contrib-jshint": "~0.7.2",
-    "grunt-karma": "^2.0.0",
-    "grunt-release": "~0.13.0",
+    "browserify": "^14.5.0",
+    "chai": "^4.1.2",
+    "diagram-js": "^0.24.0",
+    "eslint": "^4.13.1",
+    "eslint-plugin-mocha": "^4.11.0",
     "jsondiffpatch": "^0.1.8",
-    "karma": "^1.3.0",
-    "karma-browserify": "^4.0.0",
+    "karma": "^1.7.1",
+    "karma-browserify": "^5.1.2",
     "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^2.0.0",
+    "karma-chrome-launcher": "^2.2.0",
     "karma-firefox-launcher": "^1.0.0",
     "karma-ie-launcher": "~0.1.4",
-    "karma-mocha": "^0.1.7",
-    "karma-phantomjs-launcher": "^1.0.2",
-    "load-grunt-tasks": "~0.3.0",
-    "mocha": "^1.21.4",
+    "karma-mocha": "^1.3.0",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "mocha": "^4.0.1",
     "mocha-test-container-support": "^0.1.0",
-    "phantomjs": "^2.1.7",
-    "time-grunt": "~0.3.0"
+    "npm-run-all": "^4.1.2",
+    "watchify": "^3.9.0"
   },
@@ -48,0 +46,0 @@ "peerDependencies": {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9736

5.83%

Dev dependency count

19

-13.64%

Lines of code

157

16.3%

Number of low supply chain risk alerts

0

-100%

Worsened metrics

Number of package files

9

-18.18%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• Updated

  tiny-svg@^0.1.3