diff --git a/src/components/Canvas/DepthCanvas/components/brush-control-panel.vue b/src/components/Canvas/DepthCanvas/components/brush-control-panel.vue
index af24f34..298c3a7 100644
--- a/src/components/Canvas/DepthCanvas/components/brush-control-panel.vue
+++ b/src/components/Canvas/DepthCanvas/components/brush-control-panel.vue
@@ -7,7 +7,7 @@
:is-input="false"
v-model="brushSize"
:tip-formatter="(v) => v + 'px'"
- :min="5"
+ :min="1"
:max="100"
@input="onInputSize"
/>
diff --git a/src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue b/src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue
new file mode 100644
index 0000000..da5b100
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue
@@ -0,0 +1,65 @@
+
+
+
+ X:
+ {{ object.left }}
+
+
+ Y:
+ {{ object.top }}
+
+
+ Width:
+ {{ object.width }}
+
+
+ Height:
+ {{ object.height }}
+
+
+ 缩放X:
+ {{ object.scaleX }}
+
+
+ 缩放Y:
+ {{ object.scaleY }}
+
+
+ Angle:
+ {{ object.angle }}
+
+
+
+
+
+
+
diff --git a/src/components/Canvas/DepthCanvas/components/details-panel/index.vue b/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
index 1ea4906..5e61ee3 100644
--- a/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
+++ b/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
@@ -8,34 +8,7 @@
-
- X:
- {{ activeObject.left }}
-
-
- Y:
- {{ activeObject.top }}
-
-
- Width:
- {{ activeObject.width }}
-
-
- Height:
- {{ activeObject.height }}
-
-
- 缩放X:
- {{ activeObject.scaleX }}
-
-
- 缩放Y:
- {{ activeObject.scaleY }}
-
-
- Angle:
- {{ activeObject.angle }}
-
+
@@ -51,8 +24,7 @@
const activeObject = ref(null)
const updateActiveObject = () => {
const obj = layers.value.find((v: any) => v.info.id === activeID.value)
- // activeObject.value = obj?.toJSON('info') || null
- activeObject.value = obj
+ activeObject.value = obj ? JSON.parse(JSON.stringify(obj)) : null
}
watch(layers, () => updateActiveObject())
watch(activeID, () => updateActiveObject())
@@ -95,23 +67,7 @@
}
> .content {
padding: 1.6rem;
- > div {
- padding: 0.8rem 0;
- display: flex;
- align-items: center;
- > .label {
- font-size: 1.6rem;
- color: #000;
- font-weight: bold;
- min-width: 7rem;
- text-align: right;
- margin-right: 0.8rem;
- }
- > .value {
- font-size: 1.6rem;
- color: #333;
- }
- }
+
}
}
diff --git a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
index 88e5aa8..1838b1d 100644
--- a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
@@ -52,7 +52,8 @@ export class CanvasManager {
this.canvas.setWidth(this.canvasViewWidth)
this.canvas.setHeight(this.canvasViewHeight)
}
- initCanvas(options: CanvasInitOptions) {
+ /** 初始化画布 */
+ async initCanvas(options: CanvasInitOptions) {
this.layerManager = this.stateManager.layerManager
this.canvasWidth = options.canvasWidth || 750
this.canvasHeight = options.canvasHeight || 600
@@ -84,29 +85,35 @@ export class CanvasManager {
this.setupCanvasEvents()
this.setupBrushEvents()
+
+ this.stateManager.setIsRecord(false)
// 创建矩形
- const rect = this.layerManager.createRectLayer({
+ const rect = await this.layerManager.createRectLayer({
left: 400,
top: 100,
})
//创建圆形
- const circle = this.layerManager.createCircleLayer({
+ const circle = await this.layerManager.createCircleLayer({
left: 200,
top: 200,
})
// 文字
- const text = this.layerManager.createTextLayer('Hello World');
+ const text = await this.layerManager.createTextLayer('Hello World');
this.layerManager.updateLayers()
this.layerManager.setActiveID(text.info.id)
+ this.stateManager.setIsRecord(true)
this.stateManager.recordState()
// this.stateManager.toolManager.setTool(OperationType.RECTANGLE)
}
/** 画布添加对象 */
- add(obj: any, isUpdate = true) {
+ async add(obj: any, isUpdate = true) {
this.canvas.add(obj)
+ const id = obj?.info?.id || ""
if (isUpdate) {
this.layerManager.updateLayers()
this.renderAll()
+ if (id) await this.layerManager.updateLayerThumbnailsById(id)
+ this.stateManager.recordState()
}
}
/** 画布移除对象 */
@@ -134,7 +141,6 @@ export class CanvasManager {
/** 设置激活对象 */
setActiveObjectById(id: string) {
const obj = this.getObjectById(id)
- console.log(obj)
if (obj) this.canvas.setActiveObject(obj)
this.renderAll()
}
@@ -164,12 +170,7 @@ export class CanvasManager {
this.canvas.moveTo(this.getObjectById(id), newIndex)
this.layerManager.updateLayers()
this.renderAll()
- }
- getBitObjects() {
- return this.getObjects().map(v => {
- const object = v.toJSON("info");
- return object
- })
+ this.stateManager.recordState()
}
/** 画笔事件 */
@@ -189,7 +190,7 @@ export class CanvasManager {
if (activeLayer) {
this.layerManager.imageMergeToLayer(activeLayer, fabricImage)
} else {
- const emptyLayer = this.layerManager.createEmptyLayer();
+ const emptyLayer = this.layerManager.createEmptyLayer(false);
this.layerManager.setActiveID(emptyLayer.info.id, false)
this.layerManager.imageMergeToLayer(emptyLayer, fabricImage)
}
diff --git a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
index cf52905..67f6b39 100644
--- a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
@@ -29,13 +29,21 @@ export class LayerManager {
const layer = this.getLayerById(id)
if (layer) {
layer.info.name = name
+ }
+ const object = this.canvasManager.getObjectById(id)
+ if (object) {
+ object.info.name = name
this.canvasManager.renderAll()
}
}
setLayerVisibleById(id, visible: boolean) {
const layer = this.getLayerById(id)
if (layer) {
- layer.set({
+ layer.visible = visible
+ }
+ const object = this.canvasManager.getObjectById(id)
+ if (object) {
+ object.set({
visible: visible
})
this.canvasManager.renderAll()
@@ -46,6 +54,7 @@ export class LayerManager {
if (id === this.activeID.value && isActive) {
this.setActiveID(this.layers.value[0]?.info?.id || "")
}
+ if (isActive) this.stateManager.recordState()
}
// 拖拽排序
dragSort(id, newIndex) {
@@ -61,24 +70,24 @@ export class LayerManager {
}
/** 设置图层位置-不设置默认居中 */
- setLayerPosition(layer, options?: any) {
+ setLayerPosition(object, options?: any) {
const width = this.canvasManager.canvasWidth
const height = this.canvasManager.canvasHeight
if (options && options.top !== undefined) {
- layer.set({ top: options.top })
+ object.set({ top: options.top })
} else {
- layer.set({ top: height / 2 - layer.height * layer.scaleY / 2 })
+ object.set({ top: height / 2 - object.height * object.scaleY / 2 })
}
if (options && options.left !== undefined) {
- layer.set({ left: options.left })
+ object.set({ left: options.left })
} else {
- layer.set({ left: width / 2 - layer.width * layer.scaleX / 2 })
+ object.set({ left: width / 2 - object.width * object.scaleX / 2 })
}
}
/** 创建空图层 */
- createEmptyLayer() {
- const emptyLayer = new fabric.Rect({
+ createEmptyLayer(isUpdate = true) {
+ const emptyObject = new fabric.Rect({
width: 0,
height: 0,
fill: 'transparent',
@@ -87,13 +96,13 @@ export class LayerManager {
name: '空图层',
}
})
- this.setLayerPosition(emptyLayer)
- this.canvasManager.add(emptyLayer)
- return emptyLayer
+ this.setLayerPosition(emptyObject)
+ this.canvasManager.add(emptyObject, isUpdate)
+ return emptyObject
}
/** 创建文本图层 */
- createTextLayer(text: string, options?: any) {
- const textLayer = new fabric.IText(text, {
+ async createTextLayer(text: string, options?: any) {
+ const textObject = new fabric.IText(text, {
fontSize: 24,
fill: '#000',
...(options || {}),
@@ -103,13 +112,13 @@ export class LayerManager {
...(options?.info || {}),
}
})
- this.setLayerPosition(textLayer, options)
- this.canvasManager.add(textLayer)
- return textLayer
+ this.setLayerPosition(textObject, options)
+ await this.canvasManager.add(textObject)
+ return textObject
}
/** 创建矩形图层 */
- createRectLayer(options?: any, isActive = false) {
- const rectLayer = new fabric.Rect({
+ async createRectLayer(options?: any, isActive = false) {
+ const rectObject = new fabric.Rect({
width: 100,
height: 100,
fill: '#000',
@@ -120,14 +129,14 @@ export class LayerManager {
...(options?.info || {}),
}
})
- this.setLayerPosition(rectLayer, options)
- this.canvasManager.add(rectLayer)
- if (isActive) this.setActiveID(rectLayer.info.id)
- return rectLayer
+ this.setLayerPosition(rectObject, options)
+ await this.canvasManager.add(rectObject)
+ if (isActive) this.setActiveID(rectObject.info.id)
+ return rectObject
}
/** 创建圆形图层 */
- createCircleLayer(options?: any, isActive = false) {
- const circleLayer = new fabric.Circle({
+ async createCircleLayer(options?: any, isActive = false) {
+ const circleObject = new fabric.Circle({
radius: 50,
fill: '#000',
...(options || {}),
@@ -137,17 +146,17 @@ export class LayerManager {
...(options?.info || {}),
}
})
- this.setLayerPosition(circleLayer, options)
- this.canvasManager.add(circleLayer)
- if (isActive) this.setActiveID(circleLayer.info.id)
- return circleLayer
+ this.setLayerPosition(circleObject, options)
+ await this.canvasManager.add(circleObject)
+ if (isActive) this.setActiveID(circleObject.info.id)
+ return circleObject
}
/** 创建图片图层 */
async createImageLayer(imgOrUrl: string | HTMLImageElement, options?: any) {
const canvasWidth = this.canvasManager.canvasWidth
const canvasHeight = this.canvasManager.canvasHeight
- const imageLayer = await new Promise((resolve) => {
+ const imageObject = await new Promise((resolve) => {
const url = typeof imgOrUrl === 'string' ? imgOrUrl : imgOrUrl.src
fabric.Image.fromURL(url, (img) => {
const width = img.width
@@ -168,10 +177,10 @@ export class LayerManager {
resolve(img)
})
}) as fabric.Object
- this.setLayerPosition(imageLayer, options)
- this.canvasManager.add(imageLayer)
- this.setActiveID(imageLayer.info.id)
- return imageLayer
+ this.setLayerPosition(imageObject, options)
+ await this.canvasManager.add(imageObject)
+ this.setActiveID(imageObject.info.id)
+ return imageObject
}
@@ -196,7 +205,7 @@ export class LayerManager {
const index = this.canvasManager.getObjects().indexOf(targetLayer);
this.deleteLayerById(targetLayer.info.id, false)
this.setActiveID(mergedImage.info.id, false)
- this.canvasManager.add(mergedImage, false);
+ await this.canvasManager.add(mergedImage);
this.canvasManager.canvas.moveTo(mergedImage, index);
this.canvasManager.renderAll()
this.updateLayers()
@@ -216,13 +225,8 @@ export class LayerManager {
const object = this.canvasManager.getObjectById(id);
if (!object) return;
const url = await exportObjectToThumbnail(object);
- object.set({
- thumbnail: url
- })
- // object.thumbnail = url
+ object.thumbnail = url
this.updateLayers()
- // this.canvasManager.renderAll()
-
}
dispose() { }
diff --git a/src/components/Canvas/DepthCanvas/manager/StateManager.ts b/src/components/Canvas/DepthCanvas/manager/StateManager.ts
index d033828..77920e2 100644
--- a/src/components/Canvas/DepthCanvas/manager/StateManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/StateManager.ts
@@ -37,7 +37,10 @@ export class StateManager {
}
-
+ /** 设置是否开始记录状态 */
+ setIsRecord(isRecord: boolean) {
+ this.running.value = !isRecord
+ }
/** 清空状态 */
clearState(isRecordCurrentState?: boolean) {
this.historyList.value = []
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/brushManager.js b/src/components/Canvas/DepthCanvas/manager/brushes/brushManager.js
index 512e86a..e6542c4 100644
--- a/src/components/Canvas/DepthCanvas/manager/brushes/brushManager.js
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/brushManager.js
@@ -40,7 +40,8 @@ export class BrushManager {
this.brushStore = new BrushState();
this.layerManager = options.layerManager; // 添加图层管理器引用
this.brushIndicator = options.brushIndicator; // 添加笔刷指示器引用
- this.t = options.t
+ // this.t = options.t
+ this.t = (v) => v
// 当前活动笔刷
this.activeBrush = null;
diff --git a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
index 4a1dcca..34edb87 100644
--- a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
+++ b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
@@ -728,14 +728,14 @@ export class CanvasEventManager {
// console.log("object:skewing", e);
updateLayers(e);
});
- this.canvas.on("object:modified", (e) => {
+ this.canvas.on("object:modified", async (e) => {
updateLayers(e);
+ const id = e.target?.info?.id;
+ if (id) await this.layerManager.updateLayerThumbnailsById(id)
this.stateManager.recordState();
- this.layerManager.updateLayerThumbnailsById(e.target.info.id);
});
this.canvas.on("object:removed", (e) => {
updateLayers(e);
- this.stateManager.recordState();
});
}
setupDoubleClickEvents() {
diff --git a/src/components/Canvas/DepthCanvas/tools/canvasMethod.js b/src/components/Canvas/DepthCanvas/tools/canvasMethod.js
index 02c9034..acd568a 100644
--- a/src/components/Canvas/DepthCanvas/tools/canvasMethod.js
+++ b/src/components/Canvas/DepthCanvas/tools/canvasMethod.js
@@ -11,6 +11,7 @@ export async function cloneObjects(objects = []) {
height: obj.height,
scaleX: obj.scaleX,
scaleY: obj.scaleY,
+ angle: obj.angle,
})
resolve(v)
})
@@ -26,10 +27,11 @@ export async function getObjectsBoundingBox(objects = []) {
const box1 = { x: Infinity, y: Infinity }
const box2 = { x: -Infinity, y: -Infinity }
objects.forEach(obj => {
- box1.x = Math.min(box1.x, obj.left)
- box1.y = Math.min(box1.y, obj.top)
- box2.x = Math.max(box2.x, obj.left + obj.width * obj.scaleX)
- box2.y = Math.max(box2.y, obj.top + obj.height * obj.scaleY)
+ const rect = obj.getBoundingRect()
+ box1.x = Math.min(box1.x, rect.left)
+ box1.y = Math.min(box1.y, rect.top)
+ box2.x = Math.max(box2.x, rect.left + rect.width)
+ box2.y = Math.max(box2.y, rect.top + rect.height)
})
return {
left: box1.x,
diff --git a/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue b/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
index 12d6a32..105c0bd 100644
--- a/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
@@ -123,6 +123,7 @@
const onGenerateClick = async () => {
const data = componentRef.value?.getApiData?.() || {}
const subordNode = stateManager.getSubordNodeById(attrs.node.id)
+ const subordNodes = stateManager.getSubordNodes(attrs.node.id)
emit('update-data', componentRef.value?.data)
if(!attrs.node?.data?.originalImage)console.log('originalImage 找不到原始图片')
@@ -131,32 +132,32 @@
imageUrl: attrs.node?.data?.originalImage,
...data,
}
+ console.log(subordNode)
const taskList = await currentComponent.value.api(apiData).then((rv)=>{
return rv
}) || []
// const taskList = [{taskId:'123'}]
- console.log(taskList)
- if (!subordNode) {
- taskList.forEach((item,index) => {
- nodeManager.createResultNode({
- positionY: index * (50 + 250),
+ // if (!subordNode) {
+ taskList.forEach((item,index) => {
+ nodeManager.createResultNode({
+ positionY: (index + subordNodes.length) * (50 + 250),
+ data: {
+ superiorID: attrs.node.id,
+ createIndexPosition: index,
+ tier: currentComponent.value.tier,
+ isActive: index == 0 && subordNodes.length == 0,
data: {
- superiorID: attrs.node.id,
- createIndexPosition: index,
- tier: currentComponent.value.tier,
- isActive: index == 0,
- data: {
- imageProcessTasks:[item],
- selectTaskId:item.taskId,
- }
+ imageProcessTasks:[item],
+ selectTaskId:item.taskId,
}
- })
+ }
})
- } else {
- subordNode.data.data.url =
- 'https://s3-alpha-sig.figma.com/img/8ce2/f1a4/12b93da90e5f17109e7430f14837fd14?Expires=1773619200&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=kmLsTFtXJqfvuxj6husWlDkRDMOIRDjzUUjb7zh79GkBKihUHc0f59k5OAImHTPdaiEREUCCpn~8sQ-si5lenuauJpApCmAU~NsxjfQhuh9m5O~GiHenr2fKu0DIJ75-oCE3859fyxoSFXQgZ9PRmeb98kikMR6uRX9nI5TPUHgKO8ZgkhDBTW~iyaDT~1ybnoK7elPa6T2VzfO-bpIyY-MZ71VRq3RxwmZRxduqHEb3Dh-jjrHyh2SoQsHmUjSJOf-uYilfvpGUResZAjAq8ZVLEjvhzKC2bmCNZIp3RmhYO8ctU7pd5t91J6Xaa6jBLtGfMxbqIm652EC79K0RoA__'
- setTimeout(() => stateManager.recordState())
- }
+ })
+ // } else {
+ // subordNode.data.data.url =
+ // 'https://s3-alpha-sig.figma.com/img/8ce2/f1a4/12b93da90e5f17109e7430f14837fd14?Expires=1773619200&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=kmLsTFtXJqfvuxj6husWlDkRDMOIRDjzUUjb7zh79GkBKihUHc0f59k5OAImHTPdaiEREUCCpn~8sQ-si5lenuauJpApCmAU~NsxjfQhuh9m5O~GiHenr2fKu0DIJ75-oCE3859fyxoSFXQgZ9PRmeb98kikMR6uRX9nI5TPUHgKO8ZgkhDBTW~iyaDT~1ybnoK7elPa6T2VzfO-bpIyY-MZ71VRq3RxwmZRxduqHEb3Dh-jjrHyh2SoQsHmUjSJOf-uYilfvpGUResZAjAq8ZVLEjvhzKC2bmCNZIp3RmhYO8ctU7pd5t91J6Xaa6jBLtGfMxbqIm652EC79K0RoA__'
+ // setTimeout(() => stateManager.recordState())
+ // }
}
//删除功能卡片
const onDeleteClick = ()=>{
diff --git a/src/components/Canvas/FlowCanvas/manager/StateManager.ts b/src/components/Canvas/FlowCanvas/manager/StateManager.ts
index b784f65..b42db47 100644
--- a/src/components/Canvas/FlowCanvas/manager/StateManager.ts
+++ b/src/components/Canvas/FlowCanvas/manager/StateManager.ts
@@ -145,6 +145,8 @@ export class StateManager {
setNodesDraggable(v: boolean) { this.nodesDraggable.value = v }
/** 设置是否可以平移画布 */
setPanOnDrag(v: boolean) { this.panOnDrag.value = v }
+ /** 获取所有下级节点 */
+ getSubordNodes(id: string) { return this.nodes.value.filter((node: NodesItem) => node.data.superiorID === id) }
/** 设置节点层级至最顶部 */
bringToFont(id) {
const fromIndex = this.nodes.value.findIndex(item => item.id === id)
diff --git a/src/components/Canvas/components/base-modal.vue b/src/components/Canvas/components/base-modal.vue
index 0ce7ed6..a6377c5 100644
--- a/src/components/Canvas/components/base-modal.vue
+++ b/src/components/Canvas/components/base-modal.vue
@@ -26,7 +26,7 @@
default: '63vw'
}
})
- const showDialog = ref(true)
+ const showDialog = ref(false)
const open = (url_: any) => {
showDialog.value = true
}