Merge pull request #80 from sayari-analytics/feature/assets

reimplement Image Icon's in v7 & FontBook class

examples/assets/icons.ts

@@ -0,0 +1,2 @@
+export const person = `data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogc2tldGNodG9vbCA2My4xICgxMDEwMTApIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPkNDNEQ2NkYzLTg3QTktNEIxQy1CRjNBLUMwQUY0RjQ5OTM1MTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggc2tldGNodG9vbC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBkPSJNOCwtNS4wMDAwMDAwNmUtMDggQzEwLjI5NzUwNDYsLTUuMDAwMDAwMDZlLTA4IDEyLjE2LDEuODYyNDk1NCAxMi4xNiw0LjE1OTk5OTk4IEMxMi4xNiw2LjQ1NzUwNDU1IDEwLjI5NzUwNDYsOC4zMiA4LDguMzIgQzUuNzAyNDk1NDMsOC4zMiAzLjgzOTk5OTk3LDYuNDU3NTA0NTUgMy44Mzk5OTk5Nyw0LjE1OTk5OTk4IEMzLjgzOTk5OTk3LDEuODYyNDk1NCA1LjcwMjQ5NTQzLC01LjAwMDAwMDA2ZS0wOCA4LC01LjAwMDAwMDA2ZS0wOCBaIE04LDAuOTk5OTk5OTU2IEM2LjI1NDc4MDE4LDAuOTk5OTk5OTU2IDQuODM5OTk5OTgsMi40MTQ3ODAxNiA0LjgzOTk5OTk4LDQuMTU5OTk5OTggQzQuODM5OTk5OTgsNS45MDUyMTk4IDYuMjU0NzgwMTgsNy4zMiA4LDcuMzIgQzkuNzQ1MjE5ODEsNy4zMiAxMS4xNiw1LjkwNTIxOTggMTEuMTYsNC4xNTk5OTk5OCBDMTEuMTYsMi40MTQ3ODAxNiA5Ljc0NTIxOTgxLDAuOTk5OTk5OTU2IDgsMC45OTk5OTk5NTYgWiBNOCw5LjYwMDAwMDAxIEMxMS41OTI1NTI4LDkuNjAwMDAwMDEgMTQuMjIyNzIzOCwxMS4yNDk2MjM1IDE1Ljg5MDUxMywxNC41NDg4NzA2IEMxNS45NjEyMTg2LDE0LjY4ODc0MTUgMTUuOTk4MDU3MywxNC44NDMyNzM2IDE1Ljk5ODA1NzMsMTUgQzE1Ljk5ODA1NzMsMTUuNTEyODIzMyAxNS42MTIwMjY2LDE1LjkzNTQ4NDQgMTUuMTE0NywxNS45OTMyNjc2IEwxNC45OTgwODE3LDE2LjAwMDAwMDEgTDEuMDAxNDIxNjQsMTYuMDAwMDAwMSBDMC44NDQ2NTczODUsMTYuMDAwMDAwMSAwLjY5MDA4ODgzNCwxNS45NjMxNDQ4IDAuNTUwMTkwODEzLDE1Ljg5MjQwODggQzAuMDU3MzE5OTIwNCwxNS42NDMyMDA5IC0wLjE0MDIwNzk1NiwxNS4wNDE2MjcyIDAuMTA5MDExNDIxLDE0LjU0ODc2MjEgQzEuNzc3MTU3MDYsMTEuMjQ5NTg3NCA0LjQwNzQ4NjU5LDkuNjAwMDAwMDEgOCw5LjYwMDAwMDAxIFogTTgsMTAuNiBDNC44OTE3MDY2OSwxMC42IDIuNjQ5NDIyNzgsMTEuOTQzMzQ2MiAxLjE0ODk4NjUzLDE0LjcxNzc5IEwxLjAwMTk5OTk2LDE0Ljk5OSBMMTQuOTk4MDM3NiwxNSBMMTQuODUwNTE4MSwxNC43MTc3OTI5IEMxMy4zNTA0MTI1LDExLjk0MzM0NzUgMTEuMTA4MzAyMywxMC42IDgsMTAuNiBaIiBpZD0icGF0aC0xIj48L3BhdGg+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkVudGl0eS9wZXJzb25fcmVndWxhciI+CiAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4KICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgIDwvbWFzaz4KICAgICAgICAgICAgPHVzZSBpZD0icGVyc29uIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICA8ZyBpZD0iY29sb3JzL2FhX2ljb25fZGFyayIgbWFzaz0idXJsKCNtYXNrLTIpIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJpY29uX2RhcmsiIHg9IjAiIHk9IjAiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PC9yZWN0PgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=`
+export const company = `data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogc2tldGNodG9vbCA2My4xICgxMDEwMTApIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPkI0RTRGQ0FGLTdCMzctNERCNy1BRUFGLTdGRDY0RUE0QzQwQTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggc2tldGNodG9vbC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBkPSJNMC45OTk5OTk5NSwxNi4wMDAwMDAxIEMwLjQ0NzcxNTIwMywxNi4wMDAwMDAxIC01LjAwMDAwMDA2ZS0wOCwxNS41NTIyODQ3IC01LjAwMDAwMDA2ZS0wOCwxNSBMLTUuMDAwMDAwMDZlLTA4LDQuODM5OTk5OTcgQy01LjAwMDAwMDA2ZS0wOCw0LjI4NzcxNTIzIDAuNDQ3NzE1MjAzLDMuODM5OTk5OTcgMC45OTk5OTk5NSwzLjgzOTk5OTk3IEwzLjk5OTk5OTk1LDMuODM5OTk5OTcgTDMuOTk5OTk5OTcsMC45OTk5OTk5NSBDMy45OTk5OTk5NywwLjQ0NzcxNTIwMyA0LjQ0NzcxNTIzLC00Ljk5OTk3NjYxZS0wOCA0Ljk5OTk5OTk3LC00Ljk5OTk3NjYxZS0wOCBMMTEsLTQuOTk5OTc2NjFlLTA4IEMxMS41NTIyODQ3LC00Ljk5OTk3NjYxZS0wOCAxMiwwLjQ0NzcxNTIwMyAxMiwwLjk5OTk5OTk1IEwxMiw0Ljk5OTk5OTk4IEwxMiw0Ljk5OTk5OTk4IEwxNSw0Ljk5OTk5OTk4IEMxNS41NTIyODQ3LDQuOTk5OTk5OTggMTYsNS40NDc3MTUyMyAxNiw1Ljk5OTk5OTk4IEwxNiwxNSBDMTYsMTUuNTUyMjg0NyAxNS41NTIyODQ3LDE2IDE1LDE2IEwwLjk5OTk5OTk1LDE2LjAwMDAwMDEgWiBNMTEsMC45OTk5OTk5NTYgTDQuOTk5OTk5OTgsMC45OTk5OTk5NTYgTDQuOTk5OTk5OTgsMTUgTDUuOTk5OTk5OTksMTUgTDUuOTk5OTk5OTksMTUgTDUuOTk5OTk5OTksMTEuMjQgQzUuOTk5OTk5OTksMTAuNjg3NzE1MyA2LjQ0NzcxNTI0LDEwLjI0IDYuOTk5OTk5OTksMTAuMjQgTDguOTk5OTk5OTksMTAuMjQgQzkuNTUyMjg0NzYsMTAuMjQgOS45OTk5OTk5OSwxMC42ODc3MTUzIDkuOTk5OTk5OTksMTEuMjQgTDkuOTk5OTk5OTksMTUgTDExLDE1IEwxMSwwLjk5OTk5OTk1NiBaIE04Ljk5OTk5OTk5LDExLjI0IEw2Ljk5OTk5OTk5LDExLjI0IEw2Ljk5OTk5OTk5LDE1IEw4Ljk5OTk5OTk5LDE1IEw4Ljk5OTk5OTk5LDExLjI0IFogTTMuOTk5OTk5OTYsNC44Mzk5OTk5OCBMMC45OTk5OTk5NTYsNC44Mzk5OTk5OCBMMC45OTk5OTk5NTYsMTUgTDMuOTk5OTk5OTYsMTQuOTk5IEwzLjk5OTk5OTk2LDQuODM5OTk5OTggWiBNMTUsNS45OTk5OTk5OSBMMTIsNS45OTk5OTk5OSBMMTIsMTUgTDE1LDE1IEwxNSw1Ljk5OTk5OTk5IFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iRW50aXR5L2NvbXBhbnlfcmVndWxhciI+CiAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9Im5vbmUiPgogICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICA8dXNlIGlkPSJDb21iaW5lZC1TaGFwZSIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgPGcgaWQ9ImNvbG9ycy9hYV9pY29uX2RhcmsiIG1hc2s9InVybCgjbWFzay0yKSIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iaWNvbl9kYXJrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+`

examples/native/src/index.css

@@ -1,4 +1,13 @@
 @import '../../reset';
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap");
+
+@font-face {
+  font-family: Roboto;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-display: swap;
+}
 
 #examples {
   display: flex;

examples/native/src/labels/index.ts

@@ -1,42 +1,50 @@
 import * as Renderer from '@trellis/renderers/webgl'
 import * as Graph from '@trellis/index'
 import * as Collide from '@trellis/layout/collide'
+import { person } from '../../../assets/icons'
 
 const GREEN = '#91AD49'
 const GREEN_LIGHT = '#C6D336'
 const DARK_GREEN = '#607330'
 
+const IMAGE_ICON: Graph.ImageIcon = {
+  type: 'imageIcon',
+  url: person,
+  scale: 0.66
+}
+
 const TEXT_ICON: Graph.TextIcon = {
   type: 'textIcon',
-  family: 'sans-serif',
-  color: '#fff',
-  weight: '400',
-  text: '!',
-  size: 14
+  content: '!',
+  style: {
+    fontSize: 14,
+    fontWeight: '400',
+    color: '#fff'
+  }
 }
 
 const NODE_STYLE: Graph.NodeStyle = {
   color: GREEN,
   icon: TEXT_ICON,
   stroke: [{ width: 2, color: GREEN_LIGHT }],
   label: {
-    position: 'right',
+    position: 'bottom',
     fontName: 'NodeLabel',
-    fontFamily: 'Arial, sans-serif',
-    background: { color: GREEN_LIGHT },
+    fontFamily: 'Roboto',
+    highlight: { color: GREEN_LIGHT },
     margin: 4
   }
 }
 
 const NODE_HOVER_STYLE: Graph.NodeStyle = {
   color: DARK_GREEN,
-  icon: TEXT_ICON,
+  icon: IMAGE_ICON,
   stroke: [{ width: 2, color: GREEN_LIGHT }],
   label: {
-    position: 'right',
+    position: 'bottom',
     fontName: 'NodeLabelHover',
-    fontFamily: 'Arial, sans-serif',
-    background: { color: DARK_GREEN },
+    fontFamily: 'Roboto',
+    highlight: { color: DARK_GREEN },
     color: '#FFF',
     margin: 4
   }
@@ -59,11 +67,29 @@ const data = [
 
 const collide = Collide.Layout()
 
-const edges: Graph.Edge[] = []
+const edges: Graph.Edge[] = [
+  {
+    id: '0::1',
+    source: '0',
+    target: '1',
+    label: '0 <- EDGE LABEL -> 1',
+    style: {
+      arrow: 'both',
+      label: {
+        fontName: 'EdgeLabel',
+        fontFamily: 'Roboto',
+        fontSize: 10,
+        color: DARK_GREEN,
+        margin: 4
+      }
+    }
+  }
+]
+
 let nodes = data.map<Graph.Node>((label, index) => ({
   radius: 10,
-  label: index % 2 === 0 ? label + ' 北京' : label,
-  id: `${index}-${label}`,
+  label: `${label}${index % 2 === 0 ? ' 北京' : ''}`,
+  id: `${index}`,
   style: NODE_STYLE
 }))
 

examples/native/src/perf/index.ts

@@ -22,28 +22,33 @@ const sampleCoordinatePlane = function* (count: number, step: number, sample: nu
 const PURPLE = '#7A5DC5'
 const LIGHT_PURPLE = '#CAD'
 const ARIAL_PINK = 'ArialPink'
+const TEXT_ICON: Graph.TextIcon = {
+  type: 'textIcon',
+  content: 'T',
+  style: {
+    fontSize: 14,
+    color: '#fff',
+    fontWeight: '400'
+  }
+}
 
 const NODE_STYLE: Graph.NodeStyle = {
   color: PURPLE,
   stroke: [{ width: 2, color: LIGHT_PURPLE }],
-  icon: { type: 'textIcon', text: 'T', family: 'sans-serif', size: 14, color: '#fff', weight: '400' },
+  icon: TEXT_ICON,
   label: {
-    position: 'top',
+    position: 'bottom',
     fontName: ARIAL_PINK,
-    fontFamily: ['Arial', 'sans-serif'],
-    margin: 2,
-    background: {
-      color: '#f66',
-      opacity: 0.5
-    }
+    fontFamily: 'Roboto',
+    margin: 2
   }
 }
 
 const NODE_HOVER_STYLE: Graph.NodeStyle = {
   color: '#f66',
   stroke: [{ width: 2, color: '#fcc' }],
   label: { position: 'bottom', color: '#fcc' },
-  icon: { type: 'textIcon', text: 'L', family: 'sans-serif', size: 14, color: '#fff', weight: '400' }
+  icon: TEXT_ICON
 }
 
 const EDGE_STYLE: Graph.EdgeStyle = {

package.json

@@ -40,6 +40,7 @@
     "d3-force": "^3.0.0",
     "d3-hierarchy": "^3.1.2",
     "d3-interpolate": "^3.0.1",
+    "fontfaceobserver": "^2.3.0",
     "pixi.js": "^7.3.2",
     "stats.js": "^0.17.0"
   },
@@ -54,6 +55,7 @@
     "@types/d3-interpolate": "^3.0.3",
     "@types/d3-scale": "^4.0.6",
     "@types/d3-scale-chromatic": "^3.0.1",
+    "@types/fontfaceobserver": "^2.1.3",
     "@types/react": "^18.2.33",
     "@types/react-dom": "^18.2.14",
     "@types/stats.js": "^0.17.2",
@@ -75,13 +77,23 @@
     "vite": "^4.5.0",
     "vitest": "^0.34.6"
   },
-  "keywords": ["graph", "network", "infovis", "visualization", "react", "webgl"],
+  "keywords": [
+    "graph",
+    "network",
+    "infovis",
+    "visualization",
+    "react",
+    "webgl"
+  ],
   "peerDependencies": {
     "react": ">=16.0"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/sayari-analytics/trellis.git"
   },
-  "workspaces": ["examples/native", "examples/react"]
+  "workspaces": [
+    "examples/native",
+    "examples/react"
+  ]
 }

src/bindings/react/renderer.ts

@@ -1,6 +1,6 @@
 import { createElement, useRef, useEffect } from 'react'
 import { Renderer as WebGLRenderer, Options } from '../../renderers/webgl'
-import { Node, Edge, Annotation } from '../..'
+import { Node, Edge, Annotation } from '../../types/api'
 
 export type Props<N extends Node = Node, E extends Edge = Edge> = Options & {
   nodes: N[]

src/bindings/react/selection.ts

@@ -1,6 +1,6 @@
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import { ViewportDragDecelerateEvent, ViewportDragEvent } from '../../renderers/webgl'
-import { Annotation, Node } from '../..'
+import { Annotation, Node } from '../../types/api'
 
 export type SelectionChangeEvent = {
   type: 'selectionChange'
@@ -209,11 +209,13 @@ export const Selection = <N extends Node>(props: Props<N>) => {
             y: state.annotation.y,
             radius: state.annotation.radius,
             style: {
-              backgroundColor: props.color ?? '#eee',
-              stroke: {
-                color: props.strokeColor ?? '#ccc',
-                width: props.strokeWidth ?? 2
-              }
+              color: props.color ?? '#eee',
+              stroke: [
+                {
+                  color: props.strokeColor ?? '#ccc',
+                  width: props.strokeWidth ?? 2
+                }
+              ]
             }
           }
         : state.annotation?.type === 'rectangle'
@@ -225,11 +227,13 @@ export const Selection = <N extends Node>(props: Props<N>) => {
             width: state.annotation.width,
             height: state.annotation.height,
             style: {
-              backgroundColor: props.color ?? '#eee',
-              stroke: {
-                color: props.strokeColor ?? '#ccc',
-                width: props.strokeWidth ?? 2
-              }
+              color: props.color ?? '#eee',
+              stroke: [
+                {
+                  color: props.strokeColor ?? '#ccc',
+                  width: props.strokeWidth ?? 2
+                }
+              ]
             }
           }
         : undefined