likec4 0.44.2 → 0.46.0

package/dist/@likec4/core/utils/relations.js

@@ -1,7 +1,16 @@
-import { compareFqnHierarchically, isAncestor } from "./fqn.js";
+import { commonAncestor, compareFqnHierarchically, isAncestor } from "./fqn.js";
 import { either } from "rambdax";
 export const compareRelations = (a, b) => {
-  return compareFqnHierarchically(a.source, b.source) || compareFqnHierarchically(a.target, b.target);
+  const parentA = commonAncestor(a.source, a.target);
+  const parentB = commonAncestor(b.source, b.target);
+  if (parentA && !parentB) {
+    return 1;
+  }
+  if (!parentA && parentB) {
+    return -1;
+  }
+  const compareParents = parentA && parentB ? compareFqnHierarchically(parentA, parentB) : 0;
+  return compareParents || compareFqnHierarchically(a.source, b.source) || compareFqnHierarchically(a.target, b.target);
 };
 const isInside = (parent) => {
   const prefix = parent + ".";

package/dist/@likec4/diagrams/components/primitives/fullscreen/FullscreenDiagram.js

@@ -12,23 +12,24 @@ const StyleOverlay = {
   left: 0,
   right: 0,
   bottom: 0,
-  backgroundColor: "var(--likec4-browser-overlay-bg, rgba(18,18,18,0.8))",
+  backgroundColor: "var(--likec4-browser-overlay-bg, rgba(18,18,18,0.9))",
   backdropFilter: "var(--likec4-browser-backdrop, blur(4px))",
   zIndex: "var(--likec4-overlay-z-index, 100)",
-  display: "flex",
-  placeContent: "strech",
-  placeItems: "strech",
-  touchAction: "pan-x pan-y pinch-zoom",
   boxSizing: "border-box",
   margin: 0,
   padding: 0,
   border: "0 solid transparent"
 };
 const StyleContainer = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
   margin: 0,
   padding: 0,
-  flex: "1 1 100%",
-  overflow: "hidden"
+  overflow: "hidden",
+  touchAction: "pan-x pan-y pinch-zoom"
 };
 export function FullscreenDiagram({
   diagram,

package/dist/@likec4/diagrams/diagram/Diagram.js

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { nonNullable, defaultTheme as theme } from "@likec4/core";
 import { useHookableRef, useUpdateEffect } from "@react-hookz/web/esm";
-import { easings, useSpring } from "@react-spring/konva";
+import { useSpring } from "@react-spring/konva";
 import { clamp } from "rambdax";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { AnimatedStage, Layer } from "../konva.js";
 import { Edges } from "./Edges.js";
 import { createUseGesture, dragAction, pinchAction } from "@use-gesture/react";
 import { Nodes } from "./Nodes.js";
-import { DiagramGesture } from "./state/index.js";
+import { DiagramGesture, useResetHoveredStates } from "./state/index.js";
 const useGesture = createUseGesture([dragAction, pinchAction]);
 const useSyncedRef = (value) => {
   const ref = useRef(value);
@@ -30,7 +30,7 @@ function diagramNodeId(konvaNode) {
 export const Diagram = /* @__PURE__ */ forwardRef(
   ({
     diagram,
-    padding: _padding = NoPadding,
+    padding = NoPadding,
     pannable = true,
     zoomable = true,
     animate = true,
@@ -42,6 +42,8 @@ export const Diagram = /* @__PURE__ */ forwardRef(
     onStageContextMenu,
     width: _width,
     height: _height,
+    minZoom = 0.2,
+    maxZoom = 1.1,
     ...props
   }, ref) => {
     const immediate = !animate;
@@ -54,15 +56,15 @@ export const Diagram = /* @__PURE__ */ forwardRef(
       }
       return value;
     });
-    const width = _width ?? diagram.width;
-    const height = _height ?? diagram.height;
+    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = Array.isArray(padding) ? padding : [padding, padding, padding, padding];
+    const width = _width ?? diagram.width + paddingLeft + paddingRight;
+    const height = _height ?? diagram.height + paddingTop + paddingBottom;
     const toCenterOnRect = (centerTo) => {
-      const [paddingTop, paddingRight, paddingBottom, paddingLeft] = Array.isArray(_padding) ? _padding : [_padding, _padding, _padding, _padding];
-      const container = stageRef.current?.container();
+      const container = containerRef.current;
       const viewRect = {
         width: Math.min(container?.clientWidth ?? width, width) - paddingLeft - paddingRight,
         height: Math.min(container?.clientHeight ?? height, height) - paddingTop - paddingBottom
-      }, viewScale = Math.min(viewRect.width / centerTo.width, viewRect.height / centerTo.height), scale = clamp(0.1, 1.1, viewScale), centeringAjustment = {
+      }, viewScale = Math.min(viewRect.width / centerTo.width, viewRect.height / centerTo.height), scale = clamp(minZoom, maxZoom, viewScale), centeringAjustment = {
         x: ((width - centerTo.width) * scale + viewRect.width) / 2,
         y: ((height - centerTo.height) * scale + viewRect.height) / 2
       }, finalPosition = {
@@ -78,11 +80,13 @@ export const Diagram = /* @__PURE__ */ forwardRef(
     const [stageProps, stageSpringApi] = useSpring(
       () => initialPosition ? {
         from: initialPosition,
-        to: toFitDiagram()
+        to: toFitDiagram(),
+        immediate
       } : {
-        from: toFitDiagram(),
+        to: toFitDiagram(),
         immediate
-      }
+      },
+      []
     );
     const centerOnRect = (centerTo) => {
       stageSpringApi.start({
@@ -91,14 +95,10 @@ export const Diagram = /* @__PURE__ */ forwardRef(
       });
       return;
     };
-    const centerAndFit = (delay = 70, durationMs) => {
+    const centerAndFit = (delay = 0) => {
       stageSpringApi.start({
         to: toFitDiagram(),
         delay,
-        config: durationMs ? {
-          duration: durationMs,
-          easing: easings.easeInOutCubic
-        } : {},
         immediate
       });
       return;
@@ -126,13 +126,13 @@ export const Diagram = /* @__PURE__ */ forwardRef(
       ref,
       () => ({
         get stage() {
-          return nonNullable(stageRef.current, "not mounted");
+          return stageRef.current;
         },
         get diagramView() {
           return refs.current.diagram;
         },
         get container() {
-          return nonNullable(stageRef.current?.container(), "not mounted");
+          return stageRef.current?.container() ?? null;
         },
         resetStageZoom: (_immediate) => {
           refs.current.resetStageZoom(_immediate);
@@ -145,11 +145,18 @@ export const Diagram = /* @__PURE__ */ forwardRef(
         }),
         centerAndFit: () => refs.current.centerAndFit()
       }),
-      [refs, id, stageRef]
+      [refs, stageRef]
     );
+    const resetHoveredStates = useResetHoveredStates();
     useUpdateEffect(() => {
-      refs.current.centerAndFit(80, 650);
-    }, [id, height, width]);
+      resetHoveredStates();
+    }, [id]);
+    useUpdateEffect(() => {
+      refs.current.centerAndFit(200);
+    }, [id]);
+    useUpdateEffect(() => {
+      refs.current.centerAndFit(50);
+    }, [height, width]);
     useEffect(() => {
       if (!zoomable) {
         return;
@@ -164,39 +171,41 @@ export const Diagram = /* @__PURE__ */ forwardRef(
     }, [zoomable]);
     useGesture(
       {
-        onDragEnd: () => {
-          DiagramGesture.isDragging = false;
-        },
         onDrag: (state) => {
           const {
-            pinching,
+            first,
+            last,
             down,
-            cancel,
             intentional,
             offset: [x, y]
           } = state;
-          if (pinching) {
-            return cancel();
+          if (!intentional) {
+            return;
           }
-          if (intentional) {
-            DiagramGesture.isDragging = true;
-            stageSpringApi.start({
-              to: {
-                x,
-                y
-              },
-              immediate: immediate || down
-            });
+          if (first || last) {
+            DiagramGesture.isDragging = first && !last;
           }
+          stageSpringApi.start({
+            to: {
+              x,
+              y
+            },
+            delay: 0,
+            immediate: immediate || down && !last
+          });
         },
         onPinch: ({ memo, first, last, origin: [ox, oy], movement: [ms], offset: [scale] }) => {
           if (first) {
+            DiagramGesture.isDragging = true;
             const stage = nonNullable(stageRef.current);
             const { x: x2, y: y2 } = stage.getAbsolutePosition();
             const tx = Math.round(ox - x2);
             const ty = Math.round(oy - y2);
             memo = [stage.x(), stage.y(), tx, ty];
           }
+          if (last) {
+            DiagramGesture.isDragging = false;
+          }
           const x = Math.round(memo[0] - (ms - 1) * memo[2]);
           const y = Math.round(memo[1] - (ms - 1) * memo[3]);
           stageSpringApi.start({
@@ -205,7 +214,7 @@ export const Diagram = /* @__PURE__ */ forwardRef(
               y,
               scale
             },
-            immediate: immediate || !last || !first
+            delay: 0
           });
           return memo;
         }
@@ -213,21 +222,30 @@ export const Diagram = /* @__PURE__ */ forwardRef(
       {
         target: containerRef,
         drag: {
+          target: containerRef,
           enabled: pannable,
           threshold: 4,
-          from: () => [stageProps.x.get(), stageProps.y.get()],
-          pointer: {
-            buttons: -1,
-            keys: false
-          }
+          from: () => [stageRef.current?.x() ?? 0, stageRef.current?.y() ?? 0],
+          pointer: Object.assign(
+            {
+              keys: false,
+              mouse: true,
+              capture: true
+            },
+            !onNodeContextMenu && !onStageContextMenu && {
+              buttons: -1
+            }
+          )
         },
         pinch: {
+          target: containerRef,
           pointer: {
             touch: true
           },
+          from: () => [stageRef.current?.scaleX() ?? 1, 0],
           enabled: zoomable,
-          scaleBounds: { min: 0.1, max: 1.4 },
-          rubberband: 0.05,
+          scaleBounds: { min: minZoom, max: maxZoom + 0.4 },
+          rubberband: 0.045,
           pinchOnWheel: true
         }
       }

package/dist/@likec4/diagrams/diagram/Edges.js

@@ -1,11 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { DefaultRelationshipColor } from "@likec4/core";
+import { isEqualSimple } from "@react-hookz/deep-equal/esnext";
 import { useTransition } from "@react-spring/konva";
 import { scale, toHex } from "khroma";
 import { memoize } from "rambdax";
-import { useCallback } from "react";
-import { Group } from "../konva.js";
-import { EdgeShape } from "./shapes/Edge.js";
+import { memo, useCallback } from "react";
+import { AnimatedGroup } from "../konva.js";
+import { Edge } from "./shapes/Edge.js";
 import { mouseDefault, mousePointer } from "./shapes/utils.js";
 import { DiagramGesture, useHoveredEdgeId, useSetHoveredEdge } from "./state/index.js";
 const edgeColors = memoize((colors, isHovered) => {
@@ -13,13 +14,13 @@ const edgeColors = memoize((colors, isHovered) => {
     return {
       lineColor: toHex(
         scale(colors.lineColor, {
-          l: 25,
-          s: -5
+          l: 30
         })
       ),
       labelColor: toHex(
         scale(colors.labelColor, {
-          l: 40
+          l: 40,
+          s: 5
         })
       ),
       labelBgColor: toHex(
@@ -34,7 +35,6 @@ const edgeColors = memoize((colors, isHovered) => {
 });
 export function Edges({ animate, theme, diagram, onEdgeClick }) {
   const hoveredEdgeId = useHoveredEdgeId();
-  const setHoveredEdge = useSetHoveredEdge();
   const edgeSprings = useCallback(
     (edge, isHovered = false) => {
       return {
@@ -83,9 +83,25 @@ export function Edges({ animate, theme, diagram, onEdgeClick }) {
     // to avoid any issues with diagram-to-diagram transitions
     keys: (e) => e.id + diagram.id
   });
-  return edgeTransitions((springs, edge, { key }) => /* @__PURE__ */ jsx(
-    Group,
+  return edgeTransitions((_, edge, { key, ctrl }) => /* @__PURE__ */ jsx(
+    EdgeShape,
+    {
+      animate,
+      edge,
+      isHovered: hoveredEdgeId === edge.id,
+      theme,
+      ctrl,
+      onEdgeClick
+    },
+    key
+  ));
+}
+const EdgeShape = memo(({ animate, edge, ctrl, theme, isHovered, onEdgeClick }) => {
+  const setHoveredEdge = useSetHoveredEdge();
+  return /* @__PURE__ */ jsx(
+    AnimatedGroup,
     {
+      opacity: ctrl.springs.opacity,
       onPointerClick: (e) => {
         if (!onEdgeClick || DiagramGesture.isDragging || e.evt.button !== 0) {
           return;
@@ -104,16 +120,16 @@ export function Edges({ animate, theme, diagram, onEdgeClick }) {
         mouseDefault(e);
       },
       children: /* @__PURE__ */ jsx(
-        EdgeShape,
+        Edge,
         {
           animate,
           edge,
-          isHovered: hoveredEdgeId === edge.id,
+          isHovered,
           theme,
-          springs
+          springs: ctrl.springs
         }
       )
-    },
-    key
-  ));
-}
+    }
+  );
+}, isEqualSimple);
+EdgeShape.displayName = "EdgeShape";

package/dist/@likec4/diagrams/diagram/Nodes.js

@@ -1,7 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { nonexhaustive } from "@likec4/core";
+import { isEqualSimple } from "@react-hookz/deep-equal/esnext";
 import { useTransition } from "@react-spring/konva";
-import { useRef } from "react";
+import { memo, useRef } from "react";
 import { AnimatedGroup } from "../konva.js";
 import { Portal } from "../konva-portal.js";
 import { ZoomInIcon } from "./icons/index.js";
@@ -115,7 +116,7 @@ export function Nodes({ animate, theme, diagram, onNodeClick }) {
     keys: keyOf
   });
   return nodeTransitions((_, node, { key, ctrl, expired }) => /* @__PURE__ */ jsx(
-    NodeSnape,
+    NodeShape,
     {
       animate,
       node,
@@ -128,26 +129,27 @@ export function Nodes({ animate, theme, diagram, onNodeClick }) {
     key
   ));
 }
-function NodeSnape({
-  animate,
-  node,
-  ctrl,
-  theme,
-  isHovered,
-  expired,
-  onNodeClick
-}) {
-  const setHoveredNode = useSetHoveredNode();
-  const _isCompound = isCompound(node);
-  const isNavigatable = !!node.navigateTo && !!onNodeClick;
-  const Shape = nodeShape(node);
-  const springs = ctrl.springs;
-  return /* @__PURE__ */ jsx(Portal, { selector: ".top", enabled: isHovered && !_isCompound, children: /* @__PURE__ */ jsxs(
-    AnimatedGroup,
-    {
-      name: node.id,
-      visible: expired !== true,
-      ...animate && {
+const NodeShape = memo(
+  ({ animate, node, ctrl, theme, isHovered, expired, onNodeClick }) => {
+    const setHoveredNode = useSetHoveredNode();
+    const _isCompound = isCompound(node);
+    const isNavigatable = animate && !!node.navigateTo && !!onNodeClick;
+    const Shape = nodeShape(node);
+    const springs = ctrl.springs;
+    let zoomInIconY;
+    switch (node.shape) {
+      case "browser":
+      case "mobile":
+        zoomInIconY = node.size.height - 20;
+        break;
+      default:
+        zoomInIconY = node.size.height - 16;
+    }
+    return /* @__PURE__ */ jsx(Portal, { selector: ".top", enabled: isHovered && !_isCompound, children: /* @__PURE__ */ jsxs(
+      AnimatedGroup,
+      {
+        name: node.id,
+        visible: expired !== true,
         onPointerEnter: (e) => {
           setHoveredNode(node);
           if (isNavigatable) {
@@ -157,52 +159,46 @@ function NodeSnape({
         onPointerLeave: (e) => {
           setHoveredNode(null);
           mouseDefault(e);
-        }
-      },
-      ...onNodeClick && {
-        onPointerClick: (e) => {
-          if (DiagramGesture.isDragging || e.evt.button !== 0) {
-            return;
-          }
-          e.cancelBubble = true;
-          onNodeClick(node, e);
-        }
-      },
-      x: springs.x,
-      y: springs.y,
-      offsetX: springs.offsetX,
-      offsetY: springs.offsetY,
-      width: springs.width,
-      height: springs.height,
-      scaleX: springs.scaleX,
-      scaleY: springs.scaleY,
-      opacity: springs.opacity,
-      children: [
-        _isCompound && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            CompoundShape,
-            {
-              node,
-              theme,
-              springs,
-              labelOffsetX: isNavigatable ? -12 : 4
-            }
-          ),
-          isNavigatable && /* @__PURE__ */ jsx(ZoomInIcon, { fill: "#BABABA", opacity: 0.9, size: 16, x: 16, y: 17 })
-        ] }),
-        !_isCompound && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Shape, { node, theme, springs, isHovered }),
-          isNavigatable && /* @__PURE__ */ jsx(
-            ZoomInIcon,
-            {
-              fill: "#BABABA",
-              size: 16,
-              x: node.size.width / 2,
-              y: node.size.height - 20
+        },
+        ...onNodeClick && {
+          onPointerClick: (e) => {
+            if (DiagramGesture.isDragging || e.evt.button !== 0) {
+              return;
             }
-          )
-        ] })
-      ]
-    }
-  ) });
-}
+            e.cancelBubble = true;
+            onNodeClick(node, e);
+          }
+        },
+        x: springs.x,
+        y: springs.y,
+        offsetX: springs.offsetX,
+        offsetY: springs.offsetY,
+        width: springs.width,
+        height: springs.height,
+        scaleX: springs.scaleX,
+        scaleY: springs.scaleY,
+        opacity: springs.opacity,
+        children: [
+          _isCompound && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              CompoundShape,
+              {
+                node,
+                theme,
+                springs,
+                labelOffsetX: isNavigatable ? -18 : 0
+              }
+            ),
+            isNavigatable && /* @__PURE__ */ jsx(ZoomInIcon, { opacity: 0.9, size: 18, x: 18, y: 22 })
+          ] }),
+          !_isCompound && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Shape, { node, theme, springs, isHovered }),
+            isNavigatable && /* @__PURE__ */ jsx(ZoomInIcon, { size: 16, x: node.size.width / 2, y: zoomInIconY })
+          ] })
+        ]
+      }
+    ) });
+  },
+  isEqualSimple
+);
+NodeShape.displayName = "NodeShape";

package/dist/@likec4/diagrams/diagram/icons/ZoomIn.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Path } from "../../konva.js";
-export const ZoomInIcon = ({ fill, opacity = 1, size = 20, x, y }) => {
+export const ZoomInIcon = ({ fill = "#BABABA", opacity = 1, size = 20, x, y }) => {
   const originalSize = 15;
   const scale = size / originalSize;
   const offsetIcon = originalSize / 2;
@@ -20,8 +20,7 @@ export const ZoomInIcon = ({ fill, opacity = 1, size = 20, x, y }) => {
       width: originalSize,
       height: originalSize,
       opacity,
-      globalCompositeOperation: "luminosity",
-      hitStrokeWidth: 5
+      globalCompositeOperation: "luminosity"
     }
   );
 };

package/dist/@likec4/diagrams/diagram/shapes/Browser.js

@@ -1,9 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AnimatedCircle, AnimatedRect } from "../../konva.js";
 import { useShadowSprings } from "../springs.js";
-import { AnimatedRect, Circle } from "../../konva.js";
+import { NodeIcon } from "./NodeIcon.js";
 import { NodeLabels } from "./NodeLabel.js";
 export function BrowserShape({ node, theme, springs, isHovered }) {
-  const colors = theme.elements[node.color];
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       AnimatedRect,
@@ -13,12 +13,43 @@ export function BrowserShape({ node, theme, springs, isHovered }) {
         strokeEnabled: false,
         width: springs.width,
         height: springs.height,
-        fill: springs.stroke
+        fill: springs.stroke,
+        perfectDrawEnabled: false
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AnimatedCircle,
+      {
+        x: 16,
+        y: 15,
+        radius: 7,
+        fill: springs.fill,
+        listening: false,
+        perfectDrawEnabled: false
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AnimatedCircle,
+      {
+        x: 36,
+        y: 15,
+        radius: 7,
+        fill: springs.fill,
+        listening: false,
+        perfectDrawEnabled: false
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AnimatedCircle,
+      {
+        x: 56,
+        y: 15,
+        radius: 7,
+        fill: springs.fill,
+        listening: false,
+        perfectDrawEnabled: false
       }
     ),
-    /* @__PURE__ */ jsx(Circle, { x: 16, y: 15, radius: 7, fill: colors.fill, listening: false }),
-    /* @__PURE__ */ jsx(Circle, { x: 36, y: 15, radius: 7, fill: colors.fill, listening: false }),
-    /* @__PURE__ */ jsx(Circle, { x: 56, y: 15, radius: 7, fill: colors.fill, listening: false }),
     /* @__PURE__ */ jsx(
       AnimatedRect,
       {
@@ -28,7 +59,8 @@ export function BrowserShape({ node, theme, springs, isHovered }) {
         width: springs.width.to((w) => w - 80),
         height: 16,
         fill: springs.fill,
-        listening: false
+        listening: false,
+        perfectDrawEnabled: false
       }
     ),
     /* @__PURE__ */ jsx(
@@ -40,9 +72,11 @@ export function BrowserShape({ node, theme, springs, isHovered }) {
         width: springs.width.to((w) => w - 18),
         height: springs.height.to((h) => h - 40),
         fill: springs.fill,
-        listening: false
+        listening: false,
+        perfectDrawEnabled: false
       }
     ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, theme, offsetY: -8 })
+    /* @__PURE__ */ jsx(NodeLabels, { node, theme, offsetY: -6 }),
+    /* @__PURE__ */ jsx(NodeIcon, { node, paddingY: 42 })
   ] });
 }

package/dist/@likec4/diagrams/diagram/shapes/Compound.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AnimatedRect, AnimatedText } from "../../konva.js";
-export function CompoundShape({ node, theme, springs, labelOffsetX = 4 }) {
+import { AnimatedRect, Text } from "../../konva.js";
+export function CompoundShape({ node, theme, springs, labelOffsetX = 0 }) {
   const { labels } = node;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -21,25 +21,23 @@ export function CompoundShape({ node, theme, springs, labelOffsetX = 4 }) {
       }
     ),
     labels.map(({ pt: [x, y], ...label }, i) => /* @__PURE__ */ jsx(
-      AnimatedText,
+      Text,
       {
-        x,
-        y: y - 4,
+        x: x - 6,
+        y: y - 8,
         offsetX: labelOffsetX,
-        offsetY: label.fontSize / 2,
-        width: springs.width.to((v) => v - x - 4),
+        width: node.size.width - x - 8 - 6 + labelOffsetX,
         fill: "#BABABA",
         fontFamily: theme.font,
         fontSize: label.fontSize,
         fontStyle: label.fontStyle ?? "normal",
-        letterSpacing: 0.8,
+        letterSpacing: 0.75,
         align: label.align,
         text: label.text,
         wrap: "none",
         ellipsis: true,
         perfectDrawEnabled: false,
-        padding: 6,
-        hitStrokeWidth: 3,
+        padding: 8,
         globalCompositeOperation: "luminosity"
       },
       i