Permalink
Browse files

add clipboard

  • Loading branch information...
1 parent 1138447 commit 5dcf11bdf0f650ec7ec3216804ec144de07f52be @maccman committed Apr 6, 2012
Showing with 1,300 additions and 62 deletions.
  1. +1 −0 README.md
  2. +41 −2 assets/javascripts/app/controllers/element.module.coffee
  3. +1 −0 assets/javascripts/app/controllers/elements/ellipsis.module.coffee
  4. +1 −0 assets/javascripts/app/controllers/elements/rectangle.module.coffee
  5. +10 −0 assets/javascripts/app/controllers/elements/text.module.coffee
  6. +33 −0 assets/javascripts/app/controllers/stage.module.coffee
  7. +32 −0 assets/javascripts/app/controllers/stage/clipboard.module.coffee
  8. +25 −1 assets/javascripts/app/models/properties/background.module.coffee
  9. +8 −0 assets/javascripts/app/models/properties/shadow.module.coffee
  10. +3 −1 assets/javascripts/app/models/property.module.coffee
  11. +74 −0 assets/javascripts/app/models/serialize.module.coffee
  12. +27 −10 assets/javascripts/lib/color_picker.module.coffee
  13. +7 −0 assets/javascripts/lib/utils.module.coffee
  14. BIN public/application.icns
  15. BIN public/application.png
  16. +42 −6 public/assets/app/controllers/element.module.js
  17. +2 −0 public/assets/app/controllers/elements/ellipsis.module.js
  18. +2 −0 public/assets/app/controllers/elements/rectangle.module.js
  19. +14 −0 public/assets/app/controllers/elements/text.module.js
  20. +40 −1 public/assets/app/controllers/stage.module.js
  21. +124 −0 public/assets/app/controllers/stage/clipboard.module.js
  22. +129 −0 public/assets/app/controllers/stage/copy_paste.module.js
  23. +33 −1 public/assets/app/models/properties/background.module.js
  24. +11 −0 public/assets/app/models/properties/shadow.module.js
  25. +12 −4 public/assets/app/models/property.module.js
  26. +122 −0 public/assets/app/models/serialize.module.js
  27. +331 −24 public/assets/application.js
  28. +36 −12 public/assets/lib/color_picker.module.js
  29. +66 −0 public/assets/lib/string.module.js
  30. +73 −0 public/assets/lib/utils.module.js
View
@@ -19,6 +19,7 @@ Phase 1:
* Text-spacing
* Rotation
* ✓ Opacity
+ * content editable
Phase 2:
@@ -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
@@ -2,6 +2,7 @@ Element = require('../element')
class Ellipsis extends Element
className: 'ellipsis'
+ id: module.id
constructor: ->
super
@@ -2,5 +2,6 @@ Element = require('../element')
class Rectangle extends Element
className: 'rectangle'
+ id: module.id
module.exports = Rectangle
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
Oops, something went wrong.

0 comments on commit 5dcf11b

Please sign in to comment.