1import * as React from "react";
2import Moveable from "react-moveable";
3
4export default function App() {
5    return (
6        <div className="root">
7            <div className="container">
8                <div className="target target1"
9                    style={{
10                        left: "10px",
11                        top: "10px",
12                        borderRadius: "25px",
13                    }}
14                >Target1</div>
15                <div className="target target2"
16                    style={{
17                        left: "140px",
18                        top: "10px",
19                        borderRadius: "25px 23px",
20                    }}
21                >Target2</div>
22                <div className="target target3"
23                    style={{
24                        left: "10px",
25                        top: "140px",
26                        borderRadius: "25px 23px / 20px",
27                    }}
28                >Target3</div>
29                <div className="target target4"
30                    style={{
31                        left: "140px",
32                        top: "140px",
33                        borderRadius: "25px 25.5px 24.5px 24.9115px / 25.5px 25.5px 24.5px 24.5px",
34                    }}
35                >Target4</div>
36                <Moveable
37                    target={".target1"}
38                    draggable={true}
39                    roundable={true}
40                    resizable={true}
41                    isDisplayShadowRoundControls={"horizontal"}
42                    roundClickable={"control"}
43                    roundPadding={15}
44                    onRound={e => {
45                        console.log("ROUND", e.borderRadius);
46                    }}
47                    onRender={e => {
48                        e.target.style.cssText += e.cssText;
49                    }}
50                    onRenderEnd={e => {
51                        e.target.style.cssText += e.cssText;
52                    }}
53                />
54                <Moveable
55                    target={".target2"}
56                    roundable={true}
57                    roundClickable={true}
58                    onRound={e => {
59                        console.log("ROUND", e.borderRadius);
60                        e.target.style.borderRadius = e.borderRadius;
61                    }}
62                />
63                <Moveable
64                    target={".target3"}
65                    roundable={true}
66                    onRound={e => {
67                        console.log("ROUND", e.borderRadius);
68                        e.target.style.borderRadius = e.borderRadius;
69                    }}
70                />
71                <Moveable
72                    target={".target4"}
73                    roundable={true}
74                    onRound={e => {
75                        console.log("ROUND", e.borderRadius);
76                        e.target.style.borderRadius = e.borderRadius;
77                    }}
78                />
79            </div>
80        </div>
81    );
82}