cross-hair.html

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="cross-hair">
<style type="text/css">
:host {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
<template><svg></svg></template>
<script>
"use strict";

Polymer({
	is: 'cross-hair',
	properties:{
		x: {
			type: Number,
			value: 0,
			notify: true
		},
		y: {
			type: Number,
			value: 0,
			notify: true
		},
		w: {
			type: Number,
			value: 0,
			notify: true
		},
		left:{
			type: Number,
			value: 0,
			notify: true
		},
		top: {
			type: Number,
			value: 0,
			notify: true
		},
		r: {
			type: Number,
			value: 6,
			notify: true
		},
		show_bars: {
			type: Number,
			value: 1,  //1=horizontal, 2=vertical 3=both (only 1 is implemented)
			notify: true
		},
	},
	observers: [
		'_update_svg(x, y, w, left, top, r, show_bars)'
	],
	_update_svg: function(x, y , w, left, top, r, show_bars){
		this.debounce('update', function(){
			let width = show_bars & 1 ? w : x+r+2;
			let height = y+r+2;
			let x_minus_r = x-r;
			let x_plus_r = x+r;

			let bars_1 = "";
			if(show_bars & 1){
				 bars_1 = `<line x1='0'    y1='${y}' x2='${x_minus_r}' y2='${y}' stroke='black' stroke-width='1'/>
						   <line x1='${w}' y1='${y}' x2='${x_plus_r}'  y2='${y}' stroke='black' stroke-width='1'/>
						   <line x1='0'    y1='${y}' x2='${x_minus_r}' y2='${y}' stroke='white' stroke-dasharray='2,2' stroke-width='1'/>
						   <line x1='${w}' y1='${y}' x2='${x_plus_r}'  y2='${y}' stroke='white' stroke-dasharray='2,2' stroke-width='1'/>`
			}

			// TODO: add show_bars & 2

			let svg = `<svg style='pointer-events:none;position:absolute;left:${left}px;top:${top}px;width:${width};height:${height}px;'
						 xmlns='http://www.w3.org/2000/svg' version='1.1'>
								<circle cx='${x}' cy='${y}' r='${r}' stroke='black' stroke-width='1' fill='none'/>
							    <circle cx='${x}' cy='${y}' r='${r}' stroke='white' stroke-dasharray='2,2' stroke-width='1' fill='none'/>
							    ${bars_1}</svg>`;
			Polymer.dom(this.root).innerHTML = svg;
			Polymer.dom.flush();
		});
	}
});
</script>
</dom-module>