@flozy/editor 2.1.5 → 2.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -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;
|