Delete single item

apps/capacity-canvas/index.js

@@ -9,6 +9,23 @@ const syncChartToAnchor = canvas => {
       'a'
     ).href = `data:image/svg+xml;base64,\n${window.btoa(canvas.innerHTML)}`
   })
+
+  const removeByIndexButtons = document.querySelectorAll(
+    'text[data-remove-by-index]'
+  )
+  removeByIndexButtons.forEach((deleteButton, i) => {
+    if (deleteButton.getAttribute('listner-added') === 'false') {
+      deleteButton.setAttribute('listner-added', 'true')
+      deleteButton.addEventListener('click', e => onRemoveItemClick(e, canvas))
+    }
+  })
+}
+
+const onRemoveItemClick = (e, canvas) => {
+  const newData = [...canvas.data]
+  const indexToRemove = e.target.getAttribute('data-remove-by-index')
+  newData.splice(indexToRemove, 1)
+  canvas.data = newData
 }
 
 const onAddClick = (canvas, label) => {

apps/options-board/index.js

@@ -12,12 +12,28 @@ if (!window.location.hash) {
 const channel = window.location.hash.substr(1)
 let board
 
-const syncChartToAnchor = board => {
+const removePostit = e => {
+  const indexToRemove = e.target.getAttribute('data-remove-by-index')
+  optionsBoardData.removeOptionByIndex(board, indexToRemove)
+}
+
+const syncChart = board => {
   window.requestIdleCallback(() => {
     document.querySelector(
       'a'
     ).href = `data:image/svg+xml;base64,\n${window.btoa(board.innerHTML)}`
   })
+
+  const removeByIndexButtons = document.querySelectorAll(
+    'text[data-remove-by-index]'
+  )
+
+  removeByIndexButtons.forEach((deleteButton, i) => {
+    if (deleteButton.getAttribute('listner-added') === 'false') {
+      deleteButton.setAttribute('listner-added', 'true')
+      deleteButton.addEventListener('click', removePostit)
+    }
+  })
 }
 
 optionsBoardData.init(channel).then(_ => {
@@ -49,14 +65,14 @@ optionsBoardData.init(channel).then(_ => {
     })
 
     createAttributesObserver(board, () => {
-      syncChartToAnchor(board)
+      syncChart(board)
     })
   })
 })
 
 const syncData = data => {
   board.data = data
-  window.requestAnimationFrame(() => syncChartToAnchor(board))
+  window.requestAnimationFrame(() => syncChart(board))
 }
 
 optionsBoardData.addOnChangeListener(syncData)

apps/options-board/model/optionsBoardData.js

@@ -54,6 +54,14 @@ export const factory = ({
     set(board.data)
   }
 
+  const removeOptionByIndex = (board, i) => {
+    const newData = [...board.data]
+    newData.splice(i, 1)
+    board.data = newData
+
+    set(board.data)
+  }
+
   const reset = () => {
     set(initialData)
     return initialData
@@ -83,6 +91,7 @@ export const factory = ({
     get,
     addOption,
     removeOption,
+    removeOptionByIndex,
     changePosition,
     reset
   }

lib/postIt/nodeFactory.js

@@ -36,6 +36,24 @@ const createTextNode = (width, height, label, index) => {
   return textNode
 }
 
+const createDeleteNode = (width, height, label, index, color) => {
+  const textNode = document.createElementNS(SVG_NS_URI, 'text')
+
+  textNode.setAttribute('alignment-baseline', 'middle')
+  textNode.setAttribute('text-anchor', 'middle')
+  textNode.setAttribute('x', width)
+  textNode.setAttribute('y', height)
+  textNode.setAttribute('font-size', '18')
+  textNode.setAttribute('font-weight', 'bold')
+  textNode.setAttribute('cursor', 'default')
+  textNode.setAttribute('data-index', index)
+  textNode.setAttribute('data-remove-by-index', index)
+  textNode.setAttribute('listner-added', false)
+  textNode.setAttribute('stroke', color)
+  textNode.appendChild(document.createTextNode(label))
+  return textNode
+}
+
 export default ({ color, width, height, x, y, index, label }) => {
   const group = document.createElementNS(SVG_NS_URI, 'g')
 
@@ -46,6 +64,9 @@ export default ({ color, width, height, x, y, index, label }) => {
 
   group.appendChild(createPostItNode(width, height, color, index))
   group.appendChild(createTextNode(width, height, textLabel, index))
+  group.appendChild(createDeleteNode(width, 0, '✖', index, color))
+
+  // const toggleButton = document.querySelector('button[data-toggle-legend]')
 
   return group
 }