优化节点旋转。

zy499 · Sep 10, 2019 · 59a93af · 59a93af
1 parent 047e34d
commit 59a93af
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 48 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,9 @@
 node_modules
 /dist
 
+# lock
+package-lock.json
+
 # local env files
 .env.local
 .env.*.local

diff --git a/src/global/lib/g6/behavior/nodeControl.js b/src/global/lib/g6/behavior/nodeControl.js
@@ -443,67 +443,76 @@ export default {
         let _t = this
         console.log('shapeControlRotate start', event)
         _t.shapeControlRotate.isMoving = true
+        // 计算旋转度数
+        let model = _t.info.node.getModel()
+        let p1 = {
+          x: model.x,
+          y: model.y
+        }
+        let p2 = {
+          x: event.x,
+          y: event.y
+        }
+        // 弧度，由于旋转把手位于图形正上方，因此需再加 Math.PI / 2
+        let radian = Math.atan2(p2.y - p1.y, p2.x - p1.x) + Math.PI / 2
+        // 角度
+        let angle = radian * (180 / Math.PI)
         if (_t.config.tooltip.shapeControl) {
-          // FIXME 需计算旋转度数
-          let model = _t.info.node.getModel()
-          let p1 = {
-            x: model.x,
-            y: model.y
-          }
-          let p2 = {
-            x: event.x,
-            y: event.y
-          }
-          // 弧度
-          let radian = Math.atan2(p2.y - p1.y, p2.x - p1.x)
-          // 角度
-          let angle = radian * (180 / Math.PI)
           _t.toolTip.create.call(_t, {
             left: model.x,
             top: model.y + model.height / 2
-          }, `${radian} - ${angle}`)
-          // 更新节点
-          let keyShape = _t.info.node.getKeyShape()
-          keyShape.resetMatrix()
-          keyShape.rotate(radian)
-          // 更新shapeControl
-          utils.shapeControl.rotate(model, _t.graph.get('group'), radian, angle)
-          _t.graph.paint()
+          }, `${angle.toFixed(2)}°`)
         }
+        // 更新节点
+        let keyShape = _t.info.node.getKeyShape()
+        keyShape.resetMatrix()
+        keyShape.rotate(radian)
+        let group = _t.graph.get('group')
+        // 更新shapeControl
+        utils.shapeControl.rotate(model, group, radian)
+        // 更新锚点
+        utils.anchor.rotate(model, group, radian)
+        _t.graph.paint()
       },
       move (event) {
         let _t = this
+        // 计算旋转度数
+        let model = _t.info.node.getModel()
+        let p1 = {
+          x: model.x,
+          y: model.y
+        }
+        let p2 = {
+          x: event.x,
+          y: event.y
+        }
+        // 弧度
+        let radian = Math.atan2(p2.y - p1.y, p2.x - p1.x) + Math.PI / 2
+        // 角度
+        let angle = radian * (180 / Math.PI)
         if (_t.config.tooltip.shapeControl) {
-          // FIXME 需计算旋转度数
-          let model = _t.info.node.getModel()
-          let p1 = {
-            x: model.x,
-            y: model.y
-          }
-          let p2 = {
-            x: event.x,
-            y: event.y
-          }
-          // 弧度
-          let radian = Math.atan2(p2.y - p1.y, p2.x - p1.x)
-          // 角度
-          let angle = radian * (180 / Math.PI)
           _t.toolTip.update.call(_t, {
             left: model.x,
             top: model.y + model.height / 2
-          }, `${radian} - ${angle}`)
-          // 更新节点
-          let keyShape = _t.info.node.getKeyShape()
-          // FIXME g中shape的rotate是角度累加的，所以更新时如果style中有rotate就重置一下变换
-          keyShape.resetMatrix()
-          keyShape.rotate(radian)
-          // 更新shapeControl
-          utils.shapeControl.rotate(model, _t.graph.get('group'), radian, angle)
-          _t.graph.paint()
+          }, `${angle.toFixed(2)}°`)
         }
+        // 更新节点
+        let keyShape = _t.info.node.getKeyShape()
+        // FIXME g中shape的rotate是角度累加的，所以更新时如果style中有rotate就重置一下变换
+        keyShape.resetMatrix()
+        keyShape.rotate(radian)
+        let group = _t.graph.get('group')
+        // 更新shapeControl
+        utils.shapeControl.rotate(model, group, radian)
+        // 更新锚点
+        utils.anchor.rotate(model, group, radian)
+        _t.graph.paint()
       },
       stop (event) {
         let _t = this
+        if (_t.config.tooltip.shapeControl) {
+          _t.toolTip.destroy.call(_t)
+        }
         _t.shapeControlRotate.isMoving = false
         _t.info = null
       }

diff --git a/src/global/lib/g6/utils/anchor/index.js b/src/global/lib/g6/utils/anchor/index.js
@@ -7,9 +7,11 @@
 import draw from './draw'
 import setState from './setState'
 import update from './update'
+import rotate from './rotate'
 
 export default {
   draw,
   setState,
-  update
+  update,
+  rotate
 }
diff --git a/src/global/lib/g6/utils/anchor/rotate.js b/src/global/lib/g6/utils/anchor/rotate.js
@@ -0,0 +1,26 @@
+/**
+ * Created by OXOYO on 2019/9/10.
+ *
+ * 锚点旋转
+ */
+
+export default function (cfg, group, radian) {
+  let { anchorPoints, id } = cfg
+  // 处理锚点
+  if (anchorPoints && anchorPoints.length) {
+    for (let i = 0, len = anchorPoints.length; i < len; i++) {
+      // 锚点背景
+      let anchorBgShape = group.findById(id + '_anchor_bg_' + i)
+      // 锚点
+      let anchorShape = group.findById(id + '_anchor_' + i)
+      if (anchorBgShape) {
+        anchorBgShape.resetMatrix()
+        anchorBgShape.rotate(radian)
+      }
+      if (anchorShape) {
+        anchorShape.resetMatrix()
+        anchorShape.rotate(radian)
+      }
+    }
+  }
+}
diff --git a/src/global/lib/g6/utils/shapeControl/rotate.js b/src/global/lib/g6/utils/shapeControl/rotate.js
@@ -4,8 +4,7 @@
  * 图形旋转
  */
 
-export default function (cfg, group, radian, angle) {
-  // TODO 处理旋转
+export default function (cfg, group, radian) {
   let { id, shapeControl } = cfg
   // 处理边框
   let shapeControlEdge = group.findById(id + '_shape_control_edge')