Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adjust touch logic for non-interactive images #55

Merged
merged 9 commits into from
Aug 15, 2024
Merged

adjust touch logic for non-interactive images #55

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
68113b2
adjust touch logic for static rendering
abrin Jul 25, 2024
2a83def
log render present
abrin Jul 25, 2024
567c644
add debug for interaction
abrin Jul 25, 2024
070e809
remove debugging
abrin Jul 25, 2024
58fdcdc
add comment
abrin Jul 25, 2024
c02b3fb
more places
abrin Jul 29, 2024
cbd12fa
Update src/modules/react-reconciler/Atlas.tsx
abrin Jul 29, 2024
d5f35ec
changes per review
abrin Jul 29, 2024
0dd5c3a
Merge branch 'touch_adjustment_static' of github.com:abrin/atlas into…
abrin Jul 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/modules/overlay-renderer/overlay-renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`),
abrin marked this conversation as resolved.
Show resolved Hide resolved
};
this.stylesheet.updateSheet();
}
Expand Down
18 changes: 14 additions & 4 deletions src/modules/react-reconciler/Atlas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -445,6 +445,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;
}
Comment on lines +448 to +452
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this a logical assumption, by default it's interactive, but if someone explicitly sets the presets to disable the interactivity, then it isn't


return (
<Container
Expand All @@ -467,7 +472,6 @@ export const Atlas: React.FC<
{presetName === 'static-preset' ? (
<Container
className="atlas-static-container"
style={preset && preset.controller ? undefined : { pointerEvents: 'none' }}
ref={refs.container as any}
tabIndex={0}
{...containerProps}
Expand All @@ -483,7 +487,11 @@ export const Atlas: React.FC<
ref={refs.canvas as any}
/>
)}
<Container className="atlas-overlay" style={{ ...(overlayStyle || {}) }} ref={refs.overlay as any}>

<Container className={['atlas-overlay', isInteractive ? 'atlas-overlay--interactive' : null]
abrin marked this conversation as resolved.
Show resolved Hide resolved
abrin marked this conversation as resolved.
Show resolved Hide resolved
.filter(Boolean)
.join(' ')
.trim()} style={{ ...(overlayStyle || {}) }} ref={refs.overlay as any}>
{unstable_noReconciler ? (
<Canvas>
<BoundsContext.Provider value={bounds}>
Expand Down Expand Up @@ -526,8 +534,10 @@ 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-static-image { position: absolute; pointer-events: none; user-select: none; transform-origin: 0px 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; user-select: none; transform-origin: 0px 0px; }
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wasn't sure where best to test this, but removing it didn't seem to change any of the stories

.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%; }
`}</style>
Expand Down
2 changes: 1 addition & 1 deletion stories/homepage.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down