html`
<div id="workspace">
<div id="toolbar" class="tabs is-boxed" style="height: ${
Global.ToolBarHeight
}px">
<ul>
<li class="tab_item is-active">
<a id="toolbar_blockly" >
<span class="is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>图形编辑器</span>
</a>
</li>
<li class="tab_item">
<a id="toolbar_codemirror" >
<span class="is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Javascript</span>
</a>
</li>
<li class="tab_item">
<a>
<span class="is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>保存代码</span>
</a>
</li>
<li class="tab_item">
<a>
<span class="is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>还原代码</span>
</a>
</li>
</ul>
</div>
<div class="columns" style="height: ${Global.Height}px;">
<!-- Editor -->
<div id="blockly-edit-area" class="column is-half">
<div id="blockly_editor" class="max-width" style="height: ${
Global.Height
}px;">
</div>
<div id="codemirror_editor" style="display: none;">${createCodeMirrorWidget(
{
width: width / 2,
height: Global.Height,
oninput: (inst, obj) => {
execution(window.editor.getValue());
}
}
)}
</div>
</div>
<!-- Execution -->
<div id="execution-area">
<canvas id="canvas" width="${width / 2}px" height="${
Global.Height
}px"></canvas>
</div>
</div>
</div>
`
html`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
