@ngroznykh/papirus 0.3.22 → 0.4.0

package/dist/papirus.js

@@ -457,7 +457,6 @@ const MARKER_SIZES = {
   diamond: 14,
   circle: 6
 };
-const EDGE_LABEL_BACKGROUND_PADDING = 4;
 const EDGE_LABEL_BACKGROUND_RADIUS = 2;
 const RESIZE_HANDLE_SIZE = 8;
 const RESIZE_HANDLE_OFFSET = 6;
@@ -2600,6 +2599,23 @@ function applyStyleManagerToElements(styleManager, groups, edges, nodes) {
     node.applyStyleManager(styleManager);
   }
 }
+const DEFAULT_INSET = 8;
+function normalizeTextInset(value, fallback) {
+  const n = (v) => v !== void 0 && Number.isFinite(v) ? Math.max(0, v) : fallback;
+  if (value === void 0) {
+    return { top: fallback, right: fallback, bottom: fallback, left: fallback };
+  }
+  if (typeof value === "number") {
+    const v = n(value);
+    return { top: v, right: v, bottom: v, left: v };
+  }
+  return {
+    top: n(value.top),
+    right: n(value.right),
+    bottom: n(value.bottom),
+    left: n(value.left)
+  };
+}
 const DEFAULT_STYLE = {
   font: "14px sans-serif",
   fontSize: 14,
@@ -2608,7 +2624,8 @@ const DEFAULT_STYLE = {
   color: "#000000",
   opacity: 1,
   align: "center",
-  baseline: "middle"
+  baseline: "middle",
+  verticalAlign: "middle"
 };
 class TextLabel {
   constructor(options) {
@@ -2621,8 +2638,10 @@ class TextLabel {
     this._localStyle = { ...options.style };
     this._style = { ...DEFAULT_STYLE, ...options.style };
     this._maxWidth = options.maxWidth;
-    this._padding = options.padding ?? 8;
-    this._margin = Number.isFinite(options.margin) ? Math.max(0, options.margin ?? 0) : 0;
+    this._inset = normalizeTextInset(
+      options.inset ?? options.margin ?? options.padding,
+      DEFAULT_INSET
+    );
     this._styleClass = options.styleClass;
     this._onChange = options.onChange;
   }
@@ -2667,6 +2686,12 @@ class TextLabel {
     this._measureDirty = true;
     this._onChange?.();
   }
+  /**
+   * Raw text style overrides (without StyleManager merge)
+   */
+  get styleOverrides() {
+    return { ...this._localStyle };
+  }
   /**
    * Style class name for StyleManager
    */
@@ -2708,30 +2733,15 @@ class TextLabel {
     this._measureDirty = true;
   }
   /**
-   * Label padding
+   * Inset from bounds edge to text (per side: top, right, bottom, left)
    */
-  get padding() {
-    return this._padding;
+  get inset() {
+    return { ...this._inset };
   }
-  set padding(value) {
-    const next = Number.isFinite(value) ? Math.max(0, value) : this._padding;
-    if (this._padding !== next) {
-      this._padding = next;
-      this._lines = [];
-      this._measureDirty = true;
-      this._onChange?.();
-    }
-  }
-  /**
-   * Label margin
-   */
-  get margin() {
-    return this._margin;
-  }
-  set margin(value) {
-    const next = Number.isFinite(value) ? Math.max(0, value) : this._margin;
-    if (this._margin !== next) {
-      this._margin = next;
+  set inset(value) {
+    const next = normalizeTextInset(value, DEFAULT_INSET);
+    if (this._inset.top !== next.top || this._inset.right !== next.right || this._inset.bottom !== next.bottom || this._inset.left !== next.left) {
+      this._inset = next;
       this._lines = [];
       this._measureDirty = true;
       this._onChange?.();
@@ -2764,7 +2774,7 @@ class TextLabel {
   }
   /**
    * Get wrapped lines for export. Uses ctx to measure and wrap by words.
-   * Call with maxWidth = inner bounds width (e.g. bounds.width - margin*2).
+   * Call with maxWidth = inner bounds width (e.g. bounds.width - inset*2).
    */
   getWrappedLines(ctx, maxWidth) {
     this.setAutoMaxWidth(maxWidth);
@@ -2786,8 +2796,11 @@ class TextLabel {
     const effectiveMaxWidth = this._maxWidth ?? this._autoMaxWidth;
     const text = this._text ?? "";
     if (effectiveMaxWidth !== void 0) {
-      const maxWidth = Math.max(0, effectiveMaxWidth - this._margin * 2);
-      this._lines = this.wrapText(ctx, text, Math.max(0, maxWidth - this._padding * 2));
+      const maxWidth = Math.max(
+        0,
+        effectiveMaxWidth - this._inset.left - this._inset.right
+      );
+      this._lines = this.wrapText(ctx, text, maxWidth);
     } else {
       this._lines = text.split("\n");
     }
@@ -2796,8 +2809,8 @@ class TextLabel {
       const metrics = ctx.measureText(line);
       maxLineWidth = Math.max(maxLineWidth, metrics.width);
     }
-    this._measuredWidth = maxLineWidth + this._padding * 2 + this._margin * 2;
-    this._measuredHeight = this._lines.length * lineHeight + this._padding * 2 + this._margin * 2;
+    this._measuredWidth = maxLineWidth + this._inset.left + this._inset.right;
+    this._measuredHeight = this._lines.length * lineHeight + this._inset.top + this._inset.bottom;
     this._measureDirty = false;
     return {
       width: this._measuredWidth,
@@ -2818,25 +2831,41 @@ class TextLabel {
     }
     const lineHeight = (this._style.fontSize ?? 14) * 1.2;
     const totalHeight = this._lines.length * lineHeight;
-    const margin = this._margin;
     const innerBounds = {
-      x: bounds.x + margin,
-      y: bounds.y + margin,
-      width: Math.max(0, bounds.width - margin * 2),
-      height: Math.max(0, bounds.height - margin * 2)
+      x: bounds.x + this._inset.left,
+      y: bounds.y + this._inset.top,
+      width: Math.max(
+        0,
+        bounds.width - this._inset.left - this._inset.right
+      ),
+      height: Math.max(
+        0,
+        bounds.height - this._inset.top - this._inset.bottom
+      )
     };
     let x;
     switch (align) {
       case "left":
-        x = innerBounds.x + this._padding;
+        x = innerBounds.x;
         break;
       case "right":
-        x = innerBounds.x + innerBounds.width - this._padding;
+        x = innerBounds.x + innerBounds.width;
         break;
       default:
         x = innerBounds.x + innerBounds.width / 2;
     }
-    const startY = innerBounds.y + (innerBounds.height - totalHeight) / 2 + lineHeight / 2;
+    const verticalAlign = this._style.verticalAlign ?? "middle";
+    let startY;
+    switch (verticalAlign) {
+      case "top":
+        startY = innerBounds.y + lineHeight / 2;
+        break;
+      case "bottom":
+        startY = innerBounds.y + innerBounds.height - totalHeight + lineHeight / 2;
+        break;
+      default:
+        startY = innerBounds.y + (innerBounds.height - totalHeight) / 2 + lineHeight / 2;
+    }
     ctx.fillStyle = this._style.color ?? "#000000";
     for (let i = 0; i < this._lines.length; i++) {
       const line = this._lines[i];
@@ -2851,16 +2880,13 @@ class TextLabel {
     if (this._lines.length === 0) {
       this.measure(ctx);
     }
-    this.applyStyle(ctx);
-    const lineHeight = (this._style.fontSize ?? 14) * 1.2;
-    const totalHeight = this._lines.length * lineHeight;
-    const startY = point.y - totalHeight / 2 + lineHeight / 2;
-    ctx.fillStyle = this._style.color ?? "#000000";
-    for (let i = 0; i < this._lines.length; i++) {
-      const line = this._lines[i];
-      const y = startY + i * lineHeight;
-      ctx.fillText(line, point.x, y);
-    }
+    const bounds = {
+      x: point.x - this._measuredWidth / 2,
+      y: point.y - this._measuredHeight / 2,
+      width: this._measuredWidth,
+      height: this._measuredHeight
+    };
+    this.render(ctx, bounds);
   }
   applyStyle(ctx) {
     const fontSize = this._style.fontSize ?? 14;
@@ -2906,7 +2932,9 @@ const snapshotLabel = (label) => {
   return {
     text: label.text,
     editableText: label.editableText,
-    style: cloneValue(label.style),
+    // Keep only local text overrides; computed style contains theme/class values
+    // and would overwrite class text color on debounced history replay.
+    style: cloneValue(label.styleOverrides),
     styleClass: label.styleClass,
     maxWidth: label.maxWidth
   };
@@ -4732,14 +4760,13 @@ class Edge extends Element {
     this._label.measure(ctx);
     const labelWidth = this._label.measuredWidth;
     const labelHeight = this._label.measuredHeight;
-    const bgPadding = this._labelBackground?.padding ?? EDGE_LABEL_BACKGROUND_PADDING;
     const bgColor = this._labelBackground?.color ?? "#ffffff";
     const bgOpacity = this._labelBackground?.opacity ?? 1;
     const bgRadius = this._labelBackground?.borderRadius ?? EDGE_LABEL_BACKGROUND_RADIUS;
-    const bgX = labelPosition.x - labelWidth / 2 - bgPadding;
-    const bgY = labelPosition.y - labelHeight / 2 - bgPadding;
-    const bgWidth = labelWidth + bgPadding * 2;
-    const bgHeight = labelHeight + bgPadding * 2;
+    const bgX = labelPosition.x - labelWidth / 2;
+    const bgY = labelPosition.y - labelHeight / 2;
+    const bgWidth = labelWidth;
+    const bgHeight = labelHeight;
     ctx.fillStyle = bgColor;
     ctx.globalAlpha = bgOpacity;
     if (bgRadius > 0) {
@@ -5044,6 +5071,7 @@ class InteractionManager {
     if (shallowEqual(before, after)) {
       return;
     }
+    this.renderer.markStyleDirty();
     this.queuePropertyChange("node", nodeId, before, after);
   }
   changeEdgeProperties(edgeId, apply) {
@@ -5057,6 +5085,7 @@ class InteractionManager {
     if (shallowEqual(before, after)) {
       return;
     }
+    this.renderer.markStyleDirty();
     this.queuePropertyChange("edge", edgeId, before, after);
   }
   changeGroupProperties(groupId, apply) {
@@ -5070,6 +5099,7 @@ class InteractionManager {
     if (shallowEqual(before, after)) {
       return;
     }
+    this.renderer.markStyleDirty();
     this.queuePropertyChange("group", groupId, before, after);
   }
   removeNodeFromGroups(nodeId, groupIds) {
@@ -5560,6 +5590,7 @@ class InteractionManager {
             pending.after
           )
         );
+        this.renderer.markStyleDirty();
         break;
       case "edge":
         this.historyManager.execute(
@@ -5570,6 +5601,7 @@ class InteractionManager {
             pending.after
           )
         );
+        this.renderer.markStyleDirty();
         break;
       case "group":
         this.historyManager.execute(
@@ -5580,6 +5612,7 @@ class InteractionManager {
             pending.after
           )
         );
+        this.renderer.markStyleDirty();
         break;
     }
   }
@@ -8045,8 +8078,10 @@ class NodeImage {
   get placement() {
     return this._options.placement ?? "center";
   }
-  get gap() {
-    return this._options.gap ?? 6;
+  /** Inset from edge of icon zone to image (single value for all sides) */
+  get inset() {
+    const v = this._options.inset ?? this._options.margin ?? this._options.padding;
+    return v !== void 0 && Number.isFinite(v) ? Math.max(0, v) : 6;
   }
   setSource(source) {
     this._loaded = false;
@@ -8061,23 +8096,18 @@ class NodeImage {
     if (!this._loaded) {
       return;
     }
-    const padding = this._options.padding ?? 8;
-    const margin = Math.max(0, this._options.margin ?? 0);
+    const ins = this.inset;
     const fit = this._options.fit ?? "none";
     const scaleWithBounds = this._options.scaleWithBounds ?? false;
     const opacity = this._options.opacity ?? 1;
-    const align = this._options.align ?? "center";
-    const verticalAlign = this._options.verticalAlign ?? "center";
-    const offsetX = this._options.offsetX ?? 0;
-    const offsetY = this._options.offsetY ?? 0;
     const innerBounds = {
-      x: bounds.x + margin,
-      y: bounds.y + margin,
-      width: Math.max(0, bounds.width - margin * 2),
-      height: Math.max(0, bounds.height - margin * 2)
+      x: bounds.x + ins,
+      y: bounds.y + ins,
+      width: Math.max(0, bounds.width - ins * 2),
+      height: Math.max(0, bounds.height - ins * 2)
     };
-    const availableWidth = Math.max(0, innerBounds.width - padding * 2);
-    const availableHeight = Math.max(0, innerBounds.height - padding * 2);
+    const availableWidth = Math.max(0, innerBounds.width);
+    const availableHeight = Math.max(0, innerBounds.height);
     let drawWidth = this._options.width ?? this._naturalWidth;
     let drawHeight = this._options.height ?? this._naturalHeight;
     if (scaleWithBounds) {
@@ -8096,21 +8126,13 @@ class NodeImage {
     const maxHeight = Math.max(0, availableHeight);
     drawWidth = Math.min(drawWidth, maxWidth);
     drawHeight = Math.min(drawHeight, maxHeight);
-    let x = innerBounds.x + padding;
-    let y = innerBounds.y + padding;
-    if (align === "center") {
-      x = innerBounds.x + (innerBounds.width - drawWidth) / 2;
-    } else if (align === "right") {
-      x = innerBounds.x + innerBounds.width - drawWidth - padding;
-    }
-    if (verticalAlign === "center") {
-      y = innerBounds.y + (innerBounds.height - drawHeight) / 2;
-    } else if (verticalAlign === "bottom") {
-      y = innerBounds.y + innerBounds.height - drawHeight - padding;
-    }
+    let x = innerBounds.x;
+    let y = innerBounds.y;
+    x = innerBounds.x + (innerBounds.width - drawWidth) / 2;
+    y = innerBounds.y + (innerBounds.height - drawHeight) / 2;
     ctx.save();
     ctx.globalAlpha = opacity;
-    ctx.drawImage(this._image, x + offsetX, y + offsetY, drawWidth, drawHeight);
+    ctx.drawImage(this._image, x, y, drawWidth, drawHeight);
     ctx.restore();
   }
   getSize() {
@@ -8200,8 +8222,8 @@ class Node extends Element {
     this._nodeStyle = { ...DEFAULT_NODE_STYLE, ...options.style };
     this._showPortsAlways = options.showPortsAlways ?? false;
     this._anchorPoints = this.normalizeAnchorPoints(options.anchorPoints);
-    this._labelPlacement = options.labelPlacement ?? "auto";
     this._resizeHandlesEnabled = options.resizeHandlesEnabled ?? true;
+    this._contentInset = this.normalizeContentInset(options.contentInset);
     if (options.label !== void 0) {
       if (typeof options.label === "string") {
         this._label = new TextLabel({
@@ -8398,24 +8420,22 @@ class Node extends Element {
     this._anchorPoints = this.normalizeAnchorPoints(value);
     this.markDirty();
   }
-  /**
-   * Label placement inside the node
-   */
-  get labelPlacement() {
-    return this._labelPlacement;
-  }
-  set labelPlacement(value) {
-    if (this._labelPlacement !== value) {
-      this._labelPlacement = value;
-      this.markDirty();
-    }
-  }
   /**
    * Default size (initial width/height)
    */
   get defaultSize() {
     return { ...this._defaultSize };
   }
+  /**
+   * Content area insets (per side). When all zero, content area = node bounds.
+   */
+  get contentInset() {
+    return { ...this._contentInset };
+  }
+  set contentInset(value) {
+    this._contentInset = this.normalizeContentInset(value);
+    this.markDirty();
+  }
   /**
    * Set getter for attachToOutline (called by DiagramRenderer when node is added)
    */
@@ -8438,87 +8458,20 @@ class Node extends Element {
     }
   }
   /**
-   * Calculate layout for icon and label
-   * Returns computed bounds for both elements
+   * Calculate layout for icon and label.
+   * Label always gets full content area; icon is placed within the same content area.
    */
-  calculateContentLayout(bounds, iconBoxSize, labelSize) {
-    let iconBounds = bounds;
-    let labelBounds = this.getLabelContainerBounds(bounds);
+  calculateContentLayout(bounds, iconBoxSize, _labelSize) {
+    const contentBounds = this.getLabelContainerBounds(bounds);
+    let iconBounds = contentBounds;
     if (this._icon && iconBoxSize) {
-      iconBounds = this.getIconBounds(bounds, iconBoxSize, this._icon.placement);
-    }
-    if (this._icon && this._label && iconBoxSize && labelSize && this._labelPlacement === "auto" && this._icon.placement !== "center") {
-      const gap = this._icon.gap;
-      const placement = this._icon.placement;
-      if (isCornerPlacement(placement)) {
-        iconBounds = this.getIconBounds(bounds, iconBoxSize, placement);
-        labelBounds = this.getLabelContainerBounds(bounds);
-      } else {
-        const contentBounds = this.getLabelContainerBounds(bounds);
-        switch (placement) {
-          case "top":
-            iconBounds = {
-              x: bounds.x,
-              y: bounds.y,
-              width: bounds.width,
-              height: iconBoxSize.height
-            };
-            labelBounds = {
-              x: contentBounds.x,
-              y: contentBounds.y + iconBoxSize.height + gap,
-              width: contentBounds.width,
-              height: Math.max(0, contentBounds.height - iconBoxSize.height - gap)
-            };
-            break;
-          case "bottom":
-            iconBounds = {
-              x: bounds.x,
-              y: bounds.y + bounds.height - iconBoxSize.height,
-              width: bounds.width,
-              height: iconBoxSize.height
-            };
-            labelBounds = {
-              x: contentBounds.x,
-              y: contentBounds.y,
-              width: contentBounds.width,
-              height: Math.max(0, contentBounds.height - iconBoxSize.height - gap)
-            };
-            break;
-          case "left":
-            iconBounds = {
-              x: bounds.x,
-              y: bounds.y,
-              width: iconBoxSize.width,
-              height: bounds.height
-            };
-            labelBounds = {
-              x: contentBounds.x + iconBoxSize.width + gap,
-              y: contentBounds.y,
-              width: Math.max(0, contentBounds.width - iconBoxSize.width - gap),
-              height: contentBounds.height
-            };
-            break;
-          case "right":
-            iconBounds = {
-              x: bounds.x + bounds.width - iconBoxSize.width,
-              y: bounds.y,
-              width: iconBoxSize.width,
-              height: bounds.height
-            };
-            labelBounds = {
-              x: contentBounds.x,
-              y: contentBounds.y,
-              width: Math.max(0, contentBounds.width - iconBoxSize.width - gap),
-              height: contentBounds.height
-            };
-            break;
-        }
-      }
-    } else if (this._label && labelSize) {
-      const autoBounds = this.getAutoLabelBounds(bounds, iconBoxSize);
-      labelBounds = this.getLabelBounds(autoBounds, labelSize, this._labelPlacement);
+      iconBounds = this.getIconBounds(
+        contentBounds,
+        iconBoxSize,
+        this._icon.placement
+      );
     }
-    return { iconBounds, labelBounds };
+    return { iconBounds, labelBounds: contentBounds };
   }
   /**
    * Get label bounds and wrapped lines for SVG export. Replicates renderContents layout logic.
@@ -8529,12 +8482,19 @@ class Node extends Element {
       return null;
     }
     const bounds = this.getBounds();
+    const contentBounds = this.getLabelContainerBounds(bounds);
     const iconBoxSize = this._icon ? this.getIconBoxSize() : void 0;
-    const autoBounds = this.getAutoLabelBounds(bounds, iconBoxSize);
-    this._label.setAutoMaxWidth(autoBounds.width);
+    this._label.setAutoMaxWidth(contentBounds.width);
     const labelSize = this._label.measure(ctx);
-    const { labelBounds } = this.calculateContentLayout(bounds, iconBoxSize, labelSize);
-    const lines = this._label.getWrappedLines(ctx, Math.max(0, autoBounds.width));
+    const { labelBounds } = this.calculateContentLayout(
+      bounds,
+      iconBoxSize,
+      labelSize
+    );
+    const lines = this._label.getWrappedLines(
+      ctx,
+      Math.max(0, contentBounds.width)
+    );
     return { bounds: labelBounds, lines };
   }
   /**
@@ -8550,23 +8510,14 @@ class Node extends Element {
     ctx.globalAlpha = 1;
   }
   /**
-   * Get world position of label center.
+   * Get world position of label center (center of content area).
    */
   getLabelPosition() {
-    const bounds = this.getBounds();
-    const placement = this._labelPlacement === "auto" ? "center" : this._labelPlacement;
-    switch (placement) {
-      case "top":
-        return { x: bounds.x + bounds.width / 2, y: bounds.y };
-      case "bottom":
-        return { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height };
-      case "left":
-        return { x: bounds.x, y: bounds.y + bounds.height / 2 };
-      case "right":
-        return { x: bounds.x + bounds.width, y: bounds.y + bounds.height / 2 };
-      default:
-        return { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 };
-    }
+    const bounds = this.getLabelContainerBounds(this.getBounds());
+    return {
+      x: bounds.x + bounds.width / 2,
+      y: bounds.y + bounds.height / 2
+    };
   }
   /**
    * Render icon, label, and ports
@@ -8577,14 +8528,14 @@ class Node extends Element {
     let bounds = this.getBounds();
     const iconBoxSize = this._icon ? this.getIconBoxSize() : void 0;
     if (this._label) {
-      this._label.setAutoMaxWidth(this.getAutoLabelBounds(bounds, iconBoxSize).width);
+      this._label.setAutoMaxWidth(this.getLabelContainerBounds(bounds).width);
     }
     const labelSize = this._label ? this._label.measure(ctx) : void 0;
     if (labelSize || iconBoxSize) {
       this.ensureContentsFit(labelSize, iconBoxSize);
       if (this._label && iconBoxSize) {
         bounds = this.getBounds();
-        this._label.setAutoMaxWidth(this.getAutoLabelBounds(bounds, iconBoxSize).width);
+        this._label.setAutoMaxWidth(this.getLabelContainerBounds(bounds).width);
       }
     }
     const { iconBounds, labelBounds } = this.calculateContentLayout(
@@ -8869,124 +8820,45 @@ class Node extends Element {
     }
   }
   calculateContentMinSize(labelSize, iconBoxSize, bounds) {
-    let minWidth = 0;
-    let minHeight = 0;
     const labelContainer = this.getLabelContainerBounds(bounds);
     const widthFactor = labelContainer.width > 0 ? bounds.width / labelContainer.width : 1;
     const heightFactor = labelContainer.height > 0 ? bounds.height / labelContainer.height : 1;
-    if (labelSize) {
-      minWidth = Math.max(minWidth, labelSize.width * widthFactor);
-      minHeight = Math.max(minHeight, labelSize.height * heightFactor);
-    }
-    if (iconBoxSize) {
-      minWidth = Math.max(minWidth, iconBoxSize.width);
-      minHeight = Math.max(minHeight, iconBoxSize.height);
-    }
-    if (labelSize && iconBoxSize && this._icon) {
-      const gap = this._icon.gap;
-      const labelPlacement = this._labelPlacement === "auto" ? "center" : this._labelPlacement;
-      const iconPlacement = this._icon.placement;
-      if (this._labelPlacement === "auto" && iconPlacement !== "center") {
-        if (isCornerPlacement(iconPlacement)) {
-          minWidth = Math.max(minWidth, iconBoxSize.width, labelSize.width);
-          minHeight = Math.max(minHeight, iconBoxSize.height, labelSize.height);
-        } else if (iconPlacement === "top" || iconPlacement === "bottom") {
-          minHeight = Math.max(minHeight, iconBoxSize.height + gap + labelSize.height);
-          minWidth = Math.max(minWidth, iconBoxSize.width, labelSize.width);
-        } else if (iconPlacement === "left" || iconPlacement === "right") {
-          minWidth = Math.max(minWidth, iconBoxSize.width + gap + labelSize.width);
-          minHeight = Math.max(minHeight, iconBoxSize.height, labelSize.height);
-        }
-      } else {
-        const labelHorizontal = labelPlacement === "left" || labelPlacement === "right";
-        const labelVertical = labelPlacement === "top" || labelPlacement === "bottom";
-        const iconHorizontal = iconPlacement === "left" || iconPlacement === "right";
-        const iconVertical = iconPlacement === "top" || iconPlacement === "bottom";
-        const labelSharesIconAxis = iconHorizontal && (labelPlacement === "center" || labelPlacement === iconPlacement) || iconVertical && (labelPlacement === "center" || labelPlacement === iconPlacement);
-        if (labelHorizontal && iconHorizontal && labelPlacement !== iconPlacement) {
-          minWidth = Math.max(minWidth, iconBoxSize.width + gap + labelSize.width);
-        }
-        if (labelVertical && iconVertical && labelPlacement !== iconPlacement) {
-          minHeight = Math.max(minHeight, iconBoxSize.height + gap + labelSize.height);
-        }
-        if (labelSharesIconAxis) {
-          if (iconHorizontal) {
-            minWidth = Math.max(minWidth, iconBoxSize.width + gap + labelSize.width);
-          }
-          if (iconVertical) {
-            minHeight = Math.max(minHeight, iconBoxSize.height + gap + labelSize.height);
-          }
-        }
-      }
-    }
-    return { width: minWidth, height: minHeight };
+    const minContentWidth = Math.max(
+      labelSize?.width ?? 0,
+      iconBoxSize?.width ?? 0
+    );
+    const minContentHeight = Math.max(
+      labelSize?.height ?? 0,
+      iconBoxSize?.height ?? 0
+    );
+    return {
+      width: minContentWidth * widthFactor,
+      height: minContentHeight * heightFactor
+    };
   }
   getLabelContainerBounds(bounds) {
-    return bounds;
+    const { top, right, bottom, left } = this._contentInset;
+    const x = bounds.x + left;
+    const y = bounds.y + top;
+    const width = Math.max(0, bounds.width - left - right);
+    const height = Math.max(0, bounds.height - top - bottom);
+    return { x, y, width, height };
   }
-  getAutoLabelBounds(bounds, iconBoxSize) {
-    const contentBounds = this.getLabelContainerBounds(bounds);
-    if (!this._icon || !iconBoxSize || this._icon.placement === "center") {
-      return contentBounds;
-    }
-    const gap = this._icon.gap;
-    if (isCornerPlacement(this._icon.placement)) {
-      return contentBounds;
-    }
-    switch (this._icon.placement) {
-      case "left":
-        return {
-          x: contentBounds.x + iconBoxSize.width + gap,
-          y: contentBounds.y,
-          width: Math.max(0, contentBounds.width - iconBoxSize.width - gap),
-          height: contentBounds.height
-        };
-      case "right":
-        return {
-          x: contentBounds.x,
-          y: contentBounds.y,
-          width: Math.max(0, contentBounds.width - iconBoxSize.width - gap),
-          height: contentBounds.height
-        };
-      case "top":
-        return {
-          x: contentBounds.x,
-          y: contentBounds.y + iconBoxSize.height + gap,
-          width: contentBounds.width,
-          height: Math.max(0, contentBounds.height - iconBoxSize.height - gap)
-        };
-      case "bottom":
-        return {
-          x: contentBounds.x,
-          y: contentBounds.y,
-          width: contentBounds.width,
-          height: Math.max(0, contentBounds.height - iconBoxSize.height - gap)
-        };
-      default:
-        return contentBounds;
+  normalizeContentInset(value) {
+    const n = (v) => v !== void 0 && Number.isFinite(v) ? Math.max(0, v) : 0;
+    if (value === void 0) {
+      return { top: 0, right: 0, bottom: 0, left: 0 };
     }
-  }
-  getLabelBounds(bounds, labelSize, placement) {
-    const normalizedPlacement = placement === "auto" ? "center" : placement;
-    const width = Math.min(labelSize.width, bounds.width);
-    const height = Math.min(labelSize.height, bounds.height);
-    let x = bounds.x + (bounds.width - width) / 2;
-    let y = bounds.y + (bounds.height - height) / 2;
-    switch (normalizedPlacement) {
-      case "top":
-        y = bounds.y;
-        break;
-      case "bottom":
-        y = bounds.y + bounds.height - height;
-        break;
-      case "left":
-        x = bounds.x;
-        break;
-      case "right":
-        x = bounds.x + bounds.width - width;
-        break;
+    if (typeof value === "number") {
+      const v = n(value);
+      return { top: v, right: v, bottom: v, left: v };
     }
-    return { x, y, width, height };
+    return {
+      top: n(value.top),
+      right: n(value.right),
+      bottom: n(value.bottom),
+      left: n(value.left)
+    };
   }
   getIconBoxSize() {
     if (!this._icon) {
@@ -8996,14 +8868,14 @@ class Node extends Element {
     if (width <= 0 || height <= 0) {
       return void 0;
     }
-    const padding = this._icon.options.padding ?? 8;
-    const margin = Math.max(0, this._icon.options.margin ?? 0);
+    const ins = this._icon.inset;
     return {
-      width: width + padding * 2 + margin * 2,
-      height: height + padding * 2 + margin * 2
+      width: width + ins * 2,
+      height: height + ins * 2
     };
   }
   getIconBounds(bounds, iconBoxSize, placement) {
+    const ins = this._icon?.inset ?? 0;
     switch (placement) {
       case "top":
         return {
@@ -9035,29 +8907,29 @@ class Node extends Element {
         };
       case "top-left":
         return {
-          x: bounds.x,
-          y: bounds.y,
+          x: bounds.x + ins,
+          y: bounds.y + ins,
           width: iconBoxSize.width,
           height: iconBoxSize.height
         };
       case "top-right":
         return {
-          x: bounds.x + bounds.width - iconBoxSize.width,
-          y: bounds.y,
+          x: bounds.x + bounds.width - iconBoxSize.width - ins,
+          y: bounds.y + ins,
           width: iconBoxSize.width,
           height: iconBoxSize.height
         };
       case "bottom-left":
         return {
-          x: bounds.x,
-          y: bounds.y + bounds.height - iconBoxSize.height,
+          x: bounds.x + ins,
+          y: bounds.y + bounds.height - iconBoxSize.height - ins,
           width: iconBoxSize.width,
           height: iconBoxSize.height
         };
       case "bottom-right":
         return {
-          x: bounds.x + bounds.width - iconBoxSize.width,
-          y: bounds.y + bounds.height - iconBoxSize.height,
+          x: bounds.x + bounds.width - iconBoxSize.width - ins,
+          y: bounds.y + bounds.height - iconBoxSize.height - ins,
           width: iconBoxSize.width,
           height: iconBoxSize.height
         };
@@ -9956,18 +9828,14 @@ const DEFAULT_THEME = {
       cornerRadius: 4
     },
     selected: {
-      fillColor: "#ffffff",
-      strokeColor: "#333333",
+      strokeColor: "#3b82f6",
       strokeWidth: 2,
-      opacity: 1,
-      cornerRadius: 4
+      opacity: 1
     },
     dragging: {
-      fillColor: "#f0f0f0",
       strokeColor: "#333333",
       strokeWidth: 2,
-      opacity: 0.8,
-      cornerRadius: 4
+      opacity: 0.8
     }
   },
   edge: {
@@ -10228,15 +10096,16 @@ class StyleManager {
     return baseStyle;
   }
   getBaseNodeStyle(state) {
+    const d = this._theme.node.default;
     switch (state) {
       case "hover":
-        return this._theme.node.hover;
+        return { ...d, ...this._theme.node.hover };
       case "selected":
-        return this._theme.node.selected;
+        return { ...d, ...this._theme.node.selected };
       case "dragging":
-        return this._theme.node.dragging;
+        return { ...d, ...this._theme.node.dragging };
       default:
-        return this._theme.node.default;
+        return d;
     }
   }
   getBaseEdgeStyle(state) {
@@ -10434,13 +10303,16 @@ class Serializer {
     }));
     let label;
     if (node.label) {
-      const labelDefaults = { padding: 8, margin: 0, style: {}, maxWidth: void 0, styleClass: void 0 };
+      const ins = node.label.inset;
+      const defaultInset = 8;
+      const insetAllDefault = ins.top === defaultInset && ins.right === defaultInset && ins.bottom === defaultInset && ins.left === defaultInset;
+      const serializedInset = insetAllDefault ? void 0 : ins.top === ins.right && ins.top === ins.bottom && ins.top === ins.left ? ins.top : { top: ins.top, right: ins.right, bottom: ins.bottom, left: ins.left };
+      const labelDefaults = { inset: void 0, style: {}, maxWidth: void 0, styleClass: void 0 };
       const labelData = {
         text: node.label.text,
         style: node.label.style,
         maxWidth: node.label.maxWidth,
-        padding: node.label.padding,
-        margin: node.label.margin,
+        inset: serializedInset ?? void 0,
         styleClass: node.label.styleClass
       };
       const hasExtendedOptions = hasNonDefaultValues(labelData, labelDefaults);
@@ -10449,8 +10321,7 @@ class Serializer {
           text: node.label.text,
           style: Object.keys(node.label.style).length > 0 ? node.label.style : void 0,
           maxWidth: node.label.maxWidth,
-          padding: node.label.padding !== 8 ? node.label.padding : void 0,
-          margin: node.label.margin !== 0 ? node.label.margin : void 0,
+          inset: serializedInset,
           styleClass: node.label.styleClass
         });
       } else {
@@ -10462,22 +10333,16 @@ class Serializer {
       const opts = node.icon.options;
       const source = typeof opts.source === "string" ? opts.source : void 0;
       if (source) {
-        icon = {
+        icon = omitEmptyValues({
           source,
           width: opts.width,
           height: opts.height,
           fit: opts.fit,
           placement: opts.placement,
           scaleWithBounds: opts.scaleWithBounds,
-          padding: opts.padding,
-          margin: opts.margin,
-          gap: opts.gap,
-          opacity: opts.opacity,
-          align: opts.align,
-          verticalAlign: opts.verticalAlign,
-          offsetX: opts.offsetX,
-          offsetY: opts.offsetY
-        };
+          inset: node.icon.inset !== 6 ? node.icon.inset : void 0,
+          opacity: opts.opacity
+        });
       }
     }
     let anchorPoints;
@@ -10487,7 +10352,9 @@ class Serializer {
     if (hasNonDefaultValues(anchorData, anchorDefaults)) {
       anchorPoints = omitDefaultValues(anchorData, anchorDefaults);
     }
-    return {
+    const contentInset = node.contentInset;
+    const hasContentInset = contentInset.top !== 0 || contentInset.right !== 0 || contentInset.bottom !== 0 || contentInset.left !== 0;
+    return omitEmptyValues({
       id: node.id,
       type: node.typeName,
       x: node.x,
@@ -10498,12 +10365,12 @@ class Serializer {
       styleClass: node.styleClass,
       label,
       labelStyleClass: typeof label === "string" ? node.label?.styleClass : void 0,
-      labelPlacement: node.labelPlacement !== "auto" ? node.labelPlacement : void 0,
       icon,
+      contentInset: hasContentInset ? contentInset : void 0,
       anchorPoints,
       ports: ports.length > 0 ? ports : void 0,
       data: Object.keys(node.data).length > 0 ? node.data : void 0
-    };
+    });
   }
   serializeEdge(edge) {
     return {
@@ -10814,7 +10681,7 @@ class SvgExporter {
     const parts = [];
     const renderedEdges = [];
     parts.push(
-      `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`
+      `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`
     );
     for (const edge of this.renderer.edges.values()) {
       if (edge.visible) {
@@ -10955,22 +10822,37 @@ class SvgExporter {
     if (!edge.label) {
       return "";
     }
-    const metrics = this.measureTextLabel(edge.label.text, edge.label.style, edge.label.padding, edge.label.margin);
-    const bgPadding = edge.labelBackground?.padding ?? EDGE_LABEL_BACKGROUND_PADDING;
+    const metrics = this.measureTextLabel(edge.label.text, edge.label.style, edge.label.inset);
     const bgColor = edge.labelBackground?.color ?? "#ffffff";
     const bgOpacity = edge.labelBackground?.opacity ?? 1;
     const bgRadius = edge.labelBackground?.borderRadius ?? EDGE_LABEL_BACKGROUND_RADIUS;
-    const x = point.x - metrics.width / 2 - bgPadding;
-    const y = point.y - metrics.height / 2 - bgPadding;
-    const width = metrics.width + bgPadding * 2;
-    const height = metrics.height + bgPadding * 2;
+    const x = point.x - metrics.width / 2;
+    const y = point.y - metrics.height / 2;
+    const width = metrics.width;
+    const height = metrics.height;
     const radius = Math.max(0, Math.min(bgRadius, width / 2, height / 2));
     if (radius <= 0) {
       return `<rect x="${x}" y="${y}" width="${width}" height="${height}" fill="${bgColor}" fill-opacity="${bgOpacity}"/>`;
     }
     return `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${radius}" ry="${radius}" fill="${bgColor}" fill-opacity="${bgOpacity}"/>`;
   }
-  measureTextLabel(text, style = {}, padding = 8, margin = 0) {
+  normalizeLabelInset(value, defaultVal) {
+    const n = (v) => v !== void 0 && Number.isFinite(v) ? Math.max(0, v) : defaultVal;
+    if (value === void 0) {
+      return { top: defaultVal, right: defaultVal, bottom: defaultVal, left: defaultVal };
+    }
+    if (typeof value === "number") {
+      const v = n(value);
+      return { top: v, right: v, bottom: v, left: v };
+    }
+    return {
+      top: n(value.top),
+      right: n(value.right),
+      bottom: n(value.bottom),
+      left: n(value.left)
+    };
+  }
+  measureTextLabel(text, style = {}, inset = 8) {
     const fontSize = style.fontSize ?? 14;
     const fontFamily = style.fontFamily ?? "sans-serif";
     const fontWeight = style.fontWeight ?? "normal";
@@ -10991,11 +10873,10 @@ class SvgExporter {
       const longestLine = lines.reduce((max, line) => line.length > max.length ? line : max, "");
       maxWidth = longestLine.length * fontSize * 0.6;
     }
-    const resolvedPadding = Math.max(0, padding);
-    const resolvedMargin = Math.max(0, margin);
+    const ins = this.normalizeLabelInset(inset, 8);
     return {
-      width: maxWidth + resolvedPadding * 2 + resolvedMargin * 2,
-      height: lines.length * lineHeight + resolvedPadding * 2 + resolvedMargin * 2
+      width: maxWidth + ins.left + ins.right,
+      height: lines.length * lineHeight + ins.top + ins.bottom
     };
   }
   resolveMarkerConfig(edge, side) {
@@ -11120,9 +11001,9 @@ class SvgExporter {
       return "";
     }
     const style = label.style;
-    const padding = Math.max(0, label.padding);
-    const margin = Math.max(0, label.margin);
+    const ins = this.normalizeLabelInset(label.inset, 8);
     const align = style.align ?? "center";
+    const verticalAlign = style.verticalAlign ?? "middle";
     const ctx = this.getMeasurementContext();
     let bounds;
     let lines;
@@ -11140,18 +11021,27 @@ class SvgExporter {
       lines = label.text.split("\n");
     }
     const inner = {
-      x: bounds.x + margin,
-      y: bounds.y + margin,
-      width: Math.max(0, bounds.width - margin * 2),
-      height: Math.max(0, bounds.height - margin * 2)
+      x: bounds.x + ins.left,
+      y: bounds.y + ins.top,
+      width: Math.max(0, bounds.width - ins.left - ins.right),
+      height: Math.max(0, bounds.height - ins.top - ins.bottom)
     };
     let x = inner.x + inner.width / 2;
     if (align === "left") {
-      x = inner.x + padding;
+      x = inner.x;
     } else if (align === "right") {
-      x = inner.x + inner.width - padding;
+      x = inner.x + inner.width;
+    }
+    const lineHeight = (style.fontSize ?? 14) * 1.2;
+    const totalHeight = lines.length * lineHeight;
+    let y;
+    if (verticalAlign === "top") {
+      y = inner.y + totalHeight / 2;
+    } else if (verticalAlign === "bottom") {
+      y = inner.y + inner.height - totalHeight / 2;
+    } else {
+      y = inner.y + inner.height / 2;
     }
-    const y = inner.y + inner.height / 2;
     return this.renderTextLabel(lines.join("\n"), { x, y }, style);
   }
   getNodeCornerRadius(node, bounds) {
@@ -11168,9 +11058,15 @@ class SvgExporter {
     if (iconSize.width <= 0 || iconSize.height <= 0) {
       return "";
     }
-    const iconBoxSize = this.getIconBoxSize(opts, iconSize);
-    const iconBounds = this.getIconBounds(nodeBounds, iconBoxSize, opts.placement ?? "center");
-    const drawRect = this.getIconDrawRect(iconBounds, opts, iconSize);
+    const iconInset = icon.inset;
+    const iconBoxSize = this.getIconBoxSize(iconSize, iconInset);
+    const iconBounds = this.getIconBounds(
+      nodeBounds,
+      iconBoxSize,
+      opts.placement ?? "center",
+      iconInset
+    );
+    const drawRect = this.getIconDrawRect(iconBounds, opts, iconSize, iconInset);
     if (drawRect.width <= 0 || drawRect.height <= 0) {
       return "";
     }
@@ -11179,17 +11075,16 @@ class SvgExporter {
       return "";
     }
     const opacity = opts.opacity ?? 1;
-    return `<image href="${this.escapeAttribute(href)}" x="${drawRect.x}" y="${drawRect.y}" width="${drawRect.width}" height="${drawRect.height}" opacity="${opacity}" preserveAspectRatio="none"/>`;
+    const escapedHref = this.escapeAttribute(href);
+    return `<image href="${escapedHref}" xlink:href="${escapedHref}" x="${drawRect.x}" y="${drawRect.y}" width="${drawRect.width}" height="${drawRect.height}" opacity="${opacity}" preserveAspectRatio="none"/>`;
   }
-  getIconBoxSize(opts, imageSize) {
-    const padding = opts.padding ?? 8;
-    const margin = Math.max(0, opts.margin ?? 0);
+  getIconBoxSize(imageSize, inset) {
     return {
-      width: imageSize.width + padding * 2 + margin * 2,
-      height: imageSize.height + padding * 2 + margin * 2
+      width: imageSize.width + inset * 2,
+      height: imageSize.height + inset * 2
     };
   }
-  getIconBounds(bounds, iconBoxSize, placement) {
+  getIconBounds(bounds, iconBoxSize, placement, inset) {
     switch (placement) {
       case "top":
         return { x: bounds.x, y: bounds.y, width: bounds.width, height: iconBoxSize.height };
@@ -11210,25 +11105,30 @@ class SvgExporter {
           height: bounds.height
         };
       case "top-left":
-        return { x: bounds.x, y: bounds.y, width: iconBoxSize.width, height: iconBoxSize.height };
+        return {
+          x: bounds.x + inset,
+          y: bounds.y + inset,
+          width: iconBoxSize.width,
+          height: iconBoxSize.height
+        };
       case "top-right":
         return {
-          x: bounds.x + bounds.width - iconBoxSize.width,
-          y: bounds.y,
+          x: bounds.x + bounds.width - iconBoxSize.width - inset,
+          y: bounds.y + inset,
           width: iconBoxSize.width,
           height: iconBoxSize.height
         };
       case "bottom-left":
         return {
-          x: bounds.x,
-          y: bounds.y + bounds.height - iconBoxSize.height,
+          x: bounds.x + inset,
+          y: bounds.y + bounds.height - iconBoxSize.height - inset,
           width: iconBoxSize.width,
           height: iconBoxSize.height
         };
       case "bottom-right":
         return {
-          x: bounds.x + bounds.width - iconBoxSize.width,
-          y: bounds.y + bounds.height - iconBoxSize.height,
+          x: bounds.x + bounds.width - iconBoxSize.width - inset,
+          y: bounds.y + bounds.height - iconBoxSize.height - inset,
           width: iconBoxSize.width,
           height: iconBoxSize.height
         };
@@ -11237,23 +11137,17 @@ class SvgExporter {
         return bounds;
     }
   }
-  getIconDrawRect(bounds, opts, imageSize) {
-    const padding = opts.padding ?? 8;
-    const margin = Math.max(0, opts.margin ?? 0);
+  getIconDrawRect(bounds, opts, imageSize, inset) {
     const fit = opts.fit ?? "none";
     const scaleWithBounds = opts.scaleWithBounds ?? false;
-    const align = opts.align ?? "center";
-    const verticalAlign = opts.verticalAlign ?? "center";
-    const offsetX = opts.offsetX ?? 0;
-    const offsetY = opts.offsetY ?? 0;
     const innerBounds = {
-      x: bounds.x + margin,
-      y: bounds.y + margin,
-      width: Math.max(0, bounds.width - margin * 2),
-      height: Math.max(0, bounds.height - margin * 2)
+      x: bounds.x + inset,
+      y: bounds.y + inset,
+      width: Math.max(0, bounds.width - inset * 2),
+      height: Math.max(0, bounds.height - inset * 2)
     };
-    const availableWidth = Math.max(0, innerBounds.width - padding * 2);
-    const availableHeight = Math.max(0, innerBounds.height - padding * 2);
+    const availableWidth = Math.max(0, innerBounds.width);
+    const availableHeight = Math.max(0, innerBounds.height);
     let drawWidth = opts.width ?? imageSize.width;
     let drawHeight = opts.height ?? imageSize.height;
     if (scaleWithBounds) {
@@ -11270,21 +11164,13 @@ class SvgExporter {
     }
     drawWidth = Math.min(Math.max(0, drawWidth), Math.max(0, availableWidth));
     drawHeight = Math.min(Math.max(0, drawHeight), Math.max(0, availableHeight));
-    let x = innerBounds.x + padding;
-    let y = innerBounds.y + padding;
-    if (align === "center") {
-      x = innerBounds.x + (innerBounds.width - drawWidth) / 2;
-    } else if (align === "right") {
-      x = innerBounds.x + innerBounds.width - drawWidth - padding;
-    }
-    if (verticalAlign === "center") {
-      y = innerBounds.y + (innerBounds.height - drawHeight) / 2;
-    } else if (verticalAlign === "bottom") {
-      y = innerBounds.y + innerBounds.height - drawHeight - padding;
-    }
+    let x = innerBounds.x;
+    let y = innerBounds.y;
+    x = innerBounds.x + (innerBounds.width - drawWidth) / 2;
+    y = innerBounds.y + (innerBounds.height - drawHeight) / 2;
     return {
-      x: x + offsetX,
-      y: y + offsetY,
+      x,
+      y,
       width: drawWidth,
       height: drawHeight
     };
@@ -11379,7 +11265,7 @@ class SvgExporter {
   }
   createEmptySvg(width, height, backgroundColor, includeBackground) {
     return [
-      `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`,
+      `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`,
       includeBackground ? `<rect width="100%" height="100%" fill="${backgroundColor}"/>` : "",
       "</svg>"
     ].join("");