fix(edgeless): selection when all elements are connectors

toeverything · Mar 31, 2024 · 77dccd9 · 77dccd9
1 parent 0019bed
commit 77dccd9
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 18 deletions.
diff --git a/packages/blocks/src/root-block/edgeless/components/component-toolbar/component-toolbar.ts b/packages/blocks/src/root-block/edgeless/components/component-toolbar/component-toolbar.ts
@@ -500,7 +500,7 @@ export class EdgelessComponentToolbar extends WithDisposable(LitElement) {
           this._ImageButton(image),
         ].filter(b => !!b && b !== nothing);
 
-    if (elements.length > 1) {
+    if (elements.length > 1 && elements.length !== connector?.length) {
       buttons.unshift(this._Divider());
       buttons.unshift(this._AlignButton());
       buttons.unshift(this._Divider());

diff --git a/packages/blocks/src/root-block/edgeless/components/connector/connector-handle.ts b/packages/blocks/src/root-block/edgeless/components/connector/connector-handle.ts
@@ -23,11 +23,11 @@ export class EdgelessConnectorHandle extends WithDisposable(LitElement) {
       z-index: 10;
       pointer-events: all;
       /**
-             * Fix: pointerEvent stops firing after a short time.
-             * When a gesture is started, the browser intersects the touch-action values of the touched element and its ancestors,
-             * up to the one that implements the gesture (in other words, the first containing scrolling element)
-             * https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
-             */
+       * Fix: pointerEvent stops firing after a short time.
+       * When a gesture is started, the browser intersects the touch-action values of the touched element and its ancestors,
+       * up to the one that implements the gesture (in other words, the first containing scrolling element)
+       * https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
+       */
       touch-action: none;
     }
     .line-controller-hidden {
@@ -107,12 +107,10 @@ export class EdgelessConnectorHandle extends WithDisposable(LitElement) {
     const { path } = this.connector;
     const zoom = service.viewport.zoom;
     const start = {
-      position: 'absolute',
       left: `${path[0][0] * zoom}px`,
       top: `${path[0][1] * zoom}px`,
     };
     const end = {
-      position: 'absolute',
       left: `${path[path.length - 1][0] * zoom}px`,
       top: `${path[path.length - 1][1] * zoom}px`,
     };

diff --git a/packages/blocks/src/root-block/edgeless/components/rects/edgeless-selected-rect.ts b/packages/blocks/src/root-block/edgeless/components/rects/edgeless-selected-rect.ts
@@ -421,11 +421,11 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
   private _selectedRect: SelectedRect = {
     width: 0,
     height: 0,
-    borderWidth: 0,
-    borderStyle: 'solid',
     left: 0,
     top: 0,
     rotate: 0,
+    borderWidth: 0,
+    borderStyle: 'solid',
   };
 
   @state()
@@ -502,6 +502,7 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
     const elements = this.selection.elements;
 
     let areAllConnectors = true;
+    let areAllIndependentConnectors = elements.length > 1;
     let areAllShapes = true;
     let areAllTexts = true;
 
@@ -522,8 +523,14 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
         areAllTexts = false;
       } else {
         assertType<ElementModel>(element);
-        if (element.type !== CanvasElementType.CONNECTOR)
+        if (element.type === CanvasElementType.CONNECTOR) {
+          const connector = element as ConnectorElementModel;
+          areAllIndependentConnectors &&= !(
+            connector.source.id || connector.target.id
+          );
+        } else {
           areAllConnectors = false;
+        }
         if (
           element.type !== CanvasElementType.SHAPE &&
           element.type !== CanvasElementType.GROUP
@@ -533,7 +540,14 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
       }
     }
 
-    if (areAllConnectors) return 'none';
+    if (areAllConnectors) {
+      if (areAllIndependentConnectors) {
+        return 'all';
+      } else {
+        return 'none';
+      }
+    }
+
     if (areAllShapes) return 'all';
     if (areAllTexts) return 'edgeAndCorner';
 
@@ -901,13 +915,13 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
     }
 
     this._selectedRect = {
-      width: width,
-      height: height,
-      borderWidth: selection.editing ? 2 : 1,
-      borderStyle: 'solid',
+      width,
+      height,
       left,
       top,
       rotate,
+      borderStyle: 'solid',
+      borderWidth: selection.editing ? 2 : 1,
     };
   }, this);
 
@@ -1113,7 +1127,8 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
         : nothing;
 
     const elementHandle =
-      elements.length > 1
+      elements.length > 1 &&
+      !elements.reduce((p, e) => p && e instanceof ConnectorElementModel, true)
         ? elements.map(element => {
             const [modelX, modelY, w, h] = deserializeXYWH(element.xywh);
             const [x, y] = edgeless.service.viewport.toViewCoord(

diff --git a/packages/blocks/src/root-block/edgeless/edgeless-root-service.ts b/packages/blocks/src/root-block/edgeless/edgeless-root-service.ts
@@ -262,7 +262,6 @@ export class EdgelessRootService extends RootService {
       this._surface.updateElement(id, props);
     } else if (this.doc.getBlockById(id)) {
       const block = this.doc.getBlockById(id)!;
-
       this.editSession.record(block.flavour as EdgelessElementType, props);
       this.doc.updateBlock(block, props);
     }