sayari-analytics · mggower · Feb 13, 2024 · Feb 13, 2024 · Feb 13, 2024 · Feb 13, 2024
diff --git a/examples/native/index.html b/examples/native/index.html
@@ -16,6 +16,9 @@ <h1>Native Examples</h1>
         <li>
           <a href="/src/labels/labels.html">Label Styles</a>
         </li>
+        <li>
+          <a href="/src/annotations/annotations.html">Annotations</a>
+        </li>
       </ul>
     </div>
   </body>

diff --git a/examples/native/src/annotations/annotations.html b/examples/native/src/annotations/annotations.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../index.css" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <title>Trellis Example: Annotations</title>
+  </head>
+  <body>
+    <div id="graph"></div>
+    <script type="module" src="./index.ts"></script>
+  </body>
+</html>
diff --git a/examples/native/src/annotations/index.ts b/examples/native/src/annotations/index.ts
@@ -0,0 +1,169 @@
+import * as Renderer from '@trellis/renderers/webgl'
+import * as Graph from '@trellis/index'
+
+const WHITE = '#FFF'
+const GREEN = '#91AD49'
+const GREEN_LIGHT = '#C6D336'
+const DARK_GREEN = '#607330'
+
+const edges: Graph.Edge[] = []
+const nodes: Graph.Node[] = []
+const annotations: Graph.Annotation[] = [
+  {
+    id: 'rect-anno-0',
+    type: 'rectangle',
+    width: 100,
+    height: 100,
+    x: -100,
+    y: -100,
+    style: { color: GREEN }
+  },
+  {
+    id: 'rect-anno-2',
+    type: 'rectangle',
+    width: 100,
+    height: 100,
+    x: 0,
+    y: -100,
+    style: {
+      color: GREEN_LIGHT
+    }
+  },
+  {
+    id: 'rect-anno-3',
+    type: 'rectangle',
+    width: 100,
+    height: 100,
+    x: -100,
+    y: 0,
+    style: {
+      color: GREEN_LIGHT
+    }
+  },
+  {
+    id: 'rect-anno-4',
+    type: 'rectangle',
+    width: 100,
+    height: 100,
+    x: 0,
+    y: 0,
+    style: {
+      color: GREEN
+    }
+  },
+  {
+    id: 'text-anno-2',
+    type: 'rectangle',
+    content: 'Hello, World!',
+    width: 200,
+    height: 100,
+    x: -300,
+    y: -200,
+    style: {
+      color: DARK_GREEN,
+      stroke: [
+        { width: 1, color: WHITE },
+        { width: 2, color: GREEN_LIGHT }
+      ],
+      text: {
+        fontSize: 14,
+        fontWeight: '400',
+        color: WHITE
+      }
+    }
+  },
+  {
+    id: 'circle-anno-0',
+    type: 'circle',
+    radius: 50,
+    x: 250,
+    y: 250,
+    style: {
+      color: GREEN,
+      stroke: [
+        { width: 1, color: WHITE },
+        { width: 2, color: GREEN_LIGHT }
+      ]
+    }
+  },
+  {
+    id: 'circle-anno-1',
+    type: 'circle',
+    radius: 50,
+    content: 'CIRCLE!',
+    x: -250,
+    y: 250,
+    style: {
+      color: GREEN,
+      stroke: [
+        { width: 1, color: WHITE },
+        { width: 2, color: GREEN_LIGHT }
+      ],
+      text: {
+        fontSize: 14,
+        fontWeight: '400',
+        color: WHITE,
+        highlight: {
+          color: DARK_GREEN,
+          padding: 0
+        }
+      }
+    }
+  },
+  {
+    id: 'line-anno-0',
+    type: 'line',
+    points: [
+      { x: 0, y: -400 },
+      { x: 0, y: 400 }
+    ],
+    style: {
+      color: DARK_GREEN,
+      width: 2
+    }
+  },
+  {
+    id: 'line-anno-1',
+    type: 'line',
+    content: 'LINE!',
+    points: [
+      { x: -400, y: 0 },
+      { x: 400, y: 0 }
+    ],
+    style: {
+      color: GREEN_LIGHT,
+      width: 2
+    }
+  }
+]
+
+const container = document.querySelector('#graph') as HTMLDivElement
+
+const options: Renderer.Options = {
+  width: 1250,
+  height: 650,
+  x: 0,
+  y: 0,
+  zoom: 1,
+  minZoom: 0.025,
+  onViewportDrag: (event: Renderer.ViewportDragEvent | Renderer.ViewportDragDecelerateEvent) => {
+    // console.log('viewport drag', `x: ${event.dx}, y: ${event.dy}`)
+    options.x! += event.dx
+    options.y! += event.dy
+    renderer.update({ nodes, edges, annotations, options })
+  },
+  onViewportWheel: ({ dx, dy, dz }) => {
+    options.x! += dx
+    options.y! += dy
+    options.zoom! += dz
+    renderer.update({ nodes, edges, annotations, options })
+  }
+}
+
+const renderer = new Renderer.Renderer({ container, width: options.width, height: options.height, debug: true }).update({
+  nodes,
+  edges,
+  annotations,
+  options
+})
+;(window as any).renderer = renderer
diff --git a/examples/native/src/labels/index.ts b/examples/native/src/labels/index.ts
@@ -26,7 +26,10 @@ const TEXT_ICON: Graph.TextIcon = {
 const NODE_STYLE: Graph.NodeStyle = {
   color: GREEN,
   icon: TEXT_ICON,
-  stroke: [{ width: 2, color: GREEN_LIGHT }],
+  stroke: [
+    { width: 1, color: '#FFF' },
+    { width: 2, color: GREEN_LIGHT }
+  ],
   label: {
     position: 'bottom',
     fontName: 'NodeLabel',
@@ -39,7 +42,11 @@ const NODE_STYLE: Graph.NodeStyle = {
 const NODE_HOVER_STYLE: Graph.NodeStyle = {
   color: DARK_GREEN,
   icon: IMAGE_ICON,
-  stroke: [{ width: 2, color: GREEN_LIGHT }],
+  stroke: [
+    { width: 1, color: '#FFF' },
+    { width: 2, color: GREEN_LIGHT },
+    { width: 1, color: DARK_GREEN }
+  ],
   label: {
     position: 'bottom',
     fontName: 'NodeLabelHover',
@@ -50,6 +57,28 @@ const NODE_HOVER_STYLE: Graph.NodeStyle = {
   }
 }
 
+const EDGE_STYLE: Graph.EdgeStyle = {
+  arrow: 'both',
+  label: {
+    fontName: 'EdgeLabel',
+    fontFamily: 'Roboto',
+    fontSize: 10,
+    color: DARK_GREEN,
+    margin: 4
+  }
+}
+const EDGE_HOVER_STYLE: Graph.EdgeStyle = {
+  arrow: 'both',
+  stroke: [{ width: 1, color: DARK_GREEN }],
+  label: {
+    fontName: 'EdgeLabel',
+    fontFamily: 'Roboto',
+    fontSize: 10,
+    color: DARK_GREEN,
+    margin: 4
+  }
+}
+
 const data = [
   'Myriel',
   'Napoleon',
@@ -67,22 +96,13 @@ const data = [
 
 const collide = Collide.Layout()
 
-const edges: Graph.Edge[] = [
+let 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
-      }
-    }
+    style: EDGE_STYLE
   }
 ]
 
@@ -119,7 +139,9 @@ const options: Renderer.Options = {
   },
   onNodePointerEnter: (event: Renderer.NodePointerEvent) => {
     // console.log('node pointer enter', `x: ${event.x}, y: ${event.y}`)
-    nodes = nodes.map((node) => (node.id === event.target.id ? { ...node, label: node.label + ' 北京', style: NODE_HOVER_STYLE } : node))
+    nodes = nodes.map((node) =>
+      node.id === event.target.id ? { ...node, radius: 15, label: node.label + ' 北京', style: NODE_HOVER_STYLE } : node
+    )
     renderer.update({ nodes, edges, options })
   },
   onNodeDrag: (event: Renderer.NodeDragEvent) => {
@@ -132,8 +154,28 @@ const options: Renderer.Options = {
   onNodePointerLeave: (event: Renderer.NodePointerEvent) => {
     // console.log('node pointer leave', `x: ${event.x}, y: ${event.y}`)
     nodes = nodes.map((node) =>
-      node.id === event.target.id ? { ...node, label: node.label?.slice(0, node.label.length - 3), style: NODE_STYLE } : node
+      node.id === event.target.id ? { ...node, radius: 10, label: node.label?.slice(0, node.label.length - 3), style: NODE_STYLE } : node
     )
+    renderer.update({ nodes, edges, options })
+  },
+  onEdgePointerEnter: (event: Renderer.EdgePointerEvent) => {
+    edges = edges.map((edge) => {
+      if (edge.id === event.target.id) {
+        return { ...edge, style: EDGE_HOVER_STYLE }
+      }
+      return edge
+    })
+
+    renderer.update({ nodes, edges, options })
+  },
+  onEdgePointerLeave: (event: Renderer.EdgePointerEvent) => {
+    edges = edges.map((edge) => {
+      if (edge.id === event.target.id) {
+        return { ...edge, style: EDGE_STYLE }
+      }
+      return edge
+    })
+
     renderer.update({ nodes, edges, options })
   }
 }

diff --git a/examples/native/src/perf/index.ts b/examples/native/src/perf/index.ts
@@ -53,13 +53,13 @@ const NODE_HOVER_STYLE: Graph.NodeStyle = {
 
 const EDGE_STYLE: Graph.EdgeStyle = {
   width: 1,
-  stroke: '#aaa',
+  color: '#aaa',
   arrow: 'reverse'
 }
 
 const EDGE_HOVER_STYLE: Graph.EdgeStyle = {
   width: 2,
-  stroke: '#f66',
+  color: '#f66',
   arrow: 'reverse'
 }
 

diff --git a/src/renderers/webgl/LifecycleManager.ts b/src/renderers/webgl/LifecycleManager.ts
@@ -1,18 +1,23 @@
-import { NodeStrokes } from './objects/nodeStrokes'
-import { LineSegment } from './objects/lineSegment'
-import { NodeFill } from './objects/nodeFill'
-import { Arrow } from './objects/arrow'
+import LineSegment from './objects/line/LineSegment'
+import LineStrokes from './objects/line/LineStrokes'
 import ObjectManager from './objects/ObjectManager'
+import CircleStrokes from './objects/circle/CircleStrokes'
+import Circle from './objects/circle/Circle'
+import Arrow from './objects/Arrow'
 import Icon from './objects/Icon'
 import Text from './objects/text/Text'
+import RectangleStrokes from './objects/rectangle/RectangleStrokes'
+import Rectangle from './objects/rectangle/Rectangle'
 
 export default class LifecycleManager {
-  nodes = new ObjectManager<NodeStrokes | NodeFill>(2000)
+  nodes = new ObjectManager<Circle | CircleStrokes>(2000)
+  edges = new ObjectManager<LineSegment | LineStrokes>(2000)
   icons = new ObjectManager<Icon>(1000)
-  edges = new ObjectManager<LineSegment>(2000)
   arrows = new ObjectManager<Arrow>(1000)
   labels = new ObjectManager<Text>(2000)
   interactions = new ObjectManager(2000)
+  annotations = new ObjectManager<Rectangle | RectangleStrokes | Circle | CircleStrokes | LineSegment | LineStrokes>(2000)
+  text = new ObjectManager<Text>(1000)
   // interactions = new ObjectManager<HitArea>(2000) // TODO
 
   render() {
@@ -22,5 +27,7 @@ export default class LifecycleManager {
     this.arrows.render()
     this.labels.render()
     this.interactions.render()
+    this.annotations.render()
+    this.text.render()
   }
 }