isokit: project layer, Studio GUI, MCP server, viewer, CLI, demo project and docs
This commit is contained in:
grabowski committed
1 parent
95c80ec6b1
commit
564aeb75f6
47 files changed
+5978
-366
No files matched your search
@@ -0,0 +1,76 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>isokit Studio</title>
|
||||
<script>
|
||||
(function(){var t=null;try{t=localStorage.getItem("isokit-theme")}catch(e){}
|
||||
if(t!=="light"&&t!=="dark")t=window.matchMedia&&matchMedia("(prefers-color-scheme: light)").matches?"light":"dark";
|
||||
document.documentElement.setAttribute("data-theme",t);})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="/assets/viewer/isokit-view.css">
|
||||
<link rel="stylesheet" href="/assets/theme.css">
|
||||
<link rel="stylesheet" href="/assets/studio/studio.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="st-head">
|
||||
<b class="st-logo">isokit <span>Studio</span></b>
|
||||
<span class="st-title" id="title"></span>
|
||||
<span class="st-grow"></span>
|
||||
<button type="button" id="undo" title="Undo (Ctrl+Z)" disabled>↶ Undo</button>
|
||||
<button type="button" id="redo" title="Redo (Ctrl+Y)" disabled>↷ Redo</button>
|
||||
<span class="st-save" id="save" title="Every change is saved to scene.json at once">Saved</span>
|
||||
<span class="st-sep"></span>
|
||||
<a class="st-btn" href="/view" target="_blank" rel="noopener" title="The scene as visitors see it (live)">Preview</a>
|
||||
<button type="button" id="build" title="Write the self-contained HTML page">Build page</button>
|
||||
<button type="button" id="theme" title="Light / dark">◐</button>
|
||||
<button type="button" id="help" title="Keys and tips">?</button>
|
||||
</header>
|
||||
<main class="st-main">
|
||||
<aside class="st-left">
|
||||
<section class="st-panel">
|
||||
<h2>Add <small>click, then click on the map</small></h2>
|
||||
<input type="search" id="psearch" placeholder="Search objects…" autocomplete="off">
|
||||
<div id="palette" class="st-palette"></div>
|
||||
</section>
|
||||
<section class="st-panel st-grow-panel">
|
||||
<h2>Objects <small id="ocount"></small></h2>
|
||||
<input type="search" id="osearch" placeholder="Filter…" autocomplete="off">
|
||||
<ul id="objects" class="st-objects"></ul>
|
||||
</section>
|
||||
</aside>
|
||||
<section class="st-centre">
|
||||
<div id="view" class="iso-fill"></div>
|
||||
<div class="st-hint" id="hint" hidden></div>
|
||||
<footer class="st-status">
|
||||
<span id="cursor">x – y –</span>
|
||||
<label title="Snap positions to a grid">Snap
|
||||
<select id="snap"><option value="0">off</option><option value="0.1">0.1 m</option><option value="0.5" selected>0.5 m</option><option value="1">1 m</option><option value="5">5 m</option></select>
|
||||
</label>
|
||||
<span class="st-grow"></span>
|
||||
<button type="button" id="warnbtn" class="st-link" hidden></button>
|
||||
<span id="stats"></span>
|
||||
</footer>
|
||||
</section>
|
||||
<aside class="st-right" id="right"></aside>
|
||||
</main>
|
||||
<div class="st-toast" id="toast" hidden></div>
|
||||
<dialog id="helpdlg" class="st-dialog">
|
||||
<h3>isokit Studio</h3>
|
||||
<table>
|
||||
<tr><th>Add</th><td>pick an object on the left, click on the map (Shift-click to place several)</td></tr>
|
||||
<tr><th>Select</th><td>click it on the map or in the list</td></tr>
|
||||
<tr><th>Move</th><td>drag it, or arrow keys (by the snap step)</td></tr>
|
||||
<tr><th>Turn</th><td>R / Shift+R, or the ⟲ ⟳ buttons</td></tr>
|
||||
<tr><th>Copy / delete</th><td>Ctrl+D / Delete</td></tr>
|
||||
<tr><th>Undo / redo</th><td>Ctrl+Z / Ctrl+Y</td></tr>
|
||||
<tr><th>View</th><td>drag the ground to pan, Ctrl + wheel or pinch to zoom, ↺ ↻ to rotate, levels to look inside</td></tr>
|
||||
<tr><th>Agents</th><td>connect an AI agent over MCP; its edits appear here live (see the panel when nothing is selected)</td></tr>
|
||||
</table>
|
||||
<form method="dialog"><button>Close</button></form>
|
||||
</dialog>
|
||||
<script src="/assets/viewer/isokit-view.js"></script>
|
||||
<script src="/assets/studio/studio.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,87 @@
|
||||
/* isokit Studio: layout and controls. Scene colours come from the theme. */
|
||||
:root { color-scheme: dark; --bg: #0a0f1a; --panel: #0f1626; --panel2: #131c30; --stroke: #2a3a56; --fg: #d6deeb; --mute: #8a97b0; --accent: #3ddc84; --danger: #ff6b6b; }
|
||||
html[data-theme=light] { color-scheme: light; --bg: #eef2f7; --panel: #ffffff; --panel2: #f5f7fb; --stroke: #cfd8e6; --fg: #1b2533; --mute: #5b6880; --accent: #0e8f4f; --danger: #c62828; }
|
||||
* { box-sizing: border-box; }
|
||||
html, body { height: 100%; margin: 0; }
|
||||
body { background: var(--bg); color: var(--fg); font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; display: flex; flex-direction: column; overflow: hidden; }
|
||||
button, select, input, textarea { font: inherit; color: inherit; }
|
||||
button, .st-btn { background: var(--panel); border: 1px solid var(--stroke); border-radius: 5px; padding: 4px 10px; cursor: pointer; text-decoration: none; color: var(--fg); white-space: nowrap; }
|
||||
button:hover:not(:disabled), .st-btn:hover { border-color: var(--accent); }
|
||||
button:disabled { opacity: .45; cursor: default; }
|
||||
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
||||
input, select, textarea { background: var(--panel2); border: 1px solid var(--stroke); border-radius: 4px; padding: 3px 6px; min-width: 0; }
|
||||
input[type=checkbox] { accent-color: var(--accent); }
|
||||
|
||||
.st-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--panel); border-bottom: 1px solid var(--stroke); flex: 0 0 auto; }
|
||||
.st-logo { font-size: 15px; letter-spacing: .02em; }
|
||||
.st-logo span { color: var(--accent); font-weight: 600; }
|
||||
.st-title { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.st-grow { flex: 1 1 auto; }
|
||||
.st-sep { width: 1px; height: 22px; background: var(--stroke); }
|
||||
.st-save { color: var(--mute); font-size: 12px; min-width: 64px; text-align: center; }
|
||||
.st-save.st-err { color: var(--danger); }
|
||||
|
||||
.st-main { flex: 1 1 auto; display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; min-height: 0; }
|
||||
.st-left, .st-right { background: var(--panel); border-right: 1px solid var(--stroke); overflow: auto; min-height: 0; }
|
||||
.st-left { display: flex; flex-direction: column; }
|
||||
.st-right { border-right: 0; border-left: 1px solid var(--stroke); padding: 10px; }
|
||||
.st-panel { padding: 8px 10px; border-bottom: 1px solid var(--stroke); }
|
||||
.st-grow-panel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 140px; }
|
||||
.st-panel h2, .st-right h2 { margin: 2px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); font-weight: 600; }
|
||||
.st-panel h2 small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
|
||||
.st-panel input[type=search] { width: 100%; margin-bottom: 6px; }
|
||||
.st-palette { display: flex; flex-direction: column; gap: 6px; }
|
||||
.st-cat { font-size: 11px; color: var(--mute); margin: 4px 0 2px; }
|
||||
.st-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
|
||||
.st-tile { display: flex; align-items: center; gap: 6px; text-align: left; padding: 4px 6px; overflow: hidden; }
|
||||
.st-tile i { font-style: normal; width: 18px; text-align: center; flex: 0 0 auto; }
|
||||
.st-tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.st-tile[aria-pressed=true] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--panel)); }
|
||||
.st-objects { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1 1 auto; }
|
||||
.st-objects li { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 4px; cursor: pointer; }
|
||||
.st-objects li:hover { background: var(--panel2); }
|
||||
.st-objects li[aria-selected=true] { background: color-mix(in srgb, var(--accent) 20%, var(--panel)); }
|
||||
.st-objects li i { font-style: normal; width: 18px; text-align: center; }
|
||||
.st-objects li span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.st-objects li small { color: var(--mute); }
|
||||
.st-objects li.st-hidden span { opacity: .5; text-decoration: line-through; }
|
||||
|
||||
.st-centre { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.st-centre > #view { flex: 1 1 auto; min-height: 0; }
|
||||
.st-centre.st-placing .iso-svg { cursor: crosshair; }
|
||||
.st-hint { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--accent); border-radius: 16px; padding: 4px 14px; z-index: 5; pointer-events: none; }
|
||||
.st-status { display: flex; align-items: center; gap: 14px; padding: 4px 10px; background: var(--panel); border-top: 1px solid var(--stroke); color: var(--mute); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
|
||||
.st-status select { padding: 1px 4px; }
|
||||
.st-link { background: none; border: 0; color: var(--danger); padding: 0; text-decoration: underline; }
|
||||
|
||||
.st-right h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 6px; }
|
||||
.st-right h3 i { font-style: normal; }
|
||||
.st-sub { color: var(--mute); font-size: 12px; margin: 2px 0 8px; }
|
||||
.st-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
|
||||
.st-actions button { padding: 3px 8px; }
|
||||
.st-actions .st-danger { color: var(--danger); }
|
||||
.st-form { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 5px 8px; align-items: center; margin-bottom: 12px; }
|
||||
.st-form > label { color: var(--mute); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.st-form textarea { resize: vertical; min-height: 44px; }
|
||||
.st-form .st-full { grid-column: 1 / -1; }
|
||||
.st-xy { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
|
||||
.st-xy input { width: 100%; }
|
||||
.st-num { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 6px; align-items: center; }
|
||||
.st-num input[type=number] { width: 100%; }
|
||||
.st-rot { display: flex; gap: 4px; align-items: center; }
|
||||
.st-levels { display: flex; flex-wrap: wrap; gap: 4px 10px; }
|
||||
.st-levels label { color: var(--fg); font-size: 12px; }
|
||||
.st-help { color: var(--mute); font-size: 12px; margin: -4px 0 10px; }
|
||||
.st-box { border: 1px dashed var(--stroke); border-radius: 6px; padding: 8px; margin: 10px 0; }
|
||||
.st-box code { display: block; background: var(--panel2); border-radius: 4px; padding: 4px 6px; margin: 4px 0; font-size: 11.5px; word-break: break-all; user-select: all; }
|
||||
.st-warn { color: var(--danger); font-size: 12px; margin: 4px 0; }
|
||||
.st-toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--accent); border-radius: 6px; padding: 6px 14px; z-index: 50; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
|
||||
.st-toast.st-bad { border-color: var(--danger); }
|
||||
.st-dialog { background: var(--panel); color: var(--fg); border: 1px solid var(--stroke); border-radius: 8px; max-width: 560px; }
|
||||
.st-dialog th { text-align: left; padding: 3px 12px 3px 0; color: var(--mute); font-weight: 500; vertical-align: top; }
|
||||
.st-dialog form { text-align: right; margin-top: 10px; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.st-main { grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 40vh; }
|
||||
.st-right { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--stroke); }
|
||||
}
|
||||
@@ -0,0 +1,360 @@
|
||||
/* isokit Studio: the scene editor (talks to `isokit studio` over /api). */
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var $ = function (id) { return document.getElementById(id); };
|
||||
var S = { meta: null, doc: null, version: null, sel: null, placing: null, view: null, boxes: {}, warnings: [], busy: false, canUndo: false, canRedo: false, port: location.port };
|
||||
var ICON_DEFAULT = "▪";
|
||||
|
||||
function esc(s) { return String(s === undefined || s === null ? "" : s).replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """); }
|
||||
function api(path, body) {
|
||||
var o = body === undefined ? { cache: "no-store" } : { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) };
|
||||
return fetch(path, o).then(function (r) { return r.json(); });
|
||||
}
|
||||
var toastT = 0;
|
||||
function toast(msg, bad) {
|
||||
var t = $("toast");
|
||||
t.textContent = msg; t.hidden = false; t.classList.toggle("st-bad", !!bad);
|
||||
clearTimeout(toastT); toastT = setTimeout(function () { t.hidden = true; }, bad ? 6000 : 2600);
|
||||
}
|
||||
function snapStep() { return parseFloat($("snap").value) || 0; }
|
||||
function snap(v) { var s = snapStep(); return s ? Math.round(v / s) * s : Math.round(v * 100) / 100; }
|
||||
function prefab(kind) { return (S.meta.catalog || []).filter(function (m) { return m.type === kind; })[0]; }
|
||||
function obj(id) { return (S.doc.objects || []).filter(function (o) { return o.id === id; })[0]; }
|
||||
function label(o) { var m = prefab(o.type); return o.name || (m ? m.label : o.type); }
|
||||
function icon(kind) { var m = prefab(kind); return (m && m.icon) || ICON_DEFAULT; }
|
||||
|
||||
// ------------------------------------------------------------ server state
|
||||
function takeState(r) {
|
||||
if (r.doc) S.doc = r.doc;
|
||||
if (r.version !== undefined) S.version = r.version;
|
||||
if (r.can_undo !== undefined) { S.canUndo = r.can_undo; S.canRedo = r.can_redo; }
|
||||
$("undo").disabled = !S.canUndo; $("redo").disabled = !S.canRedo;
|
||||
}
|
||||
function op(o, quiet) {
|
||||
$("save").textContent = "Saving…"; $("save").classList.remove("st-err");
|
||||
return api("/api/op", o).then(function (r) {
|
||||
if (r.error) {
|
||||
$("save").textContent = "Not saved"; $("save").classList.add("st-err");
|
||||
toast(r.error, true);
|
||||
return null;
|
||||
}
|
||||
takeState(r);
|
||||
$("save").textContent = "Saved";
|
||||
if (r.id && o.op !== "update") S.sel = r.id;
|
||||
if (S.sel && !obj(S.sel)) S.sel = null;
|
||||
S.view.refresh();
|
||||
renderLists(); if (!quiet) renderRight();
|
||||
return r;
|
||||
}, function (e) { $("save").textContent = "Offline"; $("save").classList.add("st-err"); toast("Studio server not reachable: " + e, true); });
|
||||
}
|
||||
function update(id, patch, quiet) { return op({ op: "update", id: id, patch: patch }, quiet); }
|
||||
function undo() { api("/api/undo", {}).then(function (r) { takeState(r); afterExternal(); }); }
|
||||
function redo() { api("/api/redo", {}).then(function (r) { takeState(r); afterExternal(); }); }
|
||||
function afterExternal() {
|
||||
if (S.sel && !obj(S.sel)) S.sel = null;
|
||||
S.view.refresh(); renderLists(); renderRight();
|
||||
}
|
||||
function reloadAll(why) {
|
||||
return Promise.all([api("/api/meta"), api("/api/doc")]).then(function (rs) {
|
||||
var levelsChanged = JSON.stringify(rs[0].levels) !== JSON.stringify(S.meta.levels);
|
||||
S.meta = rs[0]; takeState(rs[1]);
|
||||
if (levelsChanged) { remount(); } else { S.view.source.meta = S.meta; S.view.refresh(); }
|
||||
renderPalette(); afterExternal();
|
||||
if (why) toast(why);
|
||||
});
|
||||
}
|
||||
// another editor or an agent changed the files: follow along
|
||||
function poll() {
|
||||
api("/api/version").then(function (r) {
|
||||
if (r.version !== S.version && !S.busy) { S.version = r.version; reloadAll("Scene updated outside the Studio (agent or file edit)"); }
|
||||
}).catch(function () { /* server restarting */ }).then(function () { setTimeout(poll, 800); });
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------ view
|
||||
var drag = null;
|
||||
function moveEls(id) { return S.view.svg.querySelectorAll('[data-obj="' + id.replace(/"/g, "") + '"]'); }
|
||||
function mountView() {
|
||||
var src = IsoKit.httpSource("", toViewerMeta(S.meta));
|
||||
S.view = IsoKit.mount($("view"), src, {
|
||||
note: false, noSelect: true, wheelZoom: true,
|
||||
onRender: function (d) {
|
||||
if (!d || d.error) { $("stats").textContent = "script error"; return; }
|
||||
S.boxes = d.boxes || {}; S.warnings = d.warnings || [];
|
||||
$("stats").textContent = d.sprites + " sprites · " + d.nodes + " nodes · " + d.ms + " ms";
|
||||
var w = $("warnbtn"); w.hidden = !S.warnings.length; w.textContent = S.warnings.length + " warning" + (S.warnings.length === 1 ? "" : "s");
|
||||
if (S.sel) S.view.selectObj(S.sel);
|
||||
},
|
||||
onHover: function (w) { if (w) $("cursor").textContent = "x " + w[0].toFixed(1) + " y " + w[1].toFixed(1); },
|
||||
onPick: function (i) { select(i && i.obj ? i.obj : null); },
|
||||
onKey: keyHandler,
|
||||
interact: {
|
||||
down: function (e, hit) {
|
||||
if (S.placing) { return true; }
|
||||
if (!hit.obj) return false;
|
||||
var o = obj(hit.obj);
|
||||
if (!o || o.locked) return false;
|
||||
drag = { id: o.id, ox: o.x, oy: o.y, w0: hit.world, moved: false, els: null };
|
||||
return true;
|
||||
},
|
||||
move: function (e, m) {
|
||||
if (S.placing || !drag || !m.world || !drag.w0) return;
|
||||
if (!drag.moved) { drag.moved = true; drag.els = moveEls(drag.id); select(drag.id, true); }
|
||||
var dx = snap(drag.ox + m.world[0] - drag.w0[0]) - drag.ox, dy = snap(drag.oy + m.world[1] - drag.w0[1]) - drag.oy;
|
||||
var a = S.view.screenOf(dx, dy, 0), b = S.view.screenOf(0, 0, 0);
|
||||
drag.dx = dx; drag.dy = dy;
|
||||
Array.prototype.forEach.call(drag.els, function (g) { g.setAttribute("transform", "translate(" + (a[0] - b[0]).toFixed(1) + " " + (a[1] - b[1]).toFixed(1) + ")"); g.classList.add("iso-moving"); });
|
||||
$("cursor").textContent = "x " + (drag.ox + dx).toFixed(2) + " y " + (drag.oy + dy).toFixed(2);
|
||||
},
|
||||
up: function (e, m) {
|
||||
if (S.placing) {
|
||||
if (!m.cancel && m.world) place(S.placing, m.world, e.shiftKey);
|
||||
return;
|
||||
}
|
||||
var d = drag; drag = null;
|
||||
if (!d) return;
|
||||
if (!d.moved || m.cancel) { select(d.id); return; }
|
||||
if (d.dx || d.dy) update(d.id, { x: +(d.ox + d.dx).toFixed(3), y: +(d.oy + d.dy).toFixed(3) });
|
||||
else S.view.refresh();
|
||||
},
|
||||
cancel: function () { if (drag && drag.els) S.view.refresh(); drag = null; }
|
||||
}
|
||||
});
|
||||
window.__studio = { S: S, view: S.view, op: op, select: select };
|
||||
}
|
||||
function toViewerMeta(m) { return { title: m.title, note: m.note, levels: m.levels, defaultLevel: m.default_level, defaultRotation: m.default_rotation }; }
|
||||
function remount() {
|
||||
var lv = S.view ? S.view.getLevel() : null, rot = S.view ? S.view.getRotation() : null;
|
||||
if (S.view) S.view.destroy();
|
||||
mountView();
|
||||
if (lv) S.view.setLevel(lv);
|
||||
if (rot !== null) S.view.setRotation(rot);
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------ actions
|
||||
function place(kind, w, keep) {
|
||||
var m = prefab(kind);
|
||||
op({ op: "add", type: kind, x: snap(w[0]), y: snap(w[1]) }).then(function (r) {
|
||||
if (r) toast((m ? m.label : kind) + " added" + (keep ? "" : " · Shift-click to place several"));
|
||||
});
|
||||
if (!keep) setPlacing(null);
|
||||
}
|
||||
function setPlacing(kind) {
|
||||
S.placing = kind;
|
||||
document.querySelector(".st-centre").classList.toggle("st-placing", !!kind);
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".st-tile"), function (b) { b.setAttribute("aria-pressed", String(b.getAttribute("data-type") === kind)); });
|
||||
var h = $("hint");
|
||||
if (kind) { var m = prefab(kind); h.textContent = "Click on the map to place: " + (m ? m.label : kind) + " · Esc to stop"; h.hidden = false; }
|
||||
else h.hidden = true;
|
||||
}
|
||||
function select(id, quiet) {
|
||||
if (id && !obj(id)) id = null;
|
||||
S.sel = id;
|
||||
S.view.selectObj(id);
|
||||
Array.prototype.forEach.call(document.querySelectorAll("#objects li"), function (li) { li.setAttribute("aria-selected", String(li.getAttribute("data-id") === id)); });
|
||||
if (!quiet) renderRight();
|
||||
}
|
||||
function remove(id) { if (id) op({ op: "remove", id: id }).then(function (r) { if (r) toast("Deleted · Ctrl+Z brings it back"); }); }
|
||||
function duplicate(id) { if (id) op({ op: "duplicate", id: id, dx: Math.max(snapStep(), 1) * 2, dy: Math.max(snapStep(), 1) * 2 }); }
|
||||
function turn(id, d) { var o = obj(id); if (o) update(id, { rot: ((o.rot || 0) + d + 360) % 360 }); }
|
||||
function nudge(id, dx, dy) {
|
||||
var o = obj(id); if (!o || o.locked) return;
|
||||
var s = snapStep() || 0.5;
|
||||
// arrow keys follow the screen: map screen directions onto world axes for the current rotation
|
||||
var rot = S.view.getRotation();
|
||||
var right = IsoKit.unproject(rot, 1, 0, 0), up = IsoKit.unproject(rot, 0, -1, 0), o0 = IsoKit.unproject(rot, 0, 0, 0);
|
||||
var r = [right[0] - o0[0], right[1] - o0[1]], u = [up[0] - o0[0], up[1] - o0[1]];
|
||||
var wx = dx * r[0] + dy * u[0], wy = dx * r[1] + dy * u[1];
|
||||
// pick the dominant world axis so a key press moves along x or y only
|
||||
if (Math.abs(wx) >= Math.abs(wy)) { wy = 0; wx = Math.sign(wx); } else { wx = 0; wy = Math.sign(wy); }
|
||||
update(id, { x: +(o.x + wx * s).toFixed(3), y: +(o.y + wy * s).toFixed(3) }, true).then(function () { renderRight(); });
|
||||
}
|
||||
function keyHandler(e) {
|
||||
var t = e.target, typing = t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT");
|
||||
if (typing) return false;
|
||||
var k = e.key, ctrl = e.ctrlKey || e.metaKey;
|
||||
if (ctrl && (k === "z" || k === "Z")) { if (e.shiftKey) redo(); else undo(); return true; }
|
||||
if (ctrl && (k === "y" || k === "Y")) { redo(); return true; }
|
||||
if (k === "Escape") { if (S.placing) setPlacing(null); else select(null); return true; }
|
||||
if (!S.sel) return false;
|
||||
if (k === "Delete" || k === "Backspace") { remove(S.sel); return true; }
|
||||
if (ctrl && (k === "d" || k === "D")) { duplicate(S.sel); return true; }
|
||||
if (!ctrl && (k === "r" || k === "R")) { turn(S.sel, e.shiftKey ? -90 : 90); return true; }
|
||||
if (k === "ArrowLeft") { nudge(S.sel, -1, 0); return true; }
|
||||
if (k === "ArrowRight") { nudge(S.sel, 1, 0); return true; }
|
||||
if (k === "ArrowUp") { nudge(S.sel, 0, 1); return true; }
|
||||
if (k === "ArrowDown") { nudge(S.sel, 0, -1); return true; }
|
||||
return false;
|
||||
}
|
||||
document.addEventListener("keydown", function (e) {
|
||||
if (S.view && e.target === S.view.svg) return; // the viewer calls keyHandler itself
|
||||
if (keyHandler(e)) e.preventDefault();
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------ left panel
|
||||
function renderPalette() {
|
||||
var q = $("psearch").value.trim().toLowerCase(), cats = {}, order = [];
|
||||
(S.meta.catalog || []).forEach(function (m) {
|
||||
if (q && (m.label + " " + m.type + " " + m.category + " " + (m.help || "")).toLowerCase().indexOf(q) < 0) return;
|
||||
if (!cats[m.category]) { cats[m.category] = []; order.push(m.category); }
|
||||
cats[m.category].push(m);
|
||||
});
|
||||
$("palette").innerHTML = order.map(function (c) {
|
||||
return '<div><div class="st-cat">' + esc(c) + '</div><div class="st-tiles">' + cats[c].map(function (m) {
|
||||
return '<button type="button" class="st-tile" data-type="' + esc(m.type) + '" title="' + esc(m.help || m.label) + '" aria-pressed="' + (S.placing === m.type) + '"><i>' + esc(m.icon || ICON_DEFAULT) + "</i><span>" + esc(m.label) + "</span></button>";
|
||||
}).join("") + "</div></div>";
|
||||
}).join("") || '<div class="st-help">No object matches.</div>';
|
||||
}
|
||||
function renderLists() {
|
||||
var q = $("osearch").value.trim().toLowerCase(), list = S.doc.objects || [];
|
||||
$("ocount").textContent = list.length;
|
||||
$("objects").innerHTML = list.filter(function (o) {
|
||||
return !q || (o.id + " " + label(o) + " " + o.type).toLowerCase().indexOf(q) >= 0;
|
||||
}).slice().reverse().map(function (o) {
|
||||
return '<li data-id="' + esc(o.id) + '" aria-selected="' + (o.id === S.sel) + '"' + (o.hidden ? ' class="st-hidden"' : "") + ' title="' + esc(o.id) + '"><i>' + esc(icon(o.type)) + "</i><span>" + esc(label(o)) + "</span><small>" + (o.locked ? "🔒" : "") + "</small></li>";
|
||||
}).join("");
|
||||
}
|
||||
$("palette").addEventListener("click", function (e) {
|
||||
var b = e.target.closest(".st-tile"); if (!b) return;
|
||||
var k = b.getAttribute("data-type");
|
||||
setPlacing(S.placing === k ? null : k);
|
||||
S.view.svg.focus();
|
||||
});
|
||||
$("psearch").addEventListener("input", renderPalette);
|
||||
$("osearch").addEventListener("input", renderLists);
|
||||
$("objects").addEventListener("click", function (e) { var li = e.target.closest("li"); if (li) select(li.getAttribute("data-id")); });
|
||||
$("objects").addEventListener("dblclick", function (e) { var li = e.target.closest("li"); if (li) S.view.focus(li.getAttribute("data-id"), 3); });
|
||||
|
||||
// ------------------------------------------------------------ right panel
|
||||
function field(key, lab, html, full) { return '<label for="f-' + key + '">' + esc(lab) + "</label>" + (full ? '<div class="st-full">' + html + "</div>" : html); }
|
||||
function propInput(d, v) {
|
||||
var id = "p-" + d.key, val = v === undefined ? d.default : v;
|
||||
if (d.type === "bool") return '<input type="checkbox" id="' + id + '" data-prop="' + esc(d.key) + '"' + (val ? " checked" : "") + ">";
|
||||
if (d.type === "choice" || (d.type === "material" && d.choices && d.choices.length)) {
|
||||
var ch = (d.choices || []).slice(); if (val !== undefined && ch.indexOf(val) < 0) ch.unshift(val);
|
||||
return '<select id="' + id + '" data-prop="' + esc(d.key) + '">' + ch.map(function (c) { return "<option" + (c === val ? " selected" : "") + ">" + esc(c) + "</option>"; }).join("") + "</select>";
|
||||
}
|
||||
if (d.type === "material") return '<input id="' + id + '" data-prop="' + esc(d.key) + '" list="materials" value="' + esc(val) + '">';
|
||||
if (d.type === "float" || d.type === "int") {
|
||||
var step = d.step || (d.type === "int" ? 1 : 0.1), mm = (d.min !== undefined ? ' min="' + d.min + '"' : "") + (d.max !== undefined ? ' max="' + d.max + '"' : "");
|
||||
var range = d.min !== undefined && d.max !== undefined ? '<input type="range" data-prop="' + esc(d.key) + '" data-range="1"' + mm + ' step="' + step + '" value="' + esc(val) + '">' : "<span></span>";
|
||||
return '<div class="st-num">' + range + '<input type="number" id="' + id + '" data-prop="' + esc(d.key) + '"' + mm + ' step="' + step + '" value="' + esc(val) + '"></div>';
|
||||
}
|
||||
return '<input id="' + id + '" data-prop="' + esc(d.key) + '" value="' + esc(val) + '">';
|
||||
}
|
||||
function renderRight() {
|
||||
var R = $("right"), o = S.sel ? obj(S.sel) : null;
|
||||
if (!o) { renderProject(R); return; }
|
||||
var m = prefab(o.type) || { label: o.type, props: [] }, p = o.props || {};
|
||||
var levels = S.meta.levels || [];
|
||||
var h = "<h3><i>" + esc(m.icon || ICON_DEFAULT) + "</i>" + esc(label(o)) + "</h3>" +
|
||||
'<div class="st-sub">' + esc(m.label) + " · id " + esc(o.id) + "</div>" +
|
||||
(m.help ? '<p class="st-help">' + esc(m.help) + "</p>" : "") +
|
||||
'<div class="st-actions">' +
|
||||
'<button type="button" data-act="dup" title="Ctrl+D">Duplicate</button>' +
|
||||
'<button type="button" data-act="focus" title="Zoom to it">Zoom to</button>' +
|
||||
'<button type="button" data-act="front" title="Draw after the others (ground items)">To front</button>' +
|
||||
'<button type="button" data-act="back" title="Draw before the others (ground items)">To back</button>' +
|
||||
'<button type="button" data-act="lock">' + (o.locked ? "Unlock" : "Lock") + "</button>" +
|
||||
'<button type="button" data-act="hide">' + (o.hidden ? "Show" : "Hide") + "</button>" +
|
||||
'<button type="button" data-act="del" class="st-danger" title="Delete">Delete</button></div>' +
|
||||
S.warnings.filter(function (w) { return w.indexOf("object " + o.id + ":") === 0; }).map(function (w) { return '<div class="st-warn">' + esc(w) + "</div>"; }).join("") +
|
||||
'<h2>Placement</h2><div class="st-form">' +
|
||||
field("xy", "Position x y z", '<div class="st-xy"><input type="number" step="any" data-f="x" value="' + o.x + '" title="x (east), m"><input type="number" step="any" data-f="y" value="' + o.y + '" title="y (north), m"><input type="number" step="any" data-f="z" value="' + (o.z || 0) + '" title="z (height), m"></div>') +
|
||||
field("rot", "Rotation", '<div class="st-rot"><button type="button" data-act="rotl" title="Shift+R">⟲</button><b>' + (o.rot || 0) + '°</b><button type="button" data-act="rotr" title="R">⟳</button></div>') +
|
||||
"</div>" +
|
||||
(m.props.length ? "<h2>Properties</h2><div class=\"st-form\">" + m.props.map(function (d) { return field(d.key, d.label || d.key, propInput(d, p[d.key])); }).join("") + "</div>" : "") +
|
||||
'<h2>Label and tooltip</h2><div class="st-form">' +
|
||||
field("name", "Name", '<input data-f="name" value="' + esc(o.name || "") + '" placeholder="' + esc(m.label) + '">') +
|
||||
field("tag", "Tag", '<input data-f="tag" value="' + esc(o.tag || "") + '" placeholder="label on the map">') +
|
||||
field("info", "Tooltip", '<textarea data-f="info" rows="2" placeholder="shown on hover / tap">' + esc(o.info || "") + "</textarea>") +
|
||||
"</div>" +
|
||||
(levels.length > 1 ? '<h2>Shown on levels</h2><div class="st-levels">' + levels.map(function (l) {
|
||||
return '<label><input type="checkbox" data-level="' + esc(l.id) + '"' + ((o.levels || []).indexOf(l.id) >= 0 ? " checked" : "") + "> " + esc(l.label || l.id) + "</label>";
|
||||
}).join("") + '</div><p class="st-help">None ticked: shown on every level.</p>' : "") +
|
||||
'<datalist id="materials">' + (S.meta.materials || []).map(function (x) { return "<option>" + esc(x) + "</option>"; }).join("") + "</datalist>";
|
||||
R.innerHTML = h;
|
||||
}
|
||||
function renderProject(R) {
|
||||
var m = S.meta, cfg = S.doc.cfg || {};
|
||||
var base = location.origin;
|
||||
R.innerHTML = "<h3>" + esc(m.title) + "</h3>" + '<div class="st-sub">' + (S.doc.objects || []).length + " objects · " + (m.catalog || []).length + " object types</div>" +
|
||||
(m.params && m.params.length ? "<h2>Scene options</h2><div class=\"st-form\">" + m.params.map(function (p) {
|
||||
var v = cfg[p.name] !== undefined ? cfg[p.name] : p.default;
|
||||
return field(p.name, p.label || p.name, propInput({ key: p.name, type: p.type, default: p.default, choices: p.choices, min: p.min, max: p.max, step: p.step }, v).replace(/data-prop=/g, "data-cfg="));
|
||||
}).join("") + "</div>" : "") +
|
||||
(S.warnings.length ? "<h2>Warnings</h2>" + S.warnings.map(function (w) { return '<div class="st-warn">' + esc(w) + "</div>"; }).join("") : "") +
|
||||
'<div class="st-box"><h2>Connect an AI agent (MCP)</h2>' +
|
||||
'<p class="st-help">Agents edit this scene with the same operations as the Studio; their changes appear here live.</p>' +
|
||||
"HTTP (while the Studio runs):<code>" + esc(base) + "/mcp</code>" +
|
||||
"stdio (any time):<code>isokit mcp " + esc(m.dir || ".") + "</code></div>" +
|
||||
'<p class="st-help">Select an object to edit it, or pick one on the left to add it.</p>';
|
||||
}
|
||||
$("right").addEventListener("click", function (e) {
|
||||
var b = e.target.closest("button[data-act]"); if (!b || !S.sel) return;
|
||||
var a = b.getAttribute("data-act"), o = obj(S.sel);
|
||||
if (a === "del") remove(S.sel);
|
||||
else if (a === "dup") duplicate(S.sel);
|
||||
else if (a === "focus") S.view.focus(S.sel, 3);
|
||||
else if (a === "front" || a === "back") op({ op: "reorder", id: S.sel, to: a });
|
||||
else if (a === "lock") update(S.sel, { locked: !o.locked });
|
||||
else if (a === "hide") update(S.sel, { hidden: !o.hidden });
|
||||
else if (a === "rotl") turn(S.sel, -90);
|
||||
else if (a === "rotr") turn(S.sel, 90);
|
||||
});
|
||||
var rangeT = 0;
|
||||
function formChange(e, live) {
|
||||
var t = e.target, o = S.sel ? obj(S.sel) : null;
|
||||
if (t.hasAttribute("data-cfg")) {
|
||||
var k = t.getAttribute("data-cfg"), v = t.type === "checkbox" ? t.checked : t.type === "number" || t.type === "range" ? parseFloat(t.value) : t.value, vals = {};
|
||||
vals[k] = v; op({ op: "set_cfg", values: vals }, true);
|
||||
return;
|
||||
}
|
||||
if (!o) return;
|
||||
if (t.hasAttribute("data-f")) {
|
||||
var f = t.getAttribute("data-f"), val = t.type === "number" ? parseFloat(t.value) : t.value, patch = {};
|
||||
if (t.type === "number" && !isFinite(val)) return;
|
||||
patch[f] = val; update(o.id, patch, live);
|
||||
} else if (t.hasAttribute("data-prop")) {
|
||||
var key = t.getAttribute("data-prop"), d = (prefab(o.type) || { props: [] }).props.filter(function (x) { return x.key === key; })[0] || {};
|
||||
var pv = t.type === "checkbox" ? t.checked : (d.type === "float" || d.type === "int") ? parseFloat(t.value) : t.value;
|
||||
if ((d.type === "float" || d.type === "int") && !isFinite(pv)) return;
|
||||
if (d.type === "int") pv = Math.round(pv);
|
||||
// keep the slider and the number box in step
|
||||
Array.prototype.forEach.call(document.querySelectorAll('#right [data-prop="' + key + '"]'), function (x) { if (x !== t && x.type !== "checkbox") x.value = pv; });
|
||||
var pp = {}; pp[key] = pv;
|
||||
if (live) { clearTimeout(rangeT); rangeT = setTimeout(function () { update(o.id, { props: pp }, true); }, 160); }
|
||||
else update(o.id, { props: pp }, true);
|
||||
} else if (t.hasAttribute("data-level")) {
|
||||
var lv = Array.prototype.filter.call(document.querySelectorAll("#right [data-level]"), function (x) { return x.checked; }).map(function (x) { return x.getAttribute("data-level"); });
|
||||
update(o.id, { levels: lv });
|
||||
}
|
||||
}
|
||||
$("right").addEventListener("change", function (e) { formChange(e, false); });
|
||||
$("right").addEventListener("input", function (e) { if (e.target.type === "range") formChange(e, true); });
|
||||
$("right").addEventListener("keydown", function (e) { if (e.key === "Enter" && e.target.tagName === "INPUT") e.target.blur(); });
|
||||
|
||||
// ------------------------------------------------------------ header
|
||||
$("undo").addEventListener("click", undo);
|
||||
$("redo").addEventListener("click", redo);
|
||||
$("help").addEventListener("click", function () { $("helpdlg").showModal(); });
|
||||
$("theme").addEventListener("click", function () {
|
||||
var t = document.documentElement.getAttribute("data-theme") === "light" ? "dark" : "light";
|
||||
document.documentElement.setAttribute("data-theme", t);
|
||||
try { localStorage.setItem("isokit-theme", t); } catch (e) { /* private mode */ }
|
||||
});
|
||||
$("build").addEventListener("click", function () {
|
||||
api("/api/build", {}).then(function (r) { if (r.error) toast(r.error, true); else toast("Page written: " + r.path); });
|
||||
});
|
||||
$("warnbtn").addEventListener("click", function () { select(null); });
|
||||
|
||||
// ------------------------------------------------------------ start
|
||||
Promise.all([api("/api/meta"), api("/api/doc")]).then(function (rs) {
|
||||
S.meta = rs[0]; takeState(rs[1]);
|
||||
document.title = S.meta.title + " · isokit Studio";
|
||||
$("title").textContent = S.meta.title;
|
||||
if (S.meta.load_error) toast(S.meta.load_error, true);
|
||||
renderPalette(); renderLists(); mountView(); renderRight();
|
||||
poll();
|
||||
});
|
||||
})();
|
||||
Reference in new issue
Block a user