diff --git a/.gitignore b/.gitignore index a0dddc6..9a1fb56 100644 --- 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 index 7cecf47..f010577 100644 --- 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 index 0cf3efc..6687230 100644 --- 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 new file mode 100644 index 0000000..1a984c4 --- /dev/null +++ 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 index 42ffc3c..59c8061 100644 --- 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')