From 86c9a37ef03991ded17d1336bde8da407bafe19e Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Sat, 19 Aug 2023 17:42:55 -0400
Subject: [PATCH 01/18] add store currentLines based on currentBoxes

---
 src/cache.js              |  12 ++
 src/store/currentBoxes.js |   9 --
 src/store/currentLines.js | 299 ++++++++++++++++++++++++++++++++++++++
 src/store/currentSpace.js |  26 +++-
 src/store/history.js      |  19 ++-
 src/store/store.js        |   2 +
 src/utils.js              |   2 +-
 7 files changed, 350 insertions(+), 19 deletions(-)
 create mode 100644 src/store/currentLines.js

diff --git a/src/cache.js b/src/cache.js
index 9c0b398b9..9a252b782 100644
--- a/src/cache.js
+++ b/src/cache.js
@@ -178,6 +178,18 @@ export default {
     space.cacheDate = Date.now()
     this.storeLocal(`space-${spaceId}`, space)
   }, 200),
+  updateSpaceLinesDebounced: debounce(function (lines, spaceId) {
+    lines = utils.denormalizeItems(lines)
+    let space = this.space(spaceId)
+    if (!utils.objectHasKeys(space)) {
+      console.warn(updateErrorMessage)
+      return
+    }
+    lines = utils.denormalizeItems(lines)
+    space.lines = lines
+    space.cacheDate = Date.now()
+    this.storeLocal(`space-${spaceId}`, space)
+  }, 200),
   addToSpace ({ cards, connections, connectionTypes }, spaceId) {
     let space = this.space(spaceId)
     space.cards = space.cards || []
diff --git a/src/store/currentBoxes.js b/src/store/currentBoxes.js
index ca5b86f93..7620ce930 100644
--- a/src/store/currentBoxes.js
+++ b/src/store/currentBoxes.js
@@ -369,7 +369,6 @@ export default {
         y: endCursor.y - prevCursor.y
       }
       let boxes = context.getters.isSelected
-      boxes = boxes.filter(box => !box.isLocked)
       boxes = boxes.filter(box => context.rootGetters['currentUser/canEditBox'](box))
       // prevent boxes bunching up at 0
       boxes.forEach(box => {
@@ -483,14 +482,6 @@ export default {
       const boxes = boxIds.map(id => getters.byId(id))
       return boxes
     },
-    isNotLocked: (state, getters) => {
-      let boxes = getters.all
-      return boxes.filter(box => !box.isLocked)
-    },
-    isLocked: (state, getters) => {
-      let boxes = getters.all
-      return boxes.filter(box => box.isLocked)
-    },
     colors: (state, getters) => {
       const boxes = getters.all
       let colors = boxes.map(box => box.color)
diff --git a/src/store/currentLines.js b/src/store/currentLines.js
new file mode 100644
index 000000000..5a22e9b54
--- /dev/null
+++ b/src/store/currentLines.js
@@ -0,0 +1,299 @@
+// import utils from '@/utils.js'
+import cache from '@/cache.js'
+import utils from '@/utils.js'
+
+import { nanoid } from 'nanoid'
+import randomColor from 'randomcolor'
+import uniq from 'lodash-es/uniq'
+
+// normalized state
+// https://github.com/vuejs/vuejs.org/issues/1636
+
+let currentSpaceId
+let prevMovePositions = {}
+
+export default {
+  namespaced: true,
+  state: {
+    ids: [],
+    lines: {}
+  },
+  mutations: {
+
+    // init
+
+    clear: (state) => {
+      state.ids = []
+      state.lines = {}
+    },
+    restore: (state, lines) => {
+      let ids = []
+      lines.forEach(line => {
+        ids.push(line.id)
+        state.lines[line.id] = line
+      })
+      state.ids = state.ids.concat(ids)
+    },
+
+    // create
+
+    create: (state, line) => {
+      state.ids.push(line.id)
+      state.lines[line.id] = line
+      cache.updateSpace('lines', state.lines, currentSpaceId)
+    },
+
+    // update
+
+    update: (state, line) => {
+      const keys = Object.keys(line)
+      keys.forEach(key => {
+        state.lines[line.id][key] = line[key]
+      })
+      cache.updateSpace('lines', state.lines, currentSpaceId)
+    },
+    move: (state, { lines, spaceId }) => {
+      lines.forEach(line => {
+        state.lines[line.id].y = line.y
+      })
+      cache.updateSpaceLinesDebounced(state.lines, currentSpaceId)
+    },
+
+    // broadcast
+
+    moveWhileDraggingBroadcast: (state, { lines }) => {
+      lines.forEach(line => {
+        const element = document.querySelector(`.line[data-line-id="${line.id}"]`)
+        element.style.left = line.x + 'px'
+        element.style.top = line.y + 'px'
+      })
+    },
+    moveBroadcast: (state, { lines }) => {
+      lines.forEach(updated => {
+        const line = state.lines[updated.id]
+        if (!line) { return }
+        line.x = updated.x
+        line.y = updated.y
+      })
+      cache.updateSpaceLinesDebounced(state.lines, currentSpaceId)
+    },
+
+    // remove
+
+    remove: (state, lineToRemove) => {
+      if (!lineToRemove) { return }
+      const line = state.lines[lineToRemove.id]
+      if (!line) { return }
+      state.ids = state.ids.filter(id => id !== line.id)
+      delete state.lines[line.id]
+      cache.updateSpace('lines', state.lines, currentSpaceId)
+    }
+  },
+  actions: {
+
+    // init
+
+    updateSpaceId: (context, spaceId) => {
+      currentSpaceId = spaceId
+    },
+    mergeUnique: (context, { newItems, itemType }) => {
+      newItems.forEach(newLine => {
+        let shouldUpdate
+        let prevLine = context.getters.byId(newLine.id)
+        let line = { id: newLine.id }
+        let keys = Object.keys(newLine)
+        keys = keys.filter(key => key !== 'id')
+        keys.forEach(key => {
+          if (prevLine[key] !== newLine[key]) {
+            line[key] = newLine[key]
+            shouldUpdate = true
+          }
+        })
+        if (!shouldUpdate) { return }
+        context.commit('update', line)
+      })
+    },
+    mergeRemove: (context, { removeItems, itemType }) => {
+      removeItems.forEach(line => {
+        context.commit('remove', line)
+      })
+    },
+
+    // create
+
+    add: (context, { line, shouldResize }) => {
+      const count = context.state.ids.length
+      const minLineSize = 70
+      const isThemeDark = context.rootState.currentUser.theme === 'dark'
+      let color = randomColor({ luminosity: 'light' })
+      if (isThemeDark) {
+        color = randomColor({ luminosity: 'dark' })
+      }
+      line = {
+        id: line.id || nanoid(),
+        spaceId: currentSpaceId,
+        userId: context.rootState.currentUser.id,
+        y: line.y,
+        color: line.color || color,
+        fill: line.fill || 'filled', // empty, filled
+        name: line.name || `Line ${count}`
+      }
+      context.dispatch('history/add', { lines: [line] }, { root: true })
+      context.commit('create', line)
+      context.dispatch('api/addToQueue', { name: 'createLine', body: line }, { root: true })
+      context.dispatch('broadcast/update', { updates: line, type: 'createLine', handler: 'currentLines/create' }, { root: true })
+      if (shouldResize) {
+        context.dispatch('history/pause', null, { root: true })
+        context.commit('currentUserIsResizingLine', true, { root: true })
+        context.commit('currentUserIsResizingLineIds', [line.id], { root: true })
+      }
+    },
+
+    // update
+
+    update: (context, line) => {
+      context.dispatch('history/add', { lines: [line] }, { root: true })
+      context.commit('update', line)
+      context.dispatch('api/addToQueue', { name: 'updateLine', body: line }, { root: true })
+      context.dispatch('broadcast/update', { updates: line, type: 'updateLine', handler: 'currentLines/update' }, { root: true })
+    },
+    updateName (context, { line, newName }) {
+      const canEditLine = context.rootGetters['currentUser/canEditLine'](line)
+      if (!canEditLine) { return }
+      context.dispatch('update', {
+        id: line.id,
+        name: newName
+      })
+    },
+
+    // move
+
+    move: (context, { endCursor, prevCursor, delta }) => {
+      const zoom = context.rootGetters.spaceCounterZoomDecimal
+      if (!endCursor || !prevCursor) { return }
+      endCursor = {
+        x: endCursor.x * zoom,
+        y: endCursor.y * zoom
+      }
+      delta = delta || {
+        x: endCursor.x - prevCursor.x,
+        y: endCursor.y - prevCursor.y
+      }
+      let lines = context.getters.isSelected
+      lines = lines.filter(line => context.rootGetters['currentUser/canEditLine'](line))
+      // prevent lines bunching up at 0
+      lines.forEach(line => {
+        if (!line) { return }
+        if (line.x === 0) { delta.x = Math.max(0, delta.x) }
+        if (line.y === 0) { delta.y = Math.max(0, delta.y) }
+      })
+      lines = lines.filter(line => Boolean(line))
+      // prevent lines with null or negative positions
+      lines = utils.clone(lines)
+      lines = lines.map(line => {
+        let position
+        if (prevMovePositions[line.id]) {
+          position = prevMovePositions[line.id]
+        } else {
+          position = utils.linePositionFromElement(line.id)
+        }
+        line.x = position.x
+        line.y = position.y
+        // x
+        if (line.x === undefined || line.x === null) {
+          delete line.x
+        } else {
+          line.x = Math.max(0, line.x + delta.x)
+          line.x = Math.round(line.x)
+        }
+        // y
+        if (line.y === undefined || line.y === null) {
+          delete line.y
+        } else {
+          line.y = Math.max(0, line.y + delta.y)
+          line.y = Math.round(line.y)
+        }
+        line = {
+          name: line.name,
+          x: line.x,
+          y: line.y,
+          id: line.id
+        }
+        prevMovePositions[line.id] = line
+        return line
+      })
+      // update
+      context.commit('move', { lines })
+      context.commit('linesWereDragged', true, { root: true })
+      context.dispatch('broadcast/update', { updates: { lines }, type: 'moveLines', handler: 'currentLines/moveWhileDraggingBroadcast' }, { root: true })
+    },
+    afterMove: (context) => {
+      prevMovePositions = {}
+      const currentDraggingLineId = context.rootState.currentDraggingLineId
+      const spaceId = context.rootState.currentSpace.id
+      let lineIds = context.getters.isSelectedIds
+      lineIds = lineIds.filter(line => Boolean(line))
+      if (!lineIds.length) { return }
+      let lines = lineIds.map(id => {
+        let line = context.getters.byId(id)
+        if (!line) { return }
+        line = utils.clone(line)
+        if (!line) { return }
+        const position = utils.linePositionFromElement(id)
+        line.x = position.x
+        line.y = position.y
+        const { x, y } = line
+        return { id, x, y }
+      })
+      lines = lines.filter(line => Boolean(line))
+      context.commit('move', { lines, spaceId })
+      lines = lines.filter(line => line)
+      lines.forEach(line => {
+        context.dispatch('api/addToQueue', {
+          name: 'updateLine',
+          body: line
+        }, { root: true })
+      })
+      const line = context.getters.byId(currentDraggingLineId)
+      context.dispatch('broadcast/update', { updates: { lines }, type: 'moveLines', handler: 'currentLines/moveBroadcast' }, { root: true })
+      context.dispatch('history/resume', null, { root: true })
+      context.dispatch('history/add', { lines, useSnapshot: true }, { root: true })
+    },
+
+    // remove
+
+    remove: (context, line) => {
+      context.dispatch('api/addToQueue', { name: 'removeLine', body: line }, { root: true })
+      context.dispatch('broadcast/update', { updates: line, type: 'removeLine', handler: 'currentLines/remove' }, { root: true })
+      context.commit('remove', line)
+      context.dispatch('history/add', { lines: [line], isRemoved: true }, { root: true })
+    }
+  },
+  getters: {
+    byId: (state) => (id) => {
+      return state.lines[id]
+    },
+    all: (state) => {
+      return state.ids.map(id => state.lines[id])
+    },
+    isSelectedIds: (state, getters, rootState, rootGetters) => {
+      const currentDraggingId = rootState.currentDraggingLineId
+      const multipleSelectedIds = rootState.multipleLinesSelectedIds
+      let lineIds = multipleSelectedIds.concat(currentDraggingId)
+      lineIds = uniq(lineIds)
+      lineIds = lineIds.filter(id => Boolean(id))
+      return lineIds
+    },
+    isSelected: (state, getters) => {
+      const lineIds = getters.isSelectedIds
+      const lines = lineIds.map(id => getters.byId(id))
+      return lines
+    },
+    colors: (state, getters) => {
+      const lines = getters.all
+      let colors = lines.map(line => line.color)
+      colors = colors.filter(color => Boolean(color))
+      return uniq(colors)
+    }
+  }
+}
diff --git a/src/store/currentSpace.js b/src/store/currentSpace.js
index 0b6974ff6..9d457c8ce 100644
--- a/src/store/currentSpace.js
+++ b/src/store/currentSpace.js
@@ -347,6 +347,7 @@ const currentSpace = {
         space.connections = []
         space.cards = []
         space.boxes = []
+        space.lines = []
       } else {
         space.connectionTypes[0].color = randomColor({ luminosity: 'light' })
         space.cards[1].x = space.cards[1].x + random(0, 20)
@@ -603,9 +604,9 @@ const currentSpace = {
       context.dispatch('currentConnections/updateSpaceId', space.id, { root: true })
       context.dispatch('currentBoxes/updateSpaceId', space.id, { root: true })
     },
-    restoreSpaceInChunks: (context, { space, isRemote, addCards, addConnections, addConnectionTypes, addBoxes }) => {
+    restoreSpaceInChunks: (context, { space, isRemote, addCards, addConnections, addConnectionTypes, addBoxes, addLines }) => {
       if (!utils.objectHasKeys(space)) { return }
-      console.log('🌱 Restoring space', space, { 'isRemote': isRemote, addCards, addConnections, addConnectionTypes, addBoxes })
+      console.log('🌱 Restoring space', space, { 'isRemote': isRemote, addCards, addConnections, addConnectionTypes, addBoxes, addLines })
       const chunkSize = 50
       const timeStart = utils.normalizeToUnixTime(new Date())
       const origin = { x: window.scrollX, y: window.scrollY }
@@ -617,6 +618,7 @@ const currentSpace = {
       cards = utils.normalizeItems(cards)
       connections = utils.normalizeItems(connections)
       let boxes = addBoxes || space.boxes || []
+      let lines = addLines || space.lines || []
       // sort cards
       const cardIds = Object.keys(cards)
       cards = cardIds.map(id => {
@@ -646,6 +648,7 @@ const currentSpace = {
         context.commit('currentCards/clear', null, { root: true })
         context.commit('currentConnections/clear', null, { root: true })
         context.commit('currentBoxes/clear', null, { root: true })
+        context.commit('currentLines/clear', null, { root: true })
         context.dispatch('updateModulesSpaceId', space)
       }
       context.commit('isLoadingSpace', true, { root: true })
@@ -665,13 +668,14 @@ const currentSpace = {
       // restore space
       if (!primaryChunks.length) {
         context.commit('currentBoxes/restore', boxes, { root: true })
+        context.commit('currentLines/restore', lines, { root: true })
         context.dispatch('restoreSpaceComplete', { space, isRemote, timeStart })
         return
       }
-      // restore types
+      // restore other items
       context.commit('currentConnections/restoreTypes', connectionTypes, { root: true })
-      // restore boxes
       context.commit('currentBoxes/restore', boxes, { root: true })
+      context.commit('currentLines/restore', lines, { root: true })
       // restore chunks
       primaryChunks.forEach((chunk, index) => {
         defer(function () {
@@ -708,10 +712,12 @@ const currentSpace = {
       let cards = context.rootState.currentCards.ids.length
       let connections = context.rootState.currentConnections.ids.length
       let boxes = context.rootState.currentBoxes.ids.length
+      let lines = context.rootState.currentLines.ids.length
       console.log(`${emoji} Restore space complete in ${timeEnd - timeStart}ms,`, {
         cards,
         connections,
         boxes,
+        lines,
         spaceName: space.name,
         isRemote,
         cardUsers: context.rootGetters['currentCards/userIds']
@@ -798,11 +804,17 @@ const currentSpace = {
       const boxResults = utils.mergeSpaceKeyValues({ prevItems: boxes, newItems: remoteSpace.boxes })
       context.dispatch('currentBoxes/mergeUnique', { newItems: boxResults.updateItems, itemType: 'box' }, { root: true })
       context.dispatch('currentBoxes/mergeRemove', { removeItems: boxResults.removeItems, itemType: 'box' }, { root: true })
+      // lines
+      const lines = context.rootGetters['currentBoxes/all']
+      const lineResults = utils.mergeSpaceKeyValues({ prevItems: lines, newItems: remoteSpace.lines })
+      context.dispatch('currentBoxes/mergeUnique', { newItems: lineResults.updateItems, itemType: 'line' }, { root: true })
+      context.dispatch('currentBoxes/mergeRemove', { removeItems: lineResults.removeItems, itemType: 'line' }, { root: true })
       console.log('🎑 Merge space', {
         cards: cardResults,
         types: connectionTypeReults,
         connections: connectionResults,
         boxes: boxResults,
+        lines: lineResults,
         localSpace: space,
         space: remoteSpace
       })
@@ -812,7 +824,8 @@ const currentSpace = {
         addCards: cardResults.addItems,
         addConnectionTypes: connectionTypeReults.addItems,
         addConnections: connectionResults.addItems,
-        addBoxes: boxResults.addItems
+        addBoxes: boxResults.addItems,
+        addLines: lineResults.addItems
       })
     },
     loadLastSpace: async (context) => {
@@ -1140,7 +1153,8 @@ const currentSpace = {
     itemColors: (state, getters, rootState, rootGetters) => {
       const cardColors = rootGetters['currentCards/colors']
       const boxColors = rootGetters['currentBoxes/colors']
-      const colors = cardColors.concat(boxColors)
+      const lineColors = rootGetters['currentLines/colors']
+      const colors = cardColors.concat(boxColors).concat(lineColors)
       return uniq(colors)
     },
 
diff --git a/src/store/history.js b/src/store/history.js
index d82ecc7d6..a40278364 100644
--- a/src/store/history.js
+++ b/src/store/history.js
@@ -74,7 +74,7 @@ const self = {
     patches: [],
     pointer: 0,
     isPaused: false,
-    snapshots: { cards: {}, connections: {}, connectionTypes: {}, boxes: {} }
+    snapshots: { cards: {}, connections: {}, connectionTypes: {}, boxes: {}, lines: {} }
   },
   mutations: {
     add: (state, patch) => {
@@ -140,7 +140,8 @@ const self = {
       const connections = utils.clone(context.rootState.currentConnections.connections)
       const connectionTypes = utils.clone(context.rootState.currentConnections.types)
       const boxes = utils.clone(context.rootState.currentBoxes.boxes)
-      context.commit('snapshots', { cards, connections, connectionTypes, boxes })
+      const lines = utils.clone(context.rootState.currentLines.lines)
+      context.commit('snapshots', { cards, connections, connectionTypes, boxes, lines })
     },
     pause: (context) => {
       if (context.state.isPaused) { return }
@@ -153,7 +154,7 @@ const self = {
 
     // Add Patch
 
-    add: (context, { cards, connections, connectionTypes, boxes, useSnapshot, isRemoved }) => {
+    add: (context, { cards, connections, connectionTypes, boxes, lines, useSnapshot, isRemoved }) => {
       if (context.state.isPaused) { return }
       let patch = []
       // cards
@@ -200,6 +201,18 @@ const self = {
         })
         patch = patch.concat(boxes)
       }
+      // lines
+      if (lines) {
+        lines = lines.map(line => {
+          let previous = context.rootGetters['currentlines/byId'](line.id)
+          if (useSnapshot) {
+            previous = context.state.snapshots['lines'][line.id]
+          }
+          return normalizeUpdates({ item: line, itemType: 'line', previous, isRemoved })
+        })
+        patch = patch.concat(lines)
+      }
+      // all
       context.commit('add', patch)
       // context.commit('trim')
     },
diff --git a/src/store/store.js b/src/store/store.js
index 1f38a458c..3b0d819be 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -12,6 +12,7 @@ import currentSpace from '@/store/currentSpace.js'
 import currentCards from '@/store/currentCards.js'
 import currentConnections from '@/store/currentConnections.js'
 import currentBoxes from '@/store/currentBoxes.js'
+import currentLines from '@/store/currentLines.js'
 import upload from '@/store/upload.js'
 import userNotifications from '@/store/userNotifications.js'
 // store plugins
@@ -1753,6 +1754,7 @@ const store = createStore({
     currentCards,
     currentConnections,
     currentBoxes,
+    currentLines,
     upload,
     userNotifications
   },
diff --git a/src/utils.js b/src/utils.js
index 462cd8bb6..1f4570f77 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1168,7 +1168,7 @@ export default {
     return space
   },
   emptySpace (spaceId) {
-    return { id: spaceId, moonPhase: '', background: '', backgroundTint: '', cards: [], connections: [], connectionTypes: [], boxes: [], tags: [], users: [], userId: '', collaborators: [], spectators: [], clients: [], isHidden: false, visits: 0 }
+    return { id: spaceId, moonPhase: '', background: '', backgroundTint: '', cards: [], connections: [], connectionTypes: [], boxes: [], lines: [], tags: [], users: [], userId: '', collaborators: [], spectators: [], clients: [], isHidden: false, visits: 0 }
   },
   clearSpaceMeta (space, type) {
     space.originSpaceId = space.id

From a3d38777ce39cce11941c3b9d10a0b2b162d8322 Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Sat, 19 Aug 2023 17:51:10 -0400
Subject: [PATCH 02/18] stub vertical segmented toolbar buttons

---
 src/App.vue                | 31 +++++++++++++++----------------
 src/components/Toolbar.vue |  4 +++-
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 653dd99b4..52f7c8c05 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -739,22 +739,21 @@ dialog
     &:last-child
       border-top-right-radius var(--entity-radius)
       border-bottom-right-radius var(--entity-radius)
-  // &.vertical
-  //   display flex
-  //   flex-direction column
-  //   .button-wrap
-  //     button
-  //       min-width 24px
-  //       border-radius 0
-  //       margin-bottom -1px
-  //     &:first-child
-  //       button
-  //         border-top-left-radius var(--small-entity-radius)
-  //         border-top-right-radius var(--small-entity-radius)
-  //     &:last-child
-  //       button
-  //         border-bottom-left-radius var(--small-entity-radius)
-  //         border-bottom-right-radius var(--small-entity-radius)
+  &.vertical
+    display flex
+    flex-direction column
+    button
+      min-width 24px
+      border-radius 0
+      margin-bottom -1px
+      &:first-child
+        border-top-left-radius var(--entity-radius)
+        border-top-right-radius var(--entity-radius)
+      &:last-child
+        border-bottom-left-radius var(--entity-radius)
+        border-bottom-right-radius var(--entity-radius)
+    button + button
+      margin-left 0
 
   button + button,
   label + button,
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index e7721209f..ba10efed2 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -1,11 +1,13 @@
 <template lang="pug">
 nav.toolbar(v-if="visible")
   //- Box
-  .segmented-buttons
+  .segmented-buttons.vertical
     button(v-if="canEditSpace" :class="{ active: currentUserToolbarIsBox }" @click="toggleToolbar('box')" :title="boxBadgeLabel")
       img.icon.box-icon(src="@/assets/box.svg")
       .label-badge.toolbar-badge-wrap.jiggle(v-if="currentUserToolbarIsBox")
         span {{boxBadgeLabel}}
+    button(title="Add Line (L)")
+      span L
 </template>
 
 <script>

From 1731767c3f4eb7290ea03cfef3097dafb47e6979 Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Sat, 19 Aug 2023 18:11:17 -0400
Subject: [PATCH 03/18] add line icon to toolbar

---
 src/assets/line.svg        | 1 +
 src/components/Preload.vue | 1 +
 src/components/Toolbar.vue | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/line.svg

diff --git a/src/assets/line.svg b/src/assets/line.svg
new file mode 100644
index 000000000..4d68f768f
--- /dev/null
+++ b/src/assets/line.svg
@@ -0,0 +1 @@
+<svg height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m.75 5.5h10.5" fill="none" stroke="#000" stroke-linecap="round"/></svg>
\ No newline at end of file
diff --git a/src/components/Preload.vue b/src/components/Preload.vue
index 4376d4dbb..ab77356c7 100644
--- a/src/components/Preload.vue
+++ b/src/components/Preload.vue
@@ -66,6 +66,7 @@
     img.icon(src="@/assets/inbox.svg")
     img.icon(src="@/assets/leave.svg")
     img.icon(src="@/assets/light.svg")
+    img.icon(src="@/assets/line.svg")
     img.icon(src="@/assets/line-break.svg")
     img.icon(src="@/assets/lock.svg")
     img.icon(src="@/assets/mail.svg")
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index ba10efed2..b64087eac 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -7,7 +7,7 @@ nav.toolbar(v-if="visible")
       .label-badge.toolbar-badge-wrap.jiggle(v-if="currentUserToolbarIsBox")
         span {{boxBadgeLabel}}
     button(title="Add Line (L)")
-      span L
+      img.icon(src="@/assets/line.svg")
 </template>
 
 <script>

From 11d768b1af2d2661beb709bc5ddaae5e7e2ffeba Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Sat, 19 Aug 2023 18:14:09 -0400
Subject: [PATCH 04/18] static label

---
 src/components/Toolbar.vue | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index b64087eac..ba38fe6d9 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -1,11 +1,12 @@
 <template lang="pug">
 nav.toolbar(v-if="visible")
-  //- Box
   .segmented-buttons.vertical
-    button(v-if="canEditSpace" :class="{ active: currentUserToolbarIsBox }" @click="toggleToolbar('box')" :title="boxBadgeLabel")
+    //- Box
+    button(v-if="canEditSpace" :class="{ active: currentUserToolbarIsBox }" @click="toggleToolbar('box')" title="Add Box (B)")
       img.icon.box-icon(src="@/assets/box.svg")
       .label-badge.toolbar-badge-wrap.jiggle(v-if="currentUserToolbarIsBox")
-        span {{boxBadgeLabel}}
+        span Add Box (B)
+    //- Line
     button(title="Add Line (L)")
       img.icon(src="@/assets/line.svg")
 </template>
@@ -18,19 +19,11 @@ export default {
   },
   computed: {
     canEditSpace () { return this.$store.getters['currentUser/canEditSpace']() },
-    isTouchDevice () { return this.$store.state.isTouchDevice },
     currentUserToolbar () { return this.$store.state.currentUserToolbar },
     // currentUserToolbarIsCard () { return this.currentUserToolbar === 'card' },
     currentUserToolbarIsBox () {
       if (this.$store.state.currentUserIsResizingBox) { return }
       return this.currentUserToolbar === 'box'
-    },
-    boxBadgeLabel () {
-      let label = 'Draw Box'
-      if (!this.isTouchDevice) {
-        label = label + ' (B)'
-      }
-      return label
     }
   },
   methods: {

From 63e39925c8f7378c72ba874aba84fb5571f589ad Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Sat, 19 Aug 2023 18:30:49 -0400
Subject: [PATCH 05/18] noop refactor: toolbar to composition

---
 src/components/Toolbar.vue | 88 ++++++++++++++++++++++----------------
 1 file changed, 50 insertions(+), 38 deletions(-)

diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index ba38fe6d9..7b8124cbb 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -1,51 +1,64 @@
+<script setup>
+import { reactive, computed, onMounted, defineProps, defineEmits, watch, ref, nextTick } from 'vue'
+import { useStore } from 'vuex'
+const store = useStore()
+
+onMounted(() => {
+  store.subscribe((mutation, state) => {
+    if (mutation.type === 'currentUserToolbar') {
+      store.dispatch('closeAllDialogs')
+      store.dispatch('clearMultipleSelected')
+    }
+  })
+})
+
+const props = defineProps({
+  visible: Boolean
+})
+
+const visible = computed(() => props.visible && canEditSpace.value)
+const canEditSpace = computed(() => store.getters['currentUser/canEditSpace']())
+
+// toolbar state
+
+const currentUserToolbar = computed(() => store.state.currentUserToolbar)
+const currentUserToolbarIsBox = computed(() => {
+  if (store.state.currentUserIsResizingBox) { return }
+  return store.state.currentUserToolbar === 'box'
+})
+const toggleToolbar = (value) => {
+  const initialValue = 'card'
+  const shouldToggleOffBox = value === 'box' && currentUserToolbarIsBox.value
+  if (shouldToggleOffBox) {
+    store.commit('currentUserToolbar', initialValue)
+  } else {
+    store.commit('currentUserToolbar', value)
+  }
+}
+
+// line
+
+const addLine = () => {
+  store.dispatch('closeAllDialogs')
+  store.dispatch('clearMultipleSelected')
+  console.log('♥️♥️♥️♥️')
+}
+
+</script>
+
 <template lang="pug">
 nav.toolbar(v-if="visible")
   .segmented-buttons.vertical
     //- Box
-    button(v-if="canEditSpace" :class="{ active: currentUserToolbarIsBox }" @click="toggleToolbar('box')" title="Add Box (B)")
+    button(:class="{ active: currentUserToolbarIsBox }" @click="toggleToolbar('box')" title="Add Box (B)")
       img.icon.box-icon(src="@/assets/box.svg")
       .label-badge.toolbar-badge-wrap.jiggle(v-if="currentUserToolbarIsBox")
         span Add Box (B)
     //- Line
-    button(title="Add Line (L)")
+    button(@click="addLine" title="Add Line (L)")
       img.icon(src="@/assets/line.svg")
 </template>
 
-<script>
-export default {
-  name: 'Toolbar',
-  props: {
-    visible: Boolean
-  },
-  computed: {
-    canEditSpace () { return this.$store.getters['currentUser/canEditSpace']() },
-    currentUserToolbar () { return this.$store.state.currentUserToolbar },
-    // currentUserToolbarIsCard () { return this.currentUserToolbar === 'card' },
-    currentUserToolbarIsBox () {
-      if (this.$store.state.currentUserIsResizingBox) { return }
-      return this.currentUserToolbar === 'box'
-    }
-  },
-  methods: {
-    toggleToolbar (value) {
-      const initialValue = 'card'
-      const shouldToggleOffBox = value === 'box' && this.currentUserToolbarIsBox
-      if (shouldToggleOffBox) {
-        this.$store.commit('currentUserToolbar', initialValue)
-      } else {
-        this.$store.commit('currentUserToolbar', value)
-      }
-    }
-  },
-  watch: {
-    currentUserToolbar (value) {
-      this.$store.dispatch('closeAllDialogs')
-      this.$store.dispatch('clearMultipleSelected')
-    }
-  }
-}
-</script>
-
 <style lang="stylus">
 .toolbar
   position absolute
@@ -61,5 +74,4 @@ export default {
     span
       width 100%
       color var(--primary)
-
 </style>

From 10b266c13565d44d0cf00a9f98a198bf7979764d Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Sat, 19 Aug 2023 18:34:21 -0400
Subject: [PATCH 06/18] revert box islocked

---
 src/store/currentBoxes.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/store/currentBoxes.js b/src/store/currentBoxes.js
index 7620ce930..ca5b86f93 100644
--- a/src/store/currentBoxes.js
+++ b/src/store/currentBoxes.js
@@ -369,6 +369,7 @@ export default {
         y: endCursor.y - prevCursor.y
       }
       let boxes = context.getters.isSelected
+      boxes = boxes.filter(box => !box.isLocked)
       boxes = boxes.filter(box => context.rootGetters['currentUser/canEditBox'](box))
       // prevent boxes bunching up at 0
       boxes.forEach(box => {
@@ -482,6 +483,14 @@ export default {
       const boxes = boxIds.map(id => getters.byId(id))
       return boxes
     },
+    isNotLocked: (state, getters) => {
+      let boxes = getters.all
+      return boxes.filter(box => !box.isLocked)
+    },
+    isLocked: (state, getters) => {
+      let boxes = getters.all
+      return boxes.filter(box => box.isLocked)
+    },
     colors: (state, getters) => {
       const boxes = getters.all
       let colors = boxes.map(box => box.color)

From d6c6d63093d95831eed87f3cc6726d403d0d7945 Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Sat, 19 Aug 2023 18:35:00 -0400
Subject: [PATCH 07/18] typo

---
 src/components/subsections/CardBoxActions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/subsections/CardBoxActions.vue b/src/components/subsections/CardBoxActions.vue
index d4a817248..b1848f30b 100644
--- a/src/components/subsections/CardBoxActions.vue
+++ b/src/components/subsections/CardBoxActions.vue
@@ -38,7 +38,7 @@ section.subsection.style-actions(v-if="visible" @click.left.stop="closeDialogs")
 
     //- Lock
     .button-wrap
-      button(:disabled="!canEditAll" @click="toggleIsLocked" :class="{active: isLocked}" title="Lock Card to Background")
+      button(:disabled="!canEditAll" @click="toggleIsLocked" :class="{active: isLocked}" title="Lock to Background")
         img.icon(src="@/assets/lock.svg")
     //- Comment
     .button-wrap(v-if="isCards")

From bb57913d551d4097310106fe3a5d6d45a795c0c1 Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Sat, 19 Aug 2023 18:47:08 -0400
Subject: [PATCH 08/18] typo

---
 src/store/history.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/history.js b/src/store/history.js
index a40278364..178d389f0 100644
--- a/src/store/history.js
+++ b/src/store/history.js
@@ -204,7 +204,7 @@ const self = {
       // lines
       if (lines) {
         lines = lines.map(line => {
-          let previous = context.rootGetters['currentlines/byId'](line.id)
+          let previous = context.rootGetters['currentLines/byId'](line.id)
           if (useSnapshot) {
             previous = context.state.snapshots['lines'][line.id]
           }

From 57baa33414885df21acabb5c3a2aa633f06f5953 Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Sat, 19 Aug 2023 18:49:30 -0400
Subject: [PATCH 09/18] add isHorizontal for future use, stub add line

---
 src/components/Toolbar.vue | 2 +-
 src/store/currentLines.js  | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index 7b8124cbb..96ab794f8 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -41,7 +41,7 @@ const toggleToolbar = (value) => {
 const addLine = () => {
   store.dispatch('closeAllDialogs')
   store.dispatch('clearMultipleSelected')
-  console.log('♥️♥️♥️♥️')
+  store.dispatch('currentLines/add', { y: 200 })
 }
 
 </script>
diff --git a/src/store/currentLines.js b/src/store/currentLines.js
index 5a22e9b54..1a51cff98 100644
--- a/src/store/currentLines.js
+++ b/src/store/currentLines.js
@@ -136,7 +136,8 @@ export default {
         y: line.y,
         color: line.color || color,
         fill: line.fill || 'filled', // empty, filled
-        name: line.name || `Line ${count}`
+        name: line.name || `Line ${count}`,
+        isHorizontal: line.isHorizontal || true
       }
       context.dispatch('history/add', { lines: [line] }, { root: true })
       context.commit('create', line)

From 69b463325e210cb5d222112b53473422b69e900e Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Sat, 19 Aug 2023 18:52:08 -0400
Subject: [PATCH 10/18] cleanup, comment out currently unused line.x pieces

---
 src/store/currentLines.js | 37 +++++++++++++++----------------------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/store/currentLines.js b/src/store/currentLines.js
index 1a51cff98..ba9dce7d6 100644
--- a/src/store/currentLines.js
+++ b/src/store/currentLines.js
@@ -64,7 +64,7 @@ export default {
     moveWhileDraggingBroadcast: (state, { lines }) => {
       lines.forEach(line => {
         const element = document.querySelector(`.line[data-line-id="${line.id}"]`)
-        element.style.left = line.x + 'px'
+        // element.style.left = line.x + 'px'
         element.style.top = line.y + 'px'
       })
     },
@@ -72,7 +72,7 @@ export default {
       lines.forEach(updated => {
         const line = state.lines[updated.id]
         if (!line) { return }
-        line.x = updated.x
+        // line.x = updated.x
         line.y = updated.y
       })
       cache.updateSpaceLinesDebounced(state.lines, currentSpaceId)
@@ -121,7 +121,7 @@ export default {
 
     // create
 
-    add: (context, { line, shouldResize }) => {
+    add: (context, line) => {
       const count = context.state.ids.length
       const minLineSize = 70
       const isThemeDark = context.rootState.currentUser.theme === 'dark'
@@ -135,7 +135,6 @@ export default {
         userId: context.rootState.currentUser.id,
         y: line.y,
         color: line.color || color,
-        fill: line.fill || 'filled', // empty, filled
         name: line.name || `Line ${count}`,
         isHorizontal: line.isHorizontal || true
       }
@@ -143,11 +142,6 @@ export default {
       context.commit('create', line)
       context.dispatch('api/addToQueue', { name: 'createLine', body: line }, { root: true })
       context.dispatch('broadcast/update', { updates: line, type: 'createLine', handler: 'currentLines/create' }, { root: true })
-      if (shouldResize) {
-        context.dispatch('history/pause', null, { root: true })
-        context.commit('currentUserIsResizingLine', true, { root: true })
-        context.commit('currentUserIsResizingLineIds', [line.id], { root: true })
-      }
     },
 
     // update
@@ -185,7 +179,7 @@ export default {
       // prevent lines bunching up at 0
       lines.forEach(line => {
         if (!line) { return }
-        if (line.x === 0) { delta.x = Math.max(0, delta.x) }
+        // if (line.x === 0) { delta.x = Math.max(0, delta.x) }
         if (line.y === 0) { delta.y = Math.max(0, delta.y) }
       })
       lines = lines.filter(line => Boolean(line))
@@ -198,15 +192,15 @@ export default {
         } else {
           position = utils.linePositionFromElement(line.id)
         }
-        line.x = position.x
+        // line.x = position.x
         line.y = position.y
         // x
-        if (line.x === undefined || line.x === null) {
-          delete line.x
-        } else {
-          line.x = Math.max(0, line.x + delta.x)
-          line.x = Math.round(line.x)
-        }
+        // if (line.x === undefined || line.x === null) {
+        //   delete line.x
+        // } else {
+        //   line.x = Math.max(0, line.x + delta.x)
+        //   line.x = Math.round(line.x)
+        // }
         // y
         if (line.y === undefined || line.y === null) {
           delete line.y
@@ -216,7 +210,6 @@ export default {
         }
         line = {
           name: line.name,
-          x: line.x,
           y: line.y,
           id: line.id
         }
@@ -225,7 +218,7 @@ export default {
       })
       // update
       context.commit('move', { lines })
-      context.commit('linesWereDragged', true, { root: true })
+      // context.commit('linesWereDragged', true, { root: true })
       context.dispatch('broadcast/update', { updates: { lines }, type: 'moveLines', handler: 'currentLines/moveWhileDraggingBroadcast' }, { root: true })
     },
     afterMove: (context) => {
@@ -241,10 +234,10 @@ export default {
         line = utils.clone(line)
         if (!line) { return }
         const position = utils.linePositionFromElement(id)
-        line.x = position.x
+        // line.x = position.x
         line.y = position.y
-        const { x, y } = line
-        return { id, x, y }
+        // const { x, y } = line
+        return { id, y: line.y }
       })
       lines = lines.filter(line => Boolean(line))
       context.commit('move', { lines, spaceId })

From 693f8180db08d6904ba60d69ae6d19e3af63a67c Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Sat, 19 Aug 2023 23:07:43 -0400
Subject: [PATCH 11/18] draw lines

---
 src/components/Box.vue            |  1 +
 src/components/Boxes.vue          |  3 +-
 src/components/Line.vue           | 88 +++++++++++++++++++++++++++++++
 src/components/Lines.vue          | 22 ++++++++
 src/components/SelectAllBelow.vue |  1 +
 src/views/Space.vue               |  3 ++
 6 files changed, 116 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Line.vue
 create mode 100644 src/components/Lines.vue

diff --git a/src/components/Box.vue b/src/components/Box.vue
index 0869d9f23..29de4495f 100644
--- a/src/components/Box.vue
+++ b/src/components/Box.vue
@@ -627,6 +627,7 @@ export default {
   min-height var(--min-box-size)
   min-width var(--min-box-size)
   pointer-events none
+  z-index -1
   &.hover
     box-shadow var(--hover-shadow)
   &.active
diff --git a/src/components/Boxes.vue b/src/components/Boxes.vue
index 365aa3155..9b7774a6f 100644
--- a/src/components/Boxes.vue
+++ b/src/components/Boxes.vue
@@ -15,8 +15,7 @@ export default {
   },
   computed: {
     isPainting () { return this.$store.state.currentUserIsPainting },
-    unlockedBoxes () { return this.$store.getters['currentBoxes/isNotLocked'] },
-    spaceZoomDecimal () { return this.$store.getters.spaceZoomDecimal }
+    unlockedBoxes () { return this.$store.getters['currentBoxes/isNotLocked'] }
   }
 }
 </script>
diff --git a/src/components/Line.vue b/src/components/Line.vue
new file mode 100644
index 000000000..18ba28bff
--- /dev/null
+++ b/src/components/Line.vue
@@ -0,0 +1,88 @@
+<script setup>
+import { reactive, computed, onMounted, defineProps, defineEmits, watch, ref, nextTick } from 'vue'
+import { useStore } from 'vuex'
+const store = useStore()
+
+// import utils from '@/utils.js'
+
+const props = defineProps({
+  line: Object
+})
+
+// styles
+
+const styles = computed(() => {
+  return {
+    top: props.line.y + 'px'
+  }
+})
+const infoStyles = computed(() => {
+  return {
+    backgroundColor: props.line.color
+  }
+})
+const horizontalLineStyles = computed(() => {
+  return {
+    backgroundColor: props.line.color,
+    width: store.state.pageWidth + 'px'
+  }
+})
+</script>
+
+<template lang="pug">
+.line(:key="props.line.id" :data-line-id="props.line.id" :style="styles")
+  .line-info.badge.button-badge(:style="infoStyles")
+    button.small-button
+      img.icon(src="@/assets/brush-y.svg")
+    span {{props.line.name}}
+  .line-horizontal(:style="horizontalLineStyles")
+
+//- :class="{hover: isHover, active: isDragging}"
+
+  //- .line-info(
+  //-   :data-line-id="line.id"
+  //-   :style="labelStyles"
+  //-   :class="{unselectable: isPainting, 'is-dark': colorIsDark}"
+  //-   tabindex="0"
+
+  //-   @mouseover="updateIsHover(true)"
+  //-   @mouseleave="updateIsHover(false)"
+  //-   @mousedown.left="startBoxInfoInteraction"
+
+  //-   @mouseup.left="endBoxInfoInteraction"
+  //-   @keyup.stop.enter="endBoxInfoInteraction"
+
+  //-   @touchstart="startLocking"
+  //-   @touchmove="updateCurrentTouchPosition"
+  //-   @touchend="endBoxInfoInteractionTouch"
+  //- )
+  //-   template(v-if="isH1")
+  //-     h1 {{h1Name}}
+  //-   template(v-else-if="isH2")
+  //-     h2 {{h2Name}}
+  //-   template(v-else)
+  //-     span {{line.name}}
+</template>
+
+<style lang="stylus">
+.line
+  position absolute
+  .line-info
+    width fit-content
+    transform translate(0, 15px)
+    cursor pointer
+    pointer-events auto
+    padding 6px
+    box-shadow none
+    border-radius var(--entity-radius)
+    border-top-left-radius 0
+    border-bottom-left-radius 0
+    button + span
+      margin-left 4px
+    button
+      background-color transparent
+  .line-horizontal
+    left 0
+    height 1px
+    // z-index -1
+</style>
diff --git a/src/components/Lines.vue b/src/components/Lines.vue
new file mode 100644
index 000000000..84e3a83ee
--- /dev/null
+++ b/src/components/Lines.vue
@@ -0,0 +1,22 @@
+<script setup>
+import { reactive, computed, onMounted, defineProps, defineEmits, watch, ref, nextTick } from 'vue'
+import { useStore } from 'vuex'
+
+import Line from '@/components/Line.vue'
+const store = useStore()
+
+const isPainting = computed(() => store.state.currentUserIsPainting)
+const lines = computed(() => store.getters['currentLines/all'])
+</script>
+
+<template lang="pug">
+.lines(:class="{unselectable: isPainting}")
+  template(v-for="line in lines")
+    Line(:line="line")
+</template>
+
+<style lang="stylus">
+.lines
+  position absolute
+  top 0
+</style>
diff --git a/src/components/SelectAllBelow.vue b/src/components/SelectAllBelow.vue
index 460c20ffe..89b14b131 100644
--- a/src/components/SelectAllBelow.vue
+++ b/src/components/SelectAllBelow.vue
@@ -43,6 +43,7 @@ export default {
       if (this.$store.state.currentUserIsDraggingCard) { return }
       if (this.$store.state.currentUserIsDraggingBox) { return }
       if (this.$store.state.isEmbedMode) { return }
+      if (event.target.closest('.line')) { return }
       const edgeThreshold = 30
       let header = document.querySelector('header').getBoundingClientRect().height
       let footer = document.querySelector('.footer-wrap footer')
diff --git a/src/views/Space.vue b/src/views/Space.vue
index 129d9214d..7741b1069 100644
--- a/src/views/Space.vue
+++ b/src/views/Space.vue
@@ -6,6 +6,7 @@ main#space.space(
   :style="styles"
   :data-zoom="spaceZoomDecimal"
 )
+  Lines
   Connections(:startCursor="startCursor")
   Boxes
   Cards
@@ -37,6 +38,7 @@ import ScrollAtEdgesHandler from '@/components/ScrollAtEdgesHandler.vue'
 import NotificationsWithPosition from '@/components/NotificationsWithPosition.vue'
 import BoxSelecting from '@/components/BoxSelecting.vue'
 import Boxes from '@/components/Boxes.vue'
+import Lines from '@/components/Lines.vue'
 import Cards from '@/components/Cards.vue'
 import Connections from '@/components/Connections.vue'
 import LockedItemButtons from '@/components/LockedItemButtons.vue'
@@ -64,6 +66,7 @@ export default {
     NotificationsWithPosition,
     BoxSelecting,
     Boxes,
+    Lines,
     Cards,
     LockedItemButtons,
     Connections,

From 5767ca67d990671dd092a6682bb4ffbbda400847 Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Sat, 19 Aug 2023 23:26:30 -0400
Subject: [PATCH 12/18] fix box click

---
 src/components/Box.vue  | 1 -
 src/components/Line.vue | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Box.vue b/src/components/Box.vue
index 29de4495f..0869d9f23 100644
--- a/src/components/Box.vue
+++ b/src/components/Box.vue
@@ -627,7 +627,6 @@ export default {
   min-height var(--min-box-size)
   min-width var(--min-box-size)
   pointer-events none
-  z-index -1
   &.hover
     box-shadow var(--hover-shadow)
   &.active
diff --git a/src/components/Line.vue b/src/components/Line.vue
index 18ba28bff..49fa3468d 100644
--- a/src/components/Line.vue
+++ b/src/components/Line.vue
@@ -84,5 +84,6 @@ const horizontalLineStyles = computed(() => {
   .line-horizontal
     left 0
     height 1px
-    // z-index -1
+    z-index -1
+    position relative
 </style>

From 9f2522401f3f0df75d9d0f3cc4b276d3dba9b12b Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Sun, 20 Aug 2023 21:31:49 -0400
Subject: [PATCH 13/18] isSelectingAllBelow to global state

---
 src/components/Line.vue           | 13 ++++++++++---
 src/components/SelectAllBelow.vue | 16 ++++++++--------
 src/store/store.js                |  5 +++++
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/Line.vue b/src/components/Line.vue
index 49fa3468d..5cb6b0a1e 100644
--- a/src/components/Line.vue
+++ b/src/components/Line.vue
@@ -12,14 +12,19 @@ const props = defineProps({
 // styles
 
 const styles = computed(() => {
-  return {
+  let styles = {
     top: props.line.y + 'px'
   }
+  return styles
 })
 const infoStyles = computed(() => {
-  return {
+  let styles = {
     backgroundColor: props.line.color
   }
+  if (store.state.isSelectingAllBelow) {
+    styles.pointerEvents = 'none'
+  }
+  return styles
 })
 const horizontalLineStyles = computed(() => {
   return {
@@ -31,7 +36,9 @@ const horizontalLineStyles = computed(() => {
 
 <template lang="pug">
 .line(:key="props.line.id" :data-line-id="props.line.id" :style="styles")
-  .line-info.badge.button-badge(:style="infoStyles")
+  .line-info.badge.button-badge(
+    :style="infoStyles"
+  )
     button.small-button
       img.icon(src="@/assets/brush-y.svg")
     span {{props.line.name}}
diff --git a/src/components/SelectAllBelow.vue b/src/components/SelectAllBelow.vue
index 89b14b131..cb1e552e4 100644
--- a/src/components/SelectAllBelow.vue
+++ b/src/components/SelectAllBelow.vue
@@ -2,7 +2,7 @@
 .select-all-below(v-if="isVisible" :style="{ top: positionY + 'px' }")
   .badge.label-badge(:style="{ 'background-color': userColor }" @mousedown="handleMouseDown")
     img.icon(src="@/assets/brush-y.svg")
-    .pointer(:style="{ 'background-color': userColor }" :class="{ wide: isSelecting }")
+    .pointer(:style="{ 'background-color': userColor }" :class="{ wide: isSelectingAllBelow }")
 </template>
 
 <script>
@@ -23,17 +23,17 @@ export default {
   data () {
     return {
       isVisible: false,
-      isSelecting: false,
       positionY: 250
     }
   },
   computed: {
     userColor () { return this.$store.state.currentUser.color },
-    canEditSpace () { return this.$store.getters['currentUser/canEditSpace']() }
+    canEditSpace () { return this.$store.getters['currentUser/canEditSpace']() },
+    isSelectingAllBelow () { return this.$store.state.isSelectingAllBelow }
   },
   methods: {
     handleMouseDown (event) {
-      this.isSelecting = true
+      this.$store.commit('isSelectingAllBelow', true)
       this.selectAllBelow(event)
     },
     handleMouseMove (event) {
@@ -63,19 +63,19 @@ export default {
       const isInPosition = isInThreshold && isBetweenControls
       const isCancelledByHover = Boolean(event.target.closest('button') || event.target.closest('article'))
       const shouldShow = isInPosition && !isCancelledByHover
-      if (shouldShow || this.isSelecting) {
+      if (shouldShow || this.isSelectingAllBelow) {
         this.positionY = position.y
         this.isVisible = true
       } else {
         this.isVisible = false
       }
-      if (this.isSelecting) {
+      if (this.isSelectingAllBelow) {
         this.debouncedSelectAllBelow(event)
       }
     },
     handleMouseUp (event) {
-      if (!this.isSelecting) { return }
-      this.isSelecting = false
+      if (!this.isSelectingAllBelow) { return }
+      this.$store.commit('isSelectingAllBelow', false)
       this.selectAllBelow(event)
       this.isVisible = false
       setTimeout(() => {
diff --git a/src/store/store.js b/src/store/store.js
index 3b0d819be..023852352 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -54,6 +54,7 @@ const store = createStore({
     userSettingsIsVisible: false,
     isFadingOutDuringTouch: false,
     prevSpaceIdInSession: '',
+    isSelectingAllBelow: false,
 
     // zoom and scroll
     spaceZoomPercent: 100,
@@ -460,6 +461,10 @@ const store = createStore({
         state.prevSpaceIdInSession = value
       }
     },
+    isSelectingAllBelow: (state, value) => {
+      utils.typeCheck({ value, type: 'boolean' })
+      state.isSelectingAllBelow = value
+    },
     searchIsVisible: (state, value) => {
       utils.typeCheck({ value, type: 'boolean' })
       state.searchIsVisible = value

From bd69def7a6394e28cdc16a1f580349a5c792b058 Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Sun, 20 Aug 2023 22:07:07 -0400
Subject: [PATCH 14/18] add canEditLine getter

---
 src/store/currentUser.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/store/currentUser.js b/src/store/currentUser.js
index b54e13b00..7e0683639 100644
--- a/src/store/currentUser.js
+++ b/src/store/currentUser.js
@@ -865,6 +865,11 @@ export default {
       const isNoUser = !box.userId
       return isCreatedByUser || isNoUser
     },
+    lineIsCreatedByCurrentUser: (state, getters, rootState) => (line) => {
+      const isCreatedByUser = state.id === line.userId
+      const isNoUser = !line.userId
+      return isCreatedByUser || isNoUser
+    },
     canEditCard: (state, getters, rootState, rootGetters) => (card) => {
       const isSpaceMember = getters.isSpaceMember()
       if (isSpaceMember) { return true }
@@ -881,6 +886,14 @@ export default {
       if (canEditSpace && boxIsCreatedByCurrentUser) { return true }
       return false
     },
+    canEditLine: (state, getters, rootState, rootGetters) => (line) => {
+      const isSpaceMember = getters.isSpaceMember()
+      if (isSpaceMember) { return true }
+      const canEditSpace = getters.canEditSpace
+      const lineIsCreatedByCurrentUser = getters.lineIsCreatedByCurrentUser(line)
+      if (canEditSpace && lineIsCreatedByCurrentUser) { return true }
+      return false
+    },
     connectionIsCreatedByCurrentUser: (state, getters, rootState) => (connection) => {
       return state.id === connection.userId
     },

From 292c449e7d3f336dbd4dee63ad7e70bf2f5cee6f Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Sun, 20 Aug 2023 22:41:59 -0400
Subject: [PATCH 15/18] add locking and line dragging

---
 src/components/Card.vue |   3 +-
 src/components/Line.vue | 186 +++++++++++++++++++++++++++++++++++-----
 src/store/store.js      |  71 ++++++++++++++-
 src/utils.js            |   9 ++
 src/views/Space.vue     |  12 ++-
 5 files changed, 257 insertions(+), 24 deletions(-)

diff --git a/src/components/Card.vue b/src/components/Card.vue
index b85aad4f9..9ba7d39a7 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -378,7 +378,8 @@ export default {
       'cardsWereDragged',
       'search',
       'hasNotifiedPressAndHoldToDrag',
-      'isPresentationMode'
+      'isPresentationMode',
+      'currentUserIsPanningReady'
     ]),
     ...mapGetters([
       'spaceCounterZoomDecimal',
diff --git a/src/components/Line.vue b/src/components/Line.vue
index 5cb6b0a1e..1979c3c81 100644
--- a/src/components/Line.vue
+++ b/src/components/Line.vue
@@ -1,14 +1,31 @@
 <script setup>
 import { reactive, computed, onMounted, defineProps, defineEmits, watch, ref, nextTick } from 'vue'
 import { useStore } from 'vuex'
+
+import utils from '@/utils.js'
+import postMessage from '@/postMessage.js'
 const store = useStore()
 
-// import utils from '@/utils.js'
+let isMultiTouch
+// locking
+// long press to touch drag card
+const lockingPreDuration = 100 // ms
+const lockingDuration = 100 // ms
+let lockingAnimationTimer, lockingStartTime, shouldCancelLocking
+let initialTouchEvent = {}
+let touchPosition = {}
+let currentTouchPosition = {}
 
 const props = defineProps({
   line: Object
 })
 
+const state = reactive({
+  isLocking: false,
+  lockingPercent: 0,
+  lockingAlpha: 0
+})
+
 // styles
 
 const styles = computed(() => {
@@ -32,37 +49,163 @@ const horizontalLineStyles = computed(() => {
     width: store.state.pageWidth + 'px'
   }
 })
+
+// line dragging
+
+const isDragging = computed(() => {
+  const isDragging = store.state.currentUserIsDraggingLine
+  const isCurrent = store.state.currentDraggingLineId === props.line.id
+  const isSelected = store.getters['currentLines/isSelected']
+  return isDragging && (isCurrent || isSelected)
+})
+const currentLineIsSelected = computed(() => {
+  const selected = store.state.multipleLinesSelectedIds
+  return selected.find(id => props.Line.id === id)
+})
+const startLineInfoInteraction = (event) => {
+  if (!currentLineIsSelected.value) {
+    store.dispatch('clearMultipleSelected')
+  }
+  store.commit('currentDraggingLineId', '')
+  store.dispatch('closeAllDialogs')
+  store.commit('currentUserIsDraggingLine', true)
+  store.commit('currentDraggingLineId', props.line.id)
+  const updates = {
+    lineId: props.line.id,
+    userId: store.state.currentUser.id
+  }
+  store.commit('broadcast/updateStore', { updates, type: 'addToRemoteLinesDragging' })
+}
+const notifyPressAndHoldToDrag = () => {
+  const hasNotified = store.state.hasNotifiedPressAndHoldToDrag
+  if (!hasNotified) {
+    store.commit('addNotification', { message: 'Press and hold to drag lines', icon: 'press-and-hold' })
+  }
+  store.commit('hasNotifiedPressAndHoldToDrag', true)
+}
+
+// touch locking
+
+const updateTouchPosition = (event) => {
+  initialTouchEvent = event
+  isMultiTouch = false
+  if (utils.isMultiTouch(event)) {
+    isMultiTouch = true
+    return
+  }
+  touchPosition = utils.cursorPositionInViewport(event)
+}
+const updateCurrentTouchPosition = (event) => {
+  currentTouchPosition = utils.cursorPositionInViewport(event)
+  if (isDragging.value) {
+    event.preventDefault() // allows dragging lines without scrolling
+  }
+}
+const cancelLocking = () => {
+  shouldCancelLocking = true
+}
+const cancelLockingAnimationFrame = () => {
+  state.isLocking = false
+  state.lockingPercent = 0
+  state.lockingAlpha = 0
+  shouldCancelLocking = false
+}
+const startLocking = (event) => {
+  console.log('startLocking', event)
+  updateTouchPosition(event)
+  updateCurrentTouchPosition(event)
+  state.isLocking = true
+  shouldCancelLocking = false
+  setTimeout(() => {
+    if (!lockingAnimationTimer) {
+      lockingAnimationTimer = window.requestAnimationFrame(lockingAnimationFrame)
+    }
+  }, lockingPreDuration)
+}
+const lockingAnimationFrame = (timestamp) => {
+  if (!lockingStartTime) {
+    lockingStartTime = timestamp
+  }
+  const elaspedTime = timestamp - lockingStartTime
+  const percentComplete = (elaspedTime / lockingDuration) // between 0 and 1
+  if (!utils.cursorsAreClose(touchPosition, currentTouchPosition)) {
+    notifyPressAndHoldToDrag()
+    cancelLockingAnimationFrame()
+  }
+  if (shouldCancelLocking) {
+    cancelLockingAnimationFrame()
+  }
+  if (state.isLocking && percentComplete <= 1) {
+    const percentRemaining = Math.abs(percentComplete - 1)
+    state.lockingPercent = percentRemaining
+    const alpha = utils.easeOut(percentComplete, elaspedTime, lockingDuration)
+    state.lockingAlpha = alpha
+    window.requestAnimationFrame(lockingAnimationFrame)
+  } else if (state.isLocking && percentComplete > 1) {
+    console.log('🔒🐢 line lockingAnimationFrame locked')
+    lockingAnimationTimer = undefined
+    lockingStartTime = undefined
+    state.isLocking = false
+    startLineInfoInteraction(initialTouchEvent)
+  } else {
+    window.cancelAnimationFrame(lockingAnimationTimer)
+    lockingAnimationTimer = undefined
+    lockingStartTime = undefined
+    cancelLockingAnimationFrame()
+  }
+}
+
+// line details
+
+const endLineInfoInteraction = (event) => {
+  const isMeta = event.metaKey || event.ctrlKey
+  const userId = store.state.currentUser.id
+  const canEditLine = store.getters['currentUser/canEditLine'](props.line)
+  store.dispatch('currentLines/afterMove')
+  store.dispatch('currentCards/afterMove')
+  if (store.state.currentUserIsPainting) { return }
+  if (isMultiTouch) { return }
+  if (store.state.currentUserIsPanningReady || store.state.currentUserIsPanning) { return }
+  if (!canEditLine) { store.commit('triggerReadOnlyJiggle') }
+  store.commit('broadcast/updateStore', { updates: { userId }, type: 'clearRemoteLinesDragging' })
+  store.dispatch('closeAllDialogs')
+  if (isMeta) {
+    store.dispatch('multipleLinesSelectedIds', [])
+  } else {
+    store.dispatch('clearMultipleSelected')
+  }
+  if (!store.state.linesWereDragged && !isMeta) {
+    store.commit('lineDetailsIsVisibleForLineId', props.line.id)
+    event.stopPropagation() // prevent stopInteractions() from closing lineDetails
+    store.commit('currentUserIsDraggingLine', false)
+    store.commit('linesWereDragged', false)
+  }
+}
+
 </script>
 
 <template lang="pug">
 .line(:key="props.line.id" :data-line-id="props.line.id" :style="styles")
   .line-info.badge.button-badge(
     :style="infoStyles"
+    :data-line-id="props.line.id"
+    tabindex="0"
+    @mousedown.left="startLineInfoInteraction"
+
+    @mouseup.left="endLineInfoInteraction"
+    @keyup.stop.enter="endLineInfoInteraction"
+
+    @touchstart="startLocking"
+    @touchmove="updateCurrentTouchPosition"
+    @touchend="endLineInfoInteractionTouch"
   )
     button.small-button
       img.icon(src="@/assets/brush-y.svg")
     span {{props.line.name}}
-  .line-horizontal(:style="horizontalLineStyles")
+  .line-horizontal(:style="horizontalLineStyles" :class="{ active: isDragging }")
 
 //- :class="{hover: isHover, active: isDragging}"
 
-  //- .line-info(
-  //-   :data-line-id="line.id"
-  //-   :style="labelStyles"
-  //-   :class="{unselectable: isPainting, 'is-dark': colorIsDark}"
-  //-   tabindex="0"
-
-  //-   @mouseover="updateIsHover(true)"
-  //-   @mouseleave="updateIsHover(false)"
-  //-   @mousedown.left="startBoxInfoInteraction"
-
-  //-   @mouseup.left="endBoxInfoInteraction"
-  //-   @keyup.stop.enter="endBoxInfoInteraction"
-
-  //-   @touchstart="startLocking"
-  //-   @touchmove="updateCurrentTouchPosition"
-  //-   @touchend="endBoxInfoInteractionTouch"
-  //- )
   //-   template(v-if="isH1")
   //-     h1 {{h1Name}}
   //-   template(v-else-if="isH2")
@@ -90,7 +233,10 @@ const horizontalLineStyles = computed(() => {
       background-color transparent
   .line-horizontal
     left 0
-    height 1px
+    height 2px
+    transform translateY(-1px)
     z-index -1
     position relative
+    &.active
+      height 4px
 </style>
diff --git a/src/store/store.js b/src/store/store.js
index 023852352..b5baf2947 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -111,6 +111,18 @@ const store = createStore({
     remoteBoxesDragging: [],
     preventDraggedBoxFromShowingDetails: false,
 
+    // lines
+    lineDetailsIsVisibleForLineId: '',
+    multipleLinesSelectedIds: [],
+    remoteLineDetailsVisible: [],
+    // dragging lines
+    currentDraggingLineId: '',
+    linesWereDragged: false,
+    currentUserIsDraggingLine: false,
+    currentUserIsDraggingLineIds: [],
+    remoteLinesDragging: [],
+    preventDraggedLineFromShowingDetails: false,
+
     // cards
     shouldAddCard: false,
     cardDetailsIsVisibleForCardId: '',
@@ -289,6 +301,7 @@ const store = createStore({
       state.cardDetailsIsVisibleForCardId = ''
       state.connectionDetailsIsVisibleForConnectionId = ''
       state.boxDetailsIsVisibleForBoxId = ''
+      state.lineDetailsIsVisibleForLineId = ''
       state.tagDetailsIsVisible = false
       state.tagDetailsIsVisibleFromTagList = false
       state.currentSelectedTag = {}
@@ -297,6 +310,7 @@ const store = createStore({
       state.currentSelectedOtherItem = {}
       state.cardsWereDragged = false
       state.boxesWereDragged = false
+      state.linesWereDragged = false
       state.userDetailsIsVisible = false
       state.cardListItemOptionsIsVisible = false
       state.pricingIsVisible = false
@@ -776,6 +790,32 @@ const store = createStore({
       state.remoteUserResizingBoxes = state.remoteUserResizingBoxes.concat(update)
     },
 
+    // Lines
+
+    lineDetailsIsVisibleForLineId: (state, value) => {
+      utils.typeCheck({ value, type: 'string' })
+      state.lineDetailsIsVisibleForLineId = value
+      if (value) {
+        postMessage.sendHaptics({ name: 'lightImpact' })
+      }
+    },
+    currentUserIsDraggingLine: (state, value) => {
+      utils.typeCheck({ value, type: 'boolean' })
+      state.currentUserIsDraggingLine = value
+    },
+    updateRemoteLinesDetailsVisible: (state, update) => {
+      utils.typeCheck({ value: update, type: 'object' })
+      delete update.type
+      let lineDetailsVisible = utils.clone(state.remoteLinesDetailsVisible)
+      lineDetailsVisible = lineDetailsVisible.filter(line => line.id !== update.lineId) || []
+      lineDetailsVisible.push(update)
+      state.remoteLinesDetailsVisible = lineDetailsVisible
+    },
+    clearRemoteLinesDetailsVisible: (state, update) => {
+      utils.typeCheck({ value: update, type: 'object' })
+      state.remoteLinesDetailsVisible = state.remoteLinesDetailsVisible.filter(line => line.userId !== update.userId) || []
+    },
+
     // Toolbar Mode
 
     currentUserToolbar: (state, value) => {
@@ -871,6 +911,33 @@ const store = createStore({
       state.preventDraggedBoxFromShowingDetails = value
     },
 
+    // Dragging Lines
+
+    currentDraggingLineId: (state, lineId) => {
+      utils.typeCheck({ value: lineId, type: 'string' })
+      state.currentDraggingLineId = lineId
+    },
+    lineesWereDragged: (state, value) => {
+      utils.typeCheck({ value, type: 'boolean' })
+      state.linesWereDragged = value
+    },
+    addToRemoteLineesDragging: (state, update) => {
+      utils.typeCheck({ value: update, type: 'object' })
+      delete update.type
+      let line = utils.clone(state.remoteLineesDragging)
+      line = line.filter(line => line.userId !== update.userId) || []
+      line.push(update)
+      state.remoteLineesDragging = line
+    },
+    clearRemoteLinesDragging: (state, update) => {
+      utils.typeCheck({ value: update, type: 'object' })
+      state.remoteLineesDragging = state.remoteLineesDragging.filter(line => line.userId !== update.userId)
+    },
+    preventDraggedLineFromShowingDetails: (state, value) => {
+      utils.typeCheck({ value, type: 'boolean' })
+      state.preventDraggedLineFromShowingDetails = value
+    },
+
     // User Details
 
     userDetailsIsVisible: (state, value) => {
@@ -1006,10 +1073,12 @@ const store = createStore({
       state.multipleCardsSelectedIds = []
       state.multipleConnectionsSelectedIds = []
       state.multipleBoxesSelectedIds = []
+      state.multipleLinesSelectedIds = []
     },
     clearDraggingItems: (state) => {
       state.currentDraggingCardId = ''
       state.currentDraggingBoxId = ''
+      state.currentDraggingLineId = ''
     },
     newTweetCards: (state, cards) => {
       utils.typeCheck({ value: cards, type: 'array' })
@@ -1571,7 +1640,7 @@ const store = createStore({
       context.commit('broadcast/updateStore', { updates, type: 'updateRemoteBoxesSelected' }, { root: true })
     },
     clearMultipleSelected: (context) => {
-      if (context.state.multipleCardsSelectedIds.length || context.state.multipleConnectionsSelectedIds.length || context.state.multipleBoxesSelectedIds.length) {
+      if (context.state.multipleCardsSelectedIds.length || context.state.multipleConnectionsSelectedIds.length || context.state.multipleBoxesSelectedIds.length || context.state.multipleLinesSelectedIds.length) {
         context.commit('clearMultipleSelected')
       }
       const space = context.rootState.currentSpace
diff --git a/src/utils.js b/src/utils.js
index 1f4570f77..a320b485c 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -890,6 +890,9 @@ export default {
   boxElementFromId (boxId) {
     return document.querySelector(`.box[data-box-id="${boxId}"]`)
   },
+  lineElementFromId (lineId) {
+    return document.querySelector(`.line[data-line-id="${lineId}"]`)
+  },
   boxRectFromId (boxId) {
     const element = this.boxElementFromId(boxId)
     if (!element) { return }
@@ -901,6 +904,12 @@ export default {
     const y = parseInt(element.style.top)
     return { x, y }
   },
+  linePositionFromElement (lineId) {
+    const element = this.lineElementFromId(lineId)
+    const x = parseInt(element.style.left)
+    const y = parseInt(element.style.top)
+    return { x, y }
+  },
   isPointInsideCard (point, card) {
     const xIsInside = this.isBetween({
       value: point.x,
diff --git a/src/views/Space.vue b/src/views/Space.vue
index 7741b1069..ec83d3e69 100644
--- a/src/views/Space.vue
+++ b/src/views/Space.vue
@@ -149,13 +149,14 @@ export default {
     isDraggingCard () { return this.$store.state.currentUserIsDraggingCard },
     isResizingBox () { return this.$store.state.currentUserIsResizingBox },
     isDraggingBox () { return this.$store.state.currentUserIsDraggingBox },
+    isDraggingLine () { return this.$store.state.currentUserIsDraggingLine },
     viewportHeight () { return this.$store.state.viewportHeight },
     viewportWidth () { return this.$store.state.viewportWidth },
     pageHeight () { return this.$store.state.pageHeight },
     pageWidth () { return this.$store.state.pageWidth },
     currentUser () { return this.$store.state.currentUser },
     isInteracting () {
-      if (this.isDraggingCard || this.isDrawingConnection || this.isResizingCard || this.isResizingBox || this.isDraggingBox) {
+      if (this.isDraggingCard || this.isDrawingConnection || this.isResizingCard || this.isResizingBox || this.isDraggingBox || this.isDraggingLine) {
         return true
       } else { return false }
     },
@@ -300,10 +301,14 @@ export default {
         endCursor,
         prevCursor: prevCursor
       })
+      this.$store.dispatch('currentLines/move', {
+        endCursor,
+        prevCursor: prevCursor
+      })
     },
     interact (event) {
       endCursor = utils.cursorPositionInViewport(event)
-      if (this.isDraggingCard || this.isDraggingBox) {
+      if (this.isDraggingCard || this.isDraggingBox || this.isDraggingLine) {
         this.constrainCursorToAxis(event)
         this.dragItems()
       }
@@ -322,6 +327,8 @@ export default {
         this.$store.commit('preventDraggedCardFromShowingDetails', true)
       } else if (this.$store.state.currentUserIsDraggingBox) {
         this.$store.commit('preventDraggedBoxFromShowingDetails', true)
+      } else if (this.$store.state.currentUserIsDraggingLine) {
+        this.$store.commit('preventDraggedLineFromShowingDetails', true)
       }
     },
     cursor () {
@@ -478,6 +485,7 @@ export default {
       this.$store.commit('currentUserIsPaintingLocked', false)
       this.$store.commit('currentUserIsDraggingCard', false)
       this.$store.commit('currentUserIsDraggingBox', false)
+      this.$store.commit('currentUserIsDraggingLine', false)
       this.$store.commit('boxesWereDragged', false)
       this.updatePageSizes()
       this.$store.commit('prevCursorPosition', utils.cursorPositionInPage(event))

From facca390bd3d65b4ae839df4f3cf125372a95c34 Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Sun, 20 Aug 2023 22:55:47 -0400
Subject: [PATCH 16/18] fix line.isSelected check

---
 src/components/Line.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Line.vue b/src/components/Line.vue
index 1979c3c81..e5bf49d3f 100644
--- a/src/components/Line.vue
+++ b/src/components/Line.vue
@@ -52,11 +52,15 @@ const horizontalLineStyles = computed(() => {
 
 // line dragging
 
+const isSelected = computed(() => {
+  const selectedIds = store.state.multipleBoxesSelectedIds
+  return selectedIds.includes(props.line.id)
+})
 const isDragging = computed(() => {
   const isDragging = store.state.currentUserIsDraggingLine
   const isCurrent = store.state.currentDraggingLineId === props.line.id
-  const isSelected = store.getters['currentLines/isSelected']
-  return isDragging && (isCurrent || isSelected)
+  console.log(props.line.id, isDragging, isCurrent, isSelected.value)
+  return isDragging && (isCurrent || isSelected.value)
 })
 const currentLineIsSelected = computed(() => {
   const selected = store.state.multipleLinesSelectedIds

From 497242c02d567743da5ec9bbcfcb99d5d2f85bb6 Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Sun, 20 Aug 2023 22:56:08 -0400
Subject: [PATCH 17/18] cleanup

---
 src/components/Line.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Line.vue b/src/components/Line.vue
index e5bf49d3f..c9c6b0a32 100644
--- a/src/components/Line.vue
+++ b/src/components/Line.vue
@@ -59,7 +59,6 @@ const isSelected = computed(() => {
 const isDragging = computed(() => {
   const isDragging = store.state.currentUserIsDraggingLine
   const isCurrent = store.state.currentDraggingLineId === props.line.id
-  console.log(props.line.id, isDragging, isCurrent, isSelected.value)
   return isDragging && (isCurrent || isSelected.value)
 })
 const currentLineIsSelected = computed(() => {

From 4c9832079fec6853f877a96b7c5e1173a05d7838 Mon Sep 17 00:00:00 2001
From: pirijan <hi@pirijan.com>
Date: Thu, 24 Aug 2023 00:01:18 -0400
Subject: [PATCH 18/18] css tweak

---
 src/components/Line.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Line.vue b/src/components/Line.vue
index c9c6b0a32..bdb4a391e 100644
--- a/src/components/Line.vue
+++ b/src/components/Line.vue
@@ -242,4 +242,5 @@ const endLineInfoInteraction = (event) => {
     position relative
     &.active
       height 4px
+      transform translateY(-2px)
 </style>