-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (123 loc) · 4.01 KB
/
index.html
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="icon"
type="image/svg+xml"
href="https://react.dev/favicon.ico"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Designer by Ticketplushq</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
<!--Ejemplo de useo en html simple-->
<!--
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ejemplo de React Designer</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
</head>
<body>
<div id="root"></div>
<div id="ZPLDesigner" class="col s12 m12">
<div id="canvas-container"></div>
</div>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="/lib/index.umd.js"></script>
<script>
const ReactDesigner = window['@ticketplushq/react-designer']
const App = () => {
const [backgroundImage, setBackgroundImage] = React.useState(
''
)
const [imageDimensions, setImageDimensions] = React.useState({
width: 400,
height: 400,
})
const [state, setState] = React.useState([])
const handleActive = (index, checked) => {
setState((state) => {
const newState = [...state]
const element = newState[index]
newState[index] = { ...element, active: checked }
return newState
})
}
const handleUpdate = (updateState, action) => {
const isEmpetyState = state?.length === 0
if (isEmpetyState || action?.remove || action?.arrange)
return setState([...updateState])
const newState = [...state]
updateState.forEach((element) => {
const currentIndex = state.findIndex(
(e) => e?.uuid === element?.uuid
)
if (currentIndex !== -1) {
newState[currentIndex] = { ...element }
} else {
newState.push({ ...element })
}
})
setState(newState)
}
React.useEffect(() => {
if (backgroundImage) {
ReactDesigner.getImageDimensions(backgroundImage)
.then((dimensions) => {
const { width, height } = ReactDesigner.resizeDimensions(
dimensions.width,
dimensions.height
)
setImageDimensions({ width, height })
})
.catch((error) => {
console.error('Error al cargar la imagen:', error)
})
}
}, [backgroundImage])
const actives = state.filter((element) => element?.active)
return React.createElement(
'div',
null,
React.createElement(
ReactDesigner.Designer,
{
showPanel: true,
width: imageDimensions.width,
height: imageDimensions.height,
objectTypes: {
text: ReactDesigner.Text,
rect: ReactDesigner.Rect,
circle: ReactDesigner.Circle,
polygon: ReactDesigner.Path,
image: ReactDesigner.Image,
},
onUpdate: handleUpdate,
objects: actives,
backgroundSize: 'contain',
backgroundImage: backgroundImage
? `url(${backgroundImage})`
: null,
},
null
)
)
}
const container = document.getElementById('ZPLDesigner')
const root = ReactDOM.createRoot(container)
root.render(React.createElement(App))
</script>
</body>
</html> -->