From 51f2dd4dde1c14d6e10f2658ff20f8cdcc5810f7 Mon Sep 17 00:00:00 2001
From: Nick Wittwer <6360459+nwittwer@users.noreply.github.com>
Date: Wed, 22 Mar 2023 19:13:57 +0100
Subject: [PATCH 1/5] Don't persist the store/interactions, since these should
 be temporary

---
 app/src/renderer/store/interactions.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/src/renderer/store/interactions.ts b/app/src/renderer/store/interactions.ts
index b7c9b840..e02be4bd 100644
--- a/app/src/renderer/store/interactions.ts
+++ b/app/src/renderer/store/interactions.ts
@@ -61,4 +61,9 @@ export const useInteractionStore = defineStore('interactions', {
       this.isWebInteractionContext = value
     },
   },
+  // Settings for persisting the store to localStorage
+  // We DO NOT want to save the state
+  persistedState: {
+    persist: false, // Don't save this!
+  },
 })

From 9f26fb7a933d02dd9efb23bf7fe0eb15f5b65c6c Mon Sep 17 00:00:00 2001
From: Nick Wittwer <6360459+nwittwer@users.noreply.github.com>
Date: Wed, 22 Mar 2023 19:15:37 +0100
Subject: [PATCH 2/5] (WIP) Trying to get Pinia Getter for isInteracting
 working, but Getters are not updated due to bug w/ Nuxt v2/Vue 2

---
 app/src/renderer/components/DevModeHud.vue    | 11 +--
 .../renderer/components/Screens/Artboard.vue  | 98 +++++++------------
 2 files changed, 38 insertions(+), 71 deletions(-)

diff --git a/app/src/renderer/components/DevModeHud.vue b/app/src/renderer/components/DevModeHud.vue
index 59614e94..fcde12c6 100644
--- a/app/src/renderer/components/DevModeHud.vue
+++ b/app/src/renderer/components/DevModeHud.vue
@@ -1,10 +1,5 @@
 <template>
-  <div
-    v-if="$config.DEV"
-    class="dev-state"
-    :class="hudPosition"
-    @click="toggleHudPosition"
-  >
+  <div v-if="$config.DEV" class="dev-state" :class="hudPosition" @click="toggleHudPosition">
     <div>
       <CollapsibleContainer title="userInteractionState">
         <div v-for="[key, value] of Object.entries(userInteractionState)">
@@ -15,6 +10,8 @@
         <div v-for="[key, value] of Object.entries(interactionsStore.$state)">
           {{ key }}: {{ value }}
         </div>
+        <div>isInteracting: {{ interactionsStore.isInteracting }}</div>
+        <div>currentContext: {{ interactionsStore.currentContext }}</div>
       </CollapsibleContainer>
     </div>
     <div>
@@ -72,10 +69,12 @@ $offset: 1rem;
     bottom: $offset;
     left: $offset;
   }
+
   &.right {
     bottom: $offset;
     right: $offset;
   }
+
   &.closed {
     bottom: $offset;
     right: $offset;
diff --git a/app/src/renderer/components/Screens/Artboard.vue b/app/src/renderer/components/Screens/Artboard.vue
index e723f32e..f58a8a46 100644
--- a/app/src/renderer/components/Screens/Artboard.vue
+++ b/app/src/renderer/components/Screens/Artboard.vue
@@ -2,23 +2,11 @@
   <!-- Allow pointer-events when panzoom is enabled -->
   <!-- The 'panzoom-exclude' class allows us to ignore Panzoom click events on a certain element -->
   <!-- ... and then we use Selection to select just one artboard -->
-  <div
-    class="artboard-container"
-    :class="{ 'panzoom-exclude': state.panzoomEnabled }"
-  >
-    <div
-      v-show="isVisible"
-      ref="artboard"
-      :artboard-id="props.id"
-      class="artboard"
-      :class="{
-        'is-hover': state.isHover,
-        'is-selected': state.isSelected,
-      }"
-      @mouseover="hoverStart(props.id)"
-      @mouseout="hoverEnd(props.id)"
-      @click.right="rightClickHandler()"
-    >
+  <div class="artboard-container" :class="{ 'panzoom-exclude': state.panzoomEnabled }">
+    <div v-show="isVisible" ref="artboard" :artboard-id="props.id" class="artboard" :class="{
+      'is-hover': state.isHover,
+      'is-selected': state.isSelected,
+    }" @mouseover="hoverStart(props.id)" @mouseout="hoverEnd(props.id)" @click.right="rightClickHandler()">
       <div class="artboard__top">
         <div>
           <span class="title">{{ props.title }}</span>
@@ -35,30 +23,15 @@
         </div>
       </div>
       <div class="artboard__keypoints" />
-      <div
-        ref="artboardResizable"
-        class="artboard__content"
-        :class="{
-          'layout--horizontal': state.horizontalLayout,
-          'is-hover': state.isHover,
-          'is-selected': state.isSelected,
-        }"
-        :style="{ height: props.height + 'px', width: props.width + 'px' }"
-      >
-        <div
-          class="content__frame"
-          @mousedown="$emit('clicked', props.id, $event)"
-        >
-          <WebPage
-            :id="props.id"
-            :artboard-id="props.id"
-            ref="frame"
-            :allow-interactions="state.canInteractWithWebContext"
-            class="webview"
-            @loadstart="state.isLoading = true"
-            @loadend="state.isLoading = false"
-            @scroll="updateScrollPosition"
-          />
+      <div ref="artboardResizable" class="artboard__content" :class="{
+        'layout--horizontal': state.horizontalLayout,
+        'is-hover': state.isHover,
+        'is-selected': state.isSelected,
+      }" :style="{ height: props.height + 'px', width: props.width + 'px' }">
+        <div class="content__frame" @mousedown="$emit('clicked', props.id, $event)">
+          <WebPage :id="props.id" :artboard-id="props.id" ref="frame"
+            :allow-interactions="state.canInteractWithWebContext" class="webview" @loadstart="state.isLoading = true"
+            @loadend="state.isLoading = false" @scroll="updateScrollPosition" />
         </div>
 
         <!-- TODO: Re-enable -->
@@ -72,16 +45,8 @@
           />
         </div> -->
         <div v-show="state.isHover" class="artboard__handles">
-          <div
-            class="handle_right"
-            title="Resize"
-            @mousedown="triggerResize($event, 'horizontal')"
-          />
-          <div
-            class="handle_bottom"
-            title="Resize"
-            @mousedown="triggerResize($event, 'vertical')"
-          />
+          <div class="handle_right" title="Resize" @mousedown="triggerResize($event, 'horizontal')" />
+          <div class="handle_bottom" title="Resize" @mousedown="triggerResize($event, 'vertical')" />
         </div>
       </div>
     </div>
@@ -111,24 +76,24 @@ const selectedArtboards = useSelectedArtboardsStore()
 const hoverArtboards = useHoverArtboardsStore()
 const interactions = useInteractionStore()
 
-watch(interactions.$state.internal, (internal) => {
-  // TODO: Pinia Getter is not working in Vue 2: isInteracting: computed(() => interactions.isInteracting),
-  let isOn = false
+// watch(interactions.$state.internal, (internal) => {
+//   // TODO: Pinia Getter is not working in Vue 2: isInteracting: computed(() => interactions.isInteracting),
+//   let isOn = false
 
-  for (const key in internal) {
-    if (internal[key] === true) {
-      isOn = true
-    }
-  }
+//   for (const key in internal) {
+//     if (internal[key] === true) {
+//       isOn = true
+//     }
+//   }
 
-  state.isInteracting = isOn
-})
+//   state.isInteracting = isOn
+// }, { deep: true })
 
 const state = reactive({
   isLoading: false,
   horizontalLayout: true,
   panzoomEnabled: computed(() => interactions.panzoomEnabled),
-  isInteracting: false,
+  isInteracting: computed(() => interactions.isInteracting),
   isHover: computed(() =>
     computedVars.hoverArtboards.filter((item) => item === props.id).length
       ? true
@@ -155,11 +120,13 @@ const state = reactive({
     if (state.isSelected && state.isInteracting) {
       interactions.setWebInteractionState(false) // Update global state
       return false
-    } else if (state.isSelected && !state.isInteracting)
+    } else if (state.isSelected && !state.isInteracting) {
       // Artboard is selected and user is not interacting
       // Allow interactions in WebPage!
       interactions.setWebInteractionState(true) // Update global state
-    return true
+      return true
+    }
+
   }),
 })
 
@@ -412,7 +379,7 @@ $artboard-handle-height: 1.5rem;
     justify-content: space-between;
     margin-bottom: 0.5rem;
 
-    & > *:not(:first-child) {
+    &>*:not(:first-child) {
       margin-left: 16px;
     }
 
@@ -431,6 +398,7 @@ $artboard-handle-height: 1.5rem;
   }
 
   $artboard-content-radius: 1rem;
+
   .artboard__content {
     width: auto;
     height: auto;

From 21d7edb249f023df3ab90f61c23c5835d769f382 Mon Sep 17 00:00:00 2001
From: Nick Wittwer <6360459+nwittwer@users.noreply.github.com>
Date: Sun, 2 Jul 2023 19:19:44 +0200
Subject: [PATCH 3/5] Refactored useInteractionStore as "Pinia setup store",
 added inline watch()

---
 app/store/interactions.ts | 87 ++++++++++++++++++++-------------------
 1 file changed, 44 insertions(+), 43 deletions(-)

diff --git a/app/store/interactions.ts b/app/store/interactions.ts
index e02be4bd..e70cc070 100644
--- a/app/store/interactions.ts
+++ b/app/store/interactions.ts
@@ -1,5 +1,4 @@
 import { defineStore } from 'pinia'
-import { watch } from 'vue'
 
 interface State {
   internal: {
@@ -7,63 +6,65 @@ interface State {
     isResizingArtboard: boolean
     isSelectingArea: boolean
   }
+  isInteracting: boolean
   isWebInteractionContext: boolean
   panzoomEnabled: boolean
 }
 
-export const useInteractionStore = defineStore('interactions', {
-  state: (): State => ({
-    // isPanning: false,
-    // isZooming: false,
+export const useInteractionStore = defineStore('interactions', () => {
+  const state = reactive<State>({
     internal: {
       isPanzooming: false,
       isSelectingArea: false,
       isResizingArtboard: false,
     },
+    isInteracting: false,
     isWebInteractionContext: false,
     panzoomEnabled: true,
-  }),
-  getters: {
-    isInteracting(state) {
-      // Check if any of the internal properties are set to true
-      // If so, we say the user is interacting
-      let isOn = false
+  })
 
-      for (const s in state.internal) {
-        if (state[s] === true) {
-          isOn = true
-        }
-      }
-
-      return isOn
-    },
+  const getters = {
+    // TODO this should also take into consideration if 1+ screens are selected,
+    // or if there is a panzoom event happening
+    currentContext: computed(() =>
+      state.isWebInteractionContext ? 'web' : 'app'
+    ),
+  }
 
-    /**
-     * Is the current user in the
-     * app context or the web interaction context?
-     */
-    currentContext(state) {
-      // TODO this should also take into consideration if 1+ screens are selected,
-      // or if there is a panzoom event happening
-      return state.isWebInteractionContext ? 'web' : 'app'
-    },
-  },
-  actions: {
-    interactionSetState({ key, value }) {
-      if (this.internal[key] !== value) {
-        this.internal[key] = value
+  const actions = {
+    interactionSetState({
+      key,
+      value,
+    }: {
+      key: keyof State['internal']
+      value: boolean
+    }): void {
+      if (state.internal[key] !== value) {
+        state.internal[key] = value
       }
     },
-    setPanzoomState(value) {
-      this.panzoomEnabled = value
+    setPanzoomState(value: boolean): void {
+      state.panzoomEnabled = value
     },
-    setWebInteractionState(value) {
-      this.isWebInteractionContext = value
+    setWebInteractionState(value: boolean): void {
+      state.isWebInteractionContext = value
     },
-  },
-  // Settings for persisting the store to localStorage
-  // We DO NOT want to save the state
-  persistedState: {
-    persist: false, // Don't save this!
-  },
+  }
+
+  // Dynamically set isInteracting if 1+ internal properties are true
+  watch(state.internal, () => {
+    // Check if any of the internal properties are set to true
+    // If so, we say the user is interacting
+    let isOn = false
+
+    for (const s in state.internal) {
+      if (state.internal[s as keyof (typeof state)['internal']] === true) {
+        isOn = true
+      }
+    }
+
+    state.isInteracting = isOn
+  })
+
+  return { ...toRefs(state), ...getters, ...actions, persist: true }
 })

From 03eb049243609e83e8e1e500493d7a6e1545f22a Mon Sep 17 00:00:00 2001
From: Nick Wittwer <6360459+nwittwer@users.noreply.github.com>
Date: Sun, 2 Jul 2023 19:22:00 +0200
Subject: [PATCH 4/5] Improved tracking of app/web context

---
 app/components/Screens/Artboard.vue  | 44 ++++++++++---------
 app/components/Screens/Artboards.vue | 63 +++++++++++++++++++++++-----
 app/components/panzoom/Panzoom.vue   | 37 ++++++++--------
 3 files changed, 90 insertions(+), 54 deletions(-)

diff --git a/app/components/Screens/Artboard.vue b/app/components/Screens/Artboard.vue
index 002886ff..bdb213ed 100644
--- a/app/components/Screens/Artboard.vue
+++ b/app/components/Screens/Artboard.vue
@@ -2,11 +2,23 @@
   <!-- Allow pointer-events when panzoom is enabled -->
   <!-- The 'panzoom-exclude' class allows us to ignore Panzoom click events on a certain element -->
   <!-- ... and then we use Selection to select just one artboard -->
-  <div class="artboard-container" :class="{ 'panzoom-exclude': state.panzoomEnabled }">
-    <div v-show="isVisible" ref="artboard" :artboard-id="props.id" class="artboard" :class="{
-      'is-hover': state.isHover,
-      'is-selected': state.isSelected,
-    }" @mouseover="hoverStart(props.id)" @mouseout="hoverEnd(props.id)" @click.right="rightClickHandler()">
+  <div
+    class="artboard-container"
+    :class="{ 'panzoom-exclude': state.panzoomEnabled }"
+  >
+    <div
+      v-show="isVisible"
+      ref="artboard"
+      :artboard-id="props.id"
+      class="artboard"
+      :class="{
+        'is-hover': state.isHover,
+        'is-selected': state.isSelected,
+      }"
+      @mouseover="hoverStart(props.id)"
+      @mouseout="hoverEnd(props.id)"
+      @click.right="rightClickHandler()"
+    >
       <div class="artboard__top">
         <div>
           <span class="title">{{ props.title }}</span>
@@ -96,19 +108,6 @@ const selectedArtboards = useSelectedArtboardsStore()
 const hoverArtboards = useHoverArtboardsStore()
 const interactions = useInteractionStore()
 
-// watch(interactions.$state.internal, (internal) => {
-//   // TODO: Pinia Getter is not working in Vue 2: isInteracting: computed(() => interactions.isInteracting),
-//   let isOn = false
-
-//   for (const key in internal) {
-//     if (internal[key] === true) {
-//       isOn = true
-//     }
-//   }
-
-//   state.isInteracting = isOn
-// }, { deep: true })
-
 const state = reactive({
   isLoading: false,
   horizontalLayout: true,
@@ -133,20 +132,19 @@ const state = reactive({
    */
   canInteractWithWebContext: computed(() => {
     // This artboard must be 'selected'
-    if (!state.isSelected) return false
+    if (!state.isSelected) {
+      return false
+    }
 
     // Artboard is selected, but user is also doing an interaction
     // Disable interactions with the Web Context
     if (state.isSelected && state.isInteracting) {
-      interactions.setWebInteractionState(false) // Update global state
       return false
     } else if (state.isSelected && !state.isInteracting) {
       // Artboard is selected and user is not interacting
       // Allow interactions in WebPage!
-      interactions.setWebInteractionState(true) // Update global state
       return true
     }
-
   }),
 })
 
@@ -401,7 +399,7 @@ $artboard-handle-height: 1.5rem;
     justify-content: space-between;
     margin-bottom: 0.5rem;
 
-    &>*:not(:first-child) {
+    & > *:not(:first-child) {
       margin-left: 16px;
     }
 
diff --git a/app/components/Screens/Artboards.vue b/app/components/Screens/Artboards.vue
index d6306274..2556fbbc 100644
--- a/app/components/Screens/Artboards.vue
+++ b/app/components/Screens/Artboards.vue
@@ -76,8 +76,9 @@ onMounted(() => {
     }
   )
 
-  // Watch to see if the fullHeight changes, and then update the webview height
   watch(data.artboards, async (newVal, oldVal) => {
+    // Watch to see if the fullHeight changes, and then update the webview height
+    // Set full-height artboards to full height if GUI setting is enabled
     if (gui.isScreensFullHeight) {
       for (const [index, artboard] of newVal.entries()) {
         setArtboardToFullHeight(artboard.id)
@@ -85,6 +86,9 @@ onMounted(() => {
       }
     }
   })
+
+  // Start tracking the user's context
+  initWebviewOrAppContextTracker()
 })
 
 // TODO Consider enabling this once panzoom is a Vue plugin?
@@ -102,6 +106,42 @@ onBeforeUnmount(() => {
   stopViewportObserver()
 })
 
+function initWebviewOrAppContextTracker() {
+  // Check if the artboard is selected and user is interacting
+  const calculateInteractionMode = () => {
+    for (const artboard of data.artboards) {
+      const isSelected = data.selectedArtboards.includes(artboard.id)
+
+      if (isSelected && !data.isInteracting) {
+        interactions.setWebInteractionState(true)
+        return true
+      } else if (isSelected) {
+        interactions.setWebInteractionState(false)
+        return false
+      }
+    }
+  }
+
+  // Initial check
+  calculateInteractionMode()
+
+  watch(
+    () => data.selectedArtboards,
+    () => {
+      // Check if the artboard is selected and user is interacting
+      calculateInteractionMode()
+
+      // Check if empty
+      if (data.selectedArtboards.length >= 1) {
+        // Either the app or the web context
+      } else {
+        // Should definitely be the app context
+        interactions.setWebInteractionState(false)
+      }
+    }
+  )
+}
+
 function resize(artboard: Artboard) {
   artboards.resizeArtboard(artboard)
 }
@@ -180,24 +220,25 @@ function createSelectionInstance() {
       return true
     })
     .on('start', (evt) => {
+      // TODO: This is always firing as Panzoom is enabled
       if (data.panzoomEnabled) {
         console.warn('Panzoom is enabled!')
-        disableSelections()
-        return false
+        // disableSelections()
+        // return false
       }
 
       // Always reset selected when dragging
       selectedArtboards.empty()
-      if (userEventsState.canDragSelect === true) {
-      }
 
-      console.log('selection')
+      if (userEventsState.canDragSelect === true) {
+        console.log('selection')
 
-      // Update state
-      interactions.interactionSetState({
-        key: 'isSelectingArea',
-        value: true,
-      })
+        // Update state
+        interactions.interactionSetState({
+          key: 'isSelectingArea',
+          value: true,
+        })
+      }
     })
     .on(
       'move',
diff --git a/app/components/panzoom/Panzoom.vue b/app/components/panzoom/Panzoom.vue
index 5d256afe..463e5cd5 100644
--- a/app/components/panzoom/Panzoom.vue
+++ b/app/components/panzoom/Panzoom.vue
@@ -55,7 +55,6 @@ import useEventHandler from '../Screens/useEventHandler'
 import { useDevStore } from '~/store/dev'
 import { initialPanZoom } from './panzoomFns'
 
-
 // Connect w/ Electron
 
 const interactions = useInteractionStore()
@@ -229,8 +228,6 @@ function enableEventListeners() {
   }
 }
 
-
-
 /**
  * Handles wheel events (i.e. mousewheel)
  * @param DOMElement DOM element that Panzoom is on
@@ -270,24 +267,24 @@ function wheelHandler(DOMElement, instance) {
  * @param DOMElement DOM element that Panzoom is on
  * @param instance The Panzoom instance
  */
-function mouseHandlers(DOMElement, instance) {
-  // TODO These DO NOT WORK
+function mouseHandlers(DOMElement: Element, instance) {
+  // TODO: These DO NOT WORK
 
   // Emit start events
-  // const onEvents = ['mousedown', 'touchstart', 'gesturestart']
-  // onEvents.forEach((name) => {
-  //   DOMElement.addEventListener(name, startEvents)
-  // })
-
-  // const offEvents = ['mouseup', 'touchend', 'gestureend']
-  // offEvents.forEach((name) => {
-  //   DOMElement.removeEventListener(name, startEvents)
-  //   DOMElement.addEventListener(name, endEvents)
-  // })
-
-  function startEvents(e) {
+  const onEvents = ['mousedown', 'touchstart', 'gesturestart']
+  const offEvents = ['mouseup', 'touchend', 'gestureend']
+
+  onEvents.forEach((name) => {
+    DOMElement.addEventListener(name, () => startEvents(name))
+  })
+  offEvents.forEach((name) => {
+    // DOMElement.removeEventListener(name, startEvents)
+    DOMElement.addEventListener(name, () => endEvents(name))
+  })
+
+  function startEvents(eventName: string) {
     // Only continue if Panzoom is enabled
-    if (panzoomEnabled && userEventsState.canDragSelect === false) {
+    if (panzoomEnabled && !isInteracting) {
       panzoomInstance.value?.setOptions({
         cursor: 'grabbing',
       })
@@ -302,7 +299,7 @@ function mouseHandlers(DOMElement, instance) {
     }
   }
 
-  function endEvents(e) {
+  function endEvents(eventName: string) {
     panzoomInstance.value?.setOptions({
       cursor: 'grab',
     })
@@ -314,7 +311,7 @@ function mouseHandlers(DOMElement, instance) {
     })
 
     // TODO: Remove event listener for just this one event name
-    DOMElement.removeEventListener(name, endEvents)
+    DOMElement.removeEventListener(eventName, () => endEvents(eventName))
   }
 }
 

From 0b6982b8ddf382887cdff5a4173db4c603b913fb Mon Sep 17 00:00:00 2001
From: Nick Wittwer <6360459+nwittwer@users.noreply.github.com>
Date: Sun, 2 Jul 2023 19:22:18 +0200
Subject: [PATCH 5/5] Added some sites for testing common use cases (e.g.
 marketing, docs)

---
 app/components/DevModeHud.vue | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/components/DevModeHud.vue b/app/components/DevModeHud.vue
index 4a0bd4cf..fa8270f2 100644
--- a/app/components/DevModeHud.vue
+++ b/app/components/DevModeHud.vue
@@ -1,6 +1,21 @@
 <template>
-  <div v-if="$config.public.DEV" class="dev-state" :class="hudPosition" @click="toggleHudPosition">
+  <div
+    v-if="$config.public.DEV"
+    class="dev-state"
+    :class="hudPosition"
+    @click="toggleHudPosition"
+  >
     <div>
+      <CollapsibleContainer title="Sites">
+        <div>
+          <ul>
+            <li @click="goToSite('https://www.katiecooper.co/')">Classic</li>
+            <li @click="goToSite('https://nextjs.org/')">Marketing</li>
+            <li @click="goToSite('https://nextjs.org/docs')">Documentation</li>
+            <li @click="goToSite('https://rauno.me/craft')">Performance</li>
+          </ul>
+        </div>
+      </CollapsibleContainer>
       <CollapsibleContainer title="userInteractionState">
         <div v-for="[key, value] of Object.entries(userInteractionState)">
           {{ key }}: {{ value }}
@@ -10,7 +25,6 @@
         <div v-for="[key, value] of Object.entries(interactionsStore.$state)">
           {{ key }}: {{ value }}
         </div>
-        <div>isInteracting: {{ interactionsStore.isInteracting }}</div>
         <div>currentContext: {{ interactionsStore.currentContext }}</div>
       </CollapsibleContainer>
     </div>
@@ -26,9 +40,11 @@ import useEventHandler from '@/components/Screens/useEventHandler'
 import { useInteractionStore } from '~/store/interactions'
 import DevListeners from '~/components/DevListeners.vue'
 import CollapsibleContainer from '~/components/CollapsibleContainer.vue'
+import { useHistoryStore } from '@/store/history'
 
 const interactionsStore = useInteractionStore()
 const { state: userInteractionState } = useEventHandler() // init event handling
+const historyStore = useHistoryStore()
 
 const hudPosition = ref<'left' | 'right' | 'closed'>('right')
 
@@ -49,6 +65,10 @@ function toggleHudPosition() {
 
   console.log(hudPosition.value)
 }
+
+function goToSite(newUrl: string) {
+  historyStore.changeSiteData({ url: newUrl })
+}
 </script>
 
 <style lang="scss" scoped>