diff --git a/d2js/d2wasm/functions.go b/d2js/d2wasm/functions.go index d2aa115e9..45e3cae0c 100644 --- a/d2js/d2wasm/functions.go +++ b/d2js/d2wasm/functions.go @@ -238,6 +238,7 @@ func Compile(args []js.Value) (interface{}, error) { Sketch: renderOpts.Sketch, Pad: renderOpts.Pad, Center: renderOpts.Center, + Scale: input.Opts.Scale, ForceAppendix: input.Opts.ForceAppendix, }; diff --git a/d2js/js/examples/customizable.html b/d2js/js/examples/customizable.html index e13fa60c1..3855a1841 100644 --- a/d2js/js/examples/customizable.html +++ b/d2js/js/examples/customizable.html @@ -1,301 +1,329 @@ - - - - - - -
- -
-
-
- -
-
-
- - -
-
-
-
-
- -
-
-
- - -
-
-
-
-
- -
-
-
- - -
-
-
-
-
- -
-
-
- - -
-
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
- -
-
- - + .controls { + display: flex; + flex-direction: column; + gap: 12px; + width: 400px; + } + + textarea { + width: 100%; + height: 300px; + padding: 8px; + border: 1px solid #ccc; + border-radius: 4px; + font-family: monospace; + } + + .options-group { + display: flex; + flex-direction: column; + gap: 12px; + padding: 12px; + border: 1px solid #eee; + border-radius: 4px; + } + + .option:not(:has(.option-toggle-box:checked)) .option-select { + opacity: 0.5; + pointer-events: none; + } + + .option { + display: flex; + gap: 16px; + align-items: center; + } + + .input-label, + .checkbox-label, + .select-label { + display: flex; + gap: 4px; + align-items: center; + cursor: pointer; + } + + .number-input { + width: 3rem; + } + + button { + padding: 8px 16px; + background: #0066cc; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + } + + button:hover { + background: #0052a3; + } + + #output { + flex: 1; + overflow: auto; + border: 1px solid #eee; + border-radius: 4px; + padding: 16px; + } + + #output svg { + max-width: 100%; + max-height: 90vh; + } + + + + +
+ +
+
+
+ +
+
+
+ + +
+
+
+
+
+ +
+
+
+ + +
+
+
+
+
+ +
+
+
+ + +
+
+
+
+
+ +
+
+
+ + +
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+ +
+
+ +