aframe-tooltip-component - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/aframe-tooltip-component.js

@@ -61,2 +61,3 @@ /******/ (function(modules) { // webpackBootstrap
 	    end: {type: 'vec3'},
+	    src: {default: ''},
 	    rotation: {type: 'vec3'},
@@ -68,2 +69,3 @@ width: {default: 1, min: 0},
 	    lineVerticalAlign: {default: 'center', oneOf: ['top', 'bottom', 'center']},
+	    opacity: {default: 1, min: 0, max: 1},
 	/*
@@ -89,3 +91,4 @@ targetType: {default: 'element', oneOf: ['element', 'position']},
 	    });
-	    quad.setAttribute('slice9', {width: data.width, height: data.height, left: 20, right: 43, top: 20, bottom: 43, padding: 0.005, src: 'tooltip.png'});
+
+	    quad.setAttribute('slice9', {width: data.width, height: data.height, left: 20, right: 43, top: 20, bottom: 43, padding: 0.005, src: data.src});
 	    quad.setAttribute('rotation', data.rotation);
@@ -96,3 +99,3 @@ quad.setAttribute('text', {width: 0.25, color: '#fff', value: data.text, align: 'center'});
 	    // Line
-	    var material = this.material = new THREE.LineBasicMaterial({color: this.data.lineColor});
+	    var material = this.material = new THREE.LineBasicMaterial({color: data.lineColor, opacity: data.opacity, transparent: data.opacity < 1});
 	    var geometry = this.geometry = new THREE.BufferGeometry();
@@ -135,2 +138,5 @@ geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(2 * 3), 3));
 
+	       this.quad.setAttribute('slice9', {opacity: data.opacity});
+	       this.quad.setAttribute('text', {opacity: data.opacity});
+
 	       // Update geometry
@@ -149,2 +155,5 @@ this.quad.object3D.updateMatrix();
 	       this.geometry.attributes.position.needsUpdate = true;
+
+	       this.material.opacity = data.opacity;
+	       this.material.transparent = data.opacity < 1;
 	       this.material.color.setStyle(data.color);
@@ -151,0 +160,0 @@ }

dist/aframe-tooltip-component.min.js

@@ -1,1 +0,1 @@
-!function(t){function e(a){if(i[a])return i[a].exports;var r=i[a]={exports:{},id:a,loaded:!1};return t[a].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){if(i(1),"undefined"==typeof AFRAME)throw new Error("Component attempted to register before AFRAME was available.");AFRAME.registerComponent("tooltip",{schema:{text:{default:""},end:{type:"vec3"},rotation:{type:"vec3"},width:{default:1,min:0},height:{default:1,min:0},lineColor:{default:"#fff",type:"color"},lineHorizontalAlign:{default:"left",oneOf:["left","right","center"]},lineVerticalAlign:{default:"center",oneOf:["top","bottom","center"]},targetPosition:{type:"vec3",if:{targetType:["position"]}}},init:function(){var t=this.el,e=this.data,i=this.quad=document.createElement("a-entity"),a=this;i.addEventListener("loaded",function(){a.updateTooltip()}),i.setAttribute("slice9",{width:e.width,height:e.height,left:20,right:43,top:20,bottom:43,padding:.005,src:"tooltip.png"}),i.setAttribute("rotation",e.rotation),i.setAttribute("text",{width:.25,color:"#fff",value:e.text,align:"center"}),t.appendChild(i);var r=this.material=new THREE.LineBasicMaterial({color:this.data.lineColor}),o=this.geometry=new THREE.BufferGeometry;o.addAttribute("position",new THREE.BufferAttribute(new Float32Array(6),3)),this.line=new THREE.Line(o,r),this.el.setObject3D("line",this.line),this.el.addEventListener("componentchanged",function(t){a.updateTooltip()}),this.updateTooltip()},updateTooltip:function(){var t=new THREE.Vector3,e=new THREE.Vector3,i=new THREE.Vector3;return function(){var a=this.data;t.copy(this.el.getAttribute("position")),e.copy(a.targetPosition);var r=e.sub(t),a=this.data,o={top:a.height/2,bottom:-a.height/2,center:0},n={left:-a.width/2,right:a.width/2,center:0},s=o[a.lineVerticalAlign],l=n[a.lineHorizontalAlign];this.quad.object3D.updateMatrix(),i.set(l,s,0),i.applyMatrix4(this.quad.object3D.matrix);var d=this.geometry.attributes.position.array;d[0]=i.x,d[1]=i.y,d[2]=i.z,d[3]=r.x,d[4]=r.y,d[5]=r.z,this.geometry.attributes.position.needsUpdate=!0,this.material.color.setStyle(a.color)}}(),update:function(){this.updateTooltip()}})},function(t,e){function i(t){switch(t){case"back":return THREE.BackSide;case"double":return THREE.DoubleSide;default:return THREE.FrontSide}}if("undefined"==typeof AFRAME)throw new Error("Component attempted to register before AFRAME was available.");AFRAME.registerComponent("slice9",{schema:{width:{default:1,min:0},height:{default:1,min:0},left:{default:0,min:0},right:{default:0,min:0},bottom:{default:0,min:0},top:{default:0,min:0},side:{default:"front",oneOf:["front","back","double"]},padding:{default:.1,min:.01},color:{type:"color",default:"#fff"},opacity:{default:1,min:0,max:1},transparent:{default:!0},debug:{default:!1},src:{type:"map"}},multiple:!1,init:function(){var t=this.data,e=this.material=new THREE.MeshBasicMaterial({color:t.color,opacity:t.opacity,transparent:t.transparent,wireframe:t.debug}),i=this.geometry=new THREE.PlaneBufferGeometry(t.width,t.height,3,3);new THREE.TextureLoader;this.plane=new THREE.Mesh(i,e),this.el.setObject3D("mesh",this.plane),this.textureSrc=null},updateMap:function(){function t(t){this.material.map=t,this.material.needsUpdate=!0,this.regenerateMesh()}var e=this.data.src;if(e){if(e===this.textureSrc)return;return this.textureSrc=e,void this.el.sceneEl.systems.material.loadTexture(e,{src:e},t.bind(this))}this.material.map&&t(null)},regenerateMesh:function(){function t(t,e,i){a[3*t]=e,a[3*t+1]=i}function e(t,e,i){r[2*t]=e,r[2*t+1]=i}var i=this.data,a=this.geometry.attributes.position.array,r=this.geometry.attributes.uv.array,o=this.material.map.image;if(o){var n={left:i.left/o.width,right:i.right/o.width,top:i.top/o.height,bottom:i.bottom/o.height};e(1,n.left,1),e(2,n.right,1),e(4,0,n.bottom),e(5,n.left,n.bottom),e(6,n.right,n.bottom),e(7,1,n.bottom),e(8,0,n.top),e(9,n.left,n.top),e(10,n.right,n.top),e(11,1,n.top),e(13,n.left,0),e(14,n.right,0);var s=i.width/2,l=i.height/2,d=-s+i.padding,h=s-i.padding,u=l-i.padding,p=-l+i.padding;t(0,-s,l),t(1,d,l),t(2,h,l),t(3,s,l),t(4,-s,u),t(5,d,u),t(6,h,u),t(7,s,u),t(8,-s,p),t(9,d,p),t(10,h,p),t(11,s,p),t(13,d,-l),t(14,h,-l),t(12,-s,-l),t(15,s,-l),this.geometry.attributes.position.needsUpdate=!0,this.geometry.attributes.uv.needsUpdate=!0}},update:function(t){var e=this.data;this.material.color.setStyle(e.color),this.material.opacity=e.opacity,this.material.transparent=e.transparent,this.material.wireframe=e.debug,this.material.side=i(e.side);var a=AFRAME.utils.diff(e,t);"src"in a?this.updateMap():("width"in a||"height"in a||"padding"in a||"left"in a||"top"in a||"bottom"in a||"right"in a)&&this.regenerateMesh()},remove:function(){},pause:function(){},play:function(){}})}]);
+!function(t){function e(a){if(i[a])return i[a].exports;var r=i[a]={exports:{},id:a,loaded:!1};return t[a].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){if(i(1),"undefined"==typeof AFRAME)throw new Error("Component attempted to register before AFRAME was available.");AFRAME.registerComponent("tooltip",{schema:{text:{default:""},end:{type:"vec3"},src:{default:""},rotation:{type:"vec3"},width:{default:1,min:0},height:{default:1,min:0},lineColor:{default:"#fff",type:"color"},lineHorizontalAlign:{default:"left",oneOf:["left","right","center"]},lineVerticalAlign:{default:"center",oneOf:["top","bottom","center"]},opacity:{default:1,min:0,max:1},targetPosition:{type:"vec3",if:{targetType:["position"]}}},init:function(){var t=this.el,e=this.data,i=this.quad=document.createElement("a-entity"),a=this;i.addEventListener("loaded",function(){a.updateTooltip()}),i.setAttribute("slice9",{width:e.width,height:e.height,left:20,right:43,top:20,bottom:43,padding:.005,src:e.src}),i.setAttribute("rotation",e.rotation),i.setAttribute("text",{width:.25,color:"#fff",value:e.text,align:"center"}),t.appendChild(i);var r=this.material=new THREE.LineBasicMaterial({color:e.lineColor,opacity:e.opacity,transparent:e.opacity<1}),o=this.geometry=new THREE.BufferGeometry;o.addAttribute("position",new THREE.BufferAttribute(new Float32Array(6),3)),this.line=new THREE.Line(o,r),this.el.setObject3D("line",this.line),this.el.addEventListener("componentchanged",function(t){a.updateTooltip()}),this.updateTooltip()},updateTooltip:function(){var t=new THREE.Vector3,e=new THREE.Vector3,i=new THREE.Vector3;return function(){var a=this.data;t.copy(this.el.getAttribute("position")),e.copy(a.targetPosition);var r=e.sub(t),a=this.data,o={top:a.height/2,bottom:-a.height/2,center:0},n={left:-a.width/2,right:a.width/2,center:0},s=o[a.lineVerticalAlign],l=n[a.lineHorizontalAlign];this.quad.setAttribute("slice9",{opacity:a.opacity}),this.quad.setAttribute("text",{opacity:a.opacity}),this.quad.object3D.updateMatrix(),i.set(l,s,0),i.applyMatrix4(this.quad.object3D.matrix);var d=this.geometry.attributes.position.array;d[0]=i.x,d[1]=i.y,d[2]=i.z,d[3]=r.x,d[4]=r.y,d[5]=r.z,this.geometry.attributes.position.needsUpdate=!0,this.material.opacity=a.opacity,this.material.transparent=a.opacity<1,this.material.color.setStyle(a.color)}}(),update:function(){this.updateTooltip()}})},function(t,e){function i(t){switch(t){case"back":return THREE.BackSide;case"double":return THREE.DoubleSide;default:return THREE.FrontSide}}if("undefined"==typeof AFRAME)throw new Error("Component attempted to register before AFRAME was available.");AFRAME.registerComponent("slice9",{schema:{width:{default:1,min:0},height:{default:1,min:0},left:{default:0,min:0},right:{default:0,min:0},bottom:{default:0,min:0},top:{default:0,min:0},side:{default:"front",oneOf:["front","back","double"]},padding:{default:.1,min:.01},color:{type:"color",default:"#fff"},opacity:{default:1,min:0,max:1},transparent:{default:!0},debug:{default:!1},src:{type:"map"}},multiple:!1,init:function(){var t=this.data,e=this.material=new THREE.MeshBasicMaterial({color:t.color,opacity:t.opacity,transparent:t.transparent,wireframe:t.debug}),i=this.geometry=new THREE.PlaneBufferGeometry(t.width,t.height,3,3);new THREE.TextureLoader;this.plane=new THREE.Mesh(i,e),this.el.setObject3D("mesh",this.plane),this.textureSrc=null},updateMap:function(){function t(t){this.material.map=t,this.material.needsUpdate=!0,this.regenerateMesh()}var e=this.data.src;if(e){if(e===this.textureSrc)return;return this.textureSrc=e,void this.el.sceneEl.systems.material.loadTexture(e,{src:e},t.bind(this))}this.material.map&&t(null)},regenerateMesh:function(){function t(t,e,i){a[3*t]=e,a[3*t+1]=i}function e(t,e,i){r[2*t]=e,r[2*t+1]=i}var i=this.data,a=this.geometry.attributes.position.array,r=this.geometry.attributes.uv.array,o=this.material.map.image;if(o){var n={left:i.left/o.width,right:i.right/o.width,top:i.top/o.height,bottom:i.bottom/o.height};e(1,n.left,1),e(2,n.right,1),e(4,0,n.bottom),e(5,n.left,n.bottom),e(6,n.right,n.bottom),e(7,1,n.bottom),e(8,0,n.top),e(9,n.left,n.top),e(10,n.right,n.top),e(11,1,n.top),e(13,n.left,0),e(14,n.right,0);var s=i.width/2,l=i.height/2,d=-s+i.padding,h=s-i.padding,p=l-i.padding,u=-l+i.padding;t(0,-s,l),t(1,d,l),t(2,h,l),t(3,s,l),t(4,-s,p),t(5,d,p),t(6,h,p),t(7,s,p),t(8,-s,u),t(9,d,u),t(10,h,u),t(11,s,u),t(13,d,-l),t(14,h,-l),t(12,-s,-l),t(15,s,-l),this.geometry.attributes.position.needsUpdate=!0,this.geometry.attributes.uv.needsUpdate=!0}},update:function(t){var e=this.data;this.material.color.setStyle(e.color),this.material.opacity=e.opacity,this.material.transparent=e.transparent,this.material.wireframe=e.debug,this.material.side=i(e.side);var a=AFRAME.utils.diff(e,t);"src"in a?this.updateMap():("width"in a||"height"in a||"padding"in a||"left"in a||"top"in a||"bottom"in a||"right"in a)&&this.regenerateMesh()},remove:function(){},pause:function(){},play:function(){}})}]);

index.js

@@ -15,2 +15,3 @@ /* global AFRAME */
     end: {type: 'vec3'},
+    src: {default: ''},
     rotation: {type: 'vec3'},
@@ -22,2 +23,3 @@ width: {default: 1, min: 0},
     lineVerticalAlign: {default: 'center', oneOf: ['top', 'bottom', 'center']},
+    opacity: {default: 1, min: 0, max: 1},
 /*
@@ -43,3 +45,4 @@ targetType: {default: 'element', oneOf: ['element', 'position']},
     });
-    quad.setAttribute('slice9', {width: data.width, height: data.height, left: 20, right: 43, top: 20, bottom: 43, padding: 0.005, src: 'tooltip.png'});
+
+    quad.setAttribute('slice9', {width: data.width, height: data.height, left: 20, right: 43, top: 20, bottom: 43, padding: 0.005, src: data.src});
     quad.setAttribute('rotation', data.rotation);
@@ -50,3 +53,3 @@ quad.setAttribute('text', {width: 0.25, color: '#fff', value: data.text, align: 'center'});
     // Line
-    var material = this.material = new THREE.LineBasicMaterial({color: this.data.lineColor});
+    var material = this.material = new THREE.LineBasicMaterial({color: data.lineColor, opacity: data.opacity, transparent: data.opacity < 1});
     var geometry = this.geometry = new THREE.BufferGeometry();
@@ -89,2 +92,5 @@ geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(2 * 3), 3));
 
+       this.quad.setAttribute('slice9', {opacity: data.opacity});
+       this.quad.setAttribute('text', {opacity: data.opacity});
+
        // Update geometry
@@ -103,2 +109,5 @@ this.quad.object3D.updateMatrix();
        this.geometry.attributes.position.needsUpdate = true;
+
+       this.material.opacity = data.opacity;
+       this.material.transparent = data.opacity < 1;
        this.material.color.setStyle(data.color);
@@ -105,0 +114,0 @@ }

package.json

 {
   "name": "aframe-tooltip-component",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A Tooltip component for A-Frame.",
@@ -5,0 +5,0 @@ "main": "index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

217560

increased by0.65%

Number of package files

20

increased by5.26%

Lines of code

546

increased by4.8%

No dependency changes