Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/FiDA_Front

src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue

@@ -28,6 +28,7 @@
 						before="W"
 						type="number"
 						v-model="data.width"
+						:disabled="whDisabled"
 						@input="onInpot"
 						@change="onChange"
 					/>
@@ -37,6 +38,7 @@
 						before="H"
 						type="number"
 						v-model="data.height"
+						:disabled="whDisabled"
 						@input="onInpot"
 						@change="onChange"
 					/>
@@ -97,6 +99,7 @@
 		}
 	})
 	const id = computed(() => props.object.info.id)
+	const whDisabled = computed(() => ['path', 'line'].includes(props.object.type))
 
 	const data = reactive({
 		top: 0,

src/components/Canvas/DepthCanvas/components/tools/depth-input.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="depth-input" :class="{ color: isColor }">
+	<div class="depth-input" :class="{ color: isColor, disabled: attrs.disabled }">
 		<span class="decorate"></span>
 		<span v-show="icon" class="icon">
 			<svg-icon :name="icon" :size="iconSize" />
@@ -28,6 +28,7 @@
 			<input readonly :value="colorObj.color" @copy.stop @keydown.stop />
 			<span class="decorate marginl"></span>
 			<input
+				v-bind="attrs"
 				class="alpha"
 				type="number"
 				:value="Math.round(colorObj.alpha * 100)"
@@ -230,11 +231,15 @@
 		height: var(--depth-input-height, 2rem);
 		background-color: var(--depth-input-bg-color, #fff);
 		padding: 0 0.4rem 0 0.2rem;
+		&.disabled,
+		&.disabled * {
+			cursor: not-allowed;
+		}
 		&.color {
 			--depth-input-decorate-margin-right: 1rem;
 			--depth-input-input-margin-right: 1rem;
 			--depth-input-input-font-align: left;
-			--depth-input-after-color: rgba(181, 181, 181, 1);
+			// --depth-input-after-color: rgba(181, 181, 181, 1);
 		}
 		> .decorate {
 			width: 0.2rem;

src/components/Canvas/DepthCanvas/manager/LayerManager.ts

@@ -348,6 +348,7 @@ export class LayerManager {
 		const height = options?.height || 100
 		delete options.points
 		const starObject = new fabric.Polygon(getStarArr(width, height), {
+			type: "star",
 			fill: '#000',
 			strokeWidth: 0,
 			...(options || {}),

src/components/Canvas/DepthCanvas/manager/ObjectManager.ts

@@ -3,6 +3,7 @@ import { fabric } from 'fabric-with-all'
 import { createId } from '../../tools/tools'
 import { exportObjectsToImage, exportObjectToThumbnail } from '../tools/exportMethod'
 import { OperationType } from '../tools/layerHelper'
+import { getArrowPath, getLinePath, cloneObjects, getStarArr } from '../tools/canvasMethod'
 
 export const FillSourceToBase64 = (source) => {
 	if (source?.toDataURL) {
@@ -215,6 +216,21 @@ export class ObjectManager {
 	async updateProperty(id: string, options: any, isRecord: boolean) {
 		const object = this.canvasManager.getObjectById(id)
 		if (!object) return null
+		const type = object.type
+		const isWidth = object.hasOwnProperty('width')
+		const isHeight = object.hasOwnProperty('height')
+		if (isWidth || isHeight) {
+			let width = options.width
+			let height = options.height
+			if (type === "polygon") {
+				if (object.points.length === 10) {// 五角星
+					options.points = getStarArr(width, height)
+				}
+			} else if (type === "ellipse") {// 椭圆
+				options.rx = width / 2
+				options.ry = height / 2
+			}
+		}
 		object.set(options);
 		this.canvasManager.renderAll()
 		if (isRecord) {