@formicoidea/labre-core 0.23.0

package/src/_pkgs/std/gfx/interactivity/types/drag.ts

@@ -0,0 +1,73 @@
+import type { Bound } from '../../../../global/gfx/index.js';
+
+import type { GfxBlockComponent } from '../../../view';
+import type { GfxModel } from '../../model/model';
+import type { GfxElementModelView } from '../../view/view';
+
+export type DragInitializationOption = {
+  movingElements: GfxModel[];
+  event: PointerEvent | MouseEvent;
+  onDragEnd?: () => void;
+};
+
+export type DragExtensionInitializeContext = {
+  /**
+   * The elements that are being dragged.
+   * The extension can modify this array to add or remove dragging elements.
+   */
+  elements: GfxModel[];
+
+  /**
+   * Prevent the default drag behavior. The following drag events will not be triggered.
+   */
+  preventDefault: () => void;
+
+  /**
+   * The start position of the drag in model space.
+   */
+  dragStartPos: Readonly<{
+    x: number;
+    y: number;
+  }>;
+};
+
+export type ExtensionBaseEvent = {
+  /**
+   * The elements that respond to the event.
+   */
+  elements: {
+    view: GfxBlockComponent | GfxElementModelView;
+    originalBound: Bound;
+    model: GfxModel;
+  }[];
+
+  /**
+   * The mouse event
+   */
+  event: PointerEvent;
+
+  /**
+   * The start position of the drag in model space.
+   */
+  dragStartPos: Readonly<{
+    x: number;
+    y: number;
+  }>;
+
+  /**
+   * The last position of the drag in model space.
+   */
+  dragLastPos: Readonly<{
+    x: number;
+    y: number;
+  }>;
+};
+
+export type ExtensionDragStartContext = ExtensionBaseEvent;
+
+export type ExtensionDragMoveContext = ExtensionBaseEvent & {
+  dx: number;
+  dy: number;
+};
+
+export type ExtensionDragEndContext = ExtensionDragMoveContext;

package/src/_pkgs/std/gfx/interactivity/types/resize.ts

@@ -0,0 +1,41 @@
+import type { IBound, IPoint, IVec } from '../../../../global/gfx/index.js';
+
+import type { GfxModel } from '../../model/model';
+import type { ResizeHandle } from '../resize/manager';
+
+export type ExtensionElementResizeContext = {
+  elements: GfxModel[];
+};
+
+export type ExtensionElementResizeStartContext = {
+  elements: GfxModel[];
+
+  /**
+   * The position of the handle in the browser coordinate space.
+   */
+  handlePos: IVec;
+
+  /**
+   * The sign (or normal vector) of the handle.
+   */
+  handleSign: IPoint;
+
+  handle: ResizeHandle;
+};
+
+export type ExtensionElementResizeEndContext =
+  ExtensionElementResizeStartContext;
+
+export type ExtensionElementResizeMoveContext =
+  ExtensionElementResizeStartContext & {
+    scaleX: number;
+    scaleY: number;
+
+    originalBound: IBound;
+
+    currentHandlePos: IVec;
+
+    lockRatio: boolean;
+
+    suggest: (distance: { scaleX: number; scaleY: number }) => void;
+  };

package/src/_pkgs/std/gfx/interactivity/types/select.ts

@@ -0,0 +1,33 @@
+import type { GfxModel } from '../../model/model';
+
+export type ExtensionElementSelectContext = {
+  /**
+   * The candidate elements for selection.
+   */
+  candidates: GfxModel[];
+
+  /**
+   * The element which is ready to be selected.
+   */
+  target: GfxModel;
+
+  /**
+   * Use to change the target element of selection.
+   * @param element
+   * @returns
+   */
+  suggest: (element: {
+    /**
+     * The suggested element id
+     */
+    id: string;
+
+    /**
+     * The priority of the suggestion. If there are multiple suggestions coming from different extensions,
+     * the one with the highest priority will be used.
+     *
+     * Default to 0.
+     */
+    priority?: number;
+  }) => void;
+};

package/src/_pkgs/std/gfx/interactivity/types/view.ts

@@ -0,0 +1,173 @@
+import type { Bound, IBound, IPoint } from '../../../../global/gfx/index.js';
+
+import type { GfxBlockComponent } from '../../../view/element/gfx-block-component.js';
+import type { GfxModel } from '../../model/model.js';
+import type { GfxElementModelView } from '../../view/view.js';
+import type { ResizeHandle } from '../resize/manager.js';
+
+export type DragStartContext = {
+  /**
+   * The elements that are being dragged
+   */
+  elements: {
+    view: GfxBlockComponent | GfxElementModelView;
+    originalBound: Bound;
+    model: GfxModel;
+  }[];
+
+  /**
+   * The bound of element when drag starts
+   */
+  currentBound: Bound;
+};
+
+export type DragMoveContext = DragStartContext & {
+  /**
+   * The delta x of current drag position compared to the start position in model coordinate.
+   */
+  dx: number;
+
+  /**
+   * The delta y of current drag position compared to the start position in model coordinate.
+   */
+  dy: number;
+};
+
+export type DragEndContext = DragMoveContext;
+
+export type ResizeConstraint = {
+  minWidth?: number;
+  minHeight?: number;
+
+  maxWidth?: number;
+  maxHeight?: number;
+  allowedHandlers?: ResizeHandle[];
+
+  /**
+   * Whether to lock the aspect ratio of the element when resizing.
+   * If the value is an array, it will only lock the aspect ratio when resizing the specified handles.
+   */
+  lockRatio?: boolean | ResizeHandle[];
+};
+
+export type BeforeResizeContext = {
+  /**
+   * The elements that will be resized
+   */
+  elements: (GfxBlockComponent | GfxElementModelView)[];
+
+  /**
+   * Set the constraint before resize starts.
+   */
+  set: (constraint: ResizeConstraint) => void;
+};
+
+export type ResizeStartContext = {
+  /**
+   * The handle that is used to resize the element
+   */
+  handle: ResizeHandle;
+
+  /**
+   * The resize constraint.
+   */
+  constraint: Readonly<Required<ResizeConstraint>>;
+};
+
+export type ResizeMoveContext = ResizeStartContext & {
+  /**
+   * The element bound when resize starts
+   */
+  originalBound: Bound;
+
+  newBound: Bound;
+
+  /**
+   * The matrix that used to transform the element.
+   */
+  matrix: DOMMatrix;
+
+  lockRatio: boolean;
+};
+
+export type ResizeEndContext = ResizeStartContext;
+
+export type RotateConstraint = {
+  rotatable?: boolean;
+};
+
+export type BeforeRotateContext = {
+  /**
+   * The elements that will be rotated
+   */
+  elements: (GfxBlockComponent | GfxElementModelView)[];
+
+  /**
+   * Set the constraint before rotate starts.
+   */
+  set: (constraint: RotateConstraint) => void;
+};
+
+export type RotateStartContext = {
+  constraint: Readonly<Required<RotateConstraint>>;
+};
+
+export type RotateMoveContext = RotateStartContext & {
+  newBound: Bound;
+
+  originalBound: Bound;
+
+  newRotate: number;
+
+  originalRotate: number;
+
+  matrix: DOMMatrix;
+};
+
+export type RotateEndContext = RotateStartContext;
+
+export type SelectableContext = {
+  /**
+   * Whether is multi-select, usually triggered by shift key
+   */
+  multiSelect: boolean;
+
+  /**
+   * The pointer event that triggers the selection
+   */
+  event: PointerEvent;
+
+  /**
+   * The model position of the event pointer
+   */
+  position: IPoint;
+};
+
+export type SelectContext = SelectableContext & {
+  /**
+   * The selected state of the element
+   */
+  selected: boolean;
+};
+
+export type BoxSelectionContext = {
+  box: Readonly<
+    IBound & {
+      startX: number;
+      startY: number;
+      endX: number;
+      endY: number;
+    }
+  >;
+};
+
+export type GfxViewTransformInterface = {
+  onDragStart: (context: DragStartContext) => void;
+  onDragMove: (context: DragMoveContext) => void;
+  onDragEnd: (context: DragEndContext) => void;
+
+  /**
+   * When the element is selected by box selection, return false to prevent the default selection behavior.
+   */
+  onBoxSelected: (context: BoxSelectionContext) => boolean | void;
+};

package/src/_pkgs/std/gfx/keyboard.ts

@@ -0,0 +1,51 @@
+import { DisposableGroup } from '../../global/disposable/index.js';
+import { Signal } from '@preact/signals-core';
+
+import type { BlockStdScope } from '../scope/std-scope.js';
+
+export class KeyboardController {
+  private readonly _disposable = new DisposableGroup();
+
+  shiftKey$ = new Signal<boolean>(false);
+
+  spaceKey$ = new Signal<boolean>(false);
+
+  constructor(readonly std: BlockStdScope) {
+    this._init();
+  }
+
+  private _init() {
+    this._disposable.add(
+      this._listenKeyboard('keydown', evt => {
+        this.shiftKey$.value = evt.shiftKey && evt.key === 'Shift';
+        this.spaceKey$.value = evt.code === 'Space';
+      })
+    );
+
+    this._disposable.add(
+      this._listenKeyboard('keyup', evt => {
+        this.shiftKey$.value =
+          evt.shiftKey && evt.key === 'Shift' ? true : false;
+
+        if (evt.code === 'Space') {
+          this.spaceKey$.value = false;
+        }
+      })
+    );
+  }
+
+  private _listenKeyboard(
+    event: 'keydown' | 'keyup',
+    callback: (keyboardEvt: KeyboardEvent) => void
+  ) {
+    document.addEventListener(event, callback, false);
+
+    return () => {
+      document.removeEventListener(event, callback, false);
+    };
+  }
+
+  dispose() {
+    this._disposable.dispose();
+  }
+}