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

optimize zoom and pan controls for various input types #40

Merged
merged 2 commits into from
Jan 3, 2023
Merged

optimize zoom and pan controls for various input types #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1735fc5
optimize zoom and pan controls for various input types
brandonreid Jan 3, 2023
d4d3f70
remove unneeded line break
brandonreid Jan 3, 2023
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
34 changes: 3 additions & 31 deletions src/FlowRunTimeline.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
<template>
<div class="flow-run-timeline">
<div class="flow-run-timeline__zoom-controls">
<p-button icon="MinusIcon" inset rounded aria-label="Zoom out" @click="zoomOut" />
<p-button icon="PlusIcon" inset rounded aria-label="Zoom in" @click="zoomIn" />
</div>
<div ref="stage" class="flow-run-timeline__canvas-container" />
</div>
Comment on lines -2 to -8
Copy link
Contributor

Choose a reason for hiding this comment

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

Aren't discreet controls necessary for keyboard-only users? Should we maintain these in those cases even while we expand touchscreen controls?

Copy link
Contributor Author

@brandonreid brandonreid Jan 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

I was actually just creating a ticket to work through accessibility for this graph.

I think for assistive tech users or screen reader users, I'd actually surface a way to focus the graph and use arrows and +/- keys or something similar. For now, there will be no keyboard only pan controls, so zoom without pan really wouldn't be helpful anyway. One could argue they're a bit distracting up there as well, at least in their current size. So if they're not helping and possibly hurting, I still think they can go for now. Added to that ticket to think through how to enable keyboard only interaction though.

<div ref="stage" class="flow-run-timeline" />
</template>

<script lang="ts" setup>
Expand Down Expand Up @@ -271,41 +265,19 @@
function dateScale(xPosition: number): number {
return Math.ceil(minimumStartDate.getTime() + xPosition * (overallTimeSpan.value / overallGraphWidth))
}

function zoomOut(): void {
viewport.zoom(400, true)
}

function zoomIn(): void {
viewport.zoom(-400, true)
}
</script>

<style>
.flow-run-timeline { @apply
relative
w-full
h-full
}

.flow-run-timeline__zoom-controls { @apply
absolute
flex
gap-1
top-4
right-4
z-10
}

.flow-run-timeline__canvas-container { @apply
bg-slate-100
rounded-lg
w-full
h-full
overflow-hidden
relative
}
.flow-run-timeline__canvas-container canvas { @apply

.flow-run-timeline canvas { @apply
absolute
top-0
left-0
Expand Down
3 changes: 2 additions & 1 deletion src/pixiFunctions/initViewport.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,9 @@ export async function initViewport(stage: HTMLElement, app: Application): Promis
})
.wheel({
trackpadPinch: true,
wheelZoom: false,
wheelZoom: true,
})
.pinch()
.clampZoom({
minWidth: stageWidth / 2,
maxWidth: stageWidth * 20,
Expand Down