Message dialog #6012

nodeEditor/src/globalState.ts

@@ -15,4 +15,5 @@ export class GlobalState {
     onZoomToFitRequiredObservable = new Observable<void>();
     onReOrganizedRequiredObservable = new Observable<void>();
     onLogRequiredObservable = new Observable<LogEntry>();
+    onErrorMessageDialogRequiredObservable = new Observable<string>();
 }

nodeEditor/src/graphEditor.tsx

@@ -47,6 +47,7 @@ import { CrossBlock } from 'babylonjs/Materials/Node/Blocks/crossBlock';
 import { DotBlock } from 'babylonjs/Materials/Node/Blocks/dotBlock';
 import { MultiplyBlock } from 'babylonjs/Materials/Node/Blocks/multiplyBlock';
 import { TransformBlock } from 'babylonjs/Materials/Node/Blocks/transformBlock';
+import { MessageDialogComponent } from './sharedComponents/messageDialog';
 
 require("storm-react-diagrams/dist/style.min.css");
 require("./main.scss");
@@ -312,6 +313,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                                 catch (err) {
                                     link.output.remove();
                                     this.props.globalState.onLogRequiredObservable.notifyObservers(new LogEntry(err, true));
+                                    this.props.globalState.onErrorMessageDialogRequiredObservable.notifyObservers(err);
                                 }
 
                                 this.forceUpdate();
@@ -558,7 +560,8 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                     <PropertyTabComponent globalState={this.props.globalState} />
 
                     <LogComponent globalState={this.props.globalState} />
-                </div>
+                </div>                
+                <MessageDialogComponent globalState={this.props.globalState} />
             </Portal>
         );
 

nodeEditor/src/main.scss

@@ -45,4 +45,66 @@
 #log-console {
     grid-row: 2;
     grid-column: 3;
+}
+
+.dialog-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: rgba(0.1, 0.1, 0.1, 0.3);
+    display: grid;
+    font-family: "acumin-pro";
+    top:0;
+
+    .dialog {
+        align-self: center;
+        justify-self: center;
+        min-height: 140px;
+        max-width: 400px;
+        border-radius: 10px;
+        background: white;
+
+        display: grid;
+        grid-template-columns: 100%;
+        grid-template-rows: calc(100% - 50px) 50px;
+
+        .dialog-message {
+            grid-row: 1;
+            grid-column: 1;
+            margin-top: 20px;
+            padding: 10px;
+            font-size: 18px;
+            color: black;
+        }
+
+        .dialog-buttons {
+            grid-row: 2;
+            grid-column: 1;
+            display: grid;
+            grid-template-rows: 100%;
+            grid-template-columns: 100%;
+            color: white;
+
+            .dialog-button-ok {
+                cursor: pointer;
+                justify-self: center;
+                background:green;
+                min-width: 80px;
+                justify-content: center;
+                display: grid;
+                align-content: center;
+                align-self: center;
+                height: 35px;      
+                border-radius: 10px;
+
+                &:hover {
+                    opacity: 0.8;
+                }
+
+                &.error {
+                    background: red;
+                }
+            }
+        }
+    }
 }

nodeEditor/src/sharedComponents/messageDialog.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+
+import { GlobalState } from '../globalState';
+
+interface IMessageDialogComponentProps {
+    globalState: GlobalState
+}
+
+export class MessageDialogComponent extends React.Component<IMessageDialogComponentProps, { message: string, isError: boolean }> {
+    constructor(props: IMessageDialogComponentProps) {
+        super(props);
+
+        this.state = {message: "", isError: false};
+
+        this.props.globalState.onErrorMessageDialogRequiredObservable.add((message: string) => {
+            this.setState({message: message, isError: true});
+        });
+    }
+
+    render() {
+        if (!this.state.message) {
+            return null;
+        }
+
+        return (
+            <div className="dialog-container">
+                <div className="dialog">
+                    <div className="dialog-message">
+                        {
+                            this.state.message
+                        }
+                    </div>
+                    <div className="dialog-buttons">
+                        <div className={"dialog-button-ok" + (this.state.isError ? " error" : "")} onClick={() => this.setState({message: ""})}>
+                            OK
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

src/Materials/Node/Blocks/Vertex/bonesBlock.ts

@@ -25,8 +25,8 @@ export class BonesBlock extends NodeMaterialBlock {
 
         this.registerInput("matricesIndices", NodeMaterialBlockConnectionPointTypes.Vector4);
         this.registerInput("matricesWeights", NodeMaterialBlockConnectionPointTypes.Vector4);
-        this.registerInput("matricesIndicesExtra", NodeMaterialBlockConnectionPointTypes.Vector4);
-        this.registerInput("matricesWeightsExtra", NodeMaterialBlockConnectionPointTypes.Vector4);
+        this.registerInput("matricesIndicesExtra", NodeMaterialBlockConnectionPointTypes.Vector4, true);
+        this.registerInput("matricesWeightsExtra", NodeMaterialBlockConnectionPointTypes.Vector4, true);
         this.registerInput("world", NodeMaterialBlockConnectionPointTypes.Matrix);
 
         this.registerOutput("output", NodeMaterialBlockConnectionPointTypes.Matrix);
@@ -104,16 +104,6 @@ export class BonesBlock extends NodeMaterialBlock {
             matricesWeightsInput.setAsAttribute("matricesWeights");
             matricesWeightsInput.output.connectTo(this.matricesWeights);
         }
-        if (!this.matricesIndicesExtra.isConnected) {
-            let matricesIndicesExtraInput = new InputBlock("matricesIndicesExtra", undefined, NodeMaterialBlockConnectionPointTypes.Vector4);
-            matricesIndicesExtraInput.setAsAttribute("matricesIndicesExtra");
-            matricesIndicesExtraInput.output.connectTo(this.matricesIndicesExtra);
-        }
-        if (!this.matricesWeightsExtra.isConnected) {
-            let matricesWeightsExtraInput = new InputBlock("matricesWeightsExtra", undefined, NodeMaterialBlockConnectionPointTypes.Vector4);
-            matricesWeightsExtraInput.setAsAttribute("matricesWeightsExtra");
-            matricesWeightsExtraInput.output.connectTo(this.matricesWeightsExtra);
-        }
         if (!this.world.isConnected) {
             let worldInput = new InputBlock("world", undefined, NodeMaterialBlockConnectionPointTypes.Matrix);
             worldInput.setAsWellKnownValue(NodeMaterialWellKnownValues.World);