X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=blobdiff_plain;f=auto.coffee;fp=auto.coffee;h=0000000000000000000000000000000000000000;hp=2bd4bfa664dd15f25637942c1fba0585d16ad3e0;hb=2d902775d3b9f916b5a38ac8874a734ca586e6b3;hpb=5a5d608f1cf57587e6acf1f83f98c1ae5aa48938 diff --git a/auto.coffee b/auto.coffee deleted file mode 100644 index 2bd4bfa..0000000 --- a/auto.coffee +++ /dev/null @@ -1,265 +0,0 @@ -# settings -width = 800 -height = 600 -supply_height = 96 -CLICK_FUZ = 10 # this far away from things is close enough to be "clicked on" -PROX_MAX = CLICK_FUZ * CLICK_FUZ - -# constants -STYLE_NORMAL = 0 -STYLE_SELECTED = 1 -STYLE_HOVER = 2 -STYLE_EDITING = 3 -STYLE_DRAGGING = 4 - -STYLE_TO_CLASS = [ - "normal" - "selected" - "hover" - "editing" - "dragging" -] - -set_style_class = (args) -> - args.el.setAttribute 'class', "#{args.class} #{STYLE_TO_CLASS[args.style]}" - -# json (compiled to javascript and minified) is ~8% smaller than the resulting xml -json_to_svg = (json) -> - for tag, attrs of json - el = document.createElementNS 'http://www.w3.org/2000/svg', tag - for k, v of attrs - if k is 'children' - for child in v - el.appendChild json_to_svg child - else if k is 'contents' - el.appendChild document.createTextNode v - else - el.setAttribute k, v - return el - -next_widget_id = 0 -# public vars: x, y, width, height, el -class Visible - # required args: svg - constructor: (args) -> - @id = next_widget_id - next_widget_id += 1 - @svg = args.svg - @x = args.x ? 1 - @y = args.y ? 1 - @width = args.width ? 50 - @height = args.height ? 34 - @style = args.style ? STYLE_NORMAL - destruct: -> - move: (args) -> - @x = args.x - @y = args.y - proximity: (xy) -> # return the square of the distance to your visible bits - return PROX_MAX + 1 - set_style: (style) -> - @style = style - -class Control extends Visible - -class Widget extends Visible - #sub-classes are expected to implement all of these: - clone: -> - return new Widget @ - controls: -> # create controls, return them - return [] - hide_controls: -> - -class RectWidget extends Widget - constructor: (args) -> - super args - @css_class = 'box' - @el = json_to_svg rect: - x: @x + 1 - y: @y + 1 - width: @width - 2 - height: @height - 2 - class: 'box normal' - @svg.appendChild @el - destruct: -> - super() - if @el? - @svg.removeChild @el - clone: -> - return new RectWidget @ - set_style: (style) -> - super style - set_style_class el: @el, class: 'box', style: style - move: (args) -> - super args - @el.setAttribute 'x', @x + 1 - @el.setAttribute 'y', @y + 1 - proximity: (xy) -> # return the square of the distance to your visible bits - x = xy.x - y = xy.y - prox = PROX_MAX + 1 - in_x = false - in_y = false - if x > @x - CLICK_FUZ and x < @x + @width + CLICK_FUZ - in_x = true - if y < @y + @height / 2 - new_prox = @y - y - else - new_prox = @y + @height - y - new_prox *= new_prox - if new_prox < prox - prox = new_prox - if y > @y - CLICK_FUZ and y < @y + @height + CLICK_FUZ - in_y = true - if x < @x + @width / 2 - new_prox = @x - x - else - new_prox = @x + @width - x - new_prox *= new_prox - if new_prox < prox - prox = new_prox - if in_x and in_y and prox > PROX_MAX - prox = PROX_MAX - 1 - return prox - controls: -> # create controls, return them - return [] - hide_controls: -> - -# called automatically on domcontentloaded -init = -> - svg_offset = null - $container = $ '.crayon_mockup' - svg = json_to_svg svg: width: width, height: height, viewBox: "0 0 #{width} #{height}" - $svg = $ svg - $container.append $svg - svg.appendChild json_to_svg filter: - id: 'crayon', filterUnits: 'userSpaceOnUse' - x: '-5%', y: '-5%', height: '110%', width: '110%' - children: [ - { feTurbulence: baseFrequency: '.3', numOctaves: '2', type: 'fractalNoise' } - { feDisplacementMap: scale: '6', xChannelSelector: 'R', in: 'SourceGraphic' } - ] - svg.appendChild json_to_svg style: - type: 'text/css' - contents: '.box.normal,.box.hover,.box.selected{filter: url(#crayon)}' - - # create canvas border - svg.appendChild json_to_svg rect: - x: 1 - y: supply_height + 1 - width: width - 2 - height: height - 2 - supply_height - class: 'canvas_border' - - supply = {} - for args, i in [ - { width: 40, height: 40 } - { width: 12, height: 50 } - { width: 70, height: 12 } - ] - widget = new RectWidget { - width: args.width - height: args.height - x: 30 + i * 90 + (70 - args.width) / 2 - y: (supply_height - args.height) / 2 - svg: svg - } - supply[widget.id] = widget - - # editor state - on_canvas = {} - selected = {} - editing = {} # has controls - dragging = false - drag_from = x: 0, y: 0 # mouse was here at last frame of drag - shift_key_down = false - - deselect_all = (args) -> - except = args?.except ? null - for id, w of selected - w.set_style STYLE_NORMAL - delete selected[id] - closest_widget = (widgets, xy) -> - prox = PROX_MAX + 1 - closest = null - for id, w of widgets - new_prox = w.proximity xy - if new_prox < prox - prox = new_prox - closest = w - if prox < PROX_MAX - return closest - return null - svg_event_to_xy = (e) -> - unless svg_offset? - svg_offset = $svg.offset() - return { - x: Math.round(e.pageX - svg_offset.left) - y: Math.round(e.pageY - svg_offset.top) - } - mousedown = (e) -> - mousemove e - if dragging # two mousedowns in a row?! it happens - return mouseup e - xy = svg_event_to_xy e - if xy.y < supply_height - closest = closest_widget supply, xy - if closest? - closest = closest.clone() - on_canvas[closest.id] = closest - else - closest = closest_widget on_canvas, xy - if closest? - unless (shift_key_down or selected[closest.id]?) - deselect_all except: closest - selected[closest.id] = closest - closest.set_style STYLE_DRAGGING - dragging = true - drag_from = xy - else - deselect_all() - return false - mouseup = (e) -> - mousemove e - if dragging - for id, w of selected - if w.y < supply_height - w.destruct() - delete selected[id] - else - w.set_style STYLE_SELECTED - dragging = false - return false - prev_hover = null - mousemove = (e) -> - xy = svg_event_to_xy e - if dragging - return if drag_from.x is xy.x and drag_from.y is xy.y - rel_x = xy.x - drag_from.x - rel_y = xy.y - drag_from.y - drag_from = xy - for id, w of selected - w.move x: w.x + rel_x, y: w.y + rel_y - else - hover = closest_widget on_canvas, xy - unless hover? - hover = closest_widget supply, xy - if hover != prev_hover - if prev_hover? - # FIXME - if selected[prev_hover.id]? - prev_hover.set_style STYLE_SELECTED - else - prev_hover.set_style STYLE_NORMAL - if hover? - hover.set_style STYLE_HOVER - prev_hover = hover - return false - $svg.mousedown mousedown - $svg.mouseup mouseup - $svg.mousemove mousemove - $(document).on 'keyup keydown', (e) -> - shift_key_down = e.shiftKey - return true - #($ document).keydown (e) -> - -$ init