From 5dd00cecfc53334867971cc58dfe588a5cf91eee Mon Sep 17 00:00:00 2001 From: Keith R Morrison Date: Thu, 28 May 2020 08:59:33 -0700 Subject: [PATCH 1/4] Add getIntersectionLayer( x,y ) to Viewport Add getIntersectionLayer( x,y ) to Viewport interface to find the layer index of an intersection. I need this functionality, thanks for a great lib to make my life easy! --- src/concrete.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/concrete.js b/src/concrete.js index 19eac89..3d12c56 100644 --- a/src/concrete.js +++ b/src/concrete.js @@ -85,6 +85,26 @@ Concrete.Viewport.prototype = { return -1; }, + /** + * gets layer index associated to coordinate. This can be used for mouse interactivity. + * @param {Number} x + * @param {Number} y + * @returns {Integer} integer value of layer - returns -1 if no pixel is there + */ + getIntersectionLayer: function(x, y) { + var layers = this.layers, + len = layers.length, + n, layer, key; + + for (n=len-1; n>=0; n--) { + layer = layers[n]; + key = layer.hit.getIntersection(x, y); + if (key >= 0) { + return n; + } + } + return -1; + }, /** * get viewport index from all Concrete viewports * @returns {Integer} From 34f25e48411497f5cb4859a766f878f55b4d53eb Mon Sep 17 00:00:00 2001 From: Keith R Morrison Date: Fri, 27 Aug 2021 05:11:02 -0700 Subject: [PATCH 2/4] Add Cover Fit option --- src/concrete.js | 88 +++++++++++++++++++++++++++++++++++++------------ 1 file changed, 67 insertions(+), 21 deletions(-) diff --git a/src/concrete.js b/src/concrete.js index 3d12c56..8a644dc 100644 --- a/src/concrete.js +++ b/src/concrete.js @@ -20,10 +20,16 @@ Concrete.Viewport = function(config) { config = {}; } - this.container = config.container; - this.layers = []; - this.id = idCounter++; - this.scene = new Concrete.Scene(); + this.container = config.container; + this.layers = []; + this.id = idCounter++; + this.scene = new Concrete.Scene(); + this.cover = config.hasOwnProperty('cover') ? config.cover : false; + this.coverCenterX = config.hasOwnProperty('coverCenterX') ? config.coverCenterX : 0.5; + this.coverCenterY = config.hasOwnProperty('coverCenterY') ? config.coverCenterY : 0.5; + this.offsetX = 0; + this.offsetY = 0; + this.scale = 1; this.setSize(config.width || 0, config.height || 0); @@ -32,7 +38,15 @@ Concrete.Viewport = function(config) { config.container.innerHTML = ''; config.container.appendChild(this.scene.canvas); - Concrete.viewports.push(this); + Concrete.viewports.push(this); + + // resize handler for cover fit + if (this.cover) { + this.coverFit(); + this.scene.canvas.style.position = "absolute"; + config.container.style.overflow = "hidden"; + window.addEventListener('resize', ()=>{ this.coverFit() } ); + } }; Concrete.Viewport.prototype = { @@ -58,22 +72,51 @@ Concrete.Viewport.prototype = { this.height = height; this.scene.setSize(width, height); - this.layers.forEach(function(layer) { - layer.setSize(width, height); - }); - - return this; - }, - /** - * get key associated to coordinate. This can be used for mouse interactivity. - * @param {Number} x - * @param {Number} y - * @returns {Integer} integer - returns -1 if no pixel is there - */ - getIntersection: function(x, y) { - var layers = this.layers, - len = layers.length, - n, layer, key; + this.layers.forEach(function(layer) { + layer.setSize(width, height); + }); + + return this; + }, + coverFit: function(){ + if ( this.cover ) { + let boundingRect = this.container.getBoundingClientRect(); + let imgRat = this.width / this.height; + let divRat = boundingRect.width / boundingRect.height; + + if (imgRat < divRat) { + this.container.firstChild.style.width = "100%"; + this.container.firstChild.style.height = "auto"; + this.scale = (boundingRect.width / this.width); + this.offsetX = 0; + this.offsetY = Math.floor((boundingRect.height - (this.height * this.scale)) * this.coverCenterY); + this.container.firstChild.style.left = "0"; + this.container.firstChild.style.top = this.offsetY.toString() + "px"; + } else { + this.container.firstChild.style.width = "auto"; + this.container.firstChild.style.height = "100%"; + this.scale = (boundingRect.height / this.height); + this.offsetY = 0; + this.offsetX = Math.floor((boundingRect.width - (this.width * this.scale)) * this.coverCenterX); + this.container.firstChild.style.top = "0"; + this.container.firstChild.style.left = this.offsetX.toString() + "px"; + } + }else{ + this.container.firstChild.style.width = "100%"; + this.container.firstChild.style.height = "auto"; + } + //console.log("coverfit:",this.coverCenterX) + }, + /** + * get key associated to coordinate. This can be used for mouse interactivity. + * @param {Number} x + * @param {Number} y + * @returns {Integer} integer - returns -1 if no pixel is there + */ + getIntersection: function(x, y) { + var layers = this.layers, + len = layers.length, + n, layer, key; for (n=len-1; n>=0; n--) { layer = layers[n]; @@ -146,6 +189,9 @@ Concrete.Viewport.prototype = { var scene = this.scene; scene.clear(); + if ( this.cover ) { + this.coverFit(); + } this.layers.forEach(function(layer) { if (layer.visible) { From 2ff20bc9f417085b25386acbf7084734f3566553 Mon Sep 17 00:00:00 2001 From: Keith R Morrison Date: Fri, 27 Aug 2021 05:20:22 -0700 Subject: [PATCH 3/4] Added Parameter Documentation --- src/concrete.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/concrete.js b/src/concrete.js index 246b84d..018208a 100644 --- a/src/concrete.js +++ b/src/concrete.js @@ -14,7 +14,11 @@ Concrete.viewports = []; * @param {Object} config * @param {Integer} config.width - viewport width in pixels * @param {Integer} config.height - viewport height in pixels + * @param {Boolean} config.cover - set enabled/disabled cover feature, default disabled + * @param {Number} config.coverCenterX - Number 0.0 through 1.0 defining the center point of the fit on the X axis + * @param {Number} config.coverCenterY - Number 0.0 through 1.0 defining the center point of the fit on the Y axis */ + Concrete.Viewport = function(config) { if (!config) { config = {}; From 57feca484c3ae314cfcd16603fef047331c2b623 Mon Sep 17 00:00:00 2001 From: Keith R Morrison Date: Fri, 27 Aug 2021 15:18:51 -0700 Subject: [PATCH 4/4] Update .gitignore ignore .idea folder from phpStorm --- .gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 46546a1..8f65e35 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ .DS_Store /node_modules web/img/downloads -web/img/PS \ No newline at end of file +web/img/PS +.idea