Feature/ Add decorations to store for layer elements

browser/src/Editor/NeovimEditor/NeovimBufferLayersView.tsx

@@ -12,18 +12,30 @@ import * as Oni from "oni-api"
 
 import { NeovimActiveWindow } from "./NeovimActiveWindow"
 
+import { clearBufferDecorations, updateBufferDecorations } from "./NeovimEditorActions"
 import * as State from "./NeovimEditorStore"
 
 import styled, { StackLayer } from "../../UI/components/common"
 
-export interface NeovimBufferLayersViewProps {
+interface StateProps {
  activeWindowId: number
  windows: State.IWindow[]
  layers: State.Layers
  fontPixelWidth: number
  fontPixelHeight: number
+ decorations: State.IDecorations
 }
 
+type UpdateDecorations = (decorations: State.IDecoration[], layerId: string) => void
+type ClearDecorations = (layerId: string) => void
+
+interface DispatchProps {
+ updateBufferDecorations: UpdateDecorations
+ clearBufferDecorations: ClearDecorations
+}
+
+export interface NeovimBufferLayersViewProps extends StateProps, DispatchProps {}
+
 const InnerLayer = styled.div`
  position: absolute;
  top: 0px;
@@ -33,17 +45,20 @@ const InnerLayer = styled.div`
  overflow: hidden;
 `
 
-export interface LayerContextWithCursor extends Oni.BufferLayerRenderContext {
+export interface UpdatedLayerContext extends Oni.BufferLayerRenderContext {
  cursorLine: number
  cursorColumn: number
+ decorations: State.IDecorations
+ updateBufferDecorations: UpdateDecorations
+ clearBufferDecorations: ClearDecorations
 }
 
 export class NeovimBufferLayersView extends React.PureComponent<NeovimBufferLayersViewProps, {}> {
- public render(): JSX.Element {
+ public render() {
  const containers = this.props.windows.map(windowState => {
  const layers: Oni.BufferLayer[] = this.props.layers[windowState.bufferId] || []
 
- const layerContext: LayerContextWithCursor = {
+ const layerContext: UpdatedLayerContext = {
  isActive: windowState.windowId === this.props.activeWindowId,
  windowId: windowState.windowId,
  fontPixelWidth: this.props.fontPixelWidth,
@@ -57,6 +72,9 @@ export class NeovimBufferLayersView extends React.PureComponent<NeovimBufferLaye
  bottomBufferLine: windowState.bottomBufferLine,
  cursorColumn: windowState.column,
  cursorLine: windowState.line,
+ decorations: this.props.decorations,
+ updateBufferDecorations: this.props.updateBufferDecorations,
+ clearBufferDecorations: this.props.clearBufferDecorations,
  }
 
  const layerElements = layers.map(layer => {
@@ -110,12 +128,13 @@ const getWindowPixelDimensions = (win: State.IWindow) => {
  }
 }
 
-const EmptyState: NeovimBufferLayersViewProps = {
+const EmptyState: StateProps = {
  activeWindowId: -1,
  layers: {},
  windows: [],
  fontPixelHeight: -1,
  fontPixelWidth: -1,
+ decorations: {},
 }
 
 const getActiveVimTabPage = (state: State.IState) => state.activeVimTabPage
@@ -132,20 +151,29 @@ const windowSelector = createSelector(
  },
 )
 
-const mapStateToProps = (state: State.IState): NeovimBufferLayersViewProps => {
+const mapStateToProps = (state: State.IState) => {
  if (!state.activeVimTabPage) {
  return EmptyState
  }
 
  const windows = windowSelector(state)
 
  return {
- activeWindowId: state.windowState.activeWindow,
  windows,
  layers: state.layers,
+ activeWindowId: state.windowState.activeWindow,
  fontPixelWidth: state.fontPixelWidth,
  fontPixelHeight: state.fontPixelHeight,
+ decorations: state.decorations,
  }
 }
 
-export const NeovimBufferLayers = connect(mapStateToProps)(NeovimBufferLayersView)
+const mapDispatchToProps = {
+ updateBufferDecorations,
+ clearBufferDecorations,
+}
+
+export const NeovimBufferLayers = connect<StateProps, DispatchProps, {}>(
+ mapStateToProps,
+ mapDispatchToProps,
+)(NeovimBufferLayersView)

browser/src/Editor/NeovimEditor/NeovimEditorActions.ts

@@ -59,6 +59,21 @@ export interface IRemoveBufferLayerAction {
  }
 }
 
+export interface IUpdateBufferDecorationsAction {
+ type: "UPDATE_DECORATIONS"
+ payload: {
+ decorations: State.IDecoration[]
+ layerId: string
+ }
+}
+
+export interface IClearBufferDecorationsAction {
+ type: "CLEAR_DECORATIONS"
+ payload: {
+ layerId: string
+ }
+}
+
 export interface ISetViewportAction {
  type: "SET_VIEWPORT"
  payload: {
@@ -293,6 +308,8 @@ export type Action<K extends keyof IConfigurationValues> = SimpleAction | Action
 export type SimpleAction =
  | IAddBufferLayerAction
  | IRemoveBufferLayerAction
+ | IUpdateBufferDecorationsAction
+ | IClearBufferDecorationsAction
  | IBufferEnterAction
  | IBufferSaveAction
  | IBufferUpdateAction
@@ -455,6 +472,19 @@ export const removeBufferLayer = (
  },
 })
 
+export const updateBufferDecorations = (
+ decorations: State.IDecoration[],
+ layerId: string,
+): IUpdateBufferDecorationsAction => ({
+ type: "UPDATE_DECORATIONS",
+ payload: { decorations, layerId },
+})
+
+export const clearBufferDecorations = (layerId: string): IClearBufferDecorationsAction => ({
+ type: "CLEAR_DECORATIONS",
+ payload: { layerId },
+})
+
 export const bufferEnter = (buffers: Array<InactiveBufferContext | EventContext>) => ({
  type: "BUFFER_ENTER",
  payload: {

browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts

@@ -157,6 +157,7 @@ export function reducer<K extends keyof IConfigurationValues>(
  buffers: buffersReducer(s.buffers, a),
  definition: definitionReducer(s.definition, a),
  layers: layersReducer(s.layers, a),
+ decorations: decorationsReducer(s.decorations, a),
  tabState: tabStateReducer(s.tabState, a),
  errors: errorsReducer(s.errors, a),
  toolTips: toolTipsReducer(s.toolTips, a),
@@ -191,6 +192,52 @@ export const layersReducer = (s: State.Layers, a: Actions.SimpleAction) => {
  }
 }
 
+const updateLayerDecorations = (
+ decorations: State.IDecoration[],
+ prevDecorations: State.IDecorations,
+ id: string,
+) => {
+ const updatedDecorations = decorations.reduce((newDecorations, { line }) => {
+ const decorationsOnLine = prevDecorations[line]
+ if (decorationsOnLine) {
+ if (!decorationsOnLine.includes(id)) {
+ newDecorations[line] = [...decorationsOnLine, id]
+ }
+ } else {
+ newDecorations[line] = [id]
+ }
+ return newDecorations
+ }, {})
+ // console.log("updatedDecorations: ", updatedDecorations)
+ return updatedDecorations
+}
+
+const removeLayerDecorations = (prevDecorations: State.IDecorations, id: string) => {
+ const updatedDecorations = Object.entries(prevDecorations).reduce(
+ (newDecorations, [line, decorations]) => {
+ const replacement = decorations.includes(id)
+ ? decorations.filter((layerId: string) => layerId !== id)
+ : decorations
+ newDecorations[line] = replacement
+ return newDecorations
+ },
+ {},
+ )
+ // console.log("updatedDecorations: ", updatedDecorations)
+ return updatedDecorations
+}
+
+export const decorationsReducer = (state: State.IDecorations, action: Actions.SimpleAction) => {
+ switch (action.type) {
+ case "UPDATE_DECORATIONS":
+ return updateLayerDecorations(action.payload.decorations, state, action.payload.layerId)
+ case "CLEAR_DECORATIONS":
+ return removeLayerDecorations(state, action.payload.layerId)
+ default:
+ return state
+ }
+}
+
 export const definitionReducer = (s: State.IDefinition, a: Actions.SimpleAction) => {
  switch (a.type) {
  case "SHOW_DEFINITION":

browser/src/Editor/NeovimEditor/NeovimEditorStore.ts

@@ -47,6 +47,14 @@ export interface IToolTip {
  element: JSX.Element
 }
 
+export interface IDecoration {
+ line: number
+}
+
+export interface IDecorations {
+ [lineNo: number]: string[]
+}
+
 export interface IState {
  // Editor
  cursorScale: number
@@ -82,6 +90,13 @@ export interface IState {
 
  layers: Layers
 
+ /**
+ * A mapping of position of layer ui elements by line
+ * this allows each layer to be aware of where other layers are rendering
+ * elements
+ */
+ decorations: IDecorations
+
  windowState: IWindowState
 
  errors: Errors
@@ -213,6 +228,8 @@ export const createDefaultState = (): IState => ({
 
  layers: {},
 
+ decorations: {},
+
  tabState: {
  selectedTabId: null,
  tabs: [],