Index: gallery/frontend/src/main/java/org/hippoecm/frontend/plugins/gallery/editor/crop/crop-editor-dialog.css =================================================================== --- gallery/frontend/src/main/java/org/hippoecm/frontend/plugins/gallery/editor/crop/crop-editor-dialog.css (revision 34745) +++ gallery/frontend/src/main/java/org/hippoecm/frontend/plugins/gallery/editor/crop/crop-editor-dialog.css (working copy) @@ -34,8 +34,9 @@ padding: 5px; padding-left:12px; margin: 5px 0; - min-height: 454px; - _height: 454px; + min-height: 454px; + height: 454px; + overflow:auto; } .right-crop-area .preview-container { Index: gallery/frontend/src/main/java/org/hippoecm/frontend/plugins/gallery/editor/crop/hippoimagecropper/hippoimagecropper.js =================================================================== --- gallery/frontend/src/main/java/org/hippoecm/frontend/plugins/gallery/editor/crop/hippoimagecropper/hippoimagecropper.js (revision 34745) +++ gallery/frontend/src/main/java/org/hippoecm/frontend/plugins/gallery/editor/crop/hippoimagecropper/hippoimagecropper.js (working copy) @@ -51,7 +51,10 @@ this.upscalingEnabled = config.upscalingEnabled; this.previewVisible = config.previewVisible; this.status = config.status; - + this.ratioLocked = config.ratioLocked; + this.fixedDimension = config.fixedDimension; + this.thumbnailSizeLabelId = config.thumbnailSizeLabelId; + if(!this.upscalingEnabled) { this.minimumWidth = this.thumbnailWidth; this.minimumHeight = this.thumbnailHeight; @@ -59,6 +62,9 @@ this.cropper = null; this.previewImage = null; + this.previewContainer = null; + this.thumbnailSizeLabel = null; + this.thumbnailSizeLabelOrgValue = null; }; YAHOO.extend(YAHOO.hippo.ImageCropper, YAHOO.hippo.Widget, { @@ -66,6 +72,10 @@ render: function() { if(this.previewVisible) { this.previewImage = Dom.getFirstChild(this.imagePreviewContainerId); + this.previewContainer = Dom.get(this.imagePreviewContainerId); + + this.thumbnailSizeLabel = Dom.get(this.thumbnailSizeLabelId); + this.thumbnailSizeLabelOrgValue = this.thumbnailSizeLabel.innerHTML; //initial values this.previewImage.style.top = "-" + this.initialX + "px"; @@ -78,15 +88,20 @@ initialXY:[this.initialX, this.initialY], initHeight: this.thumbnailHeight, initWidth: this.thumbnailWidth, - ratio: true, + ratio: this.ratioLocked, minWidth: this.minimumWidth, minHeight: this.minimumHeight, status : this.status } - ); + ); this.cropper.on('moveEvent', this.onMove, null, this); - this.updateRegionInputValue(this.cropper.getCropCoords()); + this.updateRegionInputValue(this.cropper.getCropCoords()); + + + // Correct the preview image label + this.thumbnailSizeLabel.innerHTML = this.thumbnailSizeLabelOrgValue.replace('width', this.thumbnailWidth); + this.thumbnailSizeLabel.innerHTML = this.thumbnailSizeLabel.innerHTML.replace('height', this.thumbnailHeight); }, onMove : function(e) { @@ -95,14 +110,44 @@ if(this.previewVisible && this.previewImage != null){ // Resize preview image - // Since the ratio is fixed, both height and width change by the same percentage*/ - var scalingFactor = this.thumbnailWidth / coords.width; + if(this.ratioLocked == true) { + // Since the ratio is fixed, both height and width change by the same percentage*/ + var scalingFactor = this.thumbnailWidth / coords.width; - this.previewImage.style.width = Math.floor(this.originalImageWidth * scalingFactor) + 'px'; - this.previewImage.style.height = Math.floor(this.originalImageHeight * scalingFactor) + 'px'; + this.previewImage.style.width = Math.floor(this.originalImageWidth * scalingFactor) + 'px'; + this.previewImage.style.height = Math.floor(this.originalImageHeight * scalingFactor) + 'px'; + + this.previewImage.style.top = '-' + (Math.floor(coords.top * scalingFactor)) + 'px'; + this.previewImage.style.left = '-' + (Math.floor(coords.left * scalingFactor)) + 'px'; + } else { + var previewContainerWidth; + var previewContainerHeight; + var scalingFactor; + if(this.fixedDimension == 'width') { + // calculate preview box + scalingFactor = this.thumbnailWidth / coords.width; + previewContainerWidth = this.thumbnailWidth; + previewContainerHeight = Math.floor(scalingFactor * coords.height); + } else if(this.fixedDimension == 'height') { + // calculate preview box + scalingFactor = this.thumbnailHeight / coords.height; + previewContainerWidth = Math.floor(scalingFactor * coords.width); + previewContainerHeight = this.thumbnailHeight; + } + // set the preview box correct + this.previewContainer.style.width = previewContainerWidth + 'px'; + this.previewContainer.style.height = previewContainerHeight + 'px'; + + // set the preview image correct + this.previewImage.style.width = Math.floor(this.originalImageWidth * scalingFactor) + 'px'; + this.previewImage.style.height = Math.floor(this.originalImageHeight * scalingFactor) + 'px'; + this.previewImage.style.top = '-' + (Math.floor(coords.top * scalingFactor)) + 'px'; + this.previewImage.style.left = '-' + (Math.floor(coords.left * scalingFactor)) + 'px'; - this.previewImage.style.top = '-' + (Math.floor(coords.top * scalingFactor)) + 'px'; - this.previewImage.style.left = '-' + (Math.floor(coords.left * scalingFactor)) + 'px'; + // Correct the preview image label + this.thumbnailSizeLabel.innerHTML = this.thumbnailSizeLabelOrgValue.replace('width', previewContainerWidth); + this.thumbnailSizeLabel.innerHTML = this.thumbnailSizeLabel.innerHTML.replace('height', previewContainerHeight); + } } }, Index: gallery/frontend/src/main/java/org/hippoecm/frontend/plugins/gallery/editor/crop/ImageCropSettings.java =================================================================== --- gallery/frontend/src/main/java/org/hippoecm/frontend/plugins/gallery/editor/crop/ImageCropSettings.java (revision 34745) +++ gallery/frontend/src/main/java/org/hippoecm/frontend/plugins/gallery/editor/crop/ImageCropSettings.java (working copy) @@ -41,6 +41,9 @@ private boolean upscalingEnabled; private boolean previewVisible; private boolean status; + private boolean ratioLocked = true; + private String fixedDimension = ""; + private String thumbnailSizeLabelId = ""; public ImageCropSettings(String regionInputId, String imagePreviewContainerId, Dimension originalImageDimension, Dimension thumbnailDimension, boolean upscalingEnabled) { @@ -52,7 +55,7 @@ this.thumbnailWidth = (int) thumbnailDimension.getWidth(); this.thumbnailHeight = (int) thumbnailDimension.getHeight(); - this.upscalingEnabled = upscalingEnabled; + this.upscalingEnabled = upscalingEnabled; previewVisible = thumbnailWidth <= 200; } @@ -63,6 +66,14 @@ minimumWidth = (int) minimumDimension.getWidth(); minimumHeight = (int) minimumDimension.getHeight(); } + + public ImageCropSettings(String regionInputId, String imagePreviewContainerId, Dimension originalImageDimension, + Dimension thumbnailDimension, boolean upscalingEnabled, boolean ratioLocked, String fixedDimension, String thumbnailSizeLabelId) { + this(regionInputId, imagePreviewContainerId, originalImageDimension, thumbnailDimension, upscalingEnabled); + this.ratioLocked = ratioLocked; + this.fixedDimension = fixedDimension; + this.thumbnailSizeLabelId = thumbnailSizeLabelId; + } public String getRegionInputId() { return regionInputId; @@ -167,4 +178,28 @@ public void setStatus(boolean status) { this.status = status; } + + public boolean isRatioLocked() { + return ratioLocked; + } + + public void setRatioLocked(boolean ratioLocked) { + this.ratioLocked = ratioLocked; + } + + public String getFixedDimension() { + return fixedDimension; + } + + public void setFixedDimension(String fixedDimension) { + this.fixedDimension = fixedDimension; + } + + public String getThumbnailSizeLabelId() { + return thumbnailSizeLabelId; + } + + public void setThumbnailSizeLabelId(String thumbnailSizeLabelId){ + this.thumbnailSizeLabelId = thumbnailSizeLabelId; + } } Index: gallery/frontend/src/main/java/org/hippoecm/frontend/plugins/gallery/editor/ImageCropEditorDialog.java =================================================================== --- gallery/frontend/src/main/java/org/hippoecm/frontend/plugins/gallery/editor/ImageCropEditorDialog.java (revision 34745) +++ gallery/frontend/src/main/java/org/hippoecm/frontend/plugins/gallery/editor/ImageCropEditorDialog.java (working copy) @@ -70,6 +70,9 @@ private Dimension originalImageDimension; private Dimension thumbnailDimension; + private static final String WIDTH = "width"; + private static final String HEIGHT = "height"; + private ImageCropEditorDialog() { } @@ -90,23 +93,11 @@ imagePreviewContainer.setOutputMarkupId(true); boolean isPreviewVisible = false; + boolean isRatioLocked = true; + String fixedDimenison = ""; // used for the special case width or height is 0 this value is used to define which dimension it is String thumbnailDimensionsLabel = StringUtils.EMPTY; try { - thumbnailDimension = galleryProcessor.getDesiredResourceDimension(thumbnailImageNode); - isPreviewVisible = thumbnailDimension.getWidth() <= 200; - imagePreviewContainer.add(new AttributeAppender("style", new Model("height:" + thumbnailDimension.getHeight() + "px"), ";")); - imagePreviewContainer.add(new AttributeAppender("style", new Model("width:" + thumbnailDimension.getWidth() + "px"), ";")); - thumbnailDimensionsLabel = String.valueOf((int) thumbnailDimension.getWidth()) + " x " + ((int) thumbnailDimension.getHeight()); - } catch (RepositoryException e) { - log.error("Cannot retrieve thumbnail dimensions", e); - error(e); - } catch (GalleryException e) { - log.error("Cannot retrieve thumbnail dimensions", e); - error(e); - } - - try { Node originalImageNode = thumbnailImageNode.getParent().getNode(HippoGalleryNodeType.IMAGE_SET_ORIGINAL); originalImageDimension = new Dimension( (int) originalImageNode.getProperty(HippoGalleryNodeType.IMAGE_WIDTH).getLong(), @@ -124,6 +115,30 @@ imgPreview = new Image("imagepreview"); } + try { + thumbnailDimension = galleryProcessor.getDesiredResourceDimension(thumbnailImageNode); + if(thumbnailDimension.height == 0) { + isRatioLocked = false; + fixedDimenison = WIDTH; + thumbnailDimension = handleZeroValueInDimension(originalImageDimension, thumbnailDimension); + } else if (thumbnailDimension.width == 0) { + isRatioLocked = false; + fixedDimenison = HEIGHT; + thumbnailDimension = handleZeroValueInDimension(originalImageDimension, thumbnailDimension); + } + isPreviewVisible = thumbnailDimension.getWidth() <= 200; + imagePreviewContainer.add(new AttributeAppender("style", new Model("height:" + thumbnailDimension.getHeight() + "px"), ";")); + imagePreviewContainer.add(new AttributeAppender("style", new Model("width:" + thumbnailDimension.getWidth() + "px"), ";")); + thumbnailDimensionsLabel = String.valueOf((int) thumbnailDimension.getWidth()) + " x " + ((int) thumbnailDimension.getHeight()); + } catch (RepositoryException e) { + log.error("Cannot retrieve thumbnail dimensions", e); + error(e); + } catch (GalleryException e) { + log.error("Cannot retrieve thumbnail dimensions", e); + error(e); + } + + boolean isUpscalingEnabled = true; try { isUpscalingEnabled = galleryProcessor.isUpscalingEnabled(thumbnailImageNode); @@ -134,12 +149,24 @@ log.error("Cannot retrieve Upscaling configuration option", e); error(e); } - + + // If the ratio is not locked, one dimension is 0, therefore the label dimension value is calculated in the javascript. + // So place holders are put in place. + if(!isRatioLocked) { + thumbnailDimensionsLabel = "width x height"; + } + Label thumbnailSize = new Label("thumbnail-size", new StringResourceModel("thumbnail-size", this, null, new Object[]{thumbnailDimensionsLabel})); + thumbnailSize.setOutputMarkupId(true); + add(thumbnailSize); + ImageCropSettings cropSettings = new ImageCropSettings(regionField.getMarkupId(), imagePreviewContainer.getMarkupId(), originalImageDimension, thumbnailDimension, - isUpscalingEnabled); + isUpscalingEnabled, + isRatioLocked, + fixedDimenison, + thumbnailSize.getMarkupId(true)); originalImage.add(new ImageCropBehavior(cropSettings)); originalImage.setOutputMarkupId(true); @@ -153,9 +180,6 @@ new StringResourceModel("preview-description-enabled", this, null) : new StringResourceModel("preview-description-disabled", this, null)); add(previewDescription); - - Label thumbnailSize = new Label("thumbnail-size", new StringResourceModel("thumbnail-size", this, null, new Object[]{thumbnailDimensionsLabel})); - add(thumbnailSize); } @Override @@ -190,7 +214,11 @@ MemoryCacheImageInputStream imageInputStream = new MemoryCacheImageInputStream(originalImageNode.getProperty(JcrConstants.JCR_DATA).getStream()); reader.setInput(imageInputStream); BufferedImage original = reader.read(0); - Dimension dimension = galleryProcessor.getDesiredResourceDimension((Node) getModelObject()); + + Dimension thumbnailDimension = galleryProcessor.getDesiredResourceDimension((Node) getModelObject()); + Dimension cropedImage = new Dimension(width, height); + Dimension dimension = handleZeroValueInDimension(cropedImage, thumbnailDimension); + Object hints; boolean highQuality; if (Math.min(width / reader.getWidth(0), height / reader.getHeight(0)) < 1.0) { @@ -226,4 +254,27 @@ return true; } + + /** + * + * If height or width in the thumbnailDimension is equal to 0 it is a special case. + * The value 0 represents a value that according to the dimension of the original image. + * + * With this function a new dimension is created according to the original dimension + * + * @param orginalDimension dimension of the original image + * @param thumbnailDimension dimension of the thumbnail image + * @return scaled dimension based on width or height value + */ + private Dimension handleZeroValueInDimension(Dimension orginalDimension, Dimension thumbnailDimension) { + if(thumbnailDimension.height == 0) { + int height = (int) ((thumbnailDimension.getWidth() / orginalDimension.getWidth()) * orginalDimension.getHeight()); + thumbnailDimension.setSize(thumbnailDimension.width, height); + } + if(thumbnailDimension.width == 0) { + int width = (int) ((thumbnailDimension.getHeight() / orginalDimension.getHeight()) * orginalDimension.getWidth()); + thumbnailDimension.setSize(width, thumbnailDimension.height); + } + return thumbnailDimension; + } }