change default color

1h

src/overlays/progress-bar.ts

@@ -1,4 +1,5 @@
 import type { AnnotationTool } from "../core";
+import { colorMap } from "../plugins/utils/color-map";
 
 export function addProgressBarOverlay(this: AnnotationTool) {
   const node = this.videoElement as HTMLVideoElement;
@@ -28,7 +29,7 @@ export function addProgressBarOverlay(this: AnnotationTool) {
   this.ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
   this.ctx.fillRect(x, y, width, height);
 
-  this.ctx.fillStyle = "#F3CE32";
+  this.ctx.fillStyle = colorMap.y;
 
   const recSize = this.isMobile ? 16 : 8;
 

src/plugins/curve.ts

@@ -1,6 +1,7 @@
 import { Point, douglasPeucker } from "./utils/douglas-peucker";
 import { BasePlugin, IShapeBase, ToolPlugin } from "./base";
 import type { ShapeMap } from ".";
+import { colorMap } from "./utils/color-map";
 
 export type IPoint = {
   x: number;
@@ -29,22 +30,16 @@ export class CurveToolPlugin
     }));
     return shape;
   }
-  colorMap = {
-    r: "#d31a3b",
-    g: "#15d33b",
-    b: "#0085CA",
-    y: "#F3CE32",
-  };
   onKeyPress = (e: KeyboardEvent) => {
     const key = e.key;
     if (key === null || key === " " || e.isComposing) {
       return;
     }
     const maybeNumeric = Number(key);
     if (isNaN(maybeNumeric) || !maybeNumeric) {
-      if (key in this.colorMap) {
+      if (key in colorMap) {
         // @ts-expect-error
-        this.annotationTool.colorPicker.value = this.colorMap[key];
+        this.annotationTool.colorPicker.value = colorMap[key];
         this.annotationTool.setCanvasSettings();
       }
       return;

src/plugins/utils/color-map.ts

@@ -0,0 +1,34 @@
+export const colorMap = {
+    r: "#d31a3b",
+    g: "#15d33b",
+    b: "#0085CA",
+    y: "#F3CE32",
+    "a": "#7fffd4",
+    // "b": "#0000ff",
+    "c": "#00ffff",
+    "d": "#696969",
+    "e": "#50c878",
+    "f": "#ff00ff",
+    // "g": "#008000",
+    "h": "#f0fff0",
+    "i": "#4b0082",
+    "j": "#00a86b",
+    "k": "#f0e68c",
+    "l": "#e6e6fa",
+    "m": "#98ff98",
+    "n": "#000080",
+    "o": "#ffa500",
+    "p": "#800080",
+    "q": "#e5acc8",
+    // "r": "#e0115f",
+    "s": "#0f52ba",
+    "t": "#008080",
+    "u": "#3f00ff",
+    "v": "#ee82ee",
+    "w": "#ffffff",
+    "x": "#738678",
+    // "y": "#ffff00",
+    "z": "#0014a8"
+};
+
+

src/ui.ts

@@ -5,6 +5,7 @@ import { onDocumentCopy } from "./events/document-copy";
 import { onDocumentCut } from "./events/document-cut";
 import { onDocumentKeydown } from "./events/document-keydown";
 import { onDocumentPaste } from "./events/document-paste";
+import { colorMap } from "./plugins/utils/color-map";
 import { createColorPicker } from "./ui/color-picker";
 import { createStrokeWidthSlider } from "./ui/stroke-width-slider";
 import { createFullscreenButton } from "./ui/toggle-fullscreen-button";
@@ -21,7 +22,9 @@ const addStyle = (node: HTMLElement, style: StylePojo) => {
     }
   })
 }
-const defaultColor = "#F3CE32";
+
+
+const defaultColor = colorMap.r;
 
 export const playerControlsDefaultStyle = `position: relative; top: 0px; left: 0px; z-index: 2;`;
 export const uiContainerDefaultStyle = `position: absolute; top: -40px; left: 0px; z-index: 2; display: block;`;