Merged in bugfix/editor-toolbar (pull request #10)

Fixes for toolbar actions

* Fixes for toolbar actions
Remove unused dependency "add" (typo?)


Approved-by: Paulo Veiga

.gitignore

@@ -49,3 +49,4 @@ Thumbs.db
 *.wmv
 
 **/build/**/*
+.vscode

packages/mindplot/package.json

@@ -32,7 +32,6 @@
     "dependencies": {
         "@wisemapping/core-js": "^0.0.1",
         "@wisemapping/web2d": "^0.0.1",
-        "add": "^2.0.6",
         "jest": "^27.4.3",
         "jquery": "^3.6.0",
         "lodash": "^4.17.21"

packages/mindplot/src/components/Options.js

@@ -1,7 +1,9 @@
+import { merge } from 'lodash';
+
 class Options {
   setOptions(...args) {
-    this.options = { ...this.options, ...args };
+    const options = merge({}, this.options, ...args);
-    const { options } = this;
+    this.options = options;
 
     if (this.addEvent) {
       for (const option in options) {

packages/mindplot/src/components/model/INodeModel.js

@@ -31,8 +31,8 @@ class INodeModel {
 
   /** */
   setId(id) {
-    $assert(Number.isFinite(id));
     if ($defined(id) && id > INodeModel._uuid) {
+      $assert(Number.isFinite(id));
       INodeModel._uuid = id;
     }
     if (!$defined(id)) {

packages/mindplot/src/components/widget/ColorPalettePanel.js

@@ -19,12 +19,19 @@ import $ from 'jquery';
 import { $assert, $defined } from '@wisemapping/core-js';
 import ToolbarPaneItem from './ToolbarPaneItem';
 
+// rgbToHex implementation from https://stackoverflow.com/a/3627747/58128
+export const rgb2hex = (rgb) => `#${
+  rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
+    .slice(1)
+    .map((n) => parseInt(n, 10)
+      .toString(16).padStart(2, '0')).join('')}`;
+
 class ColorPalettePanel extends ToolbarPaneItem {
   constructor(buttonId, model, baseUrl) {
     $assert($defined(baseUrl), 'baseUrl can not be null');
     super(buttonId, model, true);
     this._baseUrl = baseUrl;
-    super._init();
+    this._panelElem = super._init();
   }
 
   _load() {
@@ -88,10 +95,10 @@ class ColorPalettePanel extends ToolbarPaneItem {
     const colorCells = panelElem.find('div[class=palette-colorswatch]');
     const model = this.getModel();
     let modelValue = model.getValue();
-    colorCells.forEach((elem) => {
+    colorCells.each((index, elem) => {
-      const color = $(elem).css('background-color').rgbToHex();
+      const color = rgb2hex($(elem).css('background-color'));
       if (modelValue != null && modelValue[0] === 'r') {
-        modelValue = modelValue.rgbToHex();
+        modelValue = rgb2hex(modelValue);
       }
 
       if (modelValue != null && modelValue.toUpperCase() === color.toUpperCase()) {

packages/mindplot/src/components/widget/FloatingTip.js

@@ -15,25 +15,27 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
+import { merge } from 'lodash';
 import Events from '../Events';
 
-// const options = {
+const defaultOptions = {
-//   animation: true,
+  animation: true,
-//   html: false,
+  html: false,
-//   placement: 'right',
+  placement: 'right',
-//   selector: false,
+  selector: false,
-//   trigger: 'hover',
+  trigger: 'hover',
-//   title: '',
+  title: '',
-//   content: '',
+  content: '',
-//   delay: 0,
+  delay: 0,
-//   container: false,
+  container: false,
-//   destroyOnExit: false,
+  destroyOnExit: false,
-// };
+};
 
 class FloatingTip extends Events {
   constructor(element, options) {
-    super(element, options);
+    const opts = { ...defaultOptions, ...options };
-    this.setOptions(options);
+    super(element, opts);
+    this.setOptions(opts);
     this.element = element;
     this._createPopover();
   }
@@ -62,8 +64,8 @@ class FloatingTip extends Events {
   }
 
   setOptions(...args) {
-    this.options = { ...this.options, ...args };
+    const options = merge({}, this.options, ...args);
-    const { options } = this;
+    this.options = options;
 
     if (this.addEvent) {
       for (const option in options) {

packages/mindplot/src/components/widget/IconPanel.js

@@ -54,9 +54,9 @@ class IconPanel extends ToolbarPaneItem {
         const panel = this;
         const model = this.getModel();
         img.on('click', ((event) => {
-          model.setValue($(this).attr('id'));
+          model.setValue($(event.target).attr('id'));
           panel.hide();
-        }).bind(this));
+        }));
 
         count += 1;
       }

packages/mindplot/src/components/widget/ListToolbarPanel.js

@@ -16,6 +16,7 @@
  *   limitations under the License.
  */
 import $ from 'jquery';
+import { $assert, $defined } from '@wisemapping/core-js';
 import ToolbarPaneItem from './ToolbarPaneItem';
 
 class ListToolbarPanel extends ToolbarPaneItem {
@@ -39,7 +40,7 @@ class ListToolbarPanel extends ToolbarPaneItem {
     const panelElem = this.getPanelElem();
     const menuElems = panelElem.find('div');
     const value = this.getModel().getValue();
-    menuElems.forEach((elem) => {
+    menuElems.each((index, elem) => {
       const elemValue = $defined($(elem).attr('model')) ? $(elem).attr('model') : $(elem).attr('id');
       $assert(elemValue, 'elemValue can not be null');
       if (elemValue === value) $(elem).attr('class', 'toolbarPanelLinkSelectedLink');

packages/mindplot/src/components/widget/ToolbarPaneItem.js

@@ -76,7 +76,7 @@ class ToolbarPaneItem extends ToolbarItem {
     if (!this.isVisible()) {
       super.show();
       this._tip.show();
-      this.getButtonElem().className = 'buttonExtActive';
+      this.getButtonElem().get(0).className = 'buttonExtActive';
     }
   }
 
@@ -84,7 +84,7 @@ class ToolbarPaneItem extends ToolbarItem {
     if (this.isVisible()) {
       super.hide();
       this._tip.hide();
-      this.getButtonElem().className = 'buttonExtOn';
+      this.getButtonElem().get(0).className = 'buttonExtOn';
     }
   }