maxWidth option
skyfrk opened this issue · comments
Hello there,
it would be great to be able to specify a maxWidth option like in the gatsby-remark-images plugin. Large SVGs currently stretch beyond the size of the box I output my remark html to.
Thanks for the suggestion.
Would you be able to provide a plantuml diagram, and then what you'd expect after it was transformed?
My experience with plantuml is less than the time it took me to write this plugin.
Looking at your link, the gatsby-remark-images plugin is wrapping things in divs. I'm not doing that at the moment but there is no reason why I can't.
Ok. I have this plantuml figure:
@startuml
box "Machine" #ffffff
participant Sensor
participant "OPC UA Server"
participant CloudConnector
end box
box "some company" #ffffff
participant "some company Core"
end box
box "Connector" #00ff8c
participant "Event Hub"
participant "Event Hub Processor Function"
participant "IFTTT Event Processor"
end box
box "IFTTT" #ffffff
participant "Webhook Service"
participant Applet
end box
Sensor->"OPC UA Server" : Event
"OPC UA Server"->CloudConnector: Item Data
CloudConnector->"some company Core" : Item Data
"some company Core"->"Event Hub" : Event
"Event Hub"->"Event Hub Processor Function" : Events
"Event Hub Processor Function"->"Webhook Service" : POST Request
"Webhook Service"->Applet : Trigger
Applet->"Webhook Service": Action
"Webhook Service"->"IFTTT Event Processor" : POST Request
"IFTTT Event Processor"->"some company Core" : Commanding Call (POST Request)
"some company Core"->CloudConnector : Command
CloudConnector->"OPC UA Server" : Command
"OPC UA Server"->Sensor : Event
@endumlwhich was converted to this svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentscripttype="application/ecmascript" contentstyletype="text/css" height="526px" preserveAspectRatio="none" style="width:1196px;height:526px;" version="1.1" viewBox="0 0 1196 526" width="1196px" zoomAndPan="magnify"><defs><filter height="300%" id="f15st99riz14js" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"></feGaussianBlur><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend></filter></defs><g><rect fill="#FFFFFF" height="511.1406" style="stroke: #A80036; stroke-width: 1.0;" width="328" x="4" y="4"></rect><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="54" x="141" y="17.4951">Machine</text><rect fill="#FFFFFF" height="511.1406" style="stroke: #A80036; stroke-width: 1.0;" width="156" x="334" y="4"></rect><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="96" x="364" y="17.4951">some company</text><rect fill="#00FF8C" height="511.1406" style="stroke: #A80036; stroke-width: 1.0;" width="486" x="492" y="4"></rect><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="65" x="702.5" y="17.4951">Connector</text><rect fill="#FFFFFF" height="511.1406" style="stroke: #A80036; stroke-width: 1.0;" width="205" x="980" y="4"></rect><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="36" x="1064.5" y="17.4951">IFTTT</text><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="39" x2="39" y1="60.9609" y2="475.5313"></line><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="139" x2="139" y1="60.9609" y2="475.5313"></line><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="267" x2="267" y1="60.9609" y2="475.5313"></line><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="412" x2="412" y1="60.9609" y2="475.5313"></line><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="537" x2="537" y1="60.9609" y2="475.5313"></line><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="694" x2="694" y1="60.9609" y2="475.5313"></line><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="891" x2="891" y1="60.9609" y2="475.5313"></line><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="1048" x2="1048" y1="60.9609" y2="475.5313"></line><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="1152" x2="1152" y1="60.9609" y2="475.5313"></line><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="59" x="8" y="24.3516"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="45" x="15" y="45.8848">Sensor</text><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="59" x="8" y="474.5313"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="45" x="15" y="496.0645">Sensor</text><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="112" x="81" y="24.3516"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="98" x="88" y="45.8848">OPC UA Server</text><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="112" x="81" y="474.5313"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="98" x="88" y="496.0645">OPC UA Server</text><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="117" x="207" y="24.3516"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="103" x="214" y="45.8848">CloudConnector</text><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="117" x="207" y="474.5313"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="103" x="214" y="496.0645">CloudConnector</text><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="144" x="338" y="24.3516"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="130" x="345" y="45.8848">some company Core</text><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="144" x="338" y="474.5313"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="130" x="345" y="496.0645">some company Core</text><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="79" x="496" y="24.3516"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="65" x="503" y="45.8848">Event Hub</text><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="79" x="496" y="474.5313"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="65" x="503" y="496.0645">Event Hub</text><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="206" x="589" y="24.3516"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="192" x="596" y="45.8848">Event Hub Processor Function</text><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="206" x="589" y="474.5313"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="192" x="596" y="496.0645">Event Hub Processor Function</text><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="161" x="809" y="24.3516"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="147" x="816" y="45.8848">IFTTT Event Processor</text><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="161" x="809" y="474.5313"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="147" x="816" y="496.0645">IFTTT Event Processor</text><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="125" x="984" y="24.3516"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="111" x="991" y="45.8848">Webhook Service</text><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="125" x="984" y="474.5313"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="111" x="991" y="496.0645">Webhook Service</text><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="54" x="1123" y="24.3516"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="40" x="1130" y="45.8848">Applet</text><rect fill="#FEFECE" filter="url(#f15st99riz14js)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;" width="54" x="1123" y="474.5313"></rect><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="40" x="1130" y="496.0645">Applet</text><polygon fill="#A80036" points="127,89.3125,137,93.3125,127,97.3125,131,93.3125" style="stroke: #A80036; stroke-width: 1.0;"></polygon><line style="stroke: #A80036; stroke-width: 1.0;" x1="39.5" x2="133" y1="93.3125" y2="93.3125"></line><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="32" x="46.5" y="88.4561">Event</text><polygon fill="#A80036" points="255.5,119.6641,265.5,123.6641,255.5,127.6641,259.5,123.6641" style="stroke: #A80036; stroke-width: 1.0;"></polygon><line style="stroke: #A80036; stroke-width: 1.0;" x1="139" x2="261.5" y1="123.6641" y2="123.6641"></line><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="56" x="146" y="118.8076">Item Data</text><polygon fill="#A80036" points="400,150.0156,410,154.0156,400,158.0156,404,154.0156" style="stroke: #A80036; stroke-width: 1.0;"></polygon><line style="stroke: #A80036; stroke-width: 1.0;" x1="267.5" x2="406" y1="154.0156" y2="154.0156"></line><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="56" x="274.5" y="149.1592">Item Data</text><polygon fill="#A80036" points="525.5,180.3672,535.5,184.3672,525.5,188.3672,529.5,184.3672" style="stroke: #A80036; stroke-width: 1.0;"></polygon><line style="stroke: #A80036; stroke-width: 1.0;" x1="412" x2="531.5" y1="184.3672" y2="184.3672"></line><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="32" x="419" y="179.5107">Event</text><polygon fill="#A80036" points="682,210.7188,692,214.7188,682,218.7188,686,214.7188" style="stroke: #A80036; stroke-width: 1.0;"></polygon><line style="stroke: #A80036; stroke-width: 1.0;" x1="537.5" x2="688" y1="214.7188" y2="214.7188"></line><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="39" x="544.5" y="209.8623">Events</text><polygon fill="#A80036" points="1036.5,241.0703,1046.5,245.0703,1036.5,249.0703,1040.5,245.0703" style="stroke: #A80036; stroke-width: 1.0;"></polygon><line style="stroke: #A80036; stroke-width: 1.0;" x1="694" x2="1042.5" y1="245.0703" y2="245.0703"></line><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="87" x="701" y="240.2139">POST Request</text><polygon fill="#A80036" points="1140,271.4219,1150,275.4219,1140,279.4219,1144,275.4219" style="stroke: #A80036; stroke-width: 1.0;"></polygon><line style="stroke: #A80036; stroke-width: 1.0;" x1="1048.5" x2="1146" y1="275.4219" y2="275.4219"></line><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="39" x="1055.5" y="270.5654">Trigger</text><polygon fill="#A80036" points="1059.5,301.7734,1049.5,305.7734,1059.5,309.7734,1055.5,305.7734" style="stroke: #A80036; stroke-width: 1.0;"></polygon><line style="stroke: #A80036; stroke-width: 1.0;" x1="1053.5" x2="1151" y1="305.7734" y2="305.7734"></line><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="37" x="1065.5" y="300.917">Action</text><polygon fill="#A80036" points="902.5,332.125,892.5,336.125,902.5,340.125,898.5,336.125" style="stroke: #A80036; stroke-width: 1.0;"></polygon><line style="stroke: #A80036; stroke-width: 1.0;" x1="896.5" x2="1047.5" y1="336.125" y2="336.125"></line><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="87" x="908.5" y="331.2686">POST Request</text><polygon fill="#A80036" points="423,362.4766,413,366.4766,423,370.4766,419,366.4766" style="stroke: #A80036; stroke-width: 1.0;"></polygon><line style="stroke: #A80036; stroke-width: 1.0;" x1="417" x2="890.5" y1="366.4766" y2="366.4766"></line><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="201" x="429" y="361.6201">Commanding Call (POST Request)</text><polygon fill="#A80036" points="278.5,392.8281,268.5,396.8281,278.5,400.8281,274.5,396.8281" style="stroke: #A80036; stroke-width: 1.0;"></polygon><line style="stroke: #A80036; stroke-width: 1.0;" x1="272.5" x2="411" y1="396.8281" y2="396.8281"></line><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="59" x="284.5" y="391.9717">Command</text><polygon fill="#A80036" points="150,423.1797,140,427.1797,150,431.1797,146,427.1797" style="stroke: #A80036; stroke-width: 1.0;"></polygon><line style="stroke: #A80036; stroke-width: 1.0;" x1="144" x2="266.5" y1="427.1797" y2="427.1797"></line><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="59" x="156" y="422.3232">Command</text><polygon fill="#A80036" points="50.5,453.5313,40.5,457.5313,50.5,461.5313,46.5,457.5313" style="stroke: #A80036; stroke-width: 1.0;"></polygon><line style="stroke: #A80036; stroke-width: 1.0;" x1="44.5" x2="138" y1="457.5313" y2="457.5313"></line><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="32" x="56.5" y="452.6748">Event</text></g></svg>I want to place this svg in a <div></div> which has a max-width: 800px applied to it. The gatsby-remark-images plugin respects the max-width by embedding pictures like this (due to the maxWidth option):
<span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px;">
...
</span>gatsby-remark-plantuml doesn't respect the max-width due to the hardcoded height and width.
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
contentscripttype="application/ecmascript"
contentstyletype="text/css"
height="526px"
preserveAspectRatio="none"
style="width:1196px;height:526px;"
version="1.1"
viewBox="0 0 1196 526"
width="1196px"
zoomAndPan="magnify"
>With the additional maxWith option I want the width to be maxWidth and the height scaled appropriately.
While writing this I figured that it would probably be a better idea to let the SVG automatically adjust to the available space. I think that you should adjust the output of this plugin like this!
I'm new to frontend development I hope that you can understand my idea!
Its alright, I'm probably not much newer than you are as well.
From my hacking in the devtools, I can adjust svg element to set the height: auto and width: 50% and have the svg keep the aspect ration but take up 50% of the width.
Because there is no wrapper element it will be left aligned.
If you do the same thing in the devtools is that what you want to happen?