fix(edgeless): selection when all elements are connector

toeverything · Mar 30, 2024 · 5f9080b · 5f9080b
1 parent 551b17e
commit 5f9080b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 10 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/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);
 
@@ -1075,6 +1089,7 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
     } = this;
 
     const hasResizeHandles = !selection.editing && !doc.readonly;
+    console.log(hasResizeHandles, resizeMode);
 
     const resizeHandles = hasResizeHandles
       ? ResizeHandles(
@@ -1113,7 +1128,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/surface-block/surface-model.ts b/packages/blocks/src/surface-block/surface-model.ts
@@ -575,6 +575,9 @@ export class SurfaceBlockModel extends BlockModel<SurfaceBlockProps> {
       throw new Error(`Element ${id} is not found`);
     }
 
+    console.log('--------');
+    console.log(id, elementModel.type, props);
+    console.log('--------');
     this.doc.transact(() => {
       props = propsToY(
         elementModel.type,