luciano/d2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adding support for d2-config in vars

Browse source
This commit is contained in:
delfino 2025-02-14 03:03:17 +00:00
parent 06dda87d79
commit 68b36c4fc1
No known key found for this signature in database
GPG key ID: CFE0DD6A770BF48C
5 changed files with 296 additions and 228 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
d2js/d2wasm/functions.go
View file

@ -232,12 +232,22 @@ func Compile(args []js.Value) (interface{}, error) {
return nil, &WASMError{Message: err.Error(), Code: 500} return nil, &WASMError{Message: err.Error(), Code: 500}
} }
mergedRenderOpts := RenderOptions{
ThemeID: renderOpts.ThemeID,
DarkThemeID: renderOpts.DarkThemeID,
Sketch: renderOpts.Sketch,
Pad: renderOpts.Pad,
Center: renderOpts.Center,
ForceAppendix: input.Opts.ForceAppendix,
};
input.FS["index"] = d2format.Format(g.AST) input.FS["index"] = d2format.Format(g.AST)
return CompileResponse{ return CompileResponse{
FS: input.FS, FS: input.FS,
Diagram: *diagram, Diagram: *diagram,
Graph: *g, Graph: *g,
RenderOpts: mergedRenderOpts,
}, nil }, nil
} }

9
d2js/d2wasm/types.go
View file

@ -33,11 +33,10 @@ type BoardPositionResponse struct {
type CompileRequest struct { type CompileRequest struct {
FS map[string]string `json:"fs"` FS map[string]string `json:"fs"`
Opts *RenderOptions `json:"options"` Opts *CompileOptions `json:"options"`
} }
type RenderOptions struct { type RenderOptions struct {
Layout *string `json:"layout"`
Pad *int64 `json:"pad"` Pad *int64 `json:"pad"`
Sketch *bool `json:"sketch"` Sketch *bool `json:"sketch"`
Center *bool `json:"center"` Center *bool `json:"center"`
@ -47,10 +46,16 @@ type RenderOptions struct {
ForceAppendix *bool `json:"forceAppendix"` ForceAppendix *bool `json:"forceAppendix"`
} }
type CompileOptions struct {
RenderOptions
Layout *string `json:"layout"`
}
type CompileResponse struct { type CompileResponse struct {
FS map[string]string `json:"fs"` FS map[string]string `json:"fs"`
Diagram d2target.Diagram `json:"diagram"` Diagram d2target.Diagram `json:"diagram"`
Graph d2graph.Graph `json:"graph"` Graph d2graph.Graph `json:"graph"`
RenderOpts RenderOptions `json:"renderOpts"`
} }
type CompletionResponse struct { type CompletionResponse struct {

210
d2js/js/examples/customizable.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <style>
body { body {
@ -10,12 +11,14 @@
margin: 0; margin: 0;
font-family: system-ui, -apple-system, sans-serif; font-family: system-ui, -apple-system, sans-serif;
} }
.controls { .controls {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
width: 400px; width: 400px;
} }
textarea { textarea {
width: 100%; width: 100%;
height: 300px; height: 300px;
@ -24,6 +27,7 @@
border-radius: 4px; border-radius: 4px;
font-family: monospace; font-family: monospace;
} }
.options-group { .options-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -32,34 +36,31 @@
border: 1px solid #eee; border: 1px solid #eee;
border-radius: 4px; border-radius: 4px;
} }
.layout-toggle,
.sketch-toggle, .option:not(:has(.option-toggle-box:checked)) .option-select {
.center-toggle, opacity: 0.5;
.appendix-toggle, pointer-events: none;
.theme-select, }
.dark-theme-select,
.padding-input, .option {
.scale-input {
display: flex; display: flex;
gap: 16px; gap: 16px;
align-items: center; align-items: center;
} }
.radio-group {
display: flex;
gap: 12px;
}
.input-label, .input-label,
.select-label, .checkbox-label,
.radio-label, .select-label {
.checkbox-label {
display: flex; display: flex;
gap: 4px; gap: 4px;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
.number-input { .number-input {
width: 3rem; width: 3rem;
} }
button { button {
padding: 8px 16px; padding: 8px 16px;
background: #0066cc; background: #0066cc;
@ -68,9 +69,11 @@
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
} }
button:hover { button:hover {
background: #0052a3; background: #0052a3;
} }
#output { #output {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
@ -78,51 +81,107 @@
border-radius: 4px; border-radius: 4px;
padding: 16px; padding: 16px;
} }
#output svg { #output svg {
max-width: 100%; max-width: 100%;
max-height: 90vh; max-height: 90vh;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="controls"> <div class="controls">
<textarea id="input">x -> y</textarea> <textarea id="input">x -> y</textarea>
<div class="options-group"> <div class="options-group">
<div class="layout-toggle"> <div class="option">
<span>Layout:</span> <div class="option-toggle">
<label class="checkbox-label">
<input type="checkbox" id="layout-toggle" class="option-toggle-box" />
<span>Layout</span>
</label>
</div>
<div class="option-select">
<div class="radio-group"> <div class="radio-group">
<label class="radio-label"> <label class="radio-label">
<input type="radio" name="layout" value="dagre" checked /> <input type="radio" name="layout-select" value="dagre" checked />
Dagre Dagre
</label> </label>
<label class="radio-label"> <label class="radio-label">
<input type="radio" name="layout" value="elk" /> <input type="radio" name="layout-select" value="elk" />
ELK ELK
</label> </label>
</div> </div>
</div> </div>
<div class="sketch-toggle"> </div>
<div class="option">
<div class="option-toggle">
<label class="checkbox-label"> <label class="checkbox-label">
<input type="checkbox" id="sketch" /> <input type="checkbox" id="sketch-toggle" class="option-toggle-box" />
Sketch mode <span>Sketch Mode</span>
</label> </label>
</div> </div>
<div class="center-toggle"> <div class="option-select">
<label class="checkbox-label"> <div class="radio-group">
<input type="checkbox" id="center" /> <label class="radio-label">
Centered <input type="radio" name="sketch-select" value="true" checked />
Enabled
</label>
<label class="radio-label">
<input type="radio" name="sketch-select" value="false" />
Disabled
</label> </label>
</div> </div>
<div class="appendix-toggle"> </div>
</div>
<div class="option">
<div class="option-toggle">
<label class="checkbox-label"> <label class="checkbox-label">
<input type="checkbox" id="appendix" /> <input type="checkbox" id="center-toggle" class="option-toggle-box" />
Force Appendix <span>Centered</span>
</label> </label>
</div> </div>
<div class="theme-select"> <div class="option-select">
<label class="select-label"> <div class="radio-group">
<select id="theme" name="theme"> <label class="radio-label">
<option value="-1"></option> <input type="radio" name="center-select" value="true" checked />
Enabled
</label>
<label class="radio-label">
<input type="radio" name="center-select" value="false" />
Disabled
</label>
</div>
</div>
</div>
<div class="option">
<div class="option-toggle">
<label class="checkbox-label">
<input type="checkbox" id="appendix-toggle" class="option-toggle-box" />
<span>Force Appendix</span>
</label>
</div>
<div class="option-select">
<div class="radio-group">
<label class="radio-label">
<input type="radio" name="appendix-select" value="true" checked />
Enabled
</label>
<label class="radio-label">
<input type="radio" name="appendix-select" value="false" />
Disabled
</label>
</div>
</div>
</div>
<div class="option">
<div class="option-toggle">
<label class="checkbox-label">
<input type="checkbox" id="theme-toggle" class="option-toggle-box" />
<span>Theme</span>
</label>
</div>
<div class="option-select">
<select id="theme-select">
<option selected value="0">Default</option> <option selected value="0">Default</option>
<option value="1">Neutral grey</option> <option value="1">Neutral grey</option>
<option value="3">Flagship Terrastruct</option> <option value="3">Flagship Terrastruct</option>
@ -141,14 +200,18 @@
<option value="300">Terminal</option> <option value="300">Terminal</option>
<option value="301">Terminal grayscale</option> <option value="301">Terminal grayscale</option>
</select> </select>
Theme ID </div>
</div>
<div class="option">
<div class="option-toggle">
<label class="checkbox-label">
<input type="checkbox" id="dark-theme-toggle" class="option-toggle-box" />
<span>Dark Theme</span>
</label> </label>
</div> </div>
<div class="dark-theme-select"> <div class="option-select">
<label class="select-label"> <select id="dark-theme-select">
<select id="dark-theme" name="dark-theme"> <option selected value="0">Default</option>
<option value="-1"></option>
<option value="0">Default</option>
<option value="1">Neutral grey</option> <option value="1">Neutral grey</option>
<option value="3">Flagship Terrastruct</option> <option value="3">Flagship Terrastruct</option>
<option value="4">Cool classics</option> <option value="4">Cool classics</option>
@ -166,21 +229,34 @@
<option value="300">Terminal</option> <option value="300">Terminal</option>
<option value="301">Terminal grayscale</option> <option value="301">Terminal grayscale</option>
</select> </select>
Dark Theme ID </div>
</div>
<div class="option">
<div class="option-toggle">
<label class="checkbox-label">
<input type="checkbox" id="pad-toggle" class="option-toggle-box" />
<span>Padding</span>
</label> </label>
</div> </div>
<div class="padding-input"> <div class="option-select">
<label class="input-label"> <label class="input-label">
<input type="number" id="padding" value="20" step="10" class="number-input" /> <input type="number" id="pad-input" value="20" step="10" class="number-input" />
Padding
</label> </label>
</div> </div>
<div class="scale-input"> </div>
<label class="input-label"> <div class="option">
<input type="number" id="scale" value="-1" step="1" class="number-input" /> <div class="option-toggle">
Scale <label class="checkbox-label">
<input type="checkbox" id="scale-toggle" class="option-toggle-box" />
<span>Scale</span>
</label> </label>
</div> </div>
<div class="option-select">
<label class="input-label">
<input type="number" id="scale-input" value="1" step="0.1" min="0" class="number-input" />
</label>
</div>
</div>
</div> </div>
<button onclick="compile()">Compile</button> <button onclick="compile()">Compile</button>
</div> </div>
@ -189,26 +265,17 @@
import {D2} from "../dist/browser/index.js"; import {D2} from "../dist/browser/index.js";
const d2 = new D2(); const d2 = new D2();
window.compile = async () => { window.compile = async () => {
const notNegative = (value) => {
if (value < 0) {
return null;
} else return value;
};
const input = document.getElementById("input").value; const input = document.getElementById("input").value;
const layout = document.querySelector('input[name="layout"]:checked').value; const layout = document.getElementById("layout-toggle").checked ? document.querySelector('input[name="layout-select"]:checked').value : null
const sketch = document.getElementById("sketch").checked; const sketch = document.getElementById("sketch-toggle").checked ? document.querySelector('input[name="sketch-select"]:checked').value == "true" : null
const center = document.getElementById("center").checked; const center = document.getElementById("center-toggle").checked ? document.querySelector('input[name="center-select"]:checked').value == "true" : null
const themeSelector = document.getElementById("theme"); const forceAppendix = document.getElementById("appendix-toggle").checked ? document.querySelector('input[name="appendix-select"]:checked').value == "true" : null
const themeId = notNegative( const themeSelector = document.getElementById("theme-select")
Number(themeSelector.options[themeSelector.selectedIndex].value) const themeId = document.getElementById("theme-toggle").checked ? Number(themeSelector.options[themeSelector.selectedIndex].value) : null
); const darkThemeSelector = document.getElementById("dark-theme-select")
const darkThemeSelector = document.getElementById("dark-theme"); const darkThemeId = document.getElementById("dark-theme-toggle").checked ? Number(darkThemeSelector.options[darkThemeSelector.selectedIndex].value) : null
const darkThemeId = notNegative( const pad = document.getElementById("pad-toggle").checked ? Number(document.getElementById("pad-input").value) : null
Number(darkThemeSelector.options[darkThemeSelector.selectedIndex].value) const scale = document.getElementById("scale-toggle").checked ? Number(document.getElementById("scale-input").value) : null
);
const scale = notNegative(Number(document.getElementById("scale").value));
const pad = Number(document.getElementById("padding").value);
const forceAppendix = document.getElementById("appendix").checked;
try { try {
const result = await d2.compile(input, { const result = await d2.compile(input, {
layout, layout,
@ -220,15 +287,7 @@
center, center,
forceAppendix, forceAppendix,
}); });
const svg = await d2.render(result.diagram, { const svg = await d2.render(result.diagram, result.renderOpts);
sketch,
themeId,
darkThemeId,
scale,
pad,
center,
forceAppendix,
});
document.getElementById("output").innerHTML = svg; document.getElementById("output").innerHTML = svg;
} catch (err) { } catch (err) {
console.error(err); console.error(err);
@ -238,4 +297,5 @@
compile(); compile();
</script> </script>
</body> </body>
</html> </html>

13
d2js/js/src/index.js
View file

@ -1,10 +1,5 @@
import { createWorker, loadFile } from "./platform.js"; import { createWorker, loadFile } from "./platform.js";
const DEFAULT_OPTIONS = {
layout: "dagre",
sketch: false,
};
export class D2 { export class D2 {
constructor() { constructor() {
this.ready = this.init(); this.ready = this.init();
@ -86,17 +81,15 @@ export class D2 {
} }
async compile(input, options = {}) { async compile(input, options = {}) {
const opts = { ...DEFAULT_OPTIONS, ...options };
const request = const request =
typeof input === "string" typeof input === "string"
? { fs: { index: input }, options: opts } ? { fs: { index: input }, options }
: { ...input, options: { ...opts, ...input.options } }; : { ...input, options: { ...options, ...input.options } };
return this.sendMessage("compile", request); return this.sendMessage("compile", request);
} }
async render(diagram, options = {}) { async render(diagram, options = {}) {
const opts = { ...DEFAULT_OPTIONS, ...options }; return this.sendMessage("render", { diagram, options });
return this.sendMessage("render", { diagram, options: opts });
} }
async encode(script) { async encode(script) {