import and redraw

src/App.vue

@@ -16,9 +16,9 @@ export default defineComponent({
     $loading.show()
     onMounted(() => {
       // loading test
-      setTimeout(function () {
+      window.onload = () => {
         $loading.hide()
-      }, 1e3 * (Math.random() + 1))
+      }
     })
   }
 })

src/assets/styles/common.scss

@@ -0,0 +1,66 @@
+$icons: (
+  pen, eraser, redo, undo, clear, save, import, export, info,
+  alpha_circle, alpha_chalk, alpha_calligraphy, alpha_square
+);
+
+@mixin hl {
+  background-color: rgba($color: #fff, $alpha: .8);
+}
+
+@mixin after_title {
+  position: absolute;
+  width: 60px;
+  // line-height: 24px;
+  font-size: 12px;
+  text-align: center;
+  left: 20px;
+  top: -10px;
+  padding: 5px;
+  background-color: #fff;
+  border-radius: 5px;
+  color: #333;
+  content: attr(title);
+  z-index: 10;
+}
+
+.icon {
+  background-size: 32px;
+  background-position: center;
+  background-repeat: no-repeat;
+  @each $icon in $icons {
+    &-#{$icon} {
+      background-image: url("~@/assets/images/#{$icon}.png");
+    }
+  }
+}
+
+.list-panel {
+  background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.6) 100%);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 10%), 0 1px #cecece;
+  display: flex;
+  margin-top: 16px;
+  li {
+    position: relative;
+    cursor: pointer;
+    float: left;
+    // width: 60px;
+    flex: 1;
+    height: 54px;
+    // border: 1px solid #cccccc;
+    &:hover {
+      @include hl;
+      &:after {
+        @include after_title;
+      }
+    }
+    & ~ li {
+      border-left: none;
+    }
+  }
+  .li-active {
+    @include hl;
+  }
+  .li-disabled {
+    opacity: .5;
+  }
+}

src/components/Header.vue

@@ -1,22 +1,53 @@
 <template>
   <div class="header-wrapper">
-    TODO HEADER
+    <div title="import" class="header-item icon icon-import"></div>
+    <div title="export" class="header-item icon icon-export" @click="exportJSON"></div>
+    <div title="info" class="header-item icon icon-info"></div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, getCurrentInstance } from 'vue'
 
 export default defineComponent({
-  name: 'Header'
+  name: 'Header',
+  setup () {
+    const eventBus = getCurrentInstance()?.appContext.config.globalProperties.eventBus
+
+    const exportJSON = function () {
+      eventBus.emit('command', 'exportJSON')
+    }
+
+    return {
+      exportJSON
+    }
+  }
 })
 </script>
 
 <style lang="scss" scoped>
+@import "../assets/styles/common.scss";
 .header-wrapper {
   background: rgba(255, 255, 255, 0.3);
-  height: 32px;
+  height: 44px;
   display: flex;
-  align-items: center;
+  .header-item {
+    flex: 1;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    &:hover {
+      background-color: rgba($color: #fff, $alpha: .5);
+      &:after {
+        @include after_title;
+        left: auto;
+        top: auto;
+        bottom: -20px;
+      }
+    }
+  }
+  .icon {
+    background-size: 24px;
+  }
 }
 </style>

src/components/Playground.vue

@@ -19,7 +19,8 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+@import "../assets/styles/common.scss";
 .playground-container {
   position: absolute;
   width: 100%;

src/components/Stage.vue

@@ -13,18 +13,24 @@ import {
 } from 'vue'
 import { useStore, Mutations } from '@/store'
 import { Vector2d } from '../shared/types'
-import { PEN_BUTTON, PEN_MODE } from '../shared/constants'
+import { PEN_MODE, BRUSH_ACTION } from '../shared/constants'
 import SVGOverlay from '../shared/svgOverlay'
 import Brush from '../shared/brush'
 import Canvas from '../shared/canvas'
+import Timemachine from '../shared/timemachine'
 import { throttle, download } from '../shared/utils'
+import { ElMessage } from 'element-plus'
+import mockData from '../../mocks/free-drawing_1634577652361.json'
 
 export default defineComponent({
   name: 'Stage',
   setup () {
     const store = useStore()
     const eventBus = getCurrentInstance()?.appContext.config.globalProperties.eventBus
 
+    const timemachine = new Timemachine()
+    timemachine.makeHistory()
+
     const state = reactive(store.state.stageConfig)
 
     let container: HTMLElement
@@ -38,33 +44,30 @@ export default defineComponent({
 
     const bindStageListeners = () => {
       let isDrawing = false
+
       container.addEventListener('pointerdown', (e: PointerEvent) => {
         isDrawing = true
         const { x, y } = e
         const pressure = state.penMode === PEN_MODE.Eraser ? 1 : e.pressure
         lastPos.value = { x, y }
-        brush.startLine({
-          x,
-          y,
-          pressure
-        })
+        brush.startLine({ x, y, pressure })
       })
+
       container.addEventListener('pointermove', (e: PointerEvent) => {
         e.preventDefault()
         const { x, y } = e
         const pressure = state.penMode === PEN_MODE.Eraser ? 1 : e.pressure
         lastPos.value = { x, y }
         if (!isDrawing) return
-        brush.goLine({
-          x,
-          y,
-          pressure
-        })
+        brush.goLine({ x, y, pressure })
       })
+
       container.addEventListener('pointerup', () => {
         isDrawing = false
         brush.endLine()
+        timemachine.add(brush.logger)
       })
+
       container.addEventListener('mouseleave', () => {
         isDrawing = false
         lastPos.value = null
@@ -86,16 +89,59 @@ export default defineComponent({
       undo () {},
       clear () {
         canvas.clear()
+        timemachine.reset()
       },
       save () {
         canvas.toImage({
           callback (img) {
             download(img.src, `free-drawing_${Date.now()}.png`)
           }
         })
+      },
+      exportJSON () {
+        if (timemachine.size() === 0) {
+          return ElMessage({
+            message: 'no data',
+            type: 'warning'
+          })
+        }
+        const fullStack = timemachine.fullStack()
+        const json = JSON.stringify(fullStack)
+        const jsonBlob = new Blob([json])
+        download(jsonBlob, `free-drawing_${Date.now()}.json`)
       }
     }
 
+    const redraw = function () {
+      // const fileReader = new FileReader()
+      // fileReader.onload = function (e) {
+      //   console.log(e.target)
+      // }
+      // fileReader.readAsText(new Blob(mockData))
+      console.log(mockData)
+      mockData.forEach(data => {
+        brush = new Brush({
+          context: canvas.getContext(),
+          ...data.config as any
+        })
+        data.actions.forEach((record) => {
+          if (record.p) {
+            const { x, y, p: pressure } = record.p
+            switch (record.a) {
+              case BRUSH_ACTION.startLine:
+                brush.startLine({ x, y, pressure })
+                break
+              case BRUSH_ACTION.goLine:
+                brush.goLine({ x, y, pressure })
+                break
+            }
+          } else {
+            brush.endLine()
+          }
+        })
+      })
+    }
+
     watch(lastPos, (val: any) => {
       overlay.updateCursor({
         ...val,
@@ -157,6 +203,7 @@ export default defineComponent({
       })
       bindStageListeners()
       bindGlobalListeners()
+      redraw()
     })
   }
 })

src/components/Toolbar.vue

@@ -118,13 +118,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-$icons: (
-  pen, eraser, redo, undo, clear, save,
-  alpha_circle, alpha_chalk, alpha_calligraphy, alpha_square
-);
-@mixin hl {
-  background-color: rgba($color: #fff, $alpha: .8);
-}
 .toolbar-wrapper {
   width: 270px;
   position: absolute;
@@ -134,61 +127,20 @@ $icons: (
   user-select: none;
   touch-action: none;
   border-right: none;
-  background-color: #c5c5c5;
+  background-color: #c9c9c9;
   border-left: 1px solid #f3f3f3;
   transition: right .5s;
   z-index: 10;
 }
 .hidden {
   right: -270px;
 }
-.list-panel {
-  background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.6) 100%);
-  box-shadow: 0 1px 3px rgb(0 0 0 / 10%), 0 1px #cecece;
-  display: flex;
-  li {
-    position: relative;
-    cursor: pointer;
-    float: left;
-    // width: 60px;
-    flex: 1;
-    height: 54px;
-    // border: 1px solid #cccccc;
-    &:hover {
-      @include hl;
-      &:after {
-        position: absolute;
-        width: 60px;
-        // line-height: 24px;
-        font-size: 12px;
-        text-align: center;
-        left: 20px;
-        top: -10px;
-        padding: 5px;
-        background-color: #fff;
-        border-radius: 5px;
-        color: #333;
-        content: attr(title);
-        z-index: 10;
-      }
-    }
-    & ~ li {
-      border-left: none;
-    }
-  }
-  .li-active {
-    @include hl;
-  }
-  .li-disabled {
-    opacity: .5;
-  }
-}
 .pen-options {
   border-bottom: 1px solid #cccccc;
 }
-.pen-options, .pen-actions {
-  padding-bottom: 16px;
-}
+// .pen-options, .pen-actions {
+//   padding-bottom: 16px;
+// }
 .pen-actions {
   // background: #000;
   .icon {
@@ -204,16 +156,6 @@ $icons: (
   width: 100%;
   bottom: 0;
 }
-.icon {
-  background-size: 32px;
-  background-position: center;
-  background-repeat: no-repeat;
-  @each $icon in $icons {
-    &-#{$icon} {
-      background-image: url("~@/assets/images/#{$icon}.png");
-    }
-  }
-}
 .button-transfer {
   position: absolute;
   cursor: pointer;