@flozy/editor 2.1.4 → 2.1.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. package/dist/Editor/CommonEditor.js +5 -8
  2. package/dist/Editor/Elements/AppHeader/AppHeader.js +0 -2
  3. package/dist/Editor/Elements/Carousel/Carousel.js +2 -2
  4. package/dist/Editor/Elements/Embed/Frames/DarkFrame.js +30 -9
  5. package/dist/Editor/Elements/Embed/Frames/ImageFrame.js +141 -0
  6. package/dist/Editor/Elements/Embed/Frames/InstaFrame.js +35 -10
  7. package/dist/Editor/Elements/Embed/Frames/InstaFrameDark.js +34 -10
  8. package/dist/Editor/Elements/Embed/Frames/LiteFrame.js +33 -9
  9. package/dist/Editor/Elements/Embed/Frames/RoundedDark.js +33 -9
  10. package/dist/Editor/Elements/Embed/Frames/RoundedLight.js +33 -9
  11. package/dist/Editor/Elements/Embed/Frames/RoundedLightB2.js +33 -9
  12. package/dist/Editor/Elements/Embed/Frames/Slider.js +40 -0
  13. package/dist/Editor/Elements/Embed/Image.js +15 -6
  14. package/dist/Editor/Elements/EmbedScript/Code.js +41 -0
  15. package/dist/Editor/Elements/EmbedScript/EmbedScript.js +65 -0
  16. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -1
  17. package/dist/Editor/Elements/List/CheckList.js +43 -36
  18. package/dist/Editor/Styles/EditorStyles.js +4 -2
  19. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -4
  20. package/dist/Editor/Toolbar/PopupTool/AddElements.js +1 -1
  21. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +1 -0
  22. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +23 -10
  23. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +21 -6
  24. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +5 -3
  25. package/dist/Editor/Toolbar/PopupTool/index.js +14 -14
  26. package/dist/Editor/Toolbar/Toolbar.js +9 -0
  27. package/dist/Editor/Toolbar/toolbarGroups.js +9 -1
  28. package/dist/Editor/common/Icon.js +12 -3
  29. package/dist/Editor/common/Shorthands/elements.js +0 -1
  30. package/dist/Editor/common/iconslist.js +72 -0
  31. package/dist/Editor/hooks/useDragDom.js +66 -0
  32. package/dist/Editor/hooks/useMouseMove.js +4 -1
  33. package/dist/Editor/utils/SlateUtilityFunctions.js +5 -5
  34. package/dist/Editor/utils/customHooks/useResize.js +2 -2
  35. package/dist/Editor/utils/embedScript.js +20 -0
  36. package/dist/Editor/utils/events.js +67 -14
  37. package/dist/Editor/utils/helper.js +8 -1
  38. package/package.json +1 -1
@@ -13,7 +13,7 @@ import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } from ".
13
13
  import withCommon from "./hooks/withCommon";
14
14
  import DialogWrapper from "./DialogWrapper";
15
15
  import { serializeToText } from "./utils/serializeToText";
16
- import { focusOnFirstParagraph, getPageSettings } from "./utils/pageSettings";
16
+ import { getPageSettings } from "./utils/pageSettings";
17
17
  import { getThumbnailImage, invertColor } from "./helper";
18
18
  import PopupTool from "./Toolbar/PopupTool";
19
19
  import "./font.css";
@@ -138,12 +138,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
138
138
  placeHolderColor: invertColor(pageColor || "#FFF"),
139
139
  theme
140
140
  });
141
- const isListItem = useElement(editor, ["list-item", "check-list-item", "accordion-summary"]);
142
141
  useEffect(() => {
143
142
  setValue(draftToSlate({
144
143
  data: content
145
144
  }));
146
- focusOnFirstParagraph(editor);
147
145
  }, [id, content]);
148
146
  useEffect(() => {
149
147
  if (editorWrapper && editorWrapper?.current && JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
@@ -336,7 +334,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
336
334
  editor
337
335
  });
338
336
  } else if (event.key === "Enter") {
339
- enterEvent(event, editor, isListItem);
337
+ enterEvent(event, editor);
340
338
  }
341
339
  }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
342
340
  const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
@@ -369,10 +367,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
369
367
  if (readOnly) {
370
368
  return true;
371
369
  }
372
-
373
- // if (size?.device === "xs" && isTextSelected) {
374
- // return true;
375
- // }
370
+ if (size?.device === "xs" && isTextSelected) {
371
+ return true;
372
+ }
376
373
  }, [readOnly, isTextSelected]);
377
374
  return /*#__PURE__*/_jsx(EditorProvider, {
378
375
  theme: theme,
@@ -15,9 +15,7 @@ import MenuIcon from "@mui/icons-material/Menu";
15
15
  import Toolbar from "@mui/material/Toolbar";
16
16
  import Typography from "@mui/material/Typography";
17
17
  import Button from "@mui/material/Button";
18
- import { Tooltip } from "@mui/material";
19
18
  import AppHeaderPopup from "./AppHeaderPopup";
20
- import { GridSettingsIcon } from "../../common/iconslist";
21
19
  import { getTRBLBreakPoints } from "../../helper/theme";
22
20
  import { jsx as _jsx } from "react/jsx-runtime";
23
21
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect, useState } from "react";
2
- import { Transforms, Editor } from "slate";
2
+ import { Transforms } from "slate";
3
3
  import { ReactEditor, useSlateStatic } from "slate-react";
4
4
  import Slider from "react-slick";
5
5
  import "./slick-theme.min.css";
@@ -55,7 +55,7 @@ const Carousel = props => {
55
55
  useEffect(() => {
56
56
  if (!edit) {
57
57
  ReactEditor.focus(editor);
58
- Transforms.select(editor, Editor.end(editor, []));
58
+ Transforms.select(editor, ReactEditor.findPath(editor, element));
59
59
  }
60
60
  }, [edit]);
61
61
  const onAddSlide = () => {
@@ -1,17 +1,33 @@
1
+ import React, { forwardRef } from "react";
1
2
  import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import { jsxs as _jsxs } from "react/jsx-runtime";
3
- const DarkFrame = ({
4
- href,
5
- id
6
- }) => {
4
+ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
5
+ const {
6
+ href,
7
+ id,
8
+ imagePos,
9
+ handleClick,
10
+ imageRef
11
+ } = props;
12
+ const {
13
+ calX,
14
+ calY,
15
+ scale
16
+ } = imagePos || {
17
+ calX: 0,
18
+ calY: 0,
19
+ scale: 100
20
+ };
7
21
  return /*#__PURE__*/_jsxs("svg", {
8
22
  xmlns: "http://www.w3.org/2000/svg",
9
23
  width: "330",
10
24
  height: "557",
11
25
  viewBox: "0 0 330 557",
12
26
  fill: "none",
27
+ onClick: handleClick,
13
28
  children: [/*#__PURE__*/_jsx("g", {
14
29
  filter: "url(#filter0_d_14731_299242)",
30
+ ref: ref,
15
31
  children: /*#__PURE__*/_jsx("rect", {
16
32
  x: "7.5",
17
33
  y: "7.5",
@@ -21,7 +37,11 @@ const DarkFrame = ({
21
37
  stroke: "#1E1E1E",
22
38
  strokeWidth: "15",
23
39
  shapeRendering: "crispEdges",
24
- fill: `url(#imageSource_${id})`
40
+ fill: `url(#imageSource_${id})`,
41
+ ref: imageRef,
42
+ style: {
43
+ cursor: "move"
44
+ }
25
45
  })
26
46
  }), /*#__PURE__*/_jsxs("defs", {
27
47
  children: [/*#__PURE__*/_jsx("pattern", {
@@ -30,9 +50,9 @@ const DarkFrame = ({
30
50
  width: "305",
31
51
  height: "532",
32
52
  children: /*#__PURE__*/_jsx("image", {
33
- x: "0",
34
- y: "0",
35
- height: "100%",
53
+ x: calX,
54
+ y: calY,
55
+ height: `${scale || 100}%`,
36
56
  href: href
37
57
  })
38
58
  }), /*#__PURE__*/_jsxs("filter", {
@@ -73,5 +93,6 @@ const DarkFrame = ({
73
93
  })]
74
94
  })]
75
95
  });
76
- };
96
+ });
97
+ DarkFrame.displayName = "DarkFrame";
77
98
  export default DarkFrame;
@@ -0,0 +1,141 @@
1
+ import { useEffect, useRef, useState } from "react";
2
+ import useDragDom from "../../../hooks/useDragDom";
3
+ import { Button, IconButton, Popper } from "@mui/material";
4
+ import Box from "@mui/material/Box";
5
+ import ContinuousSlider from "./Slider";
6
+ import frames from ".";
7
+ import { useEditorContext } from "../../../hooks/useMouseMove";
8
+ import { CloseIcon } from "../../../common/iconslist";
9
+ import { jsx as _jsx } from "react/jsx-runtime";
10
+ import { jsxs as _jsxs } from "react/jsx-runtime";
11
+ import { Fragment as _Fragment } from "react/jsx-runtime";
12
+ const ImageFrame = props => {
13
+ const {
14
+ frame,
15
+ id,
16
+ framePos,
17
+ onChange
18
+ } = props;
19
+ const svgRef = useRef();
20
+ const [dom, setDOM] = useState(null);
21
+ const [anchorEl, setAnchorEl] = useState(null);
22
+ const imageRef = useRef(null);
23
+ const [event, delta, clear] = useDragDom({
24
+ refDom: imageRef?.current
25
+ });
26
+ const {
27
+ x,
28
+ y
29
+ } = delta || {
30
+ x: 0,
31
+ y: 0
32
+ };
33
+ const {
34
+ x: lx,
35
+ y: ly,
36
+ scale
37
+ } = framePos || {
38
+ x: 0,
39
+ y: 0,
40
+ scale: 100
41
+ };
42
+ const calX = lx + x;
43
+ const calY = ly + y;
44
+ const SVGFrame = frame ? frames[frame] : null;
45
+ const {
46
+ selectedPath,
47
+ setSelectedPath
48
+ } = useEditorContext();
49
+ const open = selectedPath === id && Boolean(anchorEl);
50
+ useEffect(() => {
51
+ if (imageRef?.current) {
52
+ setDOM(dom);
53
+ }
54
+ }, [imageRef]);
55
+ useEffect(() => {
56
+ if (event === "end") {
57
+ onChange({
58
+ framePos: {
59
+ x: calX,
60
+ y: calY,
61
+ scale
62
+ }
63
+ });
64
+ clear();
65
+ }
66
+ }, [event]);
67
+ const handleClick = () => {
68
+ setSelectedPath(id);
69
+ setAnchorEl(svgRef?.current);
70
+ };
71
+ const onClose = () => {
72
+ setAnchorEl(null);
73
+ };
74
+ const onScaleChange = newVal => {
75
+ onChange({
76
+ framePos: {
77
+ x: calX,
78
+ y: calY,
79
+ scale: newVal
80
+ }
81
+ });
82
+ };
83
+ const onImageRef = iRef => {
84
+ console.log(iRef);
85
+ // setImageRef(iRef);
86
+ };
87
+
88
+ const handleClose = () => {
89
+ setAnchorEl(null);
90
+ setSelectedPath(null);
91
+ };
92
+ return /*#__PURE__*/_jsxs(_Fragment, {
93
+ children: [/*#__PURE__*/_jsx(SVGFrame, {
94
+ ref: svgRef,
95
+ ...props,
96
+ onImageRef: onImageRef,
97
+ handleClick: handleClick,
98
+ imagePos: {
99
+ calX,
100
+ calY,
101
+ scale
102
+ },
103
+ imageRef: imageRef
104
+ }), /*#__PURE__*/_jsx(Popper, {
105
+ id: id,
106
+ open: open,
107
+ anchorEl: anchorEl,
108
+ onClose: onClose,
109
+ sx: {
110
+ zIndex: 100
111
+ },
112
+ placement: "top",
113
+ children: /*#__PURE__*/_jsxs(Box, {
114
+ sx: {
115
+ width: 200,
116
+ padding: "0px 16px",
117
+ boxShadow: "5px 5px 5px 1px rgb(0,0,0,0.07)",
118
+ border: "1px solid rgba(0,0,0,0.07)",
119
+ borderRadius: "12px",
120
+ backgroundColor: "#FFF",
121
+ marginBottom: "8px",
122
+ position: "relative",
123
+ paddingRight: "48px"
124
+ },
125
+ children: [/*#__PURE__*/_jsx(ContinuousSlider, {
126
+ val: scale,
127
+ onChange: onScaleChange
128
+ }), /*#__PURE__*/_jsx(IconButton, {
129
+ onClick: handleClose,
130
+ sx: {
131
+ position: "absolute",
132
+ right: 0,
133
+ top: "-2px"
134
+ },
135
+ children: /*#__PURE__*/_jsx(CloseIcon, {})
136
+ })]
137
+ })
138
+ })]
139
+ });
140
+ };
141
+ export default ImageFrame;
@@ -1,15 +1,34 @@
1
+ import React, { forwardRef } from "react";
1
2
  import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import { jsxs as _jsxs } from "react/jsx-runtime";
3
- const InstaFrame = ({
4
- href,
5
- id
6
- }) => {
4
+ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
5
+ const {
6
+ href,
7
+ id,
8
+ imagePos,
9
+ handleClick,
10
+ imageRef
11
+ } = props;
12
+ const {
13
+ calX,
14
+ calY,
15
+ scale
16
+ } = imagePos || {
17
+ calX: 0,
18
+ calY: 0,
19
+ scale: 100
20
+ };
7
21
  return /*#__PURE__*/_jsxs("svg", {
8
22
  xmlns: "http://www.w3.org/2000/svg",
9
23
  width: "366",
10
24
  height: "489",
11
25
  viewBox: "0 0 366 489",
12
26
  fill: "none",
27
+ "data-path": id,
28
+ style: {
29
+ userSelect: "none"
30
+ },
31
+ onClick: handleClick,
13
32
  children: [/*#__PURE__*/_jsx("rect", {
14
33
  x: "2.5",
15
34
  y: "2.5",
@@ -18,7 +37,8 @@ const InstaFrame = ({
18
37
  rx: "17.5",
19
38
  fill: "white",
20
39
  stroke: "#D5D5D5",
21
- strokeWidth: "5"
40
+ strokeWidth: "5",
41
+ ref: ref
22
42
  }), /*#__PURE__*/_jsx("rect", {
23
43
  x: "27.5",
24
44
  y: "28.5",
@@ -75,7 +95,11 @@ const InstaFrame = ({
75
95
  rx: "17.5",
76
96
  stroke: "#D5D5D5",
77
97
  strokeWidth: "5",
78
- fill: `url(#imageSource_${id})`
98
+ fill: `url(#imageSource_${id})`,
99
+ style: {
100
+ cursor: "move"
101
+ },
102
+ ref: imageRef
79
103
  }), /*#__PURE__*/_jsx("defs", {
80
104
  children: /*#__PURE__*/_jsx("pattern", {
81
105
  id: `imageSource_${id}`,
@@ -83,13 +107,14 @@ const InstaFrame = ({
83
107
  width: "338.5",
84
108
  height: "397.5",
85
109
  children: /*#__PURE__*/_jsx("image", {
86
- x: "0",
87
- y: "0",
88
- height: "100%",
110
+ x: calX,
111
+ y: calY,
112
+ height: `${scale || 100}%`,
89
113
  href: href
90
114
  })
91
115
  })
92
116
  })]
93
117
  });
94
- };
118
+ });
119
+ InstaFrame.displayName = "InstaFrame";
95
120
  export default InstaFrame;
@@ -1,15 +1,33 @@
1
+ import React, { forwardRef } from "react";
1
2
  import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import { jsxs as _jsxs } from "react/jsx-runtime";
3
- const InstaFrame = ({
4
- href,
5
- id
6
- }) => {
4
+ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
5
+ const {
6
+ href,
7
+ id,
8
+ imagePos,
9
+ handleClick,
10
+ imageRef
11
+ } = props;
12
+ const {
13
+ calX,
14
+ calY,
15
+ scale
16
+ } = imagePos || {
17
+ calX: 0,
18
+ calY: 0,
19
+ scale: 100
20
+ };
7
21
  return /*#__PURE__*/_jsxs("svg", {
8
22
  xmlns: "http://www.w3.org/2000/svg",
9
23
  width: "366",
10
24
  height: "489",
11
25
  viewBox: "0 0 366 489",
12
26
  fill: "none",
27
+ style: {
28
+ userSelect: "none"
29
+ },
30
+ onClick: handleClick,
13
31
  children: [/*#__PURE__*/_jsx("rect", {
14
32
  x: "2.5",
15
33
  y: "2.5",
@@ -18,7 +36,8 @@ const InstaFrame = ({
18
36
  rx: "17.5",
19
37
  fill: "#12141d",
20
38
  stroke: "#D5D5D5",
21
- strokeWidth: "5"
39
+ strokeWidth: "5",
40
+ ref: ref
22
41
  }), /*#__PURE__*/_jsx("rect", {
23
42
  x: "27.5",
24
43
  y: "28.5",
@@ -75,7 +94,11 @@ const InstaFrame = ({
75
94
  rx: "17.5",
76
95
  stroke: "#D5D5D5",
77
96
  strokeWidth: "5",
78
- fill: `url(#imageSource_${id})`
97
+ fill: `url(#imageSource_${id})`,
98
+ ref: imageRef,
99
+ style: {
100
+ cursor: "move"
101
+ }
79
102
  }), /*#__PURE__*/_jsx("defs", {
80
103
  children: /*#__PURE__*/_jsx("pattern", {
81
104
  id: `imageSource_${id}`,
@@ -83,13 +106,14 @@ const InstaFrame = ({
83
106
  width: "338.5",
84
107
  height: "397.5",
85
108
  children: /*#__PURE__*/_jsx("image", {
86
- x: "0",
87
- y: "0",
88
- height: "100%",
109
+ x: calX,
110
+ y: calY,
111
+ height: `${scale || 100}%`,
89
112
  href: href
90
113
  })
91
114
  })
92
115
  })]
93
116
  });
94
- };
117
+ });
118
+ InstaFrame.displayName = "InstaFrame";
95
119
  export default InstaFrame;
@@ -1,17 +1,36 @@
1
+ import React, { forwardRef } from "react";
1
2
  import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import { jsxs as _jsxs } from "react/jsx-runtime";
3
- const DarkFrame = ({
4
- href,
5
- id
6
- }) => {
4
+ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
5
+ const {
6
+ href,
7
+ id,
8
+ imagePos,
9
+ handleClick,
10
+ imageRef
11
+ } = props;
12
+ const {
13
+ calX,
14
+ calY,
15
+ scale
16
+ } = imagePos || {
17
+ calX: 0,
18
+ calY: 0,
19
+ scale: 100
20
+ };
7
21
  return /*#__PURE__*/_jsxs("svg", {
8
22
  xmlns: "http://www.w3.org/2000/svg",
9
23
  width: "314",
10
24
  height: "541",
11
25
  viewBox: "0 0 314 541",
12
26
  fill: "none",
27
+ style: {
28
+ userSelect: "none"
29
+ },
30
+ onClick: handleClick,
13
31
  children: [/*#__PURE__*/_jsx("g", {
14
32
  filter: "url(#filter0_d_15055_295724)",
33
+ ref: ref,
15
34
  children: /*#__PURE__*/_jsx("rect", {
16
35
  x: "7",
17
36
  y: "7",
@@ -21,7 +40,11 @@ const DarkFrame = ({
21
40
  stroke: "white",
22
41
  strokeWidth: "14",
23
42
  shapeRendering: "crispEdges",
24
- fill: `url(#imageSource_${id})`
43
+ fill: `url(#imageSource_${id})`,
44
+ ref: imageRef,
45
+ style: {
46
+ cursor: "move"
47
+ }
25
48
  })
26
49
  }), /*#__PURE__*/_jsxs("defs", {
27
50
  children: [/*#__PURE__*/_jsx("pattern", {
@@ -30,9 +53,9 @@ const DarkFrame = ({
30
53
  width: "290",
31
54
  height: "517",
32
55
  children: /*#__PURE__*/_jsx("image", {
33
- x: "0",
34
- y: "0",
35
- height: "100%",
56
+ x: calX,
57
+ y: calY,
58
+ height: `${scale || 100}%`,
36
59
  href: href
37
60
  })
38
61
  }), /*#__PURE__*/_jsxs("filter", {
@@ -73,5 +96,6 @@ const DarkFrame = ({
73
96
  })]
74
97
  })]
75
98
  });
76
- };
99
+ });
100
+ DarkFrame.displayName = "DarkFrame";
77
101
  export default DarkFrame;
@@ -1,17 +1,36 @@
1
+ import React, { forwardRef } from "react";
1
2
  import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import { jsxs as _jsxs } from "react/jsx-runtime";
3
- const RoundedDark = ({
4
- href,
5
- id
6
- }) => {
4
+ const RoundedDark = /*#__PURE__*/forwardRef((props, ref) => {
5
+ const {
6
+ href,
7
+ id,
8
+ imagePos,
9
+ handleClick,
10
+ imageRef
11
+ } = props;
12
+ const {
13
+ calX,
14
+ calY,
15
+ scale
16
+ } = imagePos || {
17
+ calX: 0,
18
+ calY: 0,
19
+ scale: 100
20
+ };
7
21
  return /*#__PURE__*/_jsxs("svg", {
8
22
  xmlns: "http://www.w3.org/2000/svg",
9
23
  width: "105",
10
24
  height: "105",
11
25
  viewBox: "0 0 105 105",
12
26
  fill: "none",
27
+ style: {
28
+ userSelect: "none"
29
+ },
30
+ onClick: handleClick,
13
31
  children: [/*#__PURE__*/_jsx("g", {
14
32
  filter: "url(#filter0_d_14731_299244)",
33
+ ref: ref,
15
34
  children: /*#__PURE__*/_jsx("circle", {
16
35
  cx: "50",
17
36
  cy: "50",
@@ -19,7 +38,11 @@ const RoundedDark = ({
19
38
  stroke: "#1E1E1E",
20
39
  strokeWidth: "7",
21
40
  shapeRendering: "crispEdges",
22
- fill: `url(#imageSource_${id})`
41
+ fill: `url(#imageSource_${id})`,
42
+ ref: imageRef,
43
+ style: {
44
+ cursor: "move"
45
+ }
23
46
  })
24
47
  }), /*#__PURE__*/_jsxs("defs", {
25
48
  children: [/*#__PURE__*/_jsx("pattern", {
@@ -28,9 +51,9 @@ const RoundedDark = ({
28
51
  width: "100",
29
52
  height: "100",
30
53
  children: /*#__PURE__*/_jsx("image", {
31
- x: "0",
32
- y: "0",
33
- height: "100%",
54
+ x: calX,
55
+ y: calY,
56
+ height: `${scale || 100}%`,
34
57
  href: href
35
58
  })
36
59
  }), /*#__PURE__*/_jsxs("filter", {
@@ -71,5 +94,6 @@ const RoundedDark = ({
71
94
  })]
72
95
  })]
73
96
  });
74
- };
97
+ });
98
+ RoundedDark.displayName = "RoundedDark";
75
99
  export default RoundedDark;
@@ -1,22 +1,45 @@
1
+ import React, { forwardRef } from "react";
1
2
  import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import { jsxs as _jsxs } from "react/jsx-runtime";
3
- const RoundedLight = ({
4
- href,
5
- id
6
- }) => {
4
+ const RoundedLight = /*#__PURE__*/forwardRef((props, ref) => {
5
+ const {
6
+ href,
7
+ id,
8
+ imagePos,
9
+ handleClick,
10
+ imageRef
11
+ } = props;
12
+ const {
13
+ calX,
14
+ calY,
15
+ scale
16
+ } = imagePos || {
17
+ calX: 0,
18
+ calY: 0,
19
+ scale: 100
20
+ };
7
21
  return /*#__PURE__*/_jsxs("svg", {
8
22
  xmlns: "http://www.w3.org/2000/svg",
9
23
  width: "152",
10
24
  height: "152",
11
25
  viewBox: "0 0 152 152",
12
26
  fill: "none",
27
+ style: {
28
+ userSelect: "none"
29
+ },
30
+ onClick: handleClick,
31
+ ref: ref,
13
32
  children: [/*#__PURE__*/_jsx("circle", {
14
33
  cx: "76",
15
34
  cy: "76",
16
35
  r: "75",
17
36
  stroke: "white",
18
37
  strokeWidth: "2",
19
- fill: `url(#imageSource_${id})`
38
+ fill: `url(#imageSource_${id})`,
39
+ ref: imageRef,
40
+ style: {
41
+ cursor: "move"
42
+ }
20
43
  }), /*#__PURE__*/_jsx("defs", {
21
44
  children: /*#__PURE__*/_jsx("pattern", {
22
45
  id: `imageSource_${id}`,
@@ -24,13 +47,14 @@ const RoundedLight = ({
24
47
  width: "152",
25
48
  height: "152",
26
49
  children: /*#__PURE__*/_jsx("image", {
27
- x: "0",
28
- y: "0",
29
- height: "100%",
50
+ x: calX,
51
+ y: calY,
52
+ height: `${scale || 100}%`,
30
53
  href: href
31
54
  })
32
55
  })
33
56
  })]
34
57
  });
35
- };
58
+ });
59
+ RoundedLight.displayName = "RoundedLight";
36
60
  export default RoundedLight;