Merge pull request #187 from kieler/nre/imageURIs

Allow KImages to refer to arbitrary URIs, which will be linked in the SVG
kieler · Jul 25, 2024 · 91e7786 · 91e7786
2 parents beca451 + 338f0f8
commit 91e7786
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/packages/klighd-core/src/diagram-server.ts b/packages/klighd-core/src/diagram-server.ts
@@ -3,7 +3,7 @@
  *
  * http://rtsys.informatik.uni-kiel.de/kieler
  *
- * Copyright 2021 by
+ * Copyright 2021-2024 by
  * + Kiel University
  *   + Department of Computer Science
  *     + Real-Time and Embedded Systems Group
@@ -257,7 +257,8 @@ export class KlighdDiagramServer extends DiagramServerProxy {
         const notCached: Pair<string, string>[] = []
         for (const image of (action as CheckImagesAction).images) {
             const id = KlighdDiagramServer.imageToSessionStorageString(image.bundleName, image.imagePath)
-            if (!this.sessionStorage.getItem(id)) {
+            // "URI" as bundle name implies that the image path is a URI that should be resolved locally.
+            if (!this.sessionStorage.getItem(id) && image.bundleName !== 'URI') {
                 notCached.push({ k: image.bundleName, v: image.imagePath })
             }
         }

diff --git a/packages/klighd-core/src/views-rendering.tsx b/packages/klighd-core/src/views-rendering.tsx
@@ -318,12 +318,23 @@ export function renderRectangularShape(
             break
         }
         case K_IMAGE: {
-            const { clipShape } = rendering as KImage
-            const fullImagePath = `${(rendering as KImage).bundleName}:${(rendering as KImage).imagePath}`
+            const kImage = rendering as KImage
+            const { clipShape } = kImage
             const id = rendering.properties['klighd.lsp.rendering.id'] as string
             const clipId = `${id}$clip`
-            const extension = fullImagePath.slice(fullImagePath.lastIndexOf('.') + 1)
-            const image = `data:image/${extension};base64,${sessionStorage.getItem(fullImagePath)}`
+            let imageURI: string
+            if (kImage.bundleName === 'URI') {
+                // Bundle name "URI" is a special handling to interpret the imagePath as a URI.
+                // Here, we just add that URI to the SVG, expecting that it will be available.
+                // Note, that this does mean the URI has to be available whereever the SVG will be opened, even after saving.
+                // An alternative here would be to download and cache that image in code and include it as an embedded base64 data URI instead.
+                imageURI = kImage.imagePath
+            } else {
+                // Other images have been cached in session storage and can be embedded directly.
+                const fullImagePath = `${(rendering as KImage).bundleName}:${(rendering as KImage).imagePath}`
+                const extension = fullImagePath.slice(fullImagePath.lastIndexOf('.') + 1)
+                imageURI = `data:image/${extension};base64,${sessionStorage.getItem(fullImagePath)}`
+            }
             let clipPath: VNode | undefined
 
             // Render the clip shape within an SVG clipPath element to be used as a clipping mask for the image.
@@ -342,7 +353,7 @@ export function renderRectangularShape(
             element = (
                 <g id={id} {...gAttrs}>
                     {...clipPath ? [clipPath] : []}
-                    {...renderSVGImage(boundsAndTransformation.bounds, shadowStyles, image, styles.kShadow)}
+                    {...renderSVGImage(boundsAndTransformation.bounds, shadowStyles, imageURI, styles.kShadow)}
                 </g>
             )
             break