search

baerrach / gatsby-remark-plantuml

Gatsby Remark parser for PlantUML code blocks
Other
3 stars 4 forks source link

maxWidth option #1

Closed skyfrk closed 4 years ago

skyfrk commented 4 years ago

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.

baerrach commented 4 years ago

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.

skyfrk commented 4 years ago

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

@enduml

which 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! 😬

baerrach commented 4 years ago

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?