@markerjs/markerjs3 3.0.0-rc.3 → 3.0.0

package/README.md

@@ -1,9 +1,5 @@
 # marker.js 3 — Add image annotation to your web apps
 
-> **Note**: marker.js 3 is in the pre-release stage of its lifecycle and will have many additions and, potentially, breaking changes before the official 3.0 release.
->
-> If you need a stable image annotation library, consider using [marker.js 2](https://markerjs.com) for now.
-
 marker.js 3 is a JavaScript browser library to enable image annotation in your web applications. Add marker.js 3 to your web app and enable users to annotate and mark up images. You can save, share or otherwise process the results.
 
 ## Installation
@@ -12,15 +8,11 @@ marker.js 3 is a JavaScript browser library to enable image annotation in your w
 npm install @markerjs/markerjs3
 ```
 
-or
-
-```
-yarn add @markerjs/markerjs3
-```
+The library includes TypeScript type definitions out of the box.
 
 ## Usage
 
-Unlike the previous version, marker.js 3 is a "headless" (sort of) library. In this case "headless" means that it doesn't come with any toolbars, property editors, and placement preconceptions. This way the library focuses on the core features you need, and you can make it feel totally native in the application you are building without resorting to any tricks or hacks.
+marker.js 3 is a "headless" library. In this case "headless" means that it doesn't come with any toolbars, property editors, and placement preconceptions. This way the library focuses on the core features you need, and you can make it feel totally native in the application you are building without resorting to any tricks or hacks.
 
 With that out of the way, here are the simplest usage scenarios...
 
@@ -50,15 +42,15 @@ editorContainerDiv.appendChild(markerArea);
 To initiate creation of a marker you just call `createMarker()` and pass it the name (or type) of the marker you want to create. So, if you have a button with id `addFrameButton` you can make it create a new `FrameMarker` with something like this:
 
 ```js
-document.querySelector("#addButton")!.addEventListener("click", () => {
-  markerArea.createMarker("FrameMarker");
+document.querySelector('#addButton')?.addEventListener('click', () => {
+  markerArea.createMarker('FrameMarker');
 });
 ```
 
 And whenever you want to save state (current annotation) you just call `getState()`:
 
 ```js
-document.querySelector("#saveStateButton")!.addEventListener("click", () => {
+document.querySelector('#saveStateButton')?.addEventListener('click', () => {
   const state = markerArea.getState();
   console.log(state);
 });
@@ -101,15 +93,11 @@ markerView.show(savedState);
 
 ## Demos
 
-Check out the "work-in-progress" demo [here](https://github.com/ailon/markerjs3-wip-demo). It covers most of the available features with no extra bells or whistles.
-
-While it's made with React it is purposefully light on React-specific stuff and "best practices" to just focus on marker.js 3 related things.
-
-_more demos coming soon..._
+Check out the [demos on markerjs.com](https://markerjs.com/demos).
 
 ## More docs and tutorials
 
-_coming soon..._
+You can find marker.js 3 reference and tutorials [here](https://markerjs.com/docs-v3/).
 
 ## License
 

package/markerjs3.d.ts

@@ -1033,7 +1033,7 @@ declare class TextBlock {
     /**
      * Renders text within the text block according to its settings.
      */
-    renderText(): void;
+    renderText(): Promise<void>;
     private applyFontStyles;
     private _textSize?;
     /**
@@ -1158,6 +1158,7 @@ declare class TextMarker extends RectangularBoxMarkerBase {
      */
     textBlock: TextBlock;
     constructor(container: SVGGElement);
+    protected applyOpacity(): void;
     /**
      * Creates marker's visual.
      */
@@ -1395,6 +1396,7 @@ declare class ImageMarkerBase extends RectangularBoxMarkerBase {
      */
     protected naturalHeight: number;
     constructor(container: SVGGElement);
+    protected applyOpacity(): void;
     /**
      * Creates the image element based on the image type and source.
      */
@@ -1403,6 +1405,11 @@ declare class ImageMarkerBase extends RectangularBoxMarkerBase {
      * Creates marker's visual, including its image element.
      */
     createVisual(): void;
+    /**
+     * Adjusts marker's visual according to the current state
+     * (color, width, etc.).
+     */
+    adjustVisual(): void;
     /**
      * Adjusts the image size and position.
      */
@@ -1699,6 +1706,14 @@ declare class MarkerBaseEditor<TMarkerType extends MarkerBase = MarkerBase> {
      * Gets marker's opacity.
      */
     get opacity(): number;
+    /**
+     * Sets marker's notes.
+     */
+    set notes(value: string | undefined);
+    /**
+     * Gets marker's notes.
+     */
+    get notes(): string | undefined;
     /**
      * Creates a new instance of marker editor.
      *
@@ -1906,6 +1921,7 @@ type MarkerAreaMode = 'select' | 'create' | 'delete';
  *   const state = markerArea.getState();
  *   console.log(state);
  * });
+ * ```
  */
 declare class MarkerArea extends HTMLElement {
     private _contentContainer?;
@@ -1944,6 +1960,10 @@ declare class MarkerArea extends HTMLElement {
      */
     get currentMarkerEditor(): MarkerBaseEditor | undefined;
     private _selectedMarkerEditors;
+    /**
+     * Returns the currently selected marker editors.
+     */
+    get selectedMarkerEditors(): MarkerBaseEditor[];
     private _newMarkerOutline;
     private _targetImageLoaded;
     private _targetImage;
@@ -2740,6 +2760,34 @@ interface MarkerViewEventMap {
      * Viewer state restored.
      */
     viewrestorestate: CustomEvent<MarkerViewEventData>;
+    /**
+     * Marker clicked.
+     */
+    markerclick: CustomEvent<MarkerEventData>;
+    /**
+     * Marker mouse over.
+     */
+    markerover: CustomEvent<MarkerEventData>;
+    /**
+     * Marker pointer down.
+     */
+    markerpointerdown: CustomEvent<MarkerEventData>;
+    /**
+     * Marker pointer move.
+     */
+    markerpointermove: CustomEvent<MarkerEventData>;
+    /**
+     * Marker pointer up.
+     */
+    markerpointerup: CustomEvent<MarkerEventData>;
+    /**
+     * Marker pointer enter.
+     */
+    markerpointerenter: CustomEvent<MarkerEventData>;
+    /**
+     * Marker pointer leave.
+     */
+    markerpointerleave: CustomEvent<MarkerEventData>;
 }
 /**
  * Event data for {@link MarkerView}.
@@ -2750,6 +2798,15 @@ interface MarkerViewEventData {
      */
     markerView: MarkerView;
 }
+/**
+ * Marker custom event data.
+ */
+interface MarkerEventData extends MarkerViewEventData {
+    /**
+     * Marker instance.
+     */
+    marker: MarkerBase;
+}
 /**
  * MarkerView is the main annotation viewer web component.
  *
@@ -2834,6 +2891,7 @@ declare class MarkerView extends HTMLElement {
     private setEditingTargetSize;
     private addTargetImage;
     private addNewMarker;
+    private attachMarkerEvents;
     private attachEvents;
     private attachWindowEvents;
     private detachEvents;
@@ -2998,4 +3056,4 @@ declare class Renderer {
     rasterize(state: AnnotationState, targetCanvas?: HTMLCanvasElement): Promise<string>;
 }
 
-export { Activator, type AnnotationState, ArrowMarker, ArrowMarkerEditor, type ArrowMarkerState, type ArrowType, type BlurHandler, CalloutMarker, CalloutMarkerEditor, type CalloutMarkerState, CaptionFrameMarker, CaptionFrameMarkerEditor, type CaptionFrameMarkerState, CheckImageMarker, CoverMarker, CustomImageMarker, EllipseFrameMarker, EllipseMarker, type FontSize, FrameMarker, FreehandMarker, FreehandMarkerEditor, type FreehandMarkerState, Grip, type GripLocation, HighlightMarker, type IPoint, type ISize, type ITransformMatrix, ImageMarkerBase, type ImageMarkerBaseState, ImageMarkerEditor, type ImageType, LineMarker, LinearMarkerBase, type LinearMarkerBaseState, LinearMarkerEditor, MarkerArea, type MarkerAreaEventData, type MarkerAreaEventMap, type MarkerAreaMode, MarkerBase, MarkerBaseEditor, type MarkerBaseState, type MarkerCreationStyle, type MarkerEditorEventData, type MarkerEditorProperties, type MarkerEditorState, type MarkerStage, MarkerView, type MarkerViewEventData, type MarkerViewEventMap, MeasurementMarker, PolygonMarker, PolygonMarkerEditor, type PolygonMarkerState, RectangularBoxMarkerBase, type RectangularBoxMarkerBaseState, Renderer, ResizeGrip, RotateGrip, ShapeMarkerBase, type ShapeMarkerBaseState, ShapeMarkerEditor, ShapeOutlineMarkerBase, type ShapeOutlineMarkerBaseState, ShapeOutlineMarkerEditor, SvgHelper, TextBlock, TextBlockEditor, type TextChangedHandler, TextMarker, TextMarkerEditor, type TextMarkerState, XImageMarker };
+export { Activator, type AnnotationState, ArrowMarker, ArrowMarkerEditor, type ArrowMarkerState, type ArrowType, type BlurHandler, CalloutMarker, CalloutMarkerEditor, type CalloutMarkerState, CaptionFrameMarker, CaptionFrameMarkerEditor, type CaptionFrameMarkerState, CheckImageMarker, CoverMarker, CustomImageMarker, EllipseFrameMarker, EllipseMarker, type FontSize, FrameMarker, FreehandMarker, FreehandMarkerEditor, type FreehandMarkerState, Grip, type GripLocation, HighlightMarker, type IPoint, type ISize, type ITransformMatrix, ImageMarkerBase, type ImageMarkerBaseState, ImageMarkerEditor, type ImageType, LineMarker, LinearMarkerBase, type LinearMarkerBaseState, LinearMarkerEditor, MarkerArea, type MarkerAreaEventData, type MarkerAreaEventMap, type MarkerAreaMode, MarkerBase, MarkerBaseEditor, type MarkerBaseState, type MarkerCreationStyle, type MarkerEditorEventData, type MarkerEditorProperties, type MarkerEditorState, type MarkerEventData, type MarkerStage, MarkerView, type MarkerViewEventData, type MarkerViewEventMap, MeasurementMarker, PolygonMarker, PolygonMarkerEditor, type PolygonMarkerState, RectangularBoxMarkerBase, type RectangularBoxMarkerBaseState, Renderer, ResizeGrip, RotateGrip, ShapeMarkerBase, type ShapeMarkerBaseState, ShapeMarkerEditor, ShapeOutlineMarkerBase, type ShapeOutlineMarkerBaseState, ShapeOutlineMarkerEditor, SvgHelper, TextBlock, TextBlockEditor, type TextChangedHandler, TextMarker, TextMarkerEditor, type TextMarkerState, XImageMarker };