Node and Links Styling stories added (#16)

* :selected  state added to link

* link styling - color by group added

* link styling - color by group added

* arrow head pointiness fixes

* color by group styling for links

* color by group styling for nodes

* color by group styling for nodes

* node styling updates

* node styling updates:

* node and link styling updates

src/renderer/primitives/arrows/arrowHead.ts

@@ -14,13 +14,16 @@ const createArrowHeadPoints = () => {
 }
 
 const drawArrowHeadShape = ( props: DrawArrowPrimitiveType) => {
+    /*
+    deprecated 
+    */
     console.debug("drawArrowHeadShape", props);
     // draw arrow 
     // gfx = gfx ? gfx : new Graphics() 
     const gfx = new Graphics()
     const points = createArrowHeadPoints()
     // const points = [0, 0, 10, -5, 6.666666666666667, 0, 10, 5, 0, 0]
-    gfx.lineStyle(props.thickness,  props.color, props.opacity);
+    gfx.lineStyle(props.thickness,  props.color, props.opacity, alignment);
     gfx.beginFill(props.color, props.opacity );
     gfx.drawPolygon(points);
     gfx.endFill();

src/renderer/primitives/arrows/arrowTriangle.ts

@@ -7,7 +7,7 @@ export interface DrawArrowPrimitiveType extends ILinkShapeStyle {
     // gfx: Graphics
 }
 
-const drawArrowTriangleShape = ( props: DrawArrowPrimitiveType, size: number = 5,  gfx?: Graphics) => {
+const drawArrowTriangleShape = ( props: DrawArrowPrimitiveType, size: number = 2,  gfx?: Graphics) => {
     console.debug("drawArrowHeadShape", props);
     // draw arrow 
     gfx = gfx ? gfx : new Graphics() 
@@ -24,7 +24,7 @@ const drawArrowTriangleShape = ( props: DrawArrowPrimitiveType, size: number = 5
     gfx.lineTo(arrowPoint1X, arrowPoint1Y);
     gfx.lineTo(arrowPoint2X, arrowPoint2Y);
     gfx.lineTo(props.endPoint.x, props.endPoint.y);
-    gfx.stroke({color: props.color});
+    gfx.stroke({color: props.color, width: props.thickness, alignment: 0.66});
     gfx.fill({color: props.color})
     return gfx;
 }

src/renderer/primitives/image.ts

@@ -8,15 +8,15 @@ import { Assets} from "pixi.js";
 // }
 
 const drawImageShape = (imageUrl: string, resolution: number=  window.devicePixelRatio) => {
-    const extras: any = {
-        data: {
-            resolution: resolution,
-            // resourceOptions: {
-            //     scale: window.devicePixelRatio
-            // }
-        }
-    }
-    console.log("drawImage extra", extras, imageUrl)
+    // const extras: any = {
+    //     data: {
+    //         resolution: resolution,
+    //         // resourceOptions: {
+    //         //     scale: window.devicePixelRatio
+    //         // }
+    //     }
+    // }
+    console.log("drawImage extra", imageUrl)
     return Assets.load({
         src: imageUrl,
         data: {

src/renderer/primitives/label.ts

@@ -10,40 +10,35 @@ export interface LabelPrimitiveType extends IShapeLabelStyle {
 const drawLabelShape = (props: LabelPrimitiveType, resolution: number = window.devicePixelRatio * 2) => {
     // console.log("===drawLabelShape props", props)
     const labelGfx = new Graphics();
-
     // if (!props.label){
     //     // if label is not found, not point it rendering, so return
     //     return 
     // }
 
     // add text
-    const textStyle = new HTMLTextStyle({
-        // fontFamily: props?.text.font.family,
-        // fontSize: props?.text.font.size,
-        // fill: props?.text.color,
-        // align: "center"
-
-
+    const textStyle = new TextStyle({
         fontFamily: props?.text.font.family,
         fontSize: props?.text.font.size,
         fill: props?.text.color,
         align: props?.text.font.align,
         fontWeight: props?.text.font.weight,
         fontStyle: props?.text.font.style,
-        lineHeight: props.text.font.lineHeight
+        lineHeight: props.text.font.lineHeight,
+        wordWrap: props.text.font.wordWrap,
+        wordWrapWidth: props.text.font.wordWrapWidth,
 
 
     })
-    const text = new HTMLText( {text:props.label, style: textStyle});
-    text.resolution = resolution ;
+    const text = new HTMLText({ text: props.label, style: textStyle });
+    text.resolution = resolution;
     text.label = NodeContainerChildNames.labelText
     const textBounds = text.getBounds(); // Get the size of the text box
 
-    if (props?.background?.color){
+    if (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);
+        textBackground.lineStyle(props.border.thickness, props.border.color, props.border.opacity || 1);
 
         textBackground.beginFill(
             props?.background.color,
@@ -66,20 +61,16 @@ const drawLabelShape = (props: LabelPrimitiveType, resolution: number = window.d
         textBackground.y = text.y
         // add background and text to gfx
         labelGfx.addChild(textBackground)
+
     }
-    // const mask = new Graphics();
-    // mask.rect(
-    //     // props.padding * -1 , props.padding * -1, 
-    //     0, 0, 
-    //     textBounds.width + (props.padding * 2) , 
-    //     textBounds.height // + props.padding 
-    // ); // Draw rectangle behind the text
-    // // mask.fill(0xffffff);
-    // mask.fill("#222222")
-    // text.mask = mask
+
+
+
+
 
     // labelGfx.addChild(mask)
     labelGfx.addChild(text)
+
     return labelGfx
 }
 

src/renderer/primitives/links/straightLine.ts

@@ -13,9 +13,10 @@ const drawStraightLineShape = ( props: DrawLinkPrimitiveType) => {
     console.debug("drawStraightLineShape", props);
     const shapeName = new Graphics();
     // draw the path 
+    // shapeName.lineStyle({ width: props.thickness, color: props.color }); // Thickness 5, Red color
     shapeName.moveTo(props.startPoint.x, props.startPoint.y);
     shapeName.lineTo(props.endPoint.x, props.endPoint.y);
-    shapeName.stroke({color: props.color});
+    shapeName.stroke({color: props.color, width: props.thickness});
     shapeName.fill({color: props.color})
     shapeName.interactive = true;
     // TODO - FIX this hitarea 

src/renderer/primitives/nodes/circle.ts

@@ -11,8 +11,6 @@ export interface DrawCirclePrimitiveType {
 const drawCircleShape = (props: DrawCirclePrimitiveType) => {
     console.debug("drawCircle", props);
     const shapeName = new Graphics();
-
-
     shapeName.circle(0, 0, props.size);
     if (props.background){
         const alpha = props.background.color === "transparent" ? 0: props.background.opacity

src/renderer/shapes/abstract.ts

@@ -291,6 +291,7 @@ export abstract class LinkShapeAbstract extends ShapeAbstract {
             // this.triggerUnHovered(event);
             this.triggerUnHighlighted(event, setNeighborsToo);
             this.triggerDefault(event);
+            this.triggerUnSelected(event)
             // if (setNeighborsToo) {
             //     // this.triggerUnHoveredOnNeighbors(event)
             //     this.triggerUnHighlightedOnNeighbors(event)
@@ -309,6 +310,9 @@ export abstract class LinkShapeAbstract extends ShapeAbstract {
             //     this.triggerHighlightedOnNeighbors(event)
             // }
         }
+        else if (stateName === ":selected") {
+            this.triggerSelected(event)
+        }
         else if (stateName === ":muted") {
             this.triggerMuted(event)
         }

src/renderer/shapes/constants.ts

@@ -26,6 +26,8 @@ export enum LinkContainerChildNames {
   shapeLine = 'shapeLine',
   shapeHoveredBorder = 'shapeHoveredBorder',
   shapeHighlightedBorder = 'shapeHighlightedBorder',
+  shapeSelectedBorder = 'shapeSelectedBorder',
+
   // label
   label = 'label',
   labelBackground = 'labelBackground',

src/renderer/shapes/links/base.ts

@@ -59,13 +59,37 @@ export class LinkShapeBase extends LinkShapeAbstract {
     this.containerGfx.alpha = 1;
     this.containerGfx.visible = true
   }
-
-  triggerSelected = (event?: PIXI.FederatedPointerEvent) => {
-    // console.log(`Selected triggered on link - ${this.data.id}`);
+
+  triggerSelected = (event?: PIXI.FederatedPointerEvent, setNeighborsToo: boolean = false) => {
+    console.debug(`Selected triggered on link - ${this.data.id}`);
+    this.moveToFrontLayer();
+
+    if (this.shapeGfx) {
+      const selectedBorder = this.shapeGfx.getChildByName(LinkContainerChildNames.shapeSelectedBorder);
+      if (selectedBorder) {
+        selectedBorder.visible = true
+      }
+    }
+    if (setNeighborsToo) {
+      this.artBoard.canvas.dataStore.nodes.get(this.data.source.id)?.gfxInstance?.triggerSelected()
+      this.artBoard.canvas.dataStore.nodes.get(this.data.target.id)?.gfxInstance?.triggerSelected()
+    }
   }
 
-  triggerUnSelected = (event?: PIXI.FederatedPointerEvent) => {
-    // console.log(`UnSelected triggered on link - ${this.data.id}`);
+  triggerUnSelected = (event?: PIXI.FederatedPointerEvent, setNeighborsToo: boolean = false) => {
+    console.debug(`UnSelected triggered on link - ${this.data.id}`);
+    this.moveToFrontLayer();
+
+    if (this.shapeGfx) {
+      const selectedBorder = this.shapeGfx.getChildByName(LinkContainerChildNames.shapeSelectedBorder);
+      if (selectedBorder) {
+        selectedBorder.visible = false
+      }
+    }
+    if (setNeighborsToo) {
+      this.artBoard.canvas.dataStore.nodes.get(this.data.source.id)?.gfxInstance?.triggerUnSelected()
+      this.artBoard.canvas.dataStore.nodes.get(this.data.target.id)?.gfxInstance?.triggerUnSelected()
+    }
   }
 
   triggerHighlighted = (event?: PIXI.FederatedPointerEvent, setNeighborsToo: boolean = false) => {
@@ -129,7 +153,7 @@ export class LinkShapeBase extends LinkShapeAbstract {
       .on('pointerdown', (event) => {
         this.dragData = event.data
         this.artBoard.canvas.dataStore.addToHighlightedLinks(this.data)
-        this.setState(":highlighted", true, event)
+        this.setState(":selected", true, event)
       })
       .on("pointermove", (event) => {
         event.stopPropagation()
@@ -164,8 +188,7 @@ export class LinkShapeBase extends LinkShapeAbstract {
       labelGfx.visible = this.data.isLabelVisible
 
 
-
-      // this.containerGfx.addChild(labelGfx)
+      this.containerGfx.addChild(labelGfx)
       return labelGfx
     }
     //  else {
@@ -183,30 +206,36 @@ export class LinkShapeBase extends LinkShapeAbstract {
 
     // draw shapeName
     if (renderShape) {
-      if (this.shapeGfx){ // if already exist
+      if (this.shapeGfx) { // if already exist
         this.shapeGfx.removeChildren();
       }
       this.shapeGfx = this.drawShape();
       this.containerGfx.addChild(this.shapeGfx);
     }
     // draw label
     if (renderLabel) {
-      if (this.labelGfx){ // if already exist
+      if (this.labelGfx) { // if already exist
         this.labelGfx.destroy();
       }
       this.labelGfx = this.drawLabel();
-      if(this.labelGfx){
+      if (this.labelGfx) {
         this.containerGfx.addChild(this.labelGfx);
         // const textBg = this.labelGfx?.getChildByName(LinkContainerChildNames.labelBackground);
         // if (textBg) {
         //   textBg.visible = true
         // }
+
+
+
+
       }
     }
 
     if (renderShape) {
-      if (this.labelGfx){
+      if (this.labelGfx) {
         this.calcLabelPosition(this.labelGfx, this.shapeGfx)
+
+
       }
     }
 

src/renderer/shapes/links/defaults.ts

@@ -10,7 +10,7 @@ export const LinkStyleDefaults: ILinkStyle = {
     },
     label: {
         background: {
-            color: "#555555",
+            color: "#222222",
             opacity: 0.5
         },
         padding: 3,
@@ -23,7 +23,9 @@ export const LinkStyleDefaults: ILinkStyle = {
             color: "#999999",
             font: {
                 size: 10,
-                family: "Arial"
+                family: "Arial",
+                wordWrap: true,
+                wordWrapWidth: 100,
             }
         }
     },
@@ -43,6 +45,13 @@ export const LinkStyleDefaults: ILinkStyle = {
                 thickness: 3,
                 color: 0xfeeb77
             }
+        },
+        ":selected": {
+            shape: {
+                opacity: 0.6,
+                thickness: 5,
+                color: 0xf11b77
+            }
         }
     }
 

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

@@ -15,22 +15,29 @@ class StraightLine extends LinkShapeBase{
 
         const { startPoint, endPoint } = this.calcStartAndEndPoints();
         this.shapeGfx.removeChildren();
-        this.shapeGfx.name = LinkContainerChildNames.shapeName
+        this.shapeGfx.label = LinkContainerChildNames.shapeName
 
         // draw path
         const shapeLine = drawStraightLineShape({ startPoint, endPoint, ...this.data.style.shape })
-        shapeLine.name = LinkContainerChildNames.shapeLine
+        shapeLine.label = LinkContainerChildNames.shapeLine
 
         drawArrowTriangleShape({ startPoint, endPoint, ...this.data.style.shape }, 10, shapeLine)
         this.shapeGfx.addChild(shapeLine)
 
         // shapeName hoveredBorder
         const shapeHighlightedBorder = drawStraightLineShape({ startPoint, endPoint, ...this.data.style.states[':highlighted'].shape })
-        shapeHighlightedBorder.name = LinkContainerChildNames.shapeHighlightedBorder
+        shapeHighlightedBorder.label = LinkContainerChildNames.shapeHighlightedBorder
         shapeHighlightedBorder.visible = false
         drawArrowTriangleShape({ startPoint, endPoint, ...this.data.style.states[':highlighted'].shape }, 12, shapeHighlightedBorder)
         this.shapeGfx.addChild(shapeHighlightedBorder)
 
+        // shapeName hoveredBorder
+        const shapeSelectedBorder = drawStraightLineShape({ startPoint, endPoint, ...this.data.style.states[':selected'].shape })
+        shapeSelectedBorder.label = LinkContainerChildNames.shapeSelectedBorder
+        shapeSelectedBorder.visible = false
+        drawArrowTriangleShape({ startPoint, endPoint, ...this.data.style.states[':selected'].shape }, 12, shapeSelectedBorder)
+        this.shapeGfx.addChild(shapeSelectedBorder)
+
 
         return this.shapeGfx
       }
@@ -82,7 +89,7 @@ class StraightLine extends LinkShapeBase{
             // line color and thickness
             // console.log("calcStartAndEndPoints", JSON.stringify(this.data))
         console.debug("====calcStartAndEndPoints", this.data, this)
-        const arrowPadding = 3; 
+        const arrowPadding = 0; 
         const endPoint = getContactPointOnCircle(
             this.data.source,
             this.data.target,

src/renderer/shapes/links/utils.ts

@@ -13,12 +13,12 @@ export const getContactPointOnCircle = (
 
   // console.debug("====target", target, padding)
   // getCirclePont
-  const nodeRadius = target?.style?.size + padding ? target?.style?.size : 20
+  const nodeRadius = target?.style?.size ? target?.style?.size + padding : 20
   // console.debug("===nodeRadius", nodeRadius)
   const arrowheadLength = 0;
   const angle = Math.atan2(target.y - source.y, target.x - source.x);
-  let x = target.x - Math.cos(angle) * (nodeRadius + arrowheadLength);
-  let y = target.y - Math.sin(angle) * (nodeRadius + arrowheadLength);
+  const x : number = target.x - Math.cos(angle) * (nodeRadius + arrowheadLength);
+  const y: number = target.y - Math.sin(angle) * (nodeRadius + arrowheadLength);
   return new Point(x, y)
 };