updated d3 (#2)

b310-digital · Dec 12, 2021 · 29d0d5a · 29d0d5a
1 parent 9377b43
commit 29d0d5a
Show file tree

Hide file tree

Showing 8 changed files with 591 additions and 439 deletions.
diff --git a/mindmapper-frontend/mmp/src/map/handlers/drag.ts b/mindmapper-frontend/mmp/src/map/handlers/drag.ts
@@ -2,7 +2,7 @@ import * as d3 from 'd3'
 import Map from '../map'
 import Node from '../models/node'
 import {Event} from './events'
-import {DragBehavior} from 'd3-drag'
+import {DragBehavior, D3DragEvent} from 'd3-drag'
 import Utils from '../../utils/utils'
 import Log from '../../utils/log'
 
@@ -26,9 +26,9 @@ export default class Drag {
         this.map = map
 
         this.dragBehavior = d3.drag()
-            .on('start', (node: Node) => this.started(node))
-            .on('drag', (node: Node) => this.dragged(node))
-            .on('end', (node: Node) => this.ended(node))
+            .on('start', (event: D3DragEvent<any, any, any>, node: Node) => this.started(event, node))
+            .on('drag', (event: D3DragEvent<any, any, any>, node: Node) => this.dragged(event, node))
+            .on('end', (event: D3DragEvent<any, any, any>, node: Node) => this.ended(event, node))
     }
 
     /**
@@ -43,8 +43,8 @@ export default class Drag {
      * Select the node and calculate node position data for dragging.
      * @param {Node} node
      */
-    private started(node: Node) {
-        d3.event.sourceEvent.preventDefault()
+    private started(event: D3DragEvent<any, any, any>, node: Node) {
+        event.sourceEvent.preventDefault()
 
         this.orientation = this.map.nodes.getOrientation(node)
         this.descendants = this.map.nodes.getDescendants(node)
@@ -56,13 +56,13 @@ export default class Drag {
      * Move the dragged node and if it is locked all their descendants.
      * @param {Node} node
      */
-    private dragged(node: Node) {
-        const dy = d3.event.dy,
-            dx = d3.event.dx
+    private dragged(event: D3DragEvent<any, any, any>, node: Node) {
+        const dy = event.dy,
+              dx = event.dx
 
         // Set new coordinates
         const x = node.coordinates.x += dx,
-            y = node.coordinates.y += dy
+              y = node.coordinates.y += dy
 
         // Move graphically the node in new coordinates
         node.dom.setAttribute('transform', 'translate(' + [x, y] + ')')
@@ -103,7 +103,7 @@ export default class Drag {
      * If the node was actually dragged change the state of dragging and save the snapshot.
      * @param {Node} node
      */
-    private ended(node: Node) {
+    private ended(_event: D3DragEvent<any, any, any>, node: Node) {
         if (this.dragging) {
             this.dragging = false
             this.map.history.save()

diff --git a/mindmapper-frontend/mmp/src/map/handlers/draw.ts b/mindmapper-frontend/mmp/src/map/handlers/draw.ts
@@ -65,10 +65,10 @@ export default class Draw {
                 return node.id
             })
             .attr('transform', (node: Node) => 'translate(' + node.coordinates.x + ',' + node.coordinates.y + ')')
-            .on('dblclick', (node: Node) => {
-                d3.event.stopPropagation()
+            .on('dblclick', (event: MouseEvent, node: Node) => {
+                event.stopPropagation()
                 this.enableNodeNameEditing(node)
-            }).on('touchstart', (node: Node) => {
+            }).on('touchstart', (_event: TouchEvent, node: Node) => {
                 if (!tapedTwice) {
                     tapedTwice = true
 

diff --git a/mindmapper-frontend/mmp/src/map/handlers/nodes.ts b/mindmapper-frontend/mmp/src/map/handlers/nodes.ts
@@ -7,10 +7,9 @@ import Node, {
     NodeProperties,
     UserNodeProperties
 } from '../models/node'
-import Map, { DomElements } from '../map'
+import MmpMap, { DomElements } from '../map'
 import * as d3 from 'd3'
 import { v4 as uuidv4 } from 'uuid'
-import {Map as D3Map} from 'd3-collection'
 import {Event} from './events'
 import Log from '../../utils/log'
 import Utils from '../../utils/utils'
@@ -23,20 +22,20 @@ export default class Nodes {
 
     /**
      * Get the associated map instance and initialize counter and nodes.
-     * @param {Map} map
+     * @param {MmpMap} map
      */
-    constructor(map: Map) {
+    constructor(map: MmpMap) {
         this.map = map
 
         this.counter = 0
-        this.nodes = d3.map()
+        this.nodes = new Map()
     }
     static NodePropertyMapping: any
 
-    private map: Map
+    private map: MmpMap
 
     private counter: number
-    private nodes: D3Map<Node>
+    private nodes: Map<string, Node>
     private selectedNode: Node
 
     /**
@@ -311,10 +310,10 @@ export default class Nodes {
         }
 
         if (!node.isRoot) {
-            this.nodes.remove(node.id)
+            this.nodes.delete(node.id)
 
             this.getDescendants(node).forEach((node: Node) => {
-                this.nodes.remove(node.id)
+                this.nodes.delete(node.id)
             })
 
             this.map.draw.clear()
@@ -346,7 +345,7 @@ export default class Nodes {
             Log.error('There are no nodes with id "' + id + '"')
         }
 
-        return this.nodes.values().filter((n: Node) => {
+        return Array.from(this.nodes.values()).filter((n: Node) => {
             return n.parent && n.parent.id === node.id
         }).map((n: Node) => {
             return this.getNodeProperties(n)
@@ -435,7 +434,7 @@ export default class Nodes {
      * @returns {Node[]}
      */
     public getChildren(node: Node): Node[] {
-        return this.nodes.values().filter((n: Node) => {
+        return Array.from(this.nodes.values()).filter((n: Node) => {
             return n.parent && n.parent.id === node.id
         })
     }
@@ -467,7 +466,7 @@ export default class Nodes {
      * Return an array of all nodes.
      */
     public getNodes(): Node[] {
-        return this.nodes.values()
+        return Array.from(this.nodes.values())
     }
 
     /**
@@ -629,7 +628,7 @@ export default class Nodes {
      * @param {Node[]} nodes
      * @returns {Node} lowerNode
      */
-    private getLowerNode(nodes: Node[] = this.nodes.values()): Node {
+    private getLowerNode(nodes: Node[] = Array.from(this.nodes.values())): Node {
         if (nodes.length > 0) {
             let tmp = nodes[0].coordinates.y, lowerNode = nodes[0]
 

diff --git a/mindmapper-frontend/mmp/src/map/handlers/zoom.ts b/mindmapper-frontend/mmp/src/map/handlers/zoom.ts
@@ -1,7 +1,7 @@
 import * as d3 from 'd3'
 import Map from '../map'
 import {Event} from './events'
-import {ZoomBehavior} from 'd3-zoom'
+import {ZoomBehavior, D3ZoomEvent} from 'd3-zoom'
 import Log from '../../utils/log'
 
 /**
@@ -20,8 +20,8 @@ export default class Zoom {
     constructor(map: Map) {
         this.map = map
 
-        this.zoomBehavior = d3.zoom().scaleExtent([0.5, 2]).on('zoom', () => {
-            this.map.dom.g.attr('transform', d3.event.transform)
+        this.zoomBehavior = d3.zoom().scaleExtent([0.5, 2]).on('zoom', (event: D3ZoomEvent<any, any>) => {
+            this.map.dom.g.attr('transform', event.transform)
         })
     }