@visuallyjs/browser-ui 1.2.5 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visuallyjs/browser-ui",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "license": "Commercial",
   "main": "js/visuallyjs.browser-ui.cjs.js",
   "module": "js/visuallyjs.browser-ui.esm.js",

package/types/browser-ui/definitions.d.ts

@@ -3,7 +3,7 @@ import { BoundingBox, Edge, Group, Node, ObjectData, Port, Vertex, VisuallyJsMod
 import { PointXY, Size } from "../core";
 import { UICoreDefaults, UICoreOptions, UIEdgeOptions, DragOptions, Overlay, Connection, EdgePropertyMappings, AlignContentOptions } from "../ui";
 import { EdgeInputMethod } from "./edge-handler-base";
-import { ShapeLibrary, ShapeSet } from "./shape-library/shape-library-definitions";
+import { LabelBackgroundOptions, LabelPosition, ShapeLibrary, ShapeSet } from "./shape-library/shape-library-definitions";
 import { VisuallyJSDOMElement } from "./element-facade";
 import { VertexMapping } from "../ui";
 import { BrowserUI } from "./browser-visuallyjs-instance";
@@ -235,6 +235,14 @@ export interface ShapesOptions {
      * The attribute containing each vertex's label. Defaults to 'label'
      */
     labelAttribute?: string;
+    /**
+     * Position for labels. Defaults to "center".
+     */
+    labelPosition?: LabelPosition;
+    /**
+     * Options for label background. Use `true` for defaults, or supply your own values (which will be merged on top of the defaults)
+     */
+    labelBackground?: boolean | LabelBackgroundOptions;
     /**
      * Whether or not to show labels. Defaults to true.
      */

package/types/browser-ui/shape-library/shape-library-definitions.d.ts

@@ -1,4 +1,4 @@
-import { Size, Group, Node, ObjectData, AbstractEntry, CustomTagOptions } from "../../core";
+import { Size, Group, Node, ObjectData, AbstractEntry, CustomTagOptions, PointXY } from "../../core";
 import { BrowserElement } from "../util";
 import { IconDefinition } from "../icons";
 import { FontSpec } from "../definitions";
@@ -171,7 +171,7 @@ export interface ShapeLibrary<T extends ObjectData> {
     getShapeDefinition(type: string, set?: string): RealisedShapeType;
     renderCompiledShape(data: T, strokeWidth?: number): BrowserElement;
     renderShapeLabel(data: ObjectData, labelProperty: string, strokeWidth: string, label: string, fill: string, stroke: string, font: FontSpec): SVGTextElement;
-    getShapeTagDefinition(isSvgContainer: boolean, strokeWidth?: number, includeLabel?: boolean, fontSpec?: FontSpec, labelAttribute?: string, defaultFillColor?: string, defaultOutlineColor?: string, defaultColor?: string): CustomTagOptions;
+    getShapeTagDefinition(isSvgContainer: boolean, strokeWidth?: number, includeLabel?: boolean, fontSpec?: FontSpec, labelAttribute?: string, labelPosition?: LabelPosition, defaultFillColor?: string, defaultOutlineColor?: string, defaultColor?: string): CustomTagOptions;
     getShapeSet(id: string): RenderedShapeSet;
     getShapeSets(): Array<RenderedShapeSet>;
     rootSet: RenderedShapeSet;
@@ -179,7 +179,7 @@ export interface ShapeLibrary<T extends ObjectData> {
     getSvgDefsElement(): SVGElement;
     parseDefs(): Array<Array<AbstractEntry>>;
     useMultilineLabels(): boolean;
-    $applyMultilineLabel(el: Element, data: ObjectData, labelAttribute: string): void;
+    $applyMultilineLabel(el: Element, data: ObjectData, labelAttribute: string, labelPosition: LabelPosition): void;
     typeParameter: string;
     categoryParameter: string;
     defaultCategoryId: string;
@@ -189,7 +189,7 @@ export interface ShapeLibrary<T extends ObjectData> {
      * @param data The data associated with the element.
      * @param labelAttribute The attribute to use for the label.
      */
-    refresh(el: BrowserElement, data: T, labelAttribute?: string): void;
+    refresh(el: BrowserElement, data: T, labelAttribute: string, labelPosition: LabelPosition): void;
 }
 /**
  * Defines a function that can take a vertex's data object and return a document fragment with it rendered.
@@ -222,6 +222,14 @@ export declare const TAG_SHAPE = "vjs-shape";
  * @context shape-library
  */
 export declare const CLASS_SHAPE_LABEL = "vjs-shape-label";
+/**
+ * This class is assigned to svg rect elements serving as the background for shape labels. By default it is an empty rectangle with no fill, and is not visible in the UI.  If you supply a `labelBackground` config, this element will use it.
+ * @group Nodes and Groups
+ * @category CSS Classes
+ * @cssClass
+ * @context shape-library
+ */
+export declare const CLASS_SHAPE_LABEL_BG = "vjs-shape-label-bg";
 /**
  * This class is assigned to the parent SVG elements for shapes.
  * @group Nodes and Groups
@@ -276,3 +284,16 @@ export interface ShapePropertyDefinition {
     values?: Array<any>;
 }
 export type LabelPosition = "top" | "bottom" | "center";
+/**
+ * Options for the label background on a shape.
+ * @group Diagrams
+ * @category Shapes
+ */
+export interface LabelBackgroundOptions {
+    stroke?: string;
+    strokeWidth?: number;
+    fill?: string;
+    padding?: PointXY;
+    rx?: number;
+    opacity?: number;
+}

package/types/browser-ui/shape-library/shape-library.d.ts

@@ -1,4 +1,4 @@
-import { RenderedShapeSet, ShapeGeneratorFunction, ShapeLibrary, ShapeSet, LabelPosition, RealisedShapeType } from "./shape-library-definitions";
+import { RenderedShapeSet, ShapeGeneratorFunction, ShapeLibrary, ShapeSet, LabelPosition, RealisedShapeType, LabelBackgroundOptions } from "./shape-library-definitions";
 import { BrowserElement } from "../util";
 import { CustomTagOptions, Recado, AbstractEntry, ObjectData } from "../../core";
 import { IconDefinition } from "../icons";
@@ -122,6 +122,10 @@ export interface ShapeLibraryOptions {
      * Default position for labels (will be overridden by a shape that defines its own position. Defaults to "center"
      */
     labelPosition?: LabelPosition;
+    /**
+     * Options for label background. Use `true` for defaults, or supply your own values (which will be merged on top of the defaults)
+     */
+    labelBackground?: boolean | LabelBackgroundOptions;
     /**
      * Optional default for fill color. If not provided, fill is set to #FFFFFF.
      */
@@ -142,6 +146,8 @@ export declare class ShapeLibraryImpl<T extends ObjectData> implements ShapeLibr
     shapeSets: Map<string, RenderedShapeSet>;
     defaultCategoryId: string;
     private labelPosition;
+    private _showLabelBackgrounds;
+    private _labelBackgroundOptions;
     rootSet: RenderedShapeSet;
     iconContainerTemplate: string;
     iconContainerAst: Array<AbstractEntry>;
@@ -177,8 +183,9 @@ export declare class ShapeLibraryImpl<T extends ObjectData> implements ShapeLibr
      * @param el
      * @param data
      * @param labelAttribute
+     * @param labelPosition
      */
-    refresh(el: BrowserElement, data: ObjectData, labelAttribute?: string): void;
+    refresh(el: BrowserElement, data: ObjectData, labelAttribute: string, labelPosition: LabelPosition): void;
     private _processShapeSets;
     getShapeSet(id: string): RenderedShapeSet;
     getShapeSets(): Array<RenderedShapeSet>;
@@ -211,7 +218,6 @@ export declare class ShapeLibraryImpl<T extends ObjectData> implements ShapeLibr
      * @param el
      * @private
      */
-    private _applyVectorEffect;
     /**
      * Render the given data with the appropriate template. A `fill` value is set on the resulting element, and the `vector-effect` attribute is set to 'non scaling stroke', ie. when the shape is scaled due to the element dimensions differing from the viewbox, the stroke does not change.
      * @param data
@@ -242,7 +248,7 @@ export declare class ShapeLibraryImpl<T extends ObjectData> implements ShapeLibr
      * Returns a tag definition that can be used in a Surface's `tags` declaration. Note that this method returns an object containing the tag's implementation, but not the name of the tag. You can call the tag whatever you like.
      * @internal
      */
-    getShapeTagDefinition(isSvgContainer: boolean, strokeWidth?: number, includeLabel?: boolean, fontSpec?: FontSpec, labelAttribute?: string, defaultFillColor?: string, defaultOutlineColor?: string, defaultColor?: string, defaultOutlineWidth?: number): CustomTagOptions;
+    getShapeTagDefinition(isSvgContainer: boolean, strokeWidth?: number, includeLabel?: boolean, fontSpec?: FontSpec, labelAttribute?: string, labelPosition?: LabelPosition, defaultFillColor?: string, defaultOutlineColor?: string, defaultColor?: string, defaultOutlineWidth?: number): CustomTagOptions;
     /**
      * @internal
      */
@@ -256,14 +262,14 @@ export declare class ShapeLibraryImpl<T extends ObjectData> implements ShapeLibr
      */
     private _resolveIcon;
     /**
-     * Converts text element labels to multiline tspans, if multilineLabels is set to true (which is
-     * the default).
+     * Converts text element labels to multiline tspans, if multilineLabels is set to true (which is the default).
      * @param labelElement
      * @param data
      * @param labelAttribute
+     * @param labelPosition
      * @internal
      */
-    $applyMultilineLabel(labelElement: SVGTextElement, data: ObjectData, labelAttribute: string): void;
+    $applyMultilineLabel(labelElement: SVGTextElement, data: ObjectData, labelAttribute: string, labelPosition: LabelPosition): void;
     /**
      * Check for any icons that were declared and render them.
      * @param el

package/types/browser-ui/surface-renderer/diagrams/definitions.d.ts

@@ -1,4 +1,4 @@
-import { LabelPosition, ShapeSet } from "../../shape-library";
+import { LabelBackgroundOptions, LabelPosition, ShapeSet } from "../../shape-library";
 import { Group, ObjectData, PointXY, Size, Vertex, Node, BeforeConnectInterceptor } from "../../../core";
 import { DiagramCell } from "./diagram-cell";
 import { GridOptions, UIExportOptions, UICoreDefaults, EdgeEventOptions, OverlaySpec, ConnectorSpec, NodeEventOptions, GroupMapping, NodeMapping, AnchorSpec, EdgePropertyMappings, MagnetizeOptions, PaintStyle, OverlayVisibility, EdgeDeleteConfirmationFunction } from "../../../ui";
@@ -312,6 +312,10 @@ export interface DiagramOptions {
          * Default position for labels (will be overridden by a shape that defines its own position. Defaults to "center"
          */
         labelPosition?: LabelPosition;
+        /**
+         * Options for label background. Use `true` for defaults, or supply your own values (which will be merged on top of the defaults)
+         */
+        labelBackground?: boolean | LabelBackgroundOptions;
         /**
          * Optional event mappings for all cells.
          */

package/types/browser-ui/svg-util.d.ts

@@ -1,6 +1,7 @@
 import { BrowserElement } from "./util";
 import { GradientSpec } from "../core";
 import { SvgConnector } from "./svg-element-connector";
+import { LabelPosition } from "./shape-library";
 export type ElementAttributes = Record<string, string | number | object>;
 export declare function $attr(node: BrowserElement, attributes: ElementAttributes): void;
 export declare function $svgNode(name: string, attributes?: ElementAttributes, style?: Record<string, any>, clazz?: string): SVGElement;
@@ -22,6 +23,7 @@ export declare function $appendAtIndex(svg: SVGElement, path: SVGElement, idx: n
  * @param textElement
  * @param text
  * @param maxWidth
+ * @param textPosition Where the text is placed relative to its context. This has a bearing on how we adjust the `dy` attribute of the initial span.
  * @internal
  */
-export declare function convertToMultilineText(textElement: SVGTextElement, text: string, maxWidth: number): SVGTextElement;
+export declare function convertToMultilineText(textElement: SVGTextElement, text: string, maxWidth: number, textPosition: LabelPosition): SVGTextElement;

package/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.2.5";
+export declare const VERSION = "1.2.6";