diff options
| -rw-r--r-- | src/web/component/timeline/index.css | 2 | ||||
| -rw-r--r-- | src/web/component/timeline/index.js | 40 | ||||
| -rw-r--r-- | src/web/index.css | 11 | ||||
| -rw-r--r-- | src/web/pinch.js | 21 |
4 files changed, 60 insertions, 14 deletions
diff --git a/src/web/component/timeline/index.css b/src/web/component/timeline/index.css index 8e61fcf..6d58f59 100644 --- a/src/web/component/timeline/index.css +++ b/src/web/component/timeline/index.css @@ -2,7 +2,7 @@ width: 100%; display: inline-grid; gap: 0px; - transition: transform 0.1s ease; + overflow-y: auto; } .image { diff --git a/src/web/component/timeline/index.js b/src/web/component/timeline/index.js index 0e237a1..fa0601b 100644 --- a/src/web/component/timeline/index.js +++ b/src/web/component/timeline/index.js @@ -26,6 +26,9 @@ const zoom = new (class { this.count = 5; container.style.gridTemplateColumns = `repeat(5, 1fr)`; container.classList.toggle('tiling', this.count != 1); + this.por = { x: 0, y: 0 }; + this.eor = null; + this.y_offset = 0; } update(delta, point) { @@ -33,23 +36,37 @@ const zoom = new (class { this.count = Math.min(Math.max(this.count, 1), 20); const scale = this.committed / this.count; - const rects = Z.document.getClientRects()[0]; - const x = point.x; - const y = point.y - rects.y; + const x = point.x - this.por.x; - container.style.transformOrigin = `${x}px ${y}px`; - container.style.transform = `scale(${scale})`; + container.style.transform = `translate(${x}px, 0px) scale(${scale})`; + } + + set point_of_reference(point) { + const rect = container.getClientRects()[0]; + this.por = { x: point.x, y: point.y - rect.y }; + container.style.transformOrigin = `${this.por.x}px ${this.por.y}px`; + this.eor = Z.document.shadowRoot.elementFromPoint(point.x, point.y); + this.y_offset = this.eor.getBoundingClientRect().y; } commit() { console.log('commit'); this.count = Math.round(this.count); - container.style.transform = 'scale(1)'; container.style.gridTemplateColumns = `repeat(${this.count}, 1fr)`; container.classList.toggle('tiling', this.count != 1); + container.style.transform = 'scale(1)'; this.committed = this.count; + + void container.offsetHeight; + + const rect = this.eor.getBoundingClientRect(); + + Z.document.scrollBy({ + top: rect.y - this.y_offset, + behavior: 'instant', + }); } }); @@ -63,10 +80,15 @@ Z.document.onwheel = (event) => { }; const pinch = new Pinch(Z.document); -pinch.onpinch = (delta, point) => { - zoom.update(delta / 20, point); + +pinch.onstart = (event) => { + zoom.point_of_reference = event.point; +}; + +pinch.onpinch = (event) => { + zoom.update(event.zoom_delta / 20, event.point); }; -pinch.onfinish = (delta) => { +pinch.onfinish = () => { zoom.commit(); }; diff --git a/src/web/index.css b/src/web/index.css index 3c6b0d6..934c713 100644 --- a/src/web/index.css +++ b/src/web/index.css @@ -1,12 +1,19 @@ +html { + height: 100vh; + width: 100vw; +} + body { padding: 0; margin: 0; width: 100vw; height: 100vh; - touch-action: pan-y; /* Prevent default touch behavior */ + overflow: hidden; + touch-action: pan-y; } #timeline { display: block; - height: 100%; + height: 100vh; + overflow-y: auto; } diff --git a/src/web/pinch.js b/src/web/pinch.js index 14f843a..935dfa0 100644 --- a/src/web/pinch.js +++ b/src/web/pinch.js @@ -4,6 +4,7 @@ class Pinch { this.previous_diff = null; this.onpinch = () => {}; this.onfinish = () => {}; + this.onstart = () => {}; element.onpointerdown = (e) => this.pointer_down_handler(e); element.onpointermove = (e) => this.pointer_move_handler(e); @@ -15,6 +16,15 @@ class Pinch { pointer_down_handler(event) { this.event_cache.push(event); + + if (this.event_cache.length === 2) { + const point = { + x: (this.event_cache[0].clientX + this.event_cache[1].clientX) / 2, + y: (this.event_cache[0].clientY + this.event_cache[1].clientY) / 2, + }; + + this.onstart({ point }); + } } pointer_move_handler(event) { @@ -38,7 +48,7 @@ class Pinch { }; const delta = this.previous_diff - diff; - this.onpinch(delta, point); + this.onpinch({ zoom_delta: delta, point }); } this.previous_diff = diff; @@ -46,6 +56,11 @@ class Pinch { } pointer_up_handler(event) { + let cleanup = false; + if (this.event_cache.length === 2) { + cleanup = true; + } + const index = this.event_cache.findIndex( (cached) => cached.pointerId === event.pointerId, ); @@ -55,6 +70,8 @@ class Pinch { this.previous_diff = null; } - this.onfinish(); + if (cleanup) { + this.onfinish(); + } } } |