diagram-js - npm Package Compare versions

Comparing version 12.4.0 to 12.5.0

lib/core/GraphicsFactory.d.ts

@@ -37,6 +37,7 @@ /**
    * @param element The shape.
+   * @param attrs Optional attributes.
    *
    * @return
    */
-  drawShape(visual: SVGElement, element: ShapeLike): SVGElement;
+  drawShape(visual: SVGElement, element: ShapeLike, attrs?: any): SVGElement;
 
@@ -57,6 +58,7 @@ /**
    * @param element The connection.
+   * @param attrs Optional attributes.
    *
    * @return
    */
-  drawConnection(visual: SVGElement, element: ConnectionLike): SVGElement;
+  drawConnection(visual: SVGElement, element: ConnectionLike, attrs?: any): SVGElement;
 
@@ -63,0 +65,0 @@ /**

lib/core/GraphicsFactory.js

@@ -205,9 +205,10 @@ import {
  * @param {ShapeLike} element The shape.
+ * @param {Object} attrs Optional attributes.
  *
  * @return {SVGElement}
  */
-GraphicsFactory.prototype.drawShape = function(visual, element) {
+GraphicsFactory.prototype.drawShape = function(visual, element, attrs = {}) {
   var eventBus = this._eventBus;
 
-  return eventBus.fire('render.shape', { gfx: visual, element: element });
+  return eventBus.fire('render.shape', { gfx: visual, element, attrs });
 };
@@ -233,9 +234,10 @@
  * @param {ConnectionLike} element The connection.
+ * @param {Object} attrs Optional attributes.
  *
  * @return {SVGElement}
  */
-GraphicsFactory.prototype.drawConnection = function(visual, element) {
+GraphicsFactory.prototype.drawConnection = function(visual, element, attrs = {}) {
   var eventBus = this._eventBus;
 
-  return eventBus.fire('render.connection', { gfx: visual, element: element });
+  return eventBus.fire('render.connection', { gfx: visual, element, attrs });
 };
@@ -242,0 +244,0 @@

lib/features/bendpoints/BendpointMovePreview.js

@@ -28,3 +28,3 @@ import {
     MARKER_CONNECT_UPDATING = 'djs-updating',
-    MARKER_ELEMENT_HIDDEN = 'djs-element-hidden';
+    MARKER_DRAGGER = 'djs-dragging';
 
@@ -69,3 +69,3 @@ var HIGH_PRIORITY = 1100;
 
-    canvas.addMarker(connection, MARKER_ELEMENT_HIDDEN);
+    canvas.addMarker(connection, MARKER_DRAGGER);
     canvas.addMarker(connection, MARKER_CONNECT_UPDATING);
@@ -200,3 +200,3 @@ });
     canvas.removeMarker(connection, MARKER_CONNECT_UPDATING);
-    canvas.removeMarker(connection, MARKER_ELEMENT_HIDDEN);
+    canvas.removeMarker(connection, MARKER_DRAGGER);
 
@@ -203,0 +203,0 @@ if (hover) {

lib/features/connection-preview/ConnectionPreview.js

@@ -37,3 +37,3 @@ import {
 
-var MARKER_CONNECTION_PREVIEW = 'djs-connection-preview';
+var MARKER_CONNECTION_PREVIEW = 'djs-dragger';
 
@@ -154,3 +154,5 @@ /**
 
-  this._graphicsFactory.drawConnection(connectionPreviewGfx, connection);
+  this._graphicsFactory.drawConnection(connectionPreviewGfx, connection, {
+    stroke: 'var(--element-dragger-color)'
+  });
 };
@@ -157,0 +159,0 @@

lib/features/context-pad/ContextPad.d.ts

@@ -56,3 +56,3 @@ /**
   /**
-   * Trigger context pad entry entry.
+   * Trigger action on context pad entry entry, e.g. click, mouseover or mouseout.
    *
@@ -59,0 +59,0 @@ * @param entryId

lib/features/context-pad/ContextPad.js

@@ -58,2 +58,3 @@ import {
 var CONTEXT_PAD_PADDING = 12;
+var HOVER_DELAY = 300;
 
@@ -233,2 +234,16 @@ /**
 
+  if (action === 'mouseover') {
+    this._timeout = setTimeout(() => {
+      this._mouseout = this.triggerEntry(entry, 'hover', originalEvent, autoActivate);
+    }, HOVER_DELAY);
+  } else if (action === 'mouseout') {
+    clearTimeout(this._timeout);
+
+    if (this._mouseout) {
+      this._mouseout();
+
+      this._mouseout = null;
+    }
+  }
+
   return this.triggerEntry(entry, action, originalEvent, autoActivate);
@@ -238,3 +253,3 @@ };
 /**
- * Trigger context pad entry entry.
+ * Trigger action on context pad entry entry, e.g. click, mouseover or mouseout.
  *
@@ -397,2 +412,10 @@ * @param {string} entryId
 
+  domDelegate.bind(html, entrySelector, 'mouseover', function(event) {
+    self.trigger('mouseover', event);
+  });
+
+  domDelegate.bind(html, entrySelector, 'mouseout', function(event) {
+    self.trigger('mouseout', event);
+  });
+
   // stop propagation of mouse events
@@ -399,0 +422,0 @@ domEvent.bind(html, 'mousedown', function(event) {

lib/features/copy-paste/CopyPaste.js

@@ -214,3 +214,3 @@ import {
  * @param {Shape} [context.element] The optional parent.
- * @param {Point} [context.point] The optional osition.
+ * @param {Point} [context.point] The optional position.
  * @param {Object} [context.hints] The optional hints.
@@ -217,0 +217,0 @@ */

lib/features/preview-support/PreviewSupport.d.ts

@@ -16,2 +16,4 @@ /**
 
+  cleanUp(): void;
+
   /**
@@ -32,6 +34,7 @@ * Returns graphics of an element.
    * @param gfx The optional graphical element of the element.
+   * @param className The optional class name to add to the preview.
    *
    * @return The preview.
    */
-  addDragger(element: Element, group: SVGElement, gfx?: SVGElement): SVGElement;
+  addDragger(element: Element, group: SVGElement, gfx?: SVGElement, className?: string): SVGElement;
 
@@ -38,0 +41,0 @@ /**

lib/features/preview-support/PreviewSupport.js

@@ -64,7 +64,3 @@ import {
   eventBus.on('drag.cleanup', function() {
-    forEach(self._clonedMarkers, function(clonedMarker) {
-      svgRemove(clonedMarker);
-    });
-
-    self._clonedMarkers = {};
+    self.cleanUp();
   });
@@ -80,3 +76,12 @@ }
 
+PreviewSupport.prototype.cleanUp = function() {
+  var self = this;
 
+  forEach(self._clonedMarkers, function(clonedMarker) {
+    svgRemove(clonedMarker);
+  });
+
+  self._clonedMarkers = {};
+};
+
 /**
@@ -99,6 +104,7 @@ * Returns graphics of an element.
  * @param {SVGElement} [gfx] The optional graphical element of the element.
+ * @param {string} [className="djs-dragger"] The optional class name to add to the preview.
  *
  * @return {SVGElement} The preview.
  */
-PreviewSupport.prototype.addDragger = function(element, group, gfx) {
+PreviewSupport.prototype.addDragger = function(element, group, gfx, className = 'djs-dragger') {
   gfx = gfx || this.getGfx(element);
@@ -109,5 +115,5 @@
 
-  this._cloneMarkers(getVisual(dragger));
+  this._cloneMarkers(getVisual(dragger), className);
 
-  svgAttr(dragger, this._styles.cls('djs-dragger', [], {
+  svgAttr(dragger, this._styles.cls(className, [], {
     x: bbox.top,
@@ -119,2 +125,4 @@ y: bbox.left
 
+  svgAttr(dragger, 'data-preview-support-element-id', element.id);
+
   return dragger;
@@ -143,2 +151,4 @@ };
 
+  svgAttr(frame, 'data-preview-support-element-id', shape.id);
+
   return frame;
@@ -151,4 +161,5 @@ };
  * @param {SVGElement} gfx
+ * @param {string} [className="djs-dragger"]
  */
-PreviewSupport.prototype._cloneMarkers = function(gfx) {
+PreviewSupport.prototype._cloneMarkers = function(gfx, className = 'djs-dragger') {
   var self = this;
@@ -162,3 +173,3 @@
       // recursively clone markers of child nodes
-      self._cloneMarkers(gfx.childNodes[ i ]);
+      self._cloneMarkers(gfx.childNodes[ i ], className);
     }
@@ -175,3 +186,3 @@ }
 
-      self._cloneMarker(gfx, marker, markerType);
+      self._cloneMarker(gfx, marker, markerType, className);
     }
@@ -187,5 +198,6 @@ });
  * @param {string} markerType
+ * @param {string} [className="djs-dragger"]
  */
-PreviewSupport.prototype._cloneMarker = function(gfx, marker, markerType) {
-  var markerId = marker.id;
+PreviewSupport.prototype._cloneMarker = function(gfx, marker, markerType, className = 'djs-dragger') {
+  var markerId = marker.id + '-' + className;
 
@@ -201,5 +213,3 @@ var clonedMarker = this._clonedMarkers[ markerId ];
 
-    svgClasses(clonedMarker)
-      .add('djs-dragger')
-      .add('djs-dragger-marker');
+    svgClasses(clonedMarker).add(className);
 
@@ -206,0 +216,0 @@ this._clonedMarkers[ markerId ] = clonedMarker;

lib/features/space-tool/SpaceTool.js

@@ -246,3 +246,3 @@ import {
 
-  if (hasSecondaryModifier(event) && event.hover) {
+  if (!hasSecondaryModifier(event) && event.hover) {
     root = event.hover;
@@ -249,0 +249,0 @@ }

package.json

 {
   "name": "diagram-js",
-  "version": "12.4.0",
+  "version": "12.5.0",
   "description": "A toolbox for displaying and modifying diagrams on the web",
@@ -5,0 +5,0 @@ "main": "lib/Diagram.js",

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

962757

increased by0.77%

Number of package files

439

increased by0.92%

Lines of code

33376

increased by0.65%

No dependency changes