Skip to content

Improvement/canvas interaction#209

Merged
nwittwer merged 39 commits intodevfrom
improvement/canvas-interaction
Mar 1, 2023
Merged

Improvement/canvas interaction#209
nwittwer merged 39 commits intodevfrom
improvement/canvas-interaction

Conversation

@nwittwer
Copy link
Copy Markdown
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