From 68113b2c3753872b923308d0e99a446487cb9756 Mon Sep 17 00:00:00 2001 From: Adam Brin Date: Thu, 25 Jul 2024 12:25:24 -0700 Subject: [PATCH 1/8] adjust touch logic for static rendering MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit CanvasPanel can use a static renderer, but set interactive to `false`. This works _ok_ in many cases, but falls down in a few. This allows us to adjust the interactivity from the css level by moving the pointer-events logic into it’s own css class that’s assigned based on the interactive prop --- src/modules/react-reconciler/Atlas.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/modules/react-reconciler/Atlas.tsx b/src/modules/react-reconciler/Atlas.tsx index 022060c..1ab834a 100644 --- a/src/modules/react-reconciler/Atlas.tsx +++ b/src/modules/react-reconciler/Atlas.tsx @@ -483,7 +483,11 @@ export const Atlas: React.FC< ref={refs.canvas as any} /> )} - + + {unstable_noReconciler ? ( @@ -526,7 +530,8 @@ export const Atlas: React.FC< .atlas-canvas:focus-visible, .atlas-canvas-container:focus-visible { outline: var(--atlas-focus, 2px solid darkorange) } .atlas-static-preset { touch-action: inherit; } .atlas-static-container { position: relative; overflow: hidden; flex: 1 1 0px; } - .atlas-overlay { position: absolute; top: 0; left: 0; pointer-events: none; overflow: hidden; } + .atlas-overlay { position: absolute; top: 0; left: 0; none; overflow: hidden; } + .atlas-overlay--interactive { pointer-events: none; } .atlas-static-image { position: absolute; pointer-events: none; user-select: none; transform-origin: 0px 0px; } .atlas-navigator { position: absolute; top: var(--atlas-navigator-top, 10px); right: var(--atlas-navigator-bottom, 10px); left: var(--atlas-navigator-left); bottom: var(--atlas-navigator-bottom); opacity: .8 } .atlas-navigator-canvas { width: 100%; } From 2a83def6466c9f099b5a34d280f5da4be2f71f94 Mon Sep 17 00:00:00 2001 From: Adam Brin Date: Thu, 25 Jul 2024 14:07:47 -0700 Subject: [PATCH 2/8] log render present --- src/modules/react-reconciler/Atlas.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/react-reconciler/Atlas.tsx b/src/modules/react-reconciler/Atlas.tsx index 1ab834a..cf8ad87 100644 --- a/src/modules/react-reconciler/Atlas.tsx +++ b/src/modules/react-reconciler/Atlas.tsx @@ -483,7 +483,7 @@ export const Atlas: React.FC< ref={refs.canvas as any} /> )} - + console.log(renderPreset); Date: Thu, 25 Jul 2024 14:15:55 -0700 Subject: [PATCH 3/8] add debug for interaction --- src/modules/react-reconciler/Atlas.tsx | 10 +++++++--- stories/homepage.stories.tsx | 2 +- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/modules/react-reconciler/Atlas.tsx b/src/modules/react-reconciler/Atlas.tsx index cf8ad87..75d7f19 100644 --- a/src/modules/react-reconciler/Atlas.tsx +++ b/src/modules/react-reconciler/Atlas.tsx @@ -445,7 +445,11 @@ export const Atlas: React.FC< const { height: _, width: __, ...canvasProps } = restProps; const widthClassName = useClassname([restProps.width, restProps.height]); - + let isInteractive = true; + if (renderPreset && Array.isArray(renderPreset) && renderPreset.length > 1 && (renderPreset[1] as any).interactive === false) { + isInteractive = false; + } + console.log(renderPreset, isInteractive); return ( )} - console.log(renderPreset); - diff --git a/stories/homepage.stories.tsx b/stories/homepage.stories.tsx index a34624b..2a4ed75 100644 --- a/stories/homepage.stories.tsx +++ b/stories/homepage.stories.tsx @@ -160,7 +160,7 @@ export const StaticRendererPreset = () => { width={400} height={400} key={c ? 'a' : 'b'} - renderPreset={['static-preset', { canvasBox: c }]} + renderPreset={['static-preset', { canvasBox: c, interactive: false }]} onCreated={(rt) => rt.runtime?.world.gotoRegion({ x: 0, y: 0, width: 300, height: 300, immediate: true })} > {boxes} From 070e8096b757229267ee4fdd4fb15d1b5cc3bdad Mon Sep 17 00:00:00 2001 From: Adam Brin Date: Thu, 25 Jul 2024 14:27:01 -0700 Subject: [PATCH 4/8] remove debugging --- src/modules/react-reconciler/Atlas.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/modules/react-reconciler/Atlas.tsx b/src/modules/react-reconciler/Atlas.tsx index 75d7f19..be583d7 100644 --- a/src/modules/react-reconciler/Atlas.tsx +++ b/src/modules/react-reconciler/Atlas.tsx @@ -446,10 +446,11 @@ export const Atlas: React.FC< const { height: _, width: __, ...canvasProps } = restProps; const widthClassName = useClassname([restProps.width, restProps.height]); let isInteractive = true; + // if we have a render preset and that render preset sets interactive to false, then... disable it if (renderPreset && Array.isArray(renderPreset) && renderPreset.length > 1 && (renderPreset[1] as any).interactive === false) { isInteractive = false; } - console.log(renderPreset, isInteractive); + return ( Date: Thu, 25 Jul 2024 14:29:58 -0700 Subject: [PATCH 5/8] add comment --- src/modules/react-reconciler/Atlas.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/modules/react-reconciler/Atlas.tsx b/src/modules/react-reconciler/Atlas.tsx index be583d7..0a19915 100644 --- a/src/modules/react-reconciler/Atlas.tsx +++ b/src/modules/react-reconciler/Atlas.tsx @@ -536,6 +536,7 @@ export const Atlas: React.FC< .atlas-static-preset { touch-action: inherit; } .atlas-static-container { position: relative; overflow: hidden; flex: 1 1 0px; } .atlas-overlay { position: absolute; top: 0; left: 0; none; overflow: hidden; } + /** setting the pointer events to none means that Atlas will own the touch and mousewheel events **/ .atlas-overlay--interactive { pointer-events: none; } .atlas-static-image { position: absolute; pointer-events: none; user-select: none; transform-origin: 0px 0px; } .atlas-navigator { position: absolute; top: var(--atlas-navigator-top, 10px); right: var(--atlas-navigator-bottom, 10px); left: var(--atlas-navigator-left); bottom: var(--atlas-navigator-bottom); opacity: .8 } From c02b3fbf83bdca83954850c0619fa2d4eb2c769c Mon Sep 17 00:00:00 2001 From: Adam Brin Date: Sun, 28 Jul 2024 19:15:52 -0700 Subject: [PATCH 6/8] more places --- src/modules/overlay-renderer/overlay-renderer.ts | 4 ++-- src/modules/react-reconciler/Atlas.tsx | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/modules/overlay-renderer/overlay-renderer.ts b/src/modules/overlay-renderer/overlay-renderer.ts index 7d7be3f..9e53363 100644 --- a/src/modules/overlay-renderer/overlay-renderer.ts +++ b/src/modules/overlay-renderer/overlay-renderer.ts @@ -66,8 +66,8 @@ export class OverlayRenderer implements Renderer { position: absolute; transform-origin: 0px 0px; `), - interactive: this.stylesheet.addStylesheet(`pointer-events: all`), - nonInteractive: this.stylesheet.addStylesheet(`pointer-events: none`), + interactive: this.stylesheet.addStylesheet(`pointer-events: none`), + nonInteractive: this.stylesheet.addStylesheet(`pointer-events: all`), }; this.stylesheet.updateSheet(); } diff --git a/src/modules/react-reconciler/Atlas.tsx b/src/modules/react-reconciler/Atlas.tsx index 0a19915..03a25fb 100644 --- a/src/modules/react-reconciler/Atlas.tsx +++ b/src/modules/react-reconciler/Atlas.tsx @@ -472,7 +472,6 @@ export const Atlas: React.FC< {presetName === 'static-preset' ? ( From cbd12fad1dbc3f6891fa1d730e90d316680a7f5e Mon Sep 17 00:00:00 2001 From: Adam Brin Date: Sun, 28 Jul 2024 19:17:46 -0700 Subject: [PATCH 7/8] Update src/modules/react-reconciler/Atlas.tsx --- src/modules/react-reconciler/Atlas.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/react-reconciler/Atlas.tsx b/src/modules/react-reconciler/Atlas.tsx index 03a25fb..4df4e18 100644 --- a/src/modules/react-reconciler/Atlas.tsx +++ b/src/modules/react-reconciler/Atlas.tsx @@ -488,7 +488,7 @@ export const Atlas: React.FC< /> )} - From d5f35ec49bee35df7906083aadae6487057eaf0c Mon Sep 17 00:00:00 2001 From: Adam Brin Date: Mon, 29 Jul 2024 13:48:39 -0700 Subject: [PATCH 8/8] changes per review --- src/modules/overlay-renderer/overlay-renderer.ts | 4 ++-- stories/homepage.stories.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/modules/overlay-renderer/overlay-renderer.ts b/src/modules/overlay-renderer/overlay-renderer.ts index 9e53363..7d7be3f 100644 --- a/src/modules/overlay-renderer/overlay-renderer.ts +++ b/src/modules/overlay-renderer/overlay-renderer.ts @@ -66,8 +66,8 @@ export class OverlayRenderer implements Renderer { position: absolute; transform-origin: 0px 0px; `), - interactive: this.stylesheet.addStylesheet(`pointer-events: none`), - nonInteractive: this.stylesheet.addStylesheet(`pointer-events: all`), + interactive: this.stylesheet.addStylesheet(`pointer-events: all`), + nonInteractive: this.stylesheet.addStylesheet(`pointer-events: none`), }; this.stylesheet.updateSheet(); } diff --git a/stories/homepage.stories.tsx b/stories/homepage.stories.tsx index 2a4ed75..a34624b 100644 --- a/stories/homepage.stories.tsx +++ b/stories/homepage.stories.tsx @@ -160,7 +160,7 @@ export const StaticRendererPreset = () => { width={400} height={400} key={c ? 'a' : 'b'} - renderPreset={['static-preset', { canvasBox: c, interactive: false }]} + renderPreset={['static-preset', { canvasBox: c }]} onCreated={(rt) => rt.runtime?.world.gotoRegion({ x: 0, y: 0, width: 300, height: 300, immediate: true })} > {boxes}