Skip to content

Meta Resource Configuration

This guide describes JSON files under public/webtopo/meta/, field meanings, and how to wire them into the editor. See GitHub repo examples/public/webtopo/meta/ and examples/public/webtopo/manifest.json for samples.

On startup, the editor loads four resource types:

File UI location Purpose
graphics.json More graphics (left sidebar) Optional graphic groups for the Stencil
decorate.json Decorations panel Decoration image groups
background.json Choose background dialog Static background list
templates.json Screen templates drawer Preset screen JSON templates

The editor does not ship industry graphic/decoration packs — configure and deploy assets in your host project.

1. Integration

1.1 Option A: manifest URL (static hosting)

Deploy webtopo/manifest.json and webtopo/meta/*.json, then pass the manifest path:

<Webtopo resourceManifest="./webtopo/manifest.json" />

The editor fetches the manifest first, then each JSON path in resources (relative to the manifest directory).

1.2 Option B: pass objects directly (bundled)

Import JSON in your app and pass resources (overrides resourceManifest):

import graphics from '../public/webtopo/meta/graphics.json'
import decorate from '../public/webtopo/meta/decorate.json'
import background from '../public/webtopo/meta/background.json'
import templates from '../public/webtopo/meta/templates.json'

const webtopoResources = { graphics, decorate, background, templates }

<Webtopo :resources="webtopoResources" />

1.3 manifest.json

{
  "schemaVersion": 1,
  "resources": {
    "graphics": "meta/graphics.json",
    "decorate": "meta/decorate.json",
    "background": "meta/background.json",
    "templates": "meta/templates.json"
  }
}

Missing files yield empty lists — the editor still starts.

2. Common schema

Field Type Description
description string Optional maintainer note
groups array Groups with items
items array Flat list (merged into a default group)
defaultGroups string[] graphics.json only
definitions object graphics.json only — reusable templates

2.1 Group

Field Required Description
name yes Display name
key no Internal id
label no UI label (decorations dropdown)
items yes Resource entries

2.2 Item

Field Required Description
key yes Unique id
name yes Display / search name
url conditional Image or SVG URL
thumb no Thumbnail
x6Node no Custom X6 markup
status no Multi-state config

URLs: relative ./webtopo/..., https:// external, or SVG #fragment.

2.3 pattern expansion

{
  "pattern": {
    "template": "./webtopo/decorate/header/{n}.png",
    "from": 1,
    "to": 10
  }
}

Max 500 expansions per pattern.

3. graphics.json

  • Built-in basics and charts still come from the npm package.
  • graphics.json only controls More graphics groups.
  • User selections persist in localStorage (webtopo_select_groups).
  • Advanced: definitions, $ref, $use, $vars for reusable templates.

4. decorate.json

Powers the Decorations panel — groups and draggable images. Place files under public/webtopo/decorate/.

5. background.json

Static backgrounds in the Choose background dialog. User-uploaded backgrounds use webtopoAPI getImages / uploadFile.

6. templates.json

Screen templates in the bottom drawer (showModelTemplateButton). Each item points to a screen JSON; Apply loads it onto the canvas. Preview URL param key loads public/webtopo/model/json/<key>.json.

7. Checklist

  1. All JSON and asset URLs return 200 in Network.
  2. Unique key per group.
  3. defaultGroups names match group.name exactly.
  4. Without meta config, More graphics is empty but basics/charts still work.

8. See also