photowall/image-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove 3d toggle button in canvas product page (#12)

Browse Source 
* Max changes from f0ecf9dd4c7503c1562fcadb54ce61873b1f7c6f in photowall repo

* Erik's changes from 50af018a07dcea44d755bcc23e84537db90f321a in photowall repo

* Update image-editor.js in README.md

* Prettify

* Max changes from f0ecf9dd4c7503c1562fcadb54ce61873b1f7c6f in photowall repo in output

* Erik's changes from 50af018a07dcea44d755bcc23e84537db90f321a in photowall repo in output

* Remove "Show 3d image" button and functionality

* Output image-editor.js file

* Rename the outputted file from image-editor.js to generated-image-editor.js

* Output again the file that time as generated-image-editor.js

* Update README.md

* Remove comma / lint
This commit is contained in:
Balthazar Berling Kelpe
2026-03-25 10:43:59 +01:00
committed by GitHub
parent 96b4064986
commit 37fd36275a
14 changed files with 242 additions and 495 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/image-editor.js → dist/generated-image-editor.js
Vendored
+133 -259
View File
@@ -2,116 +2,6 @@
'use strict';
/* globals fabric */
/**
* Handles 3d image of canvas products.
* @param {canvas} canvas
*/
function ThreeDHandler(canvas) {
var _overlay = new fabric.Group();
var _image;
function init() {
_overlay
.set({
visible: false,
left: 0
})
.addWithUpdate(new fabric.Rect({
// Width is made bigger as this works better with resizing the editor
width: canvas.width * 2,
height: canvas.height,
top: 0,
left: 0,
fill: canvas.backgroundColor,
}));
canvas.add(_overlay);
}
init();
/**
* Disables the 3d image by removing visibility
* @return {ThreeDHandler}
*/
this.disable = function () {
_overlay.setVisible(false).canvas.resize();
return this;
};
/**
* Enables the 3d image by setting the width and visibility of the overlay and moving elements which
* needs to be visible to the front.
* @return {ThreeDHandler}
*/
this.enable = function () {
_overlay
.set({
width: canvas.width,
visible: true
}).bringToFront();
canvas.getButtonMenu().bringToFront();
canvas.renderAll();
return this;
};
/**
* Checks if 3d mode is enabled/visible.
* @returns {boolean}
*/
this.isEnabled = function () {
return _overlay.visible;
};
/**
* Refreshes the image. This is mostly done upon resize of the window
*/
this.refreshImage = function() {
_overlay.set({
width: canvas.width,
});
this.applyImage();
};
/**
* (Re)adds the new/existing image with new configuration to the overlay.
* @param {img}
*/
this.applyImage = function(img) {
img = img || _image;
_overlay
.remove(_image)
.add(_image = canvas.getResizedImage(img));
};
/**
* Sets the image and enables 3d mode.
* @param {img}
* @return {ThreeDHandler}
*/
this.setImage = function (img) {
img.set({
// Image should be about 20px lower than the center (because of the buttons)
top: 20,
originX: 'center',
originY: 'center',
});
this.applyImage(img);
return this.enable();
};
}
module.exports = ThreeDHandler;
},{}],2:[function(require,module,exports){
'use strict';
/* globals fabric */
/**
* ApertureHandler takes care of the bars around the image to show what area has been/will be cropped.
* @param {canvas} canvas
@@ -209,7 +99,7 @@ function ApertureHandler(canvas) {
module.exports = ApertureHandler;
},{}],3:[function(require,module,exports){
},{}],2:[function(require,module,exports){
'use strict';
var TextButton = require('./TextButton');
@@ -362,7 +252,7 @@ function ButtonMenu(canvas, settings) {
module.exports = ButtonMenu;
},{"./TextButton":14}],4:[function(require,module,exports){
},{"./TextButton":13}],3:[function(require,module,exports){
'use strict';
/* globals $, fabric */
@@ -372,10 +262,10 @@ var ApertureHandler = require('./ApertureHandler');
var ButtonMenu = require('./ButtonMenu');
var DragbarHandler = require('./DragbarHandler');
var Viewport = require('./Viewport');
var ThreeDHandler = require('./3dHandler');
var MirrorHandler = require('./MirrorHandler');
var ImageDataHandler = require('./ImageDataHandler');
// eslint-disable-next-line no-unused-vars
var $document = $(document);
/**
@@ -391,11 +281,11 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
// Allow touch scrolling on touch-devices larger than mobile screen sizes.
allowTouchScrolling: !util.isMobile(),
stateful: false,
backgroundColor: '#ededed',
backgroundColor: '#ffffff',
preserveObjectStacking: true,
selection: false,
width: dimensions.width,
height: dimensions.height
height: dimensions.height,
});
},
@@ -405,15 +295,13 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
return;
}
// hello
this.setHeight(args.height);
this.setWidth(args.width);
this.getButtonMenu().render();
if (this.get3dHandler().isEnabled()) {
this.get3dHandler().refreshImage();
} else {
this.refreshImage(this.getResizedImage(this.getImage()));
this.getViewport().reset();
}
this.refreshImage(this.getResizedImage(this.getImage()));
this.getViewport().reset();
this.sendToBack(this.getImage());
this.getImage().center();
this.getDragbars().resetPosition();
@@ -434,33 +322,6 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
return this;
},
get3dHandler: function () {
return this.__3dHandler ||
(this.__3dHandler = new ThreeDHandler(this));
},
/**
* @return {String}
*/
get3dUrl: function () {
var imageData = this.getImageData().getData();
var params = [
'h=400',
'canvas[edge]=' + imageData.edge,
'crop[w]=' + imageData.width,
'crop[h]=' + imageData.height,
'crop[x]=' + imageData.x,
'crop[y]=' + imageData.y,
'no-cache=1',
];
if (imageData.mirrored) {
params.push('mirror=1');
}
return this.getImage().__url.replace(/\?h=\d+$/, '?') + params.join('&');
},
getApertures: function () {
return this.__aperturehandler ||
(this.__aperturehandler = new ApertureHandler(this));
@@ -518,17 +379,6 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
return this.__buttonMenu;
},
/**
* Reloads the 3D view, if it is present
* @return {Canvas}
*/
refresh3dView: function () {
if (this.get3dHandler().isEnabled()) {
this.toggle3D(true);
}
return this;
},
/**
* @return {Canvas}
*/
@@ -562,8 +412,6 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
},
getResizedImage: function(img) {
// Calculate maxHeight and maxWidth of the 3d image
// and scale the image accoring to those values
var maxHeight = this.getHeight() - 100;
var maxWidth = this.getWidth() - 100;
@@ -572,32 +420,11 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
return img;
},
toggle3D: function (showAs3d) {
this.getButtonMenu().setButtonActive('toggle3d', showAs3d);
if (!showAs3d) {
return this.get3dHandler().disable();
}
$document.trigger('PIE:image-start-load');
fabric.Image.fromURL(encodeURI(this.get3dUrl()), function (img) {
if (!img._element) {
$document.trigger('PIE:image-error-load');
return;
}
this.get3dHandler().setImage(img);
$document.trigger('PIE:image-end-load');
}.bind(this));
},
});
module.exports = Canvas;
},{"./3dHandler":1,"./ApertureHandler":2,"./ButtonMenu":3,"./DragbarHandler":6,"./ImageDataHandler":10,"./MirrorHandler":12,"./Viewport":15,"./config":16,"./util":25}],5:[function(require,module,exports){
},{"./ApertureHandler":1,"./ButtonMenu":2,"./DragbarHandler":5,"./ImageDataHandler":9,"./MirrorHandler":11,"./Viewport":14,"./config":15,"./util":24}],4:[function(require,module,exports){
'use strict';
/* globals $, fabric */
@@ -748,7 +575,7 @@ var DragHandle = function (handler) {
module.exports = DragHandle;
},{"./config":16,"./util":25}],6:[function(require,module,exports){
},{"./config":15,"./util":24}],5:[function(require,module,exports){
'use strict';
/* globals $, fabric */
@@ -835,34 +662,42 @@ function DragbarHandler(canvas) {
this.init = function () {
this.clear();
var typeIsWallpaper = canvas.__type === 'wallpaper';
var image = canvas.getImage();
_dragbars.x = new fabric.Rect($.extend({}, config.dragBar, {
axis: 'x',
width: canvas.getImage().width * canvas.getImage().scaleY,
height: config.dragBar.size,
lockMovementY: true,
// Movement should also be disabled when the user is on wallpaper (repeating paterns)
lockMovementX: typeIsWallpaper,
selectable: true,
hoverCursor: typeIsWallpaper ? 'pointer' : 'ew-resize',
moveCursor: typeIsWallpaper ? 'pointer' : 'ew-resize',
}))
_dragbars.x = new fabric.Rect(
$.extend({}, config.dragBar, {
axis: 'x',
width: image.width * image.scaleY,
height: config.dragBar.size,
lockMovementY: true,
// Movement should also be disabled when the user is on wallpaper (repeating paterns)
lockMovementX: typeIsWallpaper,
selectable: true,
hoverCursor: typeIsWallpaper ? 'pointer' : 'ew-resize',
moveCursor: typeIsWallpaper ? 'pointer' : 'ew-resize',
})
)
.addTo(canvas)
.centerH().set({ top: canvas.height - 30 }).setCoords();
.centerH()
.set({ top: image.height + 10 })
.setCoords();
_dragbars.y = new fabric.Rect($.extend({}, config.dragBar, {
axis: 'y',
width: config.dragBar.size,
height: canvas.getImage().height * canvas.getImage().scaleY,
lockMovementX: true,
// Movement should also be disabled when the user is on wallpaper (repeating paterns)
lockMovementY: typeIsWallpaper,
selectable: true,
hoverCursor: typeIsWallpaper ? 'pointer': 'ns-resize',
moveCursor: typeIsWallpaper ? 'pointer': 'ns-resize',
}))
_dragbars.y = new fabric.Rect(
$.extend({}, config.dragBar, {
axis: 'y',
width: config.dragBar.size,
height: image.height * image.scaleY,
lockMovementX: true,
// Movement should also be disabled when the user is on wallpaper (repeating paterns)
lockMovementY: typeIsWallpaper,
selectable: true,
hoverCursor: typeIsWallpaper ? 'pointer' : 'ns-resize',
moveCursor: typeIsWallpaper ? 'pointer' : 'ns-resize',
})
)
.addTo(canvas)
.set({ left: canvas.width - 30 }).setCoords();
.set({ left: canvas.width - 30 })
.setCoords();
canvas.getImage().on('moving', this.sync);
@@ -881,7 +716,7 @@ function DragbarHandler(canvas) {
module.exports = DragbarHandler;
},{"./DragHandle":5,"./config":16}],7:[function(require,module,exports){
},{"./DragHandle":4,"./config":15}],6:[function(require,module,exports){
'use strict';
/* globals $ */
var util = require('./util');
@@ -958,7 +793,7 @@ function Draggable(img, boundingRect) {
module.exports = Draggable;
},{"./util":25}],8:[function(require,module,exports){
},{"./util":24}],7:[function(require,module,exports){
'use strict';
/* globals fabric */
@@ -1109,7 +944,7 @@ function FrameHandler(viewport) {
module.exports = FrameHandler;
},{"./config":16}],9:[function(require,module,exports){
},{"./config":15}],8:[function(require,module,exports){
'use strict';
/* globals fabric */
@@ -1190,7 +1025,7 @@ function GoreHandler(viewport) {
module.exports = GoreHandler;
},{}],10:[function(require,module,exports){
},{}],9:[function(require,module,exports){
'use strict';
/* globals $ */
@@ -1268,7 +1103,7 @@ function ImageDataHandler(img) {
module.exports = ImageDataHandler;
},{}],11:[function(require,module,exports){
},{}],10:[function(require,module,exports){
'use strict';
/* globals $, fabric */
@@ -1286,8 +1121,6 @@ function ImageEditor(canvasId, args) {
canvasFrameSize: 2, //cm
// Default texts on the buttons
texts: {
showThreeD: '3d',
hideThreeD: 'Flat',
showMurals: 'Show Murals Panel',
hideMurals: 'Hide Murals Panel',
showRulers: 'Show Ruler',
@@ -1322,10 +1155,6 @@ function ImageEditor(canvasId, args) {
// It might be better that this resides somewhere else, either in Canvas or
// during the initialization of the image editor.
if (_canvas.__type === 'canvas') {
_canvas.getButtonMenu()
.addItem('toggle3d', [_settings.texts.showThreeD, _settings.texts.hideThreeD], function () {
_canvas.toggle3D(this.isActive());
});
_canvas.set({
__canvasFrameType: _settings.canvasFrameType,
__canvasFrameSize: _settings.canvasFrameSize,
@@ -1403,6 +1232,8 @@ function ImageEditor(canvasId, args) {
_canvas.getApertures().setTransparent(false);
}
_canvas.getDragbars().resetPosition();
return this;
};
@@ -1472,7 +1303,7 @@ function ImageEditor(canvasId, args) {
module.exports = ImageEditor;
},{"./Canvas":4,"./util":25}],12:[function(require,module,exports){
},{"./Canvas":3,"./util":24}],11:[function(require,module,exports){
'use strict';
function MirrorHandler(img) {
@@ -1500,7 +1331,7 @@ function MirrorHandler(img) {
module.exports = MirrorHandler;
},{}],13:[function(require,module,exports){
},{}],12:[function(require,module,exports){
'use strict';
/* globals fabric */
@@ -1637,7 +1468,7 @@ function RulerHandler(viewport) {
module.exports = RulerHandler;
},{"./TextButton":14,"./config":16,"./util":25}],14:[function(require,module,exports){
},{"./TextButton":13,"./config":15,"./util":24}],13:[function(require,module,exports){
'use strict';
/* globals $, fabric */
@@ -1765,7 +1596,7 @@ TextButton.prototype.constructor = TextButton;
module.exports = TextButton;
},{"./config":16}],15:[function(require,module,exports){
},{"./config":15}],14:[function(require,module,exports){
'use strict';
/* globals $, fabric */
@@ -1779,7 +1610,23 @@ function Viewport(canvas) {
var _borderWidth = 2;
var _data = null;
var _rect;
var _baseImageScale = null; // Store the original image scale to avoid cumulative scaling
var self = this;
var viewportMargins = {
vertical: 200,
horizontal: 90,
};
/**
* Calculate available canvas dimensions after margins
* @return {Object} { width, height }
*/
function getAvailableCanvasDimensions() {
return {
width: canvas.width - viewportMargins.horizontal,
height: canvas.height - viewportMargins.vertical,
};
}
/**
* Render the diagonal lines from viewport to edge of the canvas
@@ -1911,7 +1758,44 @@ function Viewport(canvas) {
return this;
}
_data = util.calcCrop(canvas.getImage(), width, height, units);
var image = canvas.getImage();
// Store the base image scale on first call
if (_baseImageScale === null) {
_baseImageScale = {
x: image.scaleX,
y: image.scaleY,
};
}
// Reset image to base scale before calculating
image.scaleX = _baseImageScale.x;
image.scaleY = _baseImageScale.y;
image.setCoords();
// First, calculate viewport with base image scale
_data = util.calcCrop(image, width, height, units);
// Now calculate if we can scale up the image to better fill the canvas
var availableDimensions = getAvailableCanvasDimensions();
// Calculate how much we can scale the viewport to fit within available space
var scaleX = availableDimensions.width / _data.width;
var scaleY = availableDimensions.height / _data.height;
// Use the smaller scale to ensure the viewport fits within the canvas
var scaleFactor = Math.min(scaleX, scaleY);
// Apply scaling if needed (scale up to use more space, or scale down to fit)
if (Math.abs(scaleFactor - 1.0) > 0.01) {
// Apply the scale to the base scale (not multiplying current scale)
image.scaleX = _baseImageScale.x * scaleFactor;
image.scaleY = _baseImageScale.y * scaleFactor;
image.setCoords();
// Recalculate viewport with the new image scale
_data = util.calcCrop(image, width, height, units);
}
var cropData = canvas.getImageData().getCropData();
var isAspectTheSame = !!(cropData && !util.isAspectChanged(cropData.viewportWidth, cropData.viewportHeight, width, height));
@@ -1942,17 +1826,7 @@ function Viewport(canvas) {
*/
this.setFrame = function (frameType) {
this.getFrameHandler().setFrames(frameType);
var buttons = canvas.getButtonMenu().getItems();
if (frameType === 'none') {
buttons[0].setDisabled(true);
}
else {
buttons[0].setDisabled(false);
}
canvas.getButtonMenu().bringToFront();
canvas.refresh3dView();
};
this.getData = function () {
@@ -1977,7 +1851,7 @@ function Viewport(canvas) {
module.exports = Viewport;
},{"./FrameHandler":8,"./GoreHandler":9,"./RulerHandler":13,"./util":25}],16:[function(require,module,exports){
},{"./FrameHandler":7,"./GoreHandler":8,"./RulerHandler":12,"./util":24}],15:[function(require,module,exports){
'use strict';
module.exports = {
@@ -1989,7 +1863,7 @@ module.exports = {
dragBar: require('./config/drag-bar')
};
},{"./config/button-menu":17,"./config/drag-bar":18,"./config/drag-handle":19,"./config/frames":20,"./config/ruler-handle":21,"./config/text-button":22}],17:[function(require,module,exports){
},{"./config/button-menu":16,"./config/drag-bar":17,"./config/drag-handle":18,"./config/frames":19,"./config/ruler-handle":20,"./config/text-button":21}],16:[function(require,module,exports){
'use strict';
module.exports = {
@@ -2032,7 +1906,7 @@ module.exports = {
};
},{}],18:[function(require,module,exports){
},{}],17:[function(require,module,exports){
'use strict';
module.exports = {
@@ -2040,12 +1914,12 @@ module.exports = {
size: 20,
};
},{}],19:[function(require,module,exports){
},{}],18:[function(require,module,exports){
'use strict';
module.exports = {
text: {
fontFamily: 'breuer',
fontFamily: 'Urbanist',
fontSize: 12,
fill: '#ffffff',
originX: 'center',
@@ -2058,7 +1932,7 @@ module.exports = {
},
};
},{}],20:[function(require,module,exports){
},{}],19:[function(require,module,exports){
'use strict';
module.exports = {
@@ -2087,7 +1961,7 @@ module.exports = {
};
},{}],21:[function(require,module,exports){
},{}],20:[function(require,module,exports){
'use strict';
module.exports = {
@@ -2136,7 +2010,7 @@ module.exports = {
}
};
},{}],22:[function(require,module,exports){
},{}],21:[function(require,module,exports){
'use strict';
module.exports = {
@@ -2158,7 +2032,7 @@ module.exports = {
text: {
fill: '#ffffff',
disabledFill: '#999999',
fontFamily: 'breuer',
fontFamily: 'Urbanist',
fontSize: 14,
originX: 'center',
originY: 'center',
@@ -2166,10 +2040,10 @@ module.exports = {
cursor: 'pointer',
disabledCursor: 'default',
padding: 20,
padding: 17,
};
},{}],23:[function(require,module,exports){
},{}],22:[function(require,module,exports){
'use strict';
/* globals $, fabric */
@@ -2235,7 +2109,7 @@ function ExtendFabricFunctionality() {
module.exports = ExtendFabricFunctionality;
},{"./Draggable":7,"./util":25}],24:[function(require,module,exports){
},{"./Draggable":6,"./util":24}],23:[function(require,module,exports){
'use strict';
(function() {
@@ -2255,7 +2129,7 @@ module.exports = ExtendFabricFunctionality;
}());
},{"./ImageEditor":11,"./extend-fabric-functionality":23}],25:[function(require,module,exports){
},{"./ImageEditor":10,"./extend-fabric-functionality":22}],24:[function(require,module,exports){
'use strict';
module.exports = {
@@ -2273,7 +2147,7 @@ module.exports = {
isAspectChanged: require('./utils/is-aspect-changed'),
};
},{"./utils/assert-between":26,"./utils/assert-key-value-pair":27,"./utils/calc-crop":28,"./utils/is-aspect-changed":29,"./utils/is-fullscreen":30,"./utils/is-mobile":31,"./utils/mouse-metrics":32,"./utils/set-position-inside":33,"./utils/set-properties":34,"./utils/supports-fullscreen":35,"./utils/toggle-fullscreen":36}],26:[function(require,module,exports){
},{"./utils/assert-between":25,"./utils/assert-key-value-pair":26,"./utils/calc-crop":27,"./utils/is-aspect-changed":28,"./utils/is-fullscreen":29,"./utils/is-mobile":30,"./utils/mouse-metrics":31,"./utils/set-position-inside":32,"./utils/set-properties":33,"./utils/supports-fullscreen":34,"./utils/toggle-fullscreen":35}],25:[function(require,module,exports){
'use strict';
function assertBetween(value, min, max) {
@@ -2288,7 +2162,7 @@ function assertBetween(value, min, max) {
module.exports = assertBetween;
},{}],27:[function(require,module,exports){
},{}],26:[function(require,module,exports){
'use strict';
function assertKeyValuePair(key, value) {
@@ -2304,7 +2178,7 @@ function assertKeyValuePair(key, value) {
module.exports = assertKeyValuePair;
},{}],28:[function(require,module,exports){
},{}],27:[function(require,module,exports){
'use strict';
/**
@@ -2356,7 +2230,7 @@ function calcCrop(obj, width, height, units) {
module.exports = calcCrop;
},{}],29:[function(require,module,exports){
},{}],28:[function(require,module,exports){
'use strict';
function isAspectChanged(x1, y1, x2, y2) {
@@ -2365,7 +2239,7 @@ function isAspectChanged(x1, y1, x2, y2) {
module.exports = isAspectChanged;
},{}],30:[function(require,module,exports){
},{}],29:[function(require,module,exports){
'use strict';
function isFullscreen() {
@@ -2374,7 +2248,7 @@ function isFullscreen() {
module.exports = isFullscreen;
},{}],31:[function(require,module,exports){
},{}],30:[function(require,module,exports){
'use strict';
function isMobile() {
@@ -2383,7 +2257,7 @@ function isMobile() {
module.exports = isMobile;
},{}],32:[function(require,module,exports){
},{}],31:[function(require,module,exports){
'use strict';
var MouseMetrics = {
@@ -2409,7 +2283,7 @@ var MouseMetrics = {
module.exports = MouseMetrics;
},{}],33:[function(require,module,exports){
},{}],32:[function(require,module,exports){
'use strict';
/**
@@ -2432,7 +2306,7 @@ function setPositionInside(obj, bounds) {
module.exports = setPositionInside;
},{}],34:[function(require,module,exports){
},{}],33:[function(require,module,exports){
'use strict';
/**
@@ -2449,7 +2323,7 @@ function setProperties(obj, properties) {
module.exports = setProperties;
},{}],35:[function(require,module,exports){
},{}],34:[function(require,module,exports){
'use strict';
function supportsFullscreen() {
@@ -2460,7 +2334,7 @@ function supportsFullscreen() {
module.exports = supportsFullscreen;
},{}],36:[function(require,module,exports){
},{}],35:[function(require,module,exports){
'use strict';
var isFullscreen = require('./is-fullscreen');
@@ -2495,4 +2369,4 @@ function toggleFullscreen(elem) {
module.exports = toggleFullscreen;
},{"./is-fullscreen":30}]},{},[24]);
},{"./is-fullscreen":29}]},{},[23]);