@labelbee/lb-annotation 1.0.0-alpha.1

package/dist/types/core/toolOperation/LineToolOperation.d.ts

@@ -0,0 +1,443 @@
+/**
+ * @author Glenfiddish <edwinlee0927@hotmail.com>
+ * @file Implement LineTool's interaction
+ * @date 2022-06-02
+ */
+import { BasicToolOperation, IBasicToolOperationProps } from './basicToolOperation';
+import TextAttributeClass from './textAttributeClass';
+declare enum EStatus {
+    Create = 0,
+    /** 正在激活 */
+    Active = 1,
+    /** 没有操作，初始化状态 */
+    None = 2
+}
+/** 曲线分割点数 */
+export declare const SEGMENT_NUMBER = 16;
+export declare const LINE_ORDER_OFFSET: {
+    x: number;
+    y: number;
+};
+/** 圆的半径 */
+export declare const POINT_RADIUS = 3;
+/** 圆的激活半径 */
+export declare const POINT_ACTIVE_RADIUS = 5;
+/** 内侧圆的半径 */
+export declare const INNER_POINT_RADIUS = 2;
+interface ILineOperationProps extends IBasicToolOperationProps {
+}
+declare class LineToolOperation extends BasicToolOperation {
+    /**
+     * 渲染激活的线段
+     * @param coord 当前的坐标
+     * @param e 鼠标事件
+     */
+    drawActivatedLine: (coord?: ICoordinate, e?: MouseEvent, hideTempAxis?: boolean) => void;
+    _textAttributInstance?: TextAttributeClass;
+    /** 线条是否被选中 */
+    get isLineSelected(): "" | ILinePoint[] | undefined;
+    /** 选中点线条的点 */
+    get selectedLinePoints(): any[];
+    /**
+     * 绘制hover的点
+     * @param coord
+     */
+    drawHoverPoint: (coord: ICoordinate) => void;
+    selectedID?: string;
+    updatedLine: ILine;
+    toolName: string;
+    private lineList;
+    private activeLine?;
+    private status;
+    private isMousedown;
+    private prevAxis;
+    private activeArea?;
+    /** 临时点的渲染坐标 */
+    private cursor?;
+    private selectedPoint?;
+    private actionsHistory?;
+    private coordsInsideActiveArea;
+    private hoverLineSegmentIndex;
+    private isShift;
+    private hoverPointID?;
+    private dependToolConfig?;
+    private isReference;
+    private _textAttributeInstance?;
+    private textEditingID?;
+    private isLineValid;
+    private lineDragging;
+    private selectedIDs;
+    constructor(props: ILineOperationProps);
+    /** 创建状态 */
+    get isCreate(): boolean;
+    /** 激活状态 */
+    get isActive(): boolean;
+    /** 无状态  */
+    get isNone(): boolean;
+    /** 线条类型是否为曲线 */
+    get isCurve(): boolean;
+    /** 线条是否为多色 */
+    get isMultipleColor(): boolean;
+    get imageSize(): any;
+    get lineListLen(): number;
+    /** 是否允许边缘吸附 */
+    get edgeAdsorptionEnabled(): any;
+    get attributeConfigurable(): any;
+    get isTextConfigurable(): any;
+    get isDependPolygon(): boolean;
+    get isDependRect(): boolean;
+    get isCurrentAttributeLocked(): boolean;
+    get attributeFilteredLines(): ILine[];
+    get enableOutOfTarget(): any;
+    /**
+     * Judgement of showing Order.
+     *
+     * Origin Config of LineTool: showOrder.
+     * Configurable of other tools: isShowOrder.
+     */
+    get showOrder(): any;
+    get edgeAdsorption(): any;
+    get attributeList(): any;
+    get lowerLimitPointNum(): any;
+    get upperLimitPointNum(): any;
+    get textCheckType(): any;
+    get customFormat(): any;
+    get dataList(): ILine[];
+    get hasActiveLine(): boolean | undefined;
+    /**
+     * 视野内的线条
+     */
+    get viewPortLines(): ILine[];
+    get lineStyle(): {
+        lineWidth: any;
+        color: any;
+        opacity: any;
+    };
+    get selectedText(): string;
+    /**
+     * 获取当前页面标注结果
+     */
+    get currentPageResult(): ILine[];
+    updateStatus(status: EStatus, resetText?: boolean): void;
+    isInBasicPolygon(coord: ICoordinate): boolean;
+    getPolygonPointList(): any;
+    /**
+     * 渲染坐标计算获取下一个点
+     * @param coord
+     * @returns 绝对坐标
+     */
+    getNextCoordByRenderCoord(renderCoord: ICoordinate): ICoordinate | undefined;
+    /**
+     * 绝对坐标计算获取下一个点
+     * @param coord
+     * @returns 渲染坐标
+     */
+    getNextCoordByAbsCoord(absCoord: ICoordinate): ICoordinate | undefined;
+    /**
+     * 检查点是否在线上
+     * @param pointList 所有点
+     * @param checkPoint
+     * @param scope
+     */
+    pointInLine(pointList: ILinePoint[], checkPoint: ICoordinate, scope: number): boolean;
+    /**
+     * 根据坐标绘制圆点
+     * @param coord
+     * @param size
+     * @param color
+     */
+    arc(coord: ICoordinate, size?: number, color?: string): void;
+    /**
+     *  对存在绘制对象，绘制热区
+     */
+    renderActiveArea(): void;
+    /**
+     * Update selectedIDs and rerender
+     * @param selectedIDs
+     */
+    setSelectedIDs(selectedIDs: string[]): void;
+    setSelectedID(newID?: string): void;
+    /**
+     * 添加点
+     * @param coord 坐标
+     */
+    addLinePoint(coord: ICoordinate): void;
+    setCreatStatusAndAddPoint(coord: ICoordinate, isRestText?: boolean): void;
+    /**
+     * 当前激活的线条是否为有效线, 优先获取存在的数据
+     */
+    isActiveLineValid(): boolean | undefined;
+    nextOrder(): number;
+    drawCurveLine: (ctx: any, points: ILinePoint[], config: any, applyLineWidth: boolean | undefined, isReference: boolean | undefined, hoverLineSegmentIndex: number) => void;
+    /**
+     * 绘制线段
+     * @param points 点列表
+     * @param cursor 临时的左边，用于实时绘制
+     * @param color 线条颜色
+     * @param showPoint 是否显示点
+     */
+    drawLine: (points: Array<ILinePoint | ICoordinate>, cursor: ICoordinate | undefined, color: string, showPoint?: boolean, isActive?: boolean) => void;
+    drawStraightLine: (points: any[], config: any, isActive?: boolean) => void;
+    getLineColorByAttribute(line: {
+        attribute: string;
+        valid: boolean;
+    } | ILine, isSelected?: boolean): string;
+    drawLines: () => void;
+    /**
+     * 渲染已经绘制的线段
+     */
+    render: (nextPoint?: IPoint) => void;
+    /** 重新计算并渲染热区 */
+    updateActiveArea(): void;
+    getActiveArea(): {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    } | undefined;
+    /**
+     * 绘制线条序号（包含属性或者标签）
+     * @param coord
+     * @param order
+     * @param color
+     * @param label
+     * @param attribute
+     * @param valid
+     */
+    drawLineNumber(coord: ICoordinate, order: number | undefined, color: string, label?: string, attribute?: string, valid?: boolean): void;
+    /**
+     * 绘制线条的文本属性
+     * @param coord
+     * @param text
+     * @param color
+     */
+    drawLineTextAttribute(coord: ICoordinate, color: string, text?: string): void;
+    /**
+     * Draw the text of lineLength
+     *
+     * It will be controlled by showLineLength.
+     */
+    drawLineLength(pointList: ILinePoint[], color: string): void;
+    drawText(coord: ICoordinate, text: string, color: string, lineWidth?: number): void;
+    /**
+     * 更新热区
+     * @param offsetX
+     * @param offsetY
+     */
+    moveActiveArea(offsetX: number, offsetY: number): void;
+    /**
+     * 找到当前hover的点
+     * @param coord
+     */
+    findHoveredPoint(coord: ICoordinate): ILinePoint | undefined;
+    /** 找到当前hover的线段 */
+    findHoverLine(coord: ICoordinate): ILine | undefined;
+    /**
+     * 找到当前点的边缘吸附范围
+     * @param coord
+     */
+    getAdsorptionPoint(coord: ICoordinate): ICoordinate | undefined;
+    /**
+     * 找到由pointList连成线的最近的点, 优先匹配顶点
+     * @param axisAreas
+     * @param coord 渲染坐标
+     * @param pointList
+     * @returns 落点的渲染坐标
+     */
+    findNearestPoint(pointList: ICoordinate[], coord: ICoordinate, minLength?: number): {
+        point: ICoordinate;
+        minDistance: number;
+    } | undefined;
+    getPointList(pointList: ILinePoint[]): any[];
+    /**
+     * 计算依赖拉框、多边形的情况下移动后点是否都在范围内
+     * @param offsetX
+     * @param offsetY
+     */
+    moveLineInPolygon: (offsetX: number, offsetY: number) => false | undefined;
+    /**
+     * 在矩形内移动线条
+     * @param offsetX x轴的偏移量
+     * @param offsetY y轴的偏移量
+     * @param rectHorizontalRange 矩形的水平范围
+     * @param rectVerticalRange 矩形的垂直范围
+     */
+    moveLineInRectRange: (offsetX: number, offsetY: number, rectHorizontalRange: number[], rectVerticalRange: number[]) => void;
+    /**
+     * 移动选中的线段
+     * @param coord
+     */
+    moveSelectedLine(coord: ICoordinate): void;
+    /**
+     * 移动选中的点
+     * @param coord
+     */
+    moveSelectPoint(coord: ICoordinate): void;
+    /**
+     * 根据当前键盘事件和配置获取下一个点的坐标
+     * @param e
+     * @param coord
+     */
+    getCoordByConfig(e: MouseEvent | KeyboardEvent | {
+        altKey: boolean;
+        shiftKey?: boolean;
+    }, coord: ICoordinate): ICoordinate | undefined;
+    /**
+     * 计算出下一个将要绘制的点
+     * @param e
+     * @param nextPoint
+     */
+    getNextPoint(e: MouseEvent | KeyboardEvent | {
+        altKey: boolean;
+        shiftKey?: boolean;
+    }, nextPoint: ICoordinate): ICoordinate | undefined;
+    lineHover(): void;
+    /** 鼠标移动事件 */
+    mouseMoveHandler(e: MouseEvent): void;
+    onMouseMove(e: MouseEvent): void;
+    /**
+     * 设置激活区域
+     * @param coord
+     * @param outsideCancel
+     * @todo 拖拽区域取消选中
+     */
+    setActiveArea(coord: ICoordinate, outsideCancel?: boolean): void;
+    /**
+     * 根据id选中线条
+     * @param id
+     */
+    setActiveLineByID(id: string): void;
+    setActiveLine(pointList?: ILinePoint[]): void;
+    onRightClick: (e: MouseEvent) => void;
+    historyChanged(funcName: 'undo' | 'redo'): void;
+    updateSelectedAttributeAfterHistoryChanged: () => void;
+    undo(): void;
+    redo(): void;
+    /** 坐标是否在图片内 */
+    isCoordInsideTarget(coord: ICoordinate): boolean;
+    /**
+     * 获取当前点插入的索引
+     * @returns index
+     */
+    getPointInsertIndex(coord?: ICoordinate, scope?: number): number;
+    getLineWidthScope(): any;
+    isMouseCoordOutsideActiveArea(): boolean;
+    /** 是否超过上限点 */
+    isLinePointsExceed(): any;
+    isLinePointsNotEnough(): boolean | undefined;
+    updateLineSegmentSpecial(coord: ICoordinate): void;
+    onLeftClick: (e: MouseEvent) => void;
+    addLinePointToActiveLine(): void;
+    onMouseDown(e: MouseEvent): void;
+    lineHasChanged(): boolean;
+    updateLines(): void;
+    onMouseUp(e: MouseEvent): void;
+    onDblclick: () => void;
+    isTextValid(text: string): boolean | undefined;
+    createLineData(): ILine;
+    /**
+     * 停止当前的线条绘制
+     * @param isAppend
+     */
+    stopLineCreating(isAppend?: boolean): void;
+    setActiveStatus(id?: string): void;
+    /**
+     * 设置为无状态
+     * @param updateStatus
+     */
+    setNoneStatus(updateStatus?: boolean): void;
+    setKeyDownStatus(e: KeyboardEvent, value?: boolean): void;
+    /** 续标当前激活的线条 */
+    continueToEdit(): void;
+    onKeyUp: (e: KeyboardEvent) => void;
+    /** 创建无效线条，activeLineID存在时为续标（没有按ctrl时不会修改其有无效性），不会设置无效的属性 */
+    setInvalidLineOnCreating(e: KeyboardEvent): void;
+    onKeyDown(e: KeyboardEvent): void;
+    /**
+     * 切换到下一个线条
+     * @param e
+     */
+    private selectToNextLine;
+    /**
+     * 在线条创建时候的键盘事件, 并触发渲染
+     *  1.设为无效。
+     *  2.Alt取消边缘吸附。
+     *  3.Shift绘制垂直/水平线
+     * @param e
+     */
+    keyboardEventWhileLineCreating(e: KeyboardEvent): void;
+    /**
+     * 计算出下一个点并渲染
+     * @param e
+     * @param coord
+     */
+    renderNextPoint(e: MouseEvent | KeyboardEvent | {
+        altKey: boolean;
+    }, coord: ICoordinate): void;
+    deleteSelectedLine(coord: ICoordinate): void;
+    /**
+     * 删除当前选中的点
+     * @param hoverPointID
+     */
+    deleteSelectedLinePoint(selectedID: string): void;
+    /**
+     * 右键双击事件，
+     * 1. 删除线
+     * 2. 删除点
+     * @param e
+     */
+    onRightDblClick: (e: MouseEvent) => void;
+    /** 删除激活的线段 */
+    deleteLine(): void;
+    setInvalidLine(id?: string, valid?: boolean, isRender?: boolean): void;
+    /** 数据清空 */
+    empty(): void;
+    /** 设置线条属性 */
+    setAttribute(attribute: string): void;
+    /** 设置线条文本标注属性 */
+    setTextAttribute(text: string): void;
+    /** 更新线条的属性 */
+    setLineAttribute(key: 'attribute' | 'textAttribute', value: string, id?: string): void;
+    /** 更新外部属性列表的选中值 */
+    updateAttribute(attribute: string): void;
+    /** 更新线条的属性 */
+    updateLineAttributes(line: ILine): void;
+    lineStatusChanged(): void;
+    updateTextAttribute(text: string): void;
+    /** 保存当前绘制的数据, 避免创建中的数据不会被保存到 */
+    saveData(): void;
+    setTextEditingID(id: string): void;
+    setSelectedLineID(id?: string): void;
+    attributeLockListChange(attributeLockList: string[]): void;
+    setReference: (isReference: boolean) => void;
+    /**
+     * 计算带点数是否超出限制
+     * @param count
+     */
+    pointsWithinRange: (count: number) => boolean;
+    setResult(lineList: ILine[]): void;
+    setLineList: (lineList: ILine[]) => void;
+    setConfig(config: string): void;
+    toggleIsHide(): void;
+    clearCanvas(): void;
+    /**
+     *  清除当前的所有数据
+     */
+    clearResult(): void;
+    exportData(): any[];
+    setDefaultAttribute(attribute?: string): void;
+    /**
+     * 用于 TextAttributeClass 的数据获取
+     * @returns
+     */
+    getCurrentSelectedData(): {
+        color: any;
+        textAttribute: string;
+    };
+    renderTextAttribute(): void;
+    getTextIconSvg(attribute?: string): any;
+    /** 更新文本输入，并且进行关闭 */
+    updateSelectedTextAttribute(newTextAttribute?: string): void;
+    textChange: (v: string) => void;
+}
+export default LineToolOperation;

package/dist/types/core/toolOperation/ScribbleTool.d.ts

@@ -0,0 +1,65 @@
+import { EScribblePattern, EToolName } from '@/constant/tool';
+import { BasicToolOperation, IBasicToolOperationProps } from './basicToolOperation';
+interface IProps extends IBasicToolOperationProps {
+}
+declare class ScribbleTool extends BasicToolOperation {
+    toolName: EToolName;
+    defaultAttributeInfo?: IInputList;
+    config: IScribbleConfig;
+    private action;
+    private cacheCanvas?;
+    private cacheContext?;
+    private penSize;
+    private startPoint?;
+    constructor(props: IProps);
+    get cursorErase(): string;
+    get defaultCursor(): string;
+    get color(): string;
+    get penSizeWithZoom(): number;
+    get cacheCanvasToDataUrl(): string | undefined;
+    getOriginCoordinate: (e: MouseEvent) => {
+        x: number;
+        y: number;
+        specialPoint?: boolean | undefined;
+        specialEdge?: boolean | undefined;
+    } | {
+        x: number;
+        y: number;
+    };
+    setPenSize(size: number): void;
+    initCacheCanvas(imgNode?: HTMLImageElement): void;
+    updateCacheCanvasSize(imgNode: HTMLImageElement): void;
+    updateUrl2CacheContext(url: string): void;
+    setImgNode(imgNode: HTMLImageElement, basicImgInfo?: Partial<{
+        valid: boolean;
+        rotate: number;
+    }>): void;
+    setResult(data: IScribbleData[]): void;
+    onKeyDown(e: KeyboardEvent): boolean | void;
+    eventBinding(): void;
+    onMouseDown: (e: MouseEvent) => undefined;
+    onMouseMove: (e: MouseEvent) => undefined;
+    onMouseUp: (e: MouseEvent) => undefined;
+    mouseEvents: (eventType: 'onMouseMove' | 'onMouseUp' | 'onMouseDown') => (() => void) | ((e: MouseEvent) => void) | ((e: MouseEvent) => void) | ((e: MouseEvent) => void) | (() => void) | ((e: MouseEvent) => void);
+    setPattern: (pattern: EScribblePattern) => void;
+    setDefaultAttribute(attributeValue: string): void;
+    clearStatusAfterLeave(): void;
+    onMouseLeave(): void;
+    onScribbleStart(e: MouseEvent): void;
+    onScribbleMove(e: MouseEvent): void;
+    onScribbleEnd(): void;
+    eraseArc(e: MouseEvent): void;
+    onEraseStart(e: MouseEvent): void;
+    onEraseMove(e: MouseEvent): void;
+    onEraseEnd(): void;
+    exportData(): any[];
+    clearCacheCanvas(): void;
+    clearResult(): void;
+    renderPoint(radius: number): void;
+    renderBorderPoint(radius: number): void;
+    render(): void;
+    /** 撤销 */
+    undo(): void;
+    redo(): void;
+}
+export default ScribbleTool;

package/dist/types/core/toolOperation/TextToolOperation.d.ts

@@ -0,0 +1,41 @@
+import { BasicToolOperation, IBasicToolOperationProps } from './basicToolOperation';
+interface ITextResult {
+    id: string;
+    sourceID: string;
+    value: {
+        [key: string]: string;
+    };
+}
+interface ITextToolProps extends IBasicToolOperationProps {
+}
+declare class TextToolOperation extends BasicToolOperation {
+    textList: ITextResult[];
+    constructor(props: ITextToolProps);
+    get dataList(): ITextResult[];
+    get textValueContainerID(): string;
+    get textValueContainer(): HTMLElement | null;
+    get currentPageResult(): ITextResult[];
+    setResult(textResultList: ITextResult[]): void;
+    /** 获取单个初始值 */
+    getSingleResult: (sourceID?: string) => ITextResult;
+    /**
+     * 获取初始值结果列表
+     */
+    getInitResultList: (dataSourceStep: number, basicResultList: any[]) => ITextResult[];
+    updateTextValue(k: string, v: string): void;
+    /**
+     *
+     * @param key
+     * @param value
+     */
+    renderText(key: string, value: string): void;
+    getTextDomID(key: string): string;
+    /** 初始化文本渲染元素 */
+    initTextDisplayContainer(): void;
+    exportData(): any[];
+    destroyCanvas(): void;
+    onKeyDown(e: KeyboardEvent): void;
+    /** 切换文本区域的显示 */
+    toggleTextContainerVisible(isVisible?: boolean): void;
+}
+export default TextToolOperation;

package/dist/types/core/toolOperation/ViewOperation.d.ts

@@ -0,0 +1,102 @@
+/**
+ * 查看模式 - 支持简单数据注入查看
+ */
+import { TAnnotationViewData, TAnnotationViewLine, TAnnotationViewPolygon, TAnnotationViewBox3d, IBasicStyle, TAnnotationViewCuboid } from '@labelbee/lb-utils';
+import { BasicToolOperation, IBasicToolOperationProps } from './basicToolOperation';
+type IViewOperationProps = {
+    style: IBasicStyle;
+    annotations: TAnnotationViewData[];
+} & IBasicToolOperationProps;
+export interface ISpecificStyle {
+    stroke: string;
+    thickness: number;
+    fill: string;
+    radius: number;
+}
+export interface IFontStyle {
+    fontFamily: string;
+    fontSize: number;
+}
+export default class ViewOperation extends BasicToolOperation {
+    style: IBasicStyle;
+    annotations: TAnnotationViewData[];
+    private mouseHoverID?;
+    private loading;
+    private renderDomInstance;
+    private connectionPoints;
+    private connectPointsStatus?;
+    constructor(props: IViewOperationProps);
+    clearConnectionPoints(): void;
+    /**
+     * Get the connection points in annotationData.
+     * @param newAnnotations
+     */
+    checkConnectionPoints(newAnnotations?: TAnnotationViewData[]): void;
+    setLoading(loading: boolean): void;
+    onMouseLeave(): void;
+    onMouseDown(e: MouseEvent): true | undefined;
+    onMouseMove(e: MouseEvent): void;
+    getHoverRectID: (e: MouseEvent) => string | undefined;
+    updateData(annotations: TAnnotationViewData[]): void;
+    /**
+     * 获取当前结果的标注类型
+     * @param obj
+     * @returns
+     */
+    private getSpecificStyle;
+    /**
+     * Get font rendering style
+     * @param obj
+     * @param style
+     * @returns
+     */
+    private getFontStyle;
+    /**
+     *  Append Draw offset
+     */
+    appendOffset({ x, y }: ICoordinate): {
+        x: number;
+        y: number;
+    };
+    /**
+     * 获取当前展示的文本
+     * @param result
+     * @returns
+     */
+    getRenderText(result: any, hiddenText?: boolean): {
+        headerText: string;
+        bottomText: string;
+    };
+    getReferenceOptions(isReference?: boolean): {
+        lineCap?: CanvasLineCap;
+        lineDash?: number[];
+    };
+    /**
+     * Focus on the selected lang.
+     * @param pointList
+     */
+    focusPositionByPointList(pointList: ICoordinate[]): void;
+    renderConnectionPoints(): void;
+    getRenderStyle(annotation: TAnnotationViewData): {
+        style: {
+            radius: any;
+            fill: any;
+            thickness: any;
+            stroke: any;
+        };
+        fontStyle: {
+            color: string;
+            font: string;
+            shadowColor: string;
+            shadowOffsetX: number;
+            shadowOffsetY: number;
+            shadowBlur: number;
+        };
+    };
+    renderLine(annotation: TAnnotationViewLine): void;
+    renderPolygon(annotation: TAnnotationViewPolygon): void;
+    renderSingleCuboid(annotation: TAnnotationViewCuboid): void;
+    renderBox3d(annotation: TAnnotationViewBox3d): void;
+    render(): void;
+}
+export {};