92 lines
2.8 KiB
CoffeeScript
92 lines
2.8 KiB
CoffeeScript
class SvgElementClass
|
|
setup: (container)->
|
|
if container
|
|
@text_field = container.find('.snap-code-editor')
|
|
else
|
|
@text_field = $('.snap-code-editor')
|
|
@text_field.change => @compileSource()
|
|
target = @text_field.data('target')
|
|
@target = target
|
|
container = @
|
|
ace_div = $('<div></div>').attr('id', 'ace-div').html @text_field.val()
|
|
ace_div.css
|
|
width: '100%'
|
|
height: '500px'
|
|
@text_field.after(ace_div)
|
|
|
|
#ACE
|
|
@editor = ace.edit('ace-div')
|
|
@editor.setTheme 'ace/theme/monokai'
|
|
@editor.getSession().setMode 'ace/mode/coffee'
|
|
@editor.getSession().on 'change', (e)=>
|
|
@text_field.val(@editor.getValue()).change()
|
|
@text_field.hide()
|
|
|
|
@svg_code_field = $('#svg_element_svg')
|
|
$(target).on "DOMSubtreeModified", =>
|
|
@svg_code_field.val $(target).html()
|
|
|
|
@box_width = $('#svg_element_box_width')
|
|
@box_height = $('#svg_element_box_height')
|
|
@dpm = $('#svg_element_dpm')
|
|
|
|
@box_width.change(->
|
|
$(target).attr 'width', $(@).val()
|
|
container.compileSource()
|
|
).change()
|
|
@box_height.change(->
|
|
$(target).attr 'height', $(@).val()
|
|
container.compileSource()
|
|
).change()
|
|
@dpm.change(->
|
|
return unless dpm = $(@).val()
|
|
if pheight = container.box_height.val()
|
|
height = Math.round(100 * pheight / dpm)/100
|
|
$('.box_height .attribute-info').html "#{height} <i>m</i>"
|
|
|
|
if pwidth = container.box_width.val()
|
|
width = Math.round(100 * pwidth / dpm)/100
|
|
$('.box_width .attribute-info').html "#{width} <i>m</i>"
|
|
|
|
).change()
|
|
$(target).css('border', '1px solid black')
|
|
@compileSource()
|
|
compileSource: ->
|
|
return unless source = @text_field.val()
|
|
results = $(@text_field.data('preview'))
|
|
window.compiledJS = ''
|
|
try
|
|
window.compiledJS = CoffeeScript.compile source, bare: on
|
|
el = results[0]
|
|
if el.innerText
|
|
el.innerText = window.compiledJS
|
|
else
|
|
results.text(window.compiledJS)
|
|
results.removeClass 'error'
|
|
window.evaluator = new SnapDsl(window.compiledJS, target: @target, width: @box_width.val(), height: @box_height.val())
|
|
evaluator.result()
|
|
$('.minibutton.run').removeClass 'error'
|
|
catch {location, message}
|
|
if location?
|
|
message = "Error on line #{location.first_line + 1}: #{message}"
|
|
results.text(message).addClass 'error'
|
|
$('.minibutton.run').addClass 'error'
|
|
class SnapDsl
|
|
constructor: (code, options = {})->
|
|
@js_code = code
|
|
@options = options
|
|
@t = $(options.target)
|
|
@width = options.width
|
|
@height = options.height
|
|
$(options.target).html('')
|
|
result: ->
|
|
@snap = Snap(@options.target)
|
|
s = @snap
|
|
try
|
|
eval @js_code
|
|
catch
|
|
@t.html('cannot render')
|
|
|
|
@SvgElement = new SvgElementClass()
|
|
$ -> SvgElement.setup()
|