feat(edgeless): connector supports text label

toeverything · Apr 1, 2024 · 285e051 · 285e051
1 parent 0ea1275
commit 285e051
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git a/packages/blocks/src/_common/icons/edgeless.ts b/packages/blocks/src/_common/icons/edgeless.ts
@@ -1057,6 +1057,30 @@ export const ConnectorLWithArrowIcon = html`<svg
   />
 </svg>`;
 
+export const ConnectorAddTextIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.20841 4.16666C5.20841 3.82148 5.48824 3.54166 5.83341 3.54166H17.5001C17.8453 3.54166 18.1251 3.82148 18.1251 4.16666V6.1111C18.1251 6.45628 17.8453 6.7361 17.5001 6.7361C17.1549 6.7361 16.8751 6.45628 16.8751 6.1111V4.79166H12.2917V15.2083H14.5834C14.9286 15.2083 15.2084 15.4881 15.2084 15.8333C15.2084 16.1785 14.9286 16.4583 14.5834 16.4583H8.75008C8.4049 16.4583 8.12508 16.1785 8.12508 15.8333C8.12508 15.4881 8.4049 15.2083 8.75008 15.2083H11.0417V4.79166H6.45841V6.1111C6.45841 6.45628 6.17859 6.7361 5.83341 6.7361C5.48824 6.7361 5.20841 6.45628 5.20841 6.1111V4.16666Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M1.04175 10.8333C1.04175 10.4881 1.32157 10.2083 1.66675 10.2083H5.83341C6.17859 10.2083 6.45841 10.4881 6.45841 10.8333C6.45841 11.1785 6.17859 11.4583 5.83341 11.4583H1.66675C1.32157 11.4583 1.04175 11.1785 1.04175 10.8333Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3.75008 13.5417C3.4049 13.5417 3.12508 13.2618 3.12508 12.9167L3.12508 8.74999C3.12508 8.40481 3.4049 8.12499 3.75008 8.12499C4.09526 8.12499 4.37508 8.40481 4.37508 8.74999L4.37508 12.9167C4.37508 13.2618 4.09526 13.5417 3.75008 13.5417Z"
+  />
+</svg>`;
+
 export const DashLineIcon = html`<svg
   width="20"
   height="20"

diff --git a/...es/blocks/src/root-block/edgeless/components/component-toolbar/change-connector-button.ts b/...es/blocks/src/root-block/edgeless/components/component-toolbar/change-connector-button.ts
@@ -9,6 +9,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import {
+  ConnectorAddTextIcon,
   ConnectorEndpointNoneIcon,
   CurveLineIcon,
   DashLineIcon,
@@ -274,6 +275,8 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
     }
   }
 
+  private _setConnectorLabel() {}
+
   override render() {
     const selectedColor = getMostCommonColor(this.elements);
     const selectedMode = getMostCommonMode(this.elements);
@@ -581,6 +584,17 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
         >
         </edgeless-menu-button>
       </div>
+
+      <menu-divider .vertical=${true} .dividerMargin=${12}></menu-divider>
+
+      <edgeless-tool-icon-button
+        .tooltip=${'Add Text'}
+        .iconContainerPadding=${2}
+        .activeMode=${'background'}
+        @click=${() => this._setConnectorLabel()}
+      >
+        ${ConnectorAddTextIcon}
+      </edgeless-tool-icon-button>
     `;
   }
 }