pointer3000 - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "pointer3000",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "✨ A little utility that makes it easy to work with trig values calculated from the pointer's location relative to reference points",
@@ -5,0 +5,0 @@ "main": "pointergeometry.js",

pointer3k.js

@@ -11,3 +11,4 @@ /**
 (function() {
-  let keys, propsKeys, points, isConsole, propElems, initialPos, listener;
+  let keys, propsKeys, points, propElems;
+  let isConsole, initialPos, listener, update;
 
@@ -30,2 +31,5 @@ const defaults = {
       return window.Pointer3k.points[arg];
+    } else if (typeof arg == 'boolean') {
+      // we 'pause' value updating
+      update = arg;
     } else {
@@ -53,3 +57,5 @@ // If passed an object, then we initialise
       window.addEventListener(listener, function(event) {
-        register(event);
+        if (eval(update)) {
+          register(event);
+        }
       });
@@ -68,4 +74,4 @@ }
 
-      let cx = (points[key].cx == 'center' || !points[key].cx) ? defaults.points['pointA'].cx : points[key].cx;
-      let cy = (points[key].cy == 'center' || !points[key].cy) ? defaults.points['pointA'].cy : points[key].cy;
+      let cx = points[key].cx == 'center' ? defaults.points['pointA'].cx : points[key].cx;
+      let cy = points[key].cy == 'center' ? defaults.points['pointA'].cy : points[key].cy;
       let x = (event.pageX || 0) - cx;
@@ -75,3 +81,3 @@ let y = (event.pageY || 0) - cy;
       let deg = rad * (180 / Math.PI);
-      let hyp = Math.hypot(x, y);
+      let dist = Math.hypot(x, y);
 
@@ -85,3 +91,3 @@ point = {
         deg: deg,
-        hyp: hyp
+        dist: dist
       };
@@ -88,0 +94,0 @@

pointer3k.min.js

@@ -1,1 +0,1 @@
-"use strict";(function(){let n,t,e,o,i,s,c;const d={points:{pointA:{cx:window.innerWidth/2,cy:window.innerHeight/2}}};window.Pointer3k=function(t){if(typeof t==="string"||Number.isInteger(t)){return window.Pointer3k.points[t]}else{t=t||d;n=Object.keys(t.points);e=t.points||{};o=t.console;s=t.initialPos||{pageX:window.innerWidth/2,pageY:window.innerHeight/2};c=t.listener||"mousemove";if(o){p();r(n)}p(s);window.addEventListener(c,function(n){p(n)})}};function p(o){o=o||{};for(let i=0;i<n.length;i++){const s=n[i];let c;let p=e[s].cx=="center"||!e[s].cx?d.points["pointA"].cx:e[s].cx;let r=e[s].cy=="center"||!e[s].cy?d.points["pointA"].cy:e[s].cy;let a=(o.pageX||0)-p;let y=(o.pageY||0)-r;let g=Math.atan2(y,a);let h=g*(180/Math.PI);let u=Math.hypot(a,y);c={cx:p,cy:r,x:a,y:y,rad:g,deg:h,hyp:u};t=Object.keys(c);e[s]=c;l(c,i)}window.Pointer3k.points=e}function r(n){if(o){const e=document.createElement("div");if(!document.querySelector(".js-pgProps")){e.classList.add("js-pgProps");e.style.position="fixed";e.style.background="rgba(0, 0, 0, 0.7)";e.style.color="white";e.style.fontSize="9px";e.style.fontFamily="Arial";e.style.width=140+"px";e.style.top=0;e.style.right=0;document.body.appendChild(e)}if(document.querySelectorAll(".js-pgPoint").length<n.length){for(var t=0;t<n.length;t++){const o=n[t];const i=Object.keys(window.Pointer3k.points[o]);const s=document.createElement("div");const c=document.createElement("label");s.classList.add("js-pgPoint");c.innerHTML=o;c.style.padding="2px 5px";s.appendChild(c);for(let n=0;n<i.length;n++){const t=document.createElement("div");const e=i[n];t.classList.add("js-pgProp");t.style.padding="2px 5px 2px 15px";t.innerHTML=e+":"+window.Pointer3k.points[e];s.appendChild(t)}e.appendChild(s)}}i=document.querySelectorAll(".js-pgProp")}}function l(n,e){if(i){for(var o=0;o<t.length;o++){const s=e*t.length+o;const c=i[s];const d=t[o];const p=n[d];c.innerHTML=d+":"+p}}}})();
+"use strict";(function(){let keys,propsKeys,points,propElems;let isConsole,initialPos,listener,update;const defaults={points:{pointA:{cx:window.innerWidth/2,cy:window.innerHeight/2}}};window.Pointer3k=function(arg){if(typeof arg==="string"||Number.isInteger(arg)){return window.Pointer3k.points[arg]}else if(typeof arg=="boolean"){update=arg}else{arg=arg||defaults;keys=Object.keys(arg.points);points=arg.points||{};isConsole=arg.console;initialPos=arg.initialPos||{pageX:window.innerWidth/2,pageY:window.innerHeight/2};listener=arg.listener||"mousemove";if(isConsole){register();initializeConsole(keys)}register(initialPos);window.addEventListener(listener,function(event){if(eval(update)){register(event)}})}};function register(e){e=e||{};for(let t=0;t<keys.length;t++){const n=keys[t];let o;let i=points[n].cx=="center"?defaults.points["pointA"].cx:points[n].cx;let s=points[n].cy=="center"?defaults.points["pointA"].cy:points[n].cy;let r=(e.pageX||0)-i;let p=(e.pageY||0)-s;let l=Math.atan2(p,r);let a=l*(180/Math.PI);let d=Math.hypot(r,p);o={cx:i,cy:s,x:r,y:p,rad:l,deg:a,dist:d};propsKeys=Object.keys(o);points[n]=o;updateConsole(o,t)}window.Pointer3k.points=points}function initializeConsole(e){if(isConsole){const n=document.createElement("div");if(!document.querySelector(".js-pgProps")){n.classList.add("js-pgProps");n.style.position="fixed";n.style.background="rgba(0, 0, 0, 0.7)";n.style.color="white";n.style.fontSize="9px";n.style.fontFamily="Arial";n.style.width=140+"px";n.style.top=0;n.style.right=0;document.body.appendChild(n)}if(document.querySelectorAll(".js-pgPoint").length<e.length){for(var t=0;t<e.length;t++){const o=e[t];const i=Object.keys(window.Pointer3k.points[o]);const s=document.createElement("div");const r=document.createElement("label");s.classList.add("js-pgPoint");r.innerHTML=o;r.style.padding="2px 5px";s.appendChild(r);for(let e=0;e<i.length;e++){const t=document.createElement("div");const n=i[e];t.classList.add("js-pgProp");t.style.padding="2px 5px 2px 15px";t.innerHTML=n+":"+window.Pointer3k.points[n];s.appendChild(t)}n.appendChild(s)}}propElems=document.querySelectorAll(".js-pgProp")}}function updateConsole(e,t){if(propElems){for(var n=0;n<propsKeys.length;n++){const o=t*propsKeys.length+n;const i=propElems[o];const s=propsKeys[n];const r=e[s];i.innerHTML=s+":"+r}}}})();

README.md

@@ -7,3 +7,3 @@ # Pointer3000
 # Why?
-I experiment a lot with interactive graphics and interaction in general, and have found that I often have to calculate `this` and `that`, particularly the distance and angle from (a) specific point(s). I decided to make this little utility so I can just plop it in and start trying things out.
+I experiment a lot with interactive graphics and interaction in general, and have found that I often have to calculate `this` and `that`, particularly the distance and angle from (a) specific point(s). I decided to make this little utility so I can just plop it in and start trying things out. This is meant to be used in compositions with just regular DOM elements– the constraint of what can be done with just a 'regular' page is a great source of possibility.
 
@@ -33,3 +33,3 @@ While the output is very 'basic', I found that what can be done with them when used to manipulate `things` are endless. I hope you find this stirring your creativity and imagination. Lots of possibilities!
     deg: 43.42633594589745, // (degrees),
-    hyp: 426.8480408763756 // (distance from reference)
+    dist: 426.8480408763756 // (distance from reference)
     rad: 0.7579325443330766, // (radians)
@@ -70,3 +70,3 @@ x: 187 // (positionX),
   // Get a specific point's value
-  var distanceFromReference = Pointer3k('aNicelyNamedPoint').hyp;
+  var distanceFromReference = Pointer3k('aNicelyNamedPoint').dist;
   var angleInDegrees = Pointer3k('aNicelyNamedPoint').deg;
@@ -76,2 +76,18 @@ // ... so on
 
+If you want to pause updating values (basically just having an empty mousemove listener, performance gains or what have you) e.g. you only want values to be updated if a button has been clicked, then you use:
+
+```js
+  // passing true or false as argument will enable/disable the listener
+  Pointer3k(boolean);
+
+  // Sample usage, toggle pointer update
+  var updatePointer = false;
+
+  button.addEventListener(function() {
+    updatePointer = !updatePointer;
+
+    Pointer3k(updatePointer);
+  });
+```
+
 You can also access `all` points via `Pointer3k.points`.
@@ -83,2 +99,3 @@
 - If manipulating DOM elements, it is still best to use transforms as they are way more performant than manipulating e.g. width and height.
+- If you are going to be doing something relatively complex graphic wise then I think you should be looking at canvas or other drawing libraries. Those would be more performant, and have more math methods at your disposal. e.g. paperJS, raphael, svg.js
 - Having `console: true` or having inspector open (as you already know) will reduce performance as it will be updating values, recording timelines, highlighting updated DOM elements what have you.
@@ -95,3 +112,3 @@
 
-Please do. If you have any comments or suggestions, i'd love to hear them. This utility is completely free but if you have used it for something cool please do let me know, let me see what you've made! Drop me a line at [e-mail] or via @the_ezekiel on Twitter!
+Please do. If you have any comments or suggestions, i'd love to hear them. This utility is completely free but if you have used it for something cool please do let me know, let me see what you've made! Drop me a line at [e-mail] or via [@the_ezekiel](http://twitter.com/the_ezekiel) or [Share this](https://twitter.com/home?status=%E2%86%98%E2%86%98%20Supercharged%20pointer%20interactions%20%E2%80%93%20POINTER3000%20%E2%86%99%E2%86%99%20http%3A//ezekielaquino.com/Pointer3000) on Twitter!
 
@@ -98,0 +115,0 @@ P.S. Follow me on twitter!

No alert changes

Improved metrics

Total package byte prevSize

13678

increased by13.89%

Lines of code

131

increased by4.8%

Number of lines in readme file

114

increased by17.53%

No dependency changes