initial commit
This commit is contained in:
John Bintz
commit
7b26ee23c9
|
|
@ -0,0 +1,3 @@
|
||||||
|
/bower_components/
|
||||||
|
/node_modules/
|
||||||
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
dist/
|
||||||
|
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
module.exports = (grunt) ->
|
||||||
|
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks)
|
||||||
|
|
||||||
|
grunt.initConfig {
|
||||||
|
watch:
|
||||||
|
coffee:
|
||||||
|
files: ['src/**/*.coffee']
|
||||||
|
tasks: ['browserify', 'coffee', 'uglify']
|
||||||
|
browserify:
|
||||||
|
dist:
|
||||||
|
files:
|
||||||
|
'dist/bismarck.js': 'src/bismarck.coffee'
|
||||||
|
options:
|
||||||
|
transform: ['coffeeify']
|
||||||
|
browserifyOptions:
|
||||||
|
debug: true
|
||||||
|
extensions: ['.coffee', '.litcoffee']
|
||||||
|
coffee:
|
||||||
|
lib:
|
||||||
|
expand: true
|
||||||
|
cwd: 'src'
|
||||||
|
src: ['**/*.coffee']
|
||||||
|
dest: 'lib'
|
||||||
|
ext: '.js'
|
||||||
|
options:
|
||||||
|
bare: true
|
||||||
|
karma:
|
||||||
|
unit:
|
||||||
|
configFile: 'karma.conf.js'
|
||||||
|
autoWatch: true
|
||||||
|
uglify:
|
||||||
|
options:
|
||||||
|
mangle: false
|
||||||
|
dist:
|
||||||
|
files:
|
||||||
|
'dist/bismarck.min.js': 'dist/bismarck.js'
|
||||||
|
concurrent:
|
||||||
|
default:
|
||||||
|
tasks: ['karma', 'watch']
|
||||||
|
options:
|
||||||
|
logConcurrentOutput: true
|
||||||
|
limit: 2
|
||||||
|
}
|
||||||
|
|
||||||
|
grunt.registerTask 'default', ['browserify', 'uglify', 'coffee', 'concurrent:default']
|
||||||
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
{
|
||||||
|
"name": "bismarck",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"main": "dist/bismarck.js",
|
||||||
|
"ignore": [
|
||||||
|
"**/.*",
|
||||||
|
"node_modules",
|
||||||
|
"bower_components",
|
||||||
|
"test",
|
||||||
|
"tests"
|
||||||
|
],
|
||||||
|
"dependencies": {
|
||||||
|
"snap.svg": "~0.3.0",
|
||||||
|
"jquery": "~2.1.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
// Karma configuration
|
||||||
|
// Generated on Tue Sep 23 2014 07:24:39 GMT-0400 (EDT)
|
||||||
|
|
||||||
|
module.exports = function(config) {
|
||||||
|
config.set({
|
||||||
|
|
||||||
|
// base path that will be used to resolve all patterns (eg. files, exclude)
|
||||||
|
basePath: '',
|
||||||
|
|
||||||
|
preprocessors: {
|
||||||
|
'test/index.coffee': 'browserify',
|
||||||
|
'src/coffee/app.coffee': 'browserify',
|
||||||
|
},
|
||||||
|
|
||||||
|
// frameworks to use
|
||||||
|
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
|
||||||
|
frameworks: ['browserify', 'jasmine'],
|
||||||
|
|
||||||
|
// list of files / patterns to load in the browser
|
||||||
|
files: [
|
||||||
|
'bower_components/jquery/dist/jquery.js',
|
||||||
|
'bower_components/snap.svg/dist/snap.svg.js',
|
||||||
|
'test/index.coffee'
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
|
// list of files to exclude
|
||||||
|
exclude: [
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
|
// preprocess matching files before serving them to the browser
|
||||||
|
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
|
||||||
|
browserify: {
|
||||||
|
extensions: ['.coffee', '.litcoffee'],
|
||||||
|
transform: ['coffeeify'],
|
||||||
|
watch: true,
|
||||||
|
debug: true
|
||||||
|
},
|
||||||
|
|
||||||
|
// test results reporter to use
|
||||||
|
// possible values: 'dots', 'progress'
|
||||||
|
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
|
||||||
|
reporters: ['progress'],
|
||||||
|
|
||||||
|
|
||||||
|
// web server port
|
||||||
|
port: 9877,
|
||||||
|
|
||||||
|
|
||||||
|
// enable / disable colors in the output (reporters and logs)
|
||||||
|
colors: true,
|
||||||
|
|
||||||
|
|
||||||
|
// level of logging
|
||||||
|
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
|
||||||
|
logLevel: config.LOG_INFO,
|
||||||
|
|
||||||
|
|
||||||
|
// enable / disable watching file and executing tests whenever any file changes
|
||||||
|
autoWatch: true,
|
||||||
|
|
||||||
|
|
||||||
|
// start these browsers
|
||||||
|
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
|
||||||
|
browsers: ['PhantomJS'],
|
||||||
|
|
||||||
|
|
||||||
|
// Continuous Integration mode
|
||||||
|
// if true, Karma captures browsers, runs the tests and exits
|
||||||
|
singleRun: false
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
{
|
||||||
|
"name": "bismarck",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "lib/bismarck.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"devDependencies": {
|
||||||
|
"browserify": "^6.1.0",
|
||||||
|
"coffeeify": "^0.7.0",
|
||||||
|
"grunt": "^0.4.5",
|
||||||
|
"grunt-browserify": "^3.1.0",
|
||||||
|
"grunt-concurrent": "^1.0.0",
|
||||||
|
"grunt-contrib-coffee": "^0.11.1",
|
||||||
|
"grunt-contrib-concat": "^0.5.0",
|
||||||
|
"grunt-contrib-uglify": "^0.6.0",
|
||||||
|
"grunt-contrib-watch": "^0.6.1",
|
||||||
|
"grunt-karma": "^0.9.0",
|
||||||
|
"karma": "^0.12.23",
|
||||||
|
"karma-bro": "^0.8.0",
|
||||||
|
"karma-chrome-launcher": "^0.1.4",
|
||||||
|
"karma-coffee-preprocessor": "^0.2.1",
|
||||||
|
"karma-firefox-launcher": "^0.1.3",
|
||||||
|
"karma-jasmine": "~0.2.2",
|
||||||
|
"karma-phantomjs-launcher": "^0.1.4",
|
||||||
|
"matchdep": "^0.3.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"q": "^1.0.1",
|
||||||
|
"underscore": "^1.7.0",
|
||||||
|
"xml2js": "^0.4.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
Canvas = require('./bismarck/canvas')
|
||||||
|
|
||||||
|
Bismarck = (element, options) ->
|
||||||
|
if typeof element == 'string'
|
||||||
|
new Canvas(document.getElementById(element), options)
|
||||||
|
else
|
||||||
|
new Canvas(element, options)
|
||||||
|
|
||||||
|
Bismarck.debug = false
|
||||||
|
|
||||||
|
module.exports = Bismarck
|
||||||
|
|
||||||
|
if window?
|
||||||
|
window.Bismarck = Bismarck
|
||||||
|
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
Animate =
|
||||||
|
_animationsEnabled: true
|
||||||
|
currentTime: -> +new Date
|
||||||
|
moveFromTo: (object, from, to, distance) ->
|
||||||
|
dx = to.x - from.x
|
||||||
|
dy = to.y - from.y
|
||||||
|
x = from.x + (dx * distance)
|
||||||
|
y = from.y + (dy * distance)
|
||||||
|
|
||||||
|
object.moveTo(x, y)
|
||||||
|
|
||||||
|
class Animate.Synchronizer
|
||||||
|
constructor: ->
|
||||||
|
@animations = []
|
||||||
|
@recalcs = []
|
||||||
|
@removers = []
|
||||||
|
@isRunning = false
|
||||||
|
@fpsLimit = 30
|
||||||
|
|
||||||
|
addAnimation: (recalc, animation) ->
|
||||||
|
@animations.push(animation)
|
||||||
|
@recalcs.push(recalc)
|
||||||
|
@removers.push => @removeAnimation(animation)
|
||||||
|
@run()
|
||||||
|
|
||||||
|
=> @removeAnimation(animation)
|
||||||
|
|
||||||
|
removeAnimation: (animation) ->
|
||||||
|
index = @animations.indexOf(animation)
|
||||||
|
@animations.splice(index, 1)
|
||||||
|
@recalcs.splice(index, 1)
|
||||||
|
@removers.splice(index, 1)
|
||||||
|
if @animations.length == 0
|
||||||
|
@isRunning = false
|
||||||
|
|
||||||
|
run: =>
|
||||||
|
if not @isRunning
|
||||||
|
@isRunning = true
|
||||||
|
|
||||||
|
window.requestAnimationFrame =>
|
||||||
|
if @animations.length > 0
|
||||||
|
startTime = Animate.currentTime()
|
||||||
|
Animate._animationsDisabled = false
|
||||||
|
for i in [0..@animations.length - 1]
|
||||||
|
if @animations[i]
|
||||||
|
@animations[i](startTime, @removers[i])
|
||||||
|
Animate._animationsDisabled = true
|
||||||
|
r.recalc() for r in @recalcs
|
||||||
|
endTime = Animate.currentTime()
|
||||||
|
if @isRunning
|
||||||
|
calc = Math.max(0, (1 / @fpsLimit - ((endTime - startTime) / 1000)) * 1000)
|
||||||
|
setTimeout(@run, calc)
|
||||||
|
else
|
||||||
|
@isRunning = false
|
||||||
|
|
||||||
|
Animate.synchronizer = new Animate.Synchronizer()
|
||||||
|
|
||||||
|
Animate.once = (recalc, options, code) ->
|
||||||
|
startTime = Animate.currentTime()
|
||||||
|
endTime = startTime + options.duration
|
||||||
|
|
||||||
|
Animate.synchronizer.addAnimation recalc, (currentTime, stop) ->
|
||||||
|
index = Math.min(1, (currentTime - startTime) / options.duration)
|
||||||
|
result = code(index)
|
||||||
|
|
||||||
|
stop() if not result or currentTime >= endTime
|
||||||
|
|
||||||
|
Animate.loop = (recalc, options, code) ->
|
||||||
|
startTime = Animate.currentTime()
|
||||||
|
|
||||||
|
Animate.synchronizer.addAnimation recalc, (currentTime, stop) ->
|
||||||
|
index = Math.min(1, (currentTime - startTime) % options.duration / options.duration)
|
||||||
|
result = code(index)
|
||||||
|
|
||||||
|
stop() if not result
|
||||||
|
|
||||||
|
module.exports = Animate
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
Drawable = require('./drawable')
|
||||||
|
Resources = require('./resources')
|
||||||
|
Layout = require('./layout')
|
||||||
|
|
||||||
|
class Canvas
|
||||||
|
constructor: (@element, options = {}) ->
|
||||||
|
@snapElement = Snap(@element)
|
||||||
|
if not @snapElement.attr('bismarck')
|
||||||
|
if options.id
|
||||||
|
@snapElement.attr(id: options.id, bismarck: 'canvas')
|
||||||
|
|
||||||
|
fromLayout: (xml, callback) ->
|
||||||
|
Layout(xml, this, callback)
|
||||||
|
|
||||||
|
create: (options) ->
|
||||||
|
drawable = new Drawable(this, options)
|
||||||
|
drawable.attachTo(@snapElement)
|
||||||
|
drawable
|
||||||
|
|
||||||
|
find: (id) ->
|
||||||
|
drawable = new Drawable(this)
|
||||||
|
drawable.useExisting(@snapElement.select("##{id}"))
|
||||||
|
drawable
|
||||||
|
|
||||||
|
resources: ->
|
||||||
|
return @_resources if @_resources
|
||||||
|
|
||||||
|
@_resources = new Resources(this)
|
||||||
|
@_resources.attachTo(@snapElement)
|
||||||
|
@_resources
|
||||||
|
|
||||||
|
module.exports = Canvas
|
||||||
|
|
@ -0,0 +1,327 @@
|
||||||
|
Animate = require('./animate')
|
||||||
|
|
||||||
|
class Drawable
|
||||||
|
constructor: (@canvas, options = {}) ->
|
||||||
|
defaults =
|
||||||
|
centerPoint: 'northwest'
|
||||||
|
position: {x: 0, y: 0}
|
||||||
|
angle: 0
|
||||||
|
scale: 1
|
||||||
|
|
||||||
|
for own key, value of defaults
|
||||||
|
switch key
|
||||||
|
when 'centerPoint'
|
||||||
|
@setCenterPoint(value || defaults[key])
|
||||||
|
else
|
||||||
|
this[key] = value || defaults[key]
|
||||||
|
|
||||||
|
for own key, value of options
|
||||||
|
switch key
|
||||||
|
when 'centerPoint'
|
||||||
|
@setCenterPoint(value || defaults[key])
|
||||||
|
else
|
||||||
|
this[key] = value || defaults[key]
|
||||||
|
|
||||||
|
@_resources = @canvas.resources()
|
||||||
|
@_children = []
|
||||||
|
|
||||||
|
resources: -> @_resources
|
||||||
|
snapBBox: -> @_scale.getBBox(true)
|
||||||
|
|
||||||
|
create: (options) ->
|
||||||
|
drawable = new Drawable(@canvas, options)
|
||||||
|
drawable.attachTo(@_scale)
|
||||||
|
drawable.parentDrawable = this
|
||||||
|
@_children.push(drawable)
|
||||||
|
drawable
|
||||||
|
|
||||||
|
remove: ->
|
||||||
|
@_translateRotate.remove()
|
||||||
|
|
||||||
|
attachTo: (snapElement) ->
|
||||||
|
@_translateRotate = snapElement.group().addClass('-translate')
|
||||||
|
@_scale = @_translateRotate.group().addClass('-scale')
|
||||||
|
|
||||||
|
@_translateRotate.attr(id: @id, bismarck: 'drawable')
|
||||||
|
@_currentBBox = @snapBBox()
|
||||||
|
@snapElement = @_translateRotate
|
||||||
|
|
||||||
|
forceSize: (w, h) ->
|
||||||
|
@_forcedSize.remove() if @_forcedSize
|
||||||
|
|
||||||
|
@_forcedDims = { w: w, h: h }
|
||||||
|
@_forcedSize = @_translateRotate.rect(0, 0, w, h).attr(fill: 'rgba(0,0,0,0)')
|
||||||
|
|
||||||
|
me = @_forcedSize.node
|
||||||
|
@_translateRotate.node.insertBefore(me, @_translateRotate.node.childNodes[0])
|
||||||
|
|
||||||
|
useExisting: (@_translateRotate) ->
|
||||||
|
throw "Not a Bismarck element!" if not @_translateRotate.attr('bismarck')
|
||||||
|
childNodes = @_translateRotate.node.childNodes
|
||||||
|
|
||||||
|
@_scale = Snap(childNodes[0])
|
||||||
|
if childNodes[1]
|
||||||
|
@centerPointCross = Snap(childNodes[1])
|
||||||
|
|
||||||
|
currentNode = @_translateRotate.node.parentNode
|
||||||
|
while currentNode
|
||||||
|
switch currentNode.getAttribute('bismarck')
|
||||||
|
when 'drawable'
|
||||||
|
@parentDrawable = new Drawable(@canvas, {})
|
||||||
|
@parentDrawable.useExisting(Snap(currentNode))
|
||||||
|
currentNode = null
|
||||||
|
when 'canvas'
|
||||||
|
currentNode = null
|
||||||
|
else
|
||||||
|
# stop!
|
||||||
|
if currentNode.nodeName == 'svg'
|
||||||
|
currentNode = null
|
||||||
|
else
|
||||||
|
currentNode = currentNode.parentNode
|
||||||
|
|
||||||
|
angular.extend(this, @_translateRotate.data('settings'))
|
||||||
|
|
||||||
|
showCenterPoint: ->
|
||||||
|
@centerPointCross = @_translateRotate.group()
|
||||||
|
@centerPointCross.line(0, -5, 0, 5).attr(stroke: 'black')
|
||||||
|
@centerPointCross.line(-5, 0, 5, 0).attr(stroke: 'black')
|
||||||
|
|
||||||
|
@recalc()
|
||||||
|
|
||||||
|
moveTo: (x, y) ->
|
||||||
|
@position = {x: x, y: y}
|
||||||
|
@recalc()
|
||||||
|
|
||||||
|
rotateTo: (angle) ->
|
||||||
|
@angle = angle
|
||||||
|
@recalc()
|
||||||
|
|
||||||
|
scaleTo: (scale) ->
|
||||||
|
@scale = scale
|
||||||
|
@recalc()
|
||||||
|
|
||||||
|
alignTo: (object, how = 'center', args...) ->
|
||||||
|
switch how
|
||||||
|
when 'center'
|
||||||
|
@moveTo(object.position.x, object.position.y, args...)
|
||||||
|
when 'horizontal'
|
||||||
|
@moveTo(@position.x, object.position.y, args...)
|
||||||
|
when 'vertical'
|
||||||
|
@moveTo(object.position.x, @position.y, args...)
|
||||||
|
|
||||||
|
centerInParent: ->
|
||||||
|
@_centerInParent = true
|
||||||
|
@setCenterPoint('center')
|
||||||
|
@recalc(true)
|
||||||
|
|
||||||
|
recalc: (down = false) ->
|
||||||
|
if Animate._animationsEnabled
|
||||||
|
if @_centerInParent
|
||||||
|
parent = @parentDrawable.getDimensions()
|
||||||
|
|
||||||
|
@position = { x: parent.w / 2, y: parent.h / 2}
|
||||||
|
|
||||||
|
if @oldScale != @scale
|
||||||
|
matrix = new Snap.Matrix()
|
||||||
|
matrix.scale(@scale)
|
||||||
|
@_scale.transform(matrix)
|
||||||
|
@oldScale = @scale
|
||||||
|
|
||||||
|
offset = @getOffset()
|
||||||
|
upperLeft = @upperLeft()
|
||||||
|
|
||||||
|
if @centerPointCross?
|
||||||
|
matrix = new Snap.Matrix()
|
||||||
|
matrix.translate(offset.x + upperLeft.x, offset.y + upperLeft.y)
|
||||||
|
@centerPointCross.transform(matrix)
|
||||||
|
|
||||||
|
matrix = new Snap.Matrix()
|
||||||
|
|
||||||
|
matrix.translate(@position.x, @position.y)
|
||||||
|
matrix.rotate(@angle, 0, 0)
|
||||||
|
|
||||||
|
if not @_forcedSize
|
||||||
|
matrix.translate(-offset.x - upperLeft.x, -offset.y - upperLeft.y)
|
||||||
|
|
||||||
|
@_translateRotate.transform(matrix)
|
||||||
|
|
||||||
|
if false
|
||||||
|
@_translateRotate.data('settings', {
|
||||||
|
centerPoint: @centerPoint
|
||||||
|
position: @position
|
||||||
|
angle: @angle
|
||||||
|
scale: @scale
|
||||||
|
_currentBBox: @_currentBBox
|
||||||
|
_centerInParent: @_centerInParent
|
||||||
|
_forcedDims: @_forcedDims
|
||||||
|
_children: @_children
|
||||||
|
})
|
||||||
|
|
||||||
|
if down
|
||||||
|
child.recalc(true) for child in @_children
|
||||||
|
else
|
||||||
|
@parentDrawable.recalc() if @parentDrawable?
|
||||||
|
|
||||||
|
moveForward: ->
|
||||||
|
me = @_translateRotate.node
|
||||||
|
parent = me.parentNode
|
||||||
|
|
||||||
|
l = parent.childNodes.length - 1
|
||||||
|
|
||||||
|
for i in [0..l]
|
||||||
|
if parent.childNodes[i] == me and i < l
|
||||||
|
parent.insertBefore(parent.childNodes[i + 1], me)
|
||||||
|
|
||||||
|
moveBackward: ->
|
||||||
|
me = @_translateRotate.node
|
||||||
|
parent = me.parentNode
|
||||||
|
|
||||||
|
for i in [0..parent.childNodes.length]
|
||||||
|
if parent.childNodes[i] == me and i > 0
|
||||||
|
parent.insertBefore(me, parent.childNodes[i - 1])
|
||||||
|
|
||||||
|
moveToFront: ->
|
||||||
|
me = @_translateRotate.node
|
||||||
|
me.parent.appendChild(me)
|
||||||
|
|
||||||
|
moveToBack: ->
|
||||||
|
me = @_translateRotate.node
|
||||||
|
me.parent.insertBefore(me, me.parent.childNodes[0])
|
||||||
|
|
||||||
|
on: (event, args...) ->
|
||||||
|
code = args.pop()
|
||||||
|
targetSelector = args.shift()
|
||||||
|
|
||||||
|
target = @_translateRotate
|
||||||
|
if targetSelector?
|
||||||
|
target = target.select(targetSelector)
|
||||||
|
|
||||||
|
target[event](code)
|
||||||
|
|
||||||
|
draw: (code) ->
|
||||||
|
code(@_scale)
|
||||||
|
@recalc()
|
||||||
|
|
||||||
|
@_currentBBox = @snapBBox()
|
||||||
|
|
||||||
|
scaleAndRotateCoords: (coords) ->
|
||||||
|
pairs = if coords.w? then ['w', 'h'] else ['x', 'y']
|
||||||
|
|
||||||
|
coords[pairs[0]] *= @scale
|
||||||
|
coords[pairs[1]] *= @scale
|
||||||
|
|
||||||
|
rad2ang = Math.PI / 180
|
||||||
|
|
||||||
|
radianAngle = rad2ang * @angle
|
||||||
|
cos = Math.cos(radianAngle)
|
||||||
|
sin = Math.sin(radianAngle)
|
||||||
|
|
||||||
|
newW = coords[pairs[0]] * cos + coords[pairs[1]] * sin
|
||||||
|
newH = coords[pairs[1]] * cos + coords[pairs[0]] * sin
|
||||||
|
|
||||||
|
coords[pairs[0]] = newW
|
||||||
|
coords[pairs[1]] = newh
|
||||||
|
|
||||||
|
coords
|
||||||
|
|
||||||
|
getOffset: ->
|
||||||
|
output = {}
|
||||||
|
|
||||||
|
source = if @_children.length > 0
|
||||||
|
@getDimensions()
|
||||||
|
else
|
||||||
|
@_currentBBox
|
||||||
|
|
||||||
|
for coordPart in @centerPoint
|
||||||
|
output[coordPart.which] = coordPart.convert(source[coordPart.dim])
|
||||||
|
|
||||||
|
output
|
||||||
|
|
||||||
|
upperLeft: ->
|
||||||
|
if @_children.length == 0
|
||||||
|
{ x: 0, y: 0 }
|
||||||
|
else
|
||||||
|
furthestUpperLeft = { x: null, y: null }
|
||||||
|
for child in @_children
|
||||||
|
offset = child.getOffset()
|
||||||
|
offset.x = -offset.x + child.position.x
|
||||||
|
offset.y = -offset.y + child.position.y
|
||||||
|
|
||||||
|
if !furthestUpperLeft.x
|
||||||
|
furthestUpperLeft.x = offset.x
|
||||||
|
furthestUpperLeft.y = offset.y
|
||||||
|
else
|
||||||
|
furthestUpperLeft.x = Math.min(furthestUpperLeft.x, offset.x)
|
||||||
|
furthestUpperLeft.y = Math.min(furthestUpperLeft.y, offset.y)
|
||||||
|
|
||||||
|
furthestUpperLeft
|
||||||
|
|
||||||
|
setCenterPoint: (args...) ->
|
||||||
|
if args.length == 1
|
||||||
|
args = switch args[0]
|
||||||
|
when 'center'
|
||||||
|
['50%', '50%']
|
||||||
|
when 'northwest'
|
||||||
|
[0,0]
|
||||||
|
|
||||||
|
@coordinates = {}
|
||||||
|
|
||||||
|
data = [
|
||||||
|
{ index: 0, which: 'x', dim: 'w' },
|
||||||
|
{ index: 1, which: 'y', dim: 'h' }
|
||||||
|
]
|
||||||
|
|
||||||
|
coordMap = (datum) ->
|
||||||
|
datum.value = args[datum.index]
|
||||||
|
if datum.value.substr? and datum.value.substr(-1) == '%'
|
||||||
|
percent = Number(datum.value.slice(0, -1)) / 100.0
|
||||||
|
|
||||||
|
datum.convert = (value) -> value * percent
|
||||||
|
else
|
||||||
|
datum.convert = (value) -> datum.value
|
||||||
|
|
||||||
|
datum
|
||||||
|
|
||||||
|
@centerPoint = data.map(coordMap)
|
||||||
|
|
||||||
|
getDimensions: ->
|
||||||
|
if @_forcedDims
|
||||||
|
@_forcedDims
|
||||||
|
else
|
||||||
|
if @_children.length > 0
|
||||||
|
@getDimensionsWithChildren()
|
||||||
|
else
|
||||||
|
@_currentBBox
|
||||||
|
|
||||||
|
getDimensionsWithChildren: ->
|
||||||
|
bbox =
|
||||||
|
sx: null
|
||||||
|
sy: null
|
||||||
|
ex: null
|
||||||
|
ey: null
|
||||||
|
|
||||||
|
for child in @_children
|
||||||
|
childBBox = child.getDimensions()
|
||||||
|
childOffset = child.getOffset()
|
||||||
|
|
||||||
|
childBBox.x = child.position.x - childOffset.x
|
||||||
|
childBBox.y = child.position.y - childOffset.y
|
||||||
|
|
||||||
|
if bbox.sx == null
|
||||||
|
bbox.sx = childBBox.x
|
||||||
|
bbox.sy = childBBox.y
|
||||||
|
bbox.ex = childBBox.x + childBBox.w
|
||||||
|
bbox.ey = childBBox.y + childBBox.h
|
||||||
|
else
|
||||||
|
bbox.sx = Math.min(bbox.sx, childBBox.x)
|
||||||
|
bbox.sy = Math.min(bbox.sy, childBBox.y)
|
||||||
|
bbox.ex = Math.max(bbox.ex, childBBox.x + childBBox.w)
|
||||||
|
bbox.ey = Math.max(bbox.ey, childBBox.y + childBBox.h)
|
||||||
|
|
||||||
|
{ w: bbox.ex - bbox.sx, h: bbox.ey - bbox.sy }
|
||||||
|
|
||||||
|
append: (drawable) ->
|
||||||
|
@_translateRotate.append(drawable._scaleRotate)
|
||||||
|
|
||||||
|
module.exports = Drawable
|
||||||
|
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
xml2js = require('xml2js')
|
||||||
|
parseString = require('xml2js').parseString
|
||||||
|
_ = require('underscore')
|
||||||
|
|
||||||
|
svgObjs =
|
||||||
|
rect: (options, canvas) ->
|
||||||
|
rect = canvas.rect(options.x, options.y, options.width, options.height)
|
||||||
|
rect.attr(_.omit(options, 'x', 'y', 'width', 'height'))
|
||||||
|
|
||||||
|
rect
|
||||||
|
|
||||||
|
oneOrMore = (value, code) ->
|
||||||
|
if value.push?
|
||||||
|
for node in value
|
||||||
|
code(node)
|
||||||
|
else
|
||||||
|
code(value)
|
||||||
|
|
||||||
|
dive = (node, drawable, topLevel = null) ->
|
||||||
|
for own key, value of node
|
||||||
|
switch key
|
||||||
|
when 'drawable'
|
||||||
|
oneOrMore value, (v) ->
|
||||||
|
childDrawable = drawable.create(v.$)
|
||||||
|
topLevel ||= childDrawable
|
||||||
|
dive(v, childDrawable, topLevel)
|
||||||
|
when '$'
|
||||||
|
# nothing
|
||||||
|
else
|
||||||
|
oneOrMore value, (v) ->
|
||||||
|
drawable.draw (svg) ->
|
||||||
|
svgObjs[key](v.$, svg)
|
||||||
|
dive(v, drawable, topLevel)
|
||||||
|
|
||||||
|
topLevel
|
||||||
|
|
||||||
|
module.exports = (xml, canvas, callback = null) ->
|
||||||
|
parseString xml, (err, result) ->
|
||||||
|
if err?
|
||||||
|
throw err
|
||||||
|
else
|
||||||
|
diveResult = dive(result, canvas)
|
||||||
|
|
||||||
|
if callback
|
||||||
|
callback(diveResult)
|
||||||
|
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
class Resources
|
||||||
|
constructor: (@canvas) ->
|
||||||
|
@resources = {}
|
||||||
|
@bboxes = {}
|
||||||
|
|
||||||
|
attachTo: (snapElement) ->
|
||||||
|
@resourceGroup = snapElement.group().attr(display: 'none')
|
||||||
|
|
||||||
|
copyIDsFrom: (snapElement, ids...) ->
|
||||||
|
for id in ids
|
||||||
|
node = snapElement.select("##{id}")
|
||||||
|
node.transform('')
|
||||||
|
@resourceGroup.append(node)
|
||||||
|
@resources[id] = node
|
||||||
|
|
||||||
|
clone: (id) ->
|
||||||
|
@resources[id].use()
|
||||||
|
|
||||||
|
copy: (id) ->
|
||||||
|
@resources[id].clone()
|
||||||
|
|
||||||
|
bbox: (id) ->
|
||||||
|
@bboxes[id] ||= @resources[id].getBBox()
|
||||||
|
|
||||||
|
module.exports = Resources
|
||||||
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
Canvas = require('../../src/bismarck/canvas')
|
||||||
|
Animate = require('../../src/bismarck/animate')
|
||||||
|
|
||||||
|
describe 'Animate', ->
|
||||||
|
svg = null
|
||||||
|
canvas = null
|
||||||
|
|
||||||
|
beforeEach ->
|
||||||
|
$('body').append('<svg id="svg" width="300" height="300"></svg>')
|
||||||
|
canvas = new Canvas(document.getElementById('svg'), id: 'canvas')
|
||||||
|
|
||||||
|
afterEach ->
|
||||||
|
$('svg').remove()
|
||||||
|
|
||||||
|
describe '.moveFromTo', ->
|
||||||
|
it 'should move an object from one point to another', ->
|
||||||
|
drawable = canvas.create(id: 'drawable', centerPoint: 'northwest')
|
||||||
|
|
||||||
|
Animate.moveFromTo(drawable, {x: 0, y: 0}, {x: 100, y: 50}, 0)
|
||||||
|
expect(drawable.position).toEqual({x: 0, y: 0})
|
||||||
|
expect(drawable.snapElement.getBBox().x).toEqual(0)
|
||||||
|
|
||||||
|
Animate.moveFromTo(drawable, {x: 0, y: 0}, {x: 100, y: 50}, 0.5)
|
||||||
|
expect(drawable.position).toEqual({x: 50, y: 25})
|
||||||
|
expect(drawable.snapElement.getBBox().x).toEqual(50)
|
||||||
|
|
||||||
|
Animate.moveFromTo(drawable, {x: 0, y: 0}, {x: 100, y: 50}, 1.0)
|
||||||
|
expect(drawable.position).toEqual({x: 100, y: 50})
|
||||||
|
expect(drawable.snapElement.getBBox().x).toEqual(100)
|
||||||
|
|
||||||
|
|
@ -0,0 +1,189 @@
|
||||||
|
Canvas = require('../../src/bismarck/canvas')
|
||||||
|
|
||||||
|
describe 'Drawable', ->
|
||||||
|
svg = null
|
||||||
|
canvas = null
|
||||||
|
drawable = null
|
||||||
|
|
||||||
|
beforeEach ->
|
||||||
|
$('body').append('<svg id="svg" width="300" height="300"></svg>')
|
||||||
|
canvas = new Canvas(document.getElementById('svg'), id: 'canvas')
|
||||||
|
drawable = canvas.create(id: 'drawable', centerPoint: 'northwest')
|
||||||
|
|
||||||
|
afterEach ->
|
||||||
|
$('svg').remove()
|
||||||
|
|
||||||
|
describe 'offset', ->
|
||||||
|
describe 'with children', ->
|
||||||
|
it 'should calculate the offset correctly', ->
|
||||||
|
childOne = drawable.create(id: 'one', centerPoint: 'northwest')
|
||||||
|
|
||||||
|
childOne.draw (surface) ->
|
||||||
|
surface.rect(0, 0, 10, 1).attr(fill: '#000000')
|
||||||
|
|
||||||
|
childTwo = drawable.create(id: 'two', centerPoint: 'northwest')
|
||||||
|
|
||||||
|
childTwo.draw (surface) ->
|
||||||
|
surface.rect(0, 0, 1, 10).attr(fill: '#000000')
|
||||||
|
|
||||||
|
expect(drawable.getOffset().x).toEqual(0)
|
||||||
|
expect(drawable.getOffset().y).toEqual(0)
|
||||||
|
|
||||||
|
drawable.setCenterPoint('50%', '50%')
|
||||||
|
|
||||||
|
expect(drawable.getOffset().x).toEqual(5)
|
||||||
|
expect(drawable.getOffset().y).toEqual(5)
|
||||||
|
|
||||||
|
childTwo.moveTo(20, 0)
|
||||||
|
|
||||||
|
expect(drawable.getOffset().x).toEqual(10.5)
|
||||||
|
expect(drawable.getOffset().y).toEqual(5)
|
||||||
|
|
||||||
|
it 'should calculate the offset correctly', ->
|
||||||
|
drawable.setCenterPoint('center')
|
||||||
|
childOne = drawable.create(id: 'one', centerPoint: 'center')
|
||||||
|
|
||||||
|
childOne.draw (surface) ->
|
||||||
|
surface.rect(0, 0, 20, 30).attr(fill: '#000000')
|
||||||
|
|
||||||
|
childOne.moveTo(0, 0)
|
||||||
|
|
||||||
|
childTwo = drawable.create(id: 'two', centerPoint: 'center')
|
||||||
|
|
||||||
|
childTwo.draw (surface) ->
|
||||||
|
surface.rect(0, 0, 20, 30).attr(fill: '#000000')
|
||||||
|
|
||||||
|
childTwo.moveTo(0, 30)
|
||||||
|
|
||||||
|
expect(drawable.getOffset().x).toEqual(10)
|
||||||
|
expect(drawable.getOffset().y).toEqual(30)
|
||||||
|
|
||||||
|
it 'should calculate the offset correctly', ->
|
||||||
|
spyOn(drawable, 'snapBBox').and.callThrough()
|
||||||
|
|
||||||
|
orect = null
|
||||||
|
|
||||||
|
drawable.setCenterPoint(0, 0)
|
||||||
|
|
||||||
|
drawable.draw (surface) ->
|
||||||
|
orect = surface.rect(0, 0, 20, 10).attr(fill: '#000000')
|
||||||
|
|
||||||
|
expect(drawable.getOffset().x).toEqual(0)
|
||||||
|
expect(drawable.getOffset().y).toEqual(0)
|
||||||
|
|
||||||
|
drawable.setCenterPoint('50%', '50%')
|
||||||
|
|
||||||
|
expect(drawable.getOffset().x).toEqual(10)
|
||||||
|
expect(drawable.getOffset().y).toEqual(5)
|
||||||
|
|
||||||
|
drawable.setCenterPoint('-100%', '0%')
|
||||||
|
|
||||||
|
expect(drawable.getOffset().x).toEqual(-20)
|
||||||
|
expect(drawable.getOffset().y).toEqual(0)
|
||||||
|
|
||||||
|
drawable.draw (surface) ->
|
||||||
|
orect = surface.rect(0, 0, 20, 10).attr(fill: 'red')
|
||||||
|
|
||||||
|
expect(drawable.getOffset().x).toEqual(-20)
|
||||||
|
expect(drawable.getOffset().y).toEqual(0)
|
||||||
|
|
||||||
|
drawable.rotateTo(90)
|
||||||
|
|
||||||
|
expect(drawable.getOffset().x).toEqual(-20)
|
||||||
|
expect(drawable.getOffset().y).toEqual(0)
|
||||||
|
|
||||||
|
drawable.setCenterPoint('center')
|
||||||
|
|
||||||
|
expect(drawable.getOffset().x).toEqual(10)
|
||||||
|
expect(drawable.getOffset().y).toEqual(5)
|
||||||
|
|
||||||
|
describe 'dimensions', ->
|
||||||
|
describe 'after drawing', ->
|
||||||
|
it 'should position the bbox correctly', ->
|
||||||
|
spyOn(drawable, 'snapBBox').and.callThrough()
|
||||||
|
|
||||||
|
orect = null
|
||||||
|
|
||||||
|
drawable.draw (surface) ->
|
||||||
|
orect = surface.rect(0, 0, 20, 10).attr(fill: '#000000')
|
||||||
|
|
||||||
|
expect(drawable.getDimensions().w).toEqual(20)
|
||||||
|
expect(drawable.getDimensions().h).toEqual(10)
|
||||||
|
|
||||||
|
drawable.draw (surface) ->
|
||||||
|
orect.remove()
|
||||||
|
surface.rect(10, 10, 20, 10).attr(fill: '#000000')
|
||||||
|
|
||||||
|
expect(drawable.getDimensions().w).toEqual(20)
|
||||||
|
expect(drawable.getDimensions().h).toEqual(10)
|
||||||
|
|
||||||
|
expect(drawable.snapBBox.calls.count()).toEqual(2)
|
||||||
|
|
||||||
|
drawable.scaleTo(2)
|
||||||
|
|
||||||
|
expect(drawable.getDimensions().w).toEqual(20)
|
||||||
|
expect(drawable.getDimensions().h).toEqual(10)
|
||||||
|
|
||||||
|
drawable.rotateTo(90)
|
||||||
|
|
||||||
|
expect(drawable.getDimensions().w).toBeCloseTo(20, 2)
|
||||||
|
expect(drawable.getDimensions().h).toBeCloseTo(10, 2)
|
||||||
|
|
||||||
|
describe 'with children', ->
|
||||||
|
describe 'northwest', ->
|
||||||
|
it 'should composite together all the drawables', ->
|
||||||
|
childOne = drawable.create(id: 'one', centerPoint: 'northwest')
|
||||||
|
|
||||||
|
childOne.draw (surface) ->
|
||||||
|
surface.rect(0, 0, 10, 1).attr(fill: '#000000')
|
||||||
|
|
||||||
|
childTwo = drawable.create(id: 'two', centerPoint: 'northwest')
|
||||||
|
|
||||||
|
childTwo.draw (surface) ->
|
||||||
|
surface.rect(0, 0, 1, 10).attr(fill: '#000000')
|
||||||
|
|
||||||
|
expect(drawable.getDimensions().w).toEqual(10)
|
||||||
|
expect(drawable.getDimensions().h).toEqual(10)
|
||||||
|
|
||||||
|
expect(drawable.upperLeft().x).toBeCloseTo(0, 1)
|
||||||
|
expect(drawable.upperLeft().y).toBeCloseTo(0, 1)
|
||||||
|
|
||||||
|
expect(childTwo.upperLeft().x).toBeCloseTo(0, 1)
|
||||||
|
expect(childTwo.upperLeft().y).toBeCloseTo(0, 1)
|
||||||
|
|
||||||
|
childTwo.moveTo(-10, 0)
|
||||||
|
|
||||||
|
expect(drawable.getDimensions().w).toEqual(20)
|
||||||
|
expect(drawable.getDimensions().h).toEqual(10)
|
||||||
|
expect(drawable.upperLeft().x).toBeCloseTo(-10, 1)
|
||||||
|
expect(drawable.upperLeft().y).toBeCloseTo(0, 1)
|
||||||
|
expect(childTwo.upperLeft().x).toBeCloseTo(0, 1)
|
||||||
|
expect(childTwo.upperLeft().y).toBeCloseTo(0, 1)
|
||||||
|
|
||||||
|
describe 'center', ->
|
||||||
|
it 'should composite together all the drawables', ->
|
||||||
|
drawable.setCenterPoint('center')
|
||||||
|
childOne = drawable.create(id: 'one', centerPoint: 'center')
|
||||||
|
|
||||||
|
childOne.draw (surface) ->
|
||||||
|
surface.rect(0, 0, 10, 20).attr(fill: '#000000')
|
||||||
|
|
||||||
|
childTwo = drawable.create(id: 'two', centerPoint: 'center')
|
||||||
|
|
||||||
|
childTwo.draw (surface) ->
|
||||||
|
surface.rect(0, 0, 10, 20).attr(fill: '#000000')
|
||||||
|
|
||||||
|
expect(drawable.getDimensions().w).toEqual(10)
|
||||||
|
expect(drawable.getDimensions().h).toEqual(20)
|
||||||
|
|
||||||
|
expect(childTwo.upperLeft().x).toBeCloseTo(0, 1)
|
||||||
|
expect(childTwo.upperLeft().y).toBeCloseTo(0, 1)
|
||||||
|
|
||||||
|
expect(drawable.upperLeft().x).toBeCloseTo(-5, 1)
|
||||||
|
expect(drawable.upperLeft().y).toBeCloseTo(-10, 1)
|
||||||
|
|
||||||
|
childTwo.rotateTo(270)
|
||||||
|
|
||||||
|
expect(drawable.getDimensions().w).toBeCloseTo(10, 2)
|
||||||
|
expect(drawable.getDimensions().h).toBeCloseTo(20, 2)
|
||||||
|
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
Canvas = require('../../src/bismarck/canvas')
|
||||||
|
|
||||||
|
describe 'layoutSpec', ->
|
||||||
|
svg = null
|
||||||
|
canvas = null
|
||||||
|
drawable = null
|
||||||
|
|
||||||
|
beforeEach ->
|
||||||
|
$('body').append('<svg id="svg" width="300" height="300"></svg>')
|
||||||
|
canvas = new Canvas(document.getElementById('svg'), id: 'canvas')
|
||||||
|
drawable = canvas.create(id: 'drawable', centerPoint: 'northwest')
|
||||||
|
svg = canvas.snapElement
|
||||||
|
|
||||||
|
afterEach ->
|
||||||
|
$('svg').remove()
|
||||||
|
|
||||||
|
describe 'from canvas', ->
|
||||||
|
it 'should create a group of objects with SVG bits', ->
|
||||||
|
layout = canvas.fromLayout("""
|
||||||
|
<drawable id="cat">
|
||||||
|
<rect id="dog" x="10" y="10" width="30" height="20" style="fill: red" />
|
||||||
|
</drawable>
|
||||||
|
""")
|
||||||
|
|
||||||
|
console.log svg.outerSVG()
|
||||||
|
|
||||||
|
expect(svg).toContainSVG('#cat')
|
||||||
|
expect(svg).toContainSVG('rect#dog[style="fill: red"]')
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
beforeEach ->
|
||||||
|
jasmine.addMatchers {
|
||||||
|
toContainSVG: ->
|
||||||
|
compare: (svg, select) ->
|
||||||
|
result = { pass: svg.select(select)? }
|
||||||
|
|
||||||
|
result.message = if !result.pass
|
||||||
|
"Expect #{svg.outerSVG()} to contain #{select}"
|
||||||
|
|
||||||
|
result
|
||||||
|
}
|
||||||
|
|
||||||
|
require('./bismarckSpec')
|
||||||
|
require('./bismarck/animateSpec')
|
||||||
|
require('./bismarck/drawableSpec')
|
||||||
|
require('./bismarck/layoutSpec')
|
||||||
|
|
||||||
Loading…
Reference in New Issue