@flozy/editor 2.1.6 → 2.1.7
Sign up to get free protection for your applications and to get access to all the features.
@@ -1,6 +1,6 @@
|
|
1
1
|
import { useEffect, useRef, useState } from "react";
|
2
2
|
import useDragDom from "../../../hooks/useDragDom";
|
3
|
-
import {
|
3
|
+
import { IconButton, Popper } from "@mui/material";
|
4
4
|
import Box from "@mui/material/Box";
|
5
5
|
import ContinuousSlider from "./Slider";
|
6
6
|
import frames from ".";
|
@@ -14,14 +14,16 @@ const ImageFrame = props => {
|
|
14
14
|
frame,
|
15
15
|
id,
|
16
16
|
framePos,
|
17
|
-
onChange
|
17
|
+
onChange,
|
18
|
+
readOnly
|
18
19
|
} = props;
|
19
20
|
const svgRef = useRef();
|
20
21
|
const [dom, setDOM] = useState(null);
|
21
22
|
const [anchorEl, setAnchorEl] = useState(null);
|
22
23
|
const imageRef = useRef(null);
|
23
24
|
const [event, delta, clear] = useDragDom({
|
24
|
-
refDom: imageRef?.current
|
25
|
+
refDom: imageRef?.current,
|
26
|
+
readOnly
|
25
27
|
});
|
26
28
|
const {
|
27
29
|
x,
|
@@ -48,12 +50,12 @@ const ImageFrame = props => {
|
|
48
50
|
} = useEditorContext();
|
49
51
|
const open = selectedPath === id && Boolean(anchorEl);
|
50
52
|
useEffect(() => {
|
51
|
-
if (imageRef?.current) {
|
53
|
+
if (imageRef?.current && !readOnly) {
|
52
54
|
setDOM(dom);
|
53
55
|
}
|
54
56
|
}, [imageRef]);
|
55
57
|
useEffect(() => {
|
56
|
-
if (event === "end") {
|
58
|
+
if (event === "end" && !readOnly) {
|
57
59
|
onChange({
|
58
60
|
framePos: {
|
59
61
|
x: calX,
|
@@ -65,26 +67,25 @@ const ImageFrame = props => {
|
|
65
67
|
}
|
66
68
|
}, [event]);
|
67
69
|
const handleClick = () => {
|
68
|
-
|
69
|
-
|
70
|
+
if (!readOnly) {
|
71
|
+
setSelectedPath(id);
|
72
|
+
setAnchorEl(svgRef?.current);
|
73
|
+
}
|
70
74
|
};
|
71
75
|
const onClose = () => {
|
72
76
|
setAnchorEl(null);
|
73
77
|
};
|
74
78
|
const onScaleChange = newVal => {
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
console.log(iRef);
|
85
|
-
// setImageRef(iRef);
|
79
|
+
if (!readOnly) {
|
80
|
+
onChange({
|
81
|
+
framePos: {
|
82
|
+
x: calX,
|
83
|
+
y: calY,
|
84
|
+
scale: newVal
|
85
|
+
}
|
86
|
+
});
|
87
|
+
}
|
86
88
|
};
|
87
|
-
|
88
89
|
const handleClose = () => {
|
89
90
|
setAnchorEl(null);
|
90
91
|
setSelectedPath(null);
|
@@ -93,7 +94,6 @@ const ImageFrame = props => {
|
|
93
94
|
children: [/*#__PURE__*/_jsx(SVGFrame, {
|
94
95
|
ref: svgRef,
|
95
96
|
...props,
|
96
|
-
onImageRef: onImageRef,
|
97
97
|
handleClick: handleClick,
|
98
98
|
imagePos: {
|
99
99
|
calX,
|
@@ -237,7 +237,8 @@ const Image = ({
|
|
237
237
|
framePos: framePos,
|
238
238
|
href: url,
|
239
239
|
id: path.join(","),
|
240
|
-
onChange: onPosChange
|
240
|
+
onChange: onPosChange,
|
241
|
+
readOnly: readOnly
|
241
242
|
})
|
242
243
|
}) : null, selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
|
243
244
|
onPointerDown: onMouseDown,
|
@@ -5,7 +5,8 @@ const ePos = {
|
|
5
5
|
};
|
6
6
|
const useDragDom = props => {
|
7
7
|
const {
|
8
|
-
refDom
|
8
|
+
refDom,
|
9
|
+
readOnly
|
9
10
|
} = props || {};
|
10
11
|
const [event, setEvent] = useState("");
|
11
12
|
const [delta, setDelta] = useState({
|
@@ -13,10 +14,12 @@ const useDragDom = props => {
|
|
13
14
|
y: 0
|
14
15
|
});
|
15
16
|
useEffect(() => {
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
17
|
+
if (!readOnly) {
|
18
|
+
addListener();
|
19
|
+
return () => {
|
20
|
+
removeListener();
|
21
|
+
};
|
22
|
+
}
|
20
23
|
}, [refDom]);
|
21
24
|
const onMouseDown = e => {
|
22
25
|
ePos.x = e.x;
|