diagram-js - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

bower.json

@@ -0,0 +0,0 @@ {

Gruntfile.js

@@ -0,0 +0,0 @@ module.exports = function(grunt) {

lib/commands/AddShapeHandler.js

@@ -0,1 +1,3 @@
+'use strict';
+
 require('../core/ElementRegistry');
@@ -17,3 +19,3 @@
   var paper;
-  
+
   /**
@@ -69,3 +71,3 @@ * Execute add
   // API
-  
+
   this.execute = execute;
@@ -72,0 +74,0 @@ this.revert = revert;

lib/commands/MoveShapesHandler.js

@@ -0,0 +0,0 @@ require('../core/ElementRegistry');

lib/core/Canvas.js

@@ -0,1 +1,3 @@
+'use strict';
+
 var diagramModule = require('../di').defaultModule;
@@ -7,2 +9,3 @@
 
+
 // required components
@@ -19,5 +22,5 @@ require('./EventBus');
 /**
- * Creates a HTML container element for a SVG element with 
+ * Creates a HTML container element for a SVG element with
  * the given configuration
- * 
+
  * @param  {Object} options
@@ -31,3 +34,3 @@ * @return {DOMElement} the container element
   var container = options.container || document.body;
-  
+
   // create a <div> around the svg element with the respective size
@@ -53,3 +56,3 @@ // this way we can always get the correct container size
  * @emits Canvas#canvas.init
- * 
+ *
  * @param {Object} config
@@ -59,6 +62,5 @@ * @param {EventBus} events
  * @param {GraphicsFactory} graphicsFactory
- * @param {ElementRegistry} shapes
+ * @param {ElementRegistry} elementRegistry
  */
-function Canvas(config, events, commandStack, graphicsFactory, shapes) {
-  'use strict';
+function Canvas(config, events, commandStack, graphicsFactory, elementRegistry) {
 
@@ -71,5 +73,5 @@ var options = _.extend(config.canvas || {});
   // by querying the parent node.
-  // 
+  //
   // (It is not possible to get the size of a svg element cross browser @ 2014-04-01)
-  // 
+  //
   // <div class="djs-container" style="width: {desired-width}, height: {desired-height}">
@@ -90,2 +92,16 @@ //   <svg width="100%" height="100%">
   /**
+   * Validate the id of an element, ensuring it is present and not yet assigned
+   */
+  function validateId(element) {
+
+    if (!element.id) {
+      throw new Error('element must have an id');
+    }
+
+    if (elementRegistry.getShapeById(element.id)) {
+      throw new Error('element with id ' + element.id + ' already exists');
+    }
+  }
+
+  /**
    * Adds a shape to the canvas
@@ -101,5 +117,3 @@ *
 
-    if (!shape.id) {
-      throw new Error('shape must have an id');
-    }
+    validateId(shape);
 
@@ -116,3 +130,3 @@ /**
      */
-    
+
     commandStack.execute('shape.add', { shape: shape });
@@ -131,5 +145,5 @@
    * @method Canvas#addConnection
-   * 
+   *
    * @param {djs.ElementDescriptor} connection a descriptor for the connection
-   * 
+   *
    * @return {Canvas} the canvas api
@@ -139,5 +153,3 @@ */
 
-    if (!connection.id) {
-      throw new Error('connection must have an id');
-    }
+    validateId(connection);
 
@@ -150,3 +162,3 @@ var gfx = graphicsFactory.createConnection(paper, connection);
      * @memberOf Canvas
-     * 
+     *
      * @event connection.added
@@ -170,3 +182,3 @@ * @type {Object}
    * @method Canvas#sendToFront
-   * 
+   *
    * @param {djs.ElementDescriptor} shape descriptor of the shape to be sent to front
@@ -201,7 +213,7 @@ * @param {boolean} bubble=true whether to send parent shapes to front, too
    * @method Canvas#getGraphics
-   * 
+   *
    * @param {djs.ElementDescriptor} element descriptor of the element
    */
   function getGraphics(element) {
-    return shapes.getGraphicsByShape(element);
+    return elementRegistry.getGraphicsByShape(element);
   }
@@ -213,3 +225,3 @@
    * @method Canvas#getPaper
-   * 
+   *
    * @returns {snapsvg.Paper} the global paper object
@@ -253,3 +265,3 @@ */
    * @method Canvas#viewbox
-   * 
+   *
    * @param  {Object} [box] the new view box to set
@@ -267,3 +279,3 @@ * @return {Object} the current view box
       }
-      
+
       accuracy = accuracy || 100;
@@ -282,3 +294,3 @@ return Math.round(i * accuracy) / accuracy;
     var outer = getSize(svg);
-    
+
     if (box === undefined) {
@@ -306,8 +318,8 @@ box = parseViewBox(svg.getAttribute('viewBox'));
    * Gets or sets the scroll of the canvas.
-   * 
+   *
    * @param {Object} [delta] the new scroll to apply.
-   * 
+   *
    * @param {Number} [delta.dx]
    * @param {Number} [delta.dy]
-   * 
+   *
    * @return {Point} the new scroll
@@ -338,7 +350,7 @@ */
    * @method Canvas#zoom
-   * 
+   *
    * @param {String|Number} [newScale] the new zoom level, either a number, i.e. 0.9,
    *                                   or `fit-viewport` to adjust the size to fit the current viewport
    * @param {String|Point} [center] the reference point { x: .., y: ..} to zoom to, 'auto' to zoom into mid or null
-   * 
+   *
    * @return {Number} the current scale
@@ -373,3 +385,3 @@ */
       // zoom to center (i.e. simulate a maps like behavior)
-      
+
       // center on old zoom
@@ -406,18 +418,4 @@ var pox = center.x / vbox.scale + vbox.x;
 
-  /**
-   * Add event listener to paper.
-   */
-  function addListener(id, eventListener) {
-    paper.node.addEventListener(id, eventListener);
-  }
+  events.on('diagram.init', function(event) {
 
-  /**
-   * Remove event from paper.
-   */
-  function removeListener(id, eventListener) {
-    paper.node.removeEventListener(id, eventListener);
-  }
-
-  events.on('diagram.init', function(event) {
-    
     /**
@@ -427,5 +425,5 @@ * An event indicating that the canvas is ready to be drawn on.
      * @memberOf Canvas
-     * 
+     *
      * @event canvas.init
-     * 
+     *
      * @type {Object}
@@ -443,3 +441,3 @@ * @property {snapsvg.Paper} paper the initialized drawing paper
     }
-    
+
     container = null;
@@ -449,15 +447,14 @@ paper = null;
 
+  this.zoom = zoom;
+  this.scroll = scroll;
 
-  return {
-    zoom: zoom,
-    scroll: scroll,
-    viewbox: viewbox,
-    addShape: addShape,
-    addConnection: addConnection,
-    getPaper: getPaper,
-    getGraphics: getGraphics,
-    sendToFront: sendToFront,
-    addListener: addListener,
-    removeListener: removeListener
-  };
+  this.viewbox = viewbox;
+  this.addShape = addShape;
+
+  this.addConnection = addConnection;
+  this.getPaper = getPaper;
+
+  this.getGraphics = getGraphics;
+
+  this.sendToFront = sendToFront;
 }
@@ -464,0 +461,0 @@

lib/core/CommandStack.js

@@ -0,0 +0,0 @@ var diagramModule = require('../di').defaultModule;

lib/core/ElementRegistry.js

@@ -0,0 +0,0 @@ var diagramModule = require('../di').defaultModule;

lib/core/EventBus.js

@@ -0,0 +0,0 @@ var diagramModule = require('../di').defaultModule;

lib/core/GraphicsFactory.js

@@ -11,3 +11,3 @@ var diagramModule = require('../di').defaultModule;
  * A factory that creates graphical elements
- * 
+ *
  * @param {EventBus} events
@@ -36,2 +36,6 @@ * @param {Renderer} renderer
 
+    if (data.hidden) {
+      parent.attr('visibility', 'hidden');
+    }
+
     return parent;
@@ -45,3 +49,3 @@ }
     gfx.addClass('djs-visual');
-    
+
     return parent;
@@ -59,3 +63,3 @@ }
   }
-  
+
   // API
@@ -62,0 +66,0 @@ this.createConnection = createConnection;

lib/di.js

@@ -0,0 +0,0 @@ var di = require('didi');

lib/Diagram.js

@@ -0,0 +0,0 @@ var di = require('./di');

lib/draw/Renderer.js

@@ -0,0 +0,0 @@ 'use strict';

lib/draw/Snap.js

@@ -0,0 +0,0 @@ var diagramModule = require('../di').defaultModule;

lib/draw/snapsvg-extensions.js

@@ -0,0 +0,0 @@ var Snap = require('snapsvg');

lib/draw/Styles.js

@@ -0,0 +0,0 @@ var diagramModule = require('../di').defaultModule;

lib/features/Bendpoints.js

@@ -0,0 +0,0 @@ require('../core/EventBus');

lib/features/Draggable.js

@@ -0,0 +0,0 @@ var _ = require('lodash'),

lib/features/InteractionEvents.js

@@ -0,0 +0,0 @@ require('../core/EventBus');

lib/features/move/index.js

@@ -0,0 +0,0 @@ var diagramModule = require('../../di').defaultModule;

lib/features/move/MoveEvents.js

@@ -0,0 +0,0 @@ var _ = require('lodash');

lib/features/move/MoveVisuals.js

@@ -0,0 +0,0 @@ require('../../core/EventBus');

lib/features/Outline.js

@@ -0,0 +0,0 @@ require('../core/EventBus');

lib/features/selection/Service.js

@@ -0,0 +0,0 @@ require('../../core/EventBus');

lib/features/selection/Visuals.js

@@ -0,0 +0,0 @@ require('../../core/EventBus');

lib/features/services/PaletteDragDrop.js

@@ -0,5 +1,9 @@
+'use strict';
+
 var Diagram = require('../../Diagram'),
-    ShapeUtil = require('../../util/ShapeUtil'),
-    _ = require('lodash');
+    ShapeUtil = require('../../util/ShapeUtil');
 
+var _ = require('lodash');
+
+
 /**
@@ -15,4 +19,3 @@ * @namespace djs
  */
-function PaletteDragDrop(canvas, events, shapes) {
-  'use strict';
+function PaletteDragDrop(canvas, events, elementRegistry) {
 
@@ -28,4 +31,7 @@ var dragInProgress = false;
     // the event if left button is pressed
-    canvas.addListener('mousemove', paletteMoveListener);
-    canvas.addListener('mouseup', canvasOnMouseUp);
+
+    var paper = canvas.getPaper();
+    paper.node.addEventListener('mousemove', paletteMoveListener);
+    paper.node.addEventListener('mouseup', canvasOnMouseUp);
+
     document.addEventListener('mouseup', canvasOnMouseUpAnywhere);
@@ -32,0 +38,0 @@ document.addEventListener('keyup', onEscapeKey);

lib/features/services/Rules.js

@@ -0,0 +0,0 @@ require('../../core/EventBus');

lib/features/StandardPalette.js

@@ -0,0 +0,0 @@ var Diagram = require('../Diagram'),

lib/util/EventEmitter.js

@@ -0,0 +0,0 @@ // Copyright Joyent, Inc. and other Node contributors.

lib/util/IdGenerator.js

@@ -0,0 +0,0 @@ function IdGenerator(prefix) {

lib/util/LabelUtil.js

@@ -0,0 +0,0 @@ var _ = require('lodash');

lib/util/ShapeUtil.js

@@ -0,0 +0,0 @@ var _ = require('lodash');

lib/util/SvgUtil.js

@@ -0,0 +0,0 @@ /**

package.json

 {
   "name": "diagram-js",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "A modeling framework for the web",
@@ -5,0 +5,0 @@ "main": "lib/Diagram.js",

README.md

@@ -0,0 +0,0 @@ # diagram.js

test/config/karma.unit.js

@@ -0,0 +0,0 @@ module.exports = function(karma) {

test/Matchers.js

@@ -0,0 +0,0 @@ var _ = require('lodash');

test/spec/commands/MoveShapesHandlerSpec.js

@@ -0,0 +0,0 @@ require('../../../lib/core/EventBus');

test/spec/core/CanvasSpec.js

@@ -60,2 +60,3 @@
 
+
     it('should fire <shape.added> event', inject(function(canvas, eventBus) {
@@ -86,7 +87,7 @@
         fail('expected exception');
-      }).toThrowError('shape must have an id');
+      }).toThrowError('element must have an id');
     }));
 
 
-    it('should fail when adding shape#id twice', inject(function(canvas) {
+    it('should fail when adding shape#id twice', inject(function(canvas, elementRegistry) {
 
@@ -102,56 +103,76 @@ // given
         fail('expected exception');
-      }).toThrowError('shape with id FOO already added');
+      }).toThrowError('element with id FOO already exists');
+
     }));
 
 
-    it('should undo add of shape', inject(function(canvas, commandStack, elementRegistry) {
+    it('should add element hidden', inject(function(canvas, elementRegistry) {
 
       // given
-      var s1 = { id: 's1', x: 10, y: 20, width: 50, height: 50 };
-      var s2 = { id: 's2', x: 10, y: 20, width: 50, height: 50, parent: s1 };
-      var s3 = { id: 's3', x: 10, y: 20, width: 50, height: 50, parent: s1 };
+      var shape = { id: 'FOO', x: 10, y: 10, width: 50, height: 50, hidden: true };
 
-      canvas
-        .addShape(s1)
-        .addShape(s2)
-        .addShape(s3);
-
       // when
-      commandStack.undo();
-      commandStack.undo();
+      canvas.addShape(shape);
 
+      var gfx = elementRegistry.getGraphicsByShape(shape);
+
       // then
-      expect(elementRegistry.getShapeById('s2')).not.toBeDefined();
-      expect(elementRegistry.getShapeById('s3')).not.toBeDefined();
+      expect(gfx.attr('visibility')).toBe('hidden');
     }));
 
 
-    it('should redo add of shape', inject(function(canvas, commandStack, elementRegistry) {
+    describe('undo / redo', function() {
 
-      // given
-      var s1 = { id: 's1', x: 10, y: 20, width: 50, height: 50 };
-      var s2 = { id: 's2', x: 10, y: 20, width: 50, height: 50, parent: s1 };
-      var s3 = { id: 's3', x: 10, y: 20, width: 50, height: 50, parent: s1 };
+      it('should undo add of shape', inject(function(canvas, commandStack, elementRegistry) {
 
-      canvas
-        .addShape(s1)
-        .addShape(s2)
-        .addShape(s3);
+        // given
+        var s1 = { id: 's1', x: 10, y: 20, width: 50, height: 50 };
+        var s2 = { id: 's2', x: 10, y: 20, width: 50, height: 50, parent: s1 };
+        var s3 = { id: 's3', x: 10, y: 20, width: 50, height: 50, parent: s1 };
 
-      // when
-      commandStack.undo();
-      commandStack.undo();
-      commandStack.redo();
-      commandStack.undo();
-      commandStack.redo();
-      commandStack.redo();
+        canvas
+          .addShape(s1)
+          .addShape(s2)
+          .addShape(s3);
 
-      // then
-      expect(elementRegistry.getShapeById('s2')).toEqual(s2);
-      expect(elementRegistry.getShapeById('s3')).toEqual(s3);
+        // when
+        commandStack.undo();
+        commandStack.undo();
 
-      expect(s2.parent).toEqual(s1);
-      expect(s3.parent).toEqual(s1);
-    }));
+        // then
+        expect(elementRegistry.getShapeById('s2')).not.toBeDefined();
+        expect(elementRegistry.getShapeById('s3')).not.toBeDefined();
+      }));
 
+
+      it('should redo add of shape', inject(function(canvas, commandStack, elementRegistry) {
+
+        // given
+        var s1 = { id: 's1', x: 10, y: 20, width: 50, height: 50 };
+        var s2 = { id: 's2', x: 10, y: 20, width: 50, height: 50, parent: s1 };
+        var s3 = { id: 's3', x: 10, y: 20, width: 50, height: 50, parent: s1 };
+
+        canvas
+          .addShape(s1)
+          .addShape(s2)
+          .addShape(s3);
+
+        // when
+        commandStack.undo();
+        commandStack.undo();
+        commandStack.redo();
+        commandStack.undo();
+        commandStack.redo();
+        commandStack.redo();
+
+        // then
+        expect(elementRegistry.getShapeById('s2')).toEqual(s2);
+        expect(elementRegistry.getShapeById('s3')).toEqual(s3);
+
+        expect(s2.parent).toEqual(s1);
+        expect(s3.parent).toEqual(s1);
+      }));
+
+    });
+
   });
@@ -158,0 +179,0 @@

test/spec/core/CommandStackSpec.js

@@ -0,0 +0,0 @@ var CommandStack = require('../../../lib/core/CommandStack'),

test/spec/core/ElementRegistrySpec.js

@@ -0,0 +0,0 @@ var EventBus = require('../../../lib/core/EventBus'),

test/spec/core/EventBusSpec.js

@@ -0,0 +0,0 @@ var Events = require('../../../lib/core/EventBus');

test/spec/DiagramSpec.js

@@ -0,0 +0,0 @@ var Diagram = require('../../lib/Diagram');

test/spec/draw/StylesSpec.js

@@ -0,0 +0,0 @@ var Styles = require('../../../lib/draw/Styles'),

test/spec/environment/MockingSpec.js

@@ -0,0 +0,0 @@ var Events = require('../../../lib/core/EventBus');

test/spec/features/BendpointsSpec.js

@@ -0,0 +0,0 @@ var Events = require('../../../lib/features/Bendpoints');

test/spec/features/move/MoveVisualsSpec.js

@@ -0,0 +0,0 @@ var Events = require('../../../../lib/features/move');

test/spec/features/selection/VisualsSpec.js

@@ -0,0 +0,0 @@ var Events = require('../../../../lib/features/selection/Visuals');

test/spec/features/services/PaletteDragDropSpec.js

@@ -16,7 +16,19 @@ var PaletteDragDrop = require('../../../../lib/features/services/PaletteDragDrop');
     mockEvents = new Events();
+
+    var listeners = {};
+
     canvas = {
-      listeners: {},
-      addListener: function(lname, listener) {
-        this.listeners[lname] = listener;
-      }};
+      getPaper: function() {
+        return {
+          node: {
+            addEventListener: function(lname, listener) {
+              listeners[lname] = listener;
+            }
+          }
+        };
+      }
+    };
+
+    canvas.listeners = listeners;
+
     pdd = new PaletteDragDrop(canvas, mockEvents, 'elementRegistry');
@@ -23,0 +35,0 @@

test/spec/util/LabelUtilSpec.js

@@ -0,0 +0,0 @@ var _ = require('lodash');

test/spec/util/ShapeUtilSpec.js

@@ -0,0 +0,0 @@ var ShapeUtil = require('../../../lib/util/ShapeUtil');

test/TestHelper.js

@@ -0,0 +0,0 @@ var _ = require('lodash');

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

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

Improved metrics

Lines of code

4709

increased by0.3%

Worsened metrics

Total package byte prevSize

157098

decreased by-9.03%

Number of package files

60

decreased by-4.76%

No dependency changes