Skip to content
This repository was archived by the owner on Jan 15, 2024. It is now read-only.

Commit 63bdb09

Browse files
leJsboureauleJsboureau
committed
fix(examples) undo/redo is not working for multiple inputs example MSIS-2926
1 parent 3a298ef commit 63bdb09

File tree

2 files changed

+34
-54
lines changed

2 files changed

+34
-54
lines changed

‎examples/v4/websocket_text_multiple_inputs.html‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,21 @@
3232
.input {
3333
z-index: 20;
3434
font-size: 36px;
35+
margin-left: 24px;
3536
margin-bottom: 24px;
36-
width: 80%;
37-
height: 300px;
37+
width: calc(100% - 48px);
38+
height: 150px;
3839
border: 1px #bfbfbf solid;
3940
border-radius: 6px;
4041
}
4142

4243
.input > svg {
4344
position: absolute;
4445
}
46+
47+
.editor {
48+
display: none;
49+
}
4550
</style>
4651

4752
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
@@ -51,21 +56,12 @@
5156
<body>
5257
<div>
5358
<nav>
54-
<div class="button-div">
55-
<button id="undo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
56-
<img src="../assets/img/undo.svg">
57-
</button>
58-
<button id="redo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
59-
<img src="../assets/img/redo.svg">
60-
</button>
61-
<div class="spacer"></div>
62-
</div>
6359
<button class="classic-btn" id="convert" disabled>Convert</button>
6460
</nav>
6561
<main id="mainContent">
6662
</main>
67-
<div id="editor" touch-action="none"></div>
68-
<div id="editor2" touch-action="none"></div>
63+
<div id="editor" class="editor" touch-action="none"></div>
64+
<div id="editor2" class="editor" touch-action="none"></div>
6965
</div>
7066
<script src="./websocket_text_multiple_inputs.js"></script>
7167
</body>

‎examples/v4/websocket_text_multiple_inputs.js‎

Lines changed: 25 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -11,31 +11,13 @@ const editorElement = document.getElementById('editor')
1111
const editorElement2 = document.getElementById('editor2')
1212
let editorElementRef = editorElement
1313

14-
const undoElement = document.getElementById('undo')
15-
const redoElement = document.getElementById('redo')
1614
const convertElement = document.getElementById('convert')
1715
const mainElement = document.getElementById('mainContent')
1816

1917
const inputs = []
2018
const inputValues = new Map()
2119

22-
for (let i = 1; i < 5; i++) {
23-
inputs[i] = document.createElement('div')
24-
inputs[i].id = `input${i}`
25-
inputs[i].setAttribute('touch-action', 'none')
26-
inputs[i].classList.add('input')
27-
inputValues.set(inputs[i].id, '')
28-
29-
const label = document.createElement('label')
30-
label.setAttribute('for', inputs[i].id)
31-
label.innerText = `Input N°${i}`
32-
33-
mainElement.appendChild(label)
34-
mainElement.appendChild(inputs[i])
35-
}
36-
3720
/** The two following functions roundFloat and extractPoint are used to get a point coordinates */
38-
3921
const floatPrecisionArray = [1, 10, 100, 1000, 10000, 100000, 1000000, 10000000, 100000000, 1000000000]
4022

4123
function roundFloat (oneFloat, requestedFloatPrecision) {
@@ -67,23 +49,11 @@ function extractPoint (event, domElement, configuration, offsetTop = 0, offsetLe
6749
function addChangedListeners (editors) {
6850
editors.forEach((editor) => {
6951
editor.addEventListener('changed', (event) => {
70-
undoElement.disabled = !event.detail.canUndo
71-
redoElement.disabled = !event.detail.canRedo
7252
convertElement.disabled = event.detail.isEmpty
7353
})
7454
})
7555
}
7656

77-
undoElement.addEventListener('click', () => {
78-
editorElementRef.editor.undo()
79-
})
80-
redoElement.addEventListener('click', () => {
81-
editorElementRef.editor.redo()
82-
})
83-
convertElement.addEventListener('click', () => {
84-
editorElementRef.editor.convert()
85-
})
86-
8757
function addIdleListeners (editors) {
8858
editors.forEach((editor) => {
8959
editor.addEventListener('idle', () => {
@@ -106,8 +76,7 @@ function addIdleListeners (editors) {
10676
})
10777
}
10878

109-
function addInputsPointerDownListener (inputId) {
110-
const input = document.getElementById(inputId)
79+
function addPointerEventListener (input) {
11180
input.addEventListener('pointerdown', (event) => {
11281
if (editorElementRef.editor.initialized) {
11382
pointerDownOnInput = true
@@ -254,11 +223,6 @@ const customGrabber = {
254223
detach
255224
}
256225

257-
editorElement.addEventListener('loaded', () => {
258-
editorElement.style.display = 'none'
259-
editorElement2.style.display = 'none'
260-
})
261-
262226
function initEditors (editors) {
263227
editors.forEach((editor) => {
264228
iink.register(editor, {
@@ -291,15 +255,35 @@ function initEditors (editors) {
291255
})
292256
}
293257

294-
initEditors([editorElement, editorElement2])
295-
296-
Array.from(inputValues.keys()).forEach((inputId) => {
297-
addInputsPointerDownListener(inputId)
258+
convertElement.addEventListener('click', () => {
259+
editorElementRef.editor.convert()
298260
})
299261

262+
initEditors([editorElement, editorElement2])
263+
300264
addIdleListeners([editorElement, editorElement2])
265+
301266
addChangedListeners([editorElement, editorElement2])
302267

268+
for (let i = 1; i < 5; i++) {
269+
const inputEl = document.createElement('div')
270+
inputEl.id = `input${i}`
271+
inputEl.setAttribute('touch-action', 'none')
272+
inputEl.classList.add('input')
273+
274+
addPointerEventListener(inputEl)
275+
276+
const labelEL = document.createElement('label')
277+
labelEL.setAttribute('for', inputEl.id)
278+
labelEL.innerText = `Input N°${i}`
279+
280+
mainElement.appendChild(labelEL)
281+
mainElement.appendChild(inputEl)
282+
283+
inputs[i] = inputEl
284+
inputValues.set(inputEl.id, '')
285+
}
286+
303287
window.addEventListener('resize', () => {
304288
editorElement.editor.resize()
305289
editorElement2.editor.resize()

0 commit comments

Comments
 (0)