Skip to content

[feat] canvas: Director Stage creation entry, external character import, and export loop #241

Open

Description

@MrDongsls

Follows up on #107 "P0: Real creation workflows".

Goal and scope

src/canvas/DirectorStage.tsx already implements a local 3D stage. It covers a three.js scene, camera and subject keyframes, storyboard hard cuts, segmented joint motion, 30 fps MP4 export, screenshots, undo and redo, and stage JSON import and export. The stage document persists through the node field localStage, and adding the preview video to the canvas already registers it as a project asset through MediaPublication and importResource. Three gaps remain:

  1. Cannot create. src/canvas/creationTools.ts marks the external kind, Director Stage, as unavailable: true. The creation menu and tool rail therefore only show a not-yet-available notice. Nodes today can only arrive through backend projection sync, so there is no local creation entry at all.
  2. No external character assets. Subjects are limited to procedural primitives: a box, a sphere, and a person built on a hand-written skeleton with preset motions. There is no GLTFLoader or FBXLoader. The node copy itself states that external FBX and GLB skinned characters and the cloud director version are not yet integrated, at src/i18n/messages/zh-CN/editors.ts line 353.
  3. Screenshots are not registered as assets. A screenshot is written into the node field src as a dataURL and never passes through importResource, so it cannot be referenced by the timeline or other nodes.

This issue delivers a creation entry for Director Stage nodes from the menu, import of external character and scene assets, shared framing and sampling across preview, screenshot, and export, export results registered as project assets that timeline clips can reference directly, and equivalent user and Agent entry points.

User flow and key rules

  • The creation menu and tool rail can create a Director Stage node, and stage editing opens right after creation. Apply and autosave reliably persist the stage document and the screenshot onto the node, and the editor document into the project. Stage JSON export and import serve as save-as and backup.
  • External character and scene asset import supports GLB and GLTF first. The format trade-off is described under Design points to confirm. Imported files register as project assets through the existing asset.import path. Unsupported formats, corrupt files, and oversized files produce readable reasons instead of failing silently, and the import prompt states the license boundaries.
  • Skinned characters must not be load-only. Bind them to the existing motion system in stageMotion.ts at least far enough to follow camera and storyboard playback. Characters without animation data get an explicit notice of the capability boundary.
  • Preview, screenshot, and MP4 export share the framing enum in stageOutputSize and the sampling logic in sampleStage. The rendered result matches the preview.
  • The exported MP4 and screenshots go through asset registration via importResource and become project assets. The resulting nodes can be referenced directly by timeline clips through clip.resource.asset.assetId. Re-export never silently overwrites existing assets.
  • The Agent and the user share the same business commands. The Agent can create a stage node, submit camera and subject keyframe edits, trigger export, and register assets. The generation entry equivalence rules apply to this capability as well.
  • User-visible copy ships zh-CN and en-US together. Business values such as external and director-stage are not translated.

Implementation impact

  • src/canvas/creationTools.ts: remove the unavailable flag from external.
  • Creation path: createNode already has external defaults at src/canvas/model.ts line 421. Wire addNode into the local batch command, then into saveWorkspaceDocument, then into creation and validation for kind external in the backend creation_canvas.py. Verify first whether the backend currently allows it.
  • src/canvas/DirectorStage.tsx and src/canvas/stageDocument.ts: GLB and GLTF loading, skinning and motion binding, and import failure branches. Unify export and preview framing and sampling.
  • Screenshot registration: the onApply and onPrepareRender paths in WorkspaceView.tsx switch to importResource, replacing the current direct dataURL write.
  • Contracts and Agent: if new commands or fields are added, update domain/creation/commands.py and rerun scripts/generate_contracts.py. Prefer reusing editor.save and the existing publish commands over opening an export side channel.
  • i18n: paired updates to the stage entries in editors.ts, the canvas.kind and canvas.menu entries in canvas.ts, and errors.ts. npm run check:i18n must pass.

Design points to confirm

  • External character format for the first version. GLB and GLTF are recommended because three.js maintains GLTFLoader officially, glTF is the interchange standard, and skeleton and animation binding are mature. FBX is not promised initially, and importing it produces an explicit unsupported-format notice. Pending maintainer confirmation.
  • Whether scene assets and character assets are distinct slots in the first version, or unified as stage assets with the usage explained in the import prompt.

Self-test plan

  1. Real-chain acceptance. Create a Director Stage, add cameras, subjects, keyframes, and a storyboard, export the MP4, add it to the canvas, reference it in the timeline, and render the final video in the browser. Spot-check frames to confirm the export matches the preview.
  2. Asset import. Test one animated GLB and one static GLB. A corrupt file, an unsupported format, and an oversized file each produce a readable failure without half-finished artifacts. Imported assets are visible in the asset library.
  3. Persistence. Cameras, keyframes, the storyboard, and imported assets survive reopening. Undo and redo cover create, import, and export operations.
  4. Agent dual entry. The Agent creates a stage, edits camera keyframes, and exports and registers assets through the same commands. Results share provenance with UI operations and remain editable.
  5. npm run check:i18n passes. Switch between zh-CN and en-US manually to inspect the new flow copy and error messages.

Dependencies

None. Work can start immediately. This issue should land before the Director Toolbox subissue, whose action contracts will reuse the stage and asset publication semantics established here.

Activity

  1. added
    type:featNew capability or behaviour
    area:canvasCanvas, nodes and direct manipulation
    modality:videoVideo generation, editing or rendering
    on Nov 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:canvasCanvas, nodes and direct manipulationmodality:videoVideo generation, editing or renderingtype:featNew capability or behaviour

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions