From 8cde2e9581240bfbc404888966eec31d12fd4f2c Mon Sep 17 00:00:00 2001 From: Paul Demers Date: Fri, 12 Sep 2025 19:19:05 -0400 Subject: [PATCH] Split left/right images, and added top/bottom mirroring option Enabled the left and right side of the box to use different images, and added a checkbox to toggle if the bototm of the box should use the top image or be blank. --- app.jsx | 59 +++++++++++++++++++++++++++++++++++++++++++++--------- tuckbox.js | 24 ++++++++++++++-------- 2 files changed, 65 insertions(+), 18 deletions(-) diff --git a/app.jsx b/app.jsx index a954a12..7140a2f 100644 --- a/app.jsx +++ b/app.jsx @@ -6,12 +6,14 @@ Window = React.createClass({ images = { boxFront: params.imageBoxFront, boxBack: params.imageBoxBack, - boxSide: params.imageBoxSide, + boxSideLeft: params.imageBoxSideLeft, + boxSideRight: params.imageBoxSideRight, boxTop: params.imageBoxTop }; return makeBox(params.paper, params.height, params.width, params.depth, - params.inside, params.color, params.title, images); + params.inside, params.color, params.title, images, + params.mirrorBoxTopOnBottom); }, generatePreview: function(params) { this.setState({pdfBlob: this.generatePdf(params).buildPdfUriString()}); @@ -64,8 +66,10 @@ Configurator = React.createClass({ title: this.state.title, imageBoxFront: this.state.imageBoxFront, imageBoxBack: this.state.imageBoxBack, - imageBoxSide: this.state.imageBoxSide, - imageBoxTop: this.state.imageBoxTop + imageBoxSideLeft: this.state.imageBoxSideLeft, + imageBoxSideRight: this.state.imageBoxSideRight, + imageBoxTop: this.state.imageBoxTop, + mirrorBoxTopOnBottom: this.state.mirrorBoxTopOnBottom }; var hasInvalid = false; props.forEach(function(prop) { @@ -169,18 +173,32 @@ Configurator = React.createClass({ this.changeState('imageBoxFront', null); } }, - imageBoxSideChange: function(e) { + imageBoxSideLeftChange: function(e) { if (e.target.files) { var file = e.target.files[0]; var reader = new FileReader(); var _this = this; reader.onload = function(e) { var datauri = e.target.result; - _this.changeState('imageBoxSide', datauri); + _this.changeState('imageBoxSideLeft', datauri); }; reader.readAsDataURL(file); } else { - this.changeState('imageBoxSide', null); + this.changeState('imageBoxSideLeft', null); + } + }, + imageBoxSideRightChange: function(e) { + if (e.target.files) { + var file = e.target.files[0]; + var reader = new FileReader(); + var _this = this; + reader.onload = function(e) { + var datauri = e.target.result; + _this.changeState('imageBoxSideRight', datauri); + }; + reader.readAsDataURL(file); + } else { + this.changeState('imageBoxSideRight', null); } }, imageBoxTopChange: function(e) { @@ -197,6 +215,9 @@ Configurator = React.createClass({ this.changeState('imageBoxTop', null); } }, + mirrorBoxTopOnBottomChange: function(e) { + this.changeState('mirrorBoxTopOnBottom', e.target.checked); + }, render: function() { return (
@@ -306,11 +327,20 @@ Configurator = React.createClass({
- +
+
+
+
+ +
+
@@ -323,6 +353,15 @@ Configurator = React.createClass({ /> +
+ + +
+ +
+
diff --git a/tuckbox.js b/tuckbox.js index ea14726..8c4c094 100644 --- a/tuckbox.js +++ b/tuckbox.js @@ -275,7 +275,7 @@ function drawDrawer(_drawer, _width, _length, _height, _gap, _fill) { d.trap(d.p(-x_offset, -y_offset), height, flap_length, 1/16, 'up', fill); } -function drawBox(_drawer, _width, _length, _height, _fill, _title, _imgs) { +function drawBox(_drawer, _width, _length, _height, _fill, _title, _imgs, _mirrorBoxTopOnBottom) { var d = _drawer; var depths = { side_flap: _height * 0.9, @@ -299,8 +299,10 @@ function drawBox(_drawer, _width, _length, _height, _fill, _title, _imgs) { } var frontImage = _imgs.boxFront; var backImage = _imgs.boxBack; - var sideImage = _imgs.boxSide; + var leftSideImage = _imgs.boxSideLeft; + var rightSideImage = _imgs.boxSideRight; var topImage = _imgs.boxTop; + var mirrorBoxTopOnBottom = _mirrorBoxTopOnBottom; var totalLength = size.main.x * 2 + size.side_panel.x * 2 + size.side_flap.x; var currCenterX = size.main.x * 1.5 + size.side_panel.x; var totalHeight = size.main.y + size.bt_flap.y * 2 + size.top_top_flap.y; @@ -421,14 +423,19 @@ function drawBox(_drawer, _width, _length, _height, _fill, _title, _imgs) { //TO DO - display bottom image in flap so visible behind thumb hole } - if (sideImage) { - imagePanel(sideImage, panels.left.loc, panels.left.size, 0); - imagePanel(sideImage, panels.right.loc, panels.right.size, 0); + if (leftSideImage) { + imagePanel(leftSideImage, panels.left.loc, panels.left.size, 0); + } + + if (rightSideImage) { + imagePanel(rightSideImage, panels.right.loc, panels.right.size, 0); } if (topImage) { imagePanel(topImage, flaps.top_top.loc, flaps.top_top.size, 0); - imagePanel(topImage, flaps.top_bot.loc, flaps.top_bot.size, 0); + + if(mirrorBoxTopOnBottom) + imagePanel(topImage, flaps.top_bot.loc, flaps.top_bot.size, 0); } _.values(panels).forEach(drawPanel); _.values(flaps).forEach(drawFlap); @@ -474,7 +481,8 @@ function makeBox( inside, fillColor, title, - images + images, + mirrorBoxTopOnBottom ) { images = images || {}; //paper = paper === 'a4' ? 'a4' : 'letter'; @@ -500,7 +508,7 @@ function makeBox( cardHeight += 1 / 16; boxDepth += 1 / 16; } - drawBox(drawer, cardWidth, cardHeight, boxDepth, fillColor, title, images); + drawBox(drawer, cardWidth, cardHeight, boxDepth, fillColor, title, images, mirrorBoxTopOnBottom); return drawer; }