Image Layers (#1619)

* Plumb through filetype

* Get image layer working end-to-end

* Fix lint issues

* Add images extension

* Fix remainig issues with image layer

browser/src/Editor/OniEditor/ImageBufferLayer.tsx

@@ -0,0 +1,97 @@
+/**
+ * ImageBufferLayer.tsx
+ */
+
+import * as React from "react"
+
+import styled from "styled-components"
+
+// import { inputManager, InputManager } from "./../../Services/InputManager"
+
+import * as Oni from "oni-api"
+
+import { withProps } from "./../../UI/components/common"
+// import { VimNavigator } from "./../../UI/components/VimNavigator"
+
+export class ImageBufferLayer implements Oni.BufferLayer {
+    constructor(private _buffer: Oni.Buffer) {}
+    public get id(): string {
+        return "oni.image"
+    }
+
+    public get friendlyName(): string {
+        return "Image"
+    }
+
+    public render(context: Oni.BufferLayerRenderContext): JSX.Element {
+        return <ImageLayerView imagePath={this._buffer.filePath} key={this._buffer.filePath} />
+    }
+}
+
+export interface IImageLayerViewProps {
+    imagePath: string
+}
+
+export interface IImageLayerViewState {
+    width: number
+    height: number
+}
+
+const ImageContainer = withProps<{}>(styled.div)`
+    background-color: ${props => props.theme["editor.background"]};
+    color: ${props => props.theme["editor.foreground"]};
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    opacity: 0.95;
+
+    & img {
+        max-width: 90%;
+        max-height: 90%;
+
+        padding-bottom: 2em;
+    }
+`
+
+export class ImageLayerView extends React.PureComponent<
+    IImageLayerViewProps,
+    IImageLayerViewState
+> {
+    constructor(props: IImageLayerViewProps) {
+        super(props)
+
+        this.state = {
+            width: -1,
+            height: -1,
+        }
+    }
+    public componentDidMount(): void {
+        const image = new Image()
+        image.onload = () => {
+            this.setState({
+                width: image.width,
+                height: image.height,
+            })
+        }
+        image.src = this.props.imagePath
+    }
+
+    public render(): JSX.Element {
+        const dimensions = this.state ? `${this.state.width}x${this.state.height}` : ""
+
+        return (
+            <ImageContainer>
+                <img src={this.props.imagePath} />
+                <div>{this.props.imagePath}</div>
+                <div>{dimensions}</div>
+            </ImageContainer>
+        )
+    }
+}

browser/src/Editor/OniEditor/OniEditor.tsx

@@ -46,6 +46,8 @@ import { NeovimEditor } from "./../NeovimEditor"
 
 import { windowManager } from "./../../Services/WindowManager"
 
+import { ImageBufferLayer } from "./ImageBufferLayer"
+
 // Helper method to wrap a react component into a layer
 const wrapReactComponentWithLayer = (id: string, component: JSX.Element): Oni.BufferLayer => {
     return {
@@ -142,6 +144,8 @@ export class OniEditor implements IEditor {
         this._neovimEditor.bufferLayers.addBufferLayer("*", buf =>
             wrapReactComponentWithLayer("oni.layer.errors", <ErrorsContainer />),
         )
+
+        this._neovimEditor.bufferLayers.addBufferLayer("image", buf => new ImageBufferLayer(buf))
     }
 
     public dispose(): void {

browser/src/Services/Language/LanguageManager.ts

@@ -331,7 +331,7 @@ export class LanguageManager {
         const buffer = this._editorManager.activeEditor.activeBuffer
         const { language, filePath } = buffer
 
-        if (!language) {
+        if (!language && filePath) {
             const languages = this._pluginManager.getAllContributionsOfType<
                 Capabilities.ILanguageContribution
             >(contributes => contributes.languages)

extensions/images/package.json

@@ -0,0 +1,21 @@
+{
+    "name": "images",
+    "version": "0.0.1",
+    "description": "Images plugin for Oni",
+    "engines": {
+        "oni": "0.2.18"
+    },
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "contributes": {
+        "languages": [
+            {
+                "id": "image",
+                "extensions": [".gif", ".jpg", ".jpeg", ".bmp", ".svg", ".png"]
+            }
+        ]
+    },
+    "author": "",
+    "license": "MIT"
+}