include image icon in label example

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/labels/index.ts

@@ -1,11 +1,18 @@
 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',
   fontFamily: 'sans-serif',
@@ -17,7 +24,7 @@ const TEXT_ICON: Graph.TextIcon = {
 
 const NODE_STYLE: Graph.NodeStyle = {
   color: GREEN,
-  icon: TEXT_ICON,
+  icon: IMAGE_ICON,
   stroke: [{ width: 2, color: GREEN_LIGHT }],
   label: {
     position: 'right',

src/renderers/webgl/objects/icon.ts

@@ -91,6 +91,8 @@ export class Icon {
   private create(style: TrellisIcon) {
     const icon = style.type === 'textIcon' ? this.createTextIcon(style) : this.createImageIcon(style)
     icon.anchor.set(0.5)
+    icon.x = this.x ?? 0
+    icon.y = this.y ?? 0
     return icon
   }
 

src/renderers/webgl/objects/label/background.ts

@@ -22,8 +22,7 @@ export class LabelBackground {
     this.container = container
     this._style = style
 
-    const bounds = this.label.getLocalBounds()
-    this.rect = { width: bounds.width, height: bounds.height }
+    this.rect = { ...this.label.getLocalBounds() }
 
     const { width, height } = this.size
 

src/renderers/webgl/objects/label/index.ts

@@ -86,8 +86,7 @@ export class Label {
     }
 
     if (labelHasChanged || styleHasChanged) {
-      const { width, height } = this.text.getLocalBounds()
-      this.setBackground({ width, height }, this.text.anchor.clone(), style?.background)
+      this.setBackground({ ...this.text.getLocalBounds() }, this.text.anchor.clone(), style?.background)
     }
 
     return this