You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

DragHandle.java 7.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. /*
  2. * Copyright 2000-2016 Vaadin Ltd.
  3. *
  4. * Licensed under the Apache License, Version 2.0 (the "License"); you may not
  5. * use this file except in compliance with the License. You may obtain a copy of
  6. * the License at
  7. *
  8. * http://www.apache.org/licenses/LICENSE-2.0
  9. *
  10. * Unless required by applicable law or agreed to in writing, software
  11. * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  12. * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  13. * License for the specific language governing permissions and limitations under
  14. * the License.
  15. */
  16. package com.vaadin.client.ui.dd;
  17. import com.google.gwt.dom.client.DivElement;
  18. import com.google.gwt.dom.client.Element;
  19. import com.google.gwt.user.client.DOM;
  20. import com.google.gwt.user.client.Event;
  21. import com.vaadin.client.WidgetUtil;
  22. import com.vaadin.client.ui.dd.DragAndDropHandler.DragAndDropCallback;
  23. /**
  24. * Drag handle implementation. Drag handles are used for moving or resizing
  25. * widgets. This is a minimal-case component, meant to be used specifically as a
  26. * drag handle attached to another widget or element. As such, it does
  27. * <b>not</b> provide access to the events it's listening to (from the point of
  28. * view of this component, there really is no use for that). For the more
  29. * general, event-providing interface that this component is based on, see
  30. * {@link DragAndDropHandler}.
  31. *
  32. * @since 7.6
  33. */
  34. public class DragHandle {
  35. /**
  36. * Callback interface for the DragHandle event life cycle.
  37. */
  38. public interface DragHandleCallback {
  39. /**
  40. * Called when dragging starts.
  41. */
  42. void onStart();
  43. /**
  44. * Called when the drag handle has moved.
  45. *
  46. * @param deltaX
  47. * change in X direction since start
  48. * @param deltaY
  49. * change in Y direction since start
  50. */
  51. void onUpdate(double deltaX, double deltaY);
  52. /**
  53. * Called when the drag operation has been cancelled (usually by
  54. * pressing ESC).
  55. */
  56. void onCancel();
  57. /**
  58. * Called when the drag operation completes successfully.
  59. */
  60. void onComplete();
  61. }
  62. private Element parent;
  63. private DivElement element;
  64. private String baseClassName;
  65. private DragAndDropHandler dndHandler;
  66. private DragAndDropCallback dndCallback;
  67. private DragHandleCallback userCallback;
  68. /**
  69. * Creates a new DragHandle.
  70. *
  71. * @param baseName
  72. * CSS style name to use for this DragHandle element. This
  73. * parameter is supplied to the constructor (rather than added
  74. * later) both to provide the "-dragged" style and to make sure
  75. * that the drag handle can be properly styled (it's otherwise
  76. * invisible)
  77. * @since 7.7.5
  78. */
  79. public DragHandle(String baseName) {
  80. this(baseName, null);
  81. }
  82. /**
  83. * Creates a new DragHandle.
  84. *
  85. * @param baseName
  86. * CSS style name to use for this DragHandle element. This
  87. * parameter is supplied to the constructor (rather than added
  88. * later) both to provide the "-dragged" style and to make sure
  89. * that the drag handle can be properly styled (it's otherwise
  90. * invisible)
  91. * @param callback
  92. * Callback object allows hooking up the drag handle to the rest
  93. * of the program logic
  94. */
  95. public DragHandle(String baseName, DragHandleCallback callback) {
  96. parent = null;
  97. element = DivElement.as(DOM.createElement("div"));
  98. baseClassName = baseName;
  99. userCallback = callback;
  100. addStyleName(baseClassName);
  101. dndCallback = new DragAndDropCallback() {
  102. private double startX;
  103. private double startY;
  104. @Override
  105. public void onDrop() {
  106. removeDraggingStyle();
  107. if (userCallback != null) {
  108. userCallback.onComplete();
  109. }
  110. }
  111. @Override
  112. public void onDragUpdate(Event e) {
  113. if (userCallback != null) {
  114. double dx = WidgetUtil.getTouchOrMouseClientX(e) - startX;
  115. double dy = WidgetUtil.getTouchOrMouseClientY(e) - startY;
  116. userCallback.onUpdate(dx, dy);
  117. }
  118. }
  119. @Override
  120. public boolean onDragStart(Event e) {
  121. addDraggingStyle();
  122. if (userCallback != null) {
  123. startX = WidgetUtil.getTouchOrMouseClientX(e);
  124. startY = WidgetUtil.getTouchOrMouseClientY(e);
  125. userCallback.onStart();
  126. }
  127. return true;
  128. }
  129. @Override
  130. public void onDragEnd() {
  131. // NOP, handled in onDrop and onDragCancel
  132. }
  133. @Override
  134. public void onDragCancel() {
  135. removeDraggingStyle();
  136. if (userCallback != null) {
  137. userCallback.onCancel();
  138. }
  139. }
  140. private void addDraggingStyle() {
  141. addStyleName(baseClassName + "-dragged");
  142. }
  143. private void removeDraggingStyle() {
  144. removeStyleName(baseClassName + "-dragged");
  145. }
  146. };
  147. dndHandler = new DragAndDropHandler();
  148. DOM.sinkEvents(element, Event.ONMOUSEDOWN | Event.ONTOUCHSTART);
  149. DOM.setEventListener(element, event -> {
  150. dndHandler.onDragStartOnDraggableElement(event, dndCallback);
  151. event.stopPropagation();
  152. });
  153. }
  154. /**
  155. * Sets the user-facing drag handle callback method. This allows code using
  156. * the DragHandle to react to the situations where a drag handle first
  157. * touched, when it's moved and when it's released.
  158. *
  159. * @param dragHandleCallback
  160. * the callback object to use (can be null)
  161. * @since 7.7.5
  162. */
  163. public void setCallback(DragHandleCallback dragHandleCallback) {
  164. userCallback = dragHandleCallback;
  165. }
  166. /**
  167. * Returns the current parent element for this drag handle. May be null.
  168. *
  169. * @return an Element or null
  170. */
  171. public Element getParent() {
  172. return parent;
  173. }
  174. /**
  175. * Gets the element used as actual drag handle.
  176. *
  177. * @return an Element
  178. */
  179. public Element getElement() {
  180. return element;
  181. }
  182. /**
  183. * Adds this drag handle to an HTML element.
  184. *
  185. * @param elem
  186. * an element
  187. */
  188. public void addTo(Element elem) {
  189. removeFromParent();
  190. parent = elem;
  191. parent.appendChild(element);
  192. }
  193. /**
  194. * Removes this drag handle from whatever it was attached to.
  195. */
  196. public void removeFromParent() {
  197. if (parent != null) {
  198. parent.removeChild(element);
  199. parent = null;
  200. }
  201. }
  202. /**
  203. * Adds CSS style name to the drag handle element.
  204. *
  205. * @param styleName
  206. * a CSS style name
  207. */
  208. public void addStyleName(String styleName) {
  209. element.addClassName(styleName);
  210. }
  211. /**
  212. * Removes existing style name from drag handle element.
  213. *
  214. * @param styleName
  215. * a CSS style name
  216. */
  217. public void removeStyleName(String styleName) {
  218. element.removeClassName(styleName);
  219. }
  220. }