2013/02/27

Customized Interactions on Network in TWaver Flex

The following several interactive modes have been provided in TWaver as default:


In most cases, they are sufficient, but customized interactions are also available. Now we will introduce how to customize interactive mode with the combination of just a "pan" and the general interactive modes:
If an element is selected, then all the operations will be performed on it; if not, then the "pan" interactive mode as dragging the background.
Generally, in "pan" interactive mode, elements cannot be selected and dragged. It is the same as general map interactive mode and they can only show the range of dragging. But through some operations element-dragging and background-dragging can be separated.
The logic of the method "handleMouseDown" has been changed.
public class CustomInteractionHandler extends BasicInteractionHandler {
        private var pressPoint:Point;
        private var oldButtonMode:Boolean;
        private var olduseHandCursor:Boolean;

        public function CustomInteractionHandler(network:Network) {
            super(network);
            installListeners();
        }

        override public function installListeners():void {
            this.network.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
            this.network.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
        }

        /**
         * @inheritDoc
         *
         */
        override public function uninstallListeners():void {
            this.network.removeEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
            this.network.removeEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
        }

        private function handleMouseDown(e:MouseEvent):void {
            if (!this.network.isValidMouseEvent(e) || this.network.isMovingElement || this.network.isEditingElement) {
                return;
            }
            var element:IElement=network.getElementByMouseEvent(e);
            if (element) {
                if (!this.network.selectionModel.contains(element)) {
                    this.network.selectionModel.setSelection(element);
                }
            } else {
                this.network.selectionModel.clearSelection();
                pressPoint=new Point(e.stageX, e.stageY);
                this.network.addEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove);
                oldButtonMode=this.network.buttonMode;
                olduseHandCursor=this.network.useHandCursor;
                this.network.useHandCursor=true
                this.network.buttonMode=true
                this.network.cursorManager.removeAllCursors();
            }

        }

        private function handleMouseUp(e:MouseEvent):void {
            if (pressPoint != null) {
                pressPoint=null;
                this.network.buttonMode=oldButtonMode;
                this.network.useHandCursor=olduseHandCursor;
                this.network.removeEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove);
            }
        }

        private function handleMouseMove(e:MouseEvent):void {
            if (!e.buttonDown) {
                pressPoint=null;
                this.network.buttonMode=oldButtonMode;
                this.network.useHandCursor=olduseHandCursor;
                this.network.removeEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove);
                return;
            }
            if (this.network.verticalScrollBar == null && this.network.horizontalScrollBar == null) {
                return;
            }
            var xOffset:Number=pressPoint.x - e.stageX;
            var yOffset:Number=pressPoint.y - e.stageY;
            pressPoint.x-=xOffset;
            pressPoint.y-=yOffset;
            this.network.horizontalScrollPosition+=xOffset;
            this.network.verticalScrollPosition+=yOffset;
        }
    }
Now it has become much more simpler.
network.interactionHandlers=new Collection([
       new CustomInteractionHandler(this),
new DefaultInteractionHandler(this),]);

No comments:

Post a Comment