F5 Test changes

2015-10-05 18:05:57 +02:00
parent 2bb597419d
commit c93d6bec8a
16 changed files with 132 additions and 47 deletions
@@ -6,6 +6,7 @@
 #= require ace/ace
 #= require ace/theme-monokai
 #= require ace/mode-coffee
+#= require ace/mode-xml
 #= require_tree .
 #= require_self
 #$ ->
@@ -0,0 +1,33 @@
+window.formatXml = (xml) ->
+  formatted = ''
+  reg = /(>)(<)(\/*)/g
+  xml = xml.replace(reg, '$1\r\n$2$3')
+  pad = 0
+  jQuery.each xml.split('\r\n'), (index, node) ->
+    indent = 0
+    if node.match(/.+<\/\w[^>]*>$/)
+      indent = 0
+    else if node.match(/^<\/\w/)
+      if pad != 0
+        pad -= 1
+    else if node.match(/^<\w[^>]*[^\/]>.*$/)
+      indent = 1
+    else
+      indent = 0
+    padding = ''
+    i = 0
+    while i < pad
+      padding += '  '
+      i++
+    formatted += padding + node + '\r\n'
+    pad += indent
+    return
+  formatted
+window.squashXml = (xml)->
+  result = xml
+    .trim()
+    .replace(/^\s+/g, '')
+    .replace(/\s+$/g, '')
+    .replace(/>(?:\r\n|\r|\n)/g, '')
+    .replace(/(?:\r\n|\r|\n)/g, ' ')
+  result
@@ -1,43 +1,76 @@
 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
+  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 = @
-    ace_div = $('<div></div>').attr('id', 'ace-div').html @text_field.val()
+    @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'
-    @text_field.after(ace_div)
+    @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('ace-div')
+    @editor = ace.edit('snap-code-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()
+      @snap_code_source.val(@editor.getValue()).change()
+    @snap_code_source.hide()

    @svg_code_field = $('#svg_element_svg')
-    $(target).on "DOMSubtreeModified", =>
-      @svg_code_field.val $(target).html()
+    @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(->
-      $(target).attr 'width', $(@).val()
+    @box_width.change ->
+      container.preview_target.attr 'width', $(@).val()
      container.compileSource()
-    ).change()
-    @box_height.change(->
-      $(target).attr 'height', $(@).val()
+    .change()
+
+    @box_height.change ->
+      container.preview_target.attr 'height', $(@).val()
      container.compileSource()
-    ).change()
+    .change()
+
    @dpm.change(->
      return unless dpm = $(@).val()
      if pheight = container.box_height.val()
@@ -49,11 +82,11 @@ class SvgElementClass
        $('.box_width .attribute-info').html "#{width}&nbsp;<i>m</i>"

    ).change()
-    $(target).css('border', '1px solid black')
    @compileSource()
  compileSource: ->
-    return unless source = @text_field.val()
-    results = $(@text_field.data('preview'))
+    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
@@ -63,11 +96,11 @@ class SvgElementClass
      else
        results.text(window.compiledJS)
      results.removeClass 'error'
-      window.evaluator = new SnapDsl(window.compiledJS, target: @target, width: @box_width.val(), height: @box_height.val())
+      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?
+      if location
        message = "Error on line #{location.first_line + 1}: #{message}"
      results.text(message).addClass 'error'
      $('.minibutton.run').addClass 'error'
@@ -75,12 +108,12 @@ class SnapDsl
  constructor: (code, options = {})->
    @js_code = code
    @options = options
-    @t = $(options.target)
+    @t = options.target
    @width = options.width
    @height = options.height
    $(options.target).html('')
  result: ->
-    @snap = Snap(@options.target)
+    @snap = Snap(@t[0])
    s = @snap
    try
      eval @js_code