dytools-capture-engine 1.2.6 → 1.3.1

package/dist/index.cjs

@@ -143,13 +143,14 @@ var CaptureToEngineEventType = {
   // ObjectDeselected: "object:deselected",
 };
 var CaptureZoneBase = class {
-  constructor(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required = false, dataType = null, excludeFromOutput = false, defaultValueIfEmpty = null) {
+  constructor(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required = false, dataType = null, excludeFromOutput = false, defaultValueIfEmpty = null, opts = {}) {
     this._example = null;
     this.needsAnchorReposition = false;
     // This is true when the zone needs to be repositioned to the parent's anchor point when the anchor is moved.
     this.primaryCanvasRectangleId = null;
     // a queue for pending internal events
     this.pendingInternalEvents = [];
+    this.options = this.createOptions(opts);
     this._id = this.makeId();
     this._name = name;
     this._rect = rect;
@@ -162,6 +163,17 @@ var CaptureZoneBase = class {
     this._excludeFromOutput = excludeFromOutput;
     this._defaultValueIfEmpty = defaultValueIfEmpty;
   }
+  get defaultOptions() {
+    return {
+      zoneColor: "blue",
+      ocrMatchColor: "rgba(0, 255, 0, 0.25)",
+      anchorPointColor: ""
+    };
+  }
+  /** INTERNAL SETUP **/
+  createOptions(opts) {
+    return { ...this.defaultOptions, ...opts };
+  }
   handleInternalZoneEvent(type, payload) {
     if (this.primaryCanvasRectangleId === null || !this.canvasManager) {
       return;
@@ -468,12 +480,17 @@ var CaptureZoneBase = class {
   }
 };
 var SimpleZone = class extends CaptureZoneBase {
-  constructor(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required = false, dataType = null, excludeFromOutput = false, defaultValueIfEmpty = null) {
-    super(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required, dataType, excludeFromOutput, defaultValueIfEmpty);
+  constructor(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required = false, dataType = null, excludeFromOutput = false, defaultValueIfEmpty = null, opts = {}) {
+    super(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required, dataType, excludeFromOutput, defaultValueIfEmpty, opts);
     this.type = "simple";
     this.ocrOverlayIds = [];
     this.lastMatchHash = "";
   }
+  get defaultOptions() {
+    return {
+      ...super.defaultOptions
+    };
+  }
   handleInternalZoneEvent(type, payload) {
     super.handleInternalZoneEvent(type, payload);
     if (this.canvasManager === null) {
@@ -481,7 +498,7 @@ var SimpleZone = class extends CaptureZoneBase {
       return;
     }
     if (type === CaptureZoneEventType.ZoneCanvasManagerSet) {
-      this.primaryCanvasRectangleId = this.canvasManager.addRectangle(this.rect, this.name, "blue", true, true);
+      this.primaryCanvasRectangleId = this.canvasManager.addRectangle(this.rect, this.name, this.options.zoneColor ?? "black", true, true);
     }
     if (type === CaptureZoneEventType.ZoneHiddenChanged) {
       const zoneHiddenChangedPayload = payload;
@@ -498,7 +515,7 @@ var SimpleZone = class extends CaptureZoneBase {
       let isFirstMatch = true;
       for (const match of ocrMatches) {
         if (match.templateZoneId != this.id) continue;
-        this.ocrOverlayIds.push(this.canvasManager?.addPolygon(match.polygonAbsolute.points, "rgba(0, 255, 0, 0.25)", false));
+        this.ocrOverlayIds.push(this.canvasManager?.addPolygon(match.polygonAbsolute.points, this.options.ocrMatchColor ?? "grey", false));
         break;
       }
       this.ocrOverlayIds.forEach((id) => this.canvasManager?.setVisibility(id, !this.hidden));
@@ -553,6 +570,11 @@ var AnchorChildZone = class extends SimpleZone {
     super(...arguments);
     this.type = "anchor-child";
   }
+  get defaultOptions() {
+    return {
+      ...super.defaultOptions
+    };
+  }
   toExternalChild(docWidth, docHeight, parentAnchor) {
     let external = this.toExternal(docWidth, docHeight);
     if (!external) return null;
@@ -566,8 +588,8 @@ var AnchorChildZone = class extends SimpleZone {
   }
 };
 var AnchorZone = class extends CaptureZoneBase {
-  constructor(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required = false, dataType = null, excludeFromOutput = false, defaultValueIfEmpty = null) {
-    super(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required, dataType, excludeFromOutput, defaultValueIfEmpty);
+  constructor(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required = false, dataType = null, excludeFromOutput = false, defaultValueIfEmpty = null, opts = {}) {
+    super(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required, dataType, excludeFromOutput, defaultValueIfEmpty, opts);
     this.type = "anchor";
     //private primaryCanvasRectangleId: string | null = null;
     this._anchorLocation = "MiddleLeft";
@@ -577,7 +599,6 @@ var AnchorZone = class extends CaptureZoneBase {
     this.ocrOverlayIds = [];
     this.lastMatchHash = "";
     this.currentAnchorPoint = null;
-    this._cycle = 50;
     const internalArray = [];
     const snapshotChildren = (arr) => {
       const map = /* @__PURE__ */ new Map();
@@ -631,6 +652,28 @@ var AnchorZone = class extends CaptureZoneBase {
       configurable: false
     });
   }
+  get defaultOptions() {
+    return {
+      ...super.defaultOptions,
+      zoneColor: "green",
+      ocrMatchColor: "rgba(0, 255, 255, 0.25)",
+      anchorPointColor: "rgba(0, 0, 255, 0.25)",
+      zoneAdditionalChildrenColor: (index) => {
+        let maxOpacity = 0.5;
+        let minOpacity = 0.25;
+        let percentThroughArray = (index + 1) / this.children.length;
+        let opacity = maxOpacity - (maxOpacity - minOpacity) * percentThroughArray;
+        let color = `rgba(50, 128, 255, ${opacity.toFixed(2)})`;
+        return color;
+      }
+    };
+  }
+  resolveValue(value, index, total, defaultValue = "black") {
+    if (value === void 0 || value === null) {
+      return defaultValue;
+    }
+    return typeof value === "function" ? value(index, total) : value;
+  }
   get anchorLocation() {
     return this._anchorLocation;
   }
@@ -656,7 +699,7 @@ var AnchorZone = class extends CaptureZoneBase {
       return;
     }
     if (type === CaptureZoneEventType.ZoneCanvasManagerSet) {
-      this.primaryCanvasRectangleId = this.canvasManager?.addRectangle(this.rect, this.name, "green", true, true);
+      this.primaryCanvasRectangleId = this.canvasManager?.addRectangle(this.rect, this.name, this.options.zoneColor ?? "black", true, true);
     }
     if (type === CaptureZoneEventType.ZoneAnchorLocationChanged) {
       const zoneAnchorLocationChangedPayload = payload;
@@ -693,12 +736,11 @@ var AnchorZone = class extends CaptureZoneBase {
       this.ocrOverlayIds.forEach((id) => this.canvasManager?.removeObject(id));
       this.ocrOverlayIds = [];
       let isFirstMatch = true;
-      let cycle = this.cycle;
       for (const match of ocrMatches) {
         if (match.templateZoneId != this.id) continue;
-        this.ocrOverlayIds.push(this.canvasManager?.addPolygon(match.polygonAbsolute.points, "rgba(0, 255, 255, 0.25)", false));
+        this.ocrOverlayIds.push(this.canvasManager?.addPolygon(match.polygonAbsolute.points, this.options.ocrMatchColor ?? "black", false));
         if (match.anchorPointAbsolute) {
-          this.ocrOverlayIds.push(this.canvasManager?.addCircle(match.anchorPointAbsolute, 2, "rgba(0, 0, 255, 0.25)", false, false));
+          this.ocrOverlayIds.push(this.canvasManager?.addCircle(match.anchorPointAbsolute, 2, this.options.anchorPointColor ?? "black", false, false));
           if (isFirstMatch) {
             for (const child of this.children.filter((e) => e.needsAnchorReposition)) {
               let currentAnchorPoint = this.currentAnchorPoint ?? this.rect.origin;
@@ -711,11 +753,7 @@ var AnchorZone = class extends CaptureZoneBase {
               const child = this.children[i];
               if (child.hidden == false) {
                 let vector = this.currentAnchorPoint ? match.anchorPointAbsolute.getDeltaFromPoint(this.currentAnchorPoint) : new import_dytools_geometry.Vector(0, 0);
-                let maxOpacity = 0.5;
-                let minOpacity = 0.25;
-                let percentThroughArray = (i + 1) / this.children.length;
-                let opacity = maxOpacity - (maxOpacity - minOpacity) * percentThroughArray;
-                let color = `rgba(${cycle}, 128, 255, ${opacity.toFixed(2)})`;
+                let color = this.resolveValue(this.options.zoneAdditionalChildrenColor, i, this.children.length, "black");
                 const polygon = child.rect.move(vector).toPolygon().points;
                 this.ocrOverlayIds.push(this.canvasManager?.addPolygon(polygon, color, false));
               }
@@ -730,10 +768,6 @@ var AnchorZone = class extends CaptureZoneBase {
       this.ocrOverlayIds.forEach((id) => this.canvasManager?.setVisibility(id, !this.hidden));
     }
   }
-  get cycle() {
-    this._cycle = (this._cycle + 64) % 255;
-    return this._cycle;
-  }
   handleEvent(id, type, payload) {
     if (this.id == id) {
       if (type == CaptureEngineToZoneEventType.CanvasObjectPositionChanged) {
@@ -909,7 +943,7 @@ var DefaultZoneCanvasManager = class {
   }
 };
 var CaptureEngine = class {
-  constructor(selector, serverApi) {
+  constructor(selector, serverApi, opts = {}) {
     this.listeners = {};
     // Template properties
     this._name = "Untitled";
@@ -923,6 +957,28 @@ var CaptureEngine = class {
     // key = object id, value = set of flags
     // Refactor properties
     this.zoneCounter = 1;
+    this.defaultOptions = {
+      initialZoom: 1,
+      initialPan: { x: 10, y: 10 },
+      defaultMode: "default",
+      // Default mode to switch into on startup
+      ocrOverlayColor: "rgba(0, 128, 255, 0.25)",
+      simpleZoneColor: "blue",
+      simpleZoneOcrMatchColor: "rgba(0, 255, 0, 0.25)",
+      anchorZoneColor: "green",
+      anchorZoneOcrMatchColor: "rgba(0, 255, 255, 0.25)",
+      anchorZoneAnchorPointColor: "rgba(0, 0, 255, 0.25)",
+      anchorZoneAdditionalChildrenColor: (index, total) => {
+        let maxOpacity = 0.5;
+        let minOpacity = 0.25;
+        let percentThroughArray = (index + 1) / total;
+        let opacity = maxOpacity - (maxOpacity - minOpacity) * percentThroughArray;
+        let color = `rgba(50, 128, 255, ${opacity.toFixed(2)})`;
+        return color;
+      },
+      anchorChildZoneColor: "blue",
+      anchorChildZoneOcrMatchColor: "rgba(0, 255, 0, 0.25)"
+    };
     /* --- INTERNAL ENGINE EVENT METHODS --- */
     // These are used for messages to the engine itself (e.g. from a zone if the zone mutated.)
     this.refreshMatches = this.createMeteredFn(async () => {
@@ -930,7 +986,12 @@ var CaptureEngine = class {
       const matches = await this.getZoneMatchesFromServer();
       this.setOcrMatchesSnapshot(matches);
     }, 1e3);
-    this.engine = new import_dytools_canvas_engine.CanvasEngine(selector, {});
+    this.options = this.createOptions(opts);
+    this.engine = new import_dytools_canvas_engine.CanvasEngine(selector, {
+      initialPan: this.options.initialPan,
+      defaultMode: this.options.defaultMode,
+      initialZoom: this.options.initialZoom
+    });
     if (serverApi) {
       this.setServerApi(serverApi);
     }
@@ -988,6 +1049,10 @@ var CaptureEngine = class {
     });
     this.setupEngine();
   }
+  /** INTERNAL SETUP **/
+  createOptions(opts) {
+    return { ...this.defaultOptions, ...opts };
+  }
   // This is used to attach event handlers to the canvas engine (this.engine)
   // All zone-related events (like position changed, resized, etc.) will be sent to the zones and not externally.
   // All zones will listen to these events and update their internal state accordingly and send the completed event
@@ -1348,29 +1413,43 @@ var CaptureEngine = class {
    * Add a new simple zone
    * @param bounds Rectangle
    */
-  addSimpleZone(bounds) {
+  addSimpleZone(bounds, makeCurrentSelected = false) {
     let newZone = new SimpleZone("Test1", bounds, false, null, null, null);
     this.zones.push(newZone);
+    if (makeCurrentSelected) {
+      this.setSelectedZones([newZone]);
+    }
+    return newZone;
   }
   /**
    * Add a new anchor zone
    * @param bounds Rectangle
    */
-  addAnchorZone(bounds) {
+  addAnchorZone(bounds, makeCurrentSelected = false) {
     let newZone = new AnchorZone(`Anchor ${this.zoneCounter++}`, bounds, false, null, null, null);
     this.zones.push(newZone);
+    if (makeCurrentSelected) {
+      this.setSelectedZones([newZone]);
+    }
+    return newZone;
   }
   /**
    * Add a child zone linked to an anchor
    * @param anchorId string
    * @param bounds Rectangle
    */
-  addAnchorChildZone(anchorId, bounds) {
+  addAnchorChildZone(anchorId, bounds, makeCurrentSelected = false) {
     const anchorZone = this.zones.find((z) => z.id === anchorId);
-    if (!anchorZone) return;
+    if (!anchorZone) {
+      throw new Error(`Anchor zone with id ${anchorId} not found`);
+    }
     let newZone = new AnchorChildZone(`Child ${this.zoneCounter++}`, bounds, false, null, null, null);
     if (!anchorZone.children) anchorZone.children = [];
     anchorZone.children.push(newZone);
+    if (makeCurrentSelected) {
+      this.setSelectedZones([newZone]);
+    }
+    return newZone;
   }
   /**
    * Remove a zone and its canvas representation by id
@@ -1633,7 +1712,7 @@ var CaptureEngine = class {
       const overlay = new import_dytools_canvas_engine.PolygonObject(
         overlayId,
         pts,
-        "rgba(0, 128, 255, 0.25)",
+        this.options.ocrOverlayColor ?? "rgba(0, 128, 255, 0.25)",
         false,
         // isSelectable
         false,

package/dist/index.d.cts

@@ -444,7 +444,11 @@ declare class CaptureEngine {
     private ocrOverlayIds;
     private flags;
     private zoneCounter;
-    constructor(selector: string, serverApi?: CaptureEngineServerApi);
+    private options;
+    private readonly defaultOptions;
+    constructor(selector: string, serverApi?: CaptureEngineServerApi, opts?: CaptureEngineOptions);
+    /** INTERNAL SETUP **/
+    private createOptions;
     private setupEngine;
     on<T extends CapturePublicEventType>(event: T, handler: (payload: CapturePublicEventPayloads[T]) => void, options?: {
         once?: boolean;
@@ -471,18 +475,18 @@ declare class CaptureEngine {
      * Add a new simple zone
      * @param bounds Rectangle
      */
-    addSimpleZone(bounds: Rectangle): void;
+    addSimpleZone(bounds: Rectangle, makeCurrentSelected?: boolean): TemplateZoneBase;
     /**
      * Add a new anchor zone
      * @param bounds Rectangle
      */
-    addAnchorZone(bounds: Rectangle): void;
+    addAnchorZone(bounds: Rectangle, makeCurrentSelected?: boolean): TemplateZoneBase;
     /**
      * Add a child zone linked to an anchor
      * @param anchorId string
      * @param bounds Rectangle
      */
-    addAnchorChildZone(anchorId: string, bounds: Rectangle): void;
+    addAnchorChildZone(anchorId: string, bounds: Rectangle, makeCurrentSelected?: boolean): TemplateZoneBase;
     /**
      * Remove a zone and its canvas representation by id
      * @param id string
@@ -567,5 +571,29 @@ interface CaptureEngineServerApi {
         ocr: OcrRead;
     }): Promise<Result<ZoneOcrMatch[]>>;
 }
+interface CaptureEngineOptions {
+    initialZoom?: number;
+    initialPan?: {
+        x: number;
+        y: number;
+    };
+    defaultMode?: string;
+    ocrOverlayColor?: string;
+    simpleZoneColor?: string;
+    simpleZoneOcrMatchColor?: string;
+    anchorZoneColor?: string;
+    anchorZoneOcrMatchColor?: string;
+    anchorZoneAnchorPointColor?: string;
+    anchorZoneAdditionalChildrenColor?: StringOrFactory;
+    anchorChildZoneColor?: string;
+    anchorChildZoneOcrMatchColor?: string;
+}
+type StringOrFactory = string | ((index: number, total: number) => string);
+interface CaptureZoneOptions {
+    zoneColor?: string;
+    anchorPointColor?: string;
+    ocrMatchColor?: string;
+    zoneAdditionalChildrenColor?: StringOrFactory;
+}
 
-export { CaptureEngine, type CaptureEngineServerApi, type CaptureEngineToZoneEventPayloads, CaptureEngineToZoneEventType, type CapturePublicEventPayloads, CapturePublicEventType, type CaptureToEngineEventPayloads, CaptureToEngineEventType, type CaptureZoneEventPayloads, type ExternalTemplate, type ExternalTemplateZone, type ExternalZoneType, type OcrRead, type OcrWord, type TemplateZoneBase, type ZoneCanvasManager, type ZoneExample, type ZoneKind, type ZoneOcrMatch };
+export { CaptureEngine, type CaptureEngineOptions, type CaptureEngineServerApi, type CaptureEngineToZoneEventPayloads, CaptureEngineToZoneEventType, type CapturePublicEventPayloads, CapturePublicEventType, type CaptureToEngineEventPayloads, CaptureToEngineEventType, type CaptureZoneEventPayloads, type CaptureZoneOptions, type ExternalTemplate, type ExternalTemplateZone, type ExternalZoneType, type OcrRead, type OcrWord, type TemplateZoneBase, type ZoneCanvasManager, type ZoneExample, type ZoneKind, type ZoneOcrMatch };

package/dist/index.d.ts

@@ -444,7 +444,11 @@ declare class CaptureEngine {
     private ocrOverlayIds;
     private flags;
     private zoneCounter;
-    constructor(selector: string, serverApi?: CaptureEngineServerApi);
+    private options;
+    private readonly defaultOptions;
+    constructor(selector: string, serverApi?: CaptureEngineServerApi, opts?: CaptureEngineOptions);
+    /** INTERNAL SETUP **/
+    private createOptions;
     private setupEngine;
     on<T extends CapturePublicEventType>(event: T, handler: (payload: CapturePublicEventPayloads[T]) => void, options?: {
         once?: boolean;
@@ -471,18 +475,18 @@ declare class CaptureEngine {
      * Add a new simple zone
      * @param bounds Rectangle
      */
-    addSimpleZone(bounds: Rectangle): void;
+    addSimpleZone(bounds: Rectangle, makeCurrentSelected?: boolean): TemplateZoneBase;
     /**
      * Add a new anchor zone
      * @param bounds Rectangle
      */
-    addAnchorZone(bounds: Rectangle): void;
+    addAnchorZone(bounds: Rectangle, makeCurrentSelected?: boolean): TemplateZoneBase;
     /**
      * Add a child zone linked to an anchor
      * @param anchorId string
      * @param bounds Rectangle
      */
-    addAnchorChildZone(anchorId: string, bounds: Rectangle): void;
+    addAnchorChildZone(anchorId: string, bounds: Rectangle, makeCurrentSelected?: boolean): TemplateZoneBase;
     /**
      * Remove a zone and its canvas representation by id
      * @param id string
@@ -567,5 +571,29 @@ interface CaptureEngineServerApi {
         ocr: OcrRead;
     }): Promise<Result<ZoneOcrMatch[]>>;
 }
+interface CaptureEngineOptions {
+    initialZoom?: number;
+    initialPan?: {
+        x: number;
+        y: number;
+    };
+    defaultMode?: string;
+    ocrOverlayColor?: string;
+    simpleZoneColor?: string;
+    simpleZoneOcrMatchColor?: string;
+    anchorZoneColor?: string;
+    anchorZoneOcrMatchColor?: string;
+    anchorZoneAnchorPointColor?: string;
+    anchorZoneAdditionalChildrenColor?: StringOrFactory;
+    anchorChildZoneColor?: string;
+    anchorChildZoneOcrMatchColor?: string;
+}
+type StringOrFactory = string | ((index: number, total: number) => string);
+interface CaptureZoneOptions {
+    zoneColor?: string;
+    anchorPointColor?: string;
+    ocrMatchColor?: string;
+    zoneAdditionalChildrenColor?: StringOrFactory;
+}
 
-export { CaptureEngine, type CaptureEngineServerApi, type CaptureEngineToZoneEventPayloads, CaptureEngineToZoneEventType, type CapturePublicEventPayloads, CapturePublicEventType, type CaptureToEngineEventPayloads, CaptureToEngineEventType, type CaptureZoneEventPayloads, type ExternalTemplate, type ExternalTemplateZone, type ExternalZoneType, type OcrRead, type OcrWord, type TemplateZoneBase, type ZoneCanvasManager, type ZoneExample, type ZoneKind, type ZoneOcrMatch };
+export { CaptureEngine, type CaptureEngineOptions, type CaptureEngineServerApi, type CaptureEngineToZoneEventPayloads, CaptureEngineToZoneEventType, type CapturePublicEventPayloads, CapturePublicEventType, type CaptureToEngineEventPayloads, CaptureToEngineEventType, type CaptureZoneEventPayloads, type CaptureZoneOptions, type ExternalTemplate, type ExternalTemplateZone, type ExternalZoneType, type OcrRead, type OcrWord, type TemplateZoneBase, type ZoneCanvasManager, type ZoneExample, type ZoneKind, type ZoneOcrMatch };

package/dist/index.js

@@ -127,13 +127,14 @@ var CaptureToEngineEventType = {
   // ObjectDeselected: "object:deselected",
 };
 var CaptureZoneBase = class {
-  constructor(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required = false, dataType = null, excludeFromOutput = false, defaultValueIfEmpty = null) {
+  constructor(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required = false, dataType = null, excludeFromOutput = false, defaultValueIfEmpty = null, opts = {}) {
     this._example = null;
     this.needsAnchorReposition = false;
     // This is true when the zone needs to be repositioned to the parent's anchor point when the anchor is moved.
     this.primaryCanvasRectangleId = null;
     // a queue for pending internal events
     this.pendingInternalEvents = [];
+    this.options = this.createOptions(opts);
     this._id = this.makeId();
     this._name = name;
     this._rect = rect;
@@ -146,6 +147,17 @@ var CaptureZoneBase = class {
     this._excludeFromOutput = excludeFromOutput;
     this._defaultValueIfEmpty = defaultValueIfEmpty;
   }
+  get defaultOptions() {
+    return {
+      zoneColor: "blue",
+      ocrMatchColor: "rgba(0, 255, 0, 0.25)",
+      anchorPointColor: ""
+    };
+  }
+  /** INTERNAL SETUP **/
+  createOptions(opts) {
+    return { ...this.defaultOptions, ...opts };
+  }
   handleInternalZoneEvent(type, payload) {
     if (this.primaryCanvasRectangleId === null || !this.canvasManager) {
       return;
@@ -452,12 +464,17 @@ var CaptureZoneBase = class {
   }
 };
 var SimpleZone = class extends CaptureZoneBase {
-  constructor(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required = false, dataType = null, excludeFromOutput = false, defaultValueIfEmpty = null) {
-    super(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required, dataType, excludeFromOutput, defaultValueIfEmpty);
+  constructor(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required = false, dataType = null, excludeFromOutput = false, defaultValueIfEmpty = null, opts = {}) {
+    super(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required, dataType, excludeFromOutput, defaultValueIfEmpty, opts);
     this.type = "simple";
     this.ocrOverlayIds = [];
     this.lastMatchHash = "";
   }
+  get defaultOptions() {
+    return {
+      ...super.defaultOptions
+    };
+  }
   handleInternalZoneEvent(type, payload) {
     super.handleInternalZoneEvent(type, payload);
     if (this.canvasManager === null) {
@@ -465,7 +482,7 @@ var SimpleZone = class extends CaptureZoneBase {
       return;
     }
     if (type === CaptureZoneEventType.ZoneCanvasManagerSet) {
-      this.primaryCanvasRectangleId = this.canvasManager.addRectangle(this.rect, this.name, "blue", true, true);
+      this.primaryCanvasRectangleId = this.canvasManager.addRectangle(this.rect, this.name, this.options.zoneColor ?? "black", true, true);
     }
     if (type === CaptureZoneEventType.ZoneHiddenChanged) {
       const zoneHiddenChangedPayload = payload;
@@ -482,7 +499,7 @@ var SimpleZone = class extends CaptureZoneBase {
       let isFirstMatch = true;
       for (const match of ocrMatches) {
         if (match.templateZoneId != this.id) continue;
-        this.ocrOverlayIds.push(this.canvasManager?.addPolygon(match.polygonAbsolute.points, "rgba(0, 255, 0, 0.25)", false));
+        this.ocrOverlayIds.push(this.canvasManager?.addPolygon(match.polygonAbsolute.points, this.options.ocrMatchColor ?? "grey", false));
         break;
       }
       this.ocrOverlayIds.forEach((id) => this.canvasManager?.setVisibility(id, !this.hidden));
@@ -537,6 +554,11 @@ var AnchorChildZone = class extends SimpleZone {
     super(...arguments);
     this.type = "anchor-child";
   }
+  get defaultOptions() {
+    return {
+      ...super.defaultOptions
+    };
+  }
   toExternalChild(docWidth, docHeight, parentAnchor) {
     let external = this.toExternal(docWidth, docHeight);
     if (!external) return null;
@@ -550,8 +572,8 @@ var AnchorChildZone = class extends SimpleZone {
   }
 };
 var AnchorZone = class extends CaptureZoneBase {
-  constructor(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required = false, dataType = null, excludeFromOutput = false, defaultValueIfEmpty = null) {
-    super(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required, dataType, excludeFromOutput, defaultValueIfEmpty);
+  constructor(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required = false, dataType = null, excludeFromOutput = false, defaultValueIfEmpty = null, opts = {}) {
+    super(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required, dataType, excludeFromOutput, defaultValueIfEmpty, opts);
     this.type = "anchor";
     //private primaryCanvasRectangleId: string | null = null;
     this._anchorLocation = "MiddleLeft";
@@ -561,7 +583,6 @@ var AnchorZone = class extends CaptureZoneBase {
     this.ocrOverlayIds = [];
     this.lastMatchHash = "";
     this.currentAnchorPoint = null;
-    this._cycle = 50;
     const internalArray = [];
     const snapshotChildren = (arr) => {
       const map = /* @__PURE__ */ new Map();
@@ -615,6 +636,28 @@ var AnchorZone = class extends CaptureZoneBase {
       configurable: false
     });
   }
+  get defaultOptions() {
+    return {
+      ...super.defaultOptions,
+      zoneColor: "green",
+      ocrMatchColor: "rgba(0, 255, 255, 0.25)",
+      anchorPointColor: "rgba(0, 0, 255, 0.25)",
+      zoneAdditionalChildrenColor: (index) => {
+        let maxOpacity = 0.5;
+        let minOpacity = 0.25;
+        let percentThroughArray = (index + 1) / this.children.length;
+        let opacity = maxOpacity - (maxOpacity - minOpacity) * percentThroughArray;
+        let color = `rgba(50, 128, 255, ${opacity.toFixed(2)})`;
+        return color;
+      }
+    };
+  }
+  resolveValue(value, index, total, defaultValue = "black") {
+    if (value === void 0 || value === null) {
+      return defaultValue;
+    }
+    return typeof value === "function" ? value(index, total) : value;
+  }
   get anchorLocation() {
     return this._anchorLocation;
   }
@@ -640,7 +683,7 @@ var AnchorZone = class extends CaptureZoneBase {
       return;
     }
     if (type === CaptureZoneEventType.ZoneCanvasManagerSet) {
-      this.primaryCanvasRectangleId = this.canvasManager?.addRectangle(this.rect, this.name, "green", true, true);
+      this.primaryCanvasRectangleId = this.canvasManager?.addRectangle(this.rect, this.name, this.options.zoneColor ?? "black", true, true);
     }
     if (type === CaptureZoneEventType.ZoneAnchorLocationChanged) {
       const zoneAnchorLocationChangedPayload = payload;
@@ -677,12 +720,11 @@ var AnchorZone = class extends CaptureZoneBase {
       this.ocrOverlayIds.forEach((id) => this.canvasManager?.removeObject(id));
       this.ocrOverlayIds = [];
       let isFirstMatch = true;
-      let cycle = this.cycle;
       for (const match of ocrMatches) {
         if (match.templateZoneId != this.id) continue;
-        this.ocrOverlayIds.push(this.canvasManager?.addPolygon(match.polygonAbsolute.points, "rgba(0, 255, 255, 0.25)", false));
+        this.ocrOverlayIds.push(this.canvasManager?.addPolygon(match.polygonAbsolute.points, this.options.ocrMatchColor ?? "black", false));
         if (match.anchorPointAbsolute) {
-          this.ocrOverlayIds.push(this.canvasManager?.addCircle(match.anchorPointAbsolute, 2, "rgba(0, 0, 255, 0.25)", false, false));
+          this.ocrOverlayIds.push(this.canvasManager?.addCircle(match.anchorPointAbsolute, 2, this.options.anchorPointColor ?? "black", false, false));
           if (isFirstMatch) {
             for (const child of this.children.filter((e) => e.needsAnchorReposition)) {
               let currentAnchorPoint = this.currentAnchorPoint ?? this.rect.origin;
@@ -695,11 +737,7 @@ var AnchorZone = class extends CaptureZoneBase {
               const child = this.children[i];
               if (child.hidden == false) {
                 let vector = this.currentAnchorPoint ? match.anchorPointAbsolute.getDeltaFromPoint(this.currentAnchorPoint) : new Vector(0, 0);
-                let maxOpacity = 0.5;
-                let minOpacity = 0.25;
-                let percentThroughArray = (i + 1) / this.children.length;
-                let opacity = maxOpacity - (maxOpacity - minOpacity) * percentThroughArray;
-                let color = `rgba(${cycle}, 128, 255, ${opacity.toFixed(2)})`;
+                let color = this.resolveValue(this.options.zoneAdditionalChildrenColor, i, this.children.length, "black");
                 const polygon = child.rect.move(vector).toPolygon().points;
                 this.ocrOverlayIds.push(this.canvasManager?.addPolygon(polygon, color, false));
               }
@@ -714,10 +752,6 @@ var AnchorZone = class extends CaptureZoneBase {
       this.ocrOverlayIds.forEach((id) => this.canvasManager?.setVisibility(id, !this.hidden));
     }
   }
-  get cycle() {
-    this._cycle = (this._cycle + 64) % 255;
-    return this._cycle;
-  }
   handleEvent(id, type, payload) {
     if (this.id == id) {
       if (type == CaptureEngineToZoneEventType.CanvasObjectPositionChanged) {
@@ -893,7 +927,7 @@ var DefaultZoneCanvasManager = class {
   }
 };
 var CaptureEngine = class {
-  constructor(selector, serverApi) {
+  constructor(selector, serverApi, opts = {}) {
     this.listeners = {};
     // Template properties
     this._name = "Untitled";
@@ -907,6 +941,28 @@ var CaptureEngine = class {
     // key = object id, value = set of flags
     // Refactor properties
     this.zoneCounter = 1;
+    this.defaultOptions = {
+      initialZoom: 1,
+      initialPan: { x: 10, y: 10 },
+      defaultMode: "default",
+      // Default mode to switch into on startup
+      ocrOverlayColor: "rgba(0, 128, 255, 0.25)",
+      simpleZoneColor: "blue",
+      simpleZoneOcrMatchColor: "rgba(0, 255, 0, 0.25)",
+      anchorZoneColor: "green",
+      anchorZoneOcrMatchColor: "rgba(0, 255, 255, 0.25)",
+      anchorZoneAnchorPointColor: "rgba(0, 0, 255, 0.25)",
+      anchorZoneAdditionalChildrenColor: (index, total) => {
+        let maxOpacity = 0.5;
+        let minOpacity = 0.25;
+        let percentThroughArray = (index + 1) / total;
+        let opacity = maxOpacity - (maxOpacity - minOpacity) * percentThroughArray;
+        let color = `rgba(50, 128, 255, ${opacity.toFixed(2)})`;
+        return color;
+      },
+      anchorChildZoneColor: "blue",
+      anchorChildZoneOcrMatchColor: "rgba(0, 255, 0, 0.25)"
+    };
     /* --- INTERNAL ENGINE EVENT METHODS --- */
     // These are used for messages to the engine itself (e.g. from a zone if the zone mutated.)
     this.refreshMatches = this.createMeteredFn(async () => {
@@ -914,7 +970,12 @@ var CaptureEngine = class {
       const matches = await this.getZoneMatchesFromServer();
       this.setOcrMatchesSnapshot(matches);
     }, 1e3);
-    this.engine = new CanvasEngine(selector, {});
+    this.options = this.createOptions(opts);
+    this.engine = new CanvasEngine(selector, {
+      initialPan: this.options.initialPan,
+      defaultMode: this.options.defaultMode,
+      initialZoom: this.options.initialZoom
+    });
     if (serverApi) {
       this.setServerApi(serverApi);
     }
@@ -972,6 +1033,10 @@ var CaptureEngine = class {
     });
     this.setupEngine();
   }
+  /** INTERNAL SETUP **/
+  createOptions(opts) {
+    return { ...this.defaultOptions, ...opts };
+  }
   // This is used to attach event handlers to the canvas engine (this.engine)
   // All zone-related events (like position changed, resized, etc.) will be sent to the zones and not externally.
   // All zones will listen to these events and update their internal state accordingly and send the completed event
@@ -1332,29 +1397,43 @@ var CaptureEngine = class {
    * Add a new simple zone
    * @param bounds Rectangle
    */
-  addSimpleZone(bounds) {
+  addSimpleZone(bounds, makeCurrentSelected = false) {
     let newZone = new SimpleZone("Test1", bounds, false, null, null, null);
     this.zones.push(newZone);
+    if (makeCurrentSelected) {
+      this.setSelectedZones([newZone]);
+    }
+    return newZone;
   }
   /**
    * Add a new anchor zone
    * @param bounds Rectangle
    */
-  addAnchorZone(bounds) {
+  addAnchorZone(bounds, makeCurrentSelected = false) {
     let newZone = new AnchorZone(`Anchor ${this.zoneCounter++}`, bounds, false, null, null, null);
     this.zones.push(newZone);
+    if (makeCurrentSelected) {
+      this.setSelectedZones([newZone]);
+    }
+    return newZone;
   }
   /**
    * Add a child zone linked to an anchor
    * @param anchorId string
    * @param bounds Rectangle
    */
-  addAnchorChildZone(anchorId, bounds) {
+  addAnchorChildZone(anchorId, bounds, makeCurrentSelected = false) {
     const anchorZone = this.zones.find((z) => z.id === anchorId);
-    if (!anchorZone) return;
+    if (!anchorZone) {
+      throw new Error(`Anchor zone with id ${anchorId} not found`);
+    }
     let newZone = new AnchorChildZone(`Child ${this.zoneCounter++}`, bounds, false, null, null, null);
     if (!anchorZone.children) anchorZone.children = [];
     anchorZone.children.push(newZone);
+    if (makeCurrentSelected) {
+      this.setSelectedZones([newZone]);
+    }
+    return newZone;
   }
   /**
    * Remove a zone and its canvas representation by id
@@ -1617,7 +1696,7 @@ var CaptureEngine = class {
       const overlay = new PolygonObject(
         overlayId,
         pts,
-        "rgba(0, 128, 255, 0.25)",
+        this.options.ocrOverlayColor ?? "rgba(0, 128, 255, 0.25)",
         false,
         // isSelectable
         false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dytools-capture-engine",
-  "version": "1.2.6",
+  "version": "1.3.1",
   "description": "An editor allowing the creation of templates for ocr capture.",
   "type": "module",
   "main": "./dist/index.cjs",