refactor(frontend): fix icon placement in Safari

Also affected WebKitGTK

6 files changed, 111 insertions, 104 deletions

diff --git a/subprojects/frontend/src/graph/GraphArea.tsx b/subprojects/frontend/src/graph/GraphArea.tsx
index b5d93aef..70ae3bc5 100644
--- a/subprojects/frontend/src/graph/GraphArea.tsx
+++ b/subprojects/frontend/src/graph/GraphArea.tsx
@@ -12,6 +12,7 @@ import { useResizeDetector } from 'react-resize-detector';
 
 import DotGraphVisualizer from './DotGraphVisualizer';
 import type GraphStore from './GraphStore';
+import SVGIcons from './SVGIcons';
 import VisibilityPanel from './VisibilityPanel';
 import ZoomCanvas from './ZoomCanvas';
 import ExportPanel from './export/ExportPanel';
@@ -38,6 +39,7 @@ function GraphArea({ graph }: { graph: GraphStore }): JSX.Element {
       position="relative"
       ref={ref}
     >
+      <SVGIcons />
       <ZoomCanvas>
         {(fitZoom) => (
           <DotGraphVisualizer
diff --git a/subprojects/frontend/src/graph/GraphTheme.tsx b/subprojects/frontend/src/graph/GraphTheme.tsx
index 50a003e0..bdc01b78 100644
--- a/subprojects/frontend/src/graph/GraphTheme.tsx
+++ b/subprojects/frontend/src/graph/GraphTheme.tsx
@@ -4,9 +4,6 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
-import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw';
-import labelSVG from '@material-icons/svg/svg/label/baseline.svg?raw';
-import labelOutlinedSVG from '@material-icons/svg/svg/label/outline.svg?raw';
 import {
   alpha,
   styled,
@@ -16,8 +13,6 @@ import {
 import { lch } from 'd3-color';
 import { range } from 'lodash-es';
 
-import svgURL from '../utils/svgURL';
-
 import obfuscateColor from './obfuscateColor';
 
 function createEdgeColor(
@@ -69,32 +64,16 @@ function createTypeHashStyles(
   return result;
 }
 
-function iconStyle(
-  svg: string,
-  color: string,
-  noEmbedIcons?: boolean,
-): CSSObject {
-  if (noEmbedIcons) {
-    return {
-      fill: color,
-    };
-  }
-  return {
-    maskImage: svgURL(svg),
-    background: color,
-  };
-}
-
 export function createGraphTheme({
   theme,
   colorNodes,
   hexTypeHashes,
-  noEmbedIcons,
+  useOpacity,
 }: {
   theme: Theme;
   colorNodes: boolean;
   hexTypeHashes: string[];
-  noEmbedIcons?: boolean;
+  useOpacity?: boolean;
 }): CSSObject {
   const shadowAlapha = theme.palette.mode === 'dark' ? 0.32 : 0.24;
 
@@ -120,13 +99,15 @@ export function createGraphTheme({
     '.node-INDIVIDUAL .node-outline': {
       strokeWidth: 2,
     },
-    '.node-shadow.node-bg': noEmbedIcons
+    '.node-shadow.node-bg': useOpacity
       ? {
-          // Inkscape can't handle opacity in exported SVG.
+          // Inkscape can't handle RGBA in exported SVG.
           fill: theme.palette.text.primary,
           opacity: shadowAlapha,
         }
       : {
+          // But using `opacity` with the transition animation leads to flashing shadows,
+          // so we still use RGBA whenever possible.
           fill: alpha(theme.palette.text.primary, shadowAlapha),
         },
     '.node-exists-UNKNOWN .node-outline': {
@@ -147,24 +128,15 @@ export function createGraphTheme({
     },
     ...createEdgeColor('UNKNOWN', theme.palette.text.secondary, 'none'),
     ...createEdgeColor('ERROR', theme.palette.error.main),
-    ...(noEmbedIcons
-      ? {}
-      : {
-          '.icon': {
-            maskSize: '12px 12px',
-            maskPosition: '50% 50%',
-            maskRepeat: 'no-repeat',
-            width: '100%',
-            height: '100%',
-          },
-        }),
-    '.icon-TRUE': iconStyle(labelSVG, theme.palette.text.primary, noEmbedIcons),
-    '.icon-UNKNOWN': iconStyle(
-      labelOutlinedSVG,
-      theme.palette.text.secondary,
-      noEmbedIcons,
-    ),
-    '.icon-ERROR': iconStyle(cancelSVG, theme.palette.error.main, noEmbedIcons),
+    '.icon-TRUE': {
+      fill: theme.palette.text.primary,
+    },
+    '.icon-UNKNOWN': {
+      fill: theme.palette.text.secondary,
+    },
+    '.icon-ERROR': {
+      fill: theme.palette.error.main,
+    },
     'text.label-UNKNOWN': {
       fill: theme.palette.text.secondary,
     },
diff --git a/subprojects/frontend/src/graph/SVGIcons.tsx b/subprojects/frontend/src/graph/SVGIcons.tsx
new file mode 100644
index 00000000..fa3484b1
--- /dev/null
+++ b/subprojects/frontend/src/graph/SVGIcons.tsx
@@ -0,0 +1,41 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import { styled } from '@mui/material/styles';
+import { useCallback } from 'react';
+
+import icons from './icons';
+
+export const SVG_NS = 'http://www.w3.org/2000/svg';
+
+const SVGIconsHolder = styled('div', {
+  name: 'SVGIcons-Holder',
+})({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0,
+  visibility: 'hidden',
+});
+
+export default function SVGIcons(): JSX.Element {
+  const addNodes = useCallback((element: HTMLDivElement | null) => {
+    if (element === null) {
+      return;
+    }
+    const svgElement = document.createElementNS(SVG_NS, 'svg');
+    const defs = document.createElementNS(SVG_NS, 'defs');
+    svgElement.appendChild(defs);
+    icons.forEach((value) => {
+      const importedValue = document.importNode(value, true);
+      importedValue.id = `refinery-${importedValue.id}`;
+      defs.appendChild(importedValue);
+    });
+    element.replaceChildren(svgElement);
+  }, []);
+  return <SVGIconsHolder ref={addNodes} />;
+}
diff --git a/subprojects/frontend/src/graph/export/exportDiagram.tsx b/subprojects/frontend/src/graph/export/exportDiagram.tsx
index 52d19aa0..73b40fea 100644
--- a/subprojects/frontend/src/graph/export/exportDiagram.tsx
+++ b/subprojects/frontend/src/graph/export/exportDiagram.tsx
@@ -12,9 +12,6 @@ import normalFontURL from '@fontsource/open-sans/files/open-sans-latin-400-norma
 import boldFontURL from '@fontsource/open-sans/files/open-sans-latin-700-normal.woff2?url';
 import variableItalicFontURL from '@fontsource-variable/open-sans/files/open-sans-latin-wght-italic.woff2?url';
 import variableFontURL from '@fontsource-variable/open-sans/files/open-sans-latin-wght-normal.woff2?url';
-import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw';
-import labelSVG from '@material-icons/svg/svg/label/baseline.svg?raw';
-import labelOutlinedSVG from '@material-icons/svg/svg/label/outline.svg?raw';
 import type { Theme } from '@mui/material/styles';
 import { nanoid } from 'nanoid';
 
@@ -22,6 +19,7 @@ import { darkTheme, lightTheme } from '../../theme/ThemeProvider';
 import { copyBlob, saveBlob } from '../../utils/fileIO';
 import type GraphStore from '../GraphStore';
 import { createGraphTheme } from '../GraphTheme';
+import icons from '../icons';
 import { SVG_NS } from '../postProcessSVG';
 
 import type ExportSettingsStore from './ExportSettingsStore';
@@ -31,24 +29,6 @@ const PNG_CONTENT_TYPE = 'image/png';
 const SVG_CONTENT_TYPE = 'image/svg+xml';
 const EXPORT_ID = 'export-image';
 
-const ICONS: Map<string, Element> = new Map();
-
-function importSVG(svgSource: string, className: string): void {
-  const parser = new DOMParser();
-  const svgDocument = parser.parseFromString(svgSource, SVG_CONTENT_TYPE);
-  const root = svgDocument.children[0];
-  if (root === undefined) {
-    return;
-  }
-  root.id = className;
-  root.classList.add(className);
-  ICONS.set(className, root);
-}
-
-importSVG(labelSVG, 'icon-TRUE');
-importSVG(labelOutlinedSVG, 'icon-UNKNOWN');
-importSVG(cancelSVG, 'icon-ERROR');
-
 function fixIDs(id: string, svgDocument: XMLDocument) {
   const idMap = new Map<string, string>();
   let i = 0;
@@ -202,7 +182,7 @@ function appendStyles(
       theme,
       colorNodes,
       hexTypeHashes,
-      noEmbedIcons: true,
+      useOpacity: true,
     });
     const sheet = {
       insert(rule) {
@@ -216,42 +196,25 @@ function appendStyles(
   styleElement.innerHTML = rules.join('');
 }
 
-function fixForeignObjects(
+function fixIcons(
   id: string,
   svgDocument: XMLDocument,
   svg: SVGSVGElement,
 ): void {
-  const foreignObjects: SVGForeignObjectElement[] = [];
-  svg
-    .querySelectorAll('foreignObject')
-    .forEach((object) => foreignObjects.push(object));
-  foreignObjects.forEach((object) => {
-    const useElement = svgDocument.createElementNS(SVG_NS, 'use');
-    let x = Number(object.getAttribute('x') ?? '0');
-    let y = Number(object.getAttribute('y') ?? '0');
-    const width = Number(object.getAttribute('width') ?? '0');
-    const height = Number(object.getAttribute('height') ?? '0');
-    const size = Math.min(width, height);
-    x += (width - size) / 2;
-    y += (height - size) / 2;
-    useElement.setAttribute('x', String(x));
-    useElement.setAttribute('y', String(y));
-    useElement.setAttribute('width', String(size));
-    useElement.setAttribute('height', String(size));
-    useElement.id = object.id;
-    object.children[0]?.classList?.forEach((className) => {
-      useElement.classList.add(className);
-      if (ICONS.has(className)) {
-        useElement.setAttribute('href', `#refinery-${id}-${className}`);
-      }
-    });
-    object.replaceWith(useElement);
+  const prefix = `refinery-${id}-`;
+  const hrefPrefix = `#${prefix}`;
+  svg.querySelectorAll('use').forEach((use) => {
+    const href = use.getAttribute('href');
+    if (href === null) {
+      return;
+    }
+    use.setAttribute('href', href.replace(/^#refinery-/, hrefPrefix));
   });
   const defs = svgDocument.createElementNS(SVG_NS, 'defs');
   svg.prepend(defs);
-  ICONS.forEach((value) => {
+  icons.forEach((value) => {
     const importedValue = svgDocument.importNode(value, true);
-    importedValue.id = `refinery-${id}-${importedValue.id}`;
+    importedValue.id = `${prefix}${importedValue.id}`;
     defs.appendChild(importedValue);
   });
 }
@@ -398,7 +361,7 @@ export default async function exportDiagram(
     addBackground(svgDocument, copyOfSVG, theme);
   }
 
-  fixForeignObjects(id, svgDocument, copyOfSVG);
+  fixIcons(id, svgDocument, copyOfSVG);
 
   const { colorNodes } = graph;
   let fontsCSS = '';
diff --git a/subprojects/frontend/src/graph/icons.tsx b/subprojects/frontend/src/graph/icons.tsx
new file mode 100644
index 00000000..4f4407a0
--- /dev/null
+++ b/subprojects/frontend/src/graph/icons.tsx
@@ -0,0 +1,29 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw';
+import labelSVG from '@material-icons/svg/svg/label/baseline.svg?raw';
+import labelOutlinedSVG from '@material-icons/svg/svg/label/outline.svg?raw';
+
+const icons: Map<string, Element> = new Map();
+
+export default icons;
+
+function importSVG(svgSource: string, className: string): void {
+  const parser = new DOMParser();
+  const svgDocument = parser.parseFromString(svgSource, 'image/svg+xml');
+  const root = svgDocument.children[0];
+  if (root === undefined) {
+    return;
+  }
+  root.id = className;
+  root.classList.add(className);
+  icons.set(className, root);
+}
+
+importSVG(labelSVG, 'icon-TRUE');
+importSVG(labelOutlinedSVG, 'icon-UNKNOWN');
+importSVG(cancelSVG, 'icon-ERROR');
diff --git a/subprojects/frontend/src/graph/postProcessSVG.ts b/subprojects/frontend/src/graph/postProcessSVG.ts
index bf990f3a..97130012 100644
--- a/subprojects/frontend/src/graph/postProcessSVG.ts
+++ b/subprojects/frontend/src/graph/postProcessSVG.ts
@@ -144,14 +144,14 @@ function replaceImages(node: SVGGElement) {
     }
     const width = image.getAttribute('width')?.replace('px', '') ?? '';
     const height = image.getAttribute('height')?.replace('px', '') ?? '';
-    const foreign = document.createElementNS(SVG_NS, 'foreignObject');
-    foreign.setAttribute('x', image.getAttribute('x') ?? '');
-    foreign.setAttribute('y', image.getAttribute('y') ?? '');
-    foreign.setAttribute('width', width);
-    foreign.setAttribute('height', height);
-    const div = document.createElement('div');
-    div.classList.add('icon', `icon-${href.replace('#', '')}`);
-    foreign.appendChild(div);
+    const use = document.createElementNS(SVG_NS, 'use');
+    use.setAttribute('x', image.getAttribute('x') ?? '');
+    use.setAttribute('y', image.getAttribute('y') ?? '');
+    use.setAttribute('width', width);
+    use.setAttribute('height', height);
+    const iconName = `icon-${href.replace('#', '')}`;
+    use.setAttribute('href', `#refinery-${iconName}`);
+    use.classList.add('icon', iconName);
     const sibling = image.nextElementSibling;
     // Since dot doesn't respect the `id` attribute on table cells with a single image,
     // compute the ID based on the ID of the next element (the label).
@@ -160,9 +160,9 @@ function replaceImages(node: SVGGElement) {
       sibling.tagName.toLowerCase() === 'g' &&
       sibling.id !== ''
     ) {
-      foreign.id = `${sibling.id},icon`;
+      use.id = `${sibling.id},icon`;
     }
-    image.parentNode?.replaceChild(foreign, image);
+    image.parentNode?.replaceChild(use, image);
   });
 }