1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 package org.vectomatic.svg.samples.client.events;
19
20 import org.vectomatic.dom.svg.OMSVGCircleElement;
21 import org.vectomatic.dom.svg.OMSVGDocument;
22 import org.vectomatic.dom.svg.OMSVGMatrix;
23 import org.vectomatic.dom.svg.OMSVGPoint;
24 import org.vectomatic.dom.svg.OMSVGRectElement;
25 import org.vectomatic.dom.svg.OMSVGSVGElement;
26 import org.vectomatic.dom.svg.utils.DOMHelper;
27 import org.vectomatic.dom.svg.utils.OMSVGParser;
28 import org.vectomatic.dom.svg.utils.SVGConstants;
29 import org.vectomatic.svg.samples.client.Main;
30 import org.vectomatic.svg.samples.client.Main.MainBundle;
31 import org.vectomatic.svg.samples.client.SampleBase;
32
33 import com.google.gwt.core.client.GWT;
34 import com.google.gwt.dom.client.Style.Unit;
35 import com.google.gwt.event.dom.client.MouseDownEvent;
36 import com.google.gwt.event.dom.client.MouseDownHandler;
37 import com.google.gwt.event.dom.client.MouseEvent;
38 import com.google.gwt.event.dom.client.MouseMoveEvent;
39 import com.google.gwt.event.dom.client.MouseMoveHandler;
40 import com.google.gwt.event.dom.client.MouseUpEvent;
41 import com.google.gwt.event.dom.client.MouseUpHandler;
42 import com.google.gwt.event.shared.EventHandler;
43 import com.google.gwt.uibinder.client.UiBinder;
44 import com.google.gwt.uibinder.client.UiField;
45 import com.google.gwt.user.client.Element;
46 import com.google.gwt.user.client.Random;
47 import com.google.gwt.user.client.ui.HTML;
48 import com.google.gwt.user.client.ui.TabLayoutPanel;
49
50
51
52
53
54 public class EventSample extends SampleBase implements MouseUpHandler, MouseMoveHandler, MouseDownHandler {
55 interface EventSampleBinder extends UiBinder<TabLayoutPanel, EventSample> {
56 }
57
58 private static EventSampleBinder binder = GWT.create(EventSampleBinder.class);
59
60 @UiField(provided=true)
61 public static MainBundle mainBundle = Main.mainBundle;
62 @UiField
63 HTML svgContainer;
64 private boolean dragging;
65 private OMSVGPoint p0;
66 private OMSVGSVGElement svg;
67 private OMSVGRectElement square;
68
69 @Override
70 public TabLayoutPanel getPanel() {
71 if (tabPanel == null) {
72 tabPanel = binder.createAndBindUi(this);
73 tabPanel.setTabText(0, "Events");
74 createCodeTabs("EventSample");
75
76
77 Element div = svgContainer.getElement();
78 OMSVGDocument doc = OMSVGParser.currentDocument();
79
80
81 svg = doc.createSVGSVGElement();
82 svg.setViewBox(0f, 0f, 400f, 200f);
83 svg.getWidth().getBaseVal().newValueSpecifiedUnits(Unit.PCT, 100);
84 svg.getHeight().getBaseVal().newValueSpecifiedUnits(Unit.PCT, 100);
85
86
87 final OMSVGCircleElement circle = doc.createSVGCircleElement(80f, 80f, 40f);
88 circle.getStyle().setSVGProperty(SVGConstants.CSS_STROKE_PROPERTY, SVGConstants.CSS_BLACK_VALUE);
89 setCircleColor(circle, SVGConstants.CSS_RED_VALUE);
90 svg.appendChild(circle);
91
92
93 circle.addMouseDownHandler(new MouseDownHandler() {
94 final String[] colors = new String[] {
95 SVGConstants.CSS_RED_VALUE,
96 SVGConstants.CSS_BLUE_VALUE,
97 SVGConstants.CSS_GREEN_VALUE,
98 SVGConstants.CSS_YELLOW_VALUE,
99 SVGConstants.CSS_PINK_VALUE };
100
101 @Override
102 public void onMouseDown(MouseDownEvent event) {
103 String color = getCircleColor(circle);
104 while (color.equals(getCircleColor(circle))) {
105 setCircleColor(circle, colors[Random.nextInt(colors.length)]);
106 }
107 event.stopPropagation();
108 event.preventDefault();
109 }
110 });
111
112
113 square = doc.createSVGRectElement(140f, 40f, 80f, 80f, 0f, 0f);
114 square.getStyle().setSVGProperty(SVGConstants.CSS_STROKE_PROPERTY, SVGConstants.CSS_BLACK_VALUE);
115 square.getStyle().setSVGProperty(SVGConstants.CSS_FILL_PROPERTY, SVGConstants.CSS_GREEN_VALUE);
116 square.addMouseDownHandler(this);
117 square.addMouseUpHandler(this);
118 square.addMouseMoveHandler(this);
119 svg.appendChild(square);
120
121
122 div.appendChild(svg.getElement());
123 }
124 return tabPanel;
125 }
126 private static final String getCircleColor(OMSVGCircleElement circle) {
127 return circle.getStyle().getSVGProperty(SVGConstants.CSS_FILL_PROPERTY);
128 }
129 private static final void setCircleColor(OMSVGCircleElement circle, String color) {
130 circle.getStyle().setSVGProperty(SVGConstants.CSS_FILL_PROPERTY, color);
131 }
132
133 @Override
134 public void onMouseUp(MouseUpEvent event) {
135 dragging = false;
136 DOMHelper.releaseCaptureElement();
137 event.stopPropagation();
138 event.preventDefault();
139 }
140
141 @Override
142 public void onMouseMove(MouseMoveEvent event) {
143 if (dragging) {
144 OMSVGPoint p = getLocalCoordinates(event);
145 float dx = p.getX() - p0.getX();
146 float dy = p.getY() - p0.getY();
147 float x = square.getX().getBaseVal().getValue();
148 float y = square.getY().getBaseVal().getValue();
149 square.getX().getBaseVal().setValue(x + dx);
150 square.getY().getBaseVal().setValue(y + dy);
151 p0 = p;
152 }
153 event.stopPropagation();
154 event.preventDefault();
155 }
156
157
158
159
160
161
162
163
164
165
166 public OMSVGPoint getLocalCoordinates(MouseEvent<? extends EventHandler> e) {
167 OMSVGPoint p = svg.createSVGPoint(e.getClientX(), e.getClientY());
168 OMSVGMatrix m = square.getScreenCTM().inverse();
169 return p.matrixTransform(m);
170 }
171
172
173 @Override
174 public void onMouseDown(MouseDownEvent event) {
175 dragging = true;
176 p0 = getLocalCoordinates(event);
177 DOMHelper.setCaptureElement(square, null);
178 event.stopPropagation();
179 event.preventDefault();
180 }
181 }
182