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.

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

Support for image Views. #338

Closed
wants to merge 16 commits into from
Closed

Support for image Views. #338

wants to merge 16 commits into from

Conversation

qtzar
Copy link
Contributor

@qtzar qtzar commented Oct 23, 2023

This PR introduces support for Image Views.

An image view represents an image that has been rendered outside of Structurizr, for inclusion in a Structurizr workspace. Image views can be created from an arbitrary PNG/SVG file, or a PlantUML/Mermaid/Kroki diagram. An example use case for an image view is to provide a “level 4” zoom-in for a component on a component diagram.

From experimentation you can associate an image view with a SoftwareSystem, Container or Component and you can have multiple images views associated against a single element.

  • Show Image Views for SoftwareSystems on the Containers View page.
  • Show Image Views for Containers on the Components View page.
  • Show Image Views for Components on a new 'Code Views' page.
  • Make sure SVG links are setup to go to those pages even if only an image view exists on the page.
  • Write appropriate tests

Image Views associated with Software Systems will show on the Containers View page.
@qtzar
Copy link
Contributor Author

qtzar commented Oct 23, 2023

@dirkgroot @jp7677 This PR might take me a while to complete. Please don't delay a new release waiting for it to be completed.

qtzar added 2 commits October 24, 2023 15:36
…ew page.

Image Views associated with Components will show on a new 'Code Views' page
Code page is hardcoded to be set to Visible for the moment.
.sortedBy { it.key }
}

fun getImagesForContainer(generatorContext: GeneratorContext, softwareSystem: SoftwareSystem): List<ImageView> {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jp7677 Is there a better way to write this in Kotlin?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From a short glimpse, Kotlin's flatMap should be your friend here https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.collections/flat-map.html

@qtzar qtzar marked this pull request as ready for review October 27, 2023 17:05
@jp7677
Copy link
Contributor

jp7677 commented Nov 2, 2023

Thanks a lot for the PR, I haven't yet looked at the code since I want to complete #356 first. That said I have checked out this branch and looked at the result. Looks good and fits nicely. A few remarks:

  • I would prefer if we show images the same way we do with diagrams, thus
    • the same figure construction in html.
    • the same place for name and description. We don't show the description yet for diagrams. So for now no description yet for images, or also adding the description for diagrams.
    • We should also add the modal dialog for "opening" the image, albeit no pan and zoom obviously.
  • Please don't modify the example that heavily, at least not as part of this PR, it's fine of course to add the images.
  • One of the sample images has a thick boarder, could you find an alternative that fits nicer in the resulting example site?

@jp7677
Copy link
Contributor

jp7677 commented Dec 18, 2023

Hi @qtzar do you have plans to continue this PR?

@qtzar
Copy link
Contributor Author

qtzar commented Dec 18, 2023

@jp7677 I do. I've just been up to my eyes with work but I should get it finished off.

@jp7677
Copy link
Contributor

jp7677 commented Dec 18, 2023

@jp7677 I do. I've just been up to my eyes with work but I should get it finished off.

Cool and no worries about timelines, I was just curious if you are still interested to continue.

qtzar added 3 commits January 11, 2024 11:55
# Conflicts:
#	src/main/kotlin/nl/avisi/structurizr/site/generatr/site/C4PlantUmlExporterWithElementLinks.kt
#	src/main/kotlin/nl/avisi/structurizr/site/generatr/site/DiagramGenerator.kt
#	src/test/kotlin/nl/avisi/structurizr/site/generatr/site/C4PlantUmlExporterWithElementLinksTest.kt
@qtzar
Copy link
Contributor Author

qtzar commented Jan 11, 2024

I've updated this branch to work with the latest release but I still need to address some of the comments from @jp7677

@qtzar qtzar requested a review from jp7677 January 16, 2024 14:57
@jp7677 jp7677 mentioned this pull request Jan 23, 2024
@jp7677
Copy link
Contributor

jp7677 commented Jan 23, 2024

I've opened #413 which takes most from this PR, but with slightly different styling and more tests. Thanks a lot for the base work here!

@jp7677 jp7677 closed this Jan 23, 2024
@qtzar qtzar deleted the ImageViews branch January 23, 2024 14:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants