fix: clip label rect

toeverything · Apr 22, 2024 · 247357c · 247357c
1 parent 04a651a
commit 247357c
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 10 deletions.
diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts
@@ -40,7 +40,7 @@ import {
   DEFAULT_FRONT_END_POINT_STYLE,
   DEFAULT_REAR_END_POINT_STYLE,
   StrokeStyle,
-} from '../../../../surface-block/index.js';
+} from '../../../surface-block/index.js';
 import type { LineStyleButtonProps } from '../../edgeless/components/buttons/line-style-button.js';
 import {
   type ColorEvent,

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-connector-label-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-connector-label-button.ts
@@ -6,8 +6,8 @@ import type { Doc } from '@blocksuite/store';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import type { ConnectorLabelElementModel } from '../../../../surface-block/index.js';
-import type { SurfaceBlockComponent } from '../../../../surface-block/surface-block.js';
+import type { ConnectorLabelElementModel } from '../../../surface-block/index.js';
+import type { SurfaceBlockComponent } from '../../../surface-block/surface-block.js';
 
 @customElement('edgeless-change-connector-label-button')
 export class EdgelessChangeConnectorLabelButton extends WithDisposable(

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts
@@ -27,12 +27,12 @@ import {
   FontFamily,
   FontWeight,
 } from '../../../surface-block/element-model/common.js';
-import type { TextElementModel } from '../../../surface-block/element-model/text.js';
 import { TextAlign } from '../../../surface-block/elements/consts.js';
-import type {
-  ConnectorElementModel,
+import {
+  type ConnectorElementModel,
   ConnectorLabelElementModel,
-  ShapeElementModel,
+  type ShapeElementModel,
+  type TextElementModel,
 } from '../../../surface-block/index.js';
 import {
   Bound,

diff --git a/packages/blocks/src/surface-block/canvas-renderer/element-renderer/connector/index.ts b/packages/blocks/src/surface-block/canvas-renderer/element-renderer/connector/index.ts
@@ -1,7 +1,7 @@
-import type {
+import {
   ConnectorElementModel,
-  LocalConnectorElementModel,
-  PointStyle,
+  type LocalConnectorElementModel,
+  type PointStyle,
 } from '../../../element-model/connector.js';
 import { ConnectorMode } from '../../../element-model/connector.js';
 import type { ConnectorLabelElementModel } from '../../../element-model/connector-label.js';
@@ -18,6 +18,7 @@ import {
   wrapTextDeltas,
 } from '../text/utils.js';
 import {
+  DEFAULT_ARROW_SIZE,
   getArrowOptions,
   renderArrow,
   renderCircle,
@@ -71,6 +72,20 @@ function renderPoints(
   const rc = renderer.rc;
   const realStrokeColor = renderer.getVariableColor(stroke);
 
+  if (model instanceof ConnectorElementModel && model.label) {
+    const textModel = model.surface.getElementById(model.label);
+    const [cx, cy, cw, ch] = model.deserializedXYWH;
+    if (textModel) {
+      const [lx, ly, lw, lh] = textModel.deserializedXYWH;
+      const offset = DEFAULT_ARROW_SIZE * strokeWidth;
+
+      const path = new Path2D();
+      path.rect(0 - offset / 2, 0 - offset / 2, cw + offset, ch + offset);
+      path.rect(lx - cx - 3, ly - cy - 3, lw + 6, lh + 6);
+      ctx.clip(path, 'evenodd');
+    }
+  }
+
   if (rough) {
     const options = {
       seed,