Hello Sorry,
I posted the code in wrong why, I was trying to directly use the sample example application as widget structure.
Below is me code for the widget that 'm trying to do. By the way I getting 2 errors:
Syntax error 1084: expecting rightbrace before end of program (below)
</fx:Script>
"1131: Classes must not be nested." (below)
public class RotationWheel extends SkinnableComponent
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:esri="http://www.esri.com/2008/ags"
xmlns:RotateMap="widgets.RotateMap">
<fx:Script>
<![CDATA[
import com.esri.ags.Map;
import com.esri.viewer.AppEvent;
import com.esri.viewer.utils.LocalizationUtil;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.geom.Vector3D;
import mx.binding.utils.BindingUtils;
import mx.binding.utils.ChangeWatcher;
import mx.core.UIComponent;
import spark.components.Group;
import spark.components.supportClasses.SkinnableComponent;
[Event(name="change", type="flash.events.Event")]
[SkinState("up")]
[SkinState("overNorth")]
[SkinState("downNorth")]
[SkinState("overWheel")]
[SkinState("downWheel")]
[SkinState("disabled")]
public class RotationWheel extends SkinnableComponent
{
public static const DEG_PER_RAD:Number = 180 / Math.PI;
public function RotationWheel()
{
super();
buttonMode = true;
addEventListener(MouseEvent.MOUSE_OVER, mouseOverOutHandler);
addEventListener(MouseEvent.MOUSE_OUT, mouseOverOutHandler);
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
private var m_globalWheelCenter:Vector3D = new Vector3D();
private var m_originVector:Vector3D = new Vector3D();
private var m_wheelCenterVector:Vector3D = new Vector3D();
private var m_originMapRotation:Number = 0;
private var m_overWheel:Boolean;
private var m_mouseOverNorth:Boolean;
private var m_mouseDown:Boolean;
[SkinPart(required="false")]
public var wheel:Group;
[SkinPart(required="false")]
public var north:UIComponent;
private var m_mapRotation:Number = 0;
[Bindable("mapRotationChanged")]
public function get mapRotation():Number
{
return m_mapRotation;
}
public function set mapRotation(value:Number):void
{
if (m_mapRotation != value)
{
m_mapRotation = value;
if (skin)
{
skin.invalidateProperties();
}
dispatchEvent(new Event("mapRotationChanged"));
}
}
private var m_map:Map;
private var m_mapRotationWatcher:ChangeWatcher;
public function get map():Map
{
return m_map;
}
public function set map(value:Map):void
{
if (m_map !== value)
{
if (m_mapRotationWatcher)
{
m_mapRotationWatcher.unwatch();
}
m_map = value;
if (m_map)
{
mapRotation = m_map.mapRotation;
if (m_mapRotationWatcher)
{
m_mapRotationWatcher.reset(m_map);
}
else
{
m_mapRotationWatcher = BindingUtils.bindProperty(this, "mapRotation", m_map, "mapRotation");
}
}
}
}
override protected function getCurrentSkinState():String
{
var state:String = "up";
if (m_overWheel)
{
state = m_mouseDown ? "down" : "over";
state += "Wheel";
}
else if (m_mouseOverNorth)
{
state = m_mouseDown ? "down" : "over";
state += "North";
}
return state;
}
private function stop():void
{
stage.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
m_mouseDown = false;
}
private function mouseOverOutHandler(event:MouseEvent):void
{
if (!m_mouseDown)
{
m_overWheel = m_mouseOverNorth = false;
if (event.target === north)
{
m_mouseOverNorth = true;
}
else
{
m_overWheel = true;
}
invalidateSkinState();
}
}
private function mouseDownHandler(event:MouseEvent):void
{
var globalCenter:Point = wheel.localToGlobal(new Point(wheel.transformX, wheel.transformY));
m_globalWheelCenter.setTo(globalCenter.x, globalCenter.y, 0.0);
m_wheelCenterVector.setTo(m_globalWheelCenter.x, m_globalWheelCenter.y, 0.0);
m_originVector.setTo(event.stageX, event.stageY, 0.0);
m_originVector = m_originVector.subtract(m_wheelCenterVector);
m_originVector.normalize();
m_originMapRotation = m_mapRotation;
stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
m_mouseDown = true;
invalidateSkinState();
}
private function enterFrameHandler(event:Event):void
{
var mousePosition:Point = wheel.localToGlobal(new Point(wheel.mouseX, wheel.mouseY));
var newVector:Vector3D = new Vector3D(mousePosition.x, mousePosition.y);
newVector = newVector.subtract(m_wheelCenterVector);
newVector.normalize();
var n:Vector3D = m_originVector.crossProduct(newVector);
var newAngle:Number = Vector3D.angleBetween(m_originVector, newVector) * DEG_PER_RAD;
if (n.z < 0)
{
newAngle = -newAngle;
}
newAngle += m_originMapRotation;
if (isNaN(newAngle))
{
newAngle = 0;
}
if (Math.abs(mapRotation - newAngle) > 1)
{
mapRotation = newAngle;
dispatchEvent(new Event(Event.CHANGE));
}
}
private function mouseUpHandler(event:MouseEvent):void
{
stop();
invalidateSkinState();
if (m_mouseOverNorth)
{
if (Math.abs(mapRotation - m_originMapRotation) < 3)
{
mapRotation = 0;
dispatchEvent(new Event(Event.CHANGE));
}
}
]]>
</fx:Script>
<s:Group enabled="{map.loaded}"
includeInLayout="{panwheelItem.toolVisible}"
layoutDirection="ltr"
visible="{panwheelItem.toolVisible}">
<s:Button id="wheel"
width="75" height="75"
left="20" top="20"
change="map.rotateTo(wheel.mapRotation, wheel.mapRotation == 0)"
mapRotation="{map.mapRotation}"
skinClass="widgets.RotateMap.RotationWheelSkin"/>
</s:Group>
</s:Group>
