@markerjs/markerjs3 3.2.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;
 }
 
 /**
@@ -246,7 +254,7 @@ interface AnnotationState {
     height: number;
     /**
      * Default SVG filter to apply to markers in the annotation.
-     * (e.g. "drop-shadow(2px 2px 2px black)")
+     * (e.g. drop shadow, outline, glow)
      *
      * @since 3.2.0
      */
@@ -1621,6 +1629,18 @@ declare class HighlighterMarker extends FreehandMarker {
     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.
  */
@@ -2094,21 +2114,35 @@ declare class MarkerArea extends HTMLElement {
      */
     get defaultFilter(): string | undefined;
     /**
-     * Sets the default SVG filter for the created markers
-     * (e.g. "drop-shadow(2px 2px 2px black)").
+     * 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
@@ -2222,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;
@@ -3016,14 +3058,18 @@ declare class MarkerView extends HTMLElement {
      */
     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;
@@ -3055,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;
@@ -3176,12 +3228,16 @@ declare class Renderer {
      * @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;
     /**
@@ -3202,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, 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, 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 };