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,28 +1,35 @@
 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',
+  fontFamily: 'sans-serif',
+  fontWeight: '400',
+  fontSize: 14,
   color: '#fff',
-  weight: '400',
-  text: '!',
-  size: 14
+  text: '!'
 }
 
 const NODE_STYLE: Graph.NodeStyle = {
   color: GREEN,
-  icon: TEXT_ICON,
+  icon: IMAGE_ICON,
   stroke: [{ width: 2, color: GREEN_LIGHT }],
   label: {
     position: 'right',
     fontName: 'NodeLabel',
-    fontFamily: 'Arial, sans-serif',
+    fontFamily: 'Roboto',
     background: { color: GREEN_LIGHT },
     margin: 4
   }
@@ -35,7 +42,7 @@ const NODE_HOVER_STYLE: Graph.NodeStyle = {
   label: {
     position: 'right',
     fontName: 'NodeLabelHover',
-    fontFamily: 'Arial, sans-serif',
+    fontFamily: 'Roboto',
     background: { color: DARK_GREEN },
     color: '#FFF',
     margin: 4
@@ -62,7 +69,7 @@ const collide = Collide.Layout()
 const edges: Graph.Edge[] = []
 let nodes = data.map<Graph.Node>((label, index) => ({
   radius: 10,
-  label: index % 2 === 0 ? label + ' 北京' : label,
+  label,
   id: `${index}-${label}`,
   style: NODE_STYLE
 }))

examples/native/src/perf/index.ts

@@ -22,28 +22,25 @@ 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', text: 'T', fontFamily: 'sans-serif', 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',
     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/index.ts

@@ -1,4 +1,5 @@
 import { TWO_PI } from './renderers/webgl/utils'
+import type { NodeIcon } from './renderers/webgl/objects/icon'
 import type { LabelStyle } from './renderers/webgl/objects/label'
 import type { Stroke } from './types'
 
@@ -26,36 +27,17 @@ export type Edge = {
   style?: EdgeStyle
 }
 
-export type TextIcon = {
-  type: 'textIcon'
-  family: string
-  text: string
-  color: string
-  size: number
-  weight?: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
-  offsetX?: number
-  offsetY?: number
-}
-
-export type ImageIcon = {
-  type: 'imageIcon'
-  url: string
-  scale?: number
-  offsetX?: number
-  offsetY?: number
-}
-
 export type NodeStyle = {
   color?: string
-  icon?: TextIcon | ImageIcon
+  icon?: NodeIcon
   stroke?: Stroke[]
   badge?: {
     position: number
     radius: number
     color: string
     stroke?: string
     strokeWidth?: number
-    icon?: TextIcon | ImageIcon
+    icon?: NodeIcon
   }[]
   label?: LabelStyle
 }
@@ -380,5 +362,7 @@ export const angle = (x0: number, y0: number, x1: number, y1: number) => {
 }
 
 // exports
-export type { Stroke } from './types'
-export type { LabelStyle, LabelBackgroundStyle, LabelPosition, FontWeight, TextAlign } from './renderers/webgl/objects/label'
+export type { Stroke, NodeIcon }
+export type { FontWeight, TextAlign } from './types'
+export type { LabelStyle, LabelBackgroundStyle, LabelPosition } from './renderers/webgl/objects/label'
+export type { TextIcon, ImageIcon } from './renderers/webgl/textures/icons'

src/renderers/webgl/edge.ts

@@ -1,4 +1,5 @@
-import { MIN_EDGES_ZOOM, MIN_INTERACTION_ZOOM, Renderer } from '.'
+import { type Renderer } from '.'
+import { MIN_EDGES_ZOOM, MIN_INTERACTION_ZOOM } from './utils'
 import { movePoint } from './utils'
 import { NodeRenderer } from './node'
 import * as Graph from '../..'

src/renderers/webgl/index.ts

@@ -9,11 +9,11 @@ import { NodeRenderer } from './node'
 import { EdgeRenderer } from './edge'
 import { ArrowTexture } from './textures/arrow'
 import { CircleTexture } from './textures/circle'
-import { Font } from './textures/font'
 import { interpolate } from '../../utils'
 import { logUnknownEdgeError } from './utils'
 import { ObjectManager } from './objectManager'
-import { TextIconTexture } from './textures/textIcon'
+import { TextIconTexture, ImageIconTexture } from './textures/icons'
+import { FontBook } from './textures/font'
 
 export type Keys = { altKey?: boolean; ctrlKey?: boolean; metaKey?: boolean; shiftKey?: boolean }
 export type MousePosition = { x: number; y: number; clientX: number; clientY: number }
@@ -99,14 +99,6 @@ export const defaultOptions = {
   dragInertia: 0.88
 }
 
-// TODO - make configurable
-export const MIN_LABEL_ZOOM = 0.25
-export const MIN_NODE_STROKE_ZOOM = 0.3
-export const MIN_NODE_ICON_ZOOM = 0.3
-export const MIN_INTERACTION_ZOOM = 0.15
-export const MIN_EDGES_ZOOM = 0.1
-export const MIN_ZOOM = 3
-
 export class Renderer {
   width: number
   height: number
@@ -140,7 +132,6 @@ export class Renderer {
   edgeArrowObjectManager = new ObjectManager(1000)
   labelObjectManager = new ObjectManager(2000)
   interactionObjectManager = new ObjectManager(2000)
-  font = new Font()
   eventSystem: EventSystem
   nodes: Graph.Node[] = []
   nodeRenderersById: Record<string, NodeRenderer> = {}
@@ -154,6 +145,8 @@ export class Renderer {
   circle: CircleTexture
   arrow: ArrowTexture
   textIcon: TextIconTexture
+  imageIcon: ImageIconTexture
+  fontBook = new FontBook() // TODO -> make configurable
   draggedNode?: NodeRenderer
   hoveredNode?: NodeRenderer
 
@@ -232,6 +225,7 @@ export class Renderer {
     this.circle = new CircleTexture(this)
     this.arrow = new ArrowTexture(this)
     this.textIcon = new TextIconTexture(this)
+    this.imageIcon = new ImageIconTexture()
     this.eventSystem = new EventSystem(this.app.renderer)
     this.eventSystem.domElement = view
     this.root.eventMode = 'static' // 'passive' // TODO - add viewport events to interactionContainer