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.

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

Improvement/canvas interaction #209

Merged
merged 39 commits into from
Mar 1, 2023
Merged

Conversation

nwittwer
Copy link
Collaborator

@nwittwer nwittwer commented Apr 25, 2021

  • Improved resize UI handles
  • Improved drag-to-select and drag-to-pan interactions (without needing to toggle the canvas on/off)
  • Better programmatic handling of different interactions (distinguishing intent to pan/zoom the canvas, interact within a web page, or drag-select artboards)

💡 You can access the current user event listeners' state from useEventHandler() use which is defined at the page level.


Canvas interactions:

  • Left-click on an artboard to enable interacting with its web page
  • Left-click + Drag: pan the canvas left/right/up/down to navigate
  • CMD/CTRL + Left-click + Drag: select one or multiple artboards (e.g. to screenshot them)
    • Handled by SelectionArea
  • CMD/CTRL + "+" or "-": Zoom in/out of the canvas
  • Right-click an artboard to open its context menu

Libraries:

@nwittwer nwittwer added Priority: 1 Important but not urgent Type: Enhancement labels Dec 4, 2021
nwittwer and others added 22 commits January 6, 2022 20:45
* Refactored store/interactions to Pinia

* Disabled Vuex-persist plugin

* Added PInia to Nuxt 2

* WIP refactored Panzoom.vue to <setup> Composition API

* Refactored store/artboards to TS & Pinia

* Refactored store/dev to TS & Pinia

* Refactored store/focusMode in TS and Pinia

* Refactored gui, history, hoverArtboard, interactions, selectedArtboards to TS & Pinia

* Added @pinia-plugin-persistedstate for Pinia persisted state

* Fixes and improvements to stores

* Changed rightClickMenu to TS and use Pinia stores

* Added Pinia store to FocusArtboard

* Fixed incorrect function calls and use getCurrentInstance.proxy for Panzoom.vue

* Refactored PanzoomControls in TS and use Pinia store

* Refactored Artboards w/ Pinia, TS, <script setup>

* Refactored Artboard w/ <script setup>, TS, Pinia

* Refactored screenshot w/ Pinia, TS, <script setup>

* Added pinia to artboardeditable

* Refactored SidePanel to TS, Pinia, script setup

* Refactored ToolBar to TS, script setup, Pinia

* Refactored URLInput to TS and Pinia

* Migrated more calls to Pinia and fixed wrong variable usage

* Removed data prop from artboardEditable and added TS

* Added Pinia types

* Replaced "state" with "this" (Pinia fix)

* More Pinia app usage updates

* Updated nuxt types, vueuse, vue (2.7->2.7.14)

* Added local TypeScript version to avoid VSCode Volar plugin failing

* Changed nuxt "env" to "publicRuntimeConfig"

* Added lodash types

* Refactored Panzoom.vue, but having race conditions for the mouse/keyboard events

* Fixed reference to prop in artboard.vue

* Refactored Artboards.vue

* Tidied up nuxt.config

* Updated yarn lock

* Added DevModeHud to see app state in dev mode

* Added DevListeners.vue to show all EventListeners in the app

* Added canDragSelect event to useEventHandler

* Minor improvements to store/artboards.ts

* Fixed bug in store/dev

* Replaced WebPage.vue's Vuex calls with Pinia

* Fixed mapState config for URLInput.vue

* Migrated artboardEditable's Vuex call to Pinia

* Simplified index.vue

* Finished DevListeners, which is able to get all the event listeners and when user hovers over the list, they are highlighted in the DOM

* Re-added pinia-plugin-persistedstate-2, which works with Nuxt 2 for persisted store state

* Fixed reference to prop that was a string but should have been a data ref

* Refactored last Vuex calls to Pinia

* Fixed toggleGui() in store/gui

* Fixed reactivity bug w/ Pinia in store/artboards using Vue.set() instead of just replacing object inside of array

* Fixed double "this.this" reference in store/history

* Removed unused SyncButton

* Fixed ability to scroll across multiple WebPages

* Added missing computed() around imported Store variables in <Artboards>

* Fixed isHover from a function to a computed value <Arboard>

* Improved resizing interaction and styling of <Artboard> during hover and when selected

* Replaced Pinia $subscribe() with $onAction, which is more like Vuex's $subscribe

* Changed remaining .commit() in WebPage to use Pinia

* Refactored enableSelections and createSelectionInstance

* Fixed @keyup assignment from 2 comma-separated functions into just one function
@nwittwer nwittwer merged commit 4cc9966 into dev Mar 1, 2023
@nwittwer nwittwer deleted the improvement/canvas-interaction branch March 1, 2023 08:57
nwittwer added a commit that referenced this pull request Mar 14, 2023
* Improved UI for resizing

* Reverted to allowing multiple interaction types without switch

* WIP web/app interaction contexts

* Updated packages

* Upgrade from @simonwep/selection-js to @viselect/vanilla

* WIP added useEventListener and changing Store interactions

* Fixed CSS issue with artboards stretching to flexbox parent height

* WIP improving interaction between panzoom and selection

* Updated packages

* v0.7.0-beta.23

* Updated yarn.lock

* Updated Yarn version

* message queue

* Updated Nuxt/Vue 2.7 and added Lodash, fixed tsconfig Vue errors

* Removed event.preventDefault from Panzoom, so it doesn't block event bubbling

* Added EventHandler component to Artboards

* Refactored and added more logic for handling mouse and CTRL/CMD events

* Temporarily disable CrossBrowserScreenshots.vue

* Re-add Vuex

* Converted from Vue component to a Vue Composable (Composition API function)

* Remove unused code

* Updated Selection options

* Refactor/pinia (#235)

* Refactored store/interactions to Pinia

* Disabled Vuex-persist plugin

* Added PInia to Nuxt 2

* WIP refactored Panzoom.vue to <setup> Composition API

* Refactored store/artboards to TS & Pinia

* Refactored store/dev to TS & Pinia

* Refactored store/focusMode in TS and Pinia

* Refactored gui, history, hoverArtboard, interactions, selectedArtboards to TS & Pinia

* Added @pinia-plugin-persistedstate for Pinia persisted state

* Fixes and improvements to stores

* Changed rightClickMenu to TS and use Pinia stores

* Added Pinia store to FocusArtboard

* Fixed incorrect function calls and use getCurrentInstance.proxy for Panzoom.vue

* Refactored PanzoomControls in TS and use Pinia store

* Refactored Artboards w/ Pinia, TS, <script setup>

* Refactored Artboard w/ <script setup>, TS, Pinia

* Refactored screenshot w/ Pinia, TS, <script setup>

* Added pinia to artboardeditable

* Refactored SidePanel to TS, Pinia, script setup

* Refactored ToolBar to TS, script setup, Pinia

* Refactored URLInput to TS and Pinia

* Migrated more calls to Pinia and fixed wrong variable usage

* Removed data prop from artboardEditable and added TS

* Added Pinia types

* Replaced "state" with "this" (Pinia fix)

* More Pinia app usage updates

* Updated nuxt types, vueuse, vue (2.7->2.7.14)

* Added local TypeScript version to avoid VSCode Volar plugin failing

* Changed nuxt "env" to "publicRuntimeConfig"

* Added lodash types

* Refactored Panzoom.vue, but having race conditions for the mouse/keyboard events

* Fixed reference to prop in artboard.vue

* Refactored Artboards.vue

* Tidied up nuxt.config

* Updated yarn lock

* Added DevModeHud to see app state in dev mode

* Added DevListeners.vue to show all EventListeners in the app

* Added canDragSelect event to useEventHandler

* Minor improvements to store/artboards.ts

* Fixed bug in store/dev

* Replaced WebPage.vue's Vuex calls with Pinia

* Fixed mapState config for URLInput.vue

* Migrated artboardEditable's Vuex call to Pinia

* Simplified index.vue

* Finished DevListeners, which is able to get all the event listeners and when user hovers over the list, they are highlighted in the DOM

* Re-added pinia-plugin-persistedstate-2, which works with Nuxt 2 for persisted store state

* Fixed reference to prop that was a string but should have been a data ref

* Refactored last Vuex calls to Pinia

* Fixed toggleGui() in store/gui

* Fixed reactivity bug w/ Pinia in store/artboards using Vue.set() instead of just replacing object inside of array

* Fixed double "this.this" reference in store/history

* Removed unused SyncButton

* Fixed ability to scroll across multiple WebPages

* Added missing computed() around imported Store variables in <Artboards>

* Fixed isHover from a function to a computed value <Arboard>

* Improved resizing interaction and styling of <Artboard> during hover and when selected

* Replaced Pinia $subscribe() with $onAction, which is more like Vuex's $subscribe

* Changed remaining .commit() in WebPage to use Pinia

* Refactored enableSelections and createSelectionInstance

* Fixed @keyup assignment from 2 comma-separated functions into just one function
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Priority: 1 Important but not urgent Type: Enhancement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant