adding support for d2-config in vars
This commit is contained in:
delfino
parent
06dda87d79
commit
68b36c4fc1
5 changed files with 296 additions and 228 deletions
|
|
@ -232,13 +232,23 @@ func Compile(args []js.Value) (interface{}, error) {
|
|||
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)
|
||||
|
||||
return CompileResponse{
|
||||
FS: input.FS,
|
||||
Diagram: *diagram,
|
||||
Graph: *g,
|
||||
}, nil
|
||||
RenderOpts: mergedRenderOpts,
|
||||
}, nil
|
||||
}
|
||||
|
||||
func Render(args []js.Value) (interface{}, error) {
|
||||
|
|
|
|||
|
|
@ -33,11 +33,10 @@ type BoardPositionResponse struct {
|
|||
|
||||
type CompileRequest struct {
|
||||
FS map[string]string `json:"fs"`
|
||||
Opts *RenderOptions `json:"options"`
|
||||
Opts *CompileOptions `json:"options"`
|
||||
}
|
||||
|
||||
type RenderOptions struct {
|
||||
Layout *string `json:"layout"`
|
||||
Pad *int64 `json:"pad"`
|
||||
Sketch *bool `json:"sketch"`
|
||||
Center *bool `json:"center"`
|
||||
|
|
@ -47,10 +46,16 @@ type RenderOptions struct {
|
|||
ForceAppendix *bool `json:"forceAppendix"`
|
||||
}
|
||||
|
||||
type CompileOptions struct {
|
||||
RenderOptions
|
||||
Layout *string `json:"layout"`
|
||||
}
|
||||
|
||||
type CompileResponse struct {
|
||||
FS map[string]string `json:"fs"`
|
||||
Diagram d2target.Diagram `json:"diagram"`
|
||||
Graph d2graph.Graph `json:"graph"`
|
||||
FS map[string]string `json:"fs"`
|
||||
Diagram d2target.Diagram `json:"diagram"`
|
||||
Graph d2graph.Graph `json:"graph"`
|
||||
RenderOpts RenderOptions `json:"renderOpts"`
|
||||
}
|
||||
|
||||
type CompletionResponse struct {
|
||||
|
|
|
|||
|
|
@ -1,241 +1,301 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.layout-toggle,
|
||||
.sketch-toggle,
|
||||
.center-toggle,
|
||||
.appendix-toggle,
|
||||
.theme-select,
|
||||
.dark-theme-select,
|
||||
.padding-input,
|
||||
.scale-input {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.input-label,
|
||||
.select-label,
|
||||
.radio-label,
|
||||
.checkbox-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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<textarea id="input">x -> y</textarea>
|
||||
<div class="options-group">
|
||||
<div class="layout-toggle">
|
||||
<span>Layout:</span>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="controls">
|
||||
<textarea id="input">x -> y</textarea>
|
||||
<div class="options-group">
|
||||
<div class="option">
|
||||
<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">
|
||||
<label class="radio-label">
|
||||
<input type="radio" name="layout" value="dagre" checked />
|
||||
<input type="radio" name="layout-select" value="dagre" checked />
|
||||
Dagre
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<input type="radio" name="layout" value="elk" />
|
||||
<input type="radio" name="layout-select" value="elk" />
|
||||
ELK
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sketch-toggle">
|
||||
</div>
|
||||
<div class="option">
|
||||
<div class="option-toggle">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="sketch" />
|
||||
Sketch mode
|
||||
<input type="checkbox" id="sketch-toggle" class="option-toggle-box" />
|
||||
<span>Sketch Mode</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="center-toggle">
|
||||
<div class="option-select">
|
||||
<div class="radio-group">
|
||||
<label class="radio-label">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option">
|
||||
<div class="option-toggle">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="center" />
|
||||
Centered
|
||||
<input type="checkbox" id="center-toggle" class="option-toggle-box" />
|
||||
<span>Centered</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="appendix-toggle">
|
||||
<div class="option-select">
|
||||
<div class="radio-group">
|
||||
<label class="radio-label">
|
||||
<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" />
|
||||
Force Appendix
|
||||
<input type="checkbox" id="appendix-toggle" class="option-toggle-box" />
|
||||
<span>Force Appendix</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="theme-select">
|
||||
<label class="select-label">
|
||||
<select id="theme" name="theme">
|
||||
<option value="-1"></option>
|
||||
<option selected value="0">Default</option>
|
||||
<option value="1">Neutral grey</option>
|
||||
<option value="3">Flagship Terrastruct</option>
|
||||
<option value="4">Cool classics</option>
|
||||
<option value="5">Mixed berry blue</option>
|
||||
<option value="6">Grape soda</option>
|
||||
<option value="7">Aubergine</option>
|
||||
<option value="8">Colorblind clear</option>
|
||||
<option value="100">Vanilla nitro cola</option>
|
||||
<option value="101">Orange creamsicle</option>
|
||||
<option value="102">Shirley temple</option>
|
||||
<option value="103">Earth tones</option>
|
||||
<option value="104">Everglade green</option>
|
||||
<option value="105">Buttered toast</option>
|
||||
<option value="200">Dark mauve</option>
|
||||
<option value="300">Terminal</option>
|
||||
<option value="301">Terminal grayscale</option>
|
||||
</select>
|
||||
Theme ID
|
||||
<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="dark-theme-select">
|
||||
<label class="select-label">
|
||||
<select id="dark-theme" name="dark-theme">
|
||||
<option value="-1"></option>
|
||||
<option value="0">Default</option>
|
||||
<option value="1">Neutral grey</option>
|
||||
<option value="3">Flagship Terrastruct</option>
|
||||
<option value="4">Cool classics</option>
|
||||
<option value="5">Mixed berry blue</option>
|
||||
<option value="6">Grape soda</option>
|
||||
<option value="7">Aubergine</option>
|
||||
<option value="8">Colorblind clear</option>
|
||||
<option value="100">Vanilla nitro cola</option>
|
||||
<option value="101">Orange creamsicle</option>
|
||||
<option value="102">Shirley temple</option>
|
||||
<option value="103">Earth tones</option>
|
||||
<option value="104">Everglade green</option>
|
||||
<option value="105">Buttered toast</option>
|
||||
<option value="200">Dark mauve</option>
|
||||
<option value="300">Terminal</option>
|
||||
<option value="301">Terminal grayscale</option>
|
||||
</select>
|
||||
Dark Theme ID
|
||||
<div class="option-select">
|
||||
<select id="theme-select">
|
||||
<option selected value="0">Default</option>
|
||||
<option value="1">Neutral grey</option>
|
||||
<option value="3">Flagship Terrastruct</option>
|
||||
<option value="4">Cool classics</option>
|
||||
<option value="5">Mixed berry blue</option>
|
||||
<option value="6">Grape soda</option>
|
||||
<option value="7">Aubergine</option>
|
||||
<option value="8">Colorblind clear</option>
|
||||
<option value="100">Vanilla nitro cola</option>
|
||||
<option value="101">Orange creamsicle</option>
|
||||
<option value="102">Shirley temple</option>
|
||||
<option value="103">Earth tones</option>
|
||||
<option value="104">Everglade green</option>
|
||||
<option value="105">Buttered toast</option>
|
||||
<option value="200">Dark mauve</option>
|
||||
<option value="300">Terminal</option>
|
||||
<option value="301">Terminal grayscale</option>
|
||||
</select>
|
||||
</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>
|
||||
</div>
|
||||
<div class="padding-input">
|
||||
<div class="option-select">
|
||||
<select id="dark-theme-select">
|
||||
<option selected value="0">Default</option>
|
||||
<option value="1">Neutral grey</option>
|
||||
<option value="3">Flagship Terrastruct</option>
|
||||
<option value="4">Cool classics</option>
|
||||
<option value="5">Mixed berry blue</option>
|
||||
<option value="6">Grape soda</option>
|
||||
<option value="7">Aubergine</option>
|
||||
<option value="8">Colorblind clear</option>
|
||||
<option value="100">Vanilla nitro cola</option>
|
||||
<option value="101">Orange creamsicle</option>
|
||||
<option value="102">Shirley temple</option>
|
||||
<option value="103">Earth tones</option>
|
||||
<option value="104">Everglade green</option>
|
||||
<option value="105">Buttered toast</option>
|
||||
<option value="200">Dark mauve</option>
|
||||
<option value="300">Terminal</option>
|
||||
<option value="301">Terminal grayscale</option>
|
||||
</select>
|
||||
</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>
|
||||
</div>
|
||||
<div class="option-select">
|
||||
<label class="input-label">
|
||||
<input type="number" id="padding" value="20" step="10" class="number-input" />
|
||||
Padding
|
||||
</label>
|
||||
</div>
|
||||
<div class="scale-input">
|
||||
<label class="input-label">
|
||||
<input type="number" id="scale" value="-1" step="1" class="number-input" />
|
||||
Scale
|
||||
<input type="number" id="pad-input" value="20" step="10" class="number-input" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option">
|
||||
<div class="option-toggle">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="scale-toggle" class="option-toggle-box" />
|
||||
<span>Scale</span>
|
||||
</label>
|
||||
</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>
|
||||
<button onclick="compile()">Compile</button>
|
||||
</div>
|
||||
<div id="output"></div>
|
||||
<script type="module">
|
||||
import { D2 } from "../dist/browser/index.js";
|
||||
const d2 = new D2();
|
||||
window.compile = async () => {
|
||||
const notNegative = (value) => {
|
||||
if (value < 0) {
|
||||
return null;
|
||||
} else return value;
|
||||
};
|
||||
const input = document.getElementById("input").value;
|
||||
const layout = document.querySelector('input[name="layout"]:checked').value;
|
||||
const sketch = document.getElementById("sketch").checked;
|
||||
const center = document.getElementById("center").checked;
|
||||
const themeSelector = document.getElementById("theme");
|
||||
const themeId = notNegative(
|
||||
Number(themeSelector.options[themeSelector.selectedIndex].value)
|
||||
);
|
||||
const darkThemeSelector = document.getElementById("dark-theme");
|
||||
const darkThemeId = notNegative(
|
||||
Number(darkThemeSelector.options[darkThemeSelector.selectedIndex].value)
|
||||
);
|
||||
const scale = notNegative(Number(document.getElementById("scale").value));
|
||||
const pad = Number(document.getElementById("padding").value);
|
||||
const forceAppendix = document.getElementById("appendix").checked;
|
||||
try {
|
||||
const result = await d2.compile(input, {
|
||||
layout,
|
||||
sketch,
|
||||
themeId,
|
||||
darkThemeId,
|
||||
scale,
|
||||
pad,
|
||||
center,
|
||||
forceAppendix,
|
||||
});
|
||||
const svg = await d2.render(result.diagram, {
|
||||
sketch,
|
||||
themeId,
|
||||
darkThemeId,
|
||||
scale,
|
||||
pad,
|
||||
center,
|
||||
forceAppendix,
|
||||
});
|
||||
document.getElementById("output").innerHTML = svg;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
document.getElementById("output").textContent = err.message;
|
||||
}
|
||||
};
|
||||
compile();
|
||||
</script>
|
||||
</body>
|
||||
<button onclick="compile()">Compile</button>
|
||||
</div>
|
||||
<div id="output"></div>
|
||||
<script type="module">
|
||||
import {D2} from "../dist/browser/index.js";
|
||||
const d2 = new D2();
|
||||
window.compile = async () => {
|
||||
const input = document.getElementById("input").value;
|
||||
const layout = document.getElementById("layout-toggle").checked ? document.querySelector('input[name="layout-select"]:checked').value : null
|
||||
const sketch = document.getElementById("sketch-toggle").checked ? document.querySelector('input[name="sketch-select"]:checked').value == "true" : null
|
||||
const center = document.getElementById("center-toggle").checked ? document.querySelector('input[name="center-select"]:checked').value == "true" : null
|
||||
const forceAppendix = document.getElementById("appendix-toggle").checked ? document.querySelector('input[name="appendix-select"]:checked').value == "true" : null
|
||||
const themeSelector = document.getElementById("theme-select")
|
||||
const themeId = document.getElementById("theme-toggle").checked ? Number(themeSelector.options[themeSelector.selectedIndex].value) : null
|
||||
const darkThemeSelector = document.getElementById("dark-theme-select")
|
||||
const darkThemeId = document.getElementById("dark-theme-toggle").checked ? Number(darkThemeSelector.options[darkThemeSelector.selectedIndex].value) : null
|
||||
const pad = document.getElementById("pad-toggle").checked ? Number(document.getElementById("pad-input").value) : null
|
||||
const scale = document.getElementById("scale-toggle").checked ? Number(document.getElementById("scale-input").value) : null
|
||||
try {
|
||||
const result = await d2.compile(input, {
|
||||
layout,
|
||||
sketch,
|
||||
themeId,
|
||||
darkThemeId,
|
||||
scale,
|
||||
pad,
|
||||
center,
|
||||
forceAppendix,
|
||||
});
|
||||
const svg = await d2.render(result.diagram, result.renderOpts);
|
||||
document.getElementById("output").innerHTML = svg;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
document.getElementById("output").textContent = err.message;
|
||||
}
|
||||
};
|
||||
compile();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,5 @@
|
|||
import { createWorker, loadFile } from "./platform.js";
|
||||
|
||||
const DEFAULT_OPTIONS = {
|
||||
layout: "dagre",
|
||||
sketch: false,
|
||||
};
|
||||
|
||||
export class D2 {
|
||||
constructor() {
|
||||
this.ready = this.init();
|
||||
|
|
@ -86,17 +81,15 @@ export class D2 {
|
|||
}
|
||||
|
||||
async compile(input, options = {}) {
|
||||
const opts = { ...DEFAULT_OPTIONS, ...options };
|
||||
const request =
|
||||
typeof input === "string"
|
||||
? { fs: { index: input }, options: opts }
|
||||
: { ...input, options: { ...opts, ...input.options } };
|
||||
? { fs: { index: input }, options }
|
||||
: { ...input, options: { ...options, ...input.options } };
|
||||
return this.sendMessage("compile", request);
|
||||
}
|
||||
|
||||
async render(diagram, options = {}) {
|
||||
const opts = { ...DEFAULT_OPTIONS, ...options };
|
||||
return this.sendMessage("render", { diagram, options: opts });
|
||||
return this.sendMessage("render", { diagram, options });
|
||||
}
|
||||
|
||||
async encode(script) {
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
export * from "./platform.node.js";
|
||||
export * from "./platform.node.js";
|
||||
Loading…
Reference in a new issue