@hellixit/hellixitboard 0.1.0

package/dist/types/element/src/typeChecks.d.ts

@@ -0,0 +1,54 @@
+import type { ElementOrToolType } from "@hellixit/hellixitboard/types";
+import type { MarkNonNullable } from "@excalidraw/common/utility-types";
+import type { HellixitboardElement, HellixitboardTextElement, HellixitboardEmbeddableElement, HellixitboardLinearElement, HellixitboardBindableElement, HellixitboardFreeDrawElement, InitializedHellixitboardImageElement, HellixitboardImageElement, HellixitboardTextElementWithContainer, HellixitboardTextContainer, HellixitboardFrameElement, RoundnessType, HellixitboardFrameLikeElement, HellixitboardElementType, HellixitboardIframeElement, HellixitboardIframeLikeElement, HellixitboardMagicFrameElement, HellixitboardArrowElement, HellixitboardElbowArrowElement, HellixitboardLineElement, HellixitboardFlowchartNodeElement, HellixitboardLinearElementSubType } from "./types";
+export declare const isInitializedImageElement: (element: HellixitboardElement | null) => element is InitializedHellixitboardImageElement;
+export declare const isImageElement: (element: HellixitboardElement | null) => element is HellixitboardImageElement;
+export declare const isEmbeddableElement: (element: HellixitboardElement | null | undefined) => element is HellixitboardEmbeddableElement;
+export declare const isIframeElement: (element: HellixitboardElement | null) => element is HellixitboardIframeElement;
+export declare const isIframeLikeElement: (element: HellixitboardElement | null) => element is HellixitboardIframeLikeElement;
+export declare const isTextElement: (element: HellixitboardElement | null) => element is HellixitboardTextElement;
+export declare const isFrameElement: (element: HellixitboardElement | null) => element is HellixitboardFrameElement;
+export declare const isMagicFrameElement: (element: HellixitboardElement | null) => element is HellixitboardMagicFrameElement;
+export declare const isFrameLikeElement: (element: HellixitboardElement | null) => element is HellixitboardFrameLikeElement;
+export declare const isFreeDrawElement: (element?: HellixitboardElement | null) => element is HellixitboardFreeDrawElement;
+export declare const isFreeDrawElementType: (elementType: HellixitboardElementType) => boolean;
+export declare const isLinearElement: (element?: HellixitboardElement | null) => element is HellixitboardLinearElement;
+export declare const isLineElement: (element?: HellixitboardElement | null) => element is HellixitboardLineElement;
+export declare const isArrowElement: (element?: HellixitboardElement | null) => element is HellixitboardArrowElement;
+export declare const isElbowArrow: (element?: HellixitboardElement) => element is HellixitboardElbowArrowElement;
+/**
+ * sharp or curved arrow, but not elbow
+ */
+export declare const isSimpleArrow: (element?: HellixitboardElement) => element is HellixitboardArrowElement;
+export declare const isSharpArrow: (element?: HellixitboardElement) => element is HellixitboardArrowElement;
+export declare const isCurvedArrow: (element?: HellixitboardElement) => element is HellixitboardArrowElement;
+export declare const isLinearElementType: (elementType: ElementOrToolType) => boolean;
+export declare const isBindingElement: (element?: HellixitboardElement | null, includeLocked?: boolean) => element is HellixitboardArrowElement;
+export declare const isBindingElementType: (elementType: ElementOrToolType) => boolean;
+export declare const isBindableElement: (element: HellixitboardElement | null | undefined, includeLocked?: boolean) => element is HellixitboardBindableElement;
+export declare const isRectanguloidElement: (element?: HellixitboardElement | null) => element is HellixitboardBindableElement;
+export declare const isRectangularElement: (element?: HellixitboardElement | null) => element is HellixitboardBindableElement;
+export declare const isTextBindableContainer: (element: HellixitboardElement | null, includeLocked?: boolean) => element is HellixitboardTextContainer;
+export declare const isHellixitboardElement: (element: any) => element is HellixitboardElement;
+export declare const isFlowchartNodeElement: (element: HellixitboardElement) => element is HellixitboardFlowchartNodeElement;
+export declare const hasBoundTextElement: (element: HellixitboardElement | null) => element is MarkNonNullable<HellixitboardBindableElement, "boundElements">;
+export declare const isBoundToContainer: (element: HellixitboardElement | null) => element is HellixitboardTextElementWithContainer;
+export declare const isArrowBoundToElement: (element: HellixitboardArrowElement) => boolean;
+export declare const isUsingAdaptiveRadius: (type: string) => type is "rectangle" | "embeddable" | "iframe" | "image";
+export declare const isUsingProportionalRadius: (type: string) => type is "line" | "arrow" | "diamond";
+export declare const canApplyRoundnessTypeToElement: (roundnessType: RoundnessType, element: HellixitboardElement) => boolean;
+export declare const getDefaultRoundnessTypeForElement: (element: HellixitboardElement) => {
+    type: 2;
+} | {
+    type: 3;
+} | null;
+export declare const getLinearElementSubType: (element: HellixitboardLinearElement) => HellixitboardLinearElementSubType;
+/**
+ * Checks if current element points meet all the conditions for polygon=true
+ * (this isn't a element type check, for that use isLineElement).
+ *
+ * If you want to check if points *can* be turned into a polygon, use
+ *  canBecomePolygon(points).
+ */
+export declare const isValidPolygon: (points: HellixitboardLineElement["points"]) => boolean;
+export declare const canBecomePolygon: (points: HellixitboardLineElement["points"]) => boolean;

package/dist/types/element/src/types.d.ts

@@ -0,0 +1,300 @@
+import type { LocalPoint, Radians } from "@excalidraw/math";
+import type { FONT_FAMILY, ROUNDNESS, TEXT_ALIGN, THEME, VERTICAL_ALIGN } from "@excalidraw/common";
+import type { MakeBrand, MarkNonNullable, Merge, ValueOf } from "@excalidraw/common/utility-types";
+export type ChartType = "bar" | "line" | "radar";
+export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";
+export type FontFamilyKeys = keyof typeof FONT_FAMILY;
+export type FontFamilyValues = typeof FONT_FAMILY[FontFamilyKeys];
+export type Theme = typeof THEME[keyof typeof THEME];
+export type FontString = string & {
+    _brand: "fontString";
+};
+export type GroupId = string;
+export type PointerType = "mouse" | "pen" | "touch";
+export type StrokeRoundness = "round" | "sharp";
+export type RoundnessType = ValueOf<typeof ROUNDNESS>;
+export type StrokeStyle = "solid" | "dashed" | "dotted";
+export type TextAlign = typeof TEXT_ALIGN[keyof typeof TEXT_ALIGN];
+type VerticalAlignKeys = keyof typeof VERTICAL_ALIGN;
+export type VerticalAlign = typeof VERTICAL_ALIGN[VerticalAlignKeys];
+export type FractionalIndex = string & {
+    _brand: "franctionalIndex";
+};
+export type BoundElement = Readonly<{
+    id: HellixitboardLinearElement["id"];
+    type: "arrow" | "text";
+}>;
+type _HellixitboardElementBase = Readonly<{
+    id: string;
+    x: number;
+    y: number;
+    strokeColor: string;
+    backgroundColor: string;
+    fillStyle: FillStyle;
+    strokeWidth: number;
+    strokeStyle: StrokeStyle;
+    roundness: null | {
+        type: RoundnessType;
+        value?: number;
+    };
+    roughness: number;
+    opacity: number;
+    width: number;
+    height: number;
+    angle: Radians;
+    /** Random integer used to seed shape generation so that the roughjs shape
+        doesn't differ across renders. */
+    seed: number;
+    /** Integer that is sequentially incremented on each change. Used to reconcile
+        elements during collaboration or when saving to server. */
+    version: number;
+    /** Random integer that is regenerated on each change.
+        Used for deterministic reconciliation of updates during collaboration,
+        in case the versions (see above) are identical. */
+    versionNonce: number;
+    /** String in a fractional form defined by https://github.com/rocicorp/fractional-indexing.
+        Used for ordering in multiplayer scenarios, such as during reconciliation or undo / redo.
+        Always kept in sync with the array order by `syncMovedIndices` and `syncInvalidIndices`.
+        Could be null, i.e. for new elements which were not yet assigned to the scene. */
+    index: FractionalIndex | null;
+    isDeleted: boolean;
+    /** List of groups the element belongs to.
+        Ordered from deepest to shallowest. */
+    groupIds: readonly GroupId[];
+    frameId: string | null;
+    /** other elements that are bound to this element */
+    boundElements: readonly BoundElement[] | null;
+    /** epoch (ms) timestamp of last element update */
+    updated: number;
+    link: string | null;
+    locked: boolean;
+    customData?: Record<string, any>;
+    /** Stroke-flow animation type. "flow" animates dashes along the stroke. */
+    animationType?: "none" | "flow";
+    /** Direction of the flow animation. */
+    animationDirection?: "forward" | "backward";
+    /** Speed of the animation: 1 (slowest) – 100 (fastest). */
+    animationSpeed?: number;
+}>;
+export type HellixitboardSelectionElement = _HellixitboardElementBase & {
+    type: "selection";
+};
+export type HellixitboardRectangleElement = _HellixitboardElementBase & {
+    type: "rectangle";
+};
+export type HellixitboardDiamondElement = _HellixitboardElementBase & {
+    type: "diamond";
+};
+export type HellixitboardEllipseElement = _HellixitboardElementBase & {
+    type: "ellipse";
+};
+export type HellixitboardEmbeddableElement = _HellixitboardElementBase & Readonly<{
+    type: "embeddable";
+}>;
+export type MagicGenerationData = {
+    status: "pending";
+} | {
+    status: "done";
+    html: string;
+} | {
+    status: "error";
+    message?: string;
+    code: "ERR_GENERATION_INTERRUPTED" | string;
+};
+export type HellixitboardIframeElement = _HellixitboardElementBase & Readonly<{
+    type: "iframe";
+    customData?: {
+        generationData?: MagicGenerationData;
+    };
+}>;
+export type HellixitboardIframeLikeElement = HellixitboardIframeElement | HellixitboardEmbeddableElement;
+export type IframeData = ({
+    intrinsicSize: {
+        w: number;
+        h: number;
+    };
+    error?: Error;
+    sandbox?: {
+        allowSameOrigin?: boolean;
+    };
+} & ({
+    type: "video" | "generic";
+    link: string;
+} | {
+    type: "document";
+    srcdoc: (theme: Theme) => string;
+}));
+export type ImageCrop = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    naturalWidth: number;
+    naturalHeight: number;
+};
+export type HellixitboardImageElement = _HellixitboardElementBase & Readonly<{
+    type: "image";
+    fileId: FileId | null;
+    /** whether respective file is persisted */
+    status: "pending" | "saved" | "error";
+    /** X and Y scale factors <-1, 1>, used for image axis flipping */
+    scale: [number, number];
+    /** whether an element is cropped */
+    crop: ImageCrop | null;
+}>;
+export type InitializedHellixitboardImageElement = MarkNonNullable<HellixitboardImageElement, "fileId">;
+export type HellixitboardFrameElement = _HellixitboardElementBase & {
+    type: "frame";
+    name: string | null;
+};
+export type HellixitboardMagicFrameElement = _HellixitboardElementBase & {
+    type: "magicframe";
+    name: string | null;
+};
+export type HellixitboardFrameLikeElement = HellixitboardFrameElement | HellixitboardMagicFrameElement;
+/**
+ * These are elements that don't have any additional properties.
+ */
+export type HellixitboardGenericElement = HellixitboardSelectionElement | HellixitboardRectangleElement | HellixitboardDiamondElement | HellixitboardEllipseElement;
+export type HellixitboardFlowchartNodeElement = HellixitboardRectangleElement | HellixitboardDiamondElement | HellixitboardEllipseElement;
+export type HellixitboardRectanguloidElement = HellixitboardRectangleElement | HellixitboardImageElement | HellixitboardTextElement | HellixitboardFreeDrawElement | HellixitboardIframeLikeElement | HellixitboardFrameLikeElement | HellixitboardEmbeddableElement | HellixitboardSelectionElement;
+/**
+ * HellixitboardElement should be JSON serializable and (eventually) contain
+ * no computed data. The list of all HellixitboardElements should be shareable
+ * between peers and contain no state local to the peer.
+ */
+export type HellixitboardElement = HellixitboardGenericElement | HellixitboardTextElement | HellixitboardLinearElement | HellixitboardArrowElement | HellixitboardFreeDrawElement | HellixitboardImageElement | HellixitboardFrameElement | HellixitboardMagicFrameElement | HellixitboardIframeElement | HellixitboardEmbeddableElement;
+export type HellixitboardNonSelectionElement = Exclude<HellixitboardElement, HellixitboardSelectionElement>;
+export type Ordered<TElement extends HellixitboardElement> = TElement & {
+    index: FractionalIndex;
+};
+export type OrderedHellixitboardElement = Ordered<HellixitboardElement>;
+export type NonDeleted<TElement extends HellixitboardElement> = TElement & {
+    isDeleted: boolean;
+};
+export type NonDeletedHellixitboardElement = NonDeleted<HellixitboardElement>;
+export type HellixitboardTextElement = _HellixitboardElementBase & Readonly<{
+    type: "text";
+    fontSize: number;
+    fontFamily: FontFamilyValues;
+    text: string;
+    textAlign: TextAlign;
+    verticalAlign: VerticalAlign;
+    containerId: HellixitboardGenericElement["id"] | null;
+    originalText: string;
+    /**
+     * If `true` the width will fit the text. If `false`, the text will
+     * wrap to fit the width.
+     *
+     * @default true
+     */
+    autoResize: boolean;
+    /**
+     * Unitless line height (aligned to W3C). To get line height in px, multiply
+     *  with font size (using `getLineHeightInPx` helper).
+     */
+    lineHeight: number & {
+        _brand: "unitlessLineHeight";
+    };
+}>;
+export type HellixitboardBindableElement = HellixitboardRectangleElement | HellixitboardDiamondElement | HellixitboardEllipseElement | HellixitboardTextElement | HellixitboardImageElement | HellixitboardIframeElement | HellixitboardEmbeddableElement | HellixitboardFrameElement | HellixitboardMagicFrameElement;
+export type HellixitboardTextContainer = HellixitboardRectangleElement | HellixitboardDiamondElement | HellixitboardEllipseElement | HellixitboardArrowElement;
+export type HellixitboardTextElementWithContainer = {
+    containerId: HellixitboardTextContainer["id"];
+} & HellixitboardTextElement;
+export type FixedPoint = [number, number];
+export type BindMode = "inside" | "orbit" | "skip";
+export type FixedPointBinding = {
+    elementId: HellixitboardBindableElement["id"];
+    fixedPoint: FixedPoint;
+    mode: BindMode;
+};
+type Index = number;
+export type PointsPositionUpdates = Map<Index, {
+    point: LocalPoint;
+    isDragging?: boolean;
+}>;
+export type CardinalityArrowhead = "cardinality_one" | "cardinality_many" | "cardinality_one_or_many" | "cardinality_exactly_one" | "cardinality_zero_or_one" | "cardinality_zero_or_many";
+export type ArrowheadLegacy = "dot" | "crowfoot_one" | "crowfoot_many" | "crowfoot_one_or_many";
+export type Arrowhead = "arrow" | "bar" | "circle" | "circle_outline" | "triangle" | "triangle_outline" | "diamond" | "diamond_outline" | CardinalityArrowhead;
+export type AnyArrowhead = Arrowhead | ArrowheadLegacy;
+export type HellixitboardLinearElement = _HellixitboardElementBase & Readonly<{
+    type: "line" | "arrow";
+    points: readonly LocalPoint[];
+    startBinding: FixedPointBinding | null;
+    endBinding: FixedPointBinding | null;
+    startArrowhead: Arrowhead | null;
+    endArrowhead: Arrowhead | null;
+}>;
+export type HellixitboardLineElement = HellixitboardLinearElement & Readonly<{
+    type: "line";
+    polygon: boolean;
+}>;
+export type FixedSegment = {
+    start: LocalPoint;
+    end: LocalPoint;
+    index: Index;
+};
+export type HellixitboardArrowElement = HellixitboardLinearElement & Readonly<{
+    type: "arrow";
+    elbowed: boolean;
+}>;
+export type HellixitboardElbowArrowElement = Merge<HellixitboardArrowElement, {
+    elbowed: true;
+    fixedSegments: readonly FixedSegment[] | null;
+    startBinding: FixedPointBinding | null;
+    endBinding: FixedPointBinding | null;
+    /**
+     * Marks that the 3rd point should be used as the 2nd point of the arrow in
+     * order to temporarily hide the first segment of the arrow without losing
+     * the data from the points array. It allows creating the expected arrow
+     * path when the arrow with fixed segments is bound on a horizontal side and
+     * moved to a vertical and vica versa.
+     */
+    startIsSpecial: boolean | null;
+    /**
+     * Marks that the 3rd point backwards from the end should be used as the 2nd
+     * point of the arrow in order to temporarily hide the last segment of the
+     * arrow without losing the data from the points array. It allows creating
+     * the expected arrow path when the arrow with fixed segments is bound on a
+     * horizontal side and moved to a vertical and vica versa.
+     */
+    endIsSpecial: boolean | null;
+}>;
+export type HellixitboardFreeDrawElement = _HellixitboardElementBase & Readonly<{
+    type: "freedraw";
+    points: readonly LocalPoint[];
+    pressures: readonly number[];
+    simulatePressure: boolean;
+}>;
+export type FileId = string & {
+    _brand: "FileId";
+};
+export type HellixitboardElementType = HellixitboardElement["type"];
+/**
+ * Map of hellixitboard elements.
+ * Unspecified whether deleted or non-deleted.
+ * Can be a subset of Scene elements.
+ */
+export type ElementsMap = Map<HellixitboardElement["id"], HellixitboardElement>;
+/**
+ * Map of non-deleted elements.
+ * Can be a subset of Scene elements.
+ */
+export type NonDeletedElementsMap = Map<HellixitboardElement["id"], NonDeletedHellixitboardElement> & MakeBrand<"NonDeletedElementsMap">;
+/**
+ * Map of all hellixitboard Scene elements, including deleted.
+ * Not a subset. Use this type when you need access to current Scene elements.
+ */
+export type SceneElementsMap = Map<HellixitboardElement["id"], Ordered<HellixitboardElement>> & MakeBrand<"SceneElementsMap">;
+/**
+ * Map of all non-deleted Scene elements.
+ * Not a subset. Use this type when you need access to current Scene elements.
+ */
+export type NonDeletedSceneElementsMap = Map<HellixitboardElement["id"], Ordered<NonDeletedHellixitboardElement>> & MakeBrand<"NonDeletedSceneElementsMap">;
+export type ElementsMapOrArray = readonly HellixitboardElement[] | Readonly<ElementsMap>;
+export type HellixitboardLinearElementSubType = "line" | "sharpArrow" | "curvedArrow" | "elbowArrow";
+export type ConvertibleGenericTypes = "rectangle" | "diamond" | "ellipse";
+export type ConvertibleLinearTypes = HellixitboardLinearElementSubType;
+export type ConvertibleTypes = ConvertibleGenericTypes | ConvertibleLinearTypes;
+export {};

package/dist/types/element/src/utils.d.ts

@@ -0,0 +1,36 @@
+import { type GlobalPoint } from "@excalidraw/math";
+import type { Curve, LineSegment } from "@excalidraw/math";
+import type { AppState, Zoom } from "@hellixit/hellixitboard/types";
+import type { ElementsMap, HellixitboardArrowElement, HellixitboardBindableElement, HellixitboardDiamondElement, HellixitboardElement, HellixitboardFreeDrawElement, HellixitboardLinearElement, HellixitboardRectanguloidElement } from "./types";
+/**
+ * Returns the **rotated** components of freedraw, line or arrow elements.
+ *
+ * @param element The linear element to deconstruct
+ * @returns The rotated in components.
+ */
+export declare function deconstructLinearOrFreeDrawElement(element: HellixitboardLinearElement | HellixitboardFreeDrawElement): [LineSegment<GlobalPoint>[], Curve<GlobalPoint>[]];
+/**
+ * Get the building components of a rectanguloid element in the form of
+ * line segments and curves **unrotated**.
+ *
+ * @param element Target rectanguloid element
+ * @param offset Optional offset to expand the rectanguloid shape
+ * @returns Tuple of **unrotated** line segments (0) and curves (1)
+ */
+export declare function deconstructRectanguloidElement(element: HellixitboardRectanguloidElement, offset?: number): [LineSegment<GlobalPoint>[], Curve<GlobalPoint>[]];
+export declare function getDiamondBaseCorners(element: HellixitboardDiamondElement, offset?: number): Curve<GlobalPoint>[];
+/**
+ * Get the **unrotated** building components of a diamond element
+ * in the form of line segments and curves as a tuple, in this order.
+ *
+ * @param element The element to deconstruct
+ * @param offset An optional offset
+ * @returns Tuple of line **unrotated** segments (0) and curves (1)
+ */
+export declare function deconstructDiamondElement(element: HellixitboardDiamondElement, offset?: number): [LineSegment<GlobalPoint>[], Curve<GlobalPoint>[]];
+export declare const isPathALoop: (points: HellixitboardLinearElement["points"], 
+/** supply if you want the loop detection to account for current zoom */
+zoomValue?: Zoom["value"]) => boolean;
+export declare const getCornerRadius: (x: number, element: HellixitboardElement) => number;
+export declare const getSnapOutlineMidPoint: (point: GlobalPoint, element: HellixitboardBindableElement, elementsMap: ElementsMap, zoom: AppState["zoom"]) => GlobalPoint | undefined;
+export declare const projectFixedPointOntoDiagonal: (arrow: HellixitboardArrowElement, point: GlobalPoint, element: HellixitboardBindableElement, startOrEnd: "start" | "end", elementsMap: ElementsMap, zoom: AppState["zoom"], isMidpointSnappingEnabled?: boolean) => GlobalPoint | null;

package/dist/types/element/src/zindex.d.ts

@@ -0,0 +1,13 @@
+import type { AppState } from "@hellixit/hellixitboard/types";
+import type { GlobalPoint } from "@excalidraw/math";
+import type { Scene } from "./Scene";
+import type { HellixitboardArrowElement, HellixitboardElement, NonDeletedHellixitboardElement, NonDeletedSceneElementsMap, Ordered, OrderedHellixitboardElement } from "./types";
+/**
+ * Moves the arrow element above any bindable elements it intersects with or
+ * hovers over.
+ */
+export declare const moveArrowAboveBindable: (point: GlobalPoint, arrow: HellixitboardArrowElement, elements: readonly Ordered<NonDeletedHellixitboardElement>[], elementsMap: NonDeletedSceneElementsMap, scene: Scene, hit?: NonDeletedHellixitboardElement) => readonly OrderedHellixitboardElement[];
+export declare const moveOneLeft: (allElements: readonly HellixitboardElement[], appState: AppState, scene: Scene) => readonly HellixitboardElement[];
+export declare const moveOneRight: (allElements: readonly HellixitboardElement[], appState: AppState, scene: Scene) => readonly HellixitboardElement[];
+export declare const moveAllLeft: (allElements: readonly HellixitboardElement[], appState: AppState) => readonly HellixitboardElement[] | HellixitboardElement[];
+export declare const moveAllRight: (allElements: readonly HellixitboardElement[], appState: AppState) => readonly HellixitboardElement[] | HellixitboardElement[];