changed edit box outline to item shape outline

ishubin · Feb 6, 2025 · 760203e · 760203e
1 parent 770df32
commit 760203e
Showing 1 changed file with 31 additions and 3 deletions.
diff --git a/src/ui/components/editor/EditBox.vue b/src/ui/components/editor/EditBox.vue
@@ -4,15 +4,15 @@
 <template>
     <g data-preview-ignore="true" :style="{opacity: mainOpacity}">
         <path v-if="!isItemConnector && isThin" :transform="svgEditBoxTransform"
-            :d="`M 0 0 L ${editBox.area.w} 0  L ${editBox.area.w} ${editBox.area.h} L 0 ${editBox.area.h} Z`"
+            :d="editBoxPath"
             data-type="edit-box"
             class="edit-box-outline"
             :stroke-width="5/safeZoom"
             fill="none"
             stroke="rgba(255,255,255,0.0)" />
 
         <path v-if="!isItemConnector" :transform="svgEditBoxTransform"
-            :d="`M 0 0 L ${editBox.area.w} 0  L ${editBox.area.w} ${editBox.area.h} L 0 ${editBox.area.h} Z`"
+            :d="editBoxPath"
             data-type="edit-box"
             :class="{'edit-box-outline': isThin}"
             :stroke-width="1/safeZoom"
@@ -21,7 +21,7 @@
             style="opacity: 0.8;"/>
 
         <path v-if="!isItemConnector" :transform="svgEditBoxTransform"
-            :d="`M 0 0 L ${editBox.area.w} 0  L ${editBox.area.w} ${editBox.area.h} L 0 ${editBox.area.h} Z`"
+            :d="editBoxPath"
             data-type="edit-box"
             :stroke-width="1/safeZoom"
             :fill="editBoxFill"
@@ -503,6 +503,30 @@ function isItemConnector(editBox) {
         || (editBox.items.length === 0 && editBox.connectorPoints.length === 1);
 }
 
+function computeEditBoxPath(editBox) {
+    if (editBox.items.length === 1 && editBox.connectorPoints.length === 0 && editBox.items[0].shape !== 'connector') {
+        const shape = Shape.find(editBox.items[0].shape);
+
+        const item = {
+            ...editBox.items[0],
+            area: {
+                x: 0,
+                y: 0,
+                r: 0,
+                w: editBox.area.w,
+                h: editBox.area.h,
+                sx: 1,
+                sy: 1,
+                px: 0.5,
+                py: 0.5
+            }
+        };
+
+        return shape.computeOutline(item);
+    }
+    return `M 0 0 L ${editBox.area.w} 0  L ${editBox.area.w} ${editBox.area.h} L 0 ${editBox.area.h} Z`;
+}
+
 function createCustomControlAxis(place) {
     if (place === 'right' || place === 'bottom') {
         return {
@@ -860,6 +884,10 @@ export default {
     },
 
     computed: {
+        editBoxPath() {
+            return computeEditBoxPath(this.editBox);
+        },
+
         guideLabelSymbolSize() {
             return 9;
         },