Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

canvas-color-tracker

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

canvas-color-tracker - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

110

dist/canvas-color-tracker.js

@@ -1,80 +0,80 @@

// Version 1.0.0 canvas-color-tracker - https://github.com/vasturiano/canvas-color-tracker
// Version 1.0.1 canvas-color-tracker - https://github.com/vasturiano/canvas-color-tracker
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.ColorTracker = factory());
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.ColorTracker = factory());
}(this, (function () { 'use strict';
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var ENTROPY = 123; // Raise numbers to prevent collisions in lower indexes
var ENTROPY = 123; // Raise numbers to prevent collisions in lower indexes
var int2HexColor = function int2HexColor(num) {
return '#' + Math.min(num, Math.pow(2, 24)).toString(16).padStart(6, '0');
};
var rgb2Int = function rgb2Int(r, g, b) {
return (r << 16) + (g << 8) + b;
};
var int2HexColor = function int2HexColor(num) {
return '#' + Math.min(num, Math.pow(2, 24)).toString(16).padStart(6, '0');
};
var rgb2Int = function rgb2Int(r, g, b) {
return (r << 16) + (g << 8) + b;
};
var checksum = function checksum(n, csBits) {
return n * ENTROPY % Math.pow(2, csBits);
};
var checksum = function checksum(n, csBits) {
return n * ENTROPY % Math.pow(2, csBits);
};
var _class = function () {
function _class() {
var csBits = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 6;
var _class = function () {
function _class() {
var csBits = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 6;
_classCallCheck(this, _class);
_classCallCheck(this, _class);
this.csBits = csBits; // How many bits to reserve for checksum. Will eat away into the usable size of the registry.
this.registry = ['__reserved for background__']; // indexed objects for rgb lookup;
}
this.csBits = csBits; // How many bits to reserve for checksum. Will eat away into the usable size of the registry.
this.registry = ['__reserved for background__']; // indexed objects for rgb lookup;
}
_createClass(_class, [{
key: 'register',
value: function register(obj) {
if (this.registry.length >= Math.pow(2, 24 - this.csBits)) {
// color has 24 bits (-checksum)
return null; // Registry is full
}
_createClass(_class, [{
key: 'register',
value: function register(obj) {
if (this.registry.length >= Math.pow(2, 24 - this.csBits)) {
// color has 24 bits (-checksum)
return null; // Registry is full
}
var idx = this.registry.length;
var cs = checksum(idx, this.csBits);
var idx = this.registry.length;
var cs = checksum(idx, this.csBits);
var color = int2HexColor(idx + (cs << 24 - this.csBits));
var color = int2HexColor(idx + (cs << 24 - this.csBits));
this.registry.push(obj);
return color;
}
}, {
key: 'lookup',
value: function lookup(_ref) {
var _ref2 = _slicedToArray(_ref, 3),
r = _ref2[0],
g = _ref2[1],
b = _ref2[2];
this.registry.push(obj);
return color;
}
}, {
key: 'lookup',
value: function lookup(_ref) {
var _ref2 = _slicedToArray(_ref, 3),
r = _ref2[0],
g = _ref2[1],
b = _ref2[2];
var n = rgb2Int(r, g, b);
var n = rgb2Int(r, g, b);
if (!n) return null; // 0 index is reserved for background
if (!n) return null; // 0 index is reserved for background
var idx = n & Math.pow(2, 24 - this.csBits) - 1; // registry index
var cs = n >> 24 - this.csBits & Math.pow(2, this.csBits) - 1; // extract bits reserved for checksum
var idx = n & Math.pow(2, 24 - this.csBits) - 1; // registry index
var cs = n >> 24 - this.csBits & Math.pow(2, this.csBits) - 1; // extract bits reserved for checksum
if (checksum(idx, this.csBits) !== cs || idx >= this.registry.length) return null; // failed checksum or registry out of bounds
if (checksum(idx, this.csBits) !== cs || idx >= this.registry.length) return null; // failed checksum or registry out of bounds
return this.registry[idx];
}
}]);
return this.registry[idx];
}
}]);
return _class;
}();
return _class;
}();
return _class;
})));
//# sourceMappingURL=canvas-color-tracker.js.map

4

dist/canvas-color-tracker.min.js

@@ -1,2 +0,2 @@

// Version 1.0.0 canvas-color-tracker - https://github.com/vasturiano/canvas-color-tracker
!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):t.ColorTracker=r()}(this,function(){"use strict";var t=function(){return function(t,r){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return function(t,r){var e=[],n=!0,i=!1,o=void 0;try{for(var s,u=t[Symbol.iterator]();!(n=(s=u.next()).done)&&(e.push(s.value),!r||e.length!==r);n=!0);}catch(t){i=!0,o=t}finally{try{!n&&u.return&&u.return()}finally{if(i)throw o}}return e}(t,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),r=function(){function t(t,r){for(var e=0;e<r.length;e++){var n=r[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(r,e,n){return e&&t(r.prototype,e),n&&t(r,n),r}}();var e=function(t,r){return 123*t%Math.pow(2,r)};return function(){function n(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:6;!function(t,r){if(!(t instanceof r))throw new TypeError("Cannot call a class as a function")}(this,n),this.csBits=t,this.registry=["__reserved for background__"]}return r(n,[{key:"register",value:function(t){if(this.registry.length>=Math.pow(2,24-this.csBits))return null;var r,n=this.registry.length,i=e(n,this.csBits),o=(r=n+(i<<24-this.csBits),"#"+Math.min(r,Math.pow(2,24)).toString(16).padStart(6,"0"));return this.registry.push(t),o}},{key:"lookup",value:function(r){var n=t(r,3),i=n[0],o=n[1],s=n[2],u=(i<<16)+(o<<8)+s;if(!u)return null;var a=u&Math.pow(2,24-this.csBits)-1,c=u>>24-this.csBits&Math.pow(2,this.csBits)-1;return e(a,this.csBits)!==c||a>=this.registry.length?null:this.registry[a]}}]),n}()});
// Version 1.0.1 canvas-color-tracker - https://github.com/vasturiano/canvas-color-tracker
!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):t.ColorTracker=r()}(this,function(){"use strict";var a=function(t,r){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return function(t,r){var e=[],n=!0,i=!1,o=void 0;try{for(var s,u=t[Symbol.iterator]();!(n=(s=u.next()).done)&&(e.push(s.value),!r||e.length!==r);n=!0);}catch(t){i=!0,o=t}finally{try{!n&&u.return&&u.return()}finally{if(i)throw o}}return e}(t,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")},t=function(){function n(t,r){for(var e=0;e<r.length;e++){var n=r[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(t,r,e){return r&&n(t.prototype,r),e&&n(t,e),t}}();var c=function(t,r){return 123*t%Math.pow(2,r)};return function(){function r(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:6;!function(t,r){if(!(t instanceof r))throw new TypeError("Cannot call a class as a function")}(this,r),this.csBits=t,this.registry=["__reserved for background__"]}return t(r,[{key:"register",value:function(t){if(this.registry.length>=Math.pow(2,24-this.csBits))return null;var r,e=this.registry.length,n=c(e,this.csBits),i=(r=e+(n<<24-this.csBits),"#"+Math.min(r,Math.pow(2,24)).toString(16).padStart(6,"0"));return this.registry.push(t),i}},{key:"lookup",value:function(t){var r=a(t,3),e=r[0],n=r[1],i=r[2],o=(e<<16)+(n<<8)+i;if(!o)return null;var s=o&Math.pow(2,24-this.csBits)-1,u=o>>24-this.csBits&Math.pow(2,this.csBits)-1;return c(s,this.csBits)!==u||s>=this.registry.length?null:this.registry[s]}}]),r}()});

15

package.json
{
"name": "canvas-color-tracker",
"version": "1.0.0",
"version": "1.0.1",
"description": "A utility to track objects on a canvas by unique px color",

@@ -28,3 +28,3 @@ "main": "dist/canvas-color-tracker.min.js",

"scripts": {
"build": "rm -rf dist && mkdir dist && rollup -c",
"build": "rimraf dist && mkdir dist && rollup -c",
"watch": "rollup -c -w",

@@ -36,9 +36,10 @@ "minify": "uglifyjs dist/canvas-color-tracker.js -o dist/canvas-color-tracker.min.js -c -m --comments '/Version/'",

"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-env": "^1.6.1",
"rollup": "^0.56.5",
"rollup-plugin-babel": "^3.0.3",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"rimraf": "^2.6.2",
"rollup": "^0.63.2",
"rollup-plugin-babel": "^3.0.7",
"rollup-watch": "^4.3.1",
"uglify-js": "3.3.11"
"uglify-js": "3.4.5"
}
}

2

README.md

@@ -8,3 +8,5 @@ # canvas-color-tracker

`canvas-color-tracker` provides a system for keeping track of objects in your canvas by indexing them by a unique color, which can be retrieved by determining the *1px* color that is directly under the mouse pointer.
This is generally done using a spare/shadow canvas which is not attached to the DOM, but is synchronyzed in terms of object positions with the main canvas. On this shadow canvas we render the objects filled with artificial unique colors that are keys to the object's data, so that by attaching *mousemove* events to the whole canvas we can determine which objects are being hovered on.
`canvas-color-tracker` is just the registry part of this process, which generates unique color keys per object and supports addition and retrieval of objects. It also includes a mechanism for validating the color keys using checksum encoding. This is necessary because of pixel antialiasing/smoothing on the boundary of canvas objects, leading into new color mutations which invalidate the object color key lookup.

@@ -11,0 +13,0 @@ 

.idea/misc.xml

Sorry, the diff of this file is not supported yet

.idea/workspace.xml

Sorry, the diff of this file is not supported yet

dist/canvas-color-tracker.js.map

Sorry, the diff of this file is not supported yet

yarn.lock

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc