Dyalog / ride

Cross-platform IDE for Dyalog APL
https://dyalog.github.io/ride
MIT License
204 stars 31 forks source link

RIDE 3500⌶ doesn't support SVG with height="100%" #553

Closed dyavc closed 1 year ago

dyavc commented 5 years ago

Describe the issue you are having

RIDE 3500⌶ doesn't support SVG with height="100%" This prevents the SVG from fitting the height of the display window. it does support width="100%

Did you connect to an already running interpreter or start the interpreter from RIDE?

Start an interpreter

How do you reproduce the issue?

repro553.dws is a 17.1 workspace which shows the issue. It is attached in a comment below.

3500⌶ fh ⍝ fit height 100 % only. does not work 3500 ⌶ fwh ⍝ fit width and height 100 %. does not work. 3500 ⌶ fw ⍝ fit width 100 % . This works.

⍝ resize the 3500⌶ window : when it has a narrow height, the bottom of the box is not visible, whereas it should be (save SVG to file.svg and open with browser to compare

Paste the contents of Help → About (Shift+F1)

IDE:
  Version: 4.2.3437
  Platform: Win32
  Date: 2019-08-13 14:55:17 +0200
  Git commit: 691f47856e05a36f70847313b23e061a0cf95392
  Preferences:{
    "connectFav":"3",
    "floatOnTop":"1",
    "floating":"1",
    "indent":"2",
    "indentComments":"1",
    "indentMethods":"2",
    "kbdLocale":"en_GB",
    "keys":"{\"MA\":[\"Ctrl-Alt-R\"]}",
    "matchBrackets":"0",
    "pfkeys":"[\"\",\"\",\"\",\":access Public <ER>\",\":access Public <ER>\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\"]",
    "prefixMaps":"{\"en_GB\":\"S[D]\"}",
    "selectedExe":"C:\\Program Files\\Dyalog\\Dyalog APL-64 17.1 Unicode\\dyalog.exe",
    "title":"{WSID}  {VER} PID: {PID} under RIDE {RIDE_VER}",
    "wse":"1"
  }

Interpreter:
  Version: 17.1.36847
  Platform: Windows-64
  Edition: Unicode/64
  Date: Aug 15 2019 at 09:04:32
dyavc commented 5 years ago

repro553.zip repro553.zip has 3 svg files to try in a browser

repro553.dws is a 17.1 workspace which shows the issue 3500⌶ fh ⍝ fit height 100 % only. does not work 3500 ⌶ fwh ⍝ fit width and height 100 %. does not work. 3500 ⌶ fw ⍝ fit width 100 % . This works.

dyavc commented 5 years ago

Nicolas says that this is important as it is the default way to view SVG's from SharpPlot, and by default we want them to scale to the window size

dyavc commented 5 years ago

For a different real-world example: )load sharpplot.dws

.View #.Samples.Sample

e9gille commented 5 years ago

The reason it behave different to opening it in a browser is that RIDE injects the content into the body element of an empty HTML page. The assumption is that the argument to the I beam is going to be some valid HTML markup, but not a complete page.

I'm not sure what to do here. You can get the SVG to fill the page if you add the style attribute: style="height: -webkit-fill-available; width: -webkit-fill-available;"

Alternatively RIDE doesn't try to wrap the content at all and it is left to the user to provide all the markup. I'm not sure why this approach wasn't used. Is there a drawback I'm missing?

abrudz commented 1 year ago

Alternatively RIDE doesn't try to wrap the content at all and it is left to the user to provide all the markup. I'm not sure why this approach wasn't used. Is there a drawback I'm missing?

Let's just do that!

e9gille commented 1 year ago

Having looked into the issue and tried various things I noted that:

  1. Chrome browser behaves the same in all 3 attached examples, limiting height width to 100% preserving aspect ratio (due to browser css default setting svg width and height to 100%).
  2. In electron version of RIDE I tried writing the content to a temp file, using the provided title as file name, and open it in a new BrowserWindow. This shows that the browser infers content type from the file extension.
    • It behaves the same as Chrome when the file name has an .svg extension.
    • If the file has a html extension and the content doesn't include the DOCTYPE tag, it goes into BackCompat mode and I observe that fh fills the height, fw fills the width, fwh limits on both ends. In all cases aspect ratio is preserved.

I can do point 2 above which would as a bonus allow you to send xml content, give it a *.xml title and get a browserwindow that renders it as xml.

For svg with the intention to fill the width and height the svg element should have the attribute preserveAspectRatio="none" and if given an *.svg title, the svg element needs a style attribute to unset the width and height settings of the browser.

To summarise, it's not clear to me that it is RIDE that is at fault here and I don't think the proposed change on its own resolves the issue reported.

e9gille commented 1 year ago

Fixed for electron version in #1128 , can't fix for ZF version