1.0.0

.gitignore

@@ -1 +1,2 @@
 /node_modules
+/build/bundle.js

README.md

@@ -0,0 +1,13 @@
+# scribe
+
+> A choo project
+
+## Build Setup
+
+``` bash
+# serve with hot reload at localhost:9966
+npm start
+
+# build for production with minification
+npm run build
+```

app/buttons.json

@@ -1,22 +1,22 @@
 {
   "scribeButtons":[
     {
-      "text":"画线",
+      "text":"Line",
       "id":"line",
       "class":"btn btn-outline-success",
     },
     {
-      "text":"选点",
+      "text":"Select",
       "id":"ctrlline",
       "class":"btn btn-outline-success",
     },
     {
-      "text":"移动",
+      "text":"Move",
       "id":"move",
       "class":"btn btn-outline-success",
     },
     {
-      "text":"删除",
+      "text":"Remove",
       "id":"remove",
       "class":"btn btn-outline-danger",
     }

app/components/scribeCanvas.js

@@ -2,26 +2,27 @@ var html = require('choo/html')
 var css = require('sheetify')
 require('yuki-createjs')
 
-var countId = 0
-
 window.createjs = createjs
 
 css('../styles/scribeCanvas.css')
+var isLoad = false
 
 var stage = new createjs.Stage("canvas")
 
 var container = new createjs.Container()
 
 stage.addChild(container)
 
-function unique(prefix){
-  var id = ++countId + '';
+function unique(prefix, state, emit){
+  emit('increaseCountId')
+  var id = state.countId + '';
   return prefix ? prefix + id : id;
 }
 
 function onmousedown(state, emit){
   return e=>{
     setTimeout(()=>{
+
       if (state.drawType !== 'line') return
 
       if (state.isPreventEvent){
@@ -32,7 +33,7 @@ function onmousedown(state, emit){
 
       var x = e.pageX - $(e.target).offset().left - state.container.x
         , y = e.pageY - $(e.target).offset().top - state.container.y
-        , uid = unique('p_')
+        , uid = unique('p_', state, emit)
 
       emit('addPoint', {x, y, uid})
       emit('mouseDown', true)
@@ -79,7 +80,10 @@ module.exports = (state, emit)=>{
         onmousemove=${onmousemove(state, emit)}
         onmouseup=${onmouseup(state, emit)}>
         ${setTimeout(()=>{
-          onload(state, emit)
+          if (!isLoad){
+            isLoad = true
+            onload(state, emit)
+          }
         },0)}
       </canvas>
     </div>

app/scribe/addCtrl.js

@@ -1,9 +1,7 @@
 const { ctrlRemovable } = require('./decorate.js')
 
-function moveCtrl (square, line, x, y, uid, isMirror, ctrlx, ctrly) {
+function moveCtrl (square, line, x, y, uid, isMirror, ctrlx, ctrly, state) {
   requestAnimationFrame(()=>{
-    drawSquare(square)
-
     if (square.isMirror&& isMirror){
       square.x = 2 * x - ctrlx
       square.y = 2 * y - ctrly
@@ -12,23 +10,31 @@ function moveCtrl (square, line, x, y, uid, isMirror, ctrlx, ctrly) {
       square.y = ctrly
     }
 
-    line.graphics.clear()
-    drawLine(line, x, y, square.x, square.y)
+    if (state.currentId === uid) {
+      line.graphics.clear()
+      drawSquare(square)
+      drawLine(line, x, y, square.x, square.y)
+    }
+
     line.from = {x, y}
     line.to = {x: square.x , y: square.y}
 
     stage.update()
   })
 }
 
-function createCtrl ({uid, x, y, isMirror}, state, emitter){
+function createCtrl ({uid, x, y, isMirror}, state, emitter, pointx, pointy){
   var square = new createjs.Shape()
   var line = new createjs.Shape()
 
-  drawSquare(square)
+  if (state.fetch){
+    moveCtrl(square, line, pointx, pointy, uid, isMirror, x, y, state)
+  } else {
+    drawSquare(square)
+    square.x = x
+    square.y = y
+  }
 
-  square.x = x
-  square.y = y
   square.uid = uid
   square.isMirror = isMirror
   line.uid = uid
@@ -58,22 +64,28 @@ function drawLine(line, x, y, x2, y2){
       .lineTo(x2, y2)
 }
 
-module.exports = ({uid, x, y, isMirror}, state, emitter)=>{
-  const {square, line} = createCtrl({uid, x, y, isMirror:false}, state, emitter)
+module.exports = ({uid, x, y, isMirror}, state, emitter, pointx, pointy)=>{
+  const {square, line} = createCtrl({uid, x, y, isMirror:false}, state, emitter, pointx, pointy)
+  var square2, line2
 
   if (isMirror){
-    var o = createCtrl({uid, x, y, isMirror:true}, state, emitter)
-    var square2 = o.square
-    var line2 = o.line
+    var o = createCtrl({uid, x, y, isMirror:true}, state, emitter, pointx, pointy)
+    square2 = o.square
+    line2 = o.line
   }
 
   emitter.on('moveCtrl', ctrl=>{
     if (ctrl.uid !== uid) return
 
-    moveCtrl(square, line, x, y, uid, false, ctrl.x, ctrl.y)
+    moveCtrl(square, line, pointx, pointy, uid, false, ctrl.x, ctrl.y, state)
 
     if (isMirror&&ctrl.isMirror){
-      moveCtrl(square2, line2, x, y, uid, true, ctrl.x, ctrl.y)
+      if (square2 === void 0){
+        var o = createCtrl({uid, x, y, isMirror:true}, state, emitter, pointx, pointy)
+        square2 = o.square
+        line2 = o.line
+      }
+      moveCtrl(square2, line2, pointx, pointy, uid, true, ctrl.x, ctrl.y, state)
     }
   })
 
@@ -116,9 +128,16 @@ module.exports = ({uid, x, y, isMirror}, state, emitter)=>{
 
   emitter.on('removeMirrorCtrl', ruid=>{
     if (ruid === uid){
+      isMirror = false
       square2.graphics.clear()
       line2.graphics.clear()
       stage.update()
     }
   })
+
+  emitter.on('removeUnMirrorCtrl', ruid=>{
+    if (ruid === uid){
+      isMirror = true
+    }
+  })
 }

app/scribe/addLine.js

@@ -5,24 +5,24 @@ function drawCurve(g, ctrls, oOne, nOne){
 
   g.setStrokeStyle(1)
    .beginStroke("#000")
-   .moveTo(nOne.x, nOne.y)
+   .moveTo(x, y)
 
    if (oCtrl !== void 0 && nCtrl === void 0){
-     g.quadraticCurveTo(oCtrl.x, oCtrl.y, x, y)
+     g.quadraticCurveTo(oCtrl.x, oCtrl.y, nOne.x, nOne.y)
    } else if (oCtrl === void 0 && nCtrl !== void 0){
      if (nCtrl.isMirror){
-       g.quadraticCurveTo(nCtrl.x, nCtrl.y, x, y)
+       g.quadraticCurveTo(2*nOne.x-nCtrl.x, 2*nOne.y-nCtrl.y, nOne.x, nOne.y)
      } else {
-       g.lineTo(x, y)
+       g.lineTo(nOne.x, nOne.y)
      }
    } else if (oCtrl !== void 0 && nCtrl !== void 0){
      if (nCtrl.isMirror){
-       g.bezierCurveTo(nCtrl.x, nCtrl.y, oCtrl.x, oCtrl.y, x, y)
+       g.bezierCurveTo(oCtrl.x, oCtrl.y, 2*nOne.x-nCtrl.x, 2*nOne.y-nCtrl.y, nOne.x, nOne.y)
      } else {
-       g.quadraticCurveTo(oCtrl.x, oCtrl.y, x, y)
+       g.quadraticCurveTo(oCtrl.x, oCtrl.y, nOne.x, nOne.y)
      }
    } else {
-     g.lineTo(x, y)
+     g.lineTo(nOne.x, nOne.y)
    }
 }
 

app/scribe/addPoint.js

@@ -47,6 +47,6 @@ module.exports = ({x, y, uid}, state, emitter)=>{
   emitter.on('createCtrl', ({uid, x, y, isMirror})=>{
     if (point.uid !== uid) return
 
-    addCtrl({uid, x, y, isMirror: isMirror}, state, emitter)
+    addCtrl({uid, x, y, isMirror: isMirror}, state, emitter, point.x, point.y)
   })
 }

app/store.js

@@ -9,6 +9,7 @@ module.exports = function(state, emitter){
     ctrls:[],
     currentId: '',
     preId: '',
+    countId: 0,
     container: {
       x:0,
       y:0
@@ -27,20 +28,22 @@ module.exports = function(state, emitter){
   })
 
   emitter.on('addPoint', nOne=>{
+
     if (!state.fetch){
       state.preId = state.currentId
       state.currentId = nOne.uid
       emitter.emit('changeCurrent')
+      state.points.push(nOne)
     }
+    var ni = state.points.indexOf(nOne)
 
-    state.points.push(nOne)
-    var oOne = state.points[state.points.length - 2]
+    var oOne = state.points[ni - 1]
     addPoint(nOne, state, emitter)
 
-    if (state.points.indexOf(nOne) !== 0){
+    if (ni !== 0){
       addLine(oOne, nOne, state, emitter)
     }
-    console.log(state)
+
   })
 
   emitter.on('removePoint', uid=>{
@@ -104,8 +107,13 @@ module.exports = function(state, emitter){
     } else {
       var arr = state.ctrls.slice(0)
       var i = state.ctrls.indexOf(ctrl)
-      if (ctrl.isMirror !== isMirror&&isMirror===false){
-        emitter.emit('removeMirrorCtrl', uid)
+      if (ctrl.isMirror !== isMirror){
+        if (isMirror===false){
+          emitter.emit('removeMirrorCtrl', uid)
+        } else if (isMirror === true){
+          emitter.emit('removeUnMirrorCtrl', uid)
+        }
+
       }
       ctrl = {uid, x, y, isMirror}
       arr[i] = ctrl
@@ -126,6 +134,10 @@ module.exports = function(state, emitter){
     emitter.emit('removeOnlyCtrl', uid)
   })
 
+  emitter.on('increaseCountId', ()=>{
+    state.countId++
+  })
+
   emitter.on('pulling', ()=>{
     state.fetch = true
     emitter.emit('render')
@@ -138,22 +150,36 @@ module.exports = function(state, emitter){
 
   emitter.on('pulled', ()=>{
     container.removeAllChildren()
+
     stage.update()
 
-    emitter.removeAllListeners([
+    var scribeEvents = [
       'removeOnlyCtrl',
       'moveCtrl',
       'createCtrl',
       'removeMirrorCtrl',
+      'removeUnMirrorCtrl',
       'changeCurrent',
       'remove'
-    ])
+    ]
+    scribeEvents.forEach(eventName=>{
+      emitter.removeAllListeners(eventName)
+    })
 
     Object.assign(state, JSON.parse(localStorage.getItem("chooData")))
+
     state.fetch = true
-    console.log(state)
+
+    moveContainer(state.container)
+
     state.points.forEach((p, i)=>{
       emitter.emit('addPoint', p)
+
+      var ctrl = state.ctrls.find(ctrl=>ctrl.uid === p.uid)
+
+      if (ctrl){
+        emitter.emit('createCtrl', ctrl)
+      }
     })
 
     $('#'+state.drawType).focus()

build/index.html

@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <title>choo scribe</title>
+  </head>
+  <body>
+    <div></div>
+    <script src="bundle.js"></script>
+  </body>
+</html>

package.json

@@ -1,10 +1,11 @@
 {
   "name": "choo-scriber",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "scriber powered by choo",
   "main": "index.js",
   "scripts": {
-    "start": "budo index.js --live"
+    "start": "budo index.js --live",
+    "build": "browserify index.js > ./build/bundle.js"
   },
   "author": "zhouhansen <z308114274@gmail.com>",
   "license": "MIT",
@@ -19,7 +20,9 @@
     "yuki-createjs": "0.0.3"
   },
   "devDependencies": {
-    "budo": "^10.0.4"
+    "brfs": "^1.4.3",
+    "budo": "^10.0.4",
+    "uglifyify": "^4.0.4"
   },
   "browserify": {
     "transform": [
@@ -28,6 +31,12 @@
         {
           "u": "sheetify-cssnext"
         }
+      ],
+      [
+        "uglifyify"
+      ],
+      [
+        "brfs"
       ]
     ]
   }