subroutine.html

{{name_node(definition)}}
<div ng-switch="definition | editor_type">

<div ng-switch-when="graph" graph="definition">

<div id="graph">
    <canvas id="connections" connections="definition"></canvas>
    <div id="selection" ng-style="selection_style()"></div>
    <div class="subroutine-input source" ng-repeat="input in definition.inputs" ng-style="{'top':(($index+1) * editor_size.y / (definition.inputs.length+1)) + 'px'}">
        <div nib="input" node="definition"></div>
        <input ng-model="input.text" shrinky-input="input.text">
        <a ng-click="delete_input(input)">-</a>
        <div><input ng-model="input.default_value" shrinky-input="input.default_value"></div>
    </div>
    <a id="new-input" ng-click="new_input(subroutine)">+Input</a>

    <div class="subroutine-output sink" ng-repeat="output in definition.outputs" ng-style="{'top':(($index+1) * editor_size.y / (definition.outputs.length+1)) + 'px'}">
        <a ng-click="delete_output(output)">-</a>
        <input ng-model="output.text" shrinky-input="output.text">
        <div nib="output" node="definition"></div>
        <div><a ng-click="evaluate_output(output)">evaluate</a></div>
    </div>
    <a id="new-output" ng-click="new_output(subroutine)">+Output</a>

    <div class="node {{node | node_type}} {{node.implementation | implementation_type}}"
        ng-class="{'in-lambda':!!node.lambda_node, 'selected':selected(node)}" 
        ng-repeat="node in definition.nodes"
        node="node"
        ng-style="position(node)"
        ng-mousedown="click_node(node, $event)"
        ng-dblclick="edit_node(node, $event)"
        ng-rightclick=""
        >

        <div ng-switch="(node.implementation | isa:'Lambda') && (node | isa: 'Value')">
            <div ng-switch-when="true" class="lambda">

                <ul class="unstyled"><li ng-repeat="source in node.get_node_sources()" class="source">
                    <div nib="source" node="node"></div>
                    {{source.text}}
                </li></ul>

                <div class="inner-lambda">
                    <ul class="unstyled"><li ng-repeat="output in node.implementation.outputs" class="sink">
                        {{output.text}}
                        <div nib="output" node="node"></div>
                    </li></ul>

                    <div class="lambda-canvas">
                    </div>

                    <ul class="unstyled">
                        <li ng-repeat="input in node.implementation.inputs" class="source">
                        <ul class="unstyled"><li ng-repeat="index in [0]">
                            <div nib="input" index="index" node="node"></div>
                            {{input.text}}
                        </li></ul>
                    </li></ul>
                </div>
            </div>

            <div ng-switch-default>
                <ul class="unstyled"><li ng-repeat="source in node.get_node_sources()" class="source">
                    <div class="value">{{debugger_scope.nodes[node.id].output_values[source.id]}}</div>
                	<div nib="source" node="node"></div>
                	{{source.text}}
                </li></ul>

                <div class="node-title">{{node.implementation | text_or_id}}</div>

                <ul class="unstyled">
                    <li ng-repeat="sink in node.get_node_sinks()" class="sink">
                    <ul class="unstyled"><li ng-repeat="index in [0]">
                    	{{sink.text}}
                    	<div nib="sink" index="index" node="node"></div>
                    </li></ul>
                </li></ul>
            </div>
        </div>
    </div>
</div>

<div id="editor-options">
    <div id="title-row">
    <div ng-include="'definition-options.html'"></div>

    <!--<a ng-click="duplicate()">duplicate</a>-->
    </div>

    <div id="selection-row" class="btn-toolbar" ng-show="selection.length">
        <a class="btn" ng-show="can_delete_selection()" ng-click="delete_selection()">Delete</a>
        <a class="btn" ng-show="can_edit_selected_node()" ng-click="edit_node(selection[0])">Edit</a>
        <a class="btn" ng-show="can_bust_selected_node()" ng-click="bust_selected_node()">Bust</a>
        <a class="btn" ng-show="can_join_selected_nodes()" ng-click="join_selected_nodes()">Join</a>
        <span ng-pluralize count="selection.length" when="{'0':'', '1':'selected node', 'other':'selected nodes'}"></span>
    </div>
</div>

</div>

<div ng-switch-when="literal">
    <div ng-include="'definition-options.html'"></div>
    <div ace syntax="{{definition | syntax}}" ng-model="definition.value" style="position:relative; width:100%; height:500px"></div>
</div>

<div ng-switch-when="symbol">
    <div ng-include="'definition-options.html'"></div>
</div>

<div ng-switch-when="lambda">
    <div ng-include="'definition-options.html'"></div>
    <div class="container-fluid">
        <div ng-include="'nibs-editor.html'"></div>
    </div>
</div>

<div ng-switch-when="type">
    <div ng-include="'definition-options.html'"></div>
    <div class="container-fluid">
        <div class="span6" ng-include="'input_editor.html'"></div>
    </div>
</div>

<div ng-switch-when="code" id="builtin_editor">
    <div ng-include="'definition-options.html'"></div>
    <label for="stateful"><input id="stateful" type="checkbox" ng-model="definition.stateful">Stateful</label>
    <div class="container-fluid">
        <div ng-include="'nibs-editor.html'"></div>
        <div class="row-fluid">
            <div class="span12">
                <h3>Implementation</h3>
                <div ace syntax="{{definition | syntax}}" ng-model="definition.output_implementation" style="position:relative; width:100%; height:500px"></div>
            </div>
        </div>
    </div>
</div>
</div>


<div ng-switch="!!runtime && !debugger">
    <div ng-switch-when="true" id="runtime">
        <a ng-click="quit_runtime(runtime)">Stop</a>
        <a ng-click="debug(runtime)">Debug</a>
        <ul id="console">
            <li ng-repeat="message in runtime.log_messages | limitTo:20 track by $index" reverse="true">{{message}}</li>
        </ul>
        <div id="graphics" runtime-graphics="runtime"></div>
    </div>
</div>

<div ng-switch="!!debugger">
    <div ng-switch-when="true" id="debugger">
        <a ng-click="debugger_up()">up</a> |
        <a ng-click="stop_debugging()">stop</a> |
        <a ng-click="previous()">previous</a> | 
        <a ng-click="next()">next</a>
        This connection's value: {{current_trace.value|value_representation}}
    </div>
</div>

</div>