@markerjs/markerjs3 3.0.0-rc.4 → 3.0.1

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

@@ -703,6 +703,18 @@ declare class LinearMarkerBase extends MarkerBase {
      * Visible visual of the marker.
      */
     protected visibleVisual: SVGGraphicsElement | undefined;
+    /**
+     * Line visual of the marker.
+     */
+    protected lineVisual: SVGGraphicsElement | undefined;
+    /**
+     * Start terminator (ending) visual of the marker.
+     */
+    protected startTerminatorVisual: SVGGraphicsElement | undefined;
+    /**
+     * End terminator (ending) visual of the marker.
+     */
+    protected endTerminatorVisual: SVGGraphicsElement | undefined;
     protected applyStrokeColor(): void;
     protected applyStrokeWidth(): void;
     protected applyStrokeDasharray(): void;
@@ -710,13 +722,23 @@ declare class LinearMarkerBase extends MarkerBase {
     constructor(container: SVGGElement);
     ownsTarget(el: EventTarget): boolean;
     /**
-     * The path representing the marker visual.
+     * The path representing the line part of the marker visual.
      *
      * When implemented in derived class should return SVG path for the marker.
      *
      * @returns SVG path for the marker.
      */
     protected getPath(): string;
+    /**
+     * The path representing the start terminator (ending) part of the marker visual.
+     * @returns SVG path
+     */
+    protected getStartTerminatorPath(): string;
+    /**
+     * The path representing the end terminator (ending) part of the marker visual.
+     * @returns SVG path
+     */
+    protected getEndTerminatorPath(): string;
     /**
      * Creates marker's visual.
      */
@@ -775,7 +797,9 @@ declare class ArrowMarker extends LineMarker {
     get arrowType(): ArrowType;
     set arrowType(value: ArrowType);
     constructor(container: SVGGElement);
-    protected getPath(): string;
+    private getArrowProperties;
+    protected getStartTerminatorPath(): string;
+    protected getEndTerminatorPath(): string;
     protected applyStrokeWidth(): void;
     getState(): ArrowMarkerState;
     restoreState(state: MarkerBaseState): void;
@@ -793,7 +817,9 @@ declare class MeasurementMarker extends LineMarker {
     static typeName: string;
     static title: string;
     constructor(container: SVGGElement);
-    protected getPath(): string;
+    protected getStartTerminatorPath(): string;
+    protected getEndTerminatorPath(): string;
+    private getTerminatorProperties;
     protected applyStrokeWidth(): void;
 }
 
@@ -1706,6 +1732,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.
      *
@@ -3048,4 +3082,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 };