51 - open-alc-map

• Upgrade to Svelte v4
• Move data to yaml format
  • Read file in raw format import data from "./file.yaml?raw"
  • Use yaml package to parse parse(data)
• Change logo to circle
  • Use svg mask

<image
    href={getBrandImage(node.id)}
    x={node.x - 20}
    y={node.y - 20}
    height="40"
    width="40"
    mask="url(#image-mask)"
/>

<mask id="image-mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <circle cx="0.5" cy="0.5" r="0.5" fill="white" />
</mask>

• Show data on click
  • Use <dialog> HTML tag
  • Handle clicking outside the dialog to close, however got Typescript error on implementation
  • Declare custom attribute typing in a separate .d.ts file ref.

declare namespace svelteHTML {
	interface HTMLAttributes<T> {
		'on:outclick'?: () => void;
	}
}

• Add more entries

As there are more entries, will have to adjust D3 force simulation to make them distribute more evenly