kviewer 0.0.1

package/dist/runtime/annotation/engine/editor/editor.js

@@ -0,0 +1,233 @@
+import Konva from "konva";
+import { formatTimestamp, generateUUID } from "../utils.js";
+import { SHAPE_GROUP_NAME } from "../const.js";
+import { isStylusTouch } from "../input-device.js";
+export class Editor {
+  userName;
+  id;
+  onAdd;
+  onChange;
+  konvaStage;
+  pageNumber;
+  currentAnnotation;
+  isPainting;
+  shapeGroupStore = /* @__PURE__ */ new Map();
+  currentShapeGroup;
+  getStylusModeEnabled;
+  static MinSize = 8;
+  constructor({
+    userName,
+    konvaStage,
+    pageNumber,
+    annotation,
+    onAdd,
+    editorType,
+    onChange,
+    getStylusModeEnabled
+  }) {
+    this.userName = userName;
+    this.id = `${pageNumber}_${editorType}`;
+    this.konvaStage = konvaStage;
+    this.pageNumber = pageNumber;
+    this.currentAnnotation = annotation;
+    this.isPainting = false;
+    this.currentShapeGroup = null;
+    this.onAdd = onAdd;
+    this.onChange = onChange || (() => {
+    });
+    this.getStylusModeEnabled = getStylusModeEnabled;
+    this.disableEditMode();
+    this.enableEditMode();
+  }
+  dispatchAddEvent({
+    shapeGroup,
+    contentsObj,
+    color,
+    fontSize
+  }) {
+    const { id, pageNumber, konvaGroup, annotation } = shapeGroup;
+    const annotationStore = {
+      id,
+      pageNumber,
+      konvaString: konvaGroup.toJSON(),
+      konvaClientRect: konvaGroup.getClientRect(),
+      title: this.userName,
+      type: annotation.type,
+      pdfjsType: annotation.pdfjsAnnotationType,
+      pdfjsEditorType: annotation.pdfjsEditorType,
+      subtype: annotation.subtype,
+      color,
+      fontSize,
+      date: formatTimestamp(Date.now()),
+      contentsObj,
+      comments: [],
+      resizable: annotation.resizable,
+      draggable: annotation.draggable
+    };
+    this.onAdd(annotationStore);
+  }
+  dispatchChangedEvent(id, updates) {
+    this.onChange(id, updates);
+  }
+  enableEditMode() {
+    const stylusEnabled = this.getStylusModeEnabled?.() ?? false;
+    this.konvaStage.on("mousedown", (e) => {
+      if (e.evt.button === 0) this.mouseDownHandler(e);
+    });
+    this.konvaStage.on("mousemove", (e) => {
+      this.mouseMoveHandler(e);
+    });
+    this.konvaStage.on("mouseup", (e) => {
+      if (e.evt.button === 0) this.mouseUpHandler(e);
+    });
+    this.konvaStage.on("touchstart", (e) => {
+      if (e.evt.touches.length !== 1) return;
+      if (stylusEnabled) {
+        if (!isStylusTouch(e.evt)) return;
+        e.evt.preventDefault();
+      }
+      this.mouseDownHandler(e);
+    });
+    this.konvaStage.on("touchmove", (e) => {
+      if (e.evt.touches.length !== 1) return;
+      if (stylusEnabled) {
+        if (!isStylusTouch(e.evt)) return;
+        if (this.isPainting) e.evt.preventDefault();
+      }
+      this.mouseMoveHandler(e);
+    });
+    this.konvaStage.on("touchend", (e) => {
+      if (stylusEnabled) {
+        const touch = e.evt.changedTouches?.[0];
+        const isStylus = touch && "touchType" in touch && touch.touchType === "stylus";
+        if (!isStylus) return;
+      }
+      this.mouseUpHandler(e);
+    });
+  }
+  disableEditMode() {
+    this.isPainting = false;
+    this.konvaStage.off("click mousedown mousemove mouseup touchstart touchmove touchend");
+  }
+  getBgLayer(konvaStage) {
+    return konvaStage ? konvaStage.getLayers()[0] : this.konvaStage.getLayers()[0];
+  }
+  delShapeGroup(id) {
+    this.shapeGroupStore.delete(id);
+    const group = this.konvaStage.findOne(
+      (node) => node.getType() === "Group" && node.id() === id
+    );
+    if (group) {
+      group.destroy();
+    }
+  }
+  getShapeGroupById(id) {
+    const group = this.konvaStage.findOne(
+      (node) => node.getType() === "Group" && node.id() === id
+    );
+    return group;
+  }
+  setShapeGroupDone({
+    id,
+    contentsObj,
+    color,
+    fontSize
+  }) {
+    const shapeGroup = this.shapeGroupStore.get(id);
+    if (shapeGroup) {
+      shapeGroup.isDone = true;
+      this.dispatchAddEvent({ shapeGroup, contentsObj, color, fontSize });
+    }
+  }
+  setChanged(id, updates) {
+    this.dispatchChangedEvent(id, updates);
+  }
+  getNodesByClassName(className) {
+    const children = this.currentShapeGroup.konvaGroup.getChildren(
+      (node) => node.getClassName() === className
+    );
+    return children;
+  }
+  getGroupNodesByClassName(group, className) {
+    const children = group.getChildren(
+      (node) => node.getClassName() === className
+    );
+    return children;
+  }
+  updateKonvaGroup(id, newKonvaGroup) {
+    if (this.shapeGroupStore.has(id)) {
+      const shapeGroup = this.shapeGroupStore.get(id);
+      if (shapeGroup) {
+        shapeGroup.konvaGroup = newKonvaGroup;
+        this.shapeGroupStore.set(id, shapeGroup);
+        return shapeGroup;
+      }
+    } else {
+      console.warn(`ShapeGroup with id ${id} not found.`);
+    }
+    return null;
+  }
+  createShapeGroup() {
+    const id = generateUUID();
+    const group = new Konva.Group({
+      draggable: false,
+      name: SHAPE_GROUP_NAME,
+      id
+    });
+    const shapeGroup = {
+      id,
+      konvaGroup: group,
+      pageNumber: this.pageNumber,
+      annotation: this.currentAnnotation,
+      isDone: false
+    };
+    this.shapeGroupStore.set(id, shapeGroup);
+    return shapeGroup;
+  }
+  activate(konvaStage, annotation) {
+    this.konvaStage = konvaStage;
+    this.currentAnnotation = annotation;
+    this.isPainting = false;
+    this.disableEditMode();
+    this.enableEditMode();
+  }
+  rebindEvents() {
+    this.disableEditMode();
+    this.enableEditMode();
+  }
+  addSerializedGroupToLayer(konvaStage, konvaString) {
+    this.konvaStage = konvaStage;
+    const ghostGroup = Konva.Node.create(konvaString);
+    const id = ghostGroup.id();
+    this.getBgLayer(konvaStage).add(ghostGroup);
+    if (this.shapeGroupStore.has(id)) return;
+    const shapeGroup = {
+      id,
+      konvaGroup: ghostGroup,
+      pageNumber: this.pageNumber,
+      isDone: true
+    };
+    this.shapeGroupStore.set(id, shapeGroup);
+  }
+  deleteGroup(id, konvaStage) {
+    this.konvaStage = konvaStage;
+    this.delShapeGroup(id);
+  }
+  updateStyle(annotationStore, style) {
+    this.changeStyle(annotationStore, style);
+  }
+  static Timer = {};
+  static TimerClear(pageNumber) {
+    const timer = Editor.Timer[pageNumber];
+    if (timer) {
+      window.clearTimeout(timer);
+    }
+  }
+  static TimerStart(pageNumber, callback) {
+    Editor.Timer[pageNumber] = window.setTimeout(() => {
+      if (typeof callback === "function") {
+        callback(pageNumber);
+      }
+    }, 1e3);
+  }
+}

package/dist/runtime/annotation/engine/editor/selector.d.ts

@@ -0,0 +1,74 @@
+import type { IRect } from 'konva/lib/types';
+import { type IAnnotationStore } from '../types.js';
+import type { KonvaCanvas } from '../painter.js';
+export interface ISelectorOptions {
+    konvaCanvasStore: Map<number, KonvaCanvas>;
+    getAnnotationStore: (id: string) => IAnnotationStore | undefined;
+    onSelected: (id: string, isClick: boolean, transformerRect: IRect) => void;
+    onMultiSelected: (ids: string[], combinedRect: IRect) => void;
+    onCancel: () => void;
+    onChanged: (id: string, konvaGroupString: string, rawAnnotationStore: IAnnotationStore, konvaClientRect: IRect, transformerRect: IRect) => void;
+    onDelete: (id: string) => void;
+    onRequestDeleteConfirm?: (id: string) => Promise<boolean>;
+    onFreeTextDoubleClick?: (id: string) => void;
+    /** When provided and returns true, only pen/mouse input can interact. */
+    getStylusModeEnabled?: () => boolean;
+}
+export declare class Selector {
+    readonly onSelected: (id: string, isClick: boolean, clientRect: IRect) => void;
+    readonly onChanged: (id: string, konvaGroupString: string, rawAnnotationStore: IAnnotationStore, konvaClientRect: IRect, transformerRect: IRect) => void;
+    readonly onDelete: (id: string) => void;
+    readonly onCancel: () => void;
+    readonly onMultiSelected: (ids: string[], combinedRect: IRect) => void;
+    private onRequestDeleteConfirm?;
+    private onFreeTextDoubleClick?;
+    private getStylusModeEnabled?;
+    private transformerStore;
+    private getAnnotationStore;
+    private konvaCanvasStore;
+    private _currentTransformerId;
+    private selectedId;
+    private selectedIds;
+    private marqueeRect;
+    private marqueeStartPos;
+    private marqueeStage;
+    constructor({ konvaCanvasStore, getAnnotationStore, onDelete, onSelected, onMultiSelected, onCancel, onChanged, onRequestDeleteConfirm, onFreeTextDoubleClick, getStylusModeEnabled, }: ISelectorOptions);
+    /** Returns true if this event should be rejected (finger touch in stylus mode). */
+    private isStylusRejected;
+    private handleKeyDown;
+    get currentTransformerId(): string | null;
+    set currentTransformerId(id: string | null);
+    private disableStageEvents;
+    private bindStageEvents;
+    private getBackgroundLayer;
+    private getPageShapeGroups;
+    private getGroupById;
+    private getFirstShapeInGroup;
+    private enableShapeGroups;
+    private disableShapeGroups;
+    private bindShapeEvents;
+    private removeShapeEvents;
+    private handleShapeClick;
+    private createTransformer;
+    private flashNodeWithTransformer;
+    private getTotalBox;
+    private toggleCursorStyle;
+    private handleShapeMouseover;
+    private handleShapeMouseout;
+    private clearTransformers;
+    private deactivateTransformer;
+    private selectedShape;
+    clear(): void;
+    activate(pageNumber: number): void;
+    select(id: string): void;
+    refreshCurrentSelection(): IRect | null;
+    delete(): void;
+    activateMarquee(pageNumber: number): void;
+    private bindMarqueeEvents;
+    private rectsIntersect;
+    activateEraser(pageNumber: number): void;
+    private eraserLine;
+    private eraserStage;
+    private bindEraserEvents;
+    destroy(): void;
+}