microboard-temp 0.5.152 → 0.6.1

package/dist/cjs/browser.js

@@ -21310,6 +21310,9 @@ class Items {
         item.render(context);
       }
     });
+    items.forEach((item) => {
+      item.renderHoverHighlight(context);
+    });
   }
   renderHTML(documentFactory) {
     const items = this.getItemsInView();
@@ -21576,6 +21579,8 @@ class BaseItem extends Mbr {
   onlyProportionalResize = false;
   itemType = "";
   children = [];
+  isHoverHighlighted = false;
+  static HOVER_HIGHLIGHT_COLOR = "rgba(71, 120, 245, 0.7)";
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
     this.defaultItemData = defaultItemData;
@@ -21863,6 +21868,23 @@ class BaseItem extends Mbr {
   getPath() {
     return new Path(this.getMbr().getLines(), true);
   }
+  highlightMbr() {
+    this.isHoverHighlighted = true;
+    this.subject.publish(this);
+  }
+  clearHighlightMbr() {
+    this.isHoverHighlighted = false;
+    this.subject.publish(this);
+  }
+  renderHoverHighlight(context) {
+    if (!this.isHoverHighlighted) {
+      return;
+    }
+    const mbr = this.getMbr();
+    mbr.strokeWidth = 2 / context.matrix.scaleX;
+    mbr.borderColor = BaseItem.HOVER_HIGHLIGHT_COLOR;
+    mbr.render(context);
+  }
   render(context) {
     if (this.index) {
       this.index.render(context);

package/dist/cjs/index.js

@@ -21310,6 +21310,9 @@ class Items {
         item.render(context);
       }
     });
+    items.forEach((item) => {
+      item.renderHoverHighlight(context);
+    });
   }
   renderHTML(documentFactory) {
     const items = this.getItemsInView();
@@ -21576,6 +21579,8 @@ class BaseItem extends Mbr {
   onlyProportionalResize = false;
   itemType = "";
   children = [];
+  isHoverHighlighted = false;
+  static HOVER_HIGHLIGHT_COLOR = "rgba(71, 120, 245, 0.7)";
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
     this.defaultItemData = defaultItemData;
@@ -21863,6 +21868,23 @@ class BaseItem extends Mbr {
   getPath() {
     return new Path(this.getMbr().getLines(), true);
   }
+  highlightMbr() {
+    this.isHoverHighlighted = true;
+    this.subject.publish(this);
+  }
+  clearHighlightMbr() {
+    this.isHoverHighlighted = false;
+    this.subject.publish(this);
+  }
+  renderHoverHighlight(context) {
+    if (!this.isHoverHighlighted) {
+      return;
+    }
+    const mbr = this.getMbr();
+    mbr.strokeWidth = 2 / context.matrix.scaleX;
+    mbr.borderColor = BaseItem.HOVER_HIGHLIGHT_COLOR;
+    mbr.render(context);
+  }
   render(context) {
     if (this.index) {
       this.index.render(context);

package/dist/cjs/node.js

@@ -23782,6 +23782,9 @@ class Items {
         item.render(context);
       }
     });
+    items.forEach((item) => {
+      item.renderHoverHighlight(context);
+    });
   }
   renderHTML(documentFactory) {
     const items = this.getItemsInView();
@@ -24048,6 +24051,8 @@ class BaseItem extends Mbr {
   onlyProportionalResize = false;
   itemType = "";
   children = [];
+  isHoverHighlighted = false;
+  static HOVER_HIGHLIGHT_COLOR = "rgba(71, 120, 245, 0.7)";
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
     this.defaultItemData = defaultItemData;
@@ -24335,6 +24340,23 @@ class BaseItem extends Mbr {
   getPath() {
     return new Path(this.getMbr().getLines(), true);
   }
+  highlightMbr() {
+    this.isHoverHighlighted = true;
+    this.subject.publish(this);
+  }
+  clearHighlightMbr() {
+    this.isHoverHighlighted = false;
+    this.subject.publish(this);
+  }
+  renderHoverHighlight(context) {
+    if (!this.isHoverHighlighted) {
+      return;
+    }
+    const mbr = this.getMbr();
+    mbr.strokeWidth = 2 / context.matrix.scaleX;
+    mbr.borderColor = BaseItem.HOVER_HIGHLIGHT_COLOR;
+    mbr.render(context);
+  }
   render(context) {
     if (this.index) {
       this.index.render(context);

package/dist/esm/browser.js

@@ -21153,6 +21153,9 @@ class Items {
         item.render(context);
       }
     });
+    items.forEach((item) => {
+      item.renderHoverHighlight(context);
+    });
   }
   renderHTML(documentFactory) {
     const items = this.getItemsInView();
@@ -21419,6 +21422,8 @@ class BaseItem extends Mbr {
   onlyProportionalResize = false;
   itemType = "";
   children = [];
+  isHoverHighlighted = false;
+  static HOVER_HIGHLIGHT_COLOR = "rgba(71, 120, 245, 0.7)";
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
     this.defaultItemData = defaultItemData;
@@ -21706,6 +21711,23 @@ class BaseItem extends Mbr {
   getPath() {
     return new Path(this.getMbr().getLines(), true);
   }
+  highlightMbr() {
+    this.isHoverHighlighted = true;
+    this.subject.publish(this);
+  }
+  clearHighlightMbr() {
+    this.isHoverHighlighted = false;
+    this.subject.publish(this);
+  }
+  renderHoverHighlight(context) {
+    if (!this.isHoverHighlighted) {
+      return;
+    }
+    const mbr = this.getMbr();
+    mbr.strokeWidth = 2 / context.matrix.scaleX;
+    mbr.borderColor = BaseItem.HOVER_HIGHLIGHT_COLOR;
+    mbr.render(context);
+  }
   render(context) {
     if (this.index) {
       this.index.render(context);

package/dist/esm/index.js

@@ -21146,6 +21146,9 @@ class Items {
         item.render(context);
       }
     });
+    items.forEach((item) => {
+      item.renderHoverHighlight(context);
+    });
   }
   renderHTML(documentFactory) {
     const items = this.getItemsInView();
@@ -21412,6 +21415,8 @@ class BaseItem extends Mbr {
   onlyProportionalResize = false;
   itemType = "";
   children = [];
+  isHoverHighlighted = false;
+  static HOVER_HIGHLIGHT_COLOR = "rgba(71, 120, 245, 0.7)";
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
     this.defaultItemData = defaultItemData;
@@ -21699,6 +21704,23 @@ class BaseItem extends Mbr {
   getPath() {
     return new Path(this.getMbr().getLines(), true);
   }
+  highlightMbr() {
+    this.isHoverHighlighted = true;
+    this.subject.publish(this);
+  }
+  clearHighlightMbr() {
+    this.isHoverHighlighted = false;
+    this.subject.publish(this);
+  }
+  renderHoverHighlight(context) {
+    if (!this.isHoverHighlighted) {
+      return;
+    }
+    const mbr = this.getMbr();
+    mbr.strokeWidth = 2 / context.matrix.scaleX;
+    mbr.borderColor = BaseItem.HOVER_HIGHLIGHT_COLOR;
+    mbr.render(context);
+  }
   render(context) {
     if (this.index) {
       this.index.render(context);

package/dist/esm/node.js

@@ -23613,6 +23613,9 @@ class Items {
         item.render(context);
       }
     });
+    items.forEach((item) => {
+      item.renderHoverHighlight(context);
+    });
   }
   renderHTML(documentFactory) {
     const items = this.getItemsInView();
@@ -23879,6 +23882,8 @@ class BaseItem extends Mbr {
   onlyProportionalResize = false;
   itemType = "";
   children = [];
+  isHoverHighlighted = false;
+  static HOVER_HIGHLIGHT_COLOR = "rgba(71, 120, 245, 0.7)";
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
     this.defaultItemData = defaultItemData;
@@ -24166,6 +24171,23 @@ class BaseItem extends Mbr {
   getPath() {
     return new Path(this.getMbr().getLines(), true);
   }
+  highlightMbr() {
+    this.isHoverHighlighted = true;
+    this.subject.publish(this);
+  }
+  clearHighlightMbr() {
+    this.isHoverHighlighted = false;
+    this.subject.publish(this);
+  }
+  renderHoverHighlight(context) {
+    if (!this.isHoverHighlighted) {
+      return;
+    }
+    const mbr = this.getMbr();
+    mbr.strokeWidth = 2 / context.matrix.scaleX;
+    mbr.borderColor = BaseItem.HOVER_HIGHLIGHT_COLOR;
+    mbr.render(context);
+  }
   render(context) {
     if (this.index) {
       this.index.render(context);

package/dist/types/Items/BaseItem/BaseItem.d.ts

@@ -41,6 +41,8 @@ export declare class BaseItem extends Mbr implements Geometry {
     onlyProportionalResize: boolean;
     itemType: string;
     children: string[];
+    isHoverHighlighted: boolean;
+    static readonly HOVER_HIGHLIGHT_COLOR = "rgba(71, 120, 245, 0.7)";
     constructor(board: Board, id?: string, defaultItemData?: BaseItemData | undefined, isGroupItem?: boolean);
     updateChildrenIds(): void;
     getId(): string;
@@ -77,6 +79,9 @@ export declare class BaseItem extends Mbr implements Geometry {
     isEnclosedOrCrossedBy(rect: Mbr): boolean;
     getMbrWithChildren(): Mbr;
     getPath(): Path | Paths;
+    highlightMbr(): void;
+    clearHighlightMbr(): void;
+    renderHoverHighlight(context: DrawingContext): void;
     render(context: DrawingContext): void;
     renderHTML(documentFactory: DocumentFactory): HTMLElement;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "microboard-temp",
-  "version": "0.5.152",
+  "version": "0.6.1",
   "description": "A flexible interactive whiteboard library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",