res/imp/crosshair.html - buildbot - Git at Google

 <!-- The <crosshair-sk> custom element declaration.

   The crosshair-sk element works with the canvas-layers-sk element
   and draws a crosshair on one of the given layers. Use the update_on
   attribute to control when the crosshair is moved.

   Attributes:
     x, y - The x,y coords of the crosshair, as measured in the natural
       dimensions of the image. I.e. not in the coords of the img
       if it has a different size as determined by CSS styling.

     target - The id of the canvas-layers-sk element we are drawing
       a crosshair on.

     name - The name of the layer in the canvas-layer-sk element
        we are drawing a crosshair on.

     hidden - If true then don't actually draw the crosshair.

     update_on - Update the crosshair:
       "move" - when the mouse moves.
       "click" - when the user clicks.
       "none" - (default) do not update the crosshair based on user action.

   Events:
     crosshair - Produced if the crosshair is moved by clicking in the image.
       The coordinates of the click are in e.detail.x and e.detail.y. They
       are in offsets from the image origin in the images natural dimensions.
       That is, even if the image is sized using CSS the x and y values
       will be reported as values in the images original size.

   Methods:
     coordinatesUpdated - to be called if the x or y attribute was changed by other code.
       prefer calling this and setting useObservers=false if you control all the places which modify
       x and y.

 -->
 <link rel="import" href="/res/imp/bower_components/polymer/polymer.html">
 <dom-module id="crosshair-sk">
   <template>
   </template>
   <script>
     Polymer({
       is: 'crosshair-sk',

       properties: {
         x: {
           type: Number,
           value: 0,
           reflectToAttribute: true,
           notify: true,
           observer: "_updatedOneCoord",
         },
         y: {
           type: Number,
           value: 0,
           reflectToAttribute: true,
           notify: true,
           observer: "_updatedOneCoord",
         },
         useObservers: {
           type: Boolean,
           value: true,
           reflectToAttribute: true,
         },
         target: {
           type: String,
           value: "",
           observer: '_layerChanged',
           reflectToAttribute: true
         },
         hidden: {
           type: Boolean,
           value: false,
           observer: '_hiddenChanged',
           reflectToAttribute: true
         },
         name: {
           type: String,
           value: "",
           observer: '_layerChanged',
           reflectToAttribute: true
         },
         update_on: {
           // Valid values are "click", "move", and "none".
           type: String,
           value: "none",
           observer: '_registerCallbacks',
           reflectToAttribute: true
         },
       },

       ready: function () {
         // The current location of the crosshair, in CSS units.
         this.thumb = {
           x: 0,
           y: 0,
         };

         // If we are tracking mousemove events we'll store the coords here.
         this._move = {
           x: 0,
           y: 0,
         };

         // If we are tracking mousemove events we'll store the previous coords
         // here, so we only redraw the crosshair if it's actually moved.
         this._lastMove = {
           x: 0,
           y: 0,
         };

         this.willUpdate = null;

         this._xyChangedBound = this.coordinatesUpdated.bind(this);
         this._moveEventHandlerBound = this._moveEventHandler.bind(this);
         this._clickEventHandlerBound = this._clickEventHandler.bind(this);
         this._moveToMouseBound = this._moveToMouse.bind(this);

         this._animRequest = null;
       },

       _updatedOneCoord() {
         if (!this.useObservers) { return; }
         // Wait and see if the other coordinate updates.
         if (!this.willUpdate) {
           this.willUpdate = setTimeout(() => {
             this.coordinatesUpdated();
           }, 1);
         }
       },

       coordinatesUpdated() {
         this.willUpdate = null;
         if (!this._img) { return; }
         this._imgSize = this._standardSize(this._img);
         this.thumb.x = this._imgSize.visibleWidth * (this.x / this._imgSize.naturalWidth);
         this.thumb.y = this._imgSize.visibleHeight * (this.y / this._imgSize.naturalHeight);
         this._drawCrosshair();
         this._event();
       },

       // Returns both the visible and natural size of a canvas or image element,
       // Natural size - the width and height of it in it's native resolution.
       // Visible size - the width and height of it on the screen as controlled by css
       _standardSize(element) {
         if (element.nodeName === 'IMG') {
           return {
             'visibleWidth': element.width,
             'visibleHeight': element.height,
             'naturalWidth': element.naturalWidth,
             'naturalHeight': element.naturalHeight,
           };
         } else {
           var strW = window.getComputedStyle(element, null).width;
           var strH = window.getComputedStyle(element, null).height;
           return {
             // Trim 'px' off the end of the style string and convert to a number.
             'visibleWidth': parseFloat(strW.substring(0, strW.length-2)),
             'visibleHeight': parseFloat(strH.substring(0, strH.length-2)),
             'naturalWidth': element.width,
             'naturalHeight': element.height,
           };
         }
       },

       _layerChanged: function() {
         if (!(this.target && this.name)) {
           return;
         }
         $$$("#" + this.target, this._findParent()).addEventListener(
           'canvas-layers-updated', this._canvasLayersUpdated.bind(this));
       },

       _hiddenChanged: function() {
         if (this._ctx) {
           this._drawCrosshair();
         }
       },

       _findParent: function() {
         var p = this.parentNode;
         while (p.parentNode != null) {
           p = p.parentNode;
         }
         return p
       },

       _canvasLayersUpdated: function() {
         var layer = $$$("#" + this.target, Polymer.dom(this).parentNode);
         if (this._canvas) {
           // If we are switching to a new canvas then unregister all of our old callbacks.
           this._unregisterAllCallbacks();
         }
         this._canvas = layer.canvas(this.name);
         this._img = layer.subject();
         if (this._canvas) {
           this._registerCallbacks();
           this._ctx = this._canvas.getContext('2d');
         }
         this._imgSize = this._standardSize(this._img);
       },

       _registerCallbacks: function() {
         if (!this._canvas) {
           return;
         }
         this._canvas.addEventListener('canvas-update', this._xyChangedBound);
         if (this.update_on === "click") {
           this._canvas.addEventListener('click', this._clickEventHandlerBound);
           this._canvas.removeEventListener('mousemove', this._moveEventHandlerBound);
         } else if (this.update_on === "move")  {
           this._canvas.addEventListener('mousemove', this._moveEventHandlerBound);
           this._canvas.removeEventListener('click', this._clickEventHandlerBound);
         } else {
           this._canvas.removeEventListener('mousemove', this._moveEventHandlerBound);
           this._canvas.removeEventListener('click', this._clickEventHandlerBound);
         }
       },

       _unregisterAllCallbacks: function() {
         this._canvas.removeEventListener('mousemove', this._moveEventHandlerBound);
         this._canvas.removeEventListener('click', this._clickEventHandlerBound);
         this._canvas.removeEventListener('canvas-update', this._xyChangedBound);
       },

       _moveEventHandler: function (e) {
         this._move.x = e.clientX;
         this._move.y = e.clientY;

         if (this._lastMove.x != this._move.x || this._lastMove.y != this._move.y) {
           // Don't necessarily move it right now. Several more mouse move events may be triggered
           // before it's time to draw the next frame. register or replace our callback with the
           // window to move the crosshair before the next frame.
           this._animRequest = window.requestAnimationFrame(this._moveToMouseBound);
           this._lastMove.x = this._move.x;
           this._lastMove.y = this._move.y;
         }
       },

       // Moving to the last recorded mouse position. Registered as the callback
       // of window.requestAnimationFrame
       _moveToMouse(_) {
         this._moveCrosshair(this._move.x, this._move.y);
       },

       // moving to a clicked position.
       _clickEventHandler: function (e) {
         this._moveCrosshair(e.clientX, e.clientY);
       },

       _moveCrosshair: function (clientX, clientY) {
         if (!this._img.width || !this._img.height) {
           return;
         }
         var p = sk.elePos(this._canvas);
         this.thumb.x = clientX - p.x;
         this.thumb.y = clientY - p.y;
         this._drawCrosshair();
         // Cannot set properties atomically in Polymer 1
         this.x = Math.floor(this.thumb.x / this._imgSize.visibleWidth * this._imgSize.naturalWidth);
         this.y = Math.floor(this.thumb.y / this._imgSize.visibleHeight * this._imgSize.naturalHeight);
         this._event();
       },

       _event: function() {
         var detail = {
           x: this.x,
           y: this.y
         };
         var evt = new CustomEvent('crosshair', {
           detail: detail,
           bubbles: true
         });
         this.dispatchEvent(evt);
       },

       _drawCrosshair: function () {
         this._ctx.clearRect(0, 0, this._ctx.canvas.width, this._ctx.canvas.height);
         if (this.hidden) {
           return;
         }
         this._ctx.lineWidth = 1;
         this._ctx.strokeStyle = '#F00';
         this._ctx.beginPath();
         this._ctx.moveTo(0, this.thumb.y + 0.5);
         this._ctx.lineTo(this._ctx.canvas.width, this.thumb.y + 0.5);
         this._ctx.stroke();
         this._ctx.beginPath();
         this._ctx.moveTo(this.thumb.x + 0.5, 0);
         this._ctx.lineTo(this.thumb.x + 0.5, this._ctx.canvas.height);
         this._ctx.stroke();
       }
     });
   </script>
 </dom-module>
	<!-- The <crosshair-sk> custom element declaration.

	The crosshair-sk element works with the canvas-layers-sk element
	and draws a crosshair on one of the given layers. Use the update_on
	attribute to control when the crosshair is moved.

	Attributes:
	x, y - The x,y coords of the crosshair, as measured in the natural
	dimensions of the image. I.e. not in the coords of the img
	if it has a different size as determined by CSS styling.

	target - The id of the canvas-layers-sk element we are drawing
	a crosshair on.

	name - The name of the layer in the canvas-layer-sk element
	we are drawing a crosshair on.

	hidden - If true then don't actually draw the crosshair.

	update_on - Update the crosshair:
	"move" - when the mouse moves.
	"click" - when the user clicks.
	"none" - (default) do not update the crosshair based on user action.

	Events:
	crosshair - Produced if the crosshair is moved by clicking in the image.
	The coordinates of the click are in e.detail.x and e.detail.y. They
	are in offsets from the image origin in the images natural dimensions.
	That is, even if the image is sized using CSS the x and y values
	will be reported as values in the images original size.

	Methods:
	coordinatesUpdated - to be called if the x or y attribute was changed by other code.
	prefer calling this and setting useObservers=false if you control all the places which modify
	x and y.

	-->
	<link rel="import" href="/res/imp/bower_components/polymer/polymer.html">
	<dom-module id="crosshair-sk">
	<template>
	</template>
	<script>
	Polymer({
	is: 'crosshair-sk',

	properties: {
	x: {
	type: Number,
	value: 0,
	reflectToAttribute: true,
	notify: true,
	observer: "_updatedOneCoord",
	},
	y: {
	type: Number,
	value: 0,
	reflectToAttribute: true,
	notify: true,
	observer: "_updatedOneCoord",
	},
	useObservers: {
	type: Boolean,
	value: true,
	reflectToAttribute: true,
	},
	target: {
	type: String,
	value: "",
	observer: '_layerChanged',
	reflectToAttribute: true
	},
	hidden: {
	type: Boolean,
	value: false,
	observer: '_hiddenChanged',
	reflectToAttribute: true
	},
	name: {
	type: String,
	value: "",
	observer: '_layerChanged',
	reflectToAttribute: true
	},
	update_on: {
	// Valid values are "click", "move", and "none".
	type: String,
	value: "none",
	observer: '_registerCallbacks',
	reflectToAttribute: true
	},
	},

	ready: function () {
	// The current location of the crosshair, in CSS units.
	this.thumb = {
	x: 0,
	y: 0,
	};

	// If we are tracking mousemove events we'll store the coords here.
	this._move = {
	x: 0,
	y: 0,
	};

	// If we are tracking mousemove events we'll store the previous coords
	// here, so we only redraw the crosshair if it's actually moved.
	this._lastMove = {
	x: 0,
	y: 0,
	};

	this.willUpdate = null;

	this._xyChangedBound = this.coordinatesUpdated.bind(this);
	this._moveEventHandlerBound = this._moveEventHandler.bind(this);
	this._clickEventHandlerBound = this._clickEventHandler.bind(this);
	this._moveToMouseBound = this._moveToMouse.bind(this);

	this._animRequest = null;
	},

	_updatedOneCoord() {
	if (!this.useObservers) { return; }
	// Wait and see if the other coordinate updates.
	if (!this.willUpdate) {
	this.willUpdate = setTimeout(() => {
	this.coordinatesUpdated();
	}, 1);
	}
	},

	coordinatesUpdated() {
	this.willUpdate = null;
	if (!this._img) { return; }
	this._imgSize = this._standardSize(this._img);
	this.thumb.x = this._imgSize.visibleWidth * (this.x / this._imgSize.naturalWidth);
	this.thumb.y = this._imgSize.visibleHeight * (this.y / this._imgSize.naturalHeight);
	this._drawCrosshair();
	this._event();
	},

	// Returns both the visible and natural size of a canvas or image element,
	// Natural size - the width and height of it in it's native resolution.
	// Visible size - the width and height of it on the screen as controlled by css
	_standardSize(element) {
	if (element.nodeName === 'IMG') {
	return {
	'visibleWidth': element.width,
	'visibleHeight': element.height,
	'naturalWidth': element.naturalWidth,
	'naturalHeight': element.naturalHeight,
	};
	} else {
	var strW = window.getComputedStyle(element, null).width;
	var strH = window.getComputedStyle(element, null).height;
	return {
	// Trim 'px' off the end of the style string and convert to a number.
	'visibleWidth': parseFloat(strW.substring(0, strW.length-2)),
	'visibleHeight': parseFloat(strH.substring(0, strH.length-2)),
	'naturalWidth': element.width,
	'naturalHeight': element.height,
	};
	}
	},

	_layerChanged: function() {
	if (!(this.target && this.name)) {
	return;
	}
	$$$("#" + this.target, this._findParent()).addEventListener(
	'canvas-layers-updated', this._canvasLayersUpdated.bind(this));
	},

	_hiddenChanged: function() {
	if (this._ctx) {
	this._drawCrosshair();
	}
	},

	_findParent: function() {
	var p = this.parentNode;
	while (p.parentNode != null) {
	p = p.parentNode;
	}
	return p
	},

	_canvasLayersUpdated: function() {
	var layer = $$$("#" + this.target, Polymer.dom(this).parentNode);
	if (this._canvas) {
	// If we are switching to a new canvas then unregister all of our old callbacks.
	this._unregisterAllCallbacks();
	}
	this._canvas = layer.canvas(this.name);
	this._img = layer.subject();
	if (this._canvas) {
	this._registerCallbacks();
	this._ctx = this._canvas.getContext('2d');
	}
	this._imgSize = this._standardSize(this._img);
	},

	_registerCallbacks: function() {
	if (!this._canvas) {
	return;
	}
	this._canvas.addEventListener('canvas-update', this._xyChangedBound);
	if (this.update_on === "click") {
	this._canvas.addEventListener('click', this._clickEventHandlerBound);
	this._canvas.removeEventListener('mousemove', this._moveEventHandlerBound);
	} else if (this.update_on === "move") {
	this._canvas.addEventListener('mousemove', this._moveEventHandlerBound);
	this._canvas.removeEventListener('click', this._clickEventHandlerBound);
	} else {
	this._canvas.removeEventListener('mousemove', this._moveEventHandlerBound);
	this._canvas.removeEventListener('click', this._clickEventHandlerBound);
	}
	},

	_unregisterAllCallbacks: function() {
	this._canvas.removeEventListener('mousemove', this._moveEventHandlerBound);
	this._canvas.removeEventListener('click', this._clickEventHandlerBound);
	this._canvas.removeEventListener('canvas-update', this._xyChangedBound);
	},

	_moveEventHandler: function (e) {
	this._move.x = e.clientX;
	this._move.y = e.clientY;

	if (this._lastMove.x != this._move.x \|\| this._lastMove.y != this._move.y) {
	// Don't necessarily move it right now. Several more mouse move events may be triggered
	// before it's time to draw the next frame. register or replace our callback with the
	// window to move the crosshair before the next frame.
	this._animRequest = window.requestAnimationFrame(this._moveToMouseBound);
	this._lastMove.x = this._move.x;
	this._lastMove.y = this._move.y;
	}
	},

	// Moving to the last recorded mouse position. Registered as the callback
	// of window.requestAnimationFrame
	_moveToMouse(_) {
	this._moveCrosshair(this._move.x, this._move.y);
	},

	// moving to a clicked position.
	_clickEventHandler: function (e) {
	this._moveCrosshair(e.clientX, e.clientY);
	},

	_moveCrosshair: function (clientX, clientY) {
	if (!this._img.width \|\| !this._img.height) {
	return;
	}
	var p = sk.elePos(this._canvas);
	this.thumb.x = clientX - p.x;
	this.thumb.y = clientY - p.y;
	this._drawCrosshair();
	// Cannot set properties atomically in Polymer 1
	this.x = Math.floor(this.thumb.x / this._imgSize.visibleWidth * this._imgSize.naturalWidth);
	this.y = Math.floor(this.thumb.y / this._imgSize.visibleHeight * this._imgSize.naturalHeight);
	this._event();
	},

	_event: function() {
	var detail = {
	x: this.x,
	y: this.y
	};
	var evt = new CustomEvent('crosshair', {
	detail: detail,
	bubbles: true
	});
	this.dispatchEvent(evt);
	},

	_drawCrosshair: function () {
	this._ctx.clearRect(0, 0, this._ctx.canvas.width, this._ctx.canvas.height);
	if (this.hidden) {
	return;
	}
	this._ctx.lineWidth = 1;
	this._ctx.strokeStyle = '#F00';
	this._ctx.beginPath();
	this._ctx.moveTo(0, this.thumb.y + 0.5);
	this._ctx.lineTo(this._ctx.canvas.width, this.thumb.y + 0.5);
	this._ctx.stroke();
	this._ctx.beginPath();
	this._ctx.moveTo(this.thumb.x + 0.5, 0);
	this._ctx.lineTo(this.thumb.x + 0.5, this._ctx.canvas.height);
	this._ctx.stroke();
	}
	});
	</script>
	</dom-module>