@markerjs/markerjs3 3.1.0 → 3.3.0

package/markerjs3.d.ts

@@ -155,6 +155,14 @@ declare class SvgHelper {
      * @returns SVG image element
      */
     static createSvgFromString(stringSvg: string): SVGSVGElement;
+    /**
+     * Creates an SVG filter element.
+     * @param id filter id
+     * @param attributes other filter element attributes
+     * @param innerHTML filter definition as string
+     * @returns filter element
+     */
+    static createFilter(id: string, attributes?: Array<[string, string]>, innerHTML?: string): SVGFilterElement;
 }
 
 /**
@@ -244,6 +252,13 @@ interface AnnotationState {
      * Height of the annotation.
      */
     height: number;
+    /**
+     * Default SVG filter to apply to markers in the annotation.
+     * (e.g. drop shadow, outline, glow)
+     *
+     * @since 3.2.0
+     */
+    defaultFilter?: string;
     /**
      * Array of marker states for markers in the annotation.
      */
@@ -278,6 +293,16 @@ declare class MarkerBase {
      * Returns marker type name for the object instance.
      */
     get typeName(): string;
+    /**
+     * Marker type title (display name) used for accessibility and other attributes.
+     */
+    static title: string;
+    /**
+     * When true, the default filter is applied to the marker's visual.
+     *
+     * @since 3.2.0
+     */
+    static applyDefaultFilter: boolean;
     /**
      * SVG container object holding the marker's visual.
      *
@@ -302,10 +327,6 @@ declare class MarkerBase {
      * The default marker size when the marker is created with a click (without dragging).
      */
     defaultSize: ISize;
-    /**
-     * Marker type title (display name) used for accessibility and other attributes.
-     */
-    static title: string;
     /**
      * Marker lifecycle stage.
      *
@@ -854,6 +875,7 @@ declare class PolygonMarker extends MarkerBase {
     selectorVisualLines: SVGLineElement[];
     visibleVisual: SVGGraphicsElement | undefined;
     protected applyStrokeColor(): void;
+    protected applyFillColor(): void;
     protected applyStrokeWidth(): void;
     protected applyStrokeDasharray(): void;
     protected applyOpacity(): void;
@@ -909,6 +931,7 @@ interface FreehandMarkerState extends MarkerBaseState {
 declare class FreehandMarker extends MarkerBase {
     static typeName: string;
     static title: string;
+    static applyDefaultFilter: boolean;
     /**
      * Points of the freehand line.
      */
@@ -1250,6 +1273,7 @@ declare class TextMarker extends RectangularBoxMarkerBase {
 declare class CoverMarker extends ShapeMarkerBase {
     static typeName: string;
     static title: string;
+    static applyDefaultFilter: boolean;
     constructor(container: SVGGElement);
     protected getPath(width?: number, height?: number): string;
 }
@@ -1263,6 +1287,7 @@ declare class CoverMarker extends ShapeMarkerBase {
 declare class HighlightMarker extends ShapeMarkerBase {
     static typeName: string;
     static title: string;
+    static applyDefaultFilter: boolean;
     constructor(container: SVGGElement);
     protected getPath(width?: number, height?: number): string;
 }
@@ -1590,6 +1615,32 @@ declare class CurveMarker extends LineMarker {
     restoreState(state: CurveMarkerState): void;
 }
 
+/**
+ * Highlighter marker imitates a freeform highlighter pen.
+ *
+ * @summary Semi-transparent freeform marker.
+ * @group Markers
+ * @since 3.2.0
+ */
+declare class HighlighterMarker extends FreehandMarker {
+    static typeName: string;
+    static title: string;
+    static applyDefaultFilter: boolean;
+    constructor(container: SVGGElement);
+}
+
+/**
+ * A set of common SVG filters that can be used to make markers more legible
+ * or just for visual effect.
+ */
+declare class SvgFilters {
+    /**
+     * Returns a set of default filters that can be used to make markers more legible.
+     * @returns array of SVG filters.
+     */
+    static getDefaultFilterSet(): SVGFilterElement[];
+}
+
 /**
  * Properties for marker editor.
  */
@@ -2055,15 +2106,43 @@ declare class MarkerArea extends HTMLElement {
     private prevPanPoint;
     private panTo;
     private undoRedoManager;
+    private _defaultFilter?;
+    /**
+     * Returns the default SVG filter for the created markers.
+     *
+     * @since 3.2.0
+     */
+    get defaultFilter(): string | undefined;
+    /**
+     * Sets the default SVG filter for the created markers.
+     *
+     * @remarks
+     * The filter should be a valid SVG filter string.
+     *
+     * In Chromium-based browsers and Firefox, you can use CSS filter strings
+     *  e.g. "drop-shadow(2px 2px 2px black)". Unfortunately, at the time of
+     * the implementation this doesn't work in Safari (meaning any browser on iOS as well).
+     *
+     * For cross-browser compatibility, version 3.3 introduces a set of default filters.
+     * These are dropShadow, outline, and glow. You can use them by setting the defaultFilter
+     * to "url(#dropShadow)", "url(#outline)", or "url(#glow)" respectively.
+     *
+     * @since 3.2.0
+     */
+    set defaultFilter(value: string | undefined);
+    private _defsElement?;
+    private _defs;
     constructor();
     private connectedCallback;
     private disconnectedCallback;
     private createLayout;
     private addMainCanvas;
+    private addDefsToMainCanvas;
     private setMainCanvasSize;
     private setEditingTargetSize;
     private initOverlay;
     private addTargetImage;
+    private addDefaultFilterDefs;
     /**
      * Registers a marker type and its editor to be available in the marker area.
      * @param markerType
@@ -2177,6 +2256,14 @@ declare class MarkerArea extends HTMLElement {
      */
     redo(): void;
     private redoStep;
+    /**
+     * Adds "defs" to main canvas SVG.
+     * Useful for filters, custom fonts and potentially other scenarios.
+     *
+     * @param nodes
+     * @since 3.3.0
+     */
+    addDefs(...nodes: (string | Node)[]): void;
     addEventListener<T extends keyof MarkerAreaEventMap>(type: T, listener: (this: MarkerArea, ev: MarkerAreaEventMap[T]) => void, options?: boolean | AddEventListenerOptions): void;
     addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions | undefined): void;
     removeEventListener<T extends keyof MarkerAreaEventMap>(type: T, listener: (this: MarkerArea, ev: MarkerAreaEventMap[T]) => void, options?: boolean | EventListenerOptions): void;
@@ -2956,15 +3043,33 @@ declare class MarkerView extends HTMLElement {
      * Sets the current zoom level.
      */
     set zoomLevel(value: number);
+    private _defaultFilter?;
+    /**
+     * Returns the default SVG filter for the created markers.
+     *
+     * @since 3.2.0
+     */
+    get defaultFilter(): string | undefined;
+    /**
+     * Sets the default SVG filter for the created markers
+     * (e.g. "drop-shadow(2px 2px 2px black)").
+     *
+     * @since 3.2.0
+     */
+    set defaultFilter(value: string | undefined);
     private _isInitialized;
+    private _defsElement?;
+    private _defs;
     constructor();
     private connectedCallback;
     private disconnectedCallback;
     private createLayout;
     private addMainCanvas;
+    private addDefsToMainCanvas;
     private setMainCanvasSize;
     private setEditingTargetSize;
     private addTargetImage;
+    private addDefaultFilterDefs;
     private addNewMarker;
     private attachMarkerEvents;
     private attachEvents;
@@ -2996,6 +3101,12 @@ declare class MarkerView extends HTMLElement {
     private addLogo;
     private removeLogo;
     private positionLogo;
+    /**
+     * Adds "defs" to main canvas SVG.
+     * Useful for filters, custom fonts and potentially other scenarios.
+     * @since 3.3.0
+     */
+    addDefs(...nodes: (string | Node)[]): void;
     addEventListener<T extends keyof MarkerViewEventMap>(type: T, listener: (this: MarkerView, ev: MarkerViewEventMap[T]) => void, options?: boolean | AddEventListenerOptions): void;
     addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions | undefined): void;
     removeEventListener<T extends keyof MarkerViewEventMap>(type: T, listener: (this: MarkerView, ev: MarkerViewEventMap[T]) => void, options?: boolean | EventListenerOptions): void;
@@ -3103,12 +3214,30 @@ declare class Renderer {
      * Both `width` and `height` have to be set for this to take effect.
      */
     height?: number;
+    private _defaultFilter?;
+    /**
+     * Returns the default SVG filter for the created markers.
+     *
+     * @since 3.2.0
+     */
+    get defaultFilter(): string | undefined;
+    /**
+     * Sets the default SVG filter for the created markers
+     * (e.g. "drop-shadow(2px 2px 2px black)").
+     *
+     * @since 3.2.0
+     */
+    set defaultFilter(value: string | undefined);
+    private _defsElement?;
+    private _defs;
     constructor();
     private init;
     private addMainCanvas;
+    private addDefsToMainCanvas;
     private setMainCanvasSize;
     private setEditingTargetSize;
     private addTargetImage;
+    private addDefaultFilterDefs;
     private addNewMarker;
     private getMarkerTypeByName;
     /**
@@ -3129,6 +3258,12 @@ declare class Renderer {
      * @returns
      */
     rasterize(state: AnnotationState, targetCanvas?: HTMLCanvasElement): Promise<string>;
+    /**
+     * Adds "defs" to main canvas SVG.
+     * Useful for filters, custom fonts and potentially other scenarios.
+     * @since 3.3.0
+     */
+    addDefs(...nodes: (string | Node)[]): void;
 }
 
-export { Activator, type AnnotationState, ArrowMarker, ArrowMarkerEditor, type ArrowMarkerState, type ArrowType, type BlurHandler, CalloutMarker, CalloutMarkerEditor, type CalloutMarkerState, CaptionFrameMarker, CaptionFrameMarkerEditor, type CaptionFrameMarkerState, CheckImageMarker, CoverMarker, CurveMarker, CurveMarkerEditor, type CurveMarkerState, 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 };
+export { Activator, type AnnotationState, ArrowMarker, ArrowMarkerEditor, type ArrowMarkerState, type ArrowType, type BlurHandler, CalloutMarker, CalloutMarkerEditor, type CalloutMarkerState, CaptionFrameMarker, CaptionFrameMarkerEditor, type CaptionFrameMarkerState, CheckImageMarker, CoverMarker, CurveMarker, CurveMarkerEditor, type CurveMarkerState, CustomImageMarker, EllipseFrameMarker, EllipseMarker, type FontSize, FrameMarker, FreehandMarker, FreehandMarkerEditor, type FreehandMarkerState, Grip, type GripLocation, HighlightMarker, HighlighterMarker, 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, SvgFilters, SvgHelper, TextBlock, TextBlockEditor, type TextChangedHandler, TextMarker, TextMarkerEditor, type TextMarkerState, XImageMarker };