Designer Operations

The Designer instance is available on runtime.designer when you use useDesignerApp().

import { useDesignerApp } from '@ptahjs/ui-vue';

const runtime = useDesignerApp({ id: 've1' });
const designer = runtime.designer;

All mutating operations are recorded in history.

Undo / Redo

designer.undo();
designer.redo();

Scene Operations

const sceneId = designer.addScene({ props: { title: 'Home' } });

designer.selectScene(sceneId);
designer.updateScene({ id: sceneId, patch: { props: { title: 'Dashboard' } } });
designer.moveScene({ id: sceneId, toIndex: 0 });
designer.cloneScene({ id: sceneId });
designer.deleteScene({ id: sceneId });

Module Operations

const moduleId = designer.addModule({
    type: 'UiButton',
    parentId: sceneId,
    index: 0,
    props: { label: 'Click me' },
});

designer.selectModule(moduleId);
designer.updateModule({ id: moduleId, patch: { props: { label: 'Submit' } } });
designer.moveModule({ id: moduleId, toParentId: sceneId, toIndex: 1 });
designer.cloneModule({ id: moduleId });
designer.deleteModule({ id: moduleId });

Clipboard Operations

designer.copyModule(moduleId);
designer.pasteModule({ targetParentId: sceneId, index: 2 });
designer.cutModule(moduleId);

Custom Slot Operations

const slotId = designer.addCustomSlot({ parentId: moduleId, key: 'extra' }, 0);
designer.deleteCustomSlot({ id: slotId });

Export

const schema = designer.getPageSchema();

Runtime and History

const runtimeRef = designer.getRuntime();
const history = designer.getHistory();