node size by links count (#13)

* texture generation fixed; improved the performance

* console.log removed

* force layout

* plugins - attempted

* code cleanups

* node.links moved to node.neighbors.links

* node size by degree

* node size based on scale added

* dynamic node label size based implemented

src/artBoard/base.ts

@@ -61,7 +61,8 @@ export class ArtBoardBase {
     // add "link:data:onDeleted" event listener
     this.canvas.dataStore.on('node:data:onLinksUpdated', this.events.onNodeLinksUpdated);
 
-    // this.canvas.dataStore.on('artBoard:onMessageChanged', this.events.onMessageChanged);
+    this.canvas.dataStore.on('node:data:onStyleUpdated', this.events.onNodeStyleUpdated);
+
 
 
   }
@@ -85,7 +86,7 @@ export class ArtBoardBase {
     }
   }
 
-  start_drawing = () => {
+  init = () => {
 
     const _this = this;
     console.log("start_drawing this.options", this.canvas.options)
@@ -96,7 +97,7 @@ export class ArtBoardBase {
       view: this.canvas.options.viewElement,
       antialias: true,
       resizeTo: window,
-      preference: "webgpu",
+      // preference: "webgpu",
       autoStart: true, // // disable automatic rendering by ticker, render manually instead, only when needed
       autoDensity: true,
       resolution: window.devicePixelRatio, /// 2 for retina displays
@@ -115,14 +116,11 @@ export class ArtBoardBase {
       console.log("===_this.pixiApp.stage", _this.pixiApp.stage, this, this.viewport)
 
     }).finally(()=>{
-
-
-
       this.viewport = this.createViewport()
       this.pixiApp.stage.addChild(this.viewport)
-      this.renderer = new Renderer(_this)
-      this.camera = new Camera(_this)
-      this.events = new DefaultEventEmitter(_this)
+      this.renderer = new Renderer(this)
+      this.camera = new Camera(this)
+      this.events = new DefaultEventEmitter(this)
       this.setUpRenderOnEventListers()
 
     })
@@ -160,11 +158,10 @@ export class ArtBoardBase {
   }
 
   showLabelsBasedOnZoom = (zoomScale: number) => {
-    console.log("===showLabelsBasedOnZoom", zoomScale, this.isLabelsVisible)
+    console.debug("===showLabelsBasedOnZoom", zoomScale, this.isLabelsVisible)
     if (zoomScale < 0.40){
 
       if (this.isLabelsVisible === true){
-        console.log("===showLabelsBasedOnZoom < 0.40", zoomScale, this.isLabelsVisible)
 
         // hide label
         this.hideNodeLabels()
@@ -208,13 +205,13 @@ export class ArtBoardBase {
       })
 
 
-    viewport.on("zoomed-end", event => {
-      console.log("zoomed-end event", event)
-      // this.showLabelsBasedOnZoom(event.viewport.scaled)
-    })
+    // viewport.on("zoomed-end", event => {
+    //   console.log("zoomed-end event", event)
+    //   // this.showLabelsBasedOnZoom(event.viewport.scaled)
+    // })
 
     viewport.on("zoomed", event => {
-      console.log("zoomed event", event.viewport.scaled, event)
+      // console.log("zoomed event", event.viewport.scaled, event)
       // this.showLabelsBasedOnZoom(event.viewport.scaled)
       this.camera.onSetZoomLevel(event.viewport.scaled)
     })

src/artBoard/camera.ts

@@ -18,7 +18,7 @@ export class Camera {
     }
 
     fitView(selectedNodes: CanvasNode[] = [], zoomLevel?: number) {
-        console.log("==fitView", selectedNodes, zoomLevel);
+        // console.log("==fitView", selectedNodes, zoomLevel);
         if (selectedNodes.length == 0 ){
             selectedNodes = this.artBoard.canvas.dataStore.getNodes()
         }
@@ -38,7 +38,7 @@ export class Camera {
     }
 
     onSetZoomLevel = (zoomLevel: number) =>{
-        console.log("==setZoomLevel", zoomLevel)
+        // console.log("==setZoomLevel", zoomLevel)
         // this.setZoom(zoomLevel , true);
         this.artBoard.showLabelsBasedOnZoom(zoomLevel)
         this.artBoard.canvas.dataStore.updateMessage(`Zoomed to ${Math.ceil(this.viewport.scaled * 100)}%`)

src/canvas/canvas.ts

@@ -31,6 +31,11 @@ export class GraphCanvas {
     this.artBoard = new ArtBoard(this)
     // data store 
     this.dataStore = new DataStore(this);
+
+    // this.options.plugins.forEach((PluginCls: PluginBase )=> {
+    //   const div = new PluginCls(this.artBoard);
+    //   this.options.viewElement.appendChild(div.render())
+    // })
   }
 
   // start_drawing(){

src/canvas/defaults.ts

@@ -18,7 +18,7 @@ export const defaultCanvasOptions: ICanvasOptions = {
   viewElement: defaultViewDiv,
   background: "#222222",
   resolution: {
-    nodes: window.devicePixelRatio * 4,
+    nodes: window.devicePixelRatio * 2,
     links: window.devicePixelRatio,
     canvas: window.devicePixelRatio, // WARNING - dont change this;
     labels: window.devicePixelRatio * 2,

src/canvas/types.ts

@@ -1,5 +1,6 @@
 // import { ICanvas } from "pixi.js";
 
+// import { PluginBase } from "../plugins/base"
 import { ExtraSettings, GraphicsStyles } from "../renderer/types"
 
 export interface ICanvasOptions {
@@ -16,5 +17,6 @@ export interface ICanvasOptions {
   debugMode?: boolean
   styles?: GraphicsStyles
   extraSettings?: ExtraSettings
+  // plugins: PluginBase[]
 
 }

src/plugins/base.ts

@@ -0,0 +1,28 @@
+import { ArtBoard } from "../artBoard";
+
+
+export abstract class PluginAbstract {
+
+  artBoard: ArtBoard;
+
+  constructor(artBoard: ArtBoard){
+      this.artBoard = artBoard
+  }
+
+  abstract render(): HTMLElement
+}
+
+export class PluginBase implements PluginAbstract {
+
+  artBoard: ArtBoard;
+
+  constructor(artBoard: ArtBoard){
+      this.artBoard = artBoard
+  }
+
+  render(): HTMLElement {
+    const div = document.createElement("div");
+      div.innerText = "Base Plugin - extend render()"
+    return div
+  }
+}

src/plugins/messageBar/index.ts

@@ -1,9 +1,10 @@
 import { ArtBoard } from "../../artBoard";
 import { OnMessageChangedEventData } from "../../store/events/types";
+import { PluginAbstract } from "../base";
 import "./index.css"
 
 
-export default class MessageBar {
+export default class MessageBar implements PluginAbstract {
 
     artBoard: ArtBoard;
 

src/plugins/toolbar/index.ts

@@ -1,8 +1,9 @@
 import { ArtBoard } from "../../artBoard";
+import { PluginAbstract } from "../base";
 import { createToolBarButton, createToolBarToggleButton, IToolBarButton } from "./html";
 import "./toolbar.css"
 
-export default class ToolBar {
+export default class ToolBar implements PluginAbstract{
 
     artBoard: ArtBoard;
 

src/renderer/primitives/label.ts

@@ -8,7 +8,7 @@ export interface LabelPrimitiveType extends IShapeLabelStyle {
 }
 
 const drawLabelShape = (props: LabelPrimitiveType) => {
-    console.log("===drawLabelShape props", props)
+    // console.log("===drawLabelShape props", props)
     const labelGfx = new Graphics();
 
     // if (!props.label){
@@ -29,7 +29,7 @@ const drawLabelShape = (props: LabelPrimitiveType) => {
     const textBounds = text.getBounds(); // Get the size of the text box
 
     if (props?.background?.color){
-        console.log("===drawLabelShape props.background.color", props.background.color)
+        // console.log("===drawLabelShape props.background.color", props.background.color)
         // add background; TODO- move this to rectangle primitive later 
         const textBackground = new Graphics();
         textBackground.lineStyle(props.border.thickness, props.border.color);
@@ -45,7 +45,7 @@ const drawLabelShape = (props: LabelPrimitiveType) => {
             textBounds.width + (props.padding * 2) , 
             textBounds.height // + props.padding 
         ); // Draw rectangle behind the text
-        console.log("====props.border.", props.border)
+        // console.log("====props.border.", props.border)
         textBackground.endFill()
 
         // textBackground

src/renderer/primitives/nodes/circle.ts

@@ -9,7 +9,7 @@ export interface DrawCirclePrimitiveType {
 }
 
 const drawCircleShape = (props: DrawCirclePrimitiveType) => {
-    console.log("drawCircle", props);
+    console.debug("drawCircle", props);
     const shapeName = new Graphics();
 
 

src/renderer/renderer.ts

@@ -95,7 +95,7 @@ export class Renderer {
   tick() {
     this.rePositionNodes(this.artBoard.canvas.dataStore.getNodes());
     this.reRenderLinks(this.artBoard.canvas.dataStore.getLinks())
-    this.artBoard.camera.fitView()
+    // this.artBoard.camera.fitView()
     // this.renderScreenBorderIfRequired();
   }
 

src/renderer/shapes/abstract.ts

@@ -116,7 +116,7 @@ export abstract class ShapeAbstract extends ShapeAbstractBase {
     }
 
     // Function to recursively set interactive and cursor properties on all children
-    setInteractiveRecursive(container: PIXI.Graphics) {
+    setInteractiveRecursive(container: PIXI.Container) {
         container.interactive = true;
         container.cursor = 'pointer';
         container.children.forEach((child) => {
@@ -125,18 +125,18 @@ export abstract class ShapeAbstract extends ShapeAbstractBase {
     }
 
     clear = () => {
-        console.log("ShapeAbstract.clear triggered")
+        // console.log("ShapeAbstract.clear triggered")
         this.containerGfx.removeChildren();
     }
 
     removeInteractionTriggers() {
-        console.debug("===removeInteractionTriggers triggered on link", this.containerGfx)
+        // console.debug("===removeInteractionTriggers triggered on link", this.containerGfx)
         // Remove all listeners
         this.containerGfx.removeAllListeners();
     }
 
     setState(stateName: IShapeState, setNeighborsToo: boolean = false, event?: PIXI.FederatedPointerEvent) {
-        console.log("==setState", this.data.id, stateName, setNeighborsToo)
+        // console.log("==setState", this.data.id, stateName, setNeighborsToo)
         if (this.data.state === stateName)
             return
 
@@ -151,7 +151,7 @@ export abstract class ShapeAbstract extends ShapeAbstractBase {
 
     drawDebugBorder(x: number, y: number) {
         // Calculate the bounding box
-        console.log("===drawDebugBorder", this.data.id, x, y)
+        // console.log("===drawDebugBorder", this.data.id, x, y)
         // // const borderGfx = this.artBoard.viewport.getChildByName(NodeContainerChildNames.debugBorder)
         // if (this.borderGfx){
         //     // const position = this.containerGfx.getBounds();

src/renderer/shapes/links/base.ts

@@ -30,7 +30,7 @@ export class LinkShapeBase extends LinkShapeAbstract {
     this.labelGfx = new PIXI.Graphics();
     // setup intractions
     this.data.setGfxInstance(this);
-    console.debug("this.data.gfxInstance ", this.data, this.data.gfxInstance)
+    // console.debug("this.data.gfxInstance ", this.data, this.data.gfxInstance)
   }
 
 
@@ -59,27 +59,27 @@ export class LinkShapeBase extends LinkShapeAbstract {
   }
 
   triggerInactive = (event?: PIXI.FederatedPointerEvent) => {
-    console.log(`triggerInactive triggered on node - ${this.data.id}`);
+    // console.log(`triggerInactive triggered on node - ${this.data.id}`);
     this.containerGfx.alpha = 0.2
   }
 
   triggerDefault = (event?: PIXI.FederatedPointerEvent) => {
-    console.log(`triggerDefault triggered on node - ${this.data.id}`);
+    // console.log(`triggerDefault triggered on node - ${this.data.id}`);
     this.containerGfx.alpha = 1;
     this.containerGfx.visible = true
   }
 
   triggerSelected = (event?: PIXI.FederatedPointerEvent) => {
-    console.log(`Selected triggered on link - ${this.data.id}`);
+    // console.log(`Selected triggered on link - ${this.data.id}`);
 
   }
 
   triggerUnSelected = (event?: PIXI.FederatedPointerEvent) => {
-    console.log(`UnSelected triggered on link - ${this.data.id}`);
+    // console.log(`UnSelected triggered on link - ${this.data.id}`);
   }
 
   triggerHighlighted = (event?: PIXI.FederatedPointerEvent, setNeighborsToo: boolean = false) => {
-    console.log(`triggerHighlighted triggered on node - ${this.data.id}`);
+    // console.log(`triggerHighlighted triggered on node - ${this.data.id}`);
     this.moveToFrontLayer();
 
     if (this.shapeGfx) {
@@ -88,7 +88,6 @@ export class LinkShapeBase extends LinkShapeAbstract {
         shapeHighlightedBorder.visible = true
       }
       const textBg = this.labelGfx?.getChildByName(LinkContainerChildNames.labelBackground);
-      console.log("====textBg", textBg)
       if (textBg) {
         textBg.visible = true
       }
@@ -101,7 +100,7 @@ export class LinkShapeBase extends LinkShapeAbstract {
   }
 
   triggerUnHighlighted = (event?: PIXI.FederatedPointerEvent, setNeighborsToo: boolean = false) => {
-    console.log(`triggerUnHighlighted on node - ${this.data.id}`);
+    // console.log(`triggerUnHighlighted on node - ${this.data.id}`);
     this.moveToDataLayer();
 
     if (this.shapeGfx) {
@@ -111,7 +110,6 @@ export class LinkShapeBase extends LinkShapeAbstract {
         shapeHighlightedBorder.visible = false
       }
       const textBg = this.labelGfx?.getChildByName(LinkContainerChildNames.labelBackground);
-      console.log("====textBg", textBg)
       if (textBg) {
         textBg.visible = false
       }
@@ -140,7 +138,7 @@ export class LinkShapeBase extends LinkShapeAbstract {
   // }
 
   setupInteractionTriggers() {
-    console.debug("===setupInteractions triggered on link", this.containerGfx)
+    // console.debug("===setupInteractions triggered on link", this.containerGfx)
     // Remove all listeners
     this.containerGfx.removeAllListeners();
 
@@ -156,7 +154,7 @@ export class LinkShapeBase extends LinkShapeAbstract {
         this.setState(":default", true, event)
       })
       .on('pointerdown', (event) => {
-        console.log("pointerdown", this.data.id, this.data.state)
+        // console.log("pointerdown", this.data.id, this.data.state)
         this.dragData = event.data
         // event.stopPropagation();
         // event.stopPropagation();
@@ -166,7 +164,7 @@ export class LinkShapeBase extends LinkShapeAbstract {
         this.setState(":highlighted", true, event)
       })
       .on("pointermove", (event) => {
-        console.log("ignoring pointermove")
+        // console.log("ignoring pointermove")
         event.stopPropagation()
       })
 

src/renderer/shapes/links/lines/bezierCurvedLine.ts

@@ -39,7 +39,7 @@ class BezierCurvedLine extends LinkShapeBase{
     curveType: ILinkShapeStyles = 'straight'
 
     calcLabelPosition = (labelGfx: PIXI.Graphics, shapeGfx: PIXI.Graphics) => {
-        console.log("calcLabelPosition===", this.data.source.x, this.data.source.y, this.data.target.x, this.data.target.y)
+        // console.log("calcLabelPosition===", this.data.source.x, this.data.source.y, this.data.target.x, this.data.target.y)
         const labelPosition = getLinkLabelPosition(this.data.source, this.data.target, this.curveType)
         const box = labelGfx.getBounds()
         // labelGfx.position.set(labelPosition.x , labelPosition.y );

src/renderer/shapes/links/lines/curvedLine.ts

@@ -40,7 +40,7 @@ class CurvedLine extends LinkShapeBase{
     curveType: ILinkShapeStyles = 'straight'
 
     calcLabelPosition = (labelGfx: PIXI.Graphics, shapeGfx: PIXI.Graphics) => {
-        console.log("calcLabelPosition===", this.data.source.x, this.data.source.y, this.data.target.x, this.data.target.y)
+        // console.log("calcLabelPosition===", this.data.source.x, this.data.source.y, this.data.target.x, this.data.target.y)
         const labelPosition = getLinkLabelPosition(this.data.source, this.data.target, this.curveType)
         const box = labelGfx.getBounds()
         // labelGfx.position.set(labelPosition.x , labelPosition.y );

src/renderer/shapes/links/lines/loopLine.ts

@@ -38,7 +38,7 @@ class LoopLine extends LinkShapeBase{
     curveType: ILinkShapeStyles = 'straight'
 
     calcLabelPosition = (labelGfx: PIXI.Graphics, shapeGfx: PIXI.Graphics) => {
-        console.log("calcLabelPosition===", this.data.source.x, this.data.source.y, this.data.target.x, this.data.target.y)
+        // console.log("calcLabelPosition===", this.data.source.x, this.data.source.y, this.data.target.x, this.data.target.y)
         const labelPosition = getLinkLabelPosition(this.data.source, this.data.target, this.curveType)
         const box = labelGfx.getBounds()
         // labelGfx.position.set(labelPosition.x , labelPosition.y );

src/renderer/shapes/links/lines/straightLine.ts

@@ -40,7 +40,7 @@ class StraightLine extends LinkShapeBase{
     curveType: ILinkShapeStyles = 'straight'
 
     calcLabelPosition = (labelGfx: PIXI.Graphics, shapeGfx: PIXI.Graphics) => {
-        console.log("calcLabelPosition===", this.data.source.x, this.data.source.y, this.data.target.x, this.data.target.y)
+        // console.log("calcLabelPosition===", this.data.source.x, this.data.source.y, this.data.target.x, this.data.target.y)
         const labelPosition = getLinkLabelPosition(this.data.source, this.data.target, this.curveType)
         const box = labelGfx.getBounds()
         // labelGfx.position.set(labelPosition.x , labelPosition.y );