From 7795a6dfbc87f708089630dbd4d538f0b15f02ac Mon Sep 17 00:00:00 2001
From: Daniel X Moore <yahivin@gmail.com>
Date: Sun, 21 May 2017 09:58:55 -0700
Subject: [PATCH 1/9] This commit intentionally left blank


From 9cf31c5285079180edad5ad81ccf4984ac8b7c18 Mon Sep 17 00:00:00 2001
From: Daniel X Moore <yahivin@gmail.com>
Date: Sun, 21 May 2017 09:59:03 -0700
Subject: [PATCH 2/9] :crown::purple_heart: Updated at
 https://danielx.net/editor/

---
 dirty.coffee       |  29 +++
 dirty.coffee.md    |  34 ---
 download.md        |   2 +-
 editor.coffee      | 523 ++++++++++++++++++++++++++++++++++++++++++++
 editor.coffee.md   | 527 ---------------------------------------------
 main.coffee        |  43 ++++
 main.coffee.md     |  50 -----
 pixie.cson         |   3 +-
 test/editor.coffee |   2 +-
 9 files changed, 598 insertions(+), 615 deletions(-)
 create mode 100644 dirty.coffee
 delete mode 100644 dirty.coffee.md
 create mode 100644 editor.coffee
 delete mode 100644 editor.coffee.md
 create mode 100644 main.coffee
 delete mode 100644 main.coffee.md

diff --git a/dirty.coffee b/dirty.coffee
new file mode 100644
index 0000000..fa9de96
--- /dev/null
+++ b/dirty.coffee
@@ -0,0 +1,29 @@
+module.exports = (I, self) ->
+  # TODO: May want to not stash this on I, possibly have a volatileAccessor?
+  self.attrAccessor "savedCommand"
+
+  self.extend
+    dirty: ->
+      self.savedCommand() != self.lastCommand()
+    lastCommand: ->
+      self.history().last()
+    markClean: ->
+      self.savedCommand self.lastCommand()
+
+  self.markClean()
+
+  # HACK: This assumes we're the only app in the page
+  # NOTE: Track `prompted` so in an iframe it's less likely to trigger twice
+  prompted = false
+  window.addEventListener "beforeunload", (e) ->
+    unless prompted
+      if self.dirty()
+        e.returnValue = "Your changes haven't yet been saved. If you leave now you will lose your work."
+      prompted = true
+
+    setTimeout ->
+      prompted = false
+
+    return e.returnValue
+
+  return self
diff --git a/dirty.coffee.md b/dirty.coffee.md
deleted file mode 100644
index b19eeda..0000000
--- a/dirty.coffee.md
+++ /dev/null
@@ -1,34 +0,0 @@
-Dirty
-=====
-
-Handle dirty tracking and onbeforeunload event for editors.
-
-    module.exports = (I, self) ->
-      # TODO: May want to not stash this on I, possibly have a volatileAccessor?
-      self.attrAccessor "savedCommand"
-
-      self.extend
-        dirty: ->
-          self.savedCommand() != self.lastCommand()
-        lastCommand: ->
-          self.history().last()
-        markClean: ->
-          self.savedCommand self.lastCommand()
-
-      self.markClean()
-
-      # HACK: This assumes we're the only app in the page
-      # NOTE: Track `prompted` so in an iframe it won't trigger twice
-      prompted = false
-      window.addEventListener "beforeunload", (e) ->
-        unless prompted
-          if self.dirty()
-            e.returnValue = "Your changes haven't yet been saved. If you leave now you will lose your work."
-          prompted = true
-
-        setTimeout ->
-          prompted = false
-
-        return e.returnValue
-
-      return self
diff --git a/download.md b/download.md
index 0b56ec0..73eb595 100644
--- a/download.md
+++ b/download.md
@@ -50,4 +50,4 @@ Pixi Paint is [open source software](https://github.com/STRd6/pixel-editor).
 >     $(".content").eq(0).empty()
 >     .append($ "<h2>", text: "Live Demo")
 >     $(".content").eq(1).empty()
->     .append($ "<iframe>", src: "http://danielx.net/pixel-editor", style: "border: none; border-top: 1px solid gray", width: 640, height: 640)
+>     .append($ "<iframe>", src: "https://danielx.net/pixel-editor/", style: "border: none; border-top: 1px solid gray", width: 768, height: 640)
diff --git a/editor.coffee b/editor.coffee
new file mode 100644
index 0000000..a3d6411
--- /dev/null
+++ b/editor.coffee
@@ -0,0 +1,523 @@
+LITTLE_ENDIAN = require "./endianness"
+
+loader = require("./loader")()
+ajax = require("ajax")()
+
+{extend, defaults} = require "util"
+
+TouchCanvas = require "touch-canvas"
+
+Actions = require "./actions"
+Command = require "./command"
+Drop = require "./drop"
+GridGen = require "grid-gen"
+Notifications = require "./notifications"
+Postmaster = require "postmaster"
+Tools = require "./tools"
+Undo = require "undo"
+
+Palette = require("./palette")
+
+{rgb2Hex} = require "./util"
+
+Symmetry = require "./symmetry"
+
+module.exports = (I={}, self=Model(I)) ->
+  pixelExtent = Observable Size(64, 64)
+  pixelSize = Observable 8
+
+  positionDisplay = Observable("")
+
+  symmetryMode = Observable("normal")
+
+  canvas = null
+  lastCommand = null
+
+  replaying = false
+  initialState = null
+
+  self.include Actions
+  self.include Bindable
+  self.include Command
+  self.include Drop
+  self.include Notifications
+  self.include Undo
+  self.include Tools
+
+  Postmaster(self)
+
+  activeTool = self.activeTool
+
+  self.extend
+    alpha: Observable 100
+
+    pixelSize: pixelSize
+    pixelExtent: pixelExtent
+    positionDisplay: positionDisplay
+
+    loading: Observable false
+    loadingProgress: Observable 0
+    loadingClass: ->
+      "loading" if self.loading()
+
+    viewportWidth: ->
+      pixelExtent().scale(pixelSize()).width
+    viewportHeight: ->
+      pixelExtent().scale(pixelSize()).height
+
+    viewportStyle: ->
+      width = self.viewportWidth()
+      height = self.viewportHeight()
+
+      {iconUrl, iconOffset} = self.activeTool()
+      {x, y} = Point(iconOffset)
+      cursor = "url(#{iconUrl}) #{x} #{y}, default"
+
+      "width: #{width}px; height: #{height}px; cursor: #{cursor};"
+
+    mainHeight: Observable(720)
+    mainWidth: Observable(800)
+
+    viewportCheckered: Observable false
+
+    viewportChecker: ->
+      "checkered" if self.viewportCheckered()
+
+    viewportCenter: ->
+      if self.viewportHeight() < self.mainHeight()
+        "vertical-center"
+
+    displayGrid: Observable false
+
+    guideInterval: Observable 4
+    gridStyle: ->
+      if self.displayGrid()
+        gridImage = GridGen(
+          width: self.pixelSize()
+          height: self.pixelSize()
+          guide: self.guideInterval()
+        ).backgroundImage()
+
+        "background-image: #{gridImage};"
+
+    symmetryMode: symmetryMode
+
+    hideModal: ->
+      Modal = require "./modal"
+      Modal.hide()
+
+    outputCanvas: () ->
+      outputCanvas = TouchCanvas pixelExtent()
+      outputCanvas.context().drawImage(canvas.element(), 0, 0)
+      outputCanvas.element()
+
+    getBlob: ->
+      new Promise (resolve, reject) ->
+        editor.outputCanvas().toBlob (blob) ->
+          resolve(blob)
+
+    clear: ->
+      previous = self.getSnapshot()
+      self.canvas.clear()
+
+      self.execute editor.Command.PutImageData
+        imageData: self.getSnapshot()
+        imageDataPrevious: previous
+        x: 0
+        y: 0
+
+      return
+
+    resize: (size, data) ->
+      data ?= self.getSnapshot()
+
+      pixelExtent(Size(size))
+      {width, height} = pixelExtent()
+
+      canvasElement = canvas.element()
+      thumbnailCanvasElement = thumbnailCanvas.element()
+      previewCanvasElement = previewCanvas.element()
+
+      thumbnailCanvasElement.width = canvasElement.width = previewCanvasElement.width = width
+      thumbnailCanvasElement.height = canvasElement.height = previewCanvasElement.height = height
+
+      self.putImageData(data)
+
+      self.repaint()
+
+    repaint: ->
+      {width, height} = pixelExtent()
+      thumbnailCanvas.clear()
+      thumbnailCanvas.context().drawImage(canvas.element(), 0, 0)
+
+      return self
+
+    getSnapshot: ->
+      size = pixelExtent()
+      canvas.context().getImageData(0, 0, size.width, size.height)
+
+    insertImageData: (imageData) ->
+      size = pixelExtent()
+
+      self.execute self.Command.Resize
+        size:
+          width: imageData.width
+          height: imageData.height
+        sizePrevious: size
+        imageData: imageData
+        imageDataPrevious: editor.getSnapshot()
+
+      return
+
+    fromDataURL: (dataURL) ->
+      loader.load(dataURL)
+      .then self.insertImageData
+
+    loadFile: (blob) ->
+      url = URL.createObjectURL(blob)
+
+      self.fromDataURL(url)
+      .then ->
+        URL.revokeObjectURL(url)
+        self.history([])
+        return
+
+    vintageReplay: (data) ->
+      unless replaying
+        replaying = true
+
+        new ProgressPromise (resolve, reject, notify) ->
+          steps = data
+
+          # It's pretty funny if we don't reset the symmetry mode ^_^
+          self.symmetryMode "normal"
+
+          self.repaint()
+
+          delay = (5000 / steps.length).clamp(1, 250)
+          i = 0
+
+          runStep = ->
+            if step = steps[i]
+              try
+                step.forEach ({x, y, color}) ->
+                  self.draw {x, y}, {color}
+
+              i += 1
+
+              setTimeout runStep, delay
+            else
+              resolve()
+
+          setTimeout runStep, delay
+        .finally ->
+          replaying = false
+          self.restoreInitialState()
+
+    replay: (steps, dropHistory=false) ->
+      unless replaying
+        replaying = true
+
+        # Copy and clear history
+        steps ?= self.history()
+
+        self.restoreInitialState()
+
+        delay = (5000 / steps.length).clamp(1, 250)
+        i = 0
+
+        runStep = ->
+          if step = steps[i]
+            self.execute step
+            i += 1
+
+            setTimeout runStep, delay
+          else
+            # Replay will be done and history will have been automatically rebuilt
+            replaying = false
+            if dropHistory
+              self.restoreInitialState()
+
+        setTimeout runStep, delay
+
+    loadReplayFromURL: (jsonURL, sourceImage, finalImage) ->
+      if jsonURL?
+        self.loading true
+
+        ajax.getJSON(jsonURL)
+        .progress (e) ->
+          self.loadingProgress e.loaded / e.total
+        .then (data) ->
+          if Array.isArray(data[0])
+            console.log "vintage"
+            if sourceImage
+              Promise.all([loader.load(sourceImage), loader.load(finalImage)])
+              .then ([imageData, finalImageData]) ->
+                {width, height} = finalImageData
+
+                editor.setInitialState imageData
+                editor.restoreInitialState()
+                editor.resize({width, height})
+                editor.vintageReplay(data)
+                editor.setInitialState finalImageData
+            else
+              loader.load(finalImage)
+              .then (finalImageData) ->
+                {width, height} = finalImageData
+                editor.resize({width, height})
+                editor.canvas.clear()
+                editor.vintageReplay(data)
+                editor.setInitialState finalImageData
+          else
+            loader.load(finalImage)
+            .then (finalImageData) ->
+              editor.restoreState data, true
+              editor.setInitialState finalImageData
+        .finally ->
+          self.loadingProgress 0
+          self.loading false
+      else
+        loader.load(finalImage)
+        .then (imageData) ->
+          editor.setInitialState imageData
+          editor.restoreInitialState()
+
+    restoreState: (state, performReplay=false) ->
+      self.palette state.palette.map Observable
+
+      initialState = self.imageDataFromJSON(state.initialState)
+      self.restoreInitialState()
+
+      commands = state.history.map self.Command.parse
+
+      if performReplay
+        self.replay commands, true
+      else
+        commands.forEach (command) -> command.execute()
+        self.history commands
+
+        self.repaint()
+
+    saveState: ->
+      version: "1"
+      palette: self.palette().map (o) -> o()
+      history: self.history().invoke "toJSON"
+      initialState: self.imageDataToJSON initialState
+
+    setInitialState: (imageData) ->
+      initialState = imageData
+
+      return
+
+    restoreInitialState: ->
+      # Become the image with no history
+      self.resize initialState, initialState
+      self.history([])
+
+      return
+
+    withCanvasMods: (cb) ->
+      canvas.context().globalAlpha = thumbnailCanvas.context().globalAlpha = self.alpha() / 100
+
+      try
+        Symmetry[symmetryMode()](pixelExtent(), [Matrix.IDENTITY]).forEach (transform) ->
+          canvas.withTransform transform, (canvas) ->
+            cb(canvas)
+          thumbnailCanvas.withTransform transform, (canvas) ->
+            cb(canvas)
+      finally
+        canvas.context().globalAlpha = thumbnailCanvas.context().globalAlpha = 1
+
+    draw: (point, options={}) ->
+      {color, size} = options
+      color ?= self.activeColor()
+      size ?= 1
+
+      {x, y} = point
+
+      self.withCanvasMods (canvas) ->
+        if color is "transparent"
+          canvas.clear
+            x: x * size
+            y: y * size
+            width: size
+            height: size
+        else
+          canvas.drawRect
+            x: x * size
+            y: y * size
+            width: size
+            height: size
+            color: color
+
+    color: (index) ->
+      self.palette()[index]()
+
+    getColor: (position) ->
+      {x, y} = position
+      data = canvas.context().getImageData(x, y, 1, 1).data
+
+      rgb2Hex data[0], data[1], data[2]
+
+    colorAsInt: ->
+      color = self.activeColor()
+
+      color = color.substring(color.indexOf("#") + 1)
+
+      if color is "transparent"
+        0
+      else
+        if LITTLE_ENDIAN
+          parseInt("ff#{color[4..5]}#{color[2..3]}#{color[0..1]}", 16)
+        else
+          parseInt("#{color}ff")
+
+    palette: Observable(Palette.dawnBringer32.map Observable)
+
+    putImageData: (imageData, x=0, y=0) ->
+      canvas.context().putImageData(imageData, x, y)
+
+    selection: (rectangle) ->
+      each: (iterator) ->
+        rectangle.each (x, y) ->
+          index = self.getIndex(x, y)
+          iterator(index, x, y)
+
+    thumbnailClick: (e) ->
+      e.currentTarget.classList.toggle "right"
+
+  self.activeColor = Observable "#000000"
+
+  self.activeColorStyle = Observable ->
+    "background-color: #{self.activeColor()}"
+
+  self.canvas = canvas = TouchCanvas pixelExtent()
+  self.previewCanvas = previewCanvas = TouchCanvas pixelExtent()
+  self.thumbnailCanvas = thumbnailCanvas = TouchCanvas pixelExtent()
+
+  previewCanvas.element().classList.add "preview"
+
+  do (ctx=self.canvas.context()) ->
+    ctx.imageSmoothingEnabled = false
+    ctx.mozImageSmoothingEnabled = false
+
+  self.TRANSPARENT_FILL = require("./lib/checker")().pattern()
+
+  canvasPosition = (position) ->
+    Point(position).scale(pixelExtent()).floor()
+
+  snapshot = null
+
+  self.restore = ->
+    if snapshot
+      self.putImageData(snapshot)
+      self.repaint()
+
+  previewCanvas.on "touch", (position) ->
+    # Snapshot canvas
+    snapshot = self.getSnapshot()
+
+    activeTool().touch
+      position: canvasPosition position
+      editor: self
+
+  previewCanvas.on "move", (position) ->
+    activeTool().move
+      position: canvasPosition position
+      editor: self
+
+  previewCanvas.on "release", (position) ->
+    activeTool().release
+      position: canvasPosition position
+      editor: self
+
+    size = pixelExtent()
+    diffSnapshot(snapshot, canvas.context().getImageData(0, 0, size.width, size.height))
+
+    self.trigger "release"
+
+  compareImageData = (previous, current) ->
+    return unless previous and current
+    xMin = Infinity
+    xMax = -Infinity
+    yMin = Infinity
+    yMax = -Infinity
+
+    previousData = new Uint32Array(previous.data.buffer)
+    currentData = new Uint32Array(current.data.buffer)
+    length = currentData.length
+    width = current.width
+
+    i = 0
+
+    while i < length
+      x = i % width
+      y = (i / width)|0
+      if previousData[i] != currentData[i]
+        xMin = x if x < xMin
+        xMax = x if x > xMax
+        yMin = y if y < yMin
+        yMax = y if y > yMax
+
+      i += 1
+
+    if xMin != Infinity
+      return [xMin, yMin, xMax - xMin + 1, yMax - yMin + 1]
+    else
+      return null
+
+  diffSnapshot = (previous, current) ->
+    region = compareImageData(previous, current)
+
+    if region
+      [x, y, width, height] = region
+
+      spareCanvas = document.createElement("canvas")
+      spareCanvas.width = width
+      spareCanvas.height = height
+      spareContext = spareCanvas.getContext("2d")
+
+      spareContext.putImageData(previous, -x, -y)
+      previous = spareContext.getImageData(0, 0, width, height)
+
+      spareContext.putImageData(current, -x, -y)
+      current = spareContext.getImageData(0, 0, width, height)
+
+      self.execute self.Command.PutImageData
+        imageData: current
+        imageDataPrevious: previous
+        x: x
+        y: y
+
+  previewCanvas.element().addEventListener "mousemove", ({currentTarget, pageX, pageY}) ->
+    {left, top} = currentTarget.getBoundingClientRect()
+    {x, y} = Point(pageX - left, pageY - top).scale(1/pixelSize()).floor()
+
+    positionDisplay("#{x},#{y}")
+
+  self.on "release", ->
+    previewCanvas.clear()
+
+    # TODO: Think more about triggering change events
+    self.trigger "change"
+
+  # TODO: Extract this decorator pattern
+  ["undo", "execute", "redo"].forEach (method) ->
+    oldMethod = self[method]
+
+    self[method] = ->
+      oldMethod.apply(self, arguments)
+      self.repaint()
+      self.trigger "change"
+
+  self.include require "./dirty"
+
+  initialState = self.getSnapshot()
+
+  document.addEventListener "mousedown", (e) ->
+    return if e.path.some (node) ->
+      node.classList?.contains "panel"
+
+    self.detailTool null
+
+  return self
diff --git a/editor.coffee.md b/editor.coffee.md
deleted file mode 100644
index 958e4cd..0000000
--- a/editor.coffee.md
+++ /dev/null
@@ -1,527 +0,0 @@
-Editor
-======
-
-    LITTLE_ENDIAN = require "./endianness"
-
-    loader = require("./loader")()
-    ajax = require("ajax")()
-
-    {extend, defaults} = require "util"
-
-    TouchCanvas = require "touch-canvas"
-
-    Actions = require "./actions"
-    Command = require "./command"
-    Drop = require "./drop"
-    Eval = require "eval"
-    GridGen = require "grid-gen"
-    Notifications = require "./notifications"
-    Postmaster = require "postmaster"
-    Tools = require "./tools"
-    Undo = require "undo"
-
-    Palette = require("./palette")
-
-    {rgb2Hex} = require "./util"
-
-    Symmetry = require "./symmetry"
-
-    module.exports = (I={}, self=Model(I)) ->
-      pixelExtent = Observable Size(64, 64)
-      pixelSize = Observable 8
-
-      positionDisplay = Observable("")
-
-      symmetryMode = Observable("normal")
-
-      canvas = null
-      lastCommand = null
-
-      replaying = false
-      initialState = null
-
-      self.include Actions
-      self.include Bindable
-      self.include Command
-      self.include Drop
-      self.include Eval
-      self.include Notifications
-      self.include Undo
-      self.include Tools
-
-      Postmaster(self)
-
-      activeTool = self.activeTool
-
-      self.extend
-        alpha: Observable 100
-
-        pixelSize: pixelSize
-        pixelExtent: pixelExtent
-        positionDisplay: positionDisplay
-
-        loading: Observable false
-        loadingProgress: Observable 0
-        loadingClass: ->
-          "loading" if self.loading()
-
-        viewportWidth: ->
-          pixelExtent().scale(pixelSize()).width
-        viewportHeight: ->
-          pixelExtent().scale(pixelSize()).height
-
-        viewportStyle: ->
-          width = self.viewportWidth()
-          height = self.viewportHeight()
-
-          {iconUrl, iconOffset} = self.activeTool()
-          {x, y} = Point(iconOffset)
-          cursor = "url(#{iconUrl}) #{x} #{y}, default"
-
-          "width: #{width}px; height: #{height}px; cursor: #{cursor};"
-
-        mainHeight: Observable(720)
-
-        viewportCheckered: Observable false
-
-        viewportChecker: ->
-          "checkered" if self.viewportCheckered()
-
-        viewportCenter: ->
-          if self.viewportHeight() < self.mainHeight()
-            "vertical-center"
-
-        displayGrid: Observable false
-
-        guideInterval: Observable 4
-        gridStyle: ->
-          if self.displayGrid()
-            gridImage = GridGen(
-              width: self.pixelSize()
-              height: self.pixelSize()
-              guide: self.guideInterval()
-            ).backgroundImage()
-
-            "background-image: #{gridImage};"
-
-        symmetryMode: symmetryMode
-
-        hideModal: ->
-          Modal = require "./modal"
-          Modal.hide()
-
-        outputCanvas: () ->
-          outputCanvas = TouchCanvas pixelExtent()
-          outputCanvas.context().drawImage(canvas.element(), 0, 0)
-          outputCanvas.element()
-
-        getBlob: ->
-          new Promise (resolve, reject) ->
-            editor.outputCanvas().toBlob (blob) ->
-              resolve(blob)
-
-        clear: ->
-          previous = self.getSnapshot()
-          self.canvas.clear()
-
-          self.execute editor.Command.PutImageData
-            imageData: self.getSnapshot()
-            imageDataPrevious: previous
-            x: 0
-            y: 0
-
-          return
-
-        resize: (size, data) ->
-          data ?= self.getSnapshot()
-
-          pixelExtent(Size(size))
-          {width, height} = pixelExtent()
-
-          canvasElement = canvas.element()
-          thumbnailCanvasElement = thumbnailCanvas.element()
-          previewCanvasElement = previewCanvas.element()
-
-          thumbnailCanvasElement.width = canvasElement.width = previewCanvasElement.width = width
-          thumbnailCanvasElement.height = canvasElement.height = previewCanvasElement.height = height
-
-          self.putImageData(data)
-
-          self.repaint()
-
-        repaint: ->
-          {width, height} = pixelExtent()
-          thumbnailCanvas.clear()
-          thumbnailCanvas.context().drawImage(canvas.element(), 0, 0)
-
-          return self
-
-        getSnapshot: ->
-          size = pixelExtent()
-          canvas.context().getImageData(0, 0, size.width, size.height)
-
-        insertImageData: (imageData) ->
-          size = pixelExtent()
-
-          self.execute self.Command.Resize
-            size:
-              width: imageData.width
-              height: imageData.height
-            sizePrevious: size
-            imageData: imageData
-            imageDataPrevious: editor.getSnapshot()
-
-          return
-
-        fromDataURL: (dataURL) ->
-          loader.load(dataURL)
-          .then self.insertImageData
-
-        loadFile: (blob) ->
-          url = URL.createObjectURL(blob)
-
-          self.fromDataURL(url)
-          .then ->
-            URL.revokeObjectURL(url)
-            self.history([])
-            return
-
-        vintageReplay: (data) ->
-          unless replaying
-            replaying = true
-
-            new ProgressPromise (resolve, reject, notify) ->
-              steps = data
-
-              # It's pretty funny if we don't reset the symmetry mode ^_^
-              self.symmetryMode "normal"
-
-              self.repaint()
-
-              delay = (5000 / steps.length).clamp(1, 250)
-              i = 0
-
-              runStep = ->
-                if step = steps[i]
-                  try
-                    step.forEach ({x, y, color}) ->
-                      self.draw {x, y}, {color}
-
-                  i += 1
-
-                  setTimeout runStep, delay
-                else
-                  resolve()
-
-              setTimeout runStep, delay
-            .finally ->
-              replaying = false
-              self.restoreInitialState()
-
-        replay: (steps, dropHistory=false) ->
-          unless replaying
-            replaying = true
-
-            # Copy and clear history
-            steps ?= self.history()
-
-            self.restoreInitialState()
-
-            delay = (5000 / steps.length).clamp(1, 250)
-            i = 0
-
-            runStep = ->
-              if step = steps[i]
-                self.execute step
-                i += 1
-
-                setTimeout runStep, delay
-              else
-                # Replay will be done and history will have been automatically rebuilt
-                replaying = false
-                if dropHistory
-                  self.restoreInitialState()
-
-            setTimeout runStep, delay
-
-        loadReplayFromURL: (jsonURL, sourceImage, finalImage) ->
-          if jsonURL?
-            self.loading true
-
-            ajax.getJSON(jsonURL)
-            .progress (e) ->
-              self.loadingProgress e.loaded / e.total
-            .then (data) ->
-              if Array.isArray(data[0])
-                console.log "vintage"
-                if sourceImage
-                  Promise.all([loader.load(sourceImage), loader.load(finalImage)])
-                  .then ([imageData, finalImageData]) ->
-                    {width, height} = finalImageData
-
-                    editor.setInitialState imageData
-                    editor.restoreInitialState()
-                    editor.resize({width, height})
-                    editor.vintageReplay(data)
-                    editor.setInitialState finalImageData
-                else
-                  loader.load(finalImage)
-                  .then (finalImageData) ->
-                    {width, height} = finalImageData
-                    editor.resize({width, height})
-                    editor.canvas.clear()
-                    editor.vintageReplay(data)
-                    editor.setInitialState finalImageData
-              else
-                loader.load(finalImage)
-                .then (finalImageData) ->
-                  editor.restoreState data, true
-                  editor.setInitialState finalImageData
-            .finally ->
-              self.loadingProgress 0
-              self.loading false
-          else
-            loader.load(finalImage)
-            .then (imageData) ->
-              editor.setInitialState imageData
-              editor.restoreInitialState()
-
-        restoreState: (state, performReplay=false) ->
-          self.palette state.palette.map Observable
-
-          initialState = self.imageDataFromJSON(state.initialState)
-          self.restoreInitialState()
-
-          commands = state.history.map self.Command.parse
-
-          if performReplay
-            self.replay commands, true
-          else
-            commands.forEach (command) -> command.execute()
-            self.history commands
-
-            self.repaint()
-
-        saveState: ->
-          version: "1"
-          palette: self.palette().map (o) -> o()
-          history: self.history().invoke "toJSON"
-          initialState: self.imageDataToJSON initialState
-
-        setInitialState: (imageData) ->
-          initialState = imageData
-
-          return
-
-        restoreInitialState: ->
-          # Become the image with no history
-          self.resize initialState, initialState
-          self.history([])
-
-          return
-
-        withCanvasMods: (cb) ->
-          canvas.context().globalAlpha = thumbnailCanvas.context().globalAlpha = self.alpha() / 100
-
-          try
-            Symmetry[symmetryMode()](pixelExtent(), [Matrix.IDENTITY]).forEach (transform) ->
-              canvas.withTransform transform, (canvas) ->
-                cb(canvas)
-              thumbnailCanvas.withTransform transform, (canvas) ->
-                cb(canvas)
-          finally
-            canvas.context().globalAlpha = thumbnailCanvas.context().globalAlpha = 1
-
-        draw: (point, options={}) ->
-          {color, size} = options
-          color ?= self.activeColor()
-          size ?= 1
-
-          {x, y} = point
-
-          self.withCanvasMods (canvas) ->
-            if color is "transparent"
-              canvas.clear
-                x: x * size
-                y: y * size
-                width: size
-                height: size
-            else
-              canvas.drawRect
-                x: x * size
-                y: y * size
-                width: size
-                height: size
-                color: color
-
-        color: (index) ->
-          self.palette()[index]()
-
-        getColor: (position) ->
-          {x, y} = position
-          data = canvas.context().getImageData(x, y, 1, 1).data
-
-          rgb2Hex data[0], data[1], data[2]
-
-        colorAsInt: ->
-          color = self.activeColor()
-
-          color = color.substring(color.indexOf("#") + 1)
-
-          if color is "transparent"
-            0
-          else
-            if LITTLE_ENDIAN
-              parseInt("ff#{color[4..5]}#{color[2..3]}#{color[0..1]}", 16)
-            else
-              parseInt("#{color}ff")
-
-        palette: Observable(Palette.dawnBringer32.map Observable)
-
-        putImageData: (imageData, x=0, y=0) ->
-          canvas.context().putImageData(imageData, x, y)
-
-        selection: (rectangle) ->
-          each: (iterator) ->
-            rectangle.each (x, y) ->
-              index = self.getIndex(x, y)
-              iterator(index, x, y)
-
-        thumbnailClick: (e) ->
-          e.currentTarget.classList.toggle "right"
-
-      self.activeColor = Observable "#000000"
-
-      self.activeColorStyle = Observable ->
-        "background-color: #{self.activeColor()}"
-
-      self.canvas = canvas = TouchCanvas pixelExtent()
-      self.previewCanvas = previewCanvas = TouchCanvas pixelExtent()
-      self.thumbnailCanvas = thumbnailCanvas = TouchCanvas pixelExtent()
-
-      previewCanvas.element().classList.add "preview"
-
-      do (ctx=self.canvas.context()) ->
-        ctx.imageSmoothingEnabled = false
-        ctx.mozImageSmoothingEnabled = false
-
-      self.TRANSPARENT_FILL = require("./lib/checker")().pattern()
-
-      canvasPosition = (position) ->
-        Point(position).scale(pixelExtent()).floor()
-
-      snapshot = null
-
-      self.restore = ->
-        if snapshot
-          self.putImageData(snapshot)
-          self.repaint()
-
-      previewCanvas.on "touch", (position) ->
-        # Snapshot canvas
-        snapshot = self.getSnapshot()
-
-        activeTool().touch
-          position: canvasPosition position
-          editor: self
-
-      previewCanvas.on "move", (position) ->
-        activeTool().move
-          position: canvasPosition position
-          editor: self
-
-      previewCanvas.on "release", (position) ->
-        activeTool().release
-          position: canvasPosition position
-          editor: self
-
-        size = pixelExtent()
-        diffSnapshot(snapshot, canvas.context().getImageData(0, 0, size.width, size.height))
-
-        self.trigger "release"
-
-      compareImageData = (previous, current) ->
-        return unless previous and current
-        xMin = Infinity
-        xMax = -Infinity
-        yMin = Infinity
-        yMax = -Infinity
-
-        previousData = new Uint32Array(previous.data.buffer)
-        currentData = new Uint32Array(current.data.buffer)
-        length = currentData.length
-        width = current.width
-
-        i = 0
-
-        while i < length
-          x = i % width
-          y = (i / width)|0
-          if previousData[i] != currentData[i]
-            xMin = x if x < xMin
-            xMax = x if x > xMax
-            yMin = y if y < yMin
-            yMax = y if y > yMax
-
-          i += 1
-
-        if xMin != Infinity
-          return [xMin, yMin, xMax - xMin + 1, yMax - yMin + 1]
-        else
-          return null
-
-      diffSnapshot = (previous, current) ->
-        region = compareImageData(previous, current)
-
-        if region
-          [x, y, width, height] = region
-
-          spareCanvas = document.createElement("canvas")
-          spareCanvas.width = width
-          spareCanvas.height = height
-          spareContext = spareCanvas.getContext("2d")
-
-          spareContext.putImageData(previous, -x, -y)
-          previous = spareContext.getImageData(0, 0, width, height)
-
-          spareContext.putImageData(current, -x, -y)
-          current = spareContext.getImageData(0, 0, width, height)
-
-          self.execute self.Command.PutImageData
-            imageData: current
-            imageDataPrevious: previous
-            x: x
-            y: y
-
-      previewCanvas.element().addEventListener "mousemove", ({currentTarget, pageX, pageY}) ->
-        {left, top} = currentTarget.getBoundingClientRect()
-        {x, y} = Point(pageX - left, pageY - top).scale(1/pixelSize()).floor()
-
-        positionDisplay("#{x},#{y}")
-
-      self.on "release", ->
-        previewCanvas.clear()
-
-        # TODO: Think more about triggering change events
-        self.trigger "change"
-
-      # TODO: Extract this decorator pattern
-      ["undo", "execute", "redo"].forEach (method) ->
-        oldMethod = self[method]
-
-        self[method] = ->
-          oldMethod.apply(self, arguments)
-          self.repaint()
-          self.trigger "change"
-
-      self.include require "./dirty"
-
-      initialState = self.getSnapshot()
-
-      document.addEventListener "mousedown", (e) ->
-        return if e.path.some (node) ->
-          node.classList?.contains "panel"
-
-        self.detailTool null
-
-      return self
diff --git a/main.coffee b/main.coffee
new file mode 100644
index 0000000..eb2a1bc
--- /dev/null
+++ b/main.coffee
@@ -0,0 +1,43 @@
+# Setup
+require "./lib/canvas-to-blob"
+
+Editor = require "./editor"
+
+launch = ->
+  # For debugging
+  global.editor = Editor()
+
+  Template = require "./templates/editor"
+  editorElement = Template editor
+  document.body.appendChild editorElement
+
+  try
+    editor.invokeRemote "childLoaded"
+
+  updateViewportCentering = ->
+    {height: mainHeight, width: mainWidth} = editorElement.querySelector(".main").getBoundingClientRect()
+    editor.mainHeight mainHeight
+    editor.mainWidth mainWidth
+  window.addEventListener "resize", updateViewportCentering
+  updateViewportCentering()
+
+if PACKAGE.name is "ROOT"
+  # Google Analytics
+  require("analytics").init("UA-3464282-15")
+
+  # For debug purposes
+  global.PACKAGE = PACKAGE
+  global.require = require
+
+  runtime = require("runtime")(PACKAGE)
+  runtime.boot()
+  runtime.applyStyleSheet(require('./style'))
+
+  metaTag = document.createElement('meta')
+  metaTag.name = "viewport"
+  metaTag.content = "width=device-width, initial-scale=1.0"
+  document.getElementsByTagName('head')[0].appendChild(metaTag)
+
+  launch()
+
+module.exports = Editor
diff --git a/main.coffee.md b/main.coffee.md
deleted file mode 100644
index 199c4a4..0000000
--- a/main.coffee.md
+++ /dev/null
@@ -1,50 +0,0 @@
-Pixel Editor
-============
-
-Welcome to this cool pixel editor. Eventually you'll be able to read this for
-help, but right now it's mostly code.
-
-Editing pixels in your browser.
-
-    # Setup
-    require "./lib/canvas-to-blob"
-
-    Editor = require "./editor"
-
-    launch = ->
-      # For debugging
-      global.editor = Editor()
-
-      Template = require "./templates/editor"
-      editorElement = Template editor
-      document.body.appendChild editorElement
-
-      try
-        editor.invokeRemote "childLoaded"
-
-      updateViewportCentering = ->
-        {height: mainHeight} = editorElement.querySelector(".main").getBoundingClientRect()
-        editor.mainHeight mainHeight
-      window.addEventListener "resize", updateViewportCentering
-      updateViewportCentering()
-
-    if PACKAGE.name is "ROOT"
-      # Google Analytics
-      require("analytics").init("UA-3464282-15")
-
-      # For debug purposes
-      global.PACKAGE = PACKAGE
-      global.require = require
-
-      runtime = require("runtime")(PACKAGE)
-      runtime.boot()
-      runtime.applyStyleSheet(require('./style'))
-
-      metaTag = document.createElement('meta')
-      metaTag.name = "viewport"
-      metaTag.content = "width=device-width, initial-scale=1.0"
-      document.getElementsByTagName('head')[0].appendChild(metaTag)
-
-      launch()
-
-    module.exports = Editor
diff --git a/pixie.cson b/pixie.cson
index 8bca12e..b1882ea 100644
--- a/pixie.cson
+++ b/pixie.cson
@@ -4,13 +4,12 @@ dependencies:
   analytics: "distri/google-analytics:v0.1.0"
   bindable: "distri/bindable:v0.2.0"
   core: "distri/core:v0.6.0"
-  eval: "distri/eval:v0.1.0"
   extensions: "distri/extensions:v0.2.0"
   "grid-gen": "distri/grid-gen:v0.2.0"
   matrix: "distri/matrix:v0.3.1"
   observable: "distri/observable:v0.3.7"
   point: "distri/point:v0.2.0"
-  postmaster: "distri/postmaster:v0.5.0"
+  postmaster: "distri/postmaster:v0.5.2"
   runtime: "distri/runtime:v0.3.0"
   size: "distri/size:v0.1.4"
   "touch-canvas": "distri/touch-canvas:v0.4.2"
diff --git a/test/editor.coffee b/test/editor.coffee
index 120fdd0..5f7e299 100644
--- a/test/editor.coffee
+++ b/test/editor.coffee
@@ -23,7 +23,7 @@ describe "Editor", ->
   it "should exist", ->
     assert editor
 
-  it "should be able to drawn upon", ->
+  it "should be able to be drawn upon", ->
     p1 = x: 0, y: 0, identifier: 0
     p2 = x: 5, y: 5, identifier: 0
 

From 9b646c6f9fa681a6b42fae9da481e489fc8cabff Mon Sep 17 00:00:00 2001
From: Daniel X Moore <daniel@danielx.net>
Date: Wed, 17 Jan 2018 20:59:05 -0800
Subject: [PATCH 3/9] :curry::chart: Updated at https://danielx.net/editor/


From fef82332ff8618fadd7cbafd1299a84e3112d616 Mon Sep 17 00:00:00 2001
From: Daniel X Moore <daniel@danielx.net>
Date: Wed, 17 Jan 2018 21:01:42 -0800
Subject: [PATCH 4/9] :zap::point_right: Updated at https://danielx.net/editor/


From b0e266f0b50266c5190dc6faaab9ff66941db869 Mon Sep 17 00:00:00 2001
From: Daniel X Moore <daniel@danielx.net>
Date: Wed, 17 Jan 2018 21:03:47 -0800
Subject: [PATCH 5/9] :goberserk::file_folder: Updated at
 https://danielx.net/editor/

---
 pixie.cson | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pixie.cson b/pixie.cson
index b1882ea..e166a09 100644
--- a/pixie.cson
+++ b/pixie.cson
@@ -1,3 +1,6 @@
+publish:
+  s3:
+    basePath: "public/danielx.net"
 version: "0.2.0"
 dependencies:
   ajax: "distri/ajax:v0.1.5-pre.0"

From 8d9d19ab412b197f03b43b27e61841349de00eeb Mon Sep 17 00:00:00 2001
From: Daniel X Moore <daniel@danielx.net>
Date: Wed, 17 Jan 2018 21:04:07 -0800
Subject: [PATCH 6/9] :monkey::stuck_out_tongue: Updated at
 https://danielx.net/editor/


From 93a4a9369097b74ef105b9941148af59627c7062 Mon Sep 17 00:00:00 2001
From: Daniel X Moore <daniel@danielx.net>
Date: Wed, 17 Jan 2018 21:11:53 -0800
Subject: [PATCH 7/9] :tongue::shit: Updated at https://danielx.net/editor/


From 9b680681d08285f333bb657f1a08327a614f07ae Mon Sep 17 00:00:00 2001
From: Daniel X Moore <daniel@danielx.net>
Date: Wed, 17 Jan 2018 21:14:50 -0800
Subject: [PATCH 8/9] :paperclip::clock830: Updated at
 https://danielx.net/editor/


From bbf3583701a2027c6cef4143f2ffe1a236875c25 Mon Sep 17 00:00:00 2001
From: Daniel X Moore <daniel@danielx.net>
Date: Wed, 17 Jan 2018 21:17:23 -0800
Subject: [PATCH 9/9] :heavy_minus_sign::birthday: Updated at
 https://danielx.net/editor/

---
 templates/editor.haml.md                    | 58 ---------------------
 templates/editor.jadelet                    | 50 ++++++++++++++++++
 templates/{palette.haml => palette.jadelet} |  2 +-
 3 files changed, 51 insertions(+), 59 deletions(-)
 delete mode 100644 templates/editor.haml.md
 create mode 100644 templates/editor.jadelet
 rename templates/{palette.haml => palette.jadelet} (87%)

diff --git a/templates/editor.haml.md b/templates/editor.haml.md
deleted file mode 100644
index 603bcf9..0000000
--- a/templates/editor.haml.md
+++ /dev/null
@@ -1,58 +0,0 @@
-Editor template
-
-    - activeIndex = @activeIndex
-    - activeTool = @activeTool
-    - previousTool = @previousTool
-    - editor = this
-    - Symmetry = require "../symmetry"
-
-    - Action = require "./action"
-    - ActionPresenter = require "../presenters/action"
-    - Palette = require "./palette"
-    - Tool = require "./tool"
-    - ToolPresenter = require "../presenters/tool"
-
-    .editor(class=@loadingClass)
-
-The toolbar holds our tools.
-
-      .toolbar
-        .tools
-          - @tools.each (tool) ->
-            = Tool ToolPresenter(editor, tool)
-        %h2 Symmetry
-        .tools
-          - symmetryMode = @symmetryMode
-          - ["normal", "flip", "flop", "quad"].forEach (mode) ->
-            - activeClass = -> "active" if mode is symmetryMode()
-            - activate = -> symmetryMode(mode)
-            .tool(style="background-image: url(#{Symmetry.icon[mode]})" class=activeClass click=activate)
-
-Our layers and preview canvases are placed in the viewport.
-
-      .main
-        .viewport(style=@viewportStyle class=@viewportCenter class=@viewportChecker)
-          .overlay(style=@gridStyle)
-          = @canvas.element()
-          = @previewCanvas.element()
-        .thumbnail(click=@thumbnailClick)
-          = @thumbnailCanvas.element()
-
-      .position
-        = @positionDisplay
-
-      .notifications
-        - @notifications.forEach (notification) ->
-          %p
-            = notification
-
-The palette holds our colors.
-
-      = Palette(this)
-
-      .actions
-        - @actions.forEach (action) ->
-          = Action ActionPresenter action, editor
-
-      #loader
-        %progress.vertical-center(value=@loadingProgress)
diff --git a/templates/editor.jadelet b/templates/editor.jadelet
new file mode 100644
index 0000000..cbfab60
--- /dev/null
+++ b/templates/editor.jadelet
@@ -0,0 +1,50 @@
+- activeIndex = @activeIndex
+- activeTool = @activeTool
+- previousTool = @previousTool
+- editor = this
+- Symmetry = require "../symmetry"
+
+- Action = require "./action"
+- ActionPresenter = require "../presenters/action"
+- Palette = require "./palette"
+- Tool = require "./tool"
+- ToolPresenter = require "../presenters/tool"
+
+.editor(class=@loadingClass)
+
+  .toolbar
+    .tools
+      - @tools.each (tool) ->
+        = Tool ToolPresenter(editor, tool)
+    h2 Symmetry
+    .tools
+      - symmetryMode = @symmetryMode
+      - ["normal", "flip", "flop", "quad"].forEach (mode) ->
+        - activeClass = -> "active" if mode is symmetryMode()
+        - activate = -> symmetryMode(mode)
+        .tool(style="background-image: url(#{Symmetry.icon[mode]})" class=activeClass click=activate)
+
+  .main
+    .viewport(style=@viewportStyle class=@viewportCenter class=@viewportChecker)
+      .overlay(style=@gridStyle)
+      = @canvas.element()
+      = @previewCanvas.element()
+    .thumbnail(click=@thumbnailClick)
+      = @thumbnailCanvas.element()
+
+  .position
+    = @positionDisplay
+
+  .notifications
+    - @notifications.forEach (notification) ->
+      p
+        = notification
+
+  = Palette(this)
+
+  .actions
+    - @actions.forEach (action) ->
+      = Action ActionPresenter action, editor
+
+  #loader
+    progress.vertical-center(value=@loadingProgress)
diff --git a/templates/palette.haml b/templates/palette.jadelet
similarity index 87%
rename from templates/palette.haml
rename to templates/palette.jadelet
index 2c0c315..e30d91d 100644
--- a/templates/palette.haml
+++ b/templates/palette.jadelet
@@ -12,7 +12,7 @@
     - style = ->
       - c = editor.activeColor()
       - "background-color: #{c}"
-    %input(type="color" value=editor.activeColor style=style)
+    input(type="color" value=editor.activeColor style=style)
 
   - @palette.forEach (color, index) ->
     = Color ColorPresenter color, editor