namespace(function() { window.createElement = function(type) { return document.createElementNS('http://www.w3.org/2000/svg', type) } window.drawSymbol = function(params, customMechanics) { var svg = createElement('svg') svg.setAttribute('viewBox', '0 0 ' + params.width + ' ' + params.height) if (!params.x) params.x = 0 if (!params.y) params.y = 0 drawSymbolWithSvg(svg, params, customMechanics) return svg } window.drawSymbolWithSvg = function(svg, params, customMechanics) { if (params.type == 'square') square(svg, params) else if (params.type == 'dot') dot(svg, params) else if (params.type == 'gap') gap(svg, params) else if (params.type == 'star') star(svg, params) else if (params.type == 'poly') poly(svg, params) else if (params.type == 'ylop') ylop(svg, params) else if (params.type == 'nega') nega(svg, params) else if (params.type == 'nonce') { /* Do nothing */ } else if (params.type == 'triangle') triangle(svg, params) else if (params.type == 'crayon') crayon(svg, params) else if (params.type == 'start') start(svg, params) else if (params.type == 'end') end(svg, params) else if (params.type == 'drag') drag(svg, params) else if (params.type == 'plus') plus(svg, params) else if (params.type == 'minus') minus(svg, params) else if (params.type == 'bridge' && customMechanics) bridge(svg, params) else if (params.type == 'arrow' && customMechanics) arrow(svg, params) else if (params.type == 'sizer' && customMechanics) sizer(svg, params) else {console.error('Cannot draw unknown SVG type: ' + params.type)} } function square(svg, params) { var rect = createElement('rect') svg.appendChild(rect) rect.setAttribute('width', 28) rect.setAttribute('height', 28) rect.setAttribute('x', params.width/2-14 + params.x) rect.setAttribute('y', params.height/2-14 + params.y) rect.setAttribute('rx', 7) rect.setAttribute('ry', 7) rect.setAttribute('fill', params.color) rect.setAttribute('class', params.class) } function star(svg, params) { var poly = createElement('polygon') svg.appendChild(poly) var points = [ '-10.5 -10.5', // Top left '-9.5 -4', '-15 0', '-9.5 4', '-10.5 10.5', // Bottom left '-4 9.5', '0 15', '4 9.5', '10.5 10.5', // Bottom right '9.5 4', '15 0', '9.5 -4', '10.5 -10.5', // Top right '4, -9.5', '0 -15', '-4 -9.5', ] poly.setAttribute('transform', 'translate(' + (params.width/2 + params.x) + ', ' + (params.height/2 + params.y) + ')') poly.setAttribute('points', points.join(', ')) poly.setAttribute('fill', params.color) poly.setAttribute('class', params.class) } function poly(svg, params) { if (params.polyshape === 0) return var size = 10 // Side length of individual squares in the polyomino var space = 4 // Gap between squares in the polyomino var polyomino = window.polyominoFromPolyshape(params.polyshape) var bounds = {'xmin':0, 'xmax':0, 'ymin':0, 'ymax':0} for (var i=0; i