|
|
@@ -219,17 +219,25 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
mounted: function() {
|
|
|
+ this._destroyed = false
|
|
|
var self = this
|
|
|
- this.dpr = uni.getSystemInfoSync().pixelRatio || 1
|
|
|
-
|
|
|
- this.$nextTick(function() {
|
|
|
+ try {
|
|
|
+ this.dpr = uni.getSystemInfoSync().pixelRatio || 1
|
|
|
+ } catch (e) {
|
|
|
+ this.dpr = 1
|
|
|
+ }
|
|
|
+ setTimeout(function() {
|
|
|
+ if (self._destroyed) return
|
|
|
self.updateCanvasSize()
|
|
|
- self.$nextTick(function() {
|
|
|
- self.initSimulation()
|
|
|
- })
|
|
|
- })
|
|
|
+ setTimeout(function() {
|
|
|
+ if (!self._destroyed) {
|
|
|
+ self.initSimulation()
|
|
|
+ }
|
|
|
+ }, 80)
|
|
|
+ }, 40)
|
|
|
},
|
|
|
beforeDestroy: function() {
|
|
|
+ this._destroyed = true
|
|
|
this.stopSimulation()
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -281,10 +289,13 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- simulationTick: function() {
|
|
|
- if (!this.isSimulating) return
|
|
|
-
|
|
|
- var self = this
|
|
|
+ simulationTick: function() {
|
|
|
+ if (!this.isSimulating) return
|
|
|
+ if (this._destroyed) {
|
|
|
+ this.isSimulating = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var self = this
|
|
|
var nodes = this.nodeData
|
|
|
var edges = this.edges
|
|
|
var p = this.physics
|
|
|
@@ -500,14 +511,16 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- // 降级渲染 (CanvasContext)
|
|
|
- renderLegacy: function() {
|
|
|
+ // WeChat mini-program compatible fallback renderer.
|
|
|
+ // Note: uni-app legacy canvas uses setFontSize(size), not setFont().
|
|
|
+ renderLegacy: function() {
|
|
|
+ if (this._destroyed) return
|
|
|
+ try {
|
|
|
var ctx = uni.createCanvasContext('forceGraphCanvas', this)
|
|
|
var self = this
|
|
|
|
|
|
ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
|
|
|
|
|
|
- // 边
|
|
|
var edges = this.edges
|
|
|
for (var i = 0; i < edges.length; i++) {
|
|
|
var edge = edges[i]
|
|
|
@@ -522,7 +535,6 @@ export default {
|
|
|
ctx.stroke()
|
|
|
}
|
|
|
|
|
|
- // 节点
|
|
|
var nodes = this.nodeData
|
|
|
for (var j = 0; j < nodes.length; j++) {
|
|
|
var node = nodes[j]
|
|
|
@@ -542,18 +554,21 @@ export default {
|
|
|
}
|
|
|
|
|
|
ctx.setFillStyle(node.isSelf ? this.themeColor : '#4A5568')
|
|
|
- ctx.font = 'bold ' + (r * 0.9) + 'px sans-serif'
|
|
|
+ ctx.setFontSize(Math.max(10, Math.round(r * 0.9)))
|
|
|
ctx.setTextAlign('center')
|
|
|
ctx.setTextBaseline('middle')
|
|
|
ctx.fillText(node.displayName, node.x, node.y)
|
|
|
|
|
|
ctx.setFillStyle(node.isSelf ? this.themeColor : '#94A3B8')
|
|
|
- ctx.font = (r * 0.4) + 'px sans-serif'
|
|
|
- ctx.fillText(node.nickname.substring(0, 3), node.x, node.y + r + 10)
|
|
|
+ ctx.setFontSize(Math.max(9, Math.round(r * 0.4)))
|
|
|
+ ctx.fillText((node.nickname || '').substring(0, 3), node.x, node.y + r + 10)
|
|
|
}
|
|
|
|
|
|
ctx.draw()
|
|
|
- },
|
|
|
+ } catch (err) {
|
|
|
+ // Legacy canvas fallback must never crash page initialization.
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
// ===== 交互 =====
|
|
|
|