소스 검색

Fix texture block display

David Catuhe 5 년 전
부모
커밋
53e78a126b

+ 9 - 1
nodeEditor/src/diagram/display/textureDisplayManager.ts

@@ -6,6 +6,7 @@ import { TextureLineComponent } from '../../sharedComponents/textureLineComponen
 
 export class TextureDisplayManager implements IDisplayManager {
     private _previewCanvas: HTMLCanvasElement;
+    private _previewImage: HTMLImageElement;
 
     public getHeaderClass(block: NodeMaterialBlock) {
         return "";
@@ -30,7 +31,9 @@ export class TextureDisplayManager implements IDisplayManager {
             contentArea.classList.add("texture-block");
 
             this._previewCanvas = contentArea.ownerDocument!.createElement("canvas");
-            contentArea.appendChild(this._previewCanvas);
+            this._previewImage = contentArea.ownerDocument!.createElement("img");
+            contentArea.appendChild(this._previewImage);
+            this._previewImage.classList.add("empty");
         }
 
         if (textureBlock.texture) {
@@ -40,7 +43,12 @@ export class TextureDisplayManager implements IDisplayManager {
                 displayAlpha: true,
                 displayBlue: true,
                 displayGreen: true
+            }, () => {
+                this._previewImage.src = this._previewCanvas.toDataURL("image/png");
+                this._previewImage.classList.remove("empty");
             });
+        } else {
+            this._previewImage.classList.add("empty");
         }
     }
 }

+ 6 - 1
nodeEditor/src/diagram/graphCanvas.scss

@@ -208,9 +208,14 @@
                         border-left: 0px;
                         border-bottom: 0px;
 
-                        canvas {
+                        img {
                             width: 100%;
                             height: 100%;
+                            pointer-events: none;
+
+                            &.empty {
+                                display: none;
+                            }
                         }
                     }
 

+ 2 - 1
nodeEditor/src/diagram/graphNode.ts

@@ -318,7 +318,8 @@ export class GraphNode {
             port.dispose();
         }
 
-        for (var link of this._links) {
+        let links = this._links.slice(0);
+        for (var link of links) {
             link.dispose();           
         }
 

+ 8 - 4
nodeEditor/src/sharedComponents/textureLineComponent.tsx

@@ -49,13 +49,13 @@ export class TextureLineComponent extends React.Component<ITextureLineComponentP
     }
 
     public updatePreview() {
-        TextureLineComponent.UpdatePreview(this.refs.canvas as HTMLCanvasElement, this.props.texture, this.props.width, this.state, this.props.globalState);
+        TextureLineComponent.UpdatePreview(this.refs.canvas as HTMLCanvasElement, this.props.texture, this.props.width, this.state, undefined, this.props.globalState);
     }
 
-    public static UpdatePreview(previewCanvas: HTMLCanvasElement, texture: BaseTexture, width: number, options: ITextureLineComponentState, globalState?: any) {
+    public static UpdatePreview(previewCanvas: HTMLCanvasElement, texture: BaseTexture, width: number, options: ITextureLineComponentState, onReady?: ()=> void, globalState?: any) {
         if (!texture.isReady() && texture._texture) {
             texture._texture.onLoadedObservable.addOnce(() => {
-                TextureLineComponent.UpdatePreview(previewCanvas, texture, width, options, globalState);
+                TextureLineComponent.UpdatePreview(previewCanvas, texture, width, options, onReady, globalState);
             })
         }
         var scene = texture.getScene()!;
@@ -79,7 +79,7 @@ export class TextureLineComponent extends React.Component<ITextureLineComponentP
             // Try again later
             passPostProcess.dispose();
 
-            setTimeout(() => TextureLineComponent.UpdatePreview(previewCanvas, texture, width, options, globalState), 250);
+            setTimeout(() => TextureLineComponent.UpdatePreview(previewCanvas, texture, width, options, onReady, globalState), 250);
 
             return;
         }
@@ -161,6 +161,10 @@ export class TextureLineComponent extends React.Component<ITextureLineComponentP
                 var castData = imageData.data;
                 castData.set(data);
                 context.putImageData(imageData, 0, 0);
+
+                if (onReady) {
+                    onReady();
+                }
             }
 
             // Unbind