Merge branch 'release/1.0.0' into new/simulator-fixes

memgraph · Dec 15, 2023 · e3ad3dc · e3ad3dc
2 parents e6e0a0d + c26dd8a
commit e3ad3dc
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 0.4.2
+
+### Fix
+
+* Fix: resizeObserver is not unobserved (#82) (fixes #81) - by @markusnissl
+
 ## 0.4.1
 
 ### Fix

diff --git a/docs/styles.md b/docs/styles.md
@@ -142,6 +142,7 @@ style properties:
 | `widthHover`          | number              | Edge line width on mouse hover event. If not defined `width` is used. |
 | `widthSelected`       | number              | Edge line width on mouse click event. If not defined `width` is used. |
 | `zIndex`              | number              | Specifies the stack order of an element during rendering. The default is `0`. |
+| `lineStyle`       | object              | Allows to customize the style of edges in the graph visualization. The default is `{type: 'solid'}` |
 
 ## Default style values
 

diff --git a/src/models/edge.ts b/src/models/edge.ts
@@ -1,9 +1,12 @@
 import { INodeBase, INode } from './node';
 import { GraphObjectState } from './state';
 import { Color, IPosition, ICircle, getDistanceToLine } from '../common';
+import { isArrayOfNumbers } from '../utils/type.utils';
 
 const CURVED_CONTROL_POINT_OFFSET_MIN_SIZE = 4;
 const CURVED_CONTROL_POINT_OFFSET_MULTIPLIER = 4;
+const DEFAULT_DASHED_LINE_PATTERN: number[] = [5, 5];
+const DEFAULT_DOTTED_LINE_PATTERN: number[] = [1, 1];
 
 /**
  * Edge baseline object with required fields
@@ -25,6 +28,19 @@ export interface IEdgePosition {
   target: any;
 }
 
+export enum EdgeLineStyleType {
+  SOLID = 'solid',
+  DASHED = 'dashed',
+  DOTTED = 'dotted',
+  CUSTOM = 'custom',
+}
+
+export type IEdgeLineStyle =
+  | { type: EdgeLineStyleType.SOLID }
+  | { type: EdgeLineStyleType.DASHED }
+  | { type: EdgeLineStyleType.DOTTED }
+  | { type: EdgeLineStyleType.CUSTOM; pattern: number[] };
+
 /**
  * Edge style properties used to style the edge (color, width, label, etc.).
  */
@@ -46,6 +62,7 @@ export type IEdgeStyle = Partial<{
   widthHover: number;
   widthSelected: number;
   zIndex: number;
+  lineStyle: IEdgeLineStyle;
 }>;
 
 export interface IEdgeData<N extends INodeBase, E extends IEdgeBase> {
@@ -89,6 +106,7 @@ export interface IEdge<N extends INodeBase, E extends IEdgeBase> {
   hasShadow(): boolean;
   getWidth(): number;
   getColor(): Color | string | undefined;
+  getLineDashPattern(): number[] | null;
 }
 
 export class EdgeFactory {
@@ -256,6 +274,25 @@ abstract class Edge<N extends INodeBase, E extends IEdgeBase> implements IEdge<N
 
     return color;
   }
+
+  getLineDashPattern(): number[] | null {
+    const lineStyle: IEdgeLineStyle | undefined = this.style.lineStyle;
+
+    if (lineStyle === undefined || lineStyle.type === EdgeLineStyleType.SOLID) {
+      return null;
+    }
+
+    switch (lineStyle.type) {
+      case EdgeLineStyleType.DASHED:
+        return DEFAULT_DASHED_LINE_PATTERN;
+      case EdgeLineStyleType.DOTTED:
+        return DEFAULT_DOTTED_LINE_PATTERN;
+      case EdgeLineStyleType.CUSTOM:
+        return isArrayOfNumbers(lineStyle.pattern) ? lineStyle.pattern : null;
+      default:
+        return null;
+    }
+  }
 }
 
 const getEdgeType = <N extends INodeBase, E extends IEdgeBase>(data: IEdgeData<N, E>): EdgeType => {

diff --git a/src/renderer/canvas/edge/types/edge-curved.ts b/src/renderer/canvas/edge/types/edge-curved.ts
@@ -18,6 +18,10 @@ export const drawCurvedLine = <N extends INodeBase, E extends IEdgeBase>(
   context.beginPath();
   context.moveTo(sourcePoint.x, sourcePoint.y);
   context.quadraticCurveTo(controlPoint.x, controlPoint.y, targetPoint.x, targetPoint.y);
+
+  const lineDashPattern = edge.getLineDashPattern();
+  context.setLineDash(lineDashPattern ?? []);
+
   context.stroke();
 };
 

diff --git a/src/renderer/canvas/edge/types/edge-loopback.ts b/src/renderer/canvas/edge/types/edge-loopback.ts
@@ -13,6 +13,10 @@ export const drawLoopbackLine = <N extends INodeBase, E extends IEdgeBase>(
   context.beginPath();
   context.arc(x, y, radius, 0, 2 * Math.PI, false);
   context.closePath();
+
+  const lineDashPattern = edge.getLineDashPattern();
+  context.setLineDash(lineDashPattern ?? []);
+
   context.stroke();
 };
 

diff --git a/src/renderer/canvas/edge/types/edge-straight.ts b/src/renderer/canvas/edge/types/edge-straight.ts
@@ -17,6 +17,10 @@ export const drawStraightLine = <N extends INodeBase, E extends IEdgeBase>(
   context.beginPath();
   context.moveTo(sourcePoint.x, sourcePoint.y);
   context.lineTo(targetPoint.x, targetPoint.y);
+
+  const lineDashPattern = edge.getLineDashPattern();
+  context.setLineDash(lineDashPattern ?? []);
+
   context.stroke();
 };
 

diff --git a/src/utils/type.utils.ts b/src/utils/type.utils.ts
@@ -87,3 +87,16 @@ export const isNull = (value: any): value is null => {
 export const isFunction = (value: any): value is Function => {
   return typeof value === 'function';
 };
+
+/**
+ * Type check for an array of numbers
+ *
+ * @param {any} value Any value
+ * @return {boolean} True if it is an array of numbers, false otherwise
+ */
+export const isArrayOfNumbers = (value: any): value is number[] => {
+  if (!isArray(value)) {
+    return false;
+  }
+  return value.every((element) => isNumber(element));
+};
diff --git a/src/views/orb-map-view.ts b/src/views/orb-map-view.ts
@@ -67,6 +67,7 @@ export type IOrbMapViewSettingsUpdate<N extends INodeBase, E extends IEdgeBase>
 
 export class OrbMapView<N extends INodeBase, E extends IEdgeBase> implements IOrbView<N, E, IOrbMapViewSettings<N, E>> {
   private _container: HTMLElement;
+  private _resizeObs: ResizeObserver;
   private _graph: IGraph<N, E>;
   private _events: OrbEmitter<N, E>;
   private _strategy: IEventStrategy<N, E>;
@@ -131,8 +132,8 @@ export class OrbMapView<N extends INodeBase, E extends IEdgeBase> implements IOr
     this._settings.render = this._renderer.getSettings();
 
     // Resize the canvas based on the dimensions of it's parent container <div>.
-    const resizeObs = new ResizeObserver(() => this._handleResize());
-    resizeObs.observe(this._container);
+    this._resizeObs = new ResizeObserver(() => this._handleResize());
+    this._resizeObs.observe(this._container);
     this._handleResize();
 
     this._leaflet = this._initLeaflet();
@@ -217,6 +218,7 @@ export class OrbMapView<N extends INodeBase, E extends IEdgeBase> implements IOr
   }
 
   destroy() {
+    this._resizeObs.unobserve(this._container);
     this._renderer.removeAllListeners();
     this._leaflet.off();
     this._leaflet.remove();

diff --git a/src/views/orb-view.ts b/src/views/orb-view.ts
@@ -48,6 +48,7 @@ export type IOrbViewSettingsInit<N extends INodeBase, E extends IEdgeBase> = Omi
 
 export class OrbView<N extends INodeBase, E extends IEdgeBase> implements IOrbView<N, E, IOrbViewSettings<N, E>> {
   private _container: HTMLElement;
+  private _resizeObs: ResizeObserver;
   private _graph: IGraph<N, E>;
   private _events: OrbEmitter<N, E>;
   private _strategy: IEventStrategy<N, E>;
@@ -127,8 +128,8 @@ export class OrbView<N extends INodeBase, E extends IEdgeBase> implements IOrbVi
     this._settings.render = this._renderer.getSettings();
 
     // Resize the canvas based on the dimensions of its parent container <div>.
-    const resizeObs = new ResizeObserver(() => this._handleResize());
-    resizeObs.observe(this._container);
+    this._resizeObs = new ResizeObserver(() => this._handleResize());
+    this._resizeObs.observe(this._container);
     this._handleResize();
 
     this._d3Zoom = zoom<HTMLCanvasElement, any>()
@@ -329,6 +330,7 @@ export class OrbView<N extends INodeBase, E extends IEdgeBase> implements IOrbVi
   }
 
   destroy() {
+    this._resizeObs.unobserve(this._container);
     this._renderer.removeAllListeners();
     this._simulator.terminate();
     this._canvas.outerHTML = '';