@cyclonium/handles 0.0.100

package/lib/handle-context.d.ts

@@ -0,0 +1,38 @@
+import { HandleInputContext, HandleMouseButton, type HandleHostInput } from './handle-input.js';
+import { HandleRenderer } from './handle-renderer.js';
+import { Node } from 'cc';
+export declare class HandleContext {
+    constructor(hostInput: HandleHostInput, opts: {
+        renderer: {
+            node: Node;
+        };
+    });
+    get now(): number;
+    get input(): HandleInputContext;
+    get renderer(): HandleRenderer;
+    destroy_internal(): void;
+    forEach<T>(iterable: ReadonlyArray<T>, keyGenerator: (item: T) => string, callback: (item: T, index: number) => void): void;
+    allocateSequentialKey(): HandleKey;
+    pushScope(key: string): void;
+    popScope(): void;
+    startFrame_internal(opts: HandleContext.FrameStartOptions): void;
+    endFrame_internal(): void;
+    queueFrameEndTask_internal(callback: () => void): void;
+    private readonly _currentScope;
+    private _inputContext;
+    private _now;
+    private _endFrameCallbacks;
+    private _renderer;
+    private _pushScope;
+    private _popScope;
+}
+export declare namespace HandleContext {
+    export import MouseButton = HandleMouseButton;
+    interface FrameStartOptions {
+    }
+}
+export type HandleKey = string & {
+    readonly __handleKey: unique symbol;
+};
+export declare function HandleKey(): HandleKey;
+//# sourceMappingURL=handle-context.d.ts.map

package/lib/handle-context.js

@@ -0,0 +1,87 @@
+import { HandleInputContext, HandleMouseButton } from './handle-input.js';
+import { HandleRenderer } from './handle-renderer.js';
+import { Node } from 'cc';
+export class HandleContext {
+    constructor(hostInput, opts) {
+        this._inputContext = new HandleInputContext(hostInput);
+        this._pushScope('');
+        this._renderer = new HandleRenderer(opts.renderer);
+    }
+    get now() {
+        return this._now;
+    }
+    get input() {
+        return this._inputContext;
+    }
+    get renderer() {
+        return this._renderer;
+    }
+    destroy_internal() {
+        this._renderer.destroy_internal();
+    }
+    forEach(iterable, keyGenerator, callback) {
+        for (const [index, item] of iterable.entries()) {
+            const key = keyGenerator(item);
+            this._pushScope(key);
+            try {
+                callback(item, index);
+            }
+            finally {
+                this._popScope();
+            }
+        }
+    }
+    allocateSequentialKey() {
+        const scope = this._currentScope[this._currentScope.length - 1];
+        const sequentialId = scope.nextSequentialIndex++;
+        return `${scope.key}/${sequentialId}`;
+    }
+    pushScope(key) {
+        this._pushScope(key);
+    }
+    popScope() {
+        this._popScope();
+    }
+    startFrame_internal(opts) {
+        this._now = Date.now();
+        this._inputContext.startFrame_internal(opts);
+        this._renderer.startFrame();
+    }
+    endFrame_internal() {
+        for (const callback of this._endFrameCallbacks) {
+            callback();
+        }
+        this._endFrameCallbacks.length = 0;
+        this._currentScope.length = 1;
+        this._inputContext.endFrame_internal();
+        this._renderer.endFrame();
+    }
+    queueFrameEndTask_internal(callback) {
+        this._endFrameCallbacks.push(callback);
+    }
+    _currentScope = [];
+    _inputContext;
+    _now = Date.now();
+    _endFrameCallbacks = [];
+    _renderer;
+    _pushScope(key) {
+        this._currentScope.push({ key, nextSequentialIndex: 0 });
+    }
+    _popScope() {
+        if (this._currentScope.length <= 1) {
+            throw new Error('Mismatched scope push/pop');
+        }
+        this._currentScope.pop();
+    }
+}
+Object.defineProperties(HandleContext, {
+    MouseButton: {
+        value: HandleMouseButton,
+        writable: true,
+        enumerable: false,
+        configurable: true,
+    },
+});
+export function HandleKey() {
+    return '';
+}

package/lib/handle-input.d.ts

@@ -0,0 +1,34 @@
+import { Vec2 } from '@cyclonium/core/math/vec2';
+import type { HandleContext } from './handle-context.js';
+import type { geometry } from 'cc';
+export declare enum HandleMouseButton {
+    left = 0,
+    right = 1,
+    middle = 2
+}
+export declare class HandleInputContext {
+    private _hostInput;
+    constructor(_hostInput: HandleHostInput);
+    get mousePosition(): Vec2;
+    mouseButtonDown(button: HandleMouseButton): boolean;
+    mouseRay(): geometry.Ray;
+    get mouseAltKey(): boolean;
+    get mouseCtrlKey(): boolean;
+    get mouseShiftKey(): boolean;
+    startFrame_internal(_opts: HandleContext.FrameStartOptions): void;
+    endFrame_internal(): void;
+    captureMouse(): void;
+}
+export interface HandleHostInput {
+    readonly mouse: HandleHostMouseInput;
+}
+export interface HandleHostMouseInput {
+    wantCapture: boolean;
+    readonly position: Vec2;
+    readonly buttons: number;
+    mouseRay(): geometry.Ray;
+    readonly altKey: boolean;
+    readonly ctrlKey: boolean;
+    readonly shiftKey: boolean;
+}
+//# sourceMappingURL=handle-input.d.ts.map

package/lib/handle-input.js

@@ -0,0 +1,40 @@
+import { Vec2 } from '@cyclonium/core/math/vec2';
+export var HandleMouseButton;
+(function (HandleMouseButton) {
+    HandleMouseButton[HandleMouseButton["left"] = 0] = "left";
+    HandleMouseButton[HandleMouseButton["right"] = 1] = "right";
+    HandleMouseButton[HandleMouseButton["middle"] = 2] = "middle";
+})(HandleMouseButton || (HandleMouseButton = {}));
+export class HandleInputContext {
+    _hostInput;
+    constructor(_hostInput) {
+        this._hostInput = _hostInput;
+    }
+    get mousePosition() {
+        return this._hostInput.mouse.position;
+    }
+    mouseButtonDown(button) {
+        return (this._hostInput.mouse.buttons & (1 << button)) !== 0;
+    }
+    mouseRay() {
+        return this._hostInput.mouse.mouseRay();
+    }
+    get mouseAltKey() {
+        return this._hostInput.mouse.altKey;
+    }
+    get mouseCtrlKey() {
+        return this._hostInput.mouse.ctrlKey;
+    }
+    get mouseShiftKey() {
+        return this._hostInput.mouse.shiftKey;
+    }
+    startFrame_internal(_opts) {
+        this._hostInput.mouse.wantCapture = false;
+    }
+    endFrame_internal() {
+        // ...
+    }
+    captureMouse() {
+        this._hostInput.mouse.wantCapture = true;
+    }
+}

package/lib/handle-provider.d.ts

@@ -0,0 +1,3 @@
+export declare class HandleProvider {
+}
+//# sourceMappingURL=handle-provider.d.ts.map

package/lib/handle-provider.js

@@ -0,0 +1,2 @@
+export class HandleProvider {
+}

package/lib/handle-renderer.d.ts

@@ -0,0 +1,41 @@
+import type { Vec2 } from '@cyclonium/core/math/vec2';
+import { Color, Node, Vec3 } from 'cc';
+export declare class HandleRenderer {
+    constructor(opts: {
+        node: Node;
+    });
+    destroy_internal(): void;
+    startFrame(): void;
+    endFrame(): void;
+    drawRect(_opts: {
+        center: Vec3;
+        halfExtent: Vec2;
+        right?: Vec3;
+        up?: Vec3;
+        color?: Color;
+        unlit?: boolean;
+        wireframe?: boolean;
+    }): void;
+    drawLine2D(opts: {
+        from: Vec2;
+        to: Vec2;
+        color?: Color;
+        thickness?: number;
+        z?: number;
+    }): void;
+    drawPolyline2D({ points, close, color, thickness, z, }: {
+        points: Vec2[];
+        close?: boolean;
+        color?: Color;
+        thickness?: number;
+        z?: number;
+    }): void;
+    drawBox2D(opts: {
+        center: Vec3;
+        halfExtent: number | Vec2;
+        color?: Color;
+        wireframe?: boolean;
+    }): void;
+    private _canvas;
+}
+//# sourceMappingURL=handle-renderer.d.ts.map

package/lib/handle-renderer.js

@@ -0,0 +1,55 @@
+import { Color, Node, Vec3 } from 'cc';
+import { Canvas3D } from '@cyclonium/canvas-3d';
+export class HandleRenderer {
+    constructor(opts) {
+        this._canvas = new Canvas3D(opts);
+    }
+    destroy_internal() {
+        this._canvas.destroy();
+    }
+    startFrame() {
+    }
+    endFrame() {
+        this._canvas.commit();
+    }
+    drawRect(_opts) {
+    }
+    drawLine2D(opts) {
+        this._canvas.beginPath();
+        this._canvas.moveTo(new Vec3(opts.from.x, opts.from.y, opts.z ?? 0));
+        this._canvas.lineTo(new Vec3(opts.to.x, opts.to.y, opts.z ?? 0));
+        this._canvas.strokeColor = opts.color ?? Color.WHITE;
+        this._canvas.lineWidth = opts.thickness ?? 1;
+        this._canvas.stroke();
+    }
+    drawPolyline2D({ points, close = false, color = Color.WHITE, thickness = 1, z = 0, }) {
+        if (points.length === 0) {
+            return;
+        }
+        this._canvas.beginPath();
+        this._canvas.moveTo(new Vec3(points[0].x, points[0].y, z));
+        for (let i = 1; i < points.length; i++) {
+            const point = points[i];
+            this._canvas.lineTo(new Vec3(point.x, point.y, z));
+        }
+        if (close) {
+            this._canvas.closePath();
+        }
+        this._canvas.strokeColor = color;
+        this._canvas.lineWidth = thickness;
+        this._canvas.stroke();
+    }
+    drawBox2D(opts) {
+        this._canvas.beginPath();
+        this._canvas.box(opts.center, typeof opts.halfExtent === 'number' ? opts.halfExtent : new Vec3(opts.halfExtent.x, opts.halfExtent.y, 0));
+        if (opts.wireframe) {
+            this._canvas.strokeColor = opts.color ?? Color.WHITE;
+            this._canvas.stroke();
+        }
+        else {
+            this._canvas.fillColor = opts.color ?? Color.WHITE;
+            this._canvas.fill();
+        }
+    }
+    _canvas;
+}

package/lib/handles/bounds-2d-handle.d.ts

@@ -0,0 +1,29 @@
+import { HandleProvider } from '../handle-provider.js';
+import type { Bounds2D } from '@cyclonium/core/math/bounds-2d';
+import type { HandleContext } from '../handle-context.js';
+export declare enum RectHandleLockFlag {
+    lockTopEdge = 1,
+    lockBottomEdge = 2,
+    lockLeftEdge = 4,
+    lockRightEdge = 8,
+    lockTopLeft = 5,
+    lockTopRight = 9,
+    lockBottomLeft = 6,
+    lockBottomRight = 10,
+    lockAllEdges = 15,
+    lockCenter = 16,
+    lockAspectRatio = 32
+}
+export declare class Bounds2DHandleProvider extends HandleProvider {
+    constructor();
+    draw(ctx: HandleContext, bounds: Bounds2D, opts?: {
+        lock?: RectHandleLockFlag;
+    }): boolean;
+    private readonly _pointHandleProvider;
+    private readonly _lineSegmentHandleProvider;
+    private readonly _cacheEssentials;
+    private _drawPoint;
+    private _drawEdge;
+    private _applyMirror;
+}
+//# sourceMappingURL=bounds-2d-handle.d.ts.map

package/lib/handles/bounds-2d-handle.js

@@ -0,0 +1,196 @@
+import { HandleProvider } from '../handle-provider.js';
+import { Vec2 } from '@cyclonium/core/math/vec2';
+import { PointHandleProvider } from './point-handle.js';
+import { LineSegmentHandleLockFlag, LineSegmentHandleProvider } from './line-segment-handle.js';
+import { Ref } from '../ref.js';
+import { Color, Quat, Vec3 } from 'cc';
+export var RectHandleLockFlag;
+(function (RectHandleLockFlag) {
+    RectHandleLockFlag[RectHandleLockFlag["lockTopEdge"] = 1] = "lockTopEdge";
+    RectHandleLockFlag[RectHandleLockFlag["lockBottomEdge"] = 2] = "lockBottomEdge";
+    RectHandleLockFlag[RectHandleLockFlag["lockLeftEdge"] = 4] = "lockLeftEdge";
+    RectHandleLockFlag[RectHandleLockFlag["lockRightEdge"] = 8] = "lockRightEdge";
+    RectHandleLockFlag[RectHandleLockFlag["lockTopLeft"] = 5] = "lockTopLeft";
+    RectHandleLockFlag[RectHandleLockFlag["lockTopRight"] = 9] = "lockTopRight";
+    RectHandleLockFlag[RectHandleLockFlag["lockBottomLeft"] = 6] = "lockBottomLeft";
+    RectHandleLockFlag[RectHandleLockFlag["lockBottomRight"] = 10] = "lockBottomRight";
+    RectHandleLockFlag[RectHandleLockFlag["lockAllEdges"] = 15] = "lockAllEdges";
+    RectHandleLockFlag[RectHandleLockFlag["lockCenter"] = 16] = "lockCenter";
+    RectHandleLockFlag[RectHandleLockFlag["lockAspectRatio"] = 32] = "lockAspectRatio";
+})(RectHandleLockFlag || (RectHandleLockFlag = {}));
+const cornerPointStyle = {
+    color: new Color(Color.BLACK),
+    wireframe: true,
+};
+const centerPointStyle = cornerPointStyle;
+export class Bounds2DHandleProvider extends HandleProvider {
+    constructor() {
+        super();
+        this._pointHandleProvider = new PointHandleProvider();
+        this._lineSegmentHandleProvider = new LineSegmentHandleProvider();
+        this._cacheEssentials = {
+            centerPoint: new Vec2(),
+            leftTopPoint: new Vec2(),
+            rightTopPoint: new Vec2(),
+            leftBottomPoint: new Vec2(),
+            rightBottomPoint: new Vec2(),
+            topEdge: new Ref(0),
+            bottomEdge: new Ref(0),
+            leftEdge: new Ref(0),
+            rightEdge: new Ref(0),
+        };
+    }
+    draw(ctx, bounds, opts) {
+        const essentials = this._cacheEssentials;
+        const { centerPoint, leftTopPoint, rightTopPoint, leftBottomPoint, rightBottomPoint, topEdge, bottomEdge, leftEdge, rightEdge, } = essentials;
+        const { lock = 0, } = opts || {};
+        const rotationQuat = undefined;
+        const baseRight = Vec3.UNIT_X;
+        const baseUp = Vec3.UNIT_Y;
+        ctx.renderer.drawRect({
+            center: new Vec3(bounds.center.x, bounds.center.y, 0),
+            halfExtent: bounds.size.mulScalar(0.5),
+            right: rotationQuat ? Vec3.transformQuat(new Vec3(), baseRight, rotationQuat) : baseRight,
+            up: rotationQuat ? Vec3.transformQuat(new Vec3(), baseUp, rotationQuat) : baseUp,
+            color: new Color(255, 255, 255, 128),
+            unlit: true,
+            wireframe: false,
+        });
+        const pointSize = Math.min(bounds.size.x, bounds.size.y) * 0.1;
+        const edgeWidth = pointSize * 0.5;
+        const mirrorOperation = ctx.input.mouseAltKey && ctx.input.mouseCtrlKey && ctx.input.mouseShiftKey;
+        let centerChanged = false;
+        centerPoint.copyFrom(bounds.center);
+        if (this._drawPoint(ctx, centerPoint, centerPointStyle, pointSize, !!(lock & RectHandleLockFlag.lockCenter))) {
+            bounds.center = centerPoint;
+            centerChanged = true;
+        }
+        const min = new Vec2().copyFrom(bounds.min);
+        const max = new Vec2().copyFrom(bounds.max);
+        let minMaxChanged = false;
+        {
+            const pointModel = leftTopPoint;
+            const inputX = min.x;
+            const inputY = max.y;
+            pointModel.set(inputX, inputY);
+            if (this._drawPoint(ctx, pointModel, cornerPointStyle, pointSize, !!(lock & RectHandleLockFlag.lockTopLeft))) {
+                const { x, y } = pointModel;
+                if (mirrorOperation) {
+                    const dx = x - inputX;
+                    const dy = y - inputY;
+                    this._applyMirror(min, max, -dx, dy);
+                }
+                else {
+                    min.x = x;
+                    max.y = y;
+                }
+                minMaxChanged = true;
+            }
+        }
+        {
+            const pointModel = rightTopPoint;
+            const inputX = max.x;
+            const inputY = max.y;
+            pointModel.set(inputX, inputY);
+            if (this._drawPoint(ctx, pointModel, cornerPointStyle, pointSize, !!(lock & RectHandleLockFlag.lockTopRight))) {
+                const { x, y } = pointModel;
+                if (mirrorOperation) {
+                    const dx = x - inputX;
+                    const dy = y - inputY;
+                    this._applyMirror(min, max, dx, dy);
+                }
+                else {
+                    max.x = x;
+                    max.y = y;
+                }
+                minMaxChanged = true;
+            }
+        }
+        {
+            const pointModel = rightBottomPoint;
+            const inputX = max.x;
+            const inputY = min.y;
+            pointModel.set(inputX, inputY);
+            if (this._drawPoint(ctx, pointModel, cornerPointStyle, pointSize, !!(lock & RectHandleLockFlag.lockBottomRight))) {
+                const { x, y } = pointModel;
+                if (mirrorOperation) {
+                    const dx = x - inputX;
+                    const dy = y - inputY;
+                    this._applyMirror(min, max, dx, -dy);
+                }
+                else {
+                    max.x = x;
+                    min.y = y;
+                }
+                minMaxChanged = true;
+            }
+        }
+        {
+            const pointModel = leftBottomPoint;
+            const inputX = min.x;
+            const inputY = min.y;
+            pointModel.set(inputX, inputY);
+            if (this._drawPoint(ctx, pointModel, cornerPointStyle, pointSize, !!(lock & RectHandleLockFlag.lockBottomLeft))) {
+                const { x, y } = pointModel;
+                if (mirrorOperation) {
+                    const dx = x - inputX;
+                    const dy = y - inputY;
+                    this._applyMirror(min, max, -dx, -dy);
+                }
+                else {
+                    min.x = x;
+                    min.y = y;
+                }
+                minMaxChanged = true;
+            }
+        }
+        topEdge.value = min.y;
+        if (this._drawEdge(ctx, leftTopPoint, rightTopPoint, topEdge, !!(lock & RectHandleLockFlag.lockTopEdge), edgeWidth)) {
+            min.y = topEdge.value;
+            minMaxChanged = true;
+        }
+        bottomEdge.value = max.y;
+        if (this._drawEdge(ctx, leftBottomPoint, rightBottomPoint, bottomEdge, !!(lock & RectHandleLockFlag.lockBottomEdge), edgeWidth)) {
+            max.y = bottomEdge.value;
+            minMaxChanged = true;
+        }
+        leftEdge.value = min.x;
+        if (this._drawEdge(ctx, leftTopPoint, leftBottomPoint, leftEdge, !!(lock & RectHandleLockFlag.lockLeftEdge), edgeWidth)) {
+            min.x = leftEdge.value;
+            minMaxChanged = true;
+        }
+        rightEdge.value = max.x;
+        if (this._drawEdge(ctx, rightTopPoint, rightBottomPoint, rightEdge, !!(lock & RectHandleLockFlag.lockRightEdge), edgeWidth)) {
+            max.x = rightEdge.value;
+            minMaxChanged = true;
+        }
+        if (minMaxChanged) {
+            bounds.setMinMax(min, max);
+        }
+        return centerChanged || minMaxChanged;
+    }
+    _pointHandleProvider;
+    _lineSegmentHandleProvider;
+    _cacheEssentials;
+    _drawPoint(ctx, point, style, size, locked) {
+        return this._pointHandleProvider.drawSquaredPoint2D(ctx, point, {
+            lock: locked,
+            style,
+            size,
+        });
+    }
+    _drawEdge(ctx, start, end, edge, locked, edgeWidth) {
+        return this._lineSegmentHandleProvider.drawEdge2D(ctx, edge, undefined, {
+            start,
+            end,
+            lock: locked ? true : LineSegmentHandleLockFlag.lockForwardBackward,
+            width: edgeWidth,
+        });
+    }
+    _applyMirror(min, max, dxMax, dyMax) {
+        max.x += dxMax;
+        max.y += dyMax;
+        min.x -= dxMax;
+        min.y -= dyMax;
+    }
+}

package/lib/handles/line-segment-handle.d.ts

@@ -0,0 +1,29 @@
+import type { Vec3 } from 'cc';
+import { HandleProvider } from '../handle-provider.js';
+import type { HandleContext } from '../handle-context.js';
+import type { Ref } from '../ref.js';
+import { Vec2 } from '@cyclonium/core/math/vec2';
+export declare enum LineSegmentHandleLockFlag {
+    lockForward = 1,
+    lockBackward = 2,
+    lockOrthogonalLeft = 4,
+    lockOrthogonalRight = 8,
+    lockForwardBackward = 3,
+    lockOrthogonal = 12,
+    lockAll = 15
+}
+export declare class LineSegmentHandleProvider extends HandleProvider {
+    constructor();
+    draw(_ctx: HandleContext, _model: {
+        start: Vec3;
+        end: Vec3;
+    }): boolean;
+    drawEdge2D(ctx: HandleContext, _modelTangent: Ref<number> | undefined, _modelOrthogonal: Ref<number> | undefined, props: {
+        start: Vec2;
+        end: Vec2;
+        width?: number;
+        lock?: boolean | LineSegmentHandleLockFlag;
+    }): boolean;
+    private _virtualBox2DHandleProvider;
+}
+//# sourceMappingURL=line-segment-handle.d.ts.map

package/lib/handles/line-segment-handle.js

@@ -0,0 +1,88 @@
+import { HandleProvider } from '../handle-provider.js';
+import { Vec2 } from '@cyclonium/core/math/vec2';
+import { VirtualBox2DHandleProvider } from './virtual-box-2d-handle.js';
+export var LineSegmentHandleLockFlag;
+(function (LineSegmentHandleLockFlag) {
+    LineSegmentHandleLockFlag[LineSegmentHandleLockFlag["lockForward"] = 1] = "lockForward";
+    LineSegmentHandleLockFlag[LineSegmentHandleLockFlag["lockBackward"] = 2] = "lockBackward";
+    LineSegmentHandleLockFlag[LineSegmentHandleLockFlag["lockOrthogonalLeft"] = 4] = "lockOrthogonalLeft";
+    LineSegmentHandleLockFlag[LineSegmentHandleLockFlag["lockOrthogonalRight"] = 8] = "lockOrthogonalRight";
+    LineSegmentHandleLockFlag[LineSegmentHandleLockFlag["lockForwardBackward"] = 3] = "lockForwardBackward";
+    LineSegmentHandleLockFlag[LineSegmentHandleLockFlag["lockOrthogonal"] = 12] = "lockOrthogonal";
+    LineSegmentHandleLockFlag[LineSegmentHandleLockFlag["lockAll"] = 15] = "lockAll";
+})(LineSegmentHandleLockFlag || (LineSegmentHandleLockFlag = {}));
+export class LineSegmentHandleProvider extends HandleProvider {
+    constructor() {
+        super();
+    }
+    draw(_ctx, _model) {
+        return false;
+    }
+    drawEdge2D(ctx, _modelTangent, _modelOrthogonal, props) {
+        const { start, end } = props;
+        const lockProp = props?.lock;
+        const lock = typeof lockProp === 'boolean'
+            ? (lockProp ? LineSegmentHandleLockFlag.lockAll : 0)
+            : (lockProp ?? 0);
+        const moved = false;
+        const center = start.add(end).mulSelfScalar(0.5);
+        const dir = end.sub(start);
+        const length = dir.magnitude;
+        dir.normalizeSelf();
+        const rotation = dir.atan2();
+        const width = props?.width ?? 1;
+        this._virtualBox2DHandleProvider.drawVirtualBox(ctx, center, {
+            size: new Vec2(length, width),
+            rotation,
+            onWantMove: (newPosition) => {
+                if ((lock & LineSegmentHandleLockFlag.lockAll) === LineSegmentHandleLockFlag.lockAll) {
+                    return;
+                }
+                const movement = newPosition.sub(center);
+                const tangent = dir;
+                const { b, lengthA, lengthB } = decomposeCacheResult(movement, dir);
+                if (lengthA > 0) {
+                    if (!(lock & LineSegmentHandleLockFlag.lockForward)) {
+                        center.addMulScalarSelf(tangent, lengthA);
+                    }
+                }
+                else if (lengthA < 0) {
+                    if (!(lock & LineSegmentHandleLockFlag.lockBackward)) {
+                        center.addMulScalarSelf(tangent, -lengthA);
+                    }
+                }
+                if (lengthB > 0) {
+                    if (!(lock & LineSegmentHandleLockFlag.lockOrthogonalLeft)) {
+                        center.addMulScalarSelf(b, lengthB);
+                    }
+                }
+                else if (lengthB < 0) {
+                    if (!(lock & LineSegmentHandleLockFlag.lockOrthogonalRight)) {
+                        center.addMulScalarSelf(b, lengthB);
+                    }
+                }
+            },
+        });
+        if (moved) {
+            return true;
+        }
+        return false;
+    }
+    _virtualBox2DHandleProvider = new VirtualBox2DHandleProvider();
+}
+const decomposeCacheResult = (() => {
+    const cacheOrthogonal = new Vec2();
+    const cacheResult = {
+        lengthA: 0,
+        lengthB: 0,
+        b: cacheOrthogonal,
+    };
+    return (input, dir) => {
+        const orthonormal = cacheOrthogonal.copyFrom(dir.orthonormal());
+        const lengthA = Vec2.dot(input, dir);
+        const lengthB = Vec2.dot(input, orthonormal);
+        cacheResult.lengthA = lengthA;
+        cacheResult.lengthB = lengthB;
+        return cacheResult;
+    };
+})();

package/lib/handles/point-handle.d.ts

@@ -0,0 +1,24 @@
+import { Vec2 } from '@cyclonium/core/math/vec2';
+import type { HandleContext } from '../handle-context.js';
+import { HandleProvider } from '../handle-provider.js';
+import type { Vec3 } from 'cc';
+import type { Color } from 'cc';
+export declare enum PointHandleLockFlag {
+    x = 1,
+    y = 2,
+    z = 4,
+    all = 7
+}
+export declare class PointHandleProvider extends HandleProvider {
+    constructor();
+    draw(_ctx: HandleContext, _model: Vec3): boolean;
+    drawSquaredPoint2D(ctx: HandleContext, model: Vec2, props?: {
+        size?: number;
+        lock?: boolean | PointHandleLockFlag;
+        style?: {
+            color?: Color;
+        };
+    }): boolean;
+    private _virtualBox2DHandleProvider;
+}
+//# sourceMappingURL=point-handle.d.ts.map

package/lib/handles/point-handle.js

@@ -0,0 +1,46 @@
+import { Vec2 } from '@cyclonium/core/math/vec2';
+import { HandleProvider } from '../handle-provider.js';
+import { VirtualBox2DHandleProvider } from './virtual-box-2d-handle.js';
+export var PointHandleLockFlag;
+(function (PointHandleLockFlag) {
+    PointHandleLockFlag[PointHandleLockFlag["x"] = 1] = "x";
+    PointHandleLockFlag[PointHandleLockFlag["y"] = 2] = "y";
+    PointHandleLockFlag[PointHandleLockFlag["z"] = 4] = "z";
+    PointHandleLockFlag[PointHandleLockFlag["all"] = 7] = "all";
+})(PointHandleLockFlag || (PointHandleLockFlag = {}));
+export class PointHandleProvider extends HandleProvider {
+    constructor() {
+        super();
+    }
+    draw(_ctx, _model) {
+        return false;
+    }
+    drawSquaredPoint2D(ctx, model, props) {
+        const lockProp = props?.lock;
+        const lock = typeof lockProp === 'boolean'
+            ? (lockProp ? PointHandleLockFlag.all : 0)
+            : (lockProp ?? 0);
+        const sizeProps = props?.size;
+        const size = sizeProps ? new Vec2(sizeProps, sizeProps) : Vec2.ONE;
+        let moved = false;
+        this._virtualBox2DHandleProvider.drawVirtualBox(ctx, model, {
+            size,
+            style: props?.style,
+            onWantMove: (newPosition) => {
+                if (!(lock & PointHandleLockFlag.x)) {
+                    model.x = newPosition.x;
+                    moved = true;
+                }
+                if (!(lock & PointHandleLockFlag.y)) {
+                    model.y = newPosition.y;
+                    moved = true;
+                }
+            },
+        });
+        if (moved) {
+            return true;
+        }
+        return false;
+    }
+    _virtualBox2DHandleProvider = new VirtualBox2DHandleProvider();
+}

package/lib/handles/virtual-box-2d-handle.d.ts

@@ -0,0 +1,28 @@
+import { type HandleContext } from '../handle-context.js';
+import { HandleProvider } from '../handle-provider.js';
+import { Vec2 } from '@cyclonium/core/math/vec2';
+import { Color } from 'cc';
+import { HandleMouseButton } from '../handle-input.js';
+export declare class VirtualBox2DHandleProvider extends HandleProvider {
+    constructor();
+    drawVirtualBox(ctx: HandleContext, center: Vec2, opts: {
+        size: Vec2;
+        rotation?: number;
+        style?: {
+            color?: Color;
+            wireframe?: boolean;
+        };
+        onMouseEnter?: () => void;
+        onMouseExit?: () => void;
+        onMouseMove?: () => void;
+        onMouseDown?: (button: HandleMouseButton) => void;
+        onMouseUp?: (button: HandleMouseButton) => void;
+        onWantMove?: (newPosition: Vec2) => void;
+    }): boolean;
+    private _livingRecords;
+    private _pendingRecords;
+    private _queuedFrameEndTask;
+    private _onFrameEnd;
+    private _processInput;
+}
+//# sourceMappingURL=virtual-box-2d-handle.d.ts.map

package/lib/handles/virtual-box-2d-handle.js

@@ -0,0 +1,149 @@
+import { Bounds2D } from '@cyclonium/core/math/bounds-2d';
+import {} from '../handle-context.js';
+import { HandleProvider } from '../handle-provider.js';
+import { Vec2 } from '@cyclonium/core/math/vec2';
+import { Color, geometry, Quat, Vec3 } from 'cc';
+import { logger } from '@cyclonium/core/log';
+import { HandleMouseButton } from '../handle-input.js';
+export class VirtualBox2DHandleProvider extends HandleProvider {
+    constructor() {
+        super();
+    }
+    drawVirtualBox(ctx, center, opts) {
+        const handleKey = ctx.allocateSequentialKey();
+        let livingRecord;
+        const pendingRecord = this._pendingRecords.get(handleKey);
+        if (pendingRecord) {
+            this._pendingRecords.delete(handleKey);
+            livingRecord = pendingRecord;
+        }
+        else {
+            livingRecord = new VirtualBoxRecord();
+            logger.verbose(`Create virtual box handle ${handleKey}`);
+        }
+        ++livingRecord.liveFrames;
+        livingRecord.bounds.setCenterSize(center, opts.size);
+        this._livingRecords.set(handleKey, livingRecord);
+        const mouseState = livingRecord.mouse;
+        for (const [buttonId_, buttonState] of Object.entries(mouseState.buttons)) {
+            const buttonId = Number(buttonId_);
+            const down = ctx.input.mouseButtonDown(buttonId);
+            buttonState.previousDown = buttonState.down;
+            if (down !== buttonState.down) {
+                buttonState.down = down;
+                buttonState.alterTime = ctx.now;
+                if (down) {
+                    opts.onMouseDown?.(buttonId);
+                }
+                else {
+                    opts.onMouseUp?.(buttonId);
+                }
+            }
+        }
+        const positionMoved = this._processInput(ctx, livingRecord, center, opts);
+        const rotationQuat = opts.rotation
+            ? Quat.fromAxisAngle(new Quat(), Vec3.UNIT_Z, opts.rotation)
+            : undefined;
+        const baseRight = Vec3.UNIT_X;
+        const baseUp = Vec3.UNIT_Y;
+        ctx.renderer.drawRect({
+            center: new Vec3(center.x, center.y, 0),
+            halfExtent: opts.size.mulScalar(0.5),
+            right: rotationQuat ? Vec3.transformQuat(new Vec3(), baseRight, rotationQuat) : baseRight,
+            up: rotationQuat ? Vec3.transformQuat(new Vec3(), baseUp, rotationQuat) : baseUp,
+            color: opts.style?.color ?? Color.WHITE,
+            unlit: true,
+            wireframe: opts.style?.wireframe ?? false,
+        });
+        if (!this._queuedFrameEndTask) {
+            this._queuedFrameEndTask = true;
+            ctx.queueFrameEndTask_internal(this._onFrameEnd.bind(this));
+        }
+        return positionMoved;
+    }
+    _livingRecords = new Map();
+    _pendingRecords = new Map();
+    _queuedFrameEndTask = false;
+    _onFrameEnd() {
+        this._queuedFrameEndTask = false;
+        [this._livingRecords, this._pendingRecords] = [this._pendingRecords, this._livingRecords];
+        this._livingRecords.clear();
+    }
+    _processInput(ctx, record, center, opts) {
+        let positionMoved = false;
+        const currentMousePosition = ctx.input.mousePosition;
+        const mouseRay = ctx.input.mouseRay();
+        const mouseState = record.mouse;
+        mouseState.position.copyFrom(currentMousePosition);
+        if (record.dragRecord.started) {
+            if (!mouseState.buttons[HandleMouseButton.left].down) {
+                record.dragRecord.started = false;
+            }
+            else {
+                ctx.input.captureMouse();
+                const toi = geometry.intersect.rayPlane(mouseRay, record.dragRecord.startPlane);
+                const hasHit = toi !== 0;
+                if (hasHit) {
+                    const hitPoint = new Vec3();
+                    mouseRay.computeHit(hitPoint, toi);
+                    opts.onWantMove?.(new Vec2(hitPoint.x, hitPoint.y));
+                    positionMoved = true;
+                }
+            }
+        }
+        else {
+            const aabb = new geometry.AABB();
+            aabb.center = new Vec3(center.x, center.y, 0);
+            const halfSize = opts.size.mulScalar(0.5);
+            aabb.halfExtents = new Vec3(halfSize.x, halfSize.y, 0);
+            const toi = geometry.intersect.rayAABB(mouseRay, aabb);
+            const entered = toi !== 0;
+            if (entered) {
+                ctx.input.captureMouse();
+                if (!mouseState.entered) {
+                    opts.onMouseEnter?.();
+                }
+                const hitPosition = new Vec3();
+                mouseRay.computeHit(hitPosition, toi);
+                if (mouseState.buttons[HandleMouseButton.left].down && !mouseState.buttons[HandleMouseButton.left].previousDown) {
+                    record.dragRecord.started = true;
+                    record.dragRecord.startPosition.set(hitPosition);
+                    record.dragRecord.startPlane.n.set(mouseRay.d);
+                    record.dragRecord.startPlane.n.negative();
+                    record.dragRecord.startPlane.d = Vec3.len(hitPosition);
+                }
+            }
+            else {
+                if (mouseState.entered) {
+                    opts.onMouseExit?.();
+                }
+            }
+        }
+        return positionMoved;
+    }
+}
+class VirtualBoxRecord {
+    bounds = new Bounds2D();
+    liveFrames = 0;
+    mouse = new VirtualBoxButtonState();
+    dragRecord = new DragRecord();
+}
+class DragRecord {
+    started = false;
+    startPosition = new Vec3();
+    startPlane = new geometry.Plane();
+}
+class VirtualBoxButtonState {
+    entered = false;
+    position = new Vec2();
+    buttons = {
+        [HandleMouseButton.left]: new MouseButtonState(),
+        [HandleMouseButton.right]: new MouseButtonState(),
+        [HandleMouseButton.middle]: new MouseButtonState(),
+    };
+}
+class MouseButtonState {
+    down = false;
+    alterTime = 0;
+    previousDown = false;
+}

package/lib/handles.d.ts

@@ -0,0 +1,34 @@
+import { HandleContext } from './handle-context.js';
+import { Bounds2DHandleProvider } from './handles/bounds-2d-handle.js';
+import { PointHandleProvider } from './handles/point-handle.js';
+import { Color } from 'cc';
+import type { HandleRenderer } from './handle-renderer.js';
+export declare class Handles {
+    constructor(...args: ConstructorParameters<typeof HandleContext>);
+    get input(): import("./handle-input.js").HandleInputContext;
+    get color(): Color;
+    set color(value: Color);
+    destroy_internal(): void;
+    pushScope(key: string): void;
+    popScope(): void;
+    /**
+     * Draw an operable rectangle in scene,
+     * will modify the bounds in place according to user operation,
+     * @returns true if the rectangle is modified.
+     */
+    bounds2DHandle(...args: Handles.Slice1<Parameters<Bounds2DHandleProvider['draw']>>): boolean;
+    squaredPoint2DHandle(...args: Handles.Slice1<Parameters<PointHandleProvider['drawSquaredPoint2D']>>): boolean;
+    drawLine2D(opt: Omit<Parameters<HandleRenderer['drawLine2D']>[0], 'color'>): void;
+    drawPolyline2D(opt: Omit<Parameters<HandleRenderer['drawPolyline2D']>[0], 'color'>): void;
+    drawBox2D(opt: Omit<Parameters<HandleRenderer['drawBox2D']>[0], 'color'>): void;
+    startFrame_internal(opts: HandleContext.FrameStartOptions): void;
+    endFrame_internal(): void;
+    private _handleContext;
+    private _bounds2DHandleProvider;
+    private _pointHandleProvider;
+    private readonly _color;
+}
+export declare namespace Handles {
+    type Slice1<T> = T extends readonly [infer _U, ...infer Rest] ? Rest : never;
+}
+//# sourceMappingURL=handles.d.ts.map

package/lib/handles.js

@@ -0,0 +1,66 @@
+import { HandleContext } from './handle-context.js';
+import { Bounds2DHandleProvider } from './handles/bounds-2d-handle.js';
+import { PointHandleProvider } from './handles/point-handle.js';
+import { Color } from 'cc';
+export class Handles {
+    constructor(...args) {
+        this._handleContext = new HandleContext(...args);
+    }
+    get input() {
+        return this._handleContext.input;
+    }
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        this._color.set(value);
+    }
+    destroy_internal() {
+        this._handleContext.destroy_internal();
+    }
+    pushScope(key) {
+        this._handleContext.pushScope(key);
+    }
+    popScope() {
+        this._handleContext.popScope();
+    }
+    /**
+     * Draw an operable rectangle in scene,
+     * will modify the bounds in place according to user operation,
+     * @returns true if the rectangle is modified.
+     */
+    bounds2DHandle(...args) {
+        return (this._bounds2DHandleProvider ??= new Bounds2DHandleProvider()).draw(this._handleContext, ...args);
+    }
+    squaredPoint2DHandle(...args) {
+        return (this._pointHandleProvider ??= new PointHandleProvider()).drawSquaredPoint2D(this._handleContext, ...args);
+    }
+    drawLine2D(opt) {
+        this._handleContext.renderer.drawLine2D({
+            ...opt,
+            color: this._color,
+        });
+    }
+    drawPolyline2D(opt) {
+        this._handleContext.renderer.drawPolyline2D({
+            ...opt,
+            color: this._color,
+        });
+    }
+    drawBox2D(opt) {
+        this._handleContext.renderer.drawBox2D({
+            ...opt,
+            color: this._color,
+        });
+    }
+    startFrame_internal(opts) {
+        this._handleContext.startFrame_internal(opts);
+    }
+    endFrame_internal() {
+        this._handleContext.endFrame_internal();
+    }
+    _handleContext;
+    _bounds2DHandleProvider;
+    _pointHandleProvider;
+    _color = Color.WHITE.clone();
+}

package/lib/index.d.ts

@@ -0,0 +1,12 @@
+export { HandleContext, HandleKey } from './handle-context.js';
+export { HandleInputContext, HandleMouseButton } from './handle-input.js';
+export type { HandleHostInput, HandleHostMouseInput } from './handle-input.js';
+export { HandleProvider } from './handle-provider.js';
+export { HandleRenderer } from './handle-renderer.js';
+export { Handles } from './handles.js';
+export { Ref } from './ref.js';
+export { Bounds2DHandleProvider, RectHandleLockFlag } from './handles/bounds-2d-handle.js';
+export { LineSegmentHandleLockFlag, LineSegmentHandleProvider } from './handles/line-segment-handle.js';
+export { PointHandleLockFlag, PointHandleProvider } from './handles/point-handle.js';
+export { VirtualBox2DHandleProvider } from './handles/virtual-box-2d-handle.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.js

@@ -0,0 +1,10 @@
+export { HandleContext, HandleKey } from './handle-context.js';
+export { HandleInputContext, HandleMouseButton } from './handle-input.js';
+export { HandleProvider } from './handle-provider.js';
+export { HandleRenderer } from './handle-renderer.js';
+export { Handles } from './handles.js';
+export { Ref } from './ref.js';
+export { Bounds2DHandleProvider, RectHandleLockFlag } from './handles/bounds-2d-handle.js';
+export { LineSegmentHandleLockFlag, LineSegmentHandleProvider } from './handles/line-segment-handle.js';
+export { PointHandleLockFlag, PointHandleProvider } from './handles/point-handle.js';
+export { VirtualBox2DHandleProvider } from './handles/virtual-box-2d-handle.js';

package/lib/ref.d.ts

@@ -0,0 +1,5 @@
+export declare class Ref<T> {
+    value: T;
+    constructor(value: T);
+}
+//# sourceMappingURL=ref.d.ts.map

package/lib/ref.js

@@ -0,0 +1,6 @@
+export class Ref {
+    value;
+    constructor(value) {
+        this.value = value;
+    }
+}

package/package.json

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