add clipboard

README.md

@@ -19,6 +19,7 @@ Phase 1:
   * Text-spacing
   * Rotation
   * ✓ Opacity
+  * content editable
 
 Phase 2:
 

assets/javascripts/app/controllers/element.module.coffee

@@ -1,9 +1,14 @@
 Resizing   = require('./element/resizing')
+Serialize  = require('app/models/serialize').Serialize
 Background = require('app/models/properties/background')
 Color      = require('app/models/properties/color')
+Utils      = require('lib/utils')
 
 class Element extends Spine.Controller
+  @include Serialize
+
   className: 'element'
+  id: module.id
 
   defaults: ->
     result =
@@ -37,13 +42,14 @@ class Element extends Spine.Controller
       @set(k, v) for k, v of key
     else
       @[key]?(value) or @properties[key] = value
+
     @paint()
 
   paint: ->
     @el.css(@properties)
 
-  toJSON: ->
-    {properties: @properties}
+  toValue: ->
+    @properties
 
   # Manipulating elements
 
@@ -105,4 +111,37 @@ class Element extends Spine.Controller
 
     false
 
+  # Exporting
+
+  outerHTML: ->
+    @el.clone().empty()[0].outerHTML
+
+  ignoredStyles: [
+    'left'
+    'top'
+    'zIndex'
+    'position'
+  ]
+
+  outerCSS: ->
+    # Clone properties object
+    styles = {}
+
+    for name, value of @properties
+      continue if name in @ignoredStyles
+
+      # If a number was passed in, add 'px' to
+      # it (except for certain CSS properties)
+      if typeof value is 'number' and not $.cssNumber[name]
+        value += 'px'
+
+      # Format as CSS property
+      name = Utils.dasherize(name)
+
+      styles[name] = value
+
+    # Format as CSS properties
+    styles = ("\t#{k}: #{v};" for k, v of styles).join("\n")
+    ".#{@className} {\n#{styles}\n}"
+
 module.exports = Element

assets/javascripts/app/controllers/elements/ellipsis.module.coffee

@@ -2,6 +2,7 @@ Element = require('../element')
 
 class Ellipsis extends Element
   className: 'ellipsis'
+  id: module.id
 
   constructor: ->
     super

assets/javascripts/app/controllers/elements/rectangle.module.coffee

@@ -2,5 +2,6 @@ Element = require('../element')
 
 class Rectangle extends Element
   className: 'rectangle'
+  id: module.id
 
 module.exports = Rectangle

assets/javascripts/app/controllers/elements/text.module.coffee

@@ -2,6 +2,7 @@ Rectangle = require('./rectangle')
 
 class Text extends Rectangle
   className: 'text'
+  id: module.id
 
   events:
     'dblclick': 'startEditing'
@@ -16,4 +17,13 @@ class Text extends Rectangle
     super
     @stopEditing() if bool is false
 
+  text: (text) ->
+    @el.text(text) if text?
+    @el.text()
+
+  toValue: ->
+    result = @properties
+    result.text = @text()
+    result
+
 module.exports = Text

assets/javascripts/app/controllers/stage.module.coffee

@@ -1,10 +1,12 @@
+Serialize   = require('app/models/serialize').Serialize
 Selection   = require('./stage/selection')
 Dragging    = require('./stage/dragging')
 Resizing    = require('./stage/resizing')
 SelectArea  = require('./stage/select_area')
 Snapping    = require('./stage/snapping')
 KeyBindings = require('./stage/key_bindings')
 ZIndex      = require('./stage/zindex')
+Clipboard   = require('./stage/clipboard')
 
 Rectangle  = require('./elements/rectangle')
 Ellipsis   = require('./elements/ellipsis')
@@ -23,14 +25,18 @@ class Stage extends Spine.Controller
 
   constructor: ->
     super
+
     @elements    = []
+    @properties  = {}
+
     @selection   = new Selection
     @dragging    = new Dragging(this)
     @resizing    = new Resizing(this)
     @selectArea  = new SelectArea(this)
     @snapping    = new Snapping(this)
     @keybindings = new KeyBindings(this)
     @zindex      = new ZIndex(this)
+    @clipboard   = new Clipboard(this)
 
     @selection.bind 'change', =>
       @el.trigger('selection.change', [this])
@@ -129,4 +135,31 @@ class Stage extends Spine.Controller
       left: area.width / 2
       top:  area.height / 2
 
+  # Properties
+
+  get: (key) ->
+    @[key]?() or @properties[key]
+
+  set: (key, value) ->
+    if typeof key is 'object'
+      @set(k, v) for k, v of key
+    else
+      @[key]?(value) or @properties[key] = value
+
+    @paint()
+
+  paint: ->
+    @el.css(@properties)
+
+  # Serialization
+
+  @include Serialize
+
+  id: module.id
+
+  toValue: ->
+    result =
+      elements:   @elements
+      properties: @properties
+
 module.exports = Stage

assets/javascripts/app/controllers/stage/clipboard.module.coffee

@@ -0,0 +1,32 @@
+class Clipboard
+  constructor: (@stage) ->
+    $(window).bind 'beforecopy', @cancel
+    $(window).bind 'copy', @copy
+
+    $(window).bind 'beforepaste', @cancel
+    $(window).bind 'paste', @paste
+
+  cancel: (e) =>
+    # We need to cancel the default to get
+    # the 'copy' event to trigger
+    e.preventDefault()
+
+  copy: (e) =>
+    return unless @stage.selection.isAny()
+
+    e.preventDefault()
+    e = e.originalEvent
+
+    json = JSON.stringify(@stage.selection.elements)
+    e.clipboardData.setData('json/x-stylo', json)
+
+    html = (el.outerHTML() for el in @stage.selection.elements)
+    e.clipboardData.setData('text/html', html.join("\n"))
+
+    styles = (el.outerCSS() for el in @stage.selection.elements)
+    e.clipboardData.setData('text/plain', styles.join("\n\n"))
+
+  paste: (e) =>
+    console.log('paste', e)
+
+module.exports = Clipboard

assets/javascripts/app/models/properties/background.module.coffee

@@ -2,12 +2,18 @@ Property = require('app/models/property')
 Color    = require('./color')
 
 class Position
+  id: "#{module.id}.Position"
+
   constructor: (@angle = 0) ->
 
   toString: ->
     "#{@angle}deg"
 
+  toValue: -> @angle
+
 class ColorStop
+  id: "#{module.id}.ColorStop"
+
   constructor: (@color, @length) ->
     @color or= new Color.Black
 
@@ -17,19 +23,28 @@ class ColorStop
     else
       "#{@color}"
 
+  toValue: ->
+    [@color, @length]
+
 class BackgroundImage extends Property
+  id: "#{module.id}.BackgroundImage"
 
 class LinearGradient extends BackgroundImage
+  id: "#{module.id}.LinearGradient"
+
   constructor: (@position = new Position, @stops = []) ->
 
   toString: ->
     stops = @stops.sort((a, b) -> a.length - b.length)
-    "-webkit-linear-gradient(#{[@position, stops...].join(',')})"
+    "-webkit-linear-gradient(#{[@position, stops...].join(', ')})"
 
   toDisplayString: ->
     stops = @stops.sort((a, b) -> a.length - b.length)
     "linear-gradient(#{[@position, stops...].join(', ')})"
 
+  toValue: ->
+    [@position, @stops]
+
   addStop: (stop) ->
     @stops.push(stop)
 
@@ -38,17 +53,26 @@ class LinearGradient extends BackgroundImage
     @stops.splice(index, 1)
 
 class URL extends BackgroundImage
+  id: "#{module.id}.URL"
+
   constructor: (@url) ->
 
   toString: ->
     "url('#{@url}')"
 
+  toValue: -> @url
+
 class Background
+  id: module.id
+
   constructor: (@color, @images = []) ->
 
   toString: ->
     "#{@color} #{@images}"
 
+  toValue: ->
+    [@color, @images]
+
 module.exports                 = Background
 module.exports.BackgroundImage = BackgroundImage
 module.exports.LinearGradient  = LinearGradient

assets/javascripts/app/models/properties/shadow.module.coffee

@@ -2,6 +2,8 @@ Property = require('app/models/property')
 Color    = require('./color')
 
 class Shadow extends Property
+  id: module.id
+
   constructor: (properties = {}) ->
     @[k] = v for k, v of properties
 
@@ -19,4 +21,10 @@ class Shadow extends Property
     result.push(@color.toString())
     result.join(' ')
 
+  toValue: ->
+    value =
+      x: @x
+      y: @y
+      color: @color
+
 module.exports = Shadow

assets/javascripts/app/models/property.module.coffee

@@ -1,10 +1,12 @@
 Collection = require('lib/collection')
+Serialize  = require('./serialize').Serialize
 
 class Values extends Collection
   toString: ->
     @join(', ')
 
-class Property
+class Property extends Spine.Module
+  @include Serialize
 
 module.exports = Property
 module.exports.Values = Values