build

dist/types/base.d.ts

@@ -1,4 +1,4 @@
-import { ButtonEventNames, ClipboardEventNames, InputEventNames, KeyboardEventNames, PointerEventNames, VideoEventNames, WindowEventNames } from "./ui/events";
+import { ButtonEventNames, ClipboardEventNames, DropEventNames, InputEventNames, KeyboardEventNames, PointerEventNames, VideoEventNames, WindowEventNames } from "./ui/events";
 export declare class AnnotationToolBase<T> {
     destructors: (() => void)[];
     isDestroyed: boolean;
@@ -11,6 +11,7 @@ export declare class AnnotationToolBase<T> {
     cleanFrameStacks(): void;
     destroy(): void;
     raf(cb: () => void): number;
+    addEvent(node: HTMLDivElement, event: DropEventNames, callback: (e: DragEvent) => void): void;
     addEvent(node: HTMLInputElement, event: InputEventNames, callback: (e: Event) => void): void;
     addEvent(node: typeof document, event: ClipboardEventNames, callback: (e: ClipboardEvent) => void): void;
     addEvent(node: typeof document, event: ButtonEventNames, callback: (e: PointerEvent) => void): void;

dist/types/buttons.d.ts

@@ -0,0 +1,25 @@
+import type { AnnotationTool } from "./core";
+type Tool = NonNullable<AnnotationTool["currentTool"]>;
+export declare class ButtonConstructor {
+    tool: AnnotationTool;
+    uiContainer: HTMLElement;
+    constructor(tool: AnnotationTool, container: HTMLElement);
+    get buttons(): HTMLButtonElement[];
+    get addEvent(): {
+        (node: HTMLDivElement, event: import("./ui/events").DropEventNames, callback: (e: DragEvent) => void): void;
+        (node: HTMLInputElement, event: import("./ui/events").InputEventNames, callback: (e: Event) => void): void;
+        (node: Document, event: import("./ui/events").ClipboardEventNames, callback: (e: ClipboardEvent) => void): void;
+        (node: Document, event: "click", callback: (e: PointerEvent) => void): void;
+        (node: HTMLVideoElement, event: import("./ui/events").VideoEventNames, callback: (e: Event) => void): void;
+        (node: HTMLVideoElement, event: "keydown", callback: (e: KeyboardEvent) => void): void;
+        (node: HTMLButtonElement, event: "click", callback: (e: Event) => void): void;
+        (node: HTMLCanvasElement, event: import("./ui/events").PointerEventNames, callback: (e: PointerEvent) => void): void;
+        (node: Document, event: "keydown", callback: (e: KeyboardEvent) => void): void;
+        (node: Window & typeof globalThis, event: "resize", callback: (e: Event) => void): void;
+    };
+    get currentTool(): AnnotationTool["currentTool"];
+    set currentTool(value: AnnotationTool["currentTool"]);
+    create: (icon: string, tool: Tool | ((e: Event) => void), container?: HTMLElement) => HTMLButtonElement;
+}
+export declare function addButtons(tool: AnnotationTool, Button: ButtonConstructor): void;
+export {};

dist/types/core.d.ts

@@ -69,7 +69,7 @@ export declare class AnnotationTool extends AnnotationToolBase<IShape> {
     updateActiveTimeFrame(mediaTime?: number | undefined): void;
     show(): void;
     setCanvasSettings(): void;
-    pluginForTool<T extends Tool>(tool: T): ToolPlugin<ShapeMap[T]>;
+    pluginForTool<T extends keyof ShapeMap>(tool: T): ToolPlugin<ShapeMap[T]>;
     getButtonForTool(tool: Tool): HTMLButtonElement;
     bindContext(): void;
     initProperties(): void;

dist/types/plugins/arrow.d.ts

@@ -1,3 +1,4 @@
+import type { ShapeMap } from ".";
 import { BasePlugin, IShapeBase, ToolPlugin } from "./base";
 export interface IArrow extends IShapeBase {
     type: "arrow";
@@ -7,7 +8,7 @@ export interface IArrow extends IShapeBase {
     y2: number;
 }
 export declare class ArrowToolPlugin extends BasePlugin<IArrow> implements ToolPlugin<IArrow> {
-    name: string;
+    name: keyof ShapeMap;
     normalize(shape: IArrow, canvasWidth: number, canvasHeight: number): IArrow;
     move(shape: IArrow, dx: number, dy: number): IArrow;
     draw(shape: IArrow): void;

dist/types/plugins/audio-peaks.d.ts

@@ -1,12 +1,13 @@
 import { IShapeBase, BasePlugin, ToolPlugin } from "./base";
 import { AnnotationTool } from "../core";
 import type { PeakData } from "webaudio-peaks";
+import type { ShapeMap } from ".";
 export interface IAudioPeaks extends IShapeBase {
     x: number;
     y: number;
 }
 export declare class AudioPeaksPlugin extends BasePlugin<IAudioPeaks> implements ToolPlugin<IAudioPeaks> {
-    name: string;
+    name: keyof ShapeMap;
     canvas: HTMLCanvasElement;
     drawCtx: CanvasRenderingContext2D;
     constructor(annotationTool: AnnotationTool);

dist/types/plugins/base.d.ts

@@ -1,6 +1,7 @@
+import type { ShapeMap } from ".";
 import type { AnnotationTool } from "./../core";
 export interface IShapeBase {
-    type: string;
+    type: keyof ShapeMap;
     strokeStyle: string | CanvasGradient | CanvasPattern;
     fillStyle: string | CanvasPattern | CanvasGradient;
     lineWidth: number;

dist/types/plugins/circle.d.ts

@@ -1,3 +1,4 @@
+import type { ShapeMap } from ".";
 import { IShapeBase, BasePlugin, ToolPlugin } from "./base";
 export interface ICircle extends IShapeBase {
     type: "circle";
@@ -6,7 +7,7 @@ export interface ICircle extends IShapeBase {
     radius: number;
 }
 export declare class CircleToolPlugin extends BasePlugin<ICircle> implements ToolPlugin<ICircle> {
-    name: string;
+    name: keyof ShapeMap;
     move(shape: ICircle, dx: number, dy: number): ICircle;
     normalize(shape: ICircle, canvasWidth: number, canvasHeight: number): ICircle;
     onPointerDown(event: PointerEvent): void;

dist/types/plugins/compare.d.ts

@@ -1,11 +1,12 @@
+import type { ShapeMap } from ".";
 import { IShapeBase, BasePlugin, ToolPlugin } from "./base";
 export interface ICompare extends IShapeBase {
     type: "compare";
     x: number;
     disabled: boolean;
 }
 export declare class CompareToolPlugin extends BasePlugin<ICompare> implements ToolPlugin<ICompare> {
-    name: string;
+    name: keyof ShapeMap;
     comparisonLine: number;
     leftOpacity: number;
     rightOpacity: number;

dist/types/plugins/curve.d.ts

@@ -1,4 +1,5 @@
 import { BasePlugin, IShapeBase, ToolPlugin } from "./base";
+import type { ShapeMap } from ".";
 export type IPoint = {
     x: number;
     y: number;
@@ -8,7 +9,7 @@ export interface ICurve extends IShapeBase {
     points: IPoint[];
 }
 export declare class CurveToolPlugin extends BasePlugin<ICurve> implements ToolPlugin<ICurve> {
-    name: string;
+    name: keyof ShapeMap;
     curvePoints: IPoint[];
     move(shape: ICurve, dx: number, dy: number): ICurve;
     normalize(shape: ICurve, canvasWidth: number, canvasHeight: number): ICurve;

dist/types/plugins/eraser.d.ts

@@ -1,4 +1,5 @@
 import { BasePlugin, IShapeBase, ToolPlugin } from "./base";
+import type { ShapeMap } from ".";
 export interface IEraser extends IShapeBase {
     type: "eraser";
     x: number;
@@ -7,7 +8,7 @@ export interface IEraser extends IShapeBase {
     height: number;
 }
 export declare class EraserToolPlugin extends BasePlugin<IEraser> implements ToolPlugin<IEraser> {
-    name: string;
+    name: keyof ShapeMap;
     move(shape: IEraser, dx: number, dy: number): IEraser;
     normalize(shape: IEraser, canvasWidth: number, canvasHeight: number): IEraser;
     draw(shape: IEraser): void;

dist/types/plugins/image.d.ts

@@ -1,4 +1,5 @@
 import { BasePlugin, IShapeBase, ToolPlugin } from "./base";
+import type { ShapeMap } from ".";
 export interface IImage extends IShapeBase {
     type: "image";
     image: HTMLImageElement;
@@ -8,7 +9,7 @@ export interface IImage extends IShapeBase {
     height: number;
 }
 export declare class ImageToolPlugin extends BasePlugin<IImage> implements ToolPlugin<IImage> {
-    name: string;
+    name: keyof ShapeMap;
     move(shape: IImage, dx: number, dy: number): IImage;
     onPointerDown(event: PointerEvent): void;
     onPointerMove(event: PointerEvent): void;

dist/types/plugins/index.d.ts

@@ -25,4 +25,4 @@ export interface ShapeMap {
     "audio-peaks": IAudioPeaks;
 }
 export type PluginInstances = RectangleToolPlugin | CircleToolPlugin | LineToolPlugin | ArrowToolPlugin | TextToolPlugin | EraserToolPlugin | CurveToolPlugin | MoveToolPlugin | ImageToolPlugin | CompareToolPlugin | AudioPeaksPlugin;
-export declare const plugins: (typeof RectangleToolPlugin | typeof CircleToolPlugin | typeof CurveToolPlugin | typeof LineToolPlugin | typeof ArrowToolPlugin | typeof TextToolPlugin | typeof EraserToolPlugin | typeof ImageToolPlugin | typeof MoveToolPlugin | typeof CompareToolPlugin | typeof AudioPeaksPlugin)[];
+export declare const plugins: (typeof RectangleToolPlugin | typeof CircleToolPlugin | typeof CurveToolPlugin | typeof LineToolPlugin | typeof ArrowToolPlugin | typeof TextToolPlugin | typeof EraserToolPlugin | typeof AudioPeaksPlugin | typeof ImageToolPlugin | typeof MoveToolPlugin | typeof CompareToolPlugin)[];

dist/types/plugins/line.d.ts

@@ -1,4 +1,5 @@
 import { BasePlugin, IShapeBase, ToolPlugin } from "./base";
+import type { ShapeMap } from ".";
 export interface ILine extends IShapeBase {
     type: "line";
     x1: number;
@@ -7,7 +8,7 @@ export interface ILine extends IShapeBase {
     y2: number;
 }
 export declare class LineToolPlugin extends BasePlugin<ILine> implements ToolPlugin<ILine> {
-    name: string;
+    name: keyof ShapeMap;
     move(shape: ILine, dx: number, dy: number): ILine;
     normalize(shape: ILine, canvasWidth: number, canvasHeight: number): ILine;
     onPointerDown(event: PointerEvent): void;

dist/types/plugins/move.d.ts

@@ -1,19 +1,21 @@
 import type { IShape } from ".";
+import { IAudioPeaks } from "./audio-peaks";
 import { BasePlugin, IShapeBase, ToolPlugin } from "./base";
 import type { IImage } from "./image";
+import type { ShapeMap } from ".";
 export interface IMove extends IShapeBase {
     type: "move";
 }
 export declare class MoveToolPlugin extends BasePlugin<IMove> implements ToolPlugin<IMove> {
-    name: string;
+    name: keyof ShapeMap;
     shape: IShape | null;
     lastDrawnShape: IShape | null;
     shapeRemoved: boolean;
     isScale: boolean;
     move(shape: IMove): IMove;
     normalize(shape: IMove): IMove;
     onPointerDown(event: PointerEvent): void;
-    isPointerAtCorner(rawShape: IImage, x: number, y: number): boolean;
+    isPointerAtCorner(rawShape: IImage | IAudioPeaks, x: number, y: number): boolean;
     onPointerMove(event: PointerEvent): void;
     onPointerUp(event: PointerEvent): void;
     draw(): void;

dist/types/plugins/rectangle.d.ts

@@ -1,4 +1,5 @@
 import { BasePlugin, IShapeBase, ToolPlugin } from "./base";
+import type { ShapeMap } from ".";
 export interface IRectangle extends IShapeBase {
     type: "rectangle";
     x: number;
@@ -7,7 +8,7 @@ export interface IRectangle extends IShapeBase {
     height: number;
 }
 export declare class RectangleToolPlugin extends BasePlugin<IRectangle> implements ToolPlugin<IRectangle> {
-    name: string;
+    name: keyof ShapeMap;
     move(shape: IRectangle, dx: number, dy: number): IRectangle;
     normalize(shape: IRectangle, canvasWidth: number, canvasHeight: number): IRectangle;
     onPointerDown(event: PointerEvent): void;

dist/types/plugins/text.d.ts

@@ -1,12 +1,13 @@
 import { BasePlugin, IShapeBase, ToolPlugin } from "./base";
+import type { ShapeMap } from ".";
 export interface IText extends IShapeBase {
     type: "text";
     x: number;
     y: number;
     text: string;
 }
 export declare class TextToolPlugin extends BasePlugin<IText> implements ToolPlugin<IText> {
-    name: string;
+    name: keyof ShapeMap;
     move(shape: IText, dx: number, dy: number): IText;
     onActivate(): void;
     onDeactivate(): void;

dist/types/ui/color-picker.d.ts

@@ -0,0 +1,2 @@
+import type { AnnotationTool } from "../core";
+export declare function createColorPicker(defaultColor: string, tool: AnnotationTool): HTMLInputElement;

dist/types/ui/events.d.ts

@@ -3,6 +3,7 @@ export type KeyboardEventNames = "keydown";
 export type ButtonEventNames = "click";
 export type InputEventNames = "input" | "change";
 export type ClipboardEventNames = "copy" | "paste" | "cut";
+export type DropEventNames = "drop" | "dragover" | "dragenter" | "dragleave";
 export type VideoEventNames = "timeupdate" | "volumechange" | "seeking" | "play" | "pause" | "seek" | "stalled" | "error" | "requestVideoFrameCallback";
 export type WindowEventNames = "resize";
-export type EventNames = VideoEventNames | InputEventNames | PointerEventNames | KeyboardEventNames | WindowEventNames | ButtonEventNames | ClipboardEventNames;
+export type EventNames = VideoEventNames | InputEventNames | PointerEventNames | KeyboardEventNames | WindowEventNames | ButtonEventNames | ClipboardEventNames | DropEventNames;

dist/types/ui/stroke-width-slider.d.ts

@@ -0,0 +1,2 @@
+import type { AnnotationTool } from "../core";
+export declare function createStrokeWidthSlider(tool: AnnotationTool): HTMLInputElement;

package.json

@@ -10,7 +10,7 @@
   "type": "module",
   "types": "dist/types/index.d.ts",
   "devDependencies": {
-    "esbuild": "^0.17.15",
+    "esbuild": "0.24.0",
     "typescript": "^5.0.4",
     "webaudio-peaks": "^1.0.0"
   },

src/core.ts

@@ -252,7 +252,7 @@ export class AnnotationTool extends AnnotationToolBase<IShape> {
     this.ctx.lineWidth = this.selectedStrokeSize;
   }
 
-  pluginForTool<T extends Tool>(tool: T): ToolPlugin<ShapeMap[T]> {
+  pluginForTool<T extends keyof ShapeMap>(tool: T): ToolPlugin<ShapeMap[T]> {
     if (this.isDestroyed) {
       throw new Error("AnnotationTool is destroyed");
     }

src/plugins/arrow.ts

@@ -1,3 +1,4 @@
+import type { ShapeMap } from ".";
 import { BasePlugin, IShapeBase, ToolPlugin } from "./base";
 
 export interface IArrow extends IShapeBase {
@@ -12,7 +13,7 @@ export class ArrowToolPlugin
   extends BasePlugin<IArrow>
   implements ToolPlugin<IArrow>
 {
-  name = "arrow";
+  name = "arrow" as keyof ShapeMap;
   normalize(shape: IArrow, canvasWidth: number, canvasHeight: number): IArrow {
     return {
       ...shape,

src/plugins/audio-peaks.ts

@@ -1,6 +1,7 @@
 import { IShapeBase, BasePlugin, ToolPlugin } from "./base";
 import { AnnotationTool } from "../core";
 import type { PeakData } from "webaudio-peaks";
+import type { ShapeMap } from ".";
 
 export interface IAudioPeaks extends IShapeBase {
   x: number;
@@ -21,7 +22,7 @@ export class AudioPeaksPlugin
   extends BasePlugin<IAudioPeaks>
   implements ToolPlugin<IAudioPeaks>
 {
-  name = "audio-peaks";
+  name = "audio-peaks" as keyof ShapeMap;
   canvas = document.createElement("canvas");
   drawCtx!: CanvasRenderingContext2D;
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

src/plugins/base.ts

@@ -1,7 +1,8 @@
+import type { ShapeMap } from ".";
 import type { AnnotationTool  } from "./../core";
 
 export interface IShapeBase {
-  type: string;
+  type: keyof ShapeMap;
   strokeStyle: string | CanvasGradient | CanvasPattern;
   fillStyle: string | CanvasPattern | CanvasGradient;
   lineWidth: number;

src/plugins/circle.ts

@@ -1,3 +1,4 @@
+import type { ShapeMap } from ".";
 import { IShapeBase, BasePlugin, ToolPlugin } from "./base";
 
 export interface ICircle extends IShapeBase {
@@ -11,7 +12,7 @@ export class CircleToolPlugin
   extends BasePlugin<ICircle>
   implements ToolPlugin<ICircle>
 {
-  name = "circle";
+  name = "circle"  as keyof ShapeMap;
   move(shape: ICircle, dx: number, dy: number) {
     shape.x += dx;
     shape.y += dy;

src/plugins/compare.ts

@@ -1,3 +1,4 @@
+import type { ShapeMap } from ".";
 import { IShapeBase, BasePlugin, ToolPlugin } from "./base";
 
 export interface ICompare extends IShapeBase {
@@ -12,7 +13,7 @@ export class CompareToolPlugin
   extends BasePlugin<ICompare>
   implements ToolPlugin<ICompare>
 {
-  name = "compare";
+  name = "compare" as keyof ShapeMap;
   comparisonLine = 0;
   leftOpacity = 1;
   rightOpacity = 1;

src/plugins/curve.ts

@@ -1,5 +1,6 @@
 import { Point, douglasPeucker } from "./utils/douglas-peucker";
 import { BasePlugin, IShapeBase, ToolPlugin } from "./base";
+import type { ShapeMap } from ".";
 
 export type IPoint = {
   x: number;
@@ -15,7 +16,7 @@ export class CurveToolPlugin
   extends BasePlugin<ICurve>
   implements ToolPlugin<ICurve>
 {
-  name = "curve";
+  name = "curve" as keyof ShapeMap;
   curvePoints: IPoint[] = [];
   move(shape: ICurve, dx: number, dy: number) {
     shape.points = shape.points.map((point) => ({

src/plugins/eraser.ts

@@ -1,4 +1,5 @@
 import { BasePlugin, IShapeBase, ToolPlugin } from "./base";
+import type { ShapeMap } from ".";
 
 export interface IEraser extends IShapeBase {
   type: "eraser";
@@ -12,7 +13,7 @@ export class EraserToolPlugin
   extends BasePlugin<IEraser>
   implements ToolPlugin<IEraser>
 {
-  name = "eraser";
+  name = "eraser" as keyof ShapeMap;
   move(shape: IEraser, dx: number, dy: number) {
     shape.x += dx;
     shape.y += dy;

src/plugins/image.ts

@@ -1,4 +1,5 @@
 import { BasePlugin, IShapeBase, ToolPlugin } from "./base";
+import type { ShapeMap } from ".";
 
 export interface IImage extends IShapeBase {
   type: "image";
@@ -13,7 +14,7 @@ export class ImageToolPlugin
   extends BasePlugin<IImage>
   implements ToolPlugin<IImage>
 {
-  name = "image";
+  name = "image" as keyof ShapeMap;
   move(shape: IImage, dx: number, dy: number) {
     shape.x += dx;
     shape.y += dy;

src/plugins/index.ts

@@ -37,7 +37,7 @@ export interface ShapeMap {
   image: IImage;
   compare: ICompare;
   "audio-peaks": IAudioPeaks;
-}
+};
 
 export type PluginInstances = RectangleToolPlugin | CircleToolPlugin | LineToolPlugin | ArrowToolPlugin | TextToolPlugin | EraserToolPlugin | CurveToolPlugin | MoveToolPlugin | ImageToolPlugin | CompareToolPlugin | AudioPeaksPlugin;