Change relationshop to TS

packages/mindplot/.eslintrc.json

@@ -37,7 +37,6 @@
         // no-unused-vars already used
         "@typescript-eslint/no-unused-vars": "off",
         "@typescript-eslint/ban-ts-comment": "warn",
-        "@typescript-eslint/no-empty-function": "warn",
         "import/no-extraneous-dependencies": ["warn", {"packageDir": "./", "devDependencies": false, "optionalDependencies": false, "peerDependencies": false}]
     },
     "settings": {

packages/mindplot/src/components/CentralTopic.js

@@ -42,7 +42,9 @@ class CentralTopic extends Topic {
   }
 
   /** */
-  updateTopicShape() { }
+  updateTopicShape() {
+    // Overwite behaviour ...
+  }
 
   _updatePositionOnChangeSize() {
     // Center main topic ...

packages/mindplot/src/components/ControlPoint.js

@@ -112,7 +112,9 @@ class ControlPoint {
     );
   }
 
-  _removeLine() { }
+  _removeLine() {
+    // Overwrite default behaviour ...
+  }
 
   _mouseDown(event, point, me) {
     if (!this._isBinded) {

packages/mindplot/src/components/Designer.ts

@@ -146,9 +146,12 @@ class Designer extends Events {
     }, { passive: false });
   }
 
+  getActionDispatcher(): StandaloneActionDispatcher {
+    return this._actionDispatcher;
+  }
+
   // @ts-ignore
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  addEvent(type: string, listener: Function): void {
+  addEvent(type: string, listener: any): void {
     if (type === TopicEvent.EDIT || type === TopicEvent.CLICK) {
       const editor = TopicEventDispatcher.getInstance();
       editor.addEvent(type, listener);

packages/mindplot/src/components/Relationship.ts

@@ -15,16 +15,34 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import { Arrow, Point } from '@wisemapping/web2d';
 import { $assert, $defined } from '@wisemapping/core-js';
-
+import { Arrow, Point, ElementClass } from '@wisemapping/web2d';
 import ConnectionLine from './ConnectionLine';
 import ControlPoint from './ControlPoint';
-
+import RelationshipModel from './model/RelationshipModel';
+import NodeGraph from './NodeGraph';
 import Shape from './util/Shape';
 
 class Relationship extends ConnectionLine {
-  constructor(sourceNode, targetNode, model) {
+  private _focusShape: ElementClass;
+
+  private _onFocus: boolean;
+
+  private _isInWorkspace: boolean;
+
+  private _controlPointsController: ControlPoint;
+
+  private _startArrow: Arrow;
+
+  private _showEndArrow: Arrow;
+
+  private _endArrow: Arrow;
+
+  private _controlPointControllerListener: any;
+
+  private _showStartArrow: Arrow;
+
+  constructor(sourceNode: NodeGraph, targetNode: NodeGraph, model: RelationshipModel) {
     $assert(sourceNode, 'sourceNode can not be null');
     $assert(targetNode, 'targetNode can not be null');
 
@@ -72,12 +90,12 @@ class Relationship extends ConnectionLine {
     }
   }
 
-  setStroke(color, style, opacity) {
+  setStroke(color: string, style: string, opacity: number): void {
     super.setStroke(color, style, opacity);
     this._startArrow.setStrokeColor(color);
   }
 
-  redraw() {
+  redraw(): void {
     const line2d = this._line2d;
     const sourceTopic = this._sourceTopic;
     const sourcePosition = sourceTopic.getPosition();
@@ -131,7 +149,7 @@ class Relationship extends ConnectionLine {
     this._controlPointsController.redraw();
   }
 
-  _positionArrows() {
+  private _positionArrows(): void {
     const tpos = this._line2d.getTo();
     const spos = this._line2d.getFrom();
 
@@ -182,7 +200,7 @@ class Relationship extends ConnectionLine {
     this.redraw();
   }
 
-  _initializeControlPointController() {
+  _initializeControlPointController(): void {
     this.setOnFocus(true);
   }
 
@@ -199,12 +217,11 @@ class Relationship extends ConnectionLine {
     super.removeFromWorkspace(workspace);
   }
 
-  // eslint-disable-next-line class-methods-use-this
   getType() {
-    return Relationship.type;
+    return 'Relationship';
   }
 
-  setOnFocus(focus) {
+  setOnFocus(focus: boolean): void {
     // Change focus shape
     if (this.isOnFocus() !== focus) {
       if (focus) {
@@ -219,7 +236,7 @@ class Relationship extends ConnectionLine {
     }
   }
 
-  _refreshShape() {
+  private _refreshShape() {
     const sPos = this._line2d.getFrom();
     const tPos = this._line2d.getTo();
     const ctrlPoints = this._line2d.getControlPoints();
@@ -233,7 +250,8 @@ class Relationship extends ConnectionLine {
     this._focusShape.updateLine();
   }
 
-  addEvent(eventType, listener) {
+  // @typescript-eslint/ban-types
+  addEvent(eventType: string, listener: any) {
     let type = eventType;
     // Translate to web 2d events ...
     if (type === 'onfocus') {
@@ -244,37 +262,37 @@ class Relationship extends ConnectionLine {
     line.addEvent(type, listener);
   }
 
-  isOnFocus() {
+  isOnFocus(): boolean {
     return this._onFocus;
   }
 
-  isInWorkspace() {
+  isInWorkspace(): boolean {
     return this._isInWorkspace;
   }
 
-  setVisibility(value) {
+  setVisibility(value: boolean) {
     super.setVisibility(value);
     if (this._showEndArrow) this._endArrow.setVisibility(this._showEndArrow);
     this._startArrow.setVisibility(this._showStartArrow && value);
   }
 
-  setOpacity(opacity) {
+  setOpacity(opacity: number) {
     super.setOpacity(opacity);
     if (this._showEndArrow) this._endArrow.setOpacity(opacity);
     if (this._showStartArrow) this._startArrow.setOpacity(opacity);
   }
 
-  setShowEndArrow(visible) {
+  setShowEndArrow(visible: boolean) {
     this._showEndArrow = visible;
     if (this._isInWorkspace) this.redraw();
   }
 
-  setShowStartArrow(visible) {
+  setShowStartArrow(visible: boolean) {
     this._showStartArrow = visible;
     if (this._isInWorkspace) this.redraw();
   }
 
-  setFrom(x, y) {
+  setFrom(x: number, y: number) {
     $assert($defined(x), 'x must be defined');
     $assert($defined(y), 'y must be defined');
 
@@ -282,7 +300,7 @@ class Relationship extends ConnectionLine {
     this._startArrow.setFrom(x, y);
   }
 
-  setTo(x, y) {
+  setTo(x: number, y: number) {
     $assert($defined(x), 'x must be defined');
     $assert($defined(y), 'y must be defined');
 
@@ -312,11 +330,11 @@ class Relationship extends ConnectionLine {
     return this._line2d.isDestControlPointCustom();
   }
 
-  setIsSrcControlPointCustom(isCustom) {
+  setIsSrcControlPointCustom(isCustom: boolean) {
     this._line2d.setIsSrcControlPointCustom(isCustom);
   }
 
-  setIsDestControlPointCustom(isCustom) {
+  setIsDestControlPointCustom(isCustom: boolean) {
     this._line2d.setIsDestControlPointCustom(isCustom);
   }
 
@@ -324,16 +342,14 @@ class Relationship extends ConnectionLine {
     return this._model.getId();
   }
 
-  fireEvent(type, event) {
+  fireEvent(type: string, event: any): void {
     const elem = this._line2d;
     elem.trigger(type, event);
   }
+
+  static getStrokeColor() {
+    return '#9b74e6';
+  }
 }
 
-Relationship.getStrokeColor = function getStrokeColor() {
-  return '#9b74e6';
-};
-
-Relationship.type = 'Relationship';
-
 export default Relationship;

packages/mindplot/src/components/RelationshipPivot.ts

@@ -19,21 +19,39 @@ import { CurvedLine, Arrow, Point } from '@wisemapping/web2d';
 import { $assert } from '@wisemapping/core-js';
 import Relationship from './Relationship';
 import Shape from './util/Shape';
+import Workspace from './Workspace';
+import { Designer } from '..';
+import Topic from './Topic';
 
 class RelationshipPivot {
-  constructor(workspace, designer) {
+  private _workspace: Workspace;
+
+  private _designer: Designer;
+
+  private _mouseMoveEvent: any;
+
+  private _onClickEvent: any;
+
+  private _onTopicClick: any;
+
+  private _sourceTopic: Topic;
+
+  private _pivot: any;
+
+  private _startArrow: any;
+
+  constructor(workspace: Workspace, designer: Designer) {
     $assert(workspace, 'workspace can not be null');
     $assert(designer, 'designer can not be null');
     this._workspace = workspace;
     this._designer = designer;
 
-    // FIXME: the aim of the migration is remove .bind mootools method, please remove these!
     this._mouseMoveEvent = this._mouseMove.bind(this);
     this._onClickEvent = this._cleanOnMouseClick.bind(this);
     this._onTopicClick = this._connectOnFocus.bind(this);
   }
 
-  start(sourceTopic, targetPos) {
+  start(sourceTopic: Topic, targetPos: Point) {
     $assert(sourceTopic, 'sourceTopic can not be null');
     $assert(targetPos, 'targetPos can not be null');
 
@@ -75,7 +93,7 @@ class RelationshipPivot {
     }
   }
 
-  dispose() {
+  dispose(): void {
     const workspace = this._workspace;
 
     if (this._isActive()) {
@@ -99,7 +117,7 @@ class RelationshipPivot {
     }
   }
 
-  _mouseMove(event) {
+  _mouseMove(event: MouseEvent): boolean {
     const screen = this._workspace.getScreenManager();
     const pos = screen.getWorkspaceMousePosition(event);
 
@@ -121,13 +139,13 @@ class RelationshipPivot {
     return false;
   }
 
-  _cleanOnMouseClick(event) {
+  _cleanOnMouseClick(event: MouseEvent): void {
     // The user clicks on a desktop on in other element that is not a node.
     this.dispose();
     event.stopPropagation();
   }
 
-  _calculateFromPosition(toPosition) {
+  private _calculateFromPosition(toPosition: Point): Point {
     // Calculate origin position ...
     let sourcePosition = this._sourceTopic.getPosition();
     if (this._sourceTopic.getType() === 'CentralTopic') {
@@ -141,19 +159,21 @@ class RelationshipPivot {
     return Shape.calculateRelationShipPointCoordinates(this._sourceTopic, spoint);
   }
 
-  _connectOnFocus(event, targetTopic) {
+  private _connectOnFocus(event: string, targetTopic: Topic): void {
     const sourceTopic = this._sourceTopic;
     const mindmap = this._designer.getMindmap();
 
     // Avoid circular connections ...
     if (targetTopic.getId() !== sourceTopic.getId()) {
       const relModel = mindmap.createRelationship(targetTopic.getId(), sourceTopic.getId());
-      this._designer._actionDispatcher.addRelationship(relModel);
+      this._designer
+        .getActionDispatcher()
+        .addRelationship(relModel);
     }
     this.dispose();
   }
 
-  _isActive() {
+  private _isActive() {
     return this._pivot != null;
   }
 }

packages/mindplot/src/components/Topic.js

@@ -212,7 +212,9 @@ class Topic extends NodeGraph {
         return model.getImageSize();
       };
 
-      result.setPosition = function setPosition() {};
+      result.setPosition = function setPosition() {
+        // Ignore ...
+      };
     } else if (shapeType === TopicShape.ELLIPSE) {
       result = new Rect(0.9, attributes);
     } else if (shapeType === TopicShape.ROUNDED_RECT) {
@@ -235,13 +237,19 @@ class Topic extends NodeGraph {
         result.setStroke(1, 'solid', stokeColor);
       };
 
-      result.getSize = function getSize() {
-        return this.size;
+      result.getSize = () => this.size;
+
+      result.setPosition = () => {
+        // Overwrite behaviour ...
       };
 
-      result.setPosition = function setPosition() {};
-      result.setFill = function setFill() {};
-      result.setStroke = function setStroke() {};
+      result.setFill = () => {
+        // Overwrite behaviour ...
+      };
+
+      result.setStroke = () => {
+        // Overwrite behaviour ...
+      };
     } else {
       $assert(false, `Unsupported figure shapeType:${shapeType}`);
     }

packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js

@@ -100,7 +100,9 @@ class BootstrapDialog extends Options {
     throw new Error('Unsupported operation');
   }
 
-  onDialogShown() {}
+  onDialogShown() {
+    // Overwrite default behaviour ...
+  }
 
   onRemoveClick(event) {
     throw new Error('Unsupported operation');

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

@@ -18,7 +18,6 @@
  */
 import { $assert, $defined } from '@wisemapping/core-js';
 import FeatureModel from './FeatureModel';
-import IMindmap from './IMindmap';
 import Mindmap from './Mindmap';
 
 export type NodeModelType = 'CentralTopic' | 'MainTopic';
@@ -39,7 +38,7 @@ abstract class INodeModel {
   }
 
   getId(): number {
-    return this.getProperty('id');
+    return this.getProperty('id') as number;
   }
 
   abstract getFeatures(): FeatureModel[];
@@ -71,7 +70,7 @@ abstract class INodeModel {
   }
 
   getText(): string {
-    return this.getProperty('text');
+    return this.getProperty('text') as string;
   }
 
   setPosition(x: number, y: number): void {
@@ -79,7 +78,7 @@ abstract class INodeModel {
   }
 
   getPosition(): { x: number, y: number } {
-    const value = this.getProperty('position');
+    const value = this.getProperty('position') as string;
     let result = null;
     if (value != null) {
       result = parseJsObject(value);
@@ -92,7 +91,7 @@ abstract class INodeModel {
   }
 
   getImageSize(): {width: number, height: number} {
-    const value = this.getProperty('imageSize');
+    const value = this.getProperty('imageSize') as string;
     let result = null;
     if (value != null) {
       result = parseJsObject(value);
@@ -105,7 +104,7 @@ abstract class INodeModel {
   }
 
   getMetadata(): string {
-    return this.getProperty('metadata');
+    return this.getProperty('metadata') as string;
   }
 
   setMetadata(json: string): void {
@@ -113,10 +112,10 @@ abstract class INodeModel {
   }
 
   getImageUrl(): string {
-    return this.getProperty('imageUrl');
+    return this.getProperty('imageUrl') as string;
   }
 
-  getMindmap(): IMindmap {
+  getMindmap(): Mindmap {
     return this._mindmap;
   }
 
@@ -131,7 +130,7 @@ abstract class INodeModel {
 
   /** */
   getShapeType(): string {
-    return this.getProperty('shapeType');
+    return this.getProperty('shapeType') as string;
   }
 
   /** */
@@ -148,7 +147,7 @@ abstract class INodeModel {
   }
 
   getOrder(): number {
-    return this.getProperty('order');
+    return this.getProperty('order') as number;
   }
 
   setFontFamily(fontFamily: string): void {
@@ -156,7 +155,7 @@ abstract class INodeModel {
   }
 
   getFontFamily(): string {
-    return this.getProperty('fontFamily');
+    return this.getProperty('fontFamily') as string;
   }
 
   /** */
@@ -165,7 +164,7 @@ abstract class INodeModel {
   }
 
   getFontStyle(): string {
-    return this.getProperty('fontStyle');
+    return this.getProperty('fontStyle') as string;
   }
 
   setFontWeight(weight) {
@@ -181,7 +180,7 @@ abstract class INodeModel {
   }
 
   getFontColor(): string {
-    return this.getProperty('fontColor');
+    return this.getProperty('fontColor') as string;
   }
 
   setFontSize(size: number) {
@@ -189,11 +188,11 @@ abstract class INodeModel {
   }
 
   getFontSize(): number {
-    return this.getProperty('fontSize');
+    return this.getProperty('fontSize') as number;
   }
 
   getBorderColor(): string {
-    return this.getProperty('borderColor');
+    return this.getProperty('borderColor') as string;
   }
 
   setBorderColor(color: string): void {
@@ -201,7 +200,7 @@ abstract class INodeModel {
   }
 
   getBackgroundColor(): string {
-    return this.getProperty('backgroundColor');
+    return this.getProperty('backgroundColor') as string;
   }
 
   setBackgroundColor(color: string) {
@@ -209,7 +208,7 @@ abstract class INodeModel {
   }
 
   areChildrenShrunken(): boolean {
-    const result = this.getProperty('shrunken');
+    const result = this.getProperty('shrunken') as boolean;
     return $defined(result) ? result : false;
   }
 
@@ -291,9 +290,9 @@ abstract class INodeModel {
 
   abstract getPropertiesKeys(): string[];
 
-  abstract getProperty(key: string): any;
+  abstract getProperty(key: string): number | string | boolean;
 
-  abstract putProperty(key: string, value: any): void;
+  abstract putProperty(key: string, value: number | string| boolean): void;
 
   abstract setParent(parent: INodeModel): void;
 

packages/mindplot/src/components/model/Mindmap.ts

@@ -133,7 +133,7 @@ class Mindmap extends IMindmap {
    * @throws will throw an error if target node is null or undefined
    * @return the relationship model created
    */
-  createRelationship(sourceNodeId: any, targetNodeId: any) {
+  createRelationship(sourceNodeId: number, targetNodeId: number):RelationshipModel {
     $assert($defined(sourceNodeId), 'from node cannot be null');
     $assert($defined(targetNodeId), 'to node cannot be null');
 
@@ -154,7 +154,7 @@ class Mindmap extends IMindmap {
     this._relationships = this._relationships.filter((r) => r !== relationship);
   }
 
-  findNodeById(id: any) {
+  findNodeById(id: number) {
     let result = null;
     for (let i = 0; i < this._branches.length; i++) {
       const branch = this._branches[i];

packages/mindplot/src/components/persistence/Pela2TangoMigrator.ts

@@ -83,7 +83,7 @@ class Pela2TangoMigrator implements XMLMindmapSerializer {
     }
   }
 
-  _fixNodePosition(node: { getPosition: () => any; setPosition: (arg0: any, arg1: any) => void; getChildren: () => any; }, parentPosition: { x: number; y: any; }) {
+  _fixNodePosition(node: NodeModel, parentPosition: {x:number, y:number}) {
     // Position was not required in previous versions. Try to synthesize one .
     let position = node.getPosition();
     if (!position) {

packages/mindplot/src/components/persistence/XMLSerializerFactory.ts

@@ -30,6 +30,7 @@ const codeToSerializer = [
     codeName: ModelCodeName.BETA,
     serializer: XMLSerializerBeta,
     migrator() {
+      // Ignore ..
     },
   },
   {

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

@@ -22,6 +22,7 @@ class AccountSettingsPanel extends ListToolbarPanel {
   constructor(elemId) {
     const model = {
       getValue() {
+        // Overwite default behaviour ...
       },
       setValue() {
         window.location = '/c/logout';

packages/mindplot/test/playground/layout/lib/raphael-min.js

@@ -217,7 +217,7 @@
       const e = 'hasOwnProperty'; const r = String; const i = parseFloat; const n = Math; const a = n.round; const s = n.max; const o = n.min; const l = n.abs; const h = /[, ]+/; const u = t.eve; const c = ' '; const f = ''; const p = {
         M: 'm', L: 'l', C: 'c', Z: 'x', m: 't', l: 'r', c: 'v', z: 'x',
       }; const d = /([clmz]),?([^clmz]*)/gi; const g = / progid:\S+Blur\([^\)]+\)/g; const x = /-?[^,\s-]+/g; const v = 'position:absolute;left:0;top:0;width:1px;height:1px;behavior:url(#default#VML)'; const y = 21600; const m = { path: 1, rect: 1, image: 1 }; const b = { circle: 1, ellipse: 1 }; const _ = function (e, r, i) { const n = t.matrix(); return n.rotate(-e, 0.5, 0.5), { dx: n.x(r, i), dy: n.y(r, i) }; }; const w = function (t, e, r, i, n, a) { const s = t._; const o = t.matrix; const h = s.fillpos; const u = t.node; const f = u.style; let p = 1; let d = ''; const g = y / e; const x = y / r; if (f.visibility = 'hidden', e && r) { if (u.coordsize = l(g) + c + l(x), f.rotation = a * (e * r < 0 ? -1 : 1), a) { var v = _(a, i, n); i = v.dx, n = v.dy; } if (e < 0 && (d += 'x'), r < 0 && (d += ' y') && (p = -1), f.flip = d, u.coordorigin = i * -g + c + n * -x, h || s.fillsize) { let m = u.getElementsByTagName('fill'); m = m && m[0], u.removeChild(m), h && (v = _(a, o.x(h[0], h[1]), o.y(h[0], h[1])), m.position = v.dx * p + c + v.dy * p), s.fillsize && (m.size = s.fillsize[0] * l(e) + c + s.fillsize[1] * l(r)), u.appendChild(m); }f.visibility = 'visible'; } }; t.toString = function () { return `Your browser doesn’t support SVG. Falling down to VML.\nYou are running Raphaël ${this.version}`; }; let k; const B = function (t, e, i) { for (var n = r(e).toLowerCase().split('-'), a = i ? 'end' : 'start', s = n.length, o = 'classic', l = 'medium', h = 'medium'; s--;) switch (n[s]) { case 'block': case 'classic': case 'oval': case 'diamond': case 'open': case 'none': o = n[s]; break; case 'wide': case 'narrow': h = n[s]; break; case 'long': case 'short': l = n[s]; } const u = t.node.getElementsByTagName('stroke')[0]; u[`${a}arrow`] = o, u[`${a}arrowlength`] = l, u[`${a}arrowwidth`] = h; }; const C = function (n, l) {
-        n.attrs = n.attrs || {}; const u = n.node; const g = n.attrs; let v = u.style; const _ = m[n.type] && (l.x != g.x || l.y != g.y || l.width != g.width || l.height != g.height || l.cx != g.cx || l.cy != g.cy || l.rx != g.rx || l.ry != g.ry || l.r != g.r); const C = b[n.type] && (g.cx != l.cx || g.cy != l.cy || g.r != l.r || g.rx != l.rx || g.ry != l.ry); const T = n; for (const A in l)l[e](A) && (g[A] = l[A]); if (_ && (g.path = t._getPath[n.type](n), n._.dirty = 1), l.href && (u.href = l.href), l.title && (u.title = l.title), l.target && (u.target = l.target), l.cursor && (v.cursor = l.cursor), 'blur' in l && n.blur(l.blur), (l.path && n.type == 'path' || _) && (u.path = (function (e) { let i = /[ahqstv]/gi; let n = t._pathToAbsolute; if (r(e).match(i) && (n = t._path2curve), i = /[clmz]/g, n == t._pathToAbsolute && !r(e).match(i)) { var s = r(e).replace(d, (t, e, r) => { let i = []; const n = 'm' == e.toLowerCase(); let s = p[e]; return r.replace(x, (t) => { n && i.length == 2 && (s += i + p[e == 'm' ? 'l' : 'L'], i = []), i.push(a(t * y)); }), s + i; }); return s; } let o; let l; const h = n(e); s = []; for (let u = 0, g = h.length; u < g; u++) { o = h[u], (l = h[u][0].toLowerCase()) == 'z' && (l = 'x'); for (let v = 1, m = o.length; v < m; v++)l += a(o[v] * y) + (v != m - 1 ? ',' : f); s.push(l); } return s.join(c); }(~r(g.path).toLowerCase().indexOf('r') ? t._pathToAbsolute(g.path) : g.path)), n._.dirty = 1, n.type == 'image' && (n._.fillpos = [g.x, g.y], n._.fillsize = [g.width, g.height], w(n, 1, 1, 0, 0, 0))), 'transform' in l && n.transform(l.transform), C) { const M = +g.cx; const E = +g.cy; const N = +g.rx || +g.r || 0; const L = +g.ry || +g.r || 0; u.path = t.format('ar{0},{1},{2},{3},{4},{1},{4},{1}x', a((M - N) * y), a((E - L) * y), a((M + N) * y), a((E + L) * y), a(M * y)), n._.dirty = 1; } if ('clip-rect' in l) { const P = r(l['clip-rect']).split(h); if (P.length == 4) { P[2] = +P[2] + +P[0], P[3] = +P[3] + +P[1]; const z = u.clipRect || t._g.doc.createElement('div'); const F = z.style; F.clip = t.format('rect({1}px {2}px {3}px {0}px)', P), u.clipRect || (F.position = 'absolute', F.top = 0, F.left = 0, F.width = `${n.paper.width}px`, F.height = `${n.paper.height}px`, u.parentNode.insertBefore(z, u), z.appendChild(u), u.clipRect = z); }l['clip-rect'] || u.clipRect && (u.clipRect.style.clip = 'auto'); } if (n.textpath) { const R = n.textpath.style; l.font && (R.font = l.font), l['font-family'] && (R.fontFamily = `"${l['font-family'].split(',')[0].replace(/^['"]+|['"]+$/g, f)}"`), l['font-size'] && (R.fontSize = l['font-size']), l['font-weight'] && (R.fontWeight = l['font-weight']), l['font-style'] && (R.fontStyle = l['font-style']); } if ('arrow-start' in l && B(T, l['arrow-start']), 'arrow-end' in l && B(T, l['arrow-end'], 1), l.opacity != null || l.fill != null || l.src != null || l.stroke != null || l['stroke-width'] != null || l['stroke-opacity'] != null || l['fill-opacity'] != null || l['stroke-dasharray'] != null || l['stroke-miterlimit'] != null || l['stroke-linejoin'] != null || l['stroke-linecap'] != null) {
+        n.attrs = n.attrs || {}; const u = n.node; const g = n.attrs; let v = u.style; const _ = m[n.type] && (l.x != g.x || l.y != g.y || l.width != g.width || l.height != g.height || l.cx != g.cx || l.cy != g.cy || l.rx != g.rx || l.ry != g.ry || l.r != g.r); const C = b[n.type] && (g.cx != l.cx || g.cy != l.cy || g.r != l.r || g.rx != l.rx || g.ry != l.ry); const T = n; for (const A in l)l[e](A) && (g[A] = l[A]); if (_ && (g.path = t._getPath[n.type](n), n._.dirty = 1), l.href && (u.href = l.href), l.title && (u.title = l.title), l.target && (u.target = l.target), l.cursor && (v.cursor = l.cursor), 'blur' in l && n.blur(l.blur), (l.path && n.type == 'path' || _) && (u.path = (function (e) { let i = /[ahqstv]/gi; let n = t._pathToAbsolute; if (r(e).match(i) && (n = t._path2curve), i = /[clmz]/g, n == t._pathToAbsolute && !r(e).match(i)) { var s = r(e).replace(d, (t, e, r) => { let i = []; const n = e.toLowerCase() == 'm'; let s = p[e]; return r.replace(x, (t) => { n && i.length == 2 && (s += i + p[e == 'm' ? 'l' : 'L'], i = []), i.push(a(t * y)); }), s + i; }); return s; } let o; let l; const h = n(e); s = []; for (let u = 0, g = h.length; u < g; u++) { o = h[u], (l = h[u][0].toLowerCase()) == 'z' && (l = 'x'); for (let v = 1, m = o.length; v < m; v++)l += a(o[v] * y) + (v != m - 1 ? ',' : f); s.push(l); } return s.join(c); }(~r(g.path).toLowerCase().indexOf('r') ? t._pathToAbsolute(g.path) : g.path)), n._.dirty = 1, n.type == 'image' && (n._.fillpos = [g.x, g.y], n._.fillsize = [g.width, g.height], w(n, 1, 1, 0, 0, 0))), 'transform' in l && n.transform(l.transform), C) { const M = +g.cx; const E = +g.cy; const N = +g.rx || +g.r || 0; const L = +g.ry || +g.r || 0; u.path = t.format('ar{0},{1},{2},{3},{4},{1},{4},{1}x', a((M - N) * y), a((E - L) * y), a((M + N) * y), a((E + L) * y), a(M * y)), n._.dirty = 1; } if ('clip-rect' in l) { const P = r(l['clip-rect']).split(h); if (P.length == 4) { P[2] = +P[2] + +P[0], P[3] = +P[3] + +P[1]; const z = u.clipRect || t._g.doc.createElement('div'); const F = z.style; F.clip = t.format('rect({1}px {2}px {3}px {0}px)', P), u.clipRect || (F.position = 'absolute', F.top = 0, F.left = 0, F.width = `${n.paper.width}px`, F.height = `${n.paper.height}px`, u.parentNode.insertBefore(z, u), z.appendChild(u), u.clipRect = z); }l['clip-rect'] || u.clipRect && (u.clipRect.style.clip = 'auto'); } if (n.textpath) { const R = n.textpath.style; l.font && (R.font = l.font), l['font-family'] && (R.fontFamily = `"${l['font-family'].split(',')[0].replace(/^['"]+|['"]+$/g, f)}"`), l['font-size'] && (R.fontSize = l['font-size']), l['font-weight'] && (R.fontWeight = l['font-weight']), l['font-style'] && (R.fontStyle = l['font-style']); } if ('arrow-start' in l && B(T, l['arrow-start']), 'arrow-end' in l && B(T, l['arrow-end'], 1), l.opacity != null || l.fill != null || l.src != null || l.stroke != null || l['stroke-width'] != null || l['stroke-opacity'] != null || l['fill-opacity'] != null || l['stroke-dasharray'] != null || l['stroke-miterlimit'] != null || l['stroke-linejoin'] != null || l['stroke-linecap'] != null) {
           let j = u.getElementsByTagName('fill'); if (!(j = j && j[0]) && (j = k('fill')), n.type == 'image' && l.src && (j.src = l.src), l.fill && (j.on = !0), j.on != null && l.fill != 'none' && l.fill !== null || (j.on = !1), j.on && l.fill) { const I = r(l.fill).match(t._ISURL); if (I) { j.parentNode == u && u.removeChild(j), j.rotate = !0, j.src = I[1], j.type = 'tile'; const D = n.getBBox(1); j.position = D.x + c + D.y, n._.fillpos = [D.x, D.y], t._preload(I[1], function () { n._.fillsize = [this.offsetWidth, this.offsetHeight]; }); } else j.color = t.getRGB(l.fill).hex, j.src = f, j.type = 'solid', t.getRGB(l.fill).error && (T.type in { circle: 1, ellipse: 1 } || r(l.fill).charAt() != 'r') && S(T, l.fill, j) && (g.fill = 'none', g.gradient = l.fill, j.rotate = !1); } if ('fill-opacity' in l || 'opacity' in l) { var q = ((+g['fill-opacity'] + 1 || 2) - 1) * ((+g.opacity + 1 || 2) - 1) * ((+t.getRGB(l.fill).o + 1 || 2) - 1); q = o(s(q, 0), 1), j.opacity = q, j.src && (j.color = 'none'); }u.appendChild(j); let O = u.getElementsByTagName('stroke') && u.getElementsByTagName('stroke')[0]; let V = !1; !O && (V = O = k('stroke')), (l.stroke && l.stroke != 'none' || l['stroke-width'] || l['stroke-opacity'] != null || l['stroke-dasharray'] || l['stroke-miterlimit'] || l['stroke-linejoin'] || l['stroke-linecap']) && (O.on = !0), (l.stroke == 'none' || l.stroke === null || O.on == null || l.stroke == 0 || l['stroke-width'] == 0) && (O.on = !1); const W = t.getRGB(l.stroke); O.on && l.stroke && (O.color = W.hex), q = ((+g['stroke-opacity'] + 1 || 2) - 1) * ((+g.opacity + 1 || 2) - 1) * ((+W.o + 1 || 2) - 1); let Y = 0.75 * (i(l['stroke-width']) || 1); if (q = o(s(q, 0), 1), l['stroke-width'] == null && (Y = g['stroke-width']), l['stroke-width'] && (O.weight = Y), Y && Y < 1 && (q *= Y) && (O.weight = 1), O.opacity = q, l['stroke-linejoin'] && (O.joinstyle = l['stroke-linejoin'] || 'miter'), O.miterlimit = l['stroke-miterlimit'] || 8, l['stroke-linecap'] && (O.endcap = l['stroke-linecap'] == 'butt' ? 'flat' : l['stroke-linecap'] == 'square' ? 'square' : 'round'), 'stroke-dasharray' in l) {
             const G = {
               '-': 'shortdash', '.': 'shortdot', '-.': 'shortdashdot', '-..': 'shortdashdotdot', '. ': 'dot', '- ': 'dash', '--': 'longdash', '- .': 'dashdot', '--.': 'longdashdot', '--..': 'longdashdotdot',

packages/mindplot/test/playground/map-render/js/editor.js

@@ -9,7 +9,7 @@ global.accountEmail = 'test@example.com';
 
 const p = new LocalStorageManager('samples/{id}.wxml');
 const options = DesignerOptionsBuilder.buildOptions({
-  persistenceManager: p
+  persistenceManager: p,
 });
 const designer = buildDesigner(options);
 

packages/mindplot/test/unit/export/Helper.ts

@@ -16,11 +16,11 @@
  *   limitations under the License.
  */
 import { Blob } from 'blob-polyfill';
-import Exporter from '../../../src/components/export/Exporter';
 import path from 'path';
 import fs from 'fs';
 import { diff } from 'jest-diff';
 import { expect } from '@jest/globals';
+import Exporter from '../../../src/components/export/Exporter';
 
 const saveOutputRecord = false;
 
@@ -40,26 +40,26 @@ export const parseXMLFile = (filePath: fs.PathOrFileDescriptor, mimeType: DOMPar
 
   let content = stream.toString();
   // Hack for SVG exported from the browser ...
-  if(mimeType=="image/svg+xml"){
-    content = content.replace('<svg ', '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ')
+  if (mimeType == 'image/svg+xml') {
+    content = content.replace('<svg ', '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ');
   }
 
   return parseXMLString(content, mimeType);
-}
+};
 
 export const parseXMLString = (xmlStr: string, mimeType: DOMParserSupportedType) => {
   const parser = new DOMParser();
   const xmlDoc = parser.parseFromString(xmlStr, mimeType);
 
   // Is there any parsing error ?.
-  if (xmlDoc.getElementsByTagName("parsererror").length > 0) {
+  if (xmlDoc.getElementsByTagName('parsererror').length > 0) {
     const xmmStr = new XMLSerializer().serializeToString(xmlDoc);
     console.log(xmmStr);
     throw new Error(`Unexpected error parsing: ${xmlStr}. Error: ${xmmStr}`);
   }
 
   return xmlDoc;
-}
+};
 
 export const exporterAssert = async (testName: string, exporter: Exporter) => {
   const actualStr = await exporter.export();
@@ -77,4 +77,4 @@ export const exporterAssert = async (testName: string, exporter: Exporter) => {
     console.log(diffResult);
     expect(actualStr).toEqual(expectedStr);
   }
-}
+};

packages/mindplot/test/unit/export/SVGExporterTestSuite.test.ts

@@ -1,7 +1,7 @@
-import Mindmap from '../../../src/components/model/Mindmap';
 import path from 'path';
 import fs from 'fs';
 import { expect, test } from '@jest/globals'; // Workaround for cypress conflict
+import Mindmap from '../../../src/components/model/Mindmap';
 import XMLSerializerFactory from '../../../src/components/persistence/XMLSerializerFactory';
 import SVGExporter from '../../../src/components/export/SVGExporter';
 import { parseXMLFile, setupBlob, exporterAssert } from './Helper';
@@ -11,8 +11,7 @@ setupBlob();
 describe('SVG export test execution', () => {
   test.each(fs.readdirSync(path.resolve(__dirname, './input/'))
     .filter((f) => f.endsWith('.wxml'))
-    .map((filename: string) => filename.split('.')[0]))
-    (`Exporting %p suite`, async (testName: string) => {
+    .map((filename: string) => filename.split('.')[0]))('Exporting %p suite', async (testName: string) => {
     // Load mindmap DOM ...
     const mindmapPath = path.resolve(__dirname, `./input/${testName}.wxml`);
     const mapDocument = parseXMLFile(mindmapPath, 'text/xml');

packages/mindplot/test/unit/export/TextExporterTestSuite.test.ts

@@ -1,10 +1,10 @@
-import Mindmap from '../../../src/components/model/Mindmap';
 import path from 'path';
+import fs from 'fs';
+import { test } from '@jest/globals'; // Workaround for cypress conflict
+import Mindmap from '../../../src/components/model/Mindmap';
 import XMLSerializerFactory from '../../../src/components/persistence/XMLSerializerFactory';
 import TextExporterFactory from '../../../src/components/export/TextExporterFactory';
 import { parseXMLFile, setupBlob, exporterAssert } from './Helper';
-import fs from 'fs';
-import { test } from '@jest/globals'; // Workaround for cypress conflict
 
 setupBlob();
 
@@ -13,8 +13,7 @@ const testNames = fs.readdirSync(path.resolve(__dirname, './input/'))
   .map((filename: string) => filename.split('.')[0]);
 
 describe('WXML export test execution', () => {
-  test.each(testNames)
-    (`Exporting %p suite`, async (testName: string) => {
+  test.each(testNames)('Exporting %p suite', async (testName: string) => {
     // Load mindmap DOM ...
     const mindmapPath = path.resolve(__dirname, `./input/${testName}.wxml`);
     const mapDocument = parseXMLFile(mindmapPath, 'text/xml');
@@ -29,8 +28,7 @@ describe('WXML export test execution', () => {
 });
 
 describe('Txt export test execution', () => {
-    test.each(testNames)
-      (`Exporting %p suite`, async (testName: string) => {
+  test.each(testNames)('Exporting %p suite', async (testName: string) => {
     // Load mindmap DOM ...
     const mindmapPath = path.resolve(__dirname, `./input/${testName}.wxml`);
     const mapDocument = parseXMLFile(mindmapPath, 'text/xml');
@@ -45,8 +43,7 @@ describe('WXML export test execution', () => {
 });
 
 describe('MD export test execution', () => {
-      test.each(testNames)
-        (`Exporting %p suite`, async (testName: string) => {
+  test.each(testNames)('Exporting %p suite', async (testName: string) => {
     // Load mindmap DOM ...
     const mindmapPath = path.resolve(__dirname, `./input/${testName}.wxml`);
     const mapDocument = parseXMLFile(mindmapPath, 'text/xml');

packages/mindplot/test/unit/layout/Constants.ts

@@ -1,5 +1,5 @@
 const Constants = {
   NODE_SIZE: { width: 80, height: 30 },
-    ROOT_NODE_SIZE: { width: 120, height: 40 }
-}
+  ROOT_NODE_SIZE: { width: 120, height: 40 },
+};
 export default Constants;

packages/mindplot/webpack.playground.js

@@ -2,8 +2,8 @@ const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
-const common = require('./webpack.common');
 const { merge } = require('webpack-merge');
+const common = require('./webpack.common');
 
 const playgroundConfig = {
   mode: 'development',