react-konva-anchors/PositionAnchor.js at master · fxdave/react-konva-anchors · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import React from 'react'
import Anchor from './Anchor'

class PositionAnchor extends Anchor {

    constructor(props) {
        super(props)
        this.update = () => {
            if (this.props.reference() && this.props.element()) {


                let p = {
                    x: this.props.element().x(),
                    y: this.props.element().y()
                }

                let newPos = this.newPos()

                if (Math.round(newPos.x) !== Math.round(p.x) || Math.round(newPos.y) !== Math.round(p.y)) {
                    this.props.change(newPos.x, newPos.y)
                }
            }

        }
    }

    newPos() {
        let referenceRect = this.props.reference().getClientRect()
        let elementRect = this.props.element().getClientRect()

        // reference
        let R = {
            p: { x: this.props.reference().x(), y: this.props.reference().y() }, //pos
            o: { x: 0, y: 0 }, //originalOrigin
            d: { x: 0, y: 0 }, //desiredOrigin
            s: {
                x: referenceRect.width,
                y: referenceRect.height
            }, //size
        }

        if (this.props.referenceOrigin !== undefined)
            R.o = this.props.referenceOrigin
        if (this.props.referenceDesiredOrigin !== undefined)
            R.d = this.props.referenceDesiredOrigin


        //element
        let E = {
            p: { x: this.props.element().x(), y: this.props.element().y() }, //pos
            o: { x: 0, y: 0 }, //originalOrigin
            d: { x: 0, y: 0 }, //desiredOrigin
            s: {
                x: elementRect.width,
                y: elementRect.height
            }, //size
        }

        if (this.props.elementOrigin !== undefined)
            E.o = this.props.elementOrigin
        if (this.props.elementDesiredOrigin !== undefined)
            E.d = this.props.elementDesiredOrigin

        //shift
        let S = { x: 0, y: 0 }

        if (this.props.shift !== undefined)
            S = this.props.shift

        let res
        res = this.sub(R.p, this.mul(R.o, R.s))
        res = this.add(res, this.mul(R.d, R.s))
        res = this.add(res, this.mul(E.o, E.s))
        res = this.sub(res, this.mul(E.d, E.s))
        res = this.add(res, S)

        return res
    }


    add(A, B) {
        return {
            x: A.x + B.x,
            y: A.y + B.y
        }
    }


    sub(A, B) {
        return {
            x: A.x - B.x,
            y: A.y - B.y
        }
    }

    mul(A, B) {
        return {
            x: A.x * B.x,
            y: A.y * B.y
        }
    }
}

export default PositionAnchor