線で繋ぐGUI

主な機能は下記のようなものです。ドラッグ＆ドロップ操作は、FlexのAPIを利用すると簡単に実現できます。入力端と出力端は、部品から半分はみ出るレイアウトになっていますが、 Flashの描画オブジェクトは親オブジェクトからはみ出ていても描画、イベント受信ができます。

DiagramSamplePart.as は、部品の実装例です。ドラッグ操作や部品追加操作のために、clone()メソッドで複製を作れるようにします。また、ノード数をタグで指定できるようにノードの実体を初期化イベントで作成します。

package {

    import com.d_project.diagram.Node;
    import com.d_project.diagram.Part;

    import mx.events.FlexEvent;

    public class DiagramSamplePart extends Part {

        public var numInputs : int;

        public var numOutputs : int;

        public function DiagramSamplePart() {
            addEventListener(FlexEvent.INITIALIZE, onInitialize);
        }

        public override function clone() : Part {
            var newPart : DiagramSamplePart = new DiagramSamplePart();
            copyProperties(newPart);
            return newPart;
        }

        protected override function copyProperties(newPart : Object) : void {
            super.copyProperties(newPart);
            newPart.numInputs = numInputs;
            newPart.numOutputs = numOutputs;
        }

        private function onInitialize(e : FlexEvent) : void {

            var i : int;

            var inputs : Array = new Array();
            for (i = 0; i < numInputs; i++) {
                inputs.push(new Node() );
            }
            this.inputs = inputs;

            var outputs : Array = new Array();
            for (i = 0; i < numOutputs; i++) {
                outputs.push(new Node() );
            }
            this.outputs = outputs;
        }
    }
}

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:diagram="com.d_project.diagram.*" xmlns:local="*"
    layout="vertical" backgroundColor="#cccccc" paddingLeft="4" paddingRight="4" paddingTop="4" paddingBottom="4">
  <mx:HDividedBox width="100%" height="100%">

    <mx:Canvas width="100" height="100%" horizontalScrollPolicy="off">
      <diagram:Trash width="100%" height="100%">
        <local:DiagramSamplePart toolTip="2in" numInputs="2" backgroundColor="#ccccff"/>
        <local:DiagramSamplePart toolTip="2out" numOutputs="2" backgroundColor="#ccffcc"/>
        <local:DiagramSamplePart toolTip="2in 2out" numInputs="2" numOutputs="2" backgroundColor="#ffcccc"/>
      </diagram:Trash>
    </mx:Canvas>

    <diagram:Workspace width="100%" height="100%" backgroundColor="#ffffff"/>

  </mx:HDividedBox>
</mx:Application>