Customizing the Workspace

Atomos Structura provides powerful hooks to freeze interactions, add custom toolbar tools, and inject dynamic options into the properties panel.

1Readonly Mode

You can lock down the canvas by passing readonly: true in the WorkspaceConfig. This short-circuits all drag, drop, resize, and link creation events.

import { createWorkspaceManager } from '@atomos-web/structura';

const manager = createWorkspaceManager(svgElement, viewportGroup, 'instance-1', () => {
  return {
    readonly: true,
    headless: false
  };
});

2Custom Actions

Inject your own business logic directly into the native canvas toolbar by defining customActions.

const config = {
  menu: {
    customActions: [
      { id: 'deploy-schema', label: 'Deploy Schema', icon: '<svg>...</svg>' }
    ]
  }
};

Listen to these actions via the SchemaBuilder:

builder.onCustomAction('deploy-schema', (state) => {
  console.log("Triggered deployment with AST state:", state);
});

3Async Property Fetching

When building the properties panel, dropdown values (like external database IDs or cloud regions) often need to be fetched asynchronously. Use the onLoadOptions hook.

const config = {
  onLoadOptions: async (propertyKey, entityId) => {
    if (propertyKey === 'region') {
      const res = await fetch('/api/regions');
      return await res.json(); // [{ label: 'US East', value: 'us-east-1' }]
    }
    return [];
  }
};

4Post-Load Commands

You can configure schemas to automatically execute specific native tools right after they finish loading by providing an array of command keys to applyAfterLoad in the exported JSON. This is incredibly useful for self-organizing templates.

const exportedSchema = {
  version: "1.0.0",
  nodes: [ /* ... */ ],
  edges: [ /* ... */ ],
  // Automatically route links and optimize connections immediately after load
  applyAfterLoad: ['optimize-connections'] 
};

// Or, use 'auto-layout' to fully reposition all entities based on a DAG structure
const autoLayoutSchema = {
  // ...
  applyAfterLoad: ['auto-layout']
};