@world-engines/blocks-editor 0.1.0

package/dist/workspace.js

@@ -0,0 +1,306 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import * as Blockly from "blockly";
+import { BlocklyWorkspace } from "react-blockly";
+import { BlocksEditorCtxContext, EMPTY_CTX, attachCtxToWorkspace } from "./blocks/ctx.js";
+import { BLOCK_TYPES, registerTriggerBlocks } from "./blocks/registry.js";
+import { buildToolbox, CATEGORY_IDS, categoryDisplayNameOf } from "./blocks/toolbox.js";
+import { registerPickerFieldsOnce } from "./fields/register.js";
+import { PickerHost } from "./react/PickerHost.js";
+import { applyLiquidGlassCss, liquidGlassDarkTheme } from "./themes/index.js";
+import { GRID_COLOUR } from "./themes/liquid-glass-dark.js";
+import { applyDragTolerance } from "./blockly-config.js";
+import { applyZhMessages } from "./i18n/messages-zh.js";
+import { parseTmwWorkspaceV3, TMW_CONDITION_BLOCK_TYPES } from "./adapters/trigger.js";
+import { isViewActionBlockType, registerViewBlocks } from "./view-to-block/index.js";
+applyZhMessages(Blockly);
+applyDragTolerance();
+const DEFAULT_MEDIA_BASE = "/blockly-media/";
+const EMPTY_WORKSPACE_JSON = '{"blocks":{"languageVersion":0,"blocks":[]}}';
+const TMW_CONDITION_MUTATOR = "tmw_v3_condition_items";
+let tmwConditionBlocksRegistered = false;
+const registerTmwConditionBlocks = () => {
+    if (tmwConditionBlocksRegistered)
+        return;
+    if (!Blockly.Extensions.isRegistered(TMW_CONDITION_MUTATOR)) {
+        Blockly.Extensions.registerMutator(TMW_CONDITION_MUTATOR, {
+            itemCount_: 2,
+            saveExtraState() { return { itemCount: this.itemCount_ }; },
+            loadExtraState(state) {
+                const count = typeof state.itemCount === "number" ? state.itemCount : 2;
+                this.itemCount_ = Math.max(1, Math.min(16, Math.floor(count)));
+                this.updateShape_();
+            },
+            updateShape_() {
+                let index = 0;
+                while (this.getInput(`ITEM${index}`) !== null)
+                    this.removeInput(`ITEM${index++}`);
+                for (let item = 0; item < this.itemCount_; item += 1) {
+                    this.appendValueInput(`ITEM${item}`).setCheck("Boolean").appendField(item === 0 ? "条件" : "以及");
+                }
+            }
+        });
+    }
+    Blockly.common.defineBlocksWithJsonArray([
+        {
+            type: TMW_CONDITION_BLOCK_TYPES.root,
+            message0: "条件节点 %1",
+            args0: [{ type: "field_input", name: "STABLE_ID", text: "condition.new" }],
+            message1: "时钟 %1 到期 %2 生效 %3 穿越 %4",
+            args1: [
+                { type: "field_dropdown", name: "DOMAIN", options: [["逻辑序", "logical_seq"], ["世界时间", "world_time"], ["演出序", "presentation_seq"], ["真实时间", "real_time"]] },
+                { type: "field_number", name: "DUE_VALUE", value: 0 },
+                { type: "field_number", name: "EFFECTIVE_VALUE", value: 0 },
+                { type: "field_dropdown", name: "CROSSING_POLICY", options: [["仅正向", "forward_only"], ["仅反向", "backward_only"], ["双向", "both_directions"]] },
+            ],
+            message2: "真实时钟 %1 挂起策略 %2",
+            args2: [
+                { type: "field_dropdown", name: "REAL_TIME_CLOCK", options: [["活跃游玩", "active_play"], ["会话单调钟", "monotonic_session"], ["墙上时间", "wall_clock"]] },
+                { type: "field_dropdown", name: "WALL_CLOCK_POLICY", options: [["仅活跃会话", "active_session_only"], ["挂起仍流逝", "elapse_while_suspended"], ["拒绝挂起", "reject"]] },
+            ],
+            message3: "满足 %1",
+            args3: [{ type: "input_value", name: "EXPRESSION", check: "Boolean" }],
+            colour: 174,
+            tooltip: "现行 TriggerDocumentV3 condition；时间坐标和表达式一起无损写回",
+        },
+        { type: TMW_CONDITION_BLOCK_TYPES.all, message0: "全部满足", output: "Boolean", colour: 118, mutator: TMW_CONDITION_MUTATOR },
+        { type: TMW_CONDITION_BLOCK_TYPES.any, message0: "任一满足", output: "Boolean", colour: 118, mutator: TMW_CONDITION_MUTATOR },
+        { type: TMW_CONDITION_BLOCK_TYPES.not, message0: "不满足 %1", args0: [{ type: "input_value", name: "VALUE", check: "Boolean" }], output: "Boolean", colour: 118 },
+        { type: TMW_CONDITION_BLOCK_TYPES.literal, message0: "常量 %1", args0: [{ type: "field_dropdown", name: "VALUE", options: [["真", "TRUE"], ["假", "FALSE"]] }], output: "Boolean", colour: 210 },
+        {
+            type: TMW_CONDITION_BLOCK_TYPES.eventField,
+            message0: "事件属性 %1 %2 JSON %3",
+            args0: [
+                { type: "field_input", name: "PATH", text: "timestamp" },
+                { type: "field_dropdown", name: "COMPARISON", options: [["=", "eq"], ["≠", "neq"], [">", "gt"], ["≥", "gte"], ["<", "lt"], ["≤", "lte"], ["包含", "contains"]] },
+                { type: "field_input", name: "VALUE_JSON", text: "0" },
+            ],
+            output: "Boolean",
+            colour: 210,
+            tooltip: "读取本次 committed event payload 的属性；timestamp 也是普通事件属性",
+        },
+        { type: TMW_CONDITION_BLOCK_TYPES.selectorExists, message0: "存在选择器 JSON %1", args0: [{ type: "field_input", name: "SELECTOR_JSON", text: "{\"op\":\"entity_kind\",\"entity_kind\":\"npc\"}" }], output: "Boolean", colour: 210 },
+        {
+            type: TMW_CONDITION_BLOCK_TYPES.naturalLanguage,
+            message0: "请 Judge 判断 %1",
+            args0: [{ type: "field_input", name: "TEXT", text: "自然语言条件" }],
+            message1: "叶子 ID %1 locale %2",
+            args1: [{ type: "field_input", name: "STABLE_ID", text: "nl.condition" }, { type: "field_input", name: "LOCALE", text: "zh-CN" }],
+            message2: "可选 anchor JSON %1",
+            args2: [{ type: "field_input", name: "ANCHOR_JSON", text: "" }],
+            output: "Boolean",
+            colour: 285,
+            tooltip: "现行 TMW3 nl_condition；运行时产生 unknown 并请求语义 Judge，不直接视为 true",
+        },
+    ]);
+    tmwConditionBlocksRegistered = true;
+};
+const TMW_CONDITION_TOOLBOX = {
+    kind: "categoryToolbox",
+    contents: [
+        { kind: "category", name: "条件节点", colour: "#16897b", contents: [{ kind: "block", type: TMW_CONDITION_BLOCK_TYPES.root }] },
+        { kind: "category", name: "逻辑", colour: "#59a83b", contents: [
+                { kind: "block", type: TMW_CONDITION_BLOCK_TYPES.all },
+                { kind: "block", type: TMW_CONDITION_BLOCK_TYPES.any },
+                { kind: "block", type: TMW_CONDITION_BLOCK_TYPES.not },
+            ] },
+        { kind: "category", name: "条件", colour: "#3373cc", contents: [
+                { kind: "block", type: TMW_CONDITION_BLOCK_TYPES.eventField },
+                { kind: "block", type: TMW_CONDITION_BLOCK_TYPES.selectorExists },
+                { kind: "block", type: TMW_CONDITION_BLOCK_TYPES.naturalLanguage },
+                { kind: "block", type: TMW_CONDITION_BLOCK_TYPES.literal },
+            ] },
+    ],
+};
+const parseWorkspaceJson = (raw, schema, authorizedViewBlockTypes) => {
+    const parsed = parseTmwWorkspaceV3(JSON.parse(raw));
+    if (schema === "trigger-definition") {
+        const roots = parsed.blocks?.blocks?.filter((block) => block.type === BLOCK_TYPES.triggerRoot) ?? [];
+        if (roots.length > 1)
+            throw new Error(`trigger_definition_workspace_multiple_roots:${roots.length}`);
+    }
+    const persistedViewBlockTypes = new Set();
+    const collectViewBlockTypes = (node) => {
+        if (node === undefined)
+            return;
+        if (isViewActionBlockType(node.type))
+            persistedViewBlockTypes.add(node.type);
+        for (const slot of Object.values(node.inputs ?? {}))
+            collectViewBlockTypes(slot.block);
+        collectViewBlockTypes(node.next?.block);
+    };
+    for (const root of parsed.blocks?.blocks ?? [])
+        collectViewBlockTypes(root);
+    const unauthorized = [...persistedViewBlockTypes]
+        .filter((type) => !authorizedViewBlockTypes.has(type));
+    if (unauthorized.length > 0) {
+        throw new Error(`tmw_workspace_view_capability_revoked:${unauthorized.sort().join(",")}`);
+    }
+    return { parsed, serialized: JSON.stringify(parsed) };
+};
+const disableUnauthorizedViewBlocks = (workspace, authorizedViewBlockTypes) => {
+    for (const block of workspace.getAllBlocks(false)) {
+        if (!isViewActionBlockType(block.type) || authorizedViewBlockTypes.has(block.type))
+            continue;
+        block.setDisabledReason(true, "unauthorized_view_action");
+        block.setWarningText("此视图操作不属于当前 manifest 版本，已禁用且不会编译执行。");
+    }
+};
+const SHELL_STYLE = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5rem",
+    height: "100%",
+    flex: 1,
+    minHeight: 0
+};
+const WORKSPACE_HOST_STYLE = { flex: 1, minHeight: "20rem" };
+const TriggerWorkspace = ({ schema, workspaceJson, ctx, onWorkspaceJsonChange, mediaBaseUrl, toolbox, authorizedViewBlockTypes, className, workspaceRefOut }) => {
+    // Registration must precede the child BlocklyWorkspace render, but it must not run
+    // as an import side effect because Rollup may evaluate this workspace module in
+    // multiple chunks that share Blockly's global block registry.
+    registerTriggerBlocks();
+    if (schema === "tmw-condition-v3")
+        registerTmwConditionBlocks();
+    registerPickerFieldsOnce();
+    const containerRef = useRef(null);
+    const onChangeRef = useRef(onWorkspaceJsonChange);
+    onChangeRef.current = onWorkspaceJsonChange;
+    const initialJsonRef = useRef(workspaceJson);
+    initialJsonRef.current = workspaceJson;
+    const lastEmittedRef = useRef("");
+    useEffect(() => {
+        const workspace = workspaceRefOut.current;
+        if (workspace === null || workspaceJson.length === 0)
+            return;
+        const current = JSON.stringify(Blockly.serialization.workspaces.save(workspace));
+        const target = parseWorkspaceJson(workspaceJson, schema, authorizedViewBlockTypes);
+        Blockly.Events.disable();
+        try {
+            if (current === target.serialized) {
+                disableUnauthorizedViewBlocks(workspace, authorizedViewBlockTypes);
+                return;
+            }
+            lastEmittedRef.current = target.serialized;
+            Blockly.serialization.workspaces.load(target.parsed, workspace);
+            disableUnauthorizedViewBlocks(workspace, authorizedViewBlockTypes);
+        }
+        finally {
+            Blockly.Events.enable();
+        }
+        if (target.serialized !== workspaceJson)
+            onChangeRef.current(target.serialized);
+    }, [authorizedViewBlockTypes, schema, workspaceJson, workspaceRefOut]);
+    useEffect(() => {
+        const workspace = workspaceRefOut.current;
+        if (workspace !== null) {
+            attachCtxToWorkspace(workspace, ctx);
+        }
+    }, [ctx, workspaceRefOut]);
+    useEffect(() => {
+        const host = containerRef.current;
+        if (host === null)
+            return;
+        return applyLiquidGlassCss(host);
+    }, []);
+    const workspaceConfiguration = useMemo(() => ({
+        theme: liquidGlassDarkTheme,
+        media: mediaBaseUrl,
+        renderer: "zelos",
+        grid: { spacing: 24, length: 2, snap: true, colour: GRID_COLOUR },
+        ...(schema === "trigger-definition" || schema === "tmw-condition-v3"
+            ? { maxInstances: { [schema === "tmw-condition-v3" ? TMW_CONDITION_BLOCK_TYPES.root : BLOCK_TYPES.triggerRoot]: 1 } }
+            : {}),
+        trashcan: false,
+        zoom: { controls: false, wheel: true, startScale: 0.9, maxScale: 1.5, minScale: 0.5 }
+    }), [mediaBaseUrl, schema]);
+    const handleWorkspaceChange = useCallback((workspace) => {
+        const workspaceJsonNext = Blockly.serialization.workspaces.save(workspace);
+        const serialized = JSON.stringify(workspaceJsonNext);
+        if (lastEmittedRef.current === serialized)
+            return;
+        lastEmittedRef.current = serialized;
+        onChangeRef.current(serialized);
+    }, []);
+    const handleInject = useCallback((workspace) => {
+        workspaceRefOut.current = workspace;
+        attachCtxToWorkspace(workspace, ctx);
+        const seed = initialJsonRef.current;
+        if (seed.length === 0)
+            return;
+        try {
+            const target = parseWorkspaceJson(seed, schema, authorizedViewBlockTypes);
+            const parsed = target.parsed;
+            lastEmittedRef.current = target.serialized;
+            Blockly.serialization.workspaces.load(parsed, workspace);
+            disableUnauthorizedViewBlocks(workspace, authorizedViewBlockTypes);
+            if (target.serialized !== seed)
+                onChangeRef.current(target.serialized);
+        }
+        catch (err) {
+            console.warn("blocks-editor: failed to load initial workspaceJson", err);
+        }
+    }, [authorizedViewBlockTypes, ctx, schema, workspaceRefOut]);
+    const handleDispose = useCallback(() => {
+        workspaceRefOut.current = null;
+    }, [workspaceRefOut]);
+    return (_jsx("div", { ref: containerRef, className: className, style: WORKSPACE_HOST_STYLE, children: _jsx(BlocklyWorkspace, { className: "blocks-editor__blockly-host", toolboxConfiguration: toolbox, workspaceConfiguration: workspaceConfiguration, onWorkspaceChange: handleWorkspaceChange, onInject: handleInject, onDispose: handleDispose }) }));
+};
+export const BlocksWorkspace = forwardRef(function BlocksWorkspace(props, ref) {
+    const { schema, workspaceJson, ctx, onWorkspaceJsonChange, className, mediaBaseUrl } = props;
+    if (schema !== "trigger" && schema !== "trigger-definition" && schema !== "tmw-condition-v3") {
+        throw new Error(`BlocksWorkspace schema=${schema} not supported yet`);
+    }
+    const resolvedMedia = mediaBaseUrl ?? DEFAULT_MEDIA_BASE;
+    const resolvedJson = workspaceJson.length === 0 ? EMPTY_WORKSPACE_JSON : workspaceJson;
+    const workspaceRef = useRef(null);
+    const triggerCtx = useMemo(() => {
+        const next = {
+            event_list: ctx.event_list,
+            entity_list: ctx.entity_list
+        };
+        if (ctx.edge_list !== undefined)
+            next.edge_list = ctx.edge_list;
+        if (ctx.variable_list !== undefined)
+            next.variable_list = ctx.variable_list;
+        if (ctx.sdk_catalog !== undefined)
+            next.sdk_catalog = ctx.sdk_catalog;
+        if (ctx.worldTime !== undefined)
+            next.worldTime = ctx.worldTime;
+        if (ctx.view_catalog !== undefined)
+            next.view_catalog = ctx.view_catalog;
+        return next;
+    }, [ctx]);
+    const viewBlockTypes = useMemo(() => schema === "trigger" && triggerCtx.view_catalog !== undefined
+        ? registerViewBlocks(triggerCtx.view_catalog)
+        : [], [schema, triggerCtx.view_catalog]);
+    const authorizedViewBlockTypes = useMemo(() => new Set(viewBlockTypes), [viewBlockTypes]);
+    const toolboxConfiguration = useMemo(() => schema === "tmw-condition-v3"
+        ? TMW_CONDITION_TOOLBOX
+        : JSON.parse(JSON.stringify(buildToolbox({ schema, viewBlockTypes }))), [schema, viewBlockTypes]);
+    useImperativeHandle(ref, () => ({
+        selectCategory(id) {
+            const ws = workspaceRef.current;
+            if (!ws)
+                return;
+            const toolbox = ws.getToolbox();
+            if (!toolbox)
+                return;
+            const displayName = categoryDisplayNameOf(id);
+            const items = toolbox.getToolboxItems?.() ?? [];
+            for (let i = 0; i < items.length; i++) {
+                const it = items[i];
+                const name = it.getName?.();
+                if (name === displayName) {
+                    toolbox.selectItemByPosition?.(i);
+                    return;
+                }
+            }
+        },
+        getWorkspace() {
+            return workspaceRef.current;
+        }
+    }), []);
+    return (_jsx(BlocksEditorCtxContext.Provider, { value: triggerCtx ?? EMPTY_CTX, children: _jsxs("div", { className: className, style: SHELL_STYLE, children: [_jsx(TriggerWorkspace, { schema: schema, workspaceJson: resolvedJson, ctx: triggerCtx, onWorkspaceJsonChange: onWorkspaceJsonChange, mediaBaseUrl: resolvedMedia, toolbox: toolboxConfiguration, authorizedViewBlockTypes: authorizedViewBlockTypes, workspaceRefOut: workspaceRef, ...(className ? { className } : {}) }), _jsx(PickerHost, {})] }) }));
+});
+export { CATEGORY_IDS };

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@world-engines/blocks-editor",
+  "private": false,
+  "version": "0.1.0",
+  "description": "面向浏览器与 Vite 的 Blockly 场景编辑器组件",
+  "license": "SEE LICENSE IN LICENSE",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "browser": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "public",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@world-engines/tmw": "0.1.0-alpha.0",
+    "@world-engines/protocol-ts": "0.1.0-alpha.0",
+    "@world-engines/view-exposure": "0.0.0",
+    "@blockly/field-multilineinput": "^6.0.9",
+    "@world-engines/monaco-host": "0.1.0",
+    "blockly": "^13.1.0",
+    "react-blockly": "^9.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "worldengine_source_sha256": "3d10b3aa183316e67c98fb03db2660a41e8d5e18906e04ea5c685b84cec8c633",
+  "worldengine_source_identity_provenance": {
+    "schema": "worldengine-public-namespace-projection/v1",
+    "kind": "composite-source-identity; namespace projection; not-full-source-recompile",
+    "original_name": "@chat/blocks-editor",
+    "original_archive_sha256": "78128a459e6d08da84115c261d8bfe775c5f3f763b2cddc3149c038e90bdc99b",
+    "original_source_sha256": "375e73a1788e6e4d8966c7342ea9e4e203cd777655d7ee714dcc6c95e0371356",
+    "projected_name": "@world-engines/blocks-editor",
+    "package_name_mapping": {
+      "@chat/blocks-editor": "@world-engines/blocks-editor",
+      "@chat/ladybug-bridge": "@world-engines/ladybug-bridge",
+      "@chat/monaco-host": "@world-engines/monaco-host",
+      "@chat/protocol-ts": "@world-engines/protocol-ts",
+      "@chat/scenario-author-source": "@world-engines/scenario-author-source",
+      "@chat/scenario-review-snapshot": "@world-engines/scenario-review-snapshot",
+      "@chat/tmw": "@world-engines/tmw",
+      "@chat/view-exposure": "@world-engines/view-exposure",
+      "@world-engines/chatplay-vite-plugin": "@world-engines/chatplay-vite-plugin",
+      "@worldengine/agent-kit": "@world-engines/agent-kit",
+      "@worldengine/authoring-bridge": "@world-engines/authoring-bridge",
+      "@worldengine/authoring-ui": "@world-engines/authoring-ui",
+      "@worldengine/create-project": "@world-engines/create-project",
+      "@worldengine/project-format": "@world-engines/project-format",
+      "@worldengine/project-host": "@world-engines/project-host",
+      "@worldengine/project-setup": "@world-engines/project-setup",
+      "@worldengine/spatial-authoring": "@world-engines/spatial-authoring",
+      "@worldengine/view-sdk": "@world-engines/view-sdk"
+    }
+  }
+}

package/public/blockly-media/delete-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="#041E49"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>

package/public/blockly-media/dropdown-arrow.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="12.71" height="8.79" viewBox="0 0 12.71 8.79"><title>dropdown-arrow</title><g opacity="0.1"><path d="M12.71,2.44A2.41,2.41,0,0,1,12,4.16L8.08,8.08a2.45,2.45,0,0,1-3.45,0L0.72,4.16A2.42,2.42,0,0,1,0,2.44,2.48,2.48,0,0,1,.71.71C1,0.47,1.43,0,6.36,0S11.75,0.46,12,.71A2.44,2.44,0,0,1,12.71,2.44Z" fill="#231f20"/></g><path d="M6.36,7.79a1.43,1.43,0,0,1-1-.42L1.42,3.45a1.44,1.44,0,0,1,0-2c0.56-.56,9.31-0.56,9.87,0a1.44,1.44,0,0,1,0,2L7.37,7.37A1.43,1.43,0,0,1,6.36,7.79Z" fill="#fff"/></svg>

package/public/blockly-media/foldout-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="#041E49"><path d="M480-360 280-560h400L480-360Z"/></svg>

package/public/blockly-media/resize-handle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="8" viewBox="0 0 8 8" width="8" fill="#041E49" stroke="#000">
+<g><line x1="2.67" y1="7" x2="7" y2="2.67"></line><line x1="5.33" y1="7" x2="7" y2="5.33"></line></g>
+</svg>

package/public/blockly-media/sprites.svg

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="96px" height="124px">
+  <style type="text/css">
+#background {
+  fill: none;
+}
+.arrows {
+  fill: #000;
+  stroke: none;
+}
+.selected>.arrows {
+  fill: #fff;
+}
+.checkmark {
+  fill: #000;
+  font-family: sans-serif;
+  font-size: 10pt;
+  text-anchor: middle;
+}
+.trash {
+  fill: #888;
+}
+.zoom {
+  fill: none;
+  stroke: #888;
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+.zoom>.center {
+  fill: #888;
+  stroke-width: 0;
+}
+  </style>
+  <rect id="background" width="96" height="124" x="0" y="0" />
+
+  <g>
+    <path class="arrows" d="M 13,1.5 13,14.5 1.74,8 z" />
+    <path class="arrows" d="M 17.5,3 30.5,3 24,14.26 z" />
+    <path class="arrows" d="M 35,1.5 35,14.5 46.26,8 z" />
+  </g>
+  <g class="selected" transform="translate(0, 16)">
+    <path class="arrows" d="M 13,1.5 13,14.5 1.74,8 z" />
+    <path class="arrows" d="M 17.5,3 30.5,3 24,14.26 z" />
+    <path class="arrows" d="M 35,1.5 35,14.5 46.26,8 z" />
+  </g>
+
+  <text class="checkmark" x="55.5" y="28">&#10003;</text>
+
+  <g class="trash">
+    <path d="M 2,41 v 6 h 42 v -6 h -10.5 l -3,-3 h -15 l -3,3 z" />
+    <rect width="36" height="20" x="5" y="50" />
+    <rect width="36" height="42" x="5" y="50" rx="4" ry="4" />
+  </g>
+
+  <g class="zoom">
+    <circle r="11.5" cx="16" cy="108" />
+    <circle r="4.3" cx="16" cy="108" class="center" />
+    <path d="m 28,108 h3" />
+    <path d="m 1,108 h3" />
+    <path d="m 16,120 v3" />
+    <path d="m 16,93 v3" />
+  </g>
+
+  <g class="zoom">
+    <circle r="15" cx="48" cy="108" />
+    <path d="m 48,101.6 v12.8" />
+    <path d="m 41.6,108 h12.8" />
+  </g>
+
+  <g class="zoom">
+    <circle r="15" cx="80" cy="108" />
+    <path d="m 73.6,108 h12.8" />
+  </g>
+</svg>