001/*
002 * This library is part of OpenCms -
003 * the Open Source Content Management System
004 *
005 * Copyright (c) Alkacon Software GmbH & Co. KG (http://www.alkacon.com)
006 *
007 * This library is free software; you can redistribute it and/or
008 * modify it under the terms of the GNU Lesser General Public
009 * License as published by the Free Software Foundation; either
010 * version 2.1 of the License, or (at your option) any later version.
011 *
012 * This library is distributed in the hope that it will be useful,
013 * but WITHOUT ANY WARRANTY; without even the implied warranty of
014 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
015 * Lesser General Public License for more details.
016 *
017 * For further information about Alkacon Software, please see the
018 * company website: http://www.alkacon.com
019 *
020 * For further information about OpenCms, please see the
021 * project website: http://www.opencms.org
022 *
023 * You should have received a copy of the GNU Lesser General Public
024 * License along with this library; if not, write to the Free Software
025 * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
026 */
027
028package org.opencms.ade.galleries.client.preview.ui;
029
030import org.opencms.ade.galleries.client.Messages;
031import org.opencms.ade.galleries.client.preview.CmsCroppingParamBean;
032import org.opencms.ade.galleries.client.preview.CmsImagePreviewHandler;
033import org.opencms.gwt.client.ui.CmsAreaSelectPanel;
034import org.opencms.gwt.client.ui.CmsPushButton;
035import org.opencms.gwt.client.util.CmsPositionBean;
036
037import com.google.gwt.core.client.GWT;
038import com.google.gwt.dom.client.Element;
039import com.google.gwt.dom.client.Style.Display;
040import com.google.gwt.dom.client.Style.Unit;
041import com.google.gwt.event.dom.client.ClickEvent;
042import com.google.gwt.event.logical.shared.HasValueChangeHandlers;
043import com.google.gwt.event.logical.shared.ValueChangeEvent;
044import com.google.gwt.event.logical.shared.ValueChangeHandler;
045import com.google.gwt.event.shared.HandlerRegistration;
046import com.google.gwt.uibinder.client.UiBinder;
047import com.google.gwt.uibinder.client.UiField;
048import com.google.gwt.uibinder.client.UiHandler;
049import com.google.gwt.user.client.ui.Composite;
050import com.google.gwt.user.client.ui.Image;
051import com.google.gwt.user.client.ui.Label;
052import com.google.gwt.user.client.ui.Widget;
053
054import elemental2.dom.HTMLImageElement;
055import jsinterop.base.Js;
056
057/**
058 * Image cropping dialog.<p>
059 *
060 * @since 8.0.0
061 */
062public class CmsCroppingDialog extends Composite
063implements ValueChangeHandler<CmsPositionBean>, HasValueChangeHandlers<CmsCroppingParamBean> {
064
065    /** The ui-binder for this widget. */
066    interface I_CmsCroppingDialogUiBinder extends UiBinder<Widget, CmsCroppingDialog> {
067        // GWT interface, nothing to do
068    }
069
070    /** The empty field string. */
071    private static final String EMPTY_FIELD = "---";
072
073    /** The ui-binder interface. */
074    private static I_CmsCroppingDialogUiBinder m_uiBinder = GWT.create(I_CmsCroppingDialogUiBinder.class);
075
076    /** The cancel button. */
077    @UiField
078    protected CmsPushButton m_cancelButton;
079
080    /** The cropping panel. */
081    @UiField
082    protected CmsAreaSelectPanel m_croppingPanel;
083
084    /** The height label. */
085    @UiField
086    protected Label m_heightDisplay;
087
088    /** The height label. */
089    @UiField
090    protected Label m_heightLabel;
091
092    /** The image. */
093    @UiField
094    protected Image m_image;
095
096    /** The OK button. */
097    @UiField
098    protected CmsPushButton m_okButton;
099
100    /** The height label. */
101    @UiField
102    protected Label m_scaleDisplay;
103
104    /** The height label. */
105    @UiField
106    protected Label m_scaleLabel;
107
108    /** The top panel holding the cropping area. */
109    @UiField
110    protected Element m_topPanel;
111    /** The height label. */
112    @UiField
113    protected Label m_widthDisplay;
114
115    /** The height label. */
116    @UiField
117    protected Label m_widthLabel;
118
119    /** The cropping parameters. */
120    private CmsCroppingParamBean m_croppingParam;
121
122    /** The cropping parameters of the displayed image. */
123    private CmsCroppingParamBean m_displayCropping;
124
125    /** The ratio from original image height to display height. */
126    private double m_heightRatio;
127
128    /** The image path. */
129    private String m_imagePath;
130
131    /** The ratio from original image width to display width. */
132    private double m_widthRatio;
133
134    /**
135     * Constructor.<p>
136     *
137     * @param imagePath the image path
138     */
139    public CmsCroppingDialog(String imagePath) {
140
141        initWidget(m_uiBinder.createAndBindUi(this));
142
143        m_imagePath = imagePath;
144
145        m_croppingPanel.addValueChangeHandler(this);
146        m_croppingPanel.setFireAll(true);
147
148        m_widthLabel.setText(Messages.get().key(Messages.GUI_PREVIEW_LABEL_WIDTH_0));
149        m_widthDisplay.setText(EMPTY_FIELD);
150        m_heightLabel.setText(Messages.get().key(Messages.GUI_PREVIEW_LABEL_HEIGHT_0));
151        m_heightDisplay.setText(EMPTY_FIELD);
152        m_scaleLabel.setText(Messages.get().key(Messages.GUI_IMAGE_SCALE_0));
153        m_scaleDisplay.setText(EMPTY_FIELD);
154        m_okButton.setText(org.opencms.gwt.client.Messages.get().key(org.opencms.gwt.client.Messages.GUI_OK_0));
155        m_okButton.setUseMinWidth(true);
156        m_cancelButton.setText(org.opencms.gwt.client.Messages.get().key(org.opencms.gwt.client.Messages.GUI_CANCEL_0));
157        m_cancelButton.setUseMinWidth(true);
158    }
159
160    /**
161     * @see com.google.gwt.event.logical.shared.HasValueChangeHandlers#addValueChangeHandler(com.google.gwt.event.logical.shared.ValueChangeHandler)
162     */
163    public HandlerRegistration addValueChangeHandler(ValueChangeHandler<CmsCroppingParamBean> handler) {
164
165        return addHandler(handler, ValueChangeEvent.getType());
166    }
167
168    /**
169     * @see com.google.gwt.event.logical.shared.ValueChangeHandler#onValueChange(com.google.gwt.event.logical.shared.ValueChangeEvent)
170     */
171    public void onValueChange(ValueChangeEvent<CmsPositionBean> event) {
172
173        CmsPositionBean pos = event.getValue();
174        if (pos != null) {
175            calculateCropping(pos);
176            if (m_croppingParam.getTargetWidth() > 0) {
177                if (m_croppingParam.getTargetHeight() > 0) {
178                    m_heightDisplay.setText(String.valueOf(m_croppingParam.getTargetHeight()));
179                    m_widthDisplay.setText(String.valueOf(m_croppingParam.getTargetWidth()));
180                } else {
181                    m_widthDisplay.setText(String.valueOf(m_croppingParam.getTargetWidth()));
182                    m_heightDisplay.setText(
183                        String.valueOf(
184                            (int)Math.floor(
185                                (1.00 * m_croppingParam.getTargetWidth() * m_croppingParam.getCropHeight())
186                                    / m_croppingParam.getCropWidth())));
187                }
188            } else if (m_croppingParam.getTargetHeight() > 0) {
189                m_heightDisplay.setText(String.valueOf(m_croppingParam.getTargetHeight()));
190                m_widthDisplay.setText(
191                    String.valueOf(
192                        (int)Math.floor(
193                            (1.00 * m_croppingParam.getTargetHeight() * m_croppingParam.getCropWidth())
194                                / m_croppingParam.getCropHeight())));
195            } else {
196                m_heightDisplay.setText(String.valueOf(m_croppingParam.getCropHeight()));
197                m_widthDisplay.setText(String.valueOf(m_croppingParam.getCropWidth()));
198            }
199
200            String scale = "100%";
201            if (m_croppingParam.getTargetHeight() > 0) {
202                scale = String.valueOf(
203                    (int)Math.floor((100.00 * m_croppingParam.getCropHeight()) / m_croppingParam.getTargetHeight()))
204                    + "%";
205            } else if (m_croppingParam.getTargetWidth() > 0) {
206                scale = String.valueOf(
207                    (int)Math.floor((100.00 * m_croppingParam.getCropWidth()) / m_croppingParam.getTargetWidth()))
208                    + "%";
209            }
210            m_scaleDisplay.setText(scale);
211            m_okButton.enable();
212        } else {
213            m_okButton.disable(Messages.get().key(Messages.GUI_IMAGE_NO_AREA_SELECTED_0));
214            m_heightDisplay.setText(EMPTY_FIELD);
215            m_widthDisplay.setText(EMPTY_FIELD);
216            m_scaleDisplay.setText(EMPTY_FIELD);
217        }
218
219    }
220
221    /**
222     * Shows the dialog.<p>
223     *
224     * @param targetParam the target cropping parameter, containing the target size restriction
225     */
226    public void show(CmsCroppingParamBean targetParam) {
227
228        getElement().getStyle().setDisplay(Display.BLOCK);
229        m_topPanel.getStyle().setHeight(getElement().getOffsetHeight() - 33, Unit.PX);
230        m_croppingParam = targetParam;
231        m_displayCropping = new CmsCroppingParamBean();
232        m_displayCropping.setTargetHeight(m_croppingParam.getOrgHeight());
233        m_displayCropping.setTargetWidth(m_croppingParam.getOrgWidth());
234        int availableWidth = getElement().getOffsetWidth() - 4;
235        int availableHeight = getElement().getOffsetHeight() - 35;
236        m_displayCropping = m_displayCropping.getRestrictedSizeParam(availableHeight, availableWidth);
237        String bigCropping = m_displayCropping.getRestrictedSizeParam(
238            2 * availableHeight,
239            2 * availableWidth).toString();
240        if (m_displayCropping.toString().equals(bigCropping)) {
241            bigCropping = "";
242        }
243        int width = m_displayCropping.getTargetWidth();
244        int height = m_displayCropping.getTargetHeight();
245        m_image.getElement().setAttribute("width", "" + width);
246        m_image.getElement().setAttribute("height", "" + height);
247        HTMLImageElement img = Js.cast(m_image.getElement());
248        img.srcset = m_imagePath + "?" + CmsImagePreviewHandler.appendQuality(bigCropping) + " 2x";
249        m_image.setUrl(m_imagePath + "?" + CmsImagePreviewHandler.appendQuality(m_displayCropping.toString()));
250        m_croppingPanel.getElement().getStyle().setWidth(m_displayCropping.getTargetWidth(), Unit.PX);
251        if ((targetParam.getTargetHeight() > 0) && (targetParam.getTargetWidth() > 0)) {
252            m_croppingPanel.setRatio((1.00 * targetParam.getTargetHeight()) / targetParam.getTargetWidth());
253        } else {
254            m_croppingPanel.resetRatio();
255        }
256
257        m_heightRatio = (1.00 * m_croppingParam.getOrgHeight()) / m_displayCropping.getTargetHeight();
258        m_widthRatio = (1.00 * m_croppingParam.getOrgWidth()) / m_displayCropping.getTargetWidth();
259        if (m_croppingParam.isCropped()) {
260            m_croppingPanel.setAreaPosition(true, calculateSelectPosition());
261        } else {
262            m_croppingPanel.clearSelection();
263        }
264    }
265
266    /**
267     * Handles the click event for cancel button. Hides the cropping dialog.<p>
268     *
269     * @param event the click event
270     */
271    @UiHandler("m_cancelButton")
272    protected void onCancel(ClickEvent event) {
273
274        hide();
275    }
276
277    /**
278     * Handles the click event for ok button. Sets the selected cropping parameters.<p>
279     *
280     * @param event the click event
281     */
282    @UiHandler("m_okButton")
283    protected void onOk(ClickEvent event) {
284
285        if (!((m_croppingParam.getTargetWidth() > 0) && (m_croppingParam.getTargetHeight() > 0))) {
286            if (m_croppingParam.getTargetWidth() > 0) {
287                m_croppingParam.setTargetHeight(
288                    (int)Math.floor(
289                        (1.00 * m_croppingParam.getTargetWidth() * m_croppingParam.getCropHeight())
290                            / m_croppingParam.getCropWidth()));
291            } else if (m_croppingParam.getTargetHeight() > 0) {
292                m_croppingParam.setTargetWidth(
293                    (int)Math.floor(
294                        (1.00 * m_croppingParam.getTargetHeight() * m_croppingParam.getCropWidth())
295                            / m_croppingParam.getCropHeight()));
296            } else {
297                m_croppingParam.setTargetHeight(m_croppingParam.getCropHeight());
298                m_croppingParam.setTargetWidth(m_croppingParam.getCropWidth());
299            }
300        }
301        ValueChangeEvent.fire(this, m_croppingParam);
302        hide();
303    }
304
305    /**
306     * Calculates the resulting cropping parameter from the supplied selection position.<p>
307     *
308     * @param position the selection position
309     */
310    private void calculateCropping(CmsPositionBean position) {
311
312        m_croppingParam.setCropHeight((int)Math.round(m_heightRatio * position.getHeight()));
313        m_croppingParam.setCropWidth((int)Math.round(m_widthRatio * position.getWidth()));
314        m_croppingParam.setCropY((int)Math.round(m_heightRatio * position.getTop()));
315        m_croppingParam.setCropX((int)Math.round(m_widthRatio * position.getLeft()));
316    }
317
318    /**
319     * Calculates the select area position for the current cropping parameter.<p>
320     *
321     * @return the select area position
322     */
323    private CmsPositionBean calculateSelectPosition() {
324
325        CmsPositionBean result = new CmsPositionBean();
326        result.setHeight((int)Math.round(m_croppingParam.getCropHeight() / m_heightRatio));
327        result.setWidth((int)Math.round(m_croppingParam.getCropWidth() / m_widthRatio));
328        result.setTop((int)Math.round(m_croppingParam.getCropY() / m_heightRatio));
329        result.setLeft((int)Math.round(m_croppingParam.getCropX() / m_widthRatio));
330        return result;
331    }
332
333    /**
334     * Hides the cropping dialog.<p>
335     */
336    private void hide() {
337
338        getElement().getStyle().setDisplay(Display.NONE);
339    }
340
341}