125 lines
4.1 KiB
CoffeeScript
125 lines
4.1 KiB
CoffeeScript
class SvgElementClass
|
|
setup: (context=$(document))->
|
|
#@setupSnapCode(context)
|
|
@svg_source = context.find('#svg_element_svg')
|
|
@preview_target = context.find('#svg-preview').css('border', '1px solid black')
|
|
@original_svg = @svg_source.val()
|
|
container = @
|
|
@input_type_select = context.find('#svg_element_input_type').change ->
|
|
switch $(@).val()
|
|
when 'snap_code'
|
|
container.setupSnapCode(context)
|
|
else
|
|
container.setupSvgEdit(context)
|
|
.change()
|
|
setupSvgEdit: (context)->
|
|
@svg_source.val @original_svg #reset svg value
|
|
$('#snap-code-ace-div').remove()
|
|
container = @
|
|
ace_div = $('<div></div>').attr('id', 'raw-svg-ace-div')
|
|
ace_div.css
|
|
width: '100%'
|
|
height: '500px'
|
|
@svg_source.after(ace_div)
|
|
@editor = ace.edit('raw-svg-ace-div')
|
|
@editor.setTheme 'ace/theme/monokai'
|
|
@editor.getSession().setMode 'ace/mode/xml'
|
|
@editor.setValue formatXml(@svg_source.val())
|
|
@editor.getSession().on 'change', (e)=>
|
|
result = @editor.getValue()
|
|
@preview_target.html result
|
|
@svg_source.val squashXml(result)
|
|
# @svg_source.val(@editor.getValue()).change()
|
|
#@svg_source.hide()
|
|
window.editor = @editor
|
|
|
|
setupSnapCode: (context)->
|
|
@snap_code_source = context.find('.snap-code-editor')
|
|
@snap_code_source.change => @compileSource()
|
|
#preview_target = @snap_code_source.data('previewTarget')
|
|
#@preview_target = preview_target
|
|
container = @
|
|
ace_div = $('<div></div>').attr('id', 'snap-code-ace-div').html @snap_code_source.val()
|
|
ace_div.css
|
|
width: '100%'
|
|
height: '500px'
|
|
@snap_code_source.after(ace_div)
|
|
|
|
#ACE
|
|
@editor = ace.edit('snap-code-ace-div')
|
|
@editor.setTheme 'ace/theme/monokai'
|
|
@editor.getSession().setMode 'ace/mode/coffee'
|
|
@editor.getSession().on 'change', (e)=>
|
|
@snap_code_source.val(@editor.getValue()).change()
|
|
@snap_code_source.hide()
|
|
|
|
@svg_code_field = $('#svg_element_svg')
|
|
@preview_target.on "DOMSubtreeModified", => # In image editing in debug mode????
|
|
@svg_code_field.val @preview_target.html()
|
|
|
|
@box_width = $('#svg_element_box_width')
|
|
@box_height = $('#svg_element_box_height')
|
|
@dpm = $('#svg_element_dpm')
|
|
|
|
@box_width.change ->
|
|
container.preview_target.attr 'width', $(@).val()
|
|
container.compileSource()
|
|
.change()
|
|
|
|
@box_height.change ->
|
|
container.preview_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()
|
|
@compileSource()
|
|
compileSource: ->
|
|
return unless source = @snap_code_source.val()
|
|
#results = $(@snap_code_source.data('preview'))
|
|
results = @preview_target
|
|
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: @preview_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(@t[0])
|
|
s = @snap
|
|
try
|
|
eval @js_code
|
|
catch
|
|
@t.html('cannot render')
|
|
|
|
@SvgElement = new SvgElementClass()
|
|
$ -> SvgElement.setup()
|