@mx-sose-front/mx-sose-graph 1.2.3 → 1.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +103 -97
- package/dist/index.esm.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +5 -2
- package/src/store/graphStore.ts +125 -119
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mx-sose-front/mx-sose-graph",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.5",
|
|
4
4
|
"description": "A Vue3 graph visualization plugin library",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -9,7 +9,10 @@
|
|
|
9
9
|
"dist",
|
|
10
10
|
"src"
|
|
11
11
|
],
|
|
12
|
-
"sideEffects": [
|
|
12
|
+
"sideEffects": [
|
|
13
|
+
"*.css",
|
|
14
|
+
"*.vue"
|
|
15
|
+
],
|
|
13
16
|
"exports": {
|
|
14
17
|
".": {
|
|
15
18
|
"import": "./dist/index.esm.js",
|
package/src/store/graphStore.ts
CHANGED
|
@@ -725,142 +725,148 @@ export const useGraphStore = defineStore('graph', () => {
|
|
|
725
725
|
const endDragShape = async (source?: string) => {
|
|
726
726
|
// 防并发:同一次拖拽只允许进入一次
|
|
727
727
|
if (!isDragging.value) return
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
dragBase.value
|
|
736
|
-
)
|
|
737
|
-
if (!changedIds.length) {
|
|
738
|
-
cleanupAfterDrag()
|
|
739
|
-
return
|
|
740
|
-
}
|
|
741
|
-
// 记录拖动前的父 id,用于嵌套回滚 & 业务上报
|
|
742
|
-
const prevParentById = buildPrevParentMap(shapes.value, changedIds)
|
|
743
|
-
const containerForFinalize =
|
|
744
|
-
hoverContainerId.value && hoverNestable.value ? hoverContainerId.value : null
|
|
745
|
-
|
|
746
|
-
// finalizeAfterTransform:决定“最终 parent + bounds”
|
|
747
|
-
const didReparent = finalizeAfterTransform(
|
|
748
|
-
shapes.value,
|
|
749
|
-
changedIds,
|
|
750
|
-
dragGhost,
|
|
751
|
-
draggingIds.value,
|
|
752
|
-
currentDiagramId.value,
|
|
753
|
-
containerForFinalize,
|
|
754
|
-
updateShape,
|
|
755
|
-
)
|
|
756
|
-
//嵌套 / 克隆 / comparents 业务处理(pinDrop 场景跳过)
|
|
757
|
-
let ownerPayload: OwnerPayload | null = null
|
|
758
|
-
let clonedIds: string[] = []
|
|
759
|
-
if (source !== 'pinDrop') {
|
|
760
|
-
const nestResult = await applyReparentAndClone({
|
|
761
|
-
shapes: shapes.value,
|
|
762
|
-
changedIds,
|
|
763
|
-
prevParentById,
|
|
764
|
-
source,
|
|
765
|
-
dragBase: dragBase.value,
|
|
728
|
+
try {
|
|
729
|
+
// 提交拖动几何(commitDrag 只是“位置/大小”的更新)
|
|
730
|
+
const changedIds = commitDrag(
|
|
731
|
+
shapes.value,
|
|
732
|
+
[...draggingIds.value],
|
|
733
|
+
dragGhost,
|
|
734
|
+
currentDiagramId.value || shapes.value[0].diagramId,
|
|
766
735
|
updateShape,
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
if (nestResult.cancelled) {
|
|
771
|
-
// 嵌套校验失败,已经在 graphDragService 里回滚了位置/父级,这里只需要收尾
|
|
736
|
+
dragBase.value
|
|
737
|
+
)
|
|
738
|
+
if (!changedIds.length) {
|
|
772
739
|
cleanupAfterDrag()
|
|
773
740
|
return
|
|
774
741
|
}
|
|
742
|
+
// 记录拖动前的父 id,用于嵌套回滚 & 业务上报
|
|
743
|
+
const prevParentById = buildPrevParentMap(shapes.value, changedIds)
|
|
744
|
+
const containerForFinalize =
|
|
745
|
+
hoverContainerId.value && hoverNestable.value ? hoverContainerId.value : null
|
|
775
746
|
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
}
|
|
779
|
-
// 如果真的发生了“换父”,整理一下 zIndex(保持绘制顺序)
|
|
780
|
-
if (didReparent) {
|
|
781
|
-
normalizeZOrder(
|
|
747
|
+
// finalizeAfterTransform:决定“最终 parent + bounds”
|
|
748
|
+
const didReparent = finalizeAfterTransform(
|
|
782
749
|
shapes.value,
|
|
750
|
+
changedIds,
|
|
751
|
+
dragGhost,
|
|
752
|
+
draggingIds.value,
|
|
783
753
|
currentDiagramId.value,
|
|
754
|
+
containerForFinalize,
|
|
784
755
|
updateShape,
|
|
785
|
-
1,
|
|
786
|
-
1,
|
|
787
756
|
)
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
const prevPid = prevParentById[id]
|
|
794
|
-
const nowPid = node.parenShapeId ?? null
|
|
795
|
-
if ((!nowPid || nowPid === '') && prevPid) {
|
|
796
|
-
updateShape(id, { parenShapeId: prevPid })
|
|
797
|
-
}
|
|
798
|
-
}
|
|
799
|
-
}
|
|
800
|
-
|
|
801
|
-
// 更新相关 edge 的 waypoints
|
|
802
|
-
await EdgeUtils.updateRelatedEdgesAsync(shapes.value, changedIds, (shape) => {
|
|
803
|
-
updateShape(shape.id, shape)
|
|
804
|
-
}, edgesByNodeId.value, shapeMap.value)
|
|
805
|
-
//对“本次直接拖动的隔间”做一次自动扩容检查
|
|
806
|
-
autoExpandMovedCompartmentsAfterDrag(shapes.value, changedIds, updateShape)
|
|
807
|
-
// 把 clone 也并入“需要同步 comparents 的变更集合”
|
|
808
|
-
const allReparentIds = [...changedIds, ...clonedIds]
|
|
809
|
-
// prevParentById 要补齐 clone 的“拖动前父”,因为 clone 之前不存在
|
|
810
|
-
const prevMapForComparents = { ...prevParentById }
|
|
811
|
-
for (const cid of clonedIds) {
|
|
812
|
-
// clone 之前不存在 => 认为 beforePid = null / ''
|
|
813
|
-
prevMapForComparents[cid] = null
|
|
814
|
-
}
|
|
815
|
-
// 处理comparents字段
|
|
816
|
-
syncShowComparentsByReparent(
|
|
817
|
-
shapes.value,
|
|
818
|
-
allReparentIds,
|
|
819
|
-
prevMapForComparents,
|
|
820
|
-
(id, u) => updateShapeRaw(id, u)
|
|
821
|
-
)
|
|
822
|
-
// 在生成 payloads 之前,把父扩容先做掉
|
|
823
|
-
const shapeId = ownerPayload?.shapeId
|
|
824
|
-
if (shapeId != null) {
|
|
825
|
-
const child = shapeMap.value.get(shapeId) ?? null
|
|
826
|
-
if (child) {
|
|
827
|
-
expandParentByChild({
|
|
757
|
+
//嵌套 / 克隆 / comparents 业务处理(pinDrop 场景跳过)
|
|
758
|
+
let ownerPayload: OwnerPayload | null = null
|
|
759
|
+
let clonedIds: string[] = []
|
|
760
|
+
if (source !== 'pinDrop') {
|
|
761
|
+
const nestResult = await applyReparentAndClone({
|
|
828
762
|
shapes: shapes.value,
|
|
829
|
-
|
|
763
|
+
changedIds,
|
|
764
|
+
prevParentById,
|
|
765
|
+
source,
|
|
766
|
+
dragBase: dragBase.value,
|
|
830
767
|
updateShape,
|
|
768
|
+
pendingNestedIds,
|
|
769
|
+
addShape,
|
|
831
770
|
})
|
|
771
|
+
if (nestResult.cancelled) {
|
|
772
|
+
// 嵌套校验失败,已经在 graphDragService 里回滚了位置/父级,这里只需要收尾
|
|
773
|
+
cleanupAfterDrag()
|
|
774
|
+
return
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
ownerPayload = nestResult.ownerPayload
|
|
778
|
+
clonedIds = nestResult.clonedIds
|
|
779
|
+
}
|
|
780
|
+
// 如果真的发生了“换父”,整理一下 zIndex(保持绘制顺序)
|
|
781
|
+
if (didReparent) {
|
|
782
|
+
normalizeZOrder(
|
|
783
|
+
shapes.value,
|
|
784
|
+
currentDiagramId.value,
|
|
785
|
+
updateShape,
|
|
786
|
+
1,
|
|
787
|
+
1,
|
|
788
|
+
)
|
|
789
|
+
}
|
|
790
|
+
// —— Pin 终极兜底:不允许在本次拖拽后变成“无父” ——
|
|
791
|
+
for (const id of changedIds) {
|
|
792
|
+
const node = shapeMap.value.get(id) ?? null
|
|
793
|
+
if (node?.shapeType === 'pin') {
|
|
794
|
+
const prevPid = prevParentById[id]
|
|
795
|
+
const nowPid = node.parenShapeId ?? null
|
|
796
|
+
if ((!nowPid || nowPid === '') && prevPid) {
|
|
797
|
+
updateShape(id, { parenShapeId: prevPid })
|
|
798
|
+
}
|
|
799
|
+
}
|
|
832
800
|
}
|
|
833
|
-
}
|
|
834
|
-
// 收集受影响的所有 shape(自身 + 父 + 子树 + 祖先)
|
|
835
|
-
const affectedIds = collectAffectedShapeIds(shapes.value, changedIds, clonedIds)
|
|
836
|
-
//组装 payloads(深拷贝),给更新接口用
|
|
837
|
-
const payloads = buildDragEndPayloads(affectedIds, shapes.value)
|
|
838
|
-
// 创建嵌套完成后的回调:成功后按子扩父 + 发 shape-size-update
|
|
839
|
-
const onNestDone = createOnNestDoneCallback({
|
|
840
|
-
shapesRef: shapes,
|
|
841
|
-
ownerPayload,
|
|
842
|
-
updateShape,
|
|
843
|
-
})
|
|
844
|
-
// 先同步调整画布大小,确保获取到最新的画布数据
|
|
845
|
-
adjustCanvasToFitAllShapes()
|
|
846
801
|
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
802
|
+
// 更新相关 edge 的 waypoints
|
|
803
|
+
await EdgeUtils.updateRelatedEdgesAsync(shapes.value, changedIds, (shape) => {
|
|
804
|
+
updateShape(shape.id, shape)
|
|
805
|
+
}, edgesByNodeId.value, shapeMap.value)
|
|
806
|
+
//对“本次直接拖动的隔间”做一次自动扩容检查
|
|
807
|
+
autoExpandMovedCompartmentsAfterDrag(shapes.value, changedIds, updateShape)
|
|
808
|
+
// 把 clone 也并入“需要同步 comparents 的变更集合”
|
|
809
|
+
const allReparentIds = [...changedIds, ...clonedIds]
|
|
810
|
+
// prevParentById 要补齐 clone 的“拖动前父”,因为 clone 之前不存在
|
|
811
|
+
const prevMapForComparents = { ...prevParentById }
|
|
812
|
+
for (const cid of clonedIds) {
|
|
813
|
+
// clone 之前不存在 => 认为 beforePid = null / ''
|
|
814
|
+
prevMapForComparents[cid] = null
|
|
815
|
+
}
|
|
816
|
+
// 处理comparents字段
|
|
817
|
+
syncShowComparentsByReparent(
|
|
818
|
+
shapes.value,
|
|
819
|
+
allReparentIds,
|
|
820
|
+
prevMapForComparents,
|
|
821
|
+
(id, u) => updateShapeRaw(id, u)
|
|
822
|
+
)
|
|
823
|
+
// 在生成 payloads 之前,把父扩容先做掉
|
|
824
|
+
const shapeId = ownerPayload?.shapeId
|
|
825
|
+
if (shapeId != null) {
|
|
826
|
+
const child = shapeMap.value.get(shapeId) ?? null
|
|
827
|
+
if (child) {
|
|
828
|
+
expandParentByChild({
|
|
829
|
+
shapes: shapes.value,
|
|
830
|
+
child,
|
|
831
|
+
updateShape,
|
|
832
|
+
})
|
|
857
833
|
}
|
|
858
834
|
}
|
|
835
|
+
// 收集受影响的所有 shape(自身 + 父 + 子树 + 祖先)
|
|
836
|
+
const affectedIds = collectAffectedShapeIds(shapes.value, changedIds, clonedIds)
|
|
837
|
+
//组装 payloads(深拷贝),给更新接口用
|
|
838
|
+
const payloads = buildDragEndPayloads(affectedIds, shapes.value)
|
|
839
|
+
// 创建嵌套完成后的回调:成功后按子扩父 + 发 shape-size-update
|
|
840
|
+
const onNestDone = createOnNestDoneCallback({
|
|
841
|
+
shapesRef: shapes,
|
|
842
|
+
ownerPayload,
|
|
843
|
+
updateShape,
|
|
844
|
+
})
|
|
845
|
+
// 先同步调整画布大小,确保获取到最新的画布数据
|
|
846
|
+
adjustCanvasToFitAllShapes()
|
|
847
|
+
|
|
848
|
+
// 检查画布宽高是否有变化
|
|
849
|
+
if (dragBaseCanvasSize.value) {
|
|
850
|
+
const currentDiagram = shapes.value.find(s => s.shapeType === 'diagram')
|
|
851
|
+
if (currentDiagram) {
|
|
852
|
+
const currentWidth = currentDiagram.bounds.width
|
|
853
|
+
const currentHeight = currentDiagram.bounds.height
|
|
854
|
+
const { width: baseWidth, height: baseHeight } = dragBaseCanvasSize.value
|
|
855
|
+
if (currentWidth !== baseWidth || currentHeight !== baseHeight) {
|
|
856
|
+
const diagramPayload = _.cloneDeep(currentDiagram)
|
|
857
|
+
payloads.push(diagramPayload)
|
|
858
|
+
}
|
|
859
|
+
}
|
|
860
|
+
}
|
|
861
|
+
//对外只暴露一个事件:shape-drag-end
|
|
862
|
+
eventBus.emit('shape-drag-end', payloads, ownerPayload, onNestDone)
|
|
863
|
+
// 清理拖拽状态
|
|
864
|
+
cleanupAfterDrag()
|
|
865
|
+
} catch (e) {
|
|
866
|
+
console.error('endDragShape 执行失败:', e)
|
|
867
|
+
} finally {
|
|
868
|
+
cleanupAfterDrag()
|
|
859
869
|
}
|
|
860
|
-
//对外只暴露一个事件:shape-drag-end
|
|
861
|
-
eventBus.emit('shape-drag-end', payloads, ownerPayload, onNestDone)
|
|
862
|
-
// 清理拖拽状态
|
|
863
|
-
cleanupAfterDrag()
|
|
864
870
|
}
|
|
865
871
|
// 处理缩放结束后的事件发射
|
|
866
872
|
const endResizeShape = async (id: string) => {
|