aframe-htmlmesh - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

build/aframe-html.js

 (function (three) {
 	'use strict';
 
-	// This is the same as https://github.com/mrdoob/three.js/commit/b354e68f185b34e798e7b86ca03c70e9bb5f7bc7
+	// This is a copy of https://github.com/mrdoob/three.js/blob/0403020848c26a9605eb91c99a949111ad4a532e/examples/jsm/interactive/HTMLMesh.js
 
@@ -197,3 +197,3 @@ class HTMLMesh extends three.Mesh {
 				context.fillStyle = style.color;
-				context.fillText( string, x, y + parseFloat(style.fontSize)*0.1 );
+				context.fillText( string, x, y + parseFloat( style.fontSize ) * 0.1 );
 
@@ -204,12 +204,15 @@ }
 
-		function buildRectPath(x, y, w, h, r) {
-			if (w < 2 * r) r = w / 2;
-			if (h < 2 * r) r = h / 2;
+		function buildRectPath( x, y, w, h, r ) {
+
+			if ( w < 2 * r ) r = w / 2;
+			if ( h < 2 * r ) r = h / 2;
+
 			context.beginPath();
-			context.moveTo(x+r, y);
-			context.arcTo(x+w, y,   x+w, y+h, r);
-			context.arcTo(x+w, y+h, x,   y+h, r);
-			context.arcTo(x,   y+h, x,   y,   r);
-			context.arcTo(x,   y,   x+w, y,   r);
+			context.moveTo( x + r, y );
+			context.arcTo( x + w, y, x + w, y + h, r );
+			context.arcTo( x + w, y + h, x, y + h, r );
+			context.arcTo( x, y + h, x, y, r );
+			context.arcTo( x, y, x + w, y, r );
 			context.closePath();
+
 		}
@@ -226,3 +229,3 @@
 				context.strokeStyle = borderColor;
-				context.lineWidth = parseFloat(borderWidth);
+				context.lineWidth = parseFloat( borderWidth );
 				context.beginPath();
@@ -265,8 +268,26 @@ context.moveTo( x, y );
 
-				context.save();
+				const rect = element.getBoundingClientRect();
+
+				x = rect.left - offset.left - 0.5;
+				y = rect.top - offset.top - 0.5;
+
+			        context.save();
 				const dpr = window.devicePixelRatio;
-				context.scale(1/dpr, 1/dpr);
-				context.drawImage(element, 0, 0 );
+				context.scale( 1 / dpr, 1 / dpr );
+				context.drawImage( element, x, y );
 				context.restore();
 
+			} else if ( element instanceof HTMLImageElement ) {
+
+				if ( element.style.display === 'none' ) return;
+
+				const rect = element.getBoundingClientRect();
+
+				x = rect.left - offset.left - 0.5;
+				y = rect.top - offset.top - 0.5;
+				width = rect.width;
+				height = rect.height;
+
+				context.drawImage( element, x, y, width, height );
+
 			} else {
@@ -285,6 +306,8 @@
 
+				// Get the border of the element used for fill and border
+
+				buildRectPath( x, y, width, height, parseFloat( style.borderRadius ) );
+
 				const backgroundColor = style.backgroundColor;
 
-				// Get the border of the element used for fill and border
-				buildRectPath(x, y, width, height, parseFloat(style.borderRadius) );
 				if ( backgroundColor !== 'transparent' && backgroundColor !== 'rgba(0, 0, 0, 0)' ) {
@@ -294,29 +317,46 @@
 					context.fill();
+
 				}
 
 				// If all the borders match then stroke the round rectangle
-				const borders = ['borderTop', 'borderLeft', 'borderBottom', 'borderRight'];
+
+				const borders = [ 'borderTop', 'borderLeft', 'borderBottom', 'borderRight' ];
+
 				let match = true;
 				let prevBorder = null;
-				for (const border of borders) {
-					if (prevBorder) {
-						match = (style[ border + 'Width' ] === style[ prevBorder + 'Width' ]) &&
-						(style[ border + 'Color' ] === style[ prevBorder + 'Color' ]) &&
-						(style[ border + 'Style' ] === style[ prevBorder + 'Style' ]);
+
+				for ( const border of borders ) {
+
+					if ( prevBorder !== null ) {
+
+						match = ( style[ border + 'Width' ] === style[ prevBorder + 'Width' ] ) &&
+						( style[ border + 'Color' ] === style[ prevBorder + 'Color' ] ) &&
+						( style[ border + 'Style' ] === style[ prevBorder + 'Style' ] );
+
 					}
-					if (!match) break;
+
+					if ( match === false ) break;
+
 					prevBorder = border;
+
 				}
 
-				// they all match so stroke the rectangle from before allows for border-radius
-				if (match) {
-					const width = parseFloat(style.borderTopWidth);
+				if ( match === true ) {
+
+					// They all match so stroke the rectangle from before allows for border-radius
+
+					const width = parseFloat( style.borderTopWidth );
+
 					if ( style.borderTopWidth !== '0px' && style.borderTopStyle !== 'none' && style.borderTopColor !== 'transparent' && style.borderTopColor !== 'rgba(0, 0, 0, 0)' ) {
+
 						context.strokeStyle = style.borderTopColor;
 						context.lineWidth = width;
 						context.stroke();
+
 					}
+
 				} else {
 
 					// Otherwise draw individual borders
+
 					drawBorder( style, 'borderTop', x, y, width, 0 );
@@ -326,14 +366,20 @@ drawBorder( style, 'borderLeft', x, y, 0, height );
 					drawBorder( style, 'borderRight', x + width, y, 0, height );
+
 				}
 
-				if ( element instanceof HTMLInputElement) {
+				if ( element instanceof HTMLInputElement ) {
 
 					let accentColor = style.accentColor;
-					if (accentColor === undefined || accentColor === 'auto') accentColor = style.color;
-					color.set(accentColor);
-					const luminance = Math.sqrt( 0.299*color.r**2 + 0.587*color.g**2 + 0.114*color.b**2 );
+
+					if ( accentColor === undefined || accentColor === 'auto' ) accentColor = style.color;
+
+					color.set( accentColor );
+
+					const luminance = Math.sqrt( 0.299 * ( color.r ** 2 ) + 0.587 * ( color.g ** 2 ) + 0.114 * ( color.b ** 2 ) );
 					const accentTextColor = luminance < 0.5 ? 'white' : '#111111';
 
-					if (element.type  === 'radio') {
-						buildRectPath(x,y,width,height,height);
+					if ( element.type === 'radio' ) {
+
+						buildRectPath( x, y, width, height, height );
+
 						context.fillStyle = 'white';
@@ -345,15 +391,20 @@ context.strokeStyle = accentColor;
 
-						if (element.checked) {
-							const border = 2;
-							buildRectPath(x+border,y+border,width-border*2,height-border*2, height);
+						if ( element.checked ) {
+
+							buildRectPath( x + 2, y + 2, width - 4, height - 4, height );
+
 							context.fillStyle = accentColor;
 							context.strokeStyle = accentTextColor;
-							context.lineWidth = border;
+							context.lineWidth = 2;
 							context.fill();
 							context.stroke();
+
 						}
+
 					}
 
-					if (element.type  === 'checkbox') {
-						buildRectPath(x,y,width,height,2);
+					if ( element.type === 'checkbox' ) {
+
+						buildRectPath( x, y, width, height, 2 );
+
 						context.fillStyle = element.checked ? accentColor : 'white';
@@ -365,6 +416,9 @@ context.strokeStyle = element.checked ? accentTextColor : accentColor;
 
-						if (element.checked) {
-							const oldTextAlign = context.textAlign;
+						if ( element.checked ) {
+
+							const currentTextAlign = context.textAlign;
+
 							context.textAlign = 'center';
-							drawText( {
+
+							const properties = {
 								color: accentTextColor,
@@ -374,12 +428,18 @@ fontFamily: style.fontFamily,
 								fontWeight: 'bold'
-							}, x + width/2, y, '✔' );
-							context.textAlign = oldTextAlign;
+							};
+
+							drawText( properties, x + ( width / 2 ), y, '✔' );
+
+							context.textAlign = currentTextAlign;
+
 						}
+
 					}
 
-					if (element.type  === 'range') {
-						const [min,max,value] = ['min','max','value'].map(property => parseFloat(element[property]));
-						const position = ((value-min)/(max-min)) * (width - height);
+					if ( element.type === 'range' ) {
 
-						buildRectPath(x,y + height*0.25,width, height*0.5, height*0.25);
+						const [ min, max, value ] = [ 'min', 'max', 'value' ].map( property => parseFloat( element[ property ] ) );
+						const position = ( ( value - min ) / ( max - min ) ) * ( width - height );
+
+						buildRectPath( x, y + ( height / 4 ), width, height / 2, height / 4 );
 						context.fillStyle = accentTextColor;
@@ -391,12 +451,13 @@ context.strokeStyle = accentColor;
 
-						buildRectPath(x,y + height*0.25,position+height*0.5, height*0.5, height*0.25);
+						buildRectPath( x, y + ( height / 4 ), position + ( height / 2 ), height / 2, height / 4 );
 						context.fillStyle = accentColor;
 						context.fill();
 
-						buildRectPath(x + position,y,height, height, height*0.5);
+						buildRectPath( x + position, y, height, height, height / 2 );
 						context.fillStyle = accentColor;
 						context.fill();
+
 					}
 
-					if (element.type === 'color' || element.type === 'text' || element.type === 'number' ) {
+					if ( element.type === 'color' || element.type === 'text' || element.type === 'number' ) {
 
@@ -454,2 +515,4 @@ clipper.add( { x: x, y: y, width: width, height: height } );
 
+		context.clearRect(0, 0, canvas.width, canvas.height);
+
 		drawElement( element );
@@ -489,12 +552,12 @@
 
-					if ( 
-						element instanceof HTMLInputElement && element.type  === 'range' &&
-						(event === 'mousedown' || event === 'click')
-					) {
-						const [min,max] = ['min','max'].map(property => parseFloat(element[property]));
+					if ( element instanceof HTMLInputElement && element.type === 'range' && ( event === 'mousedown' || event === 'click' ) ) {
+
+						const [ min, max ] = [ 'min', 'max' ].map( property => parseFloat( element[ property ] ) );
+
 						const width = rect.width;
 						const offsetX = x - rect.x;
-						const proportion = offsetX/width;
-						element.value = min + (max-min)*proportion;
-						element.dispatchEvent(new InputEvent('input', {bubbles: true}));
+						const proportion = offsetX / width;
+						element.value = min + ( max - min ) * proportion;
+						element.dispatchEvent( new InputEvent( 'input', { bubbles: true } ) );
+
 					}
@@ -501,0 +564,0 @@

build/aframe-html.min.js

@@ -1,2 +0,2 @@
-!function(e){"use strict";class t extends e.Mesh{constructor(t){const s=new i(t),n=new e.PlaneGeometry(.001*s.image.width,.001*s.image.height),r=new e.MeshBasicMaterial({map:s,toneMapped:!1,transparent:!0});function l(e){r.map.dispatchDOMEvent(e)}super(n,r),this.addEventListener("mousedown",l),this.addEventListener("mousemove",l),this.addEventListener("mouseup",l),this.addEventListener("click",l),this.dispose=function(){n.dispose(),r.dispose(),r.map.dispose(),o.delete(t),this.removeEventListener("mousedown",l),this.removeEventListener("mousemove",l),this.removeEventListener("mouseup",l),this.removeEventListener("click",l)}}}class i extends e.CanvasTexture{constructor(t){super(s(t)),this.dom=t,this.anisotropy=16,this.encoding=e.sRGBEncoding,this.minFilter=e.LinearFilter,this.magFilter=e.LinearFilter;const i=new MutationObserver((()=>{this.scheduleUpdate||(this.scheduleUpdate=setTimeout((()=>this.update()),16))}));i.observe(t,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),this.observer=i}dispatchDOMEvent(e){e.data&&function(e,t,i,o){const s={clientX:i*e.offsetWidth+e.offsetLeft,clientY:o*e.offsetHeight+e.offsetTop,view:e.ownerDocument.defaultView},n=e.getBoundingClientRect();function r(e){if(e.nodeType!==Node.TEXT_NODE&&e.nodeType!==Node.COMMENT_NODE){const n=e.getBoundingClientRect();if(i>n.left&&i<n.right&&o>n.top&&o<n.bottom&&(e.dispatchEvent(new MouseEvent(t,s)),e instanceof HTMLInputElement&&"range"===e.type&&("mousedown"===t||"click"===t))){const[t,o]=["min","max"].map((t=>parseFloat(e[t]))),s=n.width,r=(i-n.x)/s;e.value=t+(o-t)*r,e.dispatchEvent(new InputEvent("input",{bubbles:!0}))}for(let t=0;t<e.childNodes.length;t++)r(e.childNodes[t])}}i=i*n.width+n.left,o=o*n.height+n.top,r(e)}(this.dom,e.type,e.data.x,e.data.y)}update(){this.image=s(this.dom),this.needsUpdate=!0,this.scheduleUpdate=null}dispose(){this.observer&&this.observer.disconnect(),this.scheduleUpdate=clearTimeout(this.scheduleUpdate),super.dispose()}}const o=new WeakMap;function s(t){const i=document.createRange(),s=new e.Color;function n(e,t,i,o){""!==o&&("uppercase"===e.textTransform&&(o=o.toUpperCase()),d.font=e.fontWeight+" "+e.fontSize+" "+e.fontFamily,d.textBaseline="top",d.fillStyle=e.color,d.fillText(o,t,i+.1*parseFloat(e.fontSize)))}function r(e,t,i,o,s){i<2*s&&(s=i/2),o<2*s&&(s=o/2),d.beginPath(),d.moveTo(e+s,t),d.arcTo(e+i,t,e+i,t+o,s),d.arcTo(e+i,t+o,e,t+o,s),d.arcTo(e,t+o,e,t,s),d.arcTo(e,t,e+i,t,s),d.closePath()}function l(e,t,i,o,s,n){const r=e[t+"Width"],l=e[t+"Style"],a=e[t+"Color"];"0px"!==r&&"none"!==l&&"transparent"!==a&&"rgba(0, 0, 0, 0)"!==a&&(d.strokeStyle=a,d.lineWidth=parseFloat(r),d.beginPath(),d.moveTo(i,o),d.lineTo(i+s,o+n),d.stroke())}const a=t.getBoundingClientRect();let h=o.get(t);void 0===h&&(h=document.createElement("canvas"),h.width=a.width,h.height=a.height,o.set(t,h));const d=h.getContext("2d"),c=new function(e){const t=[];let i=!1;function o(){if(i&&(i=!1,e.restore()),0===t.length)return;let o=-1/0,s=-1/0,n=1/0,r=1/0;for(let e=0;e<t.length;e++){const i=t[e];o=Math.max(o,i.x),s=Math.max(s,i.y),n=Math.min(n,i.x+i.width),r=Math.min(r,i.y+i.height)}e.save(),e.beginPath(),e.rect(o,s,n-o,r-s),e.clip(),i=!0}return{add:function(e){t.push(e),o()},remove:function(){t.pop(),o()}}}(d);return function e(t,o){let h=0,u=0,p=0,m=0;if(t.nodeType===Node.TEXT_NODE){i.selectNode(t);const e=i.getBoundingClientRect();h=e.left-a.left-.5,u=e.top-a.top-.5,p=e.width,m=e.height,n(o,h,u,t.nodeValue.trim())}else{if(t.nodeType===Node.COMMENT_NODE)return;if(t instanceof HTMLCanvasElement){if("none"===t.style.display)return;d.save();const e=window.devicePixelRatio;d.scale(1/e,1/e),d.drawImage(t,0,0),d.restore()}else{if("none"===t.style.display)return;const e=t.getBoundingClientRect();h=e.left-a.left-.5,u=e.top-a.top-.5,p=e.width,m=e.height;const i=(o=window.getComputedStyle(t)).backgroundColor;r(h,u,p,m,parseFloat(o.borderRadius)),"transparent"!==i&&"rgba(0, 0, 0, 0)"!==i&&(d.fillStyle=i,d.fill());const v=["borderTop","borderLeft","borderBottom","borderRight"];let f=!0,g=null;for(const e of v){if(g&&(f=o[e+"Width"]===o[g+"Width"]&&o[e+"Color"]===o[g+"Color"]&&o[e+"Style"]===o[g+"Style"]),!f)break;g=e}if(f){const e=parseFloat(o.borderTopWidth);"0px"!==o.borderTopWidth&&"none"!==o.borderTopStyle&&"transparent"!==o.borderTopColor&&"rgba(0, 0, 0, 0)"!==o.borderTopColor&&(d.strokeStyle=o.borderTopColor,d.lineWidth=e,d.stroke())}else l(o,"borderTop",h,u,p,0),l(o,"borderLeft",h,u,0,m),l(o,"borderBottom",h,u+m,p,0),l(o,"borderRight",h+p,u,0,m);if(t instanceof HTMLInputElement){let e=o.accentColor;void 0!==e&&"auto"!==e||(e=o.color),s.set(e);const i=Math.sqrt(.299*s.r**2+.587*s.g**2+.114*s.b**2)<.5?"white":"#111111";if("radio"===t.type&&(r(h,u,p,m,m),d.fillStyle="white",d.strokeStyle=e,d.lineWidth=1,d.fill(),d.stroke(),t.checked)){const t=2;r(h+t,u+t,p-2*t,m-2*t,m),d.fillStyle=e,d.strokeStyle=i,d.lineWidth=t,d.fill(),d.stroke()}if("checkbox"===t.type&&(r(h,u,p,m,2),d.fillStyle=t.checked?e:"white",d.strokeStyle=t.checked?i:e,d.lineWidth=1,d.stroke(),d.fill(),t.checked)){const e=d.textAlign;d.textAlign="center",n({color:i,fontFamily:o.fontFamily,fontSize:m+"px",fontWeight:"bold"},h+p/2,u,"✔"),d.textAlign=e}if("range"===t.type){const[o,s,n]=["min","max","value"].map((e=>parseFloat(t[e]))),l=(n-o)/(s-o)*(p-m);r(h,u+.25*m,p,.5*m,.25*m),d.fillStyle=i,d.strokeStyle=e,d.lineWidth=1,d.fill(),d.stroke(),r(h,u+.25*m,l+.5*m,.5*m,.25*m),d.fillStyle=e,d.fill(),r(h+l,u,m,m,.5*m),d.fillStyle=e,d.fill()}"color"!==t.type&&"text"!==t.type&&"number"!==t.type||(c.add({x:h,y:u,width:p,height:m}),n(o,h+parseInt(o.paddingLeft),u+parseInt(o.paddingTop),t.value),c.remove())}}}const v="auto"===o.overflow||"hidden"===o.overflow;v&&c.add({x:h,y:u,width:p,height:m});for(let i=0;i<t.childNodes.length;i++)e(t.childNodes[i],o);v&&c.remove()}(t),h}const n={type:"",data:new THREE.Vector2};AFRAME.registerComponent("html",{schema:{html:{type:"selector"},cursor:{type:"selector"}},init(){this.rerender=this.rerender.bind(this),this.handle=this.handle.bind(this),this.onClick=e=>this.handle("click",e),this.onMouseLeave=e=>this.handle("mouseleave",e),this.onMouseEnter=e=>this.handle("mouseenter",e),this.onMouseUp=e=>this.handle("mouseup",e),this.onMouseDown=e=>this.handle("mousedown",e),this.mouseMoveDetail={detail:{cursorEl:null,intersection:null}}},play(){this.el.addEventListener("click",this.onClick),this.el.addEventListener("mouseleave",this.onMouseLeave),this.el.addEventListener("mouseenter",this.onMouseEnter),this.el.addEventListener("mouseup",this.onMouseUp),this.el.addEventListener("mousedown",this.onMouseDown)},pause(){this.el.removeEventListener("click",this.onClick),this.el.removeEventListener("mouseleave",this.onMouseLeave),this.el.removeEventListener("mouseenter",this.onMouseEnter),this.el.removeEventListener("mouseup",this.onMouseUp),this.el.removeEventListener("mousedown",this.onMouseDown)},update(){if(this.remove(),!this.data.html)return;const e=new t(this.data.html);this.el.setObject3D("html",e),this.data.html.addEventListener("input",this.rerender),this.data.html.addEventListener("change",this.rerender),this.cursor=this.data.cursor?this.data.cursor.object3D:null},tick(){if(this.activeRaycaster){const e=this.activeRaycaster.components.raycaster.getIntersection(this.el);this.mouseMoveDetail.detail.cursorEl=this.activeRaycaster,this.mouseMoveDetail.detail.intersection=e,this.handle("mousemove",this.mouseMoveDetail)}},handle(e,t){const i=t.detail.intersection,o=t.detail.cursorEl;if("mouseenter"===e&&(this.activeRaycaster=o),"mouseleave"===e&&this.activeRaycaster===o&&(this.activeRaycaster=null),this.cursor&&(this.cursor.visible=!1),i){const t=this.el.getObject3D("html"),o=i.uv;n.type=e,n.data.set(o.x,1-o.y),t.dispatchEvent(n),this.cursor&&(this.cursor.visible=!0,this.cursor.parent.worldToLocal(this.cursor.position.copy(i.point)))}},rerender(){const e=this.el.getObject3D("html");e&&!e.material.map.scheduleUpdate&&(e.material.map.scheduleUpdate=setTimeout((()=>e.material.map.update()),16))},remove(){const e=this.el.getObject3D("html");e&&(this.el.removeObject3D("html"),this.data.html.removeEventListener("input",this.rerender),this.data.html.removeEventListener("change",this.rerender),e.dispose()),this.activeRaycaster=null,this.mouseMoveDetail.detail.cursorEl=null,this.mouseMoveDetail.detail.intersection=null,this.cursor=null}})}(THREE);
+!function(e){"use strict";class t extends e.Mesh{constructor(t){const s=new i(t),n=new e.PlaneGeometry(.001*s.image.width,.001*s.image.height),r=new e.MeshBasicMaterial({map:s,toneMapped:!1,transparent:!0});function l(e){r.map.dispatchDOMEvent(e)}super(n,r),this.addEventListener("mousedown",l),this.addEventListener("mousemove",l),this.addEventListener("mouseup",l),this.addEventListener("click",l),this.dispose=function(){n.dispose(),r.dispose(),r.map.dispose(),o.delete(t),this.removeEventListener("mousedown",l),this.removeEventListener("mousemove",l),this.removeEventListener("mouseup",l),this.removeEventListener("click",l)}}}class i extends e.CanvasTexture{constructor(t){super(s(t)),this.dom=t,this.anisotropy=16,this.encoding=e.sRGBEncoding,this.minFilter=e.LinearFilter,this.magFilter=e.LinearFilter;const i=new MutationObserver((()=>{this.scheduleUpdate||(this.scheduleUpdate=setTimeout((()=>this.update()),16))}));i.observe(t,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),this.observer=i}dispatchDOMEvent(e){e.data&&function(e,t,i,o){const s={clientX:i*e.offsetWidth+e.offsetLeft,clientY:o*e.offsetHeight+e.offsetTop,view:e.ownerDocument.defaultView},n=e.getBoundingClientRect();function r(e){if(e.nodeType!==Node.TEXT_NODE&&e.nodeType!==Node.COMMENT_NODE){const n=e.getBoundingClientRect();if(i>n.left&&i<n.right&&o>n.top&&o<n.bottom&&(e.dispatchEvent(new MouseEvent(t,s)),e instanceof HTMLInputElement&&"range"===e.type&&("mousedown"===t||"click"===t))){const[t,o]=["min","max"].map((t=>parseFloat(e[t]))),s=n.width,r=(i-n.x)/s;e.value=t+(o-t)*r,e.dispatchEvent(new InputEvent("input",{bubbles:!0}))}for(let t=0;t<e.childNodes.length;t++)r(e.childNodes[t])}}i=i*n.width+n.left,o=o*n.height+n.top,r(e)}(this.dom,e.type,e.data.x,e.data.y)}update(){this.image=s(this.dom),this.needsUpdate=!0,this.scheduleUpdate=null}dispose(){this.observer&&this.observer.disconnect(),this.scheduleUpdate=clearTimeout(this.scheduleUpdate),super.dispose()}}const o=new WeakMap;function s(t){const i=document.createRange(),s=new e.Color;function n(e,t,i,o){""!==o&&("uppercase"===e.textTransform&&(o=o.toUpperCase()),d.font=e.fontWeight+" "+e.fontSize+" "+e.fontFamily,d.textBaseline="top",d.fillStyle=e.color,d.fillText(o,t,i+.1*parseFloat(e.fontSize)))}function r(e,t,i,o,s){i<2*s&&(s=i/2),o<2*s&&(s=o/2),d.beginPath(),d.moveTo(e+s,t),d.arcTo(e+i,t,e+i,t+o,s),d.arcTo(e+i,t+o,e,t+o,s),d.arcTo(e,t+o,e,t,s),d.arcTo(e,t,e+i,t,s),d.closePath()}function l(e,t,i,o,s,n){const r=e[t+"Width"],l=e[t+"Style"],a=e[t+"Color"];"0px"!==r&&"none"!==l&&"transparent"!==a&&"rgba(0, 0, 0, 0)"!==a&&(d.strokeStyle=a,d.lineWidth=parseFloat(r),d.beginPath(),d.moveTo(i,o),d.lineTo(i+s,o+n),d.stroke())}const a=t.getBoundingClientRect();let h=o.get(t);void 0===h&&(h=document.createElement("canvas"),h.width=a.width,h.height=a.height,o.set(t,h));const d=h.getContext("2d"),c=new function(e){const t=[];let i=!1;function o(){if(i&&(i=!1,e.restore()),0===t.length)return;let o=-1/0,s=-1/0,n=1/0,r=1/0;for(let e=0;e<t.length;e++){const i=t[e];o=Math.max(o,i.x),s=Math.max(s,i.y),n=Math.min(n,i.x+i.width),r=Math.min(r,i.y+i.height)}e.save(),e.beginPath(),e.rect(o,s,n-o,r-s),e.clip(),i=!0}return{add:function(e){t.push(e),o()},remove:function(){t.pop(),o()}}}(d);return d.clearRect(0,0,h.width,h.height),function e(t,o){let h=0,u=0,p=0,m=0;if(t.nodeType===Node.TEXT_NODE){i.selectNode(t);const e=i.getBoundingClientRect();h=e.left-a.left-.5,u=e.top-a.top-.5,p=e.width,m=e.height,n(o,h,u,t.nodeValue.trim())}else{if(t.nodeType===Node.COMMENT_NODE)return;if(t instanceof HTMLCanvasElement){if("none"===t.style.display)return;const e=t.getBoundingClientRect();h=e.left-a.left-.5,u=e.top-a.top-.5,d.save();const i=window.devicePixelRatio;d.scale(1/i,1/i),d.drawImage(t,h,u),d.restore()}else if(t instanceof HTMLImageElement){if("none"===t.style.display)return;const e=t.getBoundingClientRect();h=e.left-a.left-.5,u=e.top-a.top-.5,p=e.width,m=e.height,d.drawImage(t,h,u,p,m)}else{if("none"===t.style.display)return;const e=t.getBoundingClientRect();h=e.left-a.left-.5,u=e.top-a.top-.5,p=e.width,m=e.height,o=window.getComputedStyle(t),r(h,u,p,m,parseFloat(o.borderRadius));const i=o.backgroundColor;"transparent"!==i&&"rgba(0, 0, 0, 0)"!==i&&(d.fillStyle=i,d.fill());const v=["borderTop","borderLeft","borderBottom","borderRight"];let f=!0,g=null;for(const e of v){if(null!==g&&(f=o[e+"Width"]===o[g+"Width"]&&o[e+"Color"]===o[g+"Color"]&&o[e+"Style"]===o[g+"Style"]),!1===f)break;g=e}if(!0===f){const e=parseFloat(o.borderTopWidth);"0px"!==o.borderTopWidth&&"none"!==o.borderTopStyle&&"transparent"!==o.borderTopColor&&"rgba(0, 0, 0, 0)"!==o.borderTopColor&&(d.strokeStyle=o.borderTopColor,d.lineWidth=e,d.stroke())}else l(o,"borderTop",h,u,p,0),l(o,"borderLeft",h,u,0,m),l(o,"borderBottom",h,u+m,p,0),l(o,"borderRight",h+p,u,0,m);if(t instanceof HTMLInputElement){let e=o.accentColor;void 0!==e&&"auto"!==e||(e=o.color),s.set(e);const i=Math.sqrt(.299*s.r**2+.587*s.g**2+.114*s.b**2)<.5?"white":"#111111";if("radio"===t.type&&(r(h,u,p,m,m),d.fillStyle="white",d.strokeStyle=e,d.lineWidth=1,d.fill(),d.stroke(),t.checked&&(r(h+2,u+2,p-4,m-4,m),d.fillStyle=e,d.strokeStyle=i,d.lineWidth=2,d.fill(),d.stroke())),"checkbox"===t.type&&(r(h,u,p,m,2),d.fillStyle=t.checked?e:"white",d.strokeStyle=t.checked?i:e,d.lineWidth=1,d.stroke(),d.fill(),t.checked)){const e=d.textAlign;d.textAlign="center";n({color:i,fontFamily:o.fontFamily,fontSize:m+"px",fontWeight:"bold"},h+p/2,u,"✔"),d.textAlign=e}if("range"===t.type){const[o,s,n]=["min","max","value"].map((e=>parseFloat(t[e]))),l=(n-o)/(s-o)*(p-m);r(h,u+m/4,p,m/2,m/4),d.fillStyle=i,d.strokeStyle=e,d.lineWidth=1,d.fill(),d.stroke(),r(h,u+m/4,l+m/2,m/2,m/4),d.fillStyle=e,d.fill(),r(h+l,u,m,m,m/2),d.fillStyle=e,d.fill()}"color"!==t.type&&"text"!==t.type&&"number"!==t.type||(c.add({x:h,y:u,width:p,height:m}),n(o,h+parseInt(o.paddingLeft),u+parseInt(o.paddingTop),t.value),c.remove())}}}const v="auto"===o.overflow||"hidden"===o.overflow;v&&c.add({x:h,y:u,width:p,height:m});for(let i=0;i<t.childNodes.length;i++)e(t.childNodes[i],o);v&&c.remove()}(t),h}const n={type:"",data:new THREE.Vector2};AFRAME.registerComponent("html",{schema:{html:{type:"selector"},cursor:{type:"selector"}},init(){this.rerender=this.rerender.bind(this),this.handle=this.handle.bind(this),this.onClick=e=>this.handle("click",e),this.onMouseLeave=e=>this.handle("mouseleave",e),this.onMouseEnter=e=>this.handle("mouseenter",e),this.onMouseUp=e=>this.handle("mouseup",e),this.onMouseDown=e=>this.handle("mousedown",e),this.mouseMoveDetail={detail:{cursorEl:null,intersection:null}}},play(){this.el.addEventListener("click",this.onClick),this.el.addEventListener("mouseleave",this.onMouseLeave),this.el.addEventListener("mouseenter",this.onMouseEnter),this.el.addEventListener("mouseup",this.onMouseUp),this.el.addEventListener("mousedown",this.onMouseDown)},pause(){this.el.removeEventListener("click",this.onClick),this.el.removeEventListener("mouseleave",this.onMouseLeave),this.el.removeEventListener("mouseenter",this.onMouseEnter),this.el.removeEventListener("mouseup",this.onMouseUp),this.el.removeEventListener("mousedown",this.onMouseDown)},update(){if(this.remove(),!this.data.html)return;const e=new t(this.data.html);this.el.setObject3D("html",e),this.data.html.addEventListener("input",this.rerender),this.data.html.addEventListener("change",this.rerender),this.cursor=this.data.cursor?this.data.cursor.object3D:null},tick(){if(this.activeRaycaster){const e=this.activeRaycaster.components.raycaster.getIntersection(this.el);this.mouseMoveDetail.detail.cursorEl=this.activeRaycaster,this.mouseMoveDetail.detail.intersection=e,this.handle("mousemove",this.mouseMoveDetail)}},handle(e,t){const i=t.detail.intersection,o=t.detail.cursorEl;if("mouseenter"===e&&(this.activeRaycaster=o),"mouseleave"===e&&this.activeRaycaster===o&&(this.activeRaycaster=null),this.cursor&&(this.cursor.visible=!1),i){const t=this.el.getObject3D("html"),o=i.uv;n.type=e,n.data.set(o.x,1-o.y),t.dispatchEvent(n),this.cursor&&(this.cursor.visible=!0,this.cursor.parent.worldToLocal(this.cursor.position.copy(i.point)))}},rerender(){const e=this.el.getObject3D("html");e&&!e.material.map.scheduleUpdate&&(e.material.map.scheduleUpdate=setTimeout((()=>e.material.map.update()),16))},remove(){const e=this.el.getObject3D("html");e&&(this.el.removeObject3D("html"),this.data.html.removeEventListener("input",this.rerender),this.data.html.removeEventListener("change",this.rerender),e.dispose()),this.activeRaycaster=null,this.mouseMoveDetail.detail.cursorEl=null,this.mouseMoveDetail.detail.intersection=null,this.cursor=null}})}(THREE);
 //# sourceMappingURL=aframe-html.min.js.map

package.json

 {
   "name": "aframe-htmlmesh",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Show HTML elements in AFrame",
@@ -5,0 +5,0 @@ "repository": "https://github.com/AdaRoseCannon/aframe-htmlmesh",

src/HTMLMesh.js

@@ -1,3 +0,5 @@
-// This is the same as https://github.com/mrdoob/three.js/commit/b354e68f185b34e798e7b86ca03c70e9bb5f7bc7
-// minus the code style and the window.dispatchEvent line commented see TODO.
+// This is a copy of https://github.com/mrdoob/three.js/blob/0403020848c26a9605eb91c99a949111ad4a532e/examples/jsm/interactive/HTMLMesh.js
+// with the following changes:
+// - Revert back to using "this.encoding = sRGBEncoding" instead of "this.colorSpace = SRGBColorSpace;" for compatibility with three r147 aframe 1.4.2
+// - window.dispatchEvent line commented, see the TODO below.
 // Look at https://github.com/mrdoob/three.js/commits/dev/examples/jsm/interactive/HTMLMesh.js
@@ -206,3 +208,3 @@ // to see if there are other changes that can be retrieved here.
 			context.fillStyle = style.color;
-			context.fillText( string, x, y + parseFloat(style.fontSize)*0.1 );
+			context.fillText( string, x, y + parseFloat( style.fontSize ) * 0.1 );
 
@@ -213,12 +215,15 @@ }
 
-	function buildRectPath(x, y, w, h, r) {
-		if (w < 2 * r) r = w / 2;
-		if (h < 2 * r) r = h / 2;
+	function buildRectPath( x, y, w, h, r ) {
+
+		if ( w < 2 * r ) r = w / 2;
+		if ( h < 2 * r ) r = h / 2;
+
 		context.beginPath();
-		context.moveTo(x+r, y);
-		context.arcTo(x+w, y,   x+w, y+h, r);
-		context.arcTo(x+w, y+h, x,   y+h, r);
-		context.arcTo(x,   y+h, x,   y,   r);
-		context.arcTo(x,   y,   x+w, y,   r);
+		context.moveTo( x + r, y );
+		context.arcTo( x + w, y, x + w, y + h, r );
+		context.arcTo( x + w, y + h, x, y + h, r );
+		context.arcTo( x, y + h, x, y, r );
+		context.arcTo( x, y, x + w, y, r );
 		context.closePath();
+
 	}
@@ -235,3 +240,3 @@
 			context.strokeStyle = borderColor;
-			context.lineWidth = parseFloat(borderWidth);
+			context.lineWidth = parseFloat( borderWidth );
 			context.beginPath();
@@ -274,8 +279,26 @@ context.moveTo( x, y );
 
-			context.save();
+			const rect = element.getBoundingClientRect();
+
+			x = rect.left - offset.left - 0.5;
+			y = rect.top - offset.top - 0.5;
+
+		        context.save();
 			const dpr = window.devicePixelRatio;
-			context.scale(1/dpr, 1/dpr);
-			context.drawImage(element, 0, 0 );
+			context.scale( 1 / dpr, 1 / dpr );
+			context.drawImage( element, x, y );
 			context.restore();
 
+		} else if ( element instanceof HTMLImageElement ) {
+
+			if ( element.style.display === 'none' ) return;
+
+			const rect = element.getBoundingClientRect();
+
+			x = rect.left - offset.left - 0.5;
+			y = rect.top - offset.top - 0.5;
+			width = rect.width;
+			height = rect.height;
+
+			context.drawImage( element, x, y, width, height );
+
 		} else {
@@ -294,6 +317,8 @@
 
+			// Get the border of the element used for fill and border
+
+			buildRectPath( x, y, width, height, parseFloat( style.borderRadius ) );
+
 			const backgroundColor = style.backgroundColor;
 
-			// Get the border of the element used for fill and border
-			buildRectPath(x, y, width, height, parseFloat(style.borderRadius) );
 			if ( backgroundColor !== 'transparent' && backgroundColor !== 'rgba(0, 0, 0, 0)' ) {
@@ -303,29 +328,46 @@
 				context.fill();
+
 			}
 
 			// If all the borders match then stroke the round rectangle
-			const borders = ['borderTop', 'borderLeft', 'borderBottom', 'borderRight'];
+
+			const borders = [ 'borderTop', 'borderLeft', 'borderBottom', 'borderRight' ];
+
 			let match = true;
 			let prevBorder = null;
-			for (const border of borders) {
-				if (prevBorder) {
-					match = (style[ border + 'Width' ] === style[ prevBorder + 'Width' ]) &&
-					(style[ border + 'Color' ] === style[ prevBorder + 'Color' ]) &&
-					(style[ border + 'Style' ] === style[ prevBorder + 'Style' ]);
+
+			for ( const border of borders ) {
+
+				if ( prevBorder !== null ) {
+
+					match = ( style[ border + 'Width' ] === style[ prevBorder + 'Width' ] ) &&
+					( style[ border + 'Color' ] === style[ prevBorder + 'Color' ] ) &&
+					( style[ border + 'Style' ] === style[ prevBorder + 'Style' ] );
+
 				}
-				if (!match) break;
+
+				if ( match === false ) break;
+
 				prevBorder = border;
+
 			}
 
-			// they all match so stroke the rectangle from before allows for border-radius
-			if (match) {
-				const width = parseFloat(style.borderTopWidth);
+			if ( match === true ) {
+
+				// They all match so stroke the rectangle from before allows for border-radius
+
+				const width = parseFloat( style.borderTopWidth );
+
 				if ( style.borderTopWidth !== '0px' && style.borderTopStyle !== 'none' && style.borderTopColor !== 'transparent' && style.borderTopColor !== 'rgba(0, 0, 0, 0)' ) {
+
 					context.strokeStyle = style.borderTopColor;
 					context.lineWidth = width;
 					context.stroke();
+
 				}
+
 			} else {
 
 				// Otherwise draw individual borders
+
 				drawBorder( style, 'borderTop', x, y, width, 0 );
@@ -335,14 +377,20 @@ drawBorder( style, 'borderLeft', x, y, 0, height );
 				drawBorder( style, 'borderRight', x + width, y, 0, height );
+
 			}
 
-			if ( element instanceof HTMLInputElement) {
+			if ( element instanceof HTMLInputElement ) {
 
 				let accentColor = style.accentColor;
-				if (accentColor === undefined || accentColor === 'auto') accentColor = style.color;
-				color.set(accentColor);
-				const luminance = Math.sqrt( 0.299*color.r**2 + 0.587*color.g**2 + 0.114*color.b**2 );
+
+				if ( accentColor === undefined || accentColor === 'auto' ) accentColor = style.color;
+
+				color.set( accentColor );
+
+				const luminance = Math.sqrt( 0.299 * ( color.r ** 2 ) + 0.587 * ( color.g ** 2 ) + 0.114 * ( color.b ** 2 ) );
 				const accentTextColor = luminance < 0.5 ? 'white' : '#111111';
 
-				if (element.type  === 'radio') {
-					buildRectPath(x,y,width,height,height);
+				if ( element.type === 'radio' ) {
+
+					buildRectPath( x, y, width, height, height );
+
 					context.fillStyle = 'white';
@@ -354,15 +402,20 @@ context.strokeStyle = accentColor;
 
-					if (element.checked) {
-						const border = 2;
-						buildRectPath(x+border,y+border,width-border*2,height-border*2, height);
+					if ( element.checked ) {
+
+						buildRectPath( x + 2, y + 2, width - 4, height - 4, height );
+
 						context.fillStyle = accentColor;
 						context.strokeStyle = accentTextColor;
-						context.lineWidth = border;
+						context.lineWidth = 2;
 						context.fill();
 						context.stroke();
+
 					}
+
 				}
 
-				if (element.type  === 'checkbox') {
-					buildRectPath(x,y,width,height,2);
+				if ( element.type === 'checkbox' ) {
+
+					buildRectPath( x, y, width, height, 2 );
+
 					context.fillStyle = element.checked ? accentColor : 'white';
@@ -374,6 +427,9 @@ context.strokeStyle = element.checked ? accentTextColor : accentColor;
 
-					if (element.checked) {
-						const oldTextAlign = context.textAlign;
+					if ( element.checked ) {
+
+						const currentTextAlign = context.textAlign;
+
 						context.textAlign = 'center';
-						drawText( {
+
+						const properties = {
 							color: accentTextColor,
@@ -383,12 +439,18 @@ fontFamily: style.fontFamily,
 							fontWeight: 'bold'
-						}, x + width/2, y, '✔' );
-						context.textAlign = oldTextAlign;
+						};
+
+						drawText( properties, x + ( width / 2 ), y, '✔' );
+
+						context.textAlign = currentTextAlign;
+
 					}
+
 				}
 
-				if (element.type  === 'range') {
-					const [min,max,value] = ['min','max','value'].map(property => parseFloat(element[property]));
-					const position = ((value-min)/(max-min)) * (width - height);
+				if ( element.type === 'range' ) {
 
-					buildRectPath(x,y + height*0.25,width, height*0.5, height*0.25);
+					const [ min, max, value ] = [ 'min', 'max', 'value' ].map( property => parseFloat( element[ property ] ) );
+					const position = ( ( value - min ) / ( max - min ) ) * ( width - height );
+
+					buildRectPath( x, y + ( height / 4 ), width, height / 2, height / 4 );
 					context.fillStyle = accentTextColor;
@@ -400,12 +462,13 @@ context.strokeStyle = accentColor;
 
-					buildRectPath(x,y + height*0.25,position+height*0.5, height*0.5, height*0.25);
+					buildRectPath( x, y + ( height / 4 ), position + ( height / 2 ), height / 2, height / 4 );
 					context.fillStyle = accentColor;
 					context.fill();
 
-					buildRectPath(x + position,y,height, height, height*0.5);
+					buildRectPath( x + position, y, height, height, height / 2 );
 					context.fillStyle = accentColor;
 					context.fill();
+
 				}
 
-				if (element.type === 'color' || element.type === 'text' || element.type === 'number' ) {
+				if ( element.type === 'color' || element.type === 'text' || element.type === 'number' ) {
 
@@ -463,2 +526,4 @@ clipper.add( { x: x, y: y, width: width, height: height } );
 
+	context.clearRect(0, 0, canvas.width, canvas.height);
+
 	drawElement( element );
@@ -498,12 +563,12 @@
 
-				if ( 
-					element instanceof HTMLInputElement && element.type  === 'range' &&
-					(event === 'mousedown' || event === 'click')
-				) {
-					const [min,max] = ['min','max'].map(property => parseFloat(element[property]));
+				if ( element instanceof HTMLInputElement && element.type === 'range' && ( event === 'mousedown' || event === 'click' ) ) {
+
+					const [ min, max ] = [ 'min', 'max' ].map( property => parseFloat( element[ property ] ) );
+
 					const width = rect.width;
 					const offsetX = x - rect.x;
-					const proportion = offsetX/width;
-					element.value = min + (max-min)*proportion;
-					element.dispatchEvent(new InputEvent('input', {bubbles: true}));
+					const proportion = offsetX / width;
+					element.value = min + ( max - min ) * proportion;
+					element.dispatchEvent( new InputEvent( 'input', { bubbles: true } ) );
+
 				}
@@ -510,0 +575,0 @@

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2596830

0.22%

Lines of code

64368

0.03%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes