Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow KImages to refer to arbitrary URIs, which will be linked in the SVG #187

Merged
merged 1 commit into from
Jul 25, 2024
Merged

Allow KImages to refer to arbitrary URIs, which will be linked in the SVG #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/klighd-core/src/diagram-server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 })
}
}
Expand Down
21 changes: 16 additions & 5 deletions packages/klighd-core/src/views-rendering.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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
Expand Down
Loading