@cyclonium/editor 0.0.100

package/lib/cce.d.ts

@@ -0,0 +1,44 @@
+import type { Component, Camera } from 'cc';
+import type EventEmitter from 'node:events';
+declare global {
+    namespace EditorExtends {
+        class ComponentManager extends EventEmitter<{
+            add: [componentId: string, component: Component];
+            remove: [componentId: string, component: Component];
+        }> {
+        }
+        const Component: InstanceType<typeof ComponentManager>;
+    }
+    namespace cce {
+        class NodeManager {
+            query(uuid: string): import('cc').Node | undefined;
+        }
+        const Node: InstanceType<typeof NodeManager>;
+        class OperationManager {
+            on<TEventName extends keyof Operation.EventMap>(type: TEventName, callback: ((...args: Operation.EventMap[TEventName]) => boolean | void | undefined), priority?: number): void;
+            removeListener<TEventName extends keyof Operation.EventMap>(type: TEventName, callback: ((...args: Operation.EventMap[TEventName]) => boolean | void | undefined)): void;
+        }
+        const Operation: InstanceType<typeof OperationManager>;
+        namespace Operation {
+            type EventMap = {
+                [x in 'mousedown' | 'mousemove' | 'mouseup' | 'mousewheel']: [OperationMouseEvent];
+            } & {
+                [x in 'keydown' | 'keyup']: [KeyboardEvent];
+            } & {
+                [x in 'onDragOver' | 'onDrop']: [DragEvent];
+            };
+            type OperationMouseEvent = Omit<MouseEvent, 'type'>;
+        }
+        class EngineManager {
+            repaintInEditMode(): boolean;
+        }
+        const Engine: InstanceType<typeof EngineManager>;
+        class CameraManager {
+            camera: Camera;
+        }
+        const Camera: InstanceType<typeof CameraManager>;
+    }
+}
+export import ccEditorExtension = globalThis.cce;
+export declare function isSceneEditorEnv(): false | typeof ccEditorExtension;
+//# sourceMappingURL=cce.d.ts.map

package/lib/cce.js

@@ -0,0 +1,4 @@
+export var ccEditorExtension = globalThis.cce;
+export function isSceneEditorEnv() {
+    return typeof globalThis.cce === 'object' && globalThis.cce;
+}

package/lib/component-editor.editor.d.ts

@@ -0,0 +1,22 @@
+import { Component } from 'cc';
+import { SceneGuiContext } from './scene-gui-context.js';
+export declare class ComponentEditor<TTarget extends Component = Component> {
+    constructor(target: TTarget);
+    get target(): TTarget;
+    destroy(): void;
+    invokeOnAttached_internal(): void;
+    invokeOnDetached_internal(): void;
+    invokeOnSceneGUI_internal(ctx: SceneGuiContext): void;
+    protected onAttached(): void;
+    protected onDetached(): void;
+    protected onDestroy(): void;
+    protected onSceneGUI(ctx: SceneGuiContext): void;
+    private _target;
+}
+export declare namespace ComponentEditor {
+    namespace LegacyDecorators {
+        function attachTo<TTarget extends Component>(targetComponentClass: new (...args: never[]) => TTarget): (componentEditorClass: new (target: TTarget) => ComponentEditor<TTarget>) => void;
+    }
+}
+export declare function startComponentEditor(): Promise<void>;
+//# sourceMappingURL=component-editor.editor.d.ts.map

package/lib/component-editor.editor.js

@@ -0,0 +1,179 @@
+import { CCObject, Component, director, Node, System } from 'cc';
+import EventEmitter from 'node:events';
+import { SceneGuiContext } from './scene-gui-context.js';
+import { HandleEditorInput } from './handle-editor-input.js';
+import { isSceneEditorEnv } from './cce.js';
+import { globalEditor } from './editor-global.js';
+export class ComponentEditor {
+    constructor(target) {
+        this._target = target;
+    }
+    get target() {
+        if (!this._target) {
+            throw new Error(`Target is not set`);
+        }
+        return this._target;
+    }
+    destroy() {
+        this.onDestroy();
+        this._target = undefined;
+    }
+    invokeOnAttached_internal() {
+        this.onAttached();
+    }
+    invokeOnDetached_internal() {
+        this.onDetached();
+    }
+    invokeOnSceneGUI_internal(ctx) {
+        this.onSceneGUI(ctx);
+    }
+    onAttached() {
+    }
+    onDetached() {
+    }
+    onDestroy() {
+    }
+    onSceneGUI(ctx) {
+        void ctx;
+    }
+    _target = undefined;
+}
+const componentEditorTypeRegistry = new WeakMap();
+// eslint-disable-next-line @typescript-eslint/no-namespace
+(function (ComponentEditor) {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    let LegacyDecorators;
+    (function (LegacyDecorators) {
+        function attachTo(targetComponentClass) {
+            return (componentEditorClass) => {
+                componentEditorTypeRegistry.set(targetComponentClass, {
+                    editorClass: componentEditorClass,
+                });
+            };
+        }
+        LegacyDecorators.attachTo = attachTo;
+    })(LegacyDecorators = ComponentEditor.LegacyDecorators || (ComponentEditor.LegacyDecorators = {}));
+})(ComponentEditor || (ComponentEditor = {}));
+class ComponentEditorSystem extends System {
+    constructor(opts) {
+        super();
+        this._controllerOnDestroy = new AbortController();
+        this._handleInput = new HandleEditorInput();
+        this._sceneGuiContext = new SceneGuiContext(this._handleInput, {
+            renderer: {
+                node: opts.handlesRenderRoot,
+            },
+        });
+    }
+    addComponent(component) {
+        const componentType = component.constructor;
+        const componentEditorType = componentEditorTypeRegistry.get(componentType);
+        if (!componentEditorType) {
+            return;
+        }
+        const componentEditor = new componentEditorType.editorClass(component);
+        this._componentEditors.set(component, componentEditor);
+        componentEditor.invokeOnAttached_internal();
+    }
+    removeComponent(component) {
+        const componentEditor = this._componentEditors.get(component);
+        if (componentEditor) {
+            componentEditor.invokeOnDetached_internal();
+            componentEditor.destroy();
+            this._componentEditors.delete(component);
+        }
+    }
+    destroy() {
+        this._sceneGuiContext.destroy_internal();
+        this._controllerOnDestroy.abort();
+        this._handleInput.destroy();
+        for (const componentEditor of this._componentEditors.values()) {
+            componentEditor.invokeOnDetached_internal();
+            componentEditor.destroy();
+        }
+        this._componentEditors.clear();
+    }
+    update(_deltaTime) {
+        const sceneGuiContext = this._sceneGuiContext;
+        sceneGuiContext.startFrame_internal({});
+        const selectedNodes = getSelectedNodes();
+        try {
+            for (const [component, componentEditor] of this._componentEditors) {
+                const node = component.node;
+                if (!selectedNodes.includes(node.uuid)) {
+                    continue;
+                }
+                sceneGuiContext.handles.pushScope(component.uuid);
+                try {
+                    componentEditor.invokeOnSceneGUI_internal(sceneGuiContext);
+                }
+                finally {
+                    sceneGuiContext.handles.popScope();
+                }
+            }
+        }
+        finally {
+            sceneGuiContext.endFrame_internal();
+        }
+    }
+    _componentEditors = new Map();
+    _handleInput;
+    _sceneGuiContext;
+    _controllerOnDestroy;
+}
+function getSelectedNodes() {
+    return globalEditor.Selection.getSelected('node');
+}
+const handlesRenderRootNodeName = '::handles-render-root::';
+export async function startComponentEditor() {
+    if (!isSceneEditorEnv()) {
+        return;
+    }
+    const handlesRenderRoot = new Node(handlesRenderRootNodeName);
+    const flags = CCObject.Flags.DontSave | CCObject.Flags.HideInHierarchy;
+    handlesRenderRoot.objectFlags |= flags;
+    director.addPersistRootNode(handlesRenderRoot);
+    const componentEditorSystem = new ComponentEditorSystem({
+        handlesRenderRoot,
+    });
+    director.registerSystem('component-editors', componentEditorSystem, System.Priority.MEDIUM);
+    import.meta.hot?.signalOnDispose.addEventListener('abort', () => {
+        componentEditorSystem.destroy();
+        director.unregisterSystem(componentEditorSystem);
+        handlesRenderRoot.destroy();
+    });
+    (async () => {
+        try {
+            for await (const [_, component] of EventEmitter.on(EditorExtends.Component, 'add', {
+                signal: import.meta.hot?.signalOnDispose,
+            })) {
+                componentEditorSystem.addComponent(component);
+            }
+        }
+        catch (err) {
+            if (err instanceof Error && err.name === 'AbortError') {
+                // nop
+            }
+            else {
+                throw err;
+            }
+        }
+    })().catch(console.error.bind(console));
+    (async () => {
+        try {
+            for await (const [_, component] of EventEmitter.on(EditorExtends.Component, 'remove', {
+                signal: import.meta.hot?.signalOnDispose,
+            })) {
+                componentEditorSystem.removeComponent(component);
+            }
+        }
+        catch (err) {
+            if (err instanceof Error && err.name === 'AbortError') {
+                // nop
+            }
+            else {
+                throw err;
+            }
+        }
+    })().catch(console.error.bind(console));
+}

package/lib/editor-global.d.ts

@@ -0,0 +1,15 @@
+declare global {
+    namespace Editor {
+        namespace Clipboard {
+            function write(type: string, text: string): void;
+        }
+        namespace Project {
+            const path: string;
+        }
+        namespace Selection {
+            function getSelected(type: string): string[];
+        }
+    }
+}
+export import globalEditor = globalThis.Editor;
+//# sourceMappingURL=editor-global.d.ts.map

package/lib/editor-global.js

@@ -0,0 +1 @@
+export var globalEditor = globalThis.Editor;

package/lib/handle-editor-input.d.ts

@@ -0,0 +1,7 @@
+import { type HandleHostInput, type HandleHostMouseInput } from '@cyclonium/handles';
+export declare class HandleEditorInput implements HandleHostInput {
+    get mouse(): HandleHostMouseInput;
+    destroy(): void;
+    private _mouse;
+}
+//# sourceMappingURL=handle-editor-input.d.ts.map

package/lib/handle-editor-input.js

@@ -0,0 +1,100 @@
+import { Vec2 } from '@cyclonium/core/math/vec2';
+import { HandleContext } from '@cyclonium/handles';
+import { ccEditorExtension } from './cce.js';
+import { geometry, screen } from 'cc';
+export class HandleEditorInput {
+    get mouse() {
+        return this._mouse;
+    }
+    destroy() {
+        this._mouse.destroy();
+    }
+    _mouse = new HandleEditorMouseInput();
+}
+class HandleEditorMouseInput {
+    constructor() {
+        const signal = this._controllerOnAbort.signal;
+        const intervalId = setInterval(() => {
+            if (signal.aborted) {
+                clearInterval(intervalId);
+                return;
+            }
+            if (typeof ccEditorExtension.Operation !== 'object' || !ccEditorExtension.Operation) {
+                return;
+            }
+            clearInterval(intervalId);
+            for (const mouseEventType of ['mousedown', 'mousemove', 'mouseup', 'mousewheel']) {
+                HandleEditorMouseInput._addInputEventListener(mouseEventType, this._onMouseEvent.bind(this, mouseEventType), { signal: signal });
+            }
+        });
+    }
+    get wantCapture() {
+        return this._wantCapture;
+    }
+    set wantCapture(value) {
+        this._wantCapture = value;
+    }
+    get position() {
+        return this._position;
+    }
+    get buttons() {
+        return this._buttons;
+    }
+    get altKey() {
+        return this._altKey;
+    }
+    get ctrlKey() {
+        return this._ctrlKey;
+    }
+    get shiftKey() {
+        return this._shiftKey;
+    }
+    mouseRay() {
+        const camera = ccEditorExtension.Camera.camera;
+        camera.screenPointToRay(this._position.x, this._position.y, this._mouseRay);
+        return this._mouseRay;
+    }
+    destroy() {
+        this._controllerOnAbort.abort();
+    }
+    static _addInputEventListener(type, callback, opts) {
+        ccEditorExtension.Operation.on(type, callback, 999);
+        opts?.signal?.addEventListener('abort', () => {
+            ccEditorExtension.Operation.removeListener(type, callback);
+        });
+    }
+    _controllerOnAbort = new AbortController();
+    _wantCapture = false;
+    _position = new Vec2();
+    _buttons = 0;
+    _altKey = false;
+    _ctrlKey = false;
+    _shiftKey = false;
+    _mouseRay = new geometry.Ray();
+    _onMouseEvent(eventType, event) {
+        let buttons = 0;
+        if (event.buttons & (1 << 0)) {
+            buttons |= (1 << HandleContext.MouseButton.left);
+        }
+        if (event.buttons & (1 << 1)) {
+            buttons |= (1 << HandleContext.MouseButton.right);
+        }
+        if (event.buttons & (1 << 2)) {
+            buttons |= (1 << HandleContext.MouseButton.middle);
+        }
+        this._buttons = buttons;
+        // Web use top 0, cocos use bottom 0
+        this._position.set(event.x, screen.windowSize.height - event.y);
+        this._altKey = event.altKey;
+        this._ctrlKey = event.ctrlKey;
+        this._shiftKey = event.shiftKey;
+        if (eventType === 'mousewheel') {
+            return true;
+        }
+        ccEditorExtension.Engine.repaintInEditMode();
+        if (!this._wantCapture) {
+            return true;
+        }
+        return false;
+    }
+}

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export { ComponentEditor, startComponentEditor } from './component-editor.editor.js';
+export { SceneGuiContext } from './scene-gui-context.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.js

@@ -0,0 +1,2 @@
+export { ComponentEditor, startComponentEditor } from './component-editor.editor.js';
+export { SceneGuiContext } from './scene-gui-context.js';

package/lib/legacy-globals.d.ts

@@ -0,0 +1,5 @@
+import './cce.js';
+import './editor-global.js';
+export import Editor_legacy = globalThis.Editor;
+export import cce_legacy = globalThis.cce;
+//# sourceMappingURL=legacy-globals.d.ts.map

package/lib/legacy-globals.js

@@ -0,0 +1,4 @@
+import './cce.js';
+import './editor-global.js';
+export var Editor_legacy = globalThis.Editor;
+export var cce_legacy = globalThis.cce;

package/lib/scene-gui-context.d.ts

@@ -0,0 +1,10 @@
+import { Handles, type HandleContext } from '@cyclonium/handles';
+export declare class SceneGuiContext {
+    constructor(...args: ConstructorParameters<typeof Handles>);
+    get handles(): Handles;
+    destroy_internal(): void;
+    startFrame_internal(opts: HandleContext.FrameStartOptions): void;
+    endFrame_internal(): void;
+    private _handles;
+}
+//# sourceMappingURL=scene-gui-context.d.ts.map

package/lib/scene-gui-context.js

@@ -0,0 +1,19 @@
+import { Handles } from '@cyclonium/handles';
+export class SceneGuiContext {
+    constructor(...args) {
+        this._handles = new Handles(...args);
+    }
+    get handles() {
+        return this._handles;
+    }
+    destroy_internal() {
+        this._handles.destroy_internal();
+    }
+    startFrame_internal(opts) {
+        this._handles.startFrame_internal(opts);
+    }
+    endFrame_internal() {
+        this._handles.endFrame_internal();
+    }
+    _handles;
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@cyclonium/editor",
+  "version": "0.0.100",
+  "type": "module",
+  "files": [
+    "lib/**/*{.js,.d.ts}"
+  ],
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./legacy-globals": {
+      "types": "./lib/legacy-globals.d.ts",
+      "default": "./lib/legacy-globals.js"
+    }
+  },
+  "dependencies": {
+    "@cyclonium/handles": "0.0.100"
+  },
+  "peerDependencies": {
+    "@cyclonium/core": "0.0.100"
+  },
+  "devDependencies": {
+    "@types/node": "^25.9.2",
+    "typescript": "^6.0.2",
+    "@cyclonium/workflow": "0.0.100",
+    "@cyclonium/types-cc": "0.0.100"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "dev": "tsc -b --watch"
+  }
+}