org.eclipse.osbp.vaadin.addons.designer.overlay/src/org/eclipse/osbp/vaadin/addons/designer/overlay/client/widgets/OAlignmentWidget.java

/**
 *                                                                            
 * Copyright (c) 2011, 2016 - Loetz GmbH&Co.KG (69115 Heidelberg, Germany)
 *                                                                            
 * All rights reserved. This program and the accompanying materials           
 * are made available under the terms of the Eclipse Public License v1.0       
 * which accompanies this distribution, and is available at                  
 * http://www.eclipse.org/legal/epl-v10.html                                 
 *                                                                            
 * Contributors:   
 * Florian Pirchner <florian.pirchner@gmail.com> - Initial implementation
 */
package org.eclipse.osbp.vaadin.addons.designer.overlay.client.widgets;

import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.EventTarget;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.EventListener;
import com.google.gwt.user.client.ui.SimplePanel;

// TODO: Auto-generated Javadoc
/**
 * A widget which shows alignment of components.
 */
public class OAlignmentWidget extends SimplePanel {

	/** The Constant O_SELECTED. */
	private static final String O_SELECTED = "o-selected";

	/** The Constant CLASSNAME. */
	private static final String CLASSNAME = "o-alignment-widget";

	/** The alignment div. */
	// contains the single alignment buttons and also the fill buttons
	private Element alignmentDiv = DOM.createDiv();
	
	/** The alignment single div. */
	// contains the single alignment button without fill buttons
	private Element alignmentSingleDiv = DOM.createDiv();
	
	/** The al_top_left_ div. */
	private Element al_top_left_Div = DOM.createDiv();
	
	/** The al_top_center_ div. */
	private Element al_top_center_Div = DOM.createDiv();
	
	/** The al_top_right_ div. */
	private Element al_top_right_Div = DOM.createDiv();
	
	/** The al_middle_left_ div. */
	private Element al_middle_left_Div = DOM.createDiv();
	
	/** The al_middle_center_ div. */
	private Element al_middle_center_Div = DOM.createDiv();
	
	/** The al_middle_right_ div. */
	private Element al_middle_right_Div = DOM.createDiv();
	
	/** The al_bottom_left_ div. */
	private Element al_bottom_left_Div = DOM.createDiv();
	
	/** The al_bottom_center_ div. */
	private Element al_bottom_center_Div = DOM.createDiv();
	
	/** The al_bottom_right_ div. */
	private Element al_bottom_right_Div = DOM.createDiv();

	/** The selected single div. */
	private Element selectedSingleDiv;

	/** The handler. */
	private OAlignmentChangedHandler handler;

	/** The al_v_fill_ div. */
	// fill divs
	private Element al_v_fill_Div = DOM.createDiv();
	
	/** The al_h_fill_ div. */
	private Element al_h_fill_Div = DOM.createDiv();

	/**
	 * Instantiates a new o alignment widget.
	 */
	public OAlignmentWidget() {
		getElement().setClassName(CLASSNAME);
		initDOM();
	}

	/**
	 * Inits the dom.
	 */
	private void initDOM() {
		initializeAlignmentDivs();
	}

	/**
	 * Initialize alignment divs.
	 */
	private void initializeAlignmentDivs() {

		getElement().appendChild(alignmentDiv);

		alignmentDiv.appendChild(alignmentSingleDiv);
		alignmentSingleDiv.appendChild(al_top_left_Div);
		alignmentSingleDiv.appendChild(al_top_center_Div);
		alignmentSingleDiv.appendChild(al_top_right_Div);
		alignmentSingleDiv.appendChild(al_middle_left_Div);
		alignmentSingleDiv.appendChild(al_middle_center_Div);
		alignmentSingleDiv.appendChild(al_middle_right_Div);
		alignmentSingleDiv.appendChild(al_bottom_left_Div);
		alignmentSingleDiv.appendChild(al_bottom_center_Div);
		alignmentSingleDiv.appendChild(al_bottom_right_Div);

		alignmentDiv.appendChild(al_h_fill_Div);
		alignmentDiv.appendChild(al_v_fill_Div);

		alignmentDiv.setClassName("alignment");
		alignmentSingleDiv.setClassName("singles");

		al_top_left_Div.setClassName("topleft");
		al_top_center_Div.setClassName("topcenter");
		al_top_right_Div.setClassName("topright");
		al_middle_left_Div.setClassName("middleleft");
		al_middle_center_Div.setClassName("middlecenter");
		al_middle_right_Div.setClassName("middleright");
		al_bottom_left_Div.setClassName("bottomleft");
		al_bottom_center_Div.setClassName("bottomcenter");
		al_bottom_right_Div.setClassName("bottomright");

		al_h_fill_Div.setClassName("hfill");
		al_v_fill_Div.setClassName("vfill");

		Event.sinkEvents(al_top_left_Div, Event.ONCLICK);
		Event.sinkEvents(al_top_center_Div, Event.ONCLICK);
		Event.sinkEvents(al_top_right_Div, Event.ONCLICK);
		Event.sinkEvents(al_middle_left_Div, Event.ONCLICK);
		Event.sinkEvents(al_middle_center_Div, Event.ONCLICK);
		Event.sinkEvents(al_middle_right_Div, Event.ONCLICK);
		Event.sinkEvents(al_bottom_left_Div, Event.ONCLICK);
		Event.sinkEvents(al_bottom_center_Div, Event.ONCLICK);
		Event.sinkEvents(al_bottom_right_Div, Event.ONCLICK);

		Event.sinkEvents(al_h_fill_Div, Event.ONCLICK);
		Event.sinkEvents(al_v_fill_Div, Event.ONCLICK);

		/*
		 * Listener to get information about clicked divs.
		 */
		EventListener alignmentEvents = new EventListener() {
			@Override
			public void onBrowserEvent(Event event) {
				EventTarget target = event.getCurrentEventTarget();
				Element element = Element.as(target);

				if (element == al_h_fill_Div || element == al_v_fill_Div) {
					if (element.hasClassName(O_SELECTED)) {
						element.removeClassName(O_SELECTED);
					} else {
						element.addClassName(O_SELECTED);
					}
				} else {
					selectedSingleDiv = element;
				}

				AlignmentInfo newAlignment = calcAlignmentInfoFromSelection();
				setAlignmentInfo(newAlignment);

				if (handler != null) {
					handler.onAlignmentChanged(new OAlignmentChangedEvent(newAlignment));
				}
			}
		};

		Event.setEventListener(al_top_left_Div, alignmentEvents);
		Event.setEventListener(al_top_center_Div, alignmentEvents);
		Event.setEventListener(al_top_right_Div, alignmentEvents);
		Event.setEventListener(al_middle_left_Div, alignmentEvents);
		Event.setEventListener(al_middle_center_Div, alignmentEvents);
		Event.setEventListener(al_middle_right_Div, alignmentEvents);
		Event.setEventListener(al_bottom_left_Div, alignmentEvents);
		Event.setEventListener(al_bottom_center_Div, alignmentEvents);
		Event.setEventListener(al_bottom_right_Div, alignmentEvents);

		Event.setEventListener(al_h_fill_Div, alignmentEvents);
		Event.setEventListener(al_v_fill_Div, alignmentEvents);

		setAlignmentInfo(AlignmentInfo.TOP_LEFT);
	}

	/**
	 * Calculates the {@link AlignmentInfo} for ui selections.
	 *
	 * @return the alignment info
	 */
	protected AlignmentInfo calcAlignmentInfoFromSelection() {
		boolean isFillHorizontal = isFillHorizontalSelected();
		boolean isFillVertical = isFillVerticalSelected();

		if (isFillHorizontal && isFillVertical) {
			return AlignmentInfo.FILL_FILL;
		}

		AlignmentInfo singleInfo = getSingleDivAlignment();
		if (singleInfo == null) {
			singleInfo = AlignmentInfo.TOP_LEFT;
		}
		if (!isFillHorizontal && !isFillVertical) {
			return singleInfo;
		}

		if (isFillHorizontal) {
			if (singleInfo.isTop()) {
				return AlignmentInfo.TOP_FILL;
			} else if (singleInfo.isMiddle()) {
				return AlignmentInfo.MIDDLE_FILL;
			} else if (singleInfo.isBottom()) {
				return AlignmentInfo.BOTTOM_FILL;
			}
		} else if (isFillVertical) {
			if (singleInfo.isLeft()) {
				return AlignmentInfo.FILL_LEFT;
			} else if (singleInfo.isCenter()) {
				return AlignmentInfo.FILL_CENTER;
			} else if (singleInfo.isRight()) {
				return AlignmentInfo.FILL_RIGHT;
			}
		}

		return AlignmentInfo.TOP_FILL;
	}

	/**
	 * Resets all alignment infos.
	 */
	private void clearAll() {
		clearSingleElements();
		al_h_fill_Div.removeClassName(O_SELECTED);
		al_v_fill_Div.removeClassName(O_SELECTED);
	}

	/**
	 * Resets all alignment infos except h_fill and v_fill.
	 */
	private void clearSingleElements() {
		al_top_left_Div.removeClassName(O_SELECTED);
		al_top_center_Div.removeClassName(O_SELECTED);
		al_top_right_Div.removeClassName(O_SELECTED);
		al_middle_left_Div.removeClassName(O_SELECTED);
		al_middle_center_Div.removeClassName(O_SELECTED);
		al_middle_right_Div.removeClassName(O_SELECTED);
		al_bottom_left_Div.removeClassName(O_SELECTED);
		al_bottom_center_Div.removeClassName(O_SELECTED);
		al_bottom_right_Div.removeClassName(O_SELECTED);
	}

	/**
	 * Sets the alignment info.
	 *
	 * @param alignmentInfo the new alignment info
	 */
	public void setAlignmentInfo(AlignmentInfo alignmentInfo) {

		if (alignmentInfo == null) {
			alignmentInfo = AlignmentInfo.TOP_LEFT;
		}

		clearAll();

		switch (alignmentInfo) {
		case BOTTOM_CENTER:
			al_bottom_center_Div.addClassName(O_SELECTED);
			break;
		case BOTTOM_FILL:
			al_h_fill_Div.addClassName(O_SELECTED);
			al_bottom_left_Div.addClassName(O_SELECTED);
			al_bottom_center_Div.addClassName(O_SELECTED);
			al_bottom_right_Div.addClassName(O_SELECTED);
			break;
		case BOTTOM_LEFT:
			al_bottom_left_Div.addClassName(O_SELECTED);
			break;
		case BOTTOM_RIGHT:
			al_bottom_right_Div.addClassName(O_SELECTED);
			break;
		case FILL_CENTER:
			al_v_fill_Div.addClassName(O_SELECTED);
			al_top_center_Div.addClassName(O_SELECTED);
			al_middle_center_Div.addClassName(O_SELECTED);
			al_bottom_center_Div.addClassName(O_SELECTED);
			break;
		case FILL_FILL:
			al_v_fill_Div.addClassName(O_SELECTED);
			al_h_fill_Div.addClassName(O_SELECTED);
			al_top_left_Div.addClassName(O_SELECTED);
			al_top_center_Div.addClassName(O_SELECTED);
			al_top_right_Div.addClassName(O_SELECTED);
			al_middle_left_Div.addClassName(O_SELECTED);
			al_middle_center_Div.addClassName(O_SELECTED);
			al_middle_right_Div.addClassName(O_SELECTED);
			al_bottom_left_Div.addClassName(O_SELECTED);
			al_bottom_center_Div.addClassName(O_SELECTED);
			al_bottom_right_Div.addClassName(O_SELECTED);
			break;
		case FILL_LEFT:
			al_v_fill_Div.addClassName(O_SELECTED);
			al_top_left_Div.addClassName(O_SELECTED);
			al_middle_left_Div.addClassName(O_SELECTED);
			al_bottom_left_Div.addClassName(O_SELECTED);
			break;
		case FILL_RIGHT:
			al_v_fill_Div.addClassName(O_SELECTED);
			al_top_right_Div.addClassName(O_SELECTED);
			al_middle_right_Div.addClassName(O_SELECTED);
			al_bottom_right_Div.addClassName(O_SELECTED);
			break;
		case MIDDLE_CENTER:
			al_middle_center_Div.addClassName(O_SELECTED);
			break;
		case MIDDLE_FILL:
			al_h_fill_Div.addClassName(O_SELECTED);
			al_middle_left_Div.addClassName(O_SELECTED);
			al_middle_center_Div.addClassName(O_SELECTED);
			al_middle_right_Div.addClassName(O_SELECTED);
			break;
		case MIDDLE_LEFT:
			al_middle_left_Div.addClassName(O_SELECTED);
			break;
		case MIDDLE_RIGHT:
			al_middle_right_Div.addClassName(O_SELECTED);
			break;
		case TOP_CENTER:
			al_top_center_Div.addClassName(O_SELECTED);
			break;
		case TOP_FILL:
			al_h_fill_Div.addClassName(O_SELECTED);
			al_top_left_Div.addClassName(O_SELECTED);
			al_top_center_Div.addClassName(O_SELECTED);
			al_top_right_Div.addClassName(O_SELECTED);
			break;
		case TOP_LEFT:
			al_top_left_Div.addClassName(O_SELECTED);
			break;
		case TOP_RIGHT:
			al_top_right_Div.addClassName(O_SELECTED);
			break;
		}
	}

	/**
	 * Gets the single div alignment.
	 *
	 * @return the single div alignment
	 */
	protected AlignmentInfo getSingleDivAlignment() {
		if (selectedSingleDiv == null) {
			return null;
		}

		if (selectedSingleDiv == al_top_left_Div) {
			return AlignmentInfo.TOP_LEFT;
		} else if (selectedSingleDiv == al_top_center_Div) {
			return AlignmentInfo.TOP_CENTER;
		} else if (selectedSingleDiv == al_top_right_Div) {
			return AlignmentInfo.TOP_RIGHT;
		} else if (selectedSingleDiv == al_middle_left_Div) {
			return AlignmentInfo.MIDDLE_LEFT;
		} else if (selectedSingleDiv == al_middle_center_Div) {
			return AlignmentInfo.MIDDLE_CENTER;
		} else if (selectedSingleDiv == al_middle_right_Div) {
			return AlignmentInfo.MIDDLE_RIGHT;
		} else if (selectedSingleDiv == al_bottom_left_Div) {
			return AlignmentInfo.BOTTOM_LEFT;
		} else if (selectedSingleDiv == al_bottom_center_Div) {
			return AlignmentInfo.BOTTOM_CENTER;
		} else if (selectedSingleDiv == al_bottom_right_Div) {
			return AlignmentInfo.BOTTOM_RIGHT;
		}
		return null;
	}

	/**
	 * Checks if is fill horizontal selected.
	 *
	 * @return true, if is fill horizontal selected
	 */
	protected boolean isFillHorizontalSelected() {
		return al_h_fill_Div.hasClassName(O_SELECTED);
	}

	/**
	 * Checks if is fill vertical selected.
	 *
	 * @return true, if is fill vertical selected
	 */
	protected boolean isFillVerticalSelected() {
		return al_v_fill_Div.hasClassName(O_SELECTED);
	}

	/**
	 * Gets the alignment changed handler.
	 *
	 * @return the alignment changed handler
	 */
	public OAlignmentChangedHandler getAlignmentChangedHandler() {
		return handler;
	}

	/**
	 * Sets the alignment changed handler.
	 *
	 * @param handler the new alignment changed handler
	 */
	public void setAlignmentChangedHandler(OAlignmentChangedHandler handler) {
		this.handler = handler;
	}

	/**
	 * Destroy.
	 */
	public void destroy() {
		Event.setEventListener(al_top_left_Div, null);
		Event.setEventListener(al_top_center_Div, null);
		Event.setEventListener(al_top_right_Div, null);
		Event.setEventListener(al_middle_left_Div, null);
		Event.setEventListener(al_middle_center_Div, null);
		Event.setEventListener(al_middle_right_Div, null);
		Event.setEventListener(al_bottom_left_Div, null);
		Event.setEventListener(al_bottom_center_Div, null);
		Event.setEventListener(al_bottom_right_Div, null);
	}

}