|
| 1 | +import { applyMove } from '@api/index' |
| 2 | +import Konva from 'konva' |
| 3 | +import { Group } from 'konva/lib/Group' |
| 4 | +import { Layer } from 'konva/lib/Layer' |
| 5 | +import { Shape, ShapeConfig } from 'konva/lib/Shape' |
| 6 | +import { Stage } from 'konva/lib/Stage' |
| 7 | +import { getDraftLayer } from '../helpers/draft' |
| 8 | +import { ShapeOrGroup } from './helper' |
| 9 | +import { select } from './select' |
| 10 | +type IAlignTarget = Stage | Shape<ShapeConfig> | Group |
| 11 | +const helpLines: Shape[] = [] |
| 12 | + |
| 13 | +export interface AlignOptions { |
| 14 | + firstNode?: ShapeOrGroup |
| 15 | + secondNode?: ShapeOrGroup |
| 16 | + lockX?: boolean |
| 17 | + lockY?: boolean |
| 18 | + alignTo?: 'wall' | 'wallCenter' | 'core' | 'coreCenter' |
| 19 | +} |
| 20 | + |
| 21 | +export const align = (layer: Layer, options = {} as AlignOptions) => { |
| 22 | + const { lockX, lockY = true } = options |
| 23 | + const stage = layer.getStage() as Stage |
| 24 | + const draftLayer = getDraftLayer(stage) |
| 25 | + draftLayer.visible(true) |
| 26 | + // clearLines() |
| 27 | + |
| 28 | + return select(layer, { useDrag: false }) |
| 29 | + .then(nodes => { |
| 30 | + const node = nodes[0] |
| 31 | + node.opacity(1) |
| 32 | + const name = node.name() |
| 33 | + node.addName('unselectable') |
| 34 | + drawHelpLine(node) |
| 35 | + return { firstNode: node, firstNodeName: name } |
| 36 | + }) |
| 37 | + .then(result => { |
| 38 | + return select(layer, { useDrag: false }).then(nodes => { |
| 39 | + const secondNode = nodes[0] |
| 40 | + const name = secondNode.name() |
| 41 | + secondNode.opacity(1) |
| 42 | + secondNode.addName('unselectable') |
| 43 | + return { ...result, secondNode, secondNodeName: name } |
| 44 | + }) |
| 45 | + }) |
| 46 | + .then(({ firstNode, firstNodeName, secondNode, secondNodeName }) => { |
| 47 | + const dest = { |
| 48 | + x: lockX ? 0 : firstNode.getClientRect().x - secondNode.getClientRect().x, |
| 49 | + y: lockY ? 0 : firstNode.getClientRect().y - secondNode.getClientRect().y, |
| 50 | + } |
| 51 | + applyMove([secondNode], dest) |
| 52 | + |
| 53 | + clearLines() |
| 54 | + draftLayer.visible(false) |
| 55 | + firstNode.name(firstNodeName) |
| 56 | + secondNode.name(secondNodeName) |
| 57 | + |
| 58 | + return dest |
| 59 | + }) |
| 60 | +} |
| 61 | + |
| 62 | +function clearLines() { |
| 63 | + while (helpLines.length) { |
| 64 | + helpLines.pop()?.destroy() |
| 65 | + } |
| 66 | +} |
| 67 | +function drawHelpLine(target: IAlignTarget) { |
| 68 | + //画辅助线 |
| 69 | + const stage = target.getStage() |
| 70 | + if (!target?.attrs || !stage) return |
| 71 | + const draftLayer = getDraftLayer(stage) |
| 72 | + const { id, x, y } = target.attrs |
| 73 | + const config = { |
| 74 | + id: 'help' + id, |
| 75 | + x: x, |
| 76 | + y: y, |
| 77 | + strokeWidth: 1, |
| 78 | + points: [] as number[], |
| 79 | + dash: [10, 10], |
| 80 | + stroke: 'rgba(0,81,255,0.5)', |
| 81 | + } |
| 82 | + if (target.width() > target.height()) { |
| 83 | + //横向 |
| 84 | + config.x = 0 |
| 85 | + config.points = [0, 3000, 0, 0] |
| 86 | + } else { |
| 87 | + //纵向 |
| 88 | + config.y = 0 |
| 89 | + config.points = [0, 0, 0, 3000] |
| 90 | + } |
| 91 | + const line: Konva.Shape = new Konva.Line(config) |
| 92 | + draftLayer.add(line) |
| 93 | + draftLayer.visible(true) |
| 94 | + helpLines.push(line) |
| 95 | +} |
0 commit comments