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

when export to html, the svg viewbox is too small to show the activity info #109

Open
ruanwz opened this issue Dec 2, 2021 · 2 comments
Labels
bug Something isn't working
Projects

Comments

@ruanwz
Copy link

ruanwz commented Dec 2, 2021

Describe the bug
when export to html, the svg viewbox is too small to show the activity info

To Reproduce

just export html

Expected behavior
the activity and workobjects can be seen in slides
Screenshots
before change:
image

after change:
image

Desktop (please complete the following information):

  • Modeler Version: v0.4.0
  • Browser: [e.g. chrome 71.0]
  • OS: [e.g. Windows 10]

Additional context
here is a quick fix, just copy code from app/domain-story-modeler/features/export/svgDownload.js to app/domain-story-modeler/features/export/storyDownload.js
the html view is complete after change

diff --git a/app/domain-story-modeler/features/export/storyDownload.js b/app/domain-story-modeler/features/export/storyDownload.js
index 0a12b5e..43651f7 100644
--- a/app/domain-story-modeler/features/export/storyDownload.js
+++ b/app/domain-story-modeler/features/export/storyDownload.js
@@ -202,16 +202,17 @@ function createSVGData(svg) {
   // we change the confines of the SVG viewbox
   let viewBoxIndex = data.indexOf('width="');
 
-  let viewBox = viewBoxCoordinates(data);
+  // let viewBox = viewBoxCoordinates(data);
+  let { width, height, viewBox } = viewBoxCoordinates(data);
 
-  let xLeft, width, yUp, height;
+  let xLeft, yUp;
   let bounds = '';
   let splitViewBox = viewBox.split(/\s/);
 
   xLeft = +splitViewBox[0];
   yUp = +splitViewBox[1];
-  width = +splitViewBox[2];
-  height = +splitViewBox[3];
+  width = +splitViewBox[2]+300;
+  height = +splitViewBox[3]+300;
 
   if (width < 300) {
     width += 300;
@@ -249,7 +250,7 @@ function createSVGData(svg) {
 function viewBoxCoordinates(svg) {
   const ViewBoxCoordinate = /width="([^"]+)"\s+height="([^"]+)"\s+viewBox="([^"]+)"/;
   const match = svg.match(ViewBoxCoordinate);
-  return match[3];
+  return { width: +match[1], height: +match[2], viewBox: match[3] };
 }
 
 
@@ -270,4 +271,4 @@ function fixSvgDefinitions(result, sectionIndex) {
   }
 
   result.svg = result.svg.replace(defs, newDefs);
-}
\ No newline at end of file
+}


@AlexanderZellober AlexanderZellober added the bug Something isn't working label Dec 2, 2021
@AlexanderZellober AlexanderZellober added this to To do in v2.0.0 via automation Dec 2, 2021
@apae89
Copy link

apae89 commented Nov 20, 2023

I guess it's the same issue as the following, right? I exported it as HTML page in Version 1.5.0.
image
The working object connect that is connected with the Actor by the arrow (04) is not visible in the viewbox of the HTML page in the step where it's added to the story. In the step 05 it's visible since the view has zoomed out a bit.

Remarks: The lower border is the bottom side of by webbrowser.

If it's the same issue, could you provide your fix via a Pull Request?

@Geigerkind
Copy link
Collaborator

Geigerkind commented Dec 18, 2023

@apae89
Fixed in v2.

@ruanwz
Cant reproduce it. Can you provide an example?

@hofstef hofstef moved this from To do to Done in v2.0.0 Jan 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Development

No branches or pull requests

4 participants