update 'graph-sm'

Content/Scripts/demos/build/demo-sm.js

@@ -0,0 +1,295 @@
+const _ = require('lodash');
+const ReactUMG = require('react-umg');
+const React = require('react');
+
+const LoadSchema_SM = require('../lib/sm-schema');
+
+function GenerateNode(ParentGraph, Template) {
+    let Graph = ParentGraph.GetOuter();
+
+    ParentGraph.ModifyObject();
+    Graph.ModifyObject();
+
+    let NewNode = new JavascriptObject(Graph);
+
+    NewNode.Ref = Template.ref;
+
+    let NodeCreator = Graph.EdGraph.NodeCreator();
+    let GraphNode = NodeCreator.Node;
+
+    GraphNode.GraphNode = NewNode;
+
+    NodeCreator.Finalize();
+
+    _.each(Template.meta, (value, key) => GraphNode[key] = value);
+    _.each(Template.delegate, (func, funcName) => GraphNode[funcName] = () => func(GraphNode, NewNode.Ref));
+
+    Graph.PostEditChange();
+    Graph.MarkPackageDirty();
+
+    Graph.uNodes.push(GraphNode);
+
+    return GraphNode;
+}
+
+module.exports = function (E) {
+    const Style_Font = { FontObject: Root.GetEngine().SmallFont, Size: 10 };
+
+    let Style_Editor = new JavascriptStyleSet();
+    Style_Editor.StyleSetName = 'EditorStyle';
+
+    function getGraphModules(_container) {
+        let obj = new JavascriptObject();
+
+        let graph = JavascriptGraphEditorWidget.NewGraph(obj);
+
+        class MySchema extends JavascriptGraphAssetGraphSchema {}
+        let MySchema_C = require('uclass')()(global, MySchema);
+        let schema = MySchema_C.GetDefaultObject();
+        graph.Schema = MySchema_C;
+
+        const { GraphSchema, NodeSchema } = LoadSchema_SM(schema, { StateMachineNode, TrainsitionNode });
+        schema = GraphSchema;
+
+        function CreateConnections(TransitionNode, PreviousState, NextState) {
+            let [Input, Output] = TransitionNode.GetPins();
+
+            let pop = PreviousState.GetOutputPin();
+            let nip = NextState.GetInputPin();
+
+            Input.MakeLinkTo(pop);
+            Output.MakeLinkTo(nip);
+        }
+        schema.OnCreateAutomaticConversionNodeAndConnections = [(PinA, PinB) => {
+            let _schema = _.find(NodeSchema, _schema => _schema.Category == 'Trainsition');
+
+            let TransitionNode = GenerateNode(graph, {
+                ref: _.cloneDeep(_schema.Ref),
+                delegate: _schema.Delegate
+            });
+
+            let NodeA = PinA.GetOwningNode();
+            let NodeB = PinB.GetOwningNode();
+
+            CreateConnections(TransitionNode, NodeA, NodeB);
+
+            if (PinA.GetDirection() == 'EGPD_Output') {
+                CreateConnections(TransitionNode, NodeA, NodeB);
+            } else {
+                CreateConnections(TransitionNode, NodeB, NodeA);
+            }
+        }];
+
+        schema.OnTakeWidget = [node => {
+            if (node.IsTrainsionNode()) {
+                node.BackgroundColor.SpecifiedColor = { R: 0.1, G: 0.1, B: 0.1, A: 1 };
+            } else {
+                node.BackgroundColor.SpecifiedColor = { R: 0.08, G: 0.08, B: 0.08, A: 1 };
+            }
+
+            return node.GetWidget().TakeWidget();
+        }];
+
+        schema.OnContextActions = [() => _(NodeSchema).filter(_schema => !_schema.Hidden).map(_schema => {
+            return {
+                Category: _schema.Category,
+                MenuDescription: _schema.MenuDescription,
+                TooltipDescription: ""
+            };
+        }).value()];
+
+        schema.OnPerformAction = [(action, context) => {
+            let _schema = _.find(NodeSchema, _schema => _schema.MenuDescription == action.MenuDescription);
+            let { Location } = context;
+
+            let StateMachineNode = GenerateNode(graph, {
+                ref: _.cloneDeep(_schema.Ref),
+                delegate: _schema.Delegate,
+                meta: { NodePosX: Location.X, NodePosY: Location.Y }
+            });
+
+            JavascriptGraphEditorLibrary.TryConnection(schema, context.FromPins[0], StateMachineNode.GetInputPin());
+        }];
+
+        obj.EdGraph = graph;
+        obj.uNodes = [];
+
+        function makeGraphCommands() {
+            let context = JavascriptMenuLibrary.NewBindingContext('GraphEditor', 'GraphEditorMenu', '', 'EditorStyle');
+            let commands = new JavascriptUICommands();
+
+            function init() {
+                commands.BindingContext = context;
+                commands.Commands = "SelectAll Delete Copy Cut Paste Duplicate".split(' ').map(x => ({
+                    Id: x,
+                    CommandInfo: JavascriptMenuLibrary.GenericCommand(x)
+                }));
+                commands.Initialize();
+            }
+
+            commands.OnExecuteAction = what => {
+                let commands = {
+                    Delete: () => {
+                        const container = _container();
+                        if (container) {
+                            graph.ModifyObject();
+                            let nodes = container.ueobj.GetSelectedNodes();
+                            nodes.forEach(node => {
+                                if (node.CanUserDeleteNode()) {
+                                    node.ModifyObject();
+                                    node.DestroyNode();
+                                }
+                            });
+                            container.ueobj.ClearSelectionSet();
+                        }
+                    },
+                    SelectAll: () => {
+                        const container = _container();
+                        if (container) {
+                            container.ueobj.SelectAllNodes();
+                        }
+                    }
+                };
+                let cmd = commands[what];
+                if (!cmd) {
+                    throw new Error(what);
+                }
+                cmd();
+            };
+
+            commands.OnCanExecuteAction = what => {
+                let commands = {
+                    Delete: () => {
+                        const container = _container();
+                        let nodes = container != null ? container.ueobj.GetSelectedNodes() : [];
+                        return _.some(nodes, node => node.CanUserDeleteNode());
+                    },
+                    Copy: () => {
+                        const container = _container();
+                        let nodes = container != null ? container.ueobj.GetSelectedNodes() : [];
+                        return _.some(nodes, node => node.CanDuplicateNode());
+                    },
+                    Cut: () => commands.Copy && commands.Delete
+                };
+                let cmd = commands[what];
+                return !cmd || cmd();
+            };
+
+            function uninit() {
+                commands.Uninitialize();
+                context.Destroy();
+            }
+
+            init();
+            commands.destroy = uninit;
+
+            return commands;
+        }
+
+        let graphCommands = makeGraphCommands();
+        let graphCommandList = JavascriptMenuLibrary.CreateUICommandList();
+        graphCommands.Bind(graphCommandList);
+
+        return {
+            graph: graph,
+            graphCommandList: graphCommandList,
+            nodeSchema: NodeSchema,
+            destroy: () => {
+                obj.uNodes.forEach(node => node.GraphNode.Ref = null);
+                graphCommands.destroy();
+            }
+        };
+    }
+
+    class StateMachineNode extends React.Component {
+        render() {
+            const nodeName = this.props.nodeName;
+            const Style_Brush_Color = { R: 0.08, G: 0.08, B: 0.08, A: 1 };
+            const Style_Slot = { 'HorizontalAlignment': 'HAlign_Center', 'VerticalAlignment': 'VAlign_Center' };
+            return React.createElement(
+                'uBorder',
+                {
+                    Brush: Style_Editor.GetBrush('Graph.StateNode.ColorSpill'),
+                    BrushColor: Style_Brush_Color,
+                    Slot: Style_Slot,
+                    Visibility: 'SelfHitTestInvisible' },
+                React.createElement(
+                    'span',
+                    null,
+                    React.createElement('text', {
+                        Font: Style_Font,
+                        Slot: { Style_Slot },
+                        Text: nodeName
+                    })
+                )
+            );
+        }
+    }
+
+    class TrainsitionNode extends React.Component {
+        render() {
+            const nodeName = this.props.nodeName;
+            const Style_Brush_Color = { R: 0.7, G: 0.1, B: 0.1, A: 1 };
+            const Style_Slot = { 'HorizontalAlignment': 'HAlign_Center', 'VerticalAlignment': 'VAlign_Center' };
+            return React.createElement(
+                'uBorder',
+                {
+                    Brush: Style_Editor.GetBrush('Graph.StateNode.ColorSpill'),
+                    BrushColor: Style_Brush_Color,
+                    Slot: Style_Slot,
+                    Visibility: 'SelfHitTestInvisible' },
+                React.createElement(
+                    'span',
+                    null,
+                    React.createElement('text', {
+                        Font: Style_Font,
+                        Slot: { Style_Slot },
+                        Text: nodeName
+                    })
+                )
+            );
+        }
+    }
+
+    class GraphSMEditor extends React.Component {
+        constructor(props, context) {
+            super(props, context);
+
+            this.graphContainer = null;
+            let { graph, graphCommandList, nodeSchema, destroy } = getGraphModules(() => this.graphContainer);
+            this.graph = graph;
+            this.graphCommandList = graphCommandList;
+            this.NodeSchema = nodeSchema;
+            this.destroy = destroy;
+        }
+
+        componentWillMount() {
+            this.LoadGraph();
+        }
+
+        componentWillUnmount() {
+            this.destroy();
+        }
+
+        LoadGraph() {
+            let _schema = _.find(this.NodeSchema, _schema => _schema.Category == 'StateMachine');
+
+            GenerateNode(this.graph, {
+                ref: _.cloneDeep(_schema.Ref),
+                delegate: _schema.Delegate,
+                meta: { NodePosX: -300, NodePosY: 0 }
+            });
+        }
+
+        render() {
+            return React.createElement(
+                'uSizeBox',
+                null,
+                React.createElement('uJavascriptGraphEditorWidget', { ref: ref => this.graphContainer = ref, Graph: this.graph, CommandList: this.graphCommandList,
+                    AppearanceInfo: { CornerText: "Hello SM" } })
+            );
+        }
+    }
+
+    return ReactUMG.wrap(React.createElement(GraphSMEditor, null));
+};

Content/Scripts/demos/build/extension-tool.js

@@ -162,6 +162,9 @@ function layout() {
                     }, {
                         TabId: 'GraphTab',
                         TabState: 'OpenedTab'
+                    }, {
+                        TabId: 'GraphSMTab',
+                        TabState: 'OpenedTab'
                     }]
                 }, {
                     Type: 'Stack',
@@ -193,6 +196,10 @@ function graphTab(E) {
     return makeTab('GraphTab', () => require('./demo-graph')(E));
 }
 
+function graphSMTab(E) {
+    return makeTab('GraphSMTab', () => require('./demo-sm')(E));
+}
+
 function headerDesign() {
     const SmallFont = { FontObject: Root.GetEngine().SmallFont, Size: 12 };
 
@@ -230,7 +237,7 @@ function headerDesign() {
 function design() {
     let E = new events.EventEmitter();
     let tabManager = new JavascriptEditorTabManager(JavascriptLibrary.CreatePackage(null, '/Script/Javascript'));
-    tabManager.Tabs = [viewportTab(E), propsTab(E), browserTab(E), graphTab(E)];
+    tabManager.Tabs = [viewportTab(E), propsTab(E), browserTab(E), graphTab(E), graphSMTab(E)];
     tabManager.Layout = layout();
 
     // @todo : convert to react-umg

Content/Scripts/demos/lib/sm-schema.js

@@ -1,3 +1,7 @@
+const _ = require('lodash')
+const React = require('react');
+const ReactUMG = require('react-umg');
+
 module.exports = (schema, components) => {
 
     /***************************
@@ -12,9 +16,7 @@ module.exports = (schema, components) => {
         Delegate: {
             GetWidget: (GraphNode, ref) => {
                 const ReactComponent = components.StateMachineNode;
-                return (
-                    <ReactComponent nodeName={'StateMachineNode'}/>
-                )
+                return ReactUMG.wrap(React.createElement(ReactComponent, {nodeName: 'StateMachineNode'}));
             },
             IsTrainsionNode: () => false,
             GetInputPin: (GraphNode) => GraphNode.GetPins()[0],
@@ -33,9 +35,7 @@ module.exports = (schema, components) => {
         Delegate: {
             GetWidget: (GraphNode, ref) => {
                 const ReactComponent = components.TrainsitionNode;
-                return (
-                    <ReactComponent nodeName={'TrainsitionNode'}/>
-                )
+                return ReactUMG.wrap(React.createElement(ReactComponent, {nodeName: ':)'}));
             },
             IsTrainsionNode: () => true,
             GetInputPin: (GraphNode) => GraphNode.GetPins()[0],