diagram-js - npm Package Compare versions

Comparing version 11.0.0-aplha.0 to 11.0.0

lib/core/ElementRegistry.js

@@ -45,3 +45,3 @@ var ELEMENT_ID = 'data-element-id';
  *
- * @param {djs.model.Base} element
+ * @param {string|djs.model.Base} element
  */
@@ -69,3 +69,3 @@ ElementRegistry.prototype.remove = function(element) {
  *
- * @param {djs.model.Base} element
+ * @param {string|djs.model.Base} element
  * @param {string} newId
@@ -99,3 +99,3 @@ */
  *
- * @param {djs.model.Base} element
+ * @param {string|djs.model.Base} element
  * @param {SVGElement} gfx
@@ -102,0 +102,0 @@ * @param {boolean} [secondary=false] whether to update the secondary connected element

lib/features/dragging/Dragging.js

@@ -28,2 +28,4 @@ var round = Math.round;
 
+import { isKey } from '../keyboard/KeyboardUtil';
+
 var DRAG_ACTIVE_CLS = 'djs-drag-active';
@@ -286,3 +288,3 @@
 
-    if (event.which === 27) {
+    if (isKey('Escape')) {
       preventDefault(event);
@@ -289,0 +291,0 @@

lib/features/hand-tool/HandTool.js

@@ -158,3 +158,3 @@ import {
 function isSpace(keyEvent) {
-  return isKey(' ', keyEvent);
+  return isKey('Space', keyEvent);
 }

lib/features/keyboard/KeyboardBindings.js

@@ -12,13 +12,8 @@ import {
 
-export var KEYCODE_C = 67;
-export var KEYCODE_V = 86;
-export var KEYCODE_Y = 89;
-export var KEYCODE_Z = 90;
+export var KEYS_COPY = [ 'c', 'C', 'KeyC' ];
+export var KEYS_PASTE = [ 'v', 'V', 'KeyV' ];
+export var KEYS_REDO = [ 'y', 'Y', 'KeyY' ];
+export var KEYS_UNDO = [ 'z', 'Z', 'KeyZ' ];
 
-export var KEYS_COPY = [ 'c', 'C', KEYCODE_C ];
-export var KEYS_PASTE = [ 'v', 'V', KEYCODE_V ];
-export var KEYS_REDO = [ 'y', 'Y', KEYCODE_Y ];
-export var KEYS_UNDO = [ 'z', 'Z', KEYCODE_Z ];
 
-
 /**
@@ -25,0 +20,0 @@ * Adds default keyboard bindings.

lib/features/keyboard/KeyboardUtil.js

 import { isArray } from 'min-dash';
 
-var KEYCODE_C = 67;
-var KEYCODE_V = 86;
-var KEYCODE_Y = 89;
-var KEYCODE_Z = 90;
+var KEYS_COPY = [ 'c', 'C', 'KeyC' ];
+var KEYS_PASTE = [ 'v', 'V', 'KeyV' ];
+var KEYS_REDO = [ 'y', 'Y', 'KeyY' ];
+var KEYS_UNDO = [ 'z', 'Z', 'KeyZ' ];
 
-var KEYS_COPY = [ 'c', 'C', KEYCODE_C ];
-var KEYS_PASTE = [ 'v', 'V', KEYCODE_V ];
-var KEYS_REDO = [ 'y', 'Y', KEYCODE_Y ];
-var KEYS_UNDO = [ 'z', 'Z', KEYCODE_Z ];
-
 /**
@@ -44,3 +39,3 @@ * Returns true if event was triggered with any modifier
 
-  return keys.indexOf(event.key) !== -1 || keys.indexOf(event.keyCode) !== -1;
+  return keys.indexOf(event.key) !== -1 || keys.indexOf(event.code) !== -1;
 }
@@ -47,0 +42,0 @@

lib/features/popup-menu/PopupMenu.js

@@ -9,2 +9,3 @@ import {
   remove as domRemove,
+  closest as domClosest,
   attr as domAttr
@@ -106,2 +107,3 @@ } from 'min-dom';
   const onClose = result => this.close(result);
+  const onSelect = (event, entry) => this.trigger(event, entry);
 
@@ -111,2 +113,3 @@ render(html`
       onClose=${ onClose }
+      onSelect=${ onSelect }
       position=${ position }
@@ -480,6 +483,7 @@ className=${ className }
  * @param {Object} event
+ * @param {Object} entry
  *
  * @return the result of the action callback, if any
  */
-PopupMenu.prototype.trigger = function(event) {
+PopupMenu.prototype.trigger = function(event, entry) {
 
@@ -489,6 +493,8 @@ // silence other actions
 
-  var element = event.delegateTarget || event.target,
-      entryId = domAttr(element, DATA_REF);
+  if (!entry) {
+    let element = domClosest(event.delegateTarget || event.target, '.entry', true);
+    let entryId = domAttr(element, DATA_REF);
 
-  var entry = this._getEntry(entryId);
+    entry = this._getEntry(entryId);
+  }
 
@@ -509,3 +515,3 @@ if (entry.action) {
 
-  var entry = this._current.entries[entryId];
+  var entry = this._current.entries[entryId] || this._current.headerEntries[entryId];
 
@@ -512,0 +518,0 @@

lib/features/popup-menu/PopupMenuComponent.js

@@ -7,4 +7,3 @@ import {
   html,
-  useMemo,
-  useCallback
+  useMemo
 } from '../../ui';
@@ -16,2 +15,3 @@
 
+
 /**
@@ -33,2 +33,3 @@ * A component that renders the popup menus.
     onClose,
+    onSelect,
     className,
@@ -43,11 +44,5 @@ headerEntries,
 
-  const onSelect = useCallback((event, entry, shouldClose = true) => {
-    entry.action(event, entry);
-
-    shouldClose && onClose();
-  }, [ onClose ]);
-
   const searchable = useMemo(() => {
-    if (isDefined(search)) {
-      return !!search;
+    if (!isDefined(search)) {
+      return false;
     }
@@ -59,3 +54,2 @@
   const inputRef = useRef();
-  const resultsRef = useRef();
 
@@ -126,16 +120,2 @@ const [ value, setValue ] = useState('');
 
-  // scroll to keyboard selected result
-  useLayoutEffect(() => {
-    const containerEl = resultsRef.current;
-
-    if (!containerEl)
-      return;
-
-    const selectedEl = containerEl.querySelector('.selected');
-
-    if (selectedEl) {
-      scrollIntoView(selectedEl);
-    }
-  }, [ selectedEntry ]);
-
   // handle keyboard seleciton
@@ -197,48 +177,47 @@ const keyboardSelect = direction => {
     >
-      ${displayHeader && html`
+      ${ displayHeader && html`
         <div class="djs-popup-header">
-          <h3 class="title">${props.title}</h3>
-          ${Object.entries(headerEntries).map(([ key, value ]) => html`
+          <h3 class="title">${ props.title }</h3>
+          ${ Object.entries(headerEntries).map(([ id, entry ]) => html`
             <span
-              class=${getHeaderClasses(value, headerEntries[key] === selectedEntry)}
-              onClick=${ event => onSelect(event, value, false) }
-              title=${ `Toggle ${value.title}` }
-              data-id=${ key }
-              onMouseEnter=${ () => setSelectedEntry(headerEntries[key]) }
+              class=${ getHeaderClasses(entry, entry === selectedEntry) }
+              onClick=${ event => onSelect(event, entry) }
+              title=${ `Toggle ${entry.title}` }
+              data-id=${ id }
+              onMouseEnter=${ () => setSelectedEntry(entry) }
             >
-              ${value.imageUrl ? html`<img src=${ value.imageUrl } />` : null}
-              ${value.label ? value.label : null}
-            </span>`
-    )}
-        </div>`
-    }
-      ${originalEntries.length && html`
-      <div class="djs-popup-body">
-      
-        ${ searchable && html`
-        <div class="search">
-          <svg class="search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.0325 8.5H9.625L13.3675 12.25L12.25 13.3675L8.5 9.625V9.0325L8.2975 8.8225C7.4425 9.5575 6.3325 10 5.125 10C2.4325 10 0.25 7.8175 0.25 5.125C0.25 2.4325 2.4325 0.25 5.125 0.25C7.8175 0.25 10 2.4325 10 5.125C10 6.3325 9.5575 7.4425 8.8225 8.2975L9.0325 8.5ZM1.75 5.125C1.75 6.9925 3.2575 8.5 5.125 8.5C6.9925 8.5 8.5 6.9925 8.5 5.125C8.5 3.2575 6.9925 1.75 5.125 1.75C3.2575 1.75 1.75 3.2575 1.75 5.125Z" fill="#22242A"/>
-          </svg>
-          <input
-              ref=${ inputRef }
-              type="text"
-              onKeyup=${ handleKey }
-              onKeydown=${ handleKeyDown }
-            />
+              ${entry.imageUrl ? html`<img src=${ entry.imageUrl } />` : null}
+              ${entry.label ? entry.label : null}
+            </span>
+          `) }
         </div>
-        ` }
-      
-        <${PopupMenuList}
-          entries=${ entries }
-          selectedEntry=${ selectedEntry }
-          setSelectedEntry=${ setSelectedEntry }
-          onSelect=${ onSelect }
-          resultsRef=${ resultsRef }
-        />
-      </div>
-      `}
-      ${entries.length === 0 && html`
-      <div class="no-results">No matching entries found.</div>
-    `}
+      ` }
+      ${ originalEntries.length && html`
+        <div class="djs-popup-body">
+
+          ${ searchable && html`
+          <div class="search">
+            <svg class="search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.0325 8.5H9.625L13.3675 12.25L12.25 13.3675L8.5 9.625V9.0325L8.2975 8.8225C7.4425 9.5575 6.3325 10 5.125 10C2.4325 10 0.25 7.8175 0.25 5.125C0.25 2.4325 2.4325 0.25 5.125 0.25C7.8175 0.25 10 2.4325 10 5.125C10 6.3325 9.5575 7.4425 8.8225 8.2975L9.0325 8.5ZM1.75 5.125C1.75 6.9925 3.2575 8.5 5.125 8.5C6.9925 8.5 8.5 6.9925 8.5 5.125C8.5 3.2575 6.9925 1.75 5.125 1.75C3.2575 1.75 1.75 3.2575 1.75 5.125Z" fill="#22242A"/>
+            </svg>
+            <input
+                ref=${ inputRef }
+                type="text"
+                onKeyup=${ handleKey }
+                onKeydown=${ handleKeyDown }
+              />
+          </div>
+          ` }
+
+          <${PopupMenuList}
+            entries=${ entries }
+            selectedEntry=${ selectedEntry }
+            setSelectedEntry=${ setSelectedEntry }
+            onClick=${ onSelect }
+          />
+        </div>
+      ` }
+      ${ entries.length === 0 && html`
+        <div class="no-results">No matching entries found.</div>
+      ` }
     </${PopupMenuWrapper}>`
@@ -283,3 +262,2 @@ );
         ref=${ overlayRef }
-        onClick=${ e => e.stopPropagation() }
         style=${ getOverlayStyle(props) }
@@ -295,12 +273,2 @@ >
 // helpers //////////////////////
-function scrollIntoView(el) {
-  if (typeof el.scrollIntoViewIfNeeded === 'function') {
-    el.scrollIntoViewIfNeeded();
-  } else {
-    el.scrollIntoView({
-      scrollMode: 'if-needed',
-      block: 'nearest'
-    });
-  }
-}
 
@@ -307,0 +275,0 @@ function getOverlayStyle(props) {

lib/features/popup-menu/PopupMenuItem.js

@@ -18,3 +18,8 @@ import classNames from 'clsx';
 export default function PopupMenuItem(props) {
-  const { entry, selected, ...restProps } = props;
+  const {
+    entry,
+    selected,
+    onMouseEnter,
+    onClick
+  } = props;
 
@@ -25,7 +30,8 @@ const createImage = imageUrl => {
 
-  return (html`
+  return html`
     <li
       class=${ classNames('entry', { selected }) }
       data-id=${ entry.id }
-       ...${restProps }
+      onClick=${ onClick }
+      onMouseEnter=${ onMouseEnter }
     >
@@ -37,11 +43,13 @@ <div class="content">
         >
-          ${entry.imageUrl ? createImage(entry.imageUrl) : null}
-          ${entry.label || entry.name}
+          ${ entry.imageUrl ? createImage(entry.imageUrl) : null }
+          ${ entry.label || entry.name }
         </span>
-        <span
-          class="description"
-          title=${ entry.description }
-        >
-          ${ entry.description }
-        </span>
+        ${ entry.description && html`
+          <span
+            class="description"
+            title=${ entry.description }
+          >
+            ${ entry.description }
+          </span>
+        ` }
       </div>
@@ -64,4 +72,3 @@ ${ entry.documentationRef && html`
     </li>
-    `
-  );
+  `;
 }

lib/features/popup-menu/PopupMenuList.js

 import {
-  html
+  html,
+  useMemo,
+  useLayoutEffect,
+  useRef
 } from '../../ui';
@@ -13,2 +16,3 @@
  * @param {function} setSelectedEntry
+ * @param {function} onClick
  * @param {Object} resultsRef
@@ -21,37 +25,46 @@ */
     setSelectedEntry,
-    onSelect,
-    resultsRef
+    onClick,
+    entries
   } = props;
 
-  const groups = groupEntries(props.entries);
+  const resultsRef = useRef();
 
-  const entries = groups.map(group => {
-    const groupEntries = group.entries;
+  const groups = useMemo(() => groupEntries(entries), [ entries ]);
 
-    return (html`
-        ${group.name && group && html`
+  // scroll to selected result
+  useLayoutEffect(() => {
+    const containerEl = resultsRef.current;
+
+    if (!containerEl)
+      return;
+
+    const selectedEl = containerEl.querySelector('.selected');
+
+    if (selectedEl) {
+      scrollIntoView(selectedEl);
+    }
+  }, [ selectedEntry ]);
+
+  return html`
+    <div class="results" ref=${ resultsRef }>
+      ${ groups.map(group => html`
+        ${ group.name && html`
           <div key=${ group.id } class="entry-header">
-            ${group.name}
+            ${ group.name }
           </div>
-        `}
+        ` }
         <ul class="group" data-group=${ group.id }>
-        ${groupEntries.map((entry, idx) => (html`
-          <${PopupMenuItem}
-            key=${ entry.id }
-            entry=${ entry }
-            selected=${ entry === selectedEntry }
-            onMouseEnter=${ () => setSelectedEntry(entry) }
-            onClick=${ event => onSelect(event, entry) }
-          />
-        `))}
+          ${ group.entries.map(entry => html`
+            <${PopupMenuItem}
+              key=${ entry.id }
+              entry=${ entry }
+              selected=${ entry === selectedEntry }
+              onMouseEnter=${ () => setSelectedEntry(entry) }
+              onClick=${ onClick }
+            />
+          `) }
         </ul>
-      `
-    );
-  });
-
-  return (html`
-    <div class="results" ref=${ resultsRef }>
-      ${entries}
+      `) }
     </div>
-  `);
+  `;
 }
@@ -85,2 +98,15 @@
   return groups;
+}
+
+// helpers ////////////////
+
+function scrollIntoView(el) {
+  if (typeof el.scrollIntoViewIfNeeded === 'function') {
+    el.scrollIntoViewIfNeeded();
+  } else {
+    el.scrollIntoView({
+      scrollMode: 'if-needed',
+      block: 'nearest'
+    });
+  }
 }

lib/features/search-pad/SearchPad.js

@@ -19,2 +19,4 @@ import {
 
+import { isKey } from '../keyboard/KeyboardUtil';
+
 /**
@@ -97,9 +99,7 @@ * Provides searching infrastructure
 
-    // up
-    if (e.keyCode === 38) {
+    if (isKey('ArrowUp', e)) {
       e.preventDefault();
     }
 
-    // down
-    if (e.keyCode === 40) {
+    if (isKey('ArrowDown', e)) {
       e.preventDefault();
@@ -112,9 +112,7 @@ }
 
-    // escape
-    if (e.keyCode === 27) {
+    if (isKey('Escape', e)) {
       return self.close();
     }
 
-    // enter
-    if (e.keyCode === 13) {
+    if (isKey('Enter', e)) {
       var selected = self._getCurrentResult();
@@ -125,15 +123,12 @@
 
-    // up
-    if (e.keyCode === 38) {
+    if (isKey('ArrowUp', e)) {
       return self._scrollToDirection(true);
     }
 
-    // down
-    if (e.keyCode === 40) {
+    if (isKey('ArrowDown', e)) {
       return self._scrollToDirection();
     }
 
-    // left && right
     // do not search while navigating text input
-    if (e.keyCode === 37 || e.keyCode === 39) {
+    if (isKey([ 'ArrowLeft', 'ArrowRight' ], e)) {
       return;
@@ -140,0 +135,0 @@ }

package.json

 {
   "name": "diagram-js",
-  "version": "11.0.0-aplha.0",
+  "version": "11.0.0",
   "description": "A toolbox for displaying and modifying diagrams on the web",
@@ -5,0 +5,0 @@ "main": "index.js",

test/util/KeyEvents.js

 import {
-  assign,
-  isString
+  assign
 } from 'min-dash';
@@ -9,3 +8,3 @@
  *
- * @param {String|number} key the key or keyCode/charCode
+ * @param {String} key the key or code
  * @param {Object} [attrs]
@@ -21,9 +20,4 @@ * @param {string} [attrs.type]
 
-  var event = document.createEvent('Events') || new document.defaultView.CustomEvent('keyEvent');
-
-  // init and mark as bubbles / cancelable
-  event.initEvent(attrs.type || 'keydown', false, true);
-
-  var keyAttrs = isString(key) ? { key: key } : { keyCode: key, which: key };
-
+  var event = new Event(attrs.type || 'keydown', { bubbles: true, cancelable: true });
+  var keyAttrs = { key: key, code: key };
   delete attrs.type;
@@ -30,0 +24,0 @@

Fixed alerts

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

670956

decreased by-0.03%

Lines of code

22907

decreased by-0.04%

No dependency changes