Basic UI <-> Service Messages Working

src/dataEditor/dataEditorClient.ts

@@ -156,10 +156,11 @@ const StandaloneInitializer: DataEditorInitializer = {
       const statusBar = new StatusBar()
       statusBar.update('[Data Editor]: Extracting Configuration Variables')
       let configVars = editor_config.extractConfigurationVariables()
-      let server = new OmegaEditServer('127.0.0.1', configVars.port)
 
+      let server = new OmegaEditServer('127.0.0.1', configVars.port)
       await server.start(statusBar)
       statusBar.update('[Data Editor]: Server Startup Complete!')
+
       /* Moving on w/ assumption that server is up and running */
       const editor = new StandaloneEditor(params.ctx, configVars)
       await editor.getServiceFrom(server)

src/dataEditor/include/client/dataEditorClient.ts

@@ -1,5 +1,8 @@
-import { IEditServiceProvider } from '../server/Server'
-import { IEditService, IServiceMediator } from '../service/editorService'
+import {
+  IEditService,
+  IEditServiceProvider,
+  IServiceMediator,
+} from '../service/editorService'
 import { DataEditorUI } from './dataEditorUI'
 export abstract class DataEditor implements IServiceMediator {
   protected abstract fileToEdit: string

src/dataEditor/include/client/dataEditorUI.ts

@@ -1,4 +1,6 @@
 export interface DataEditorUI {
   show(): Promise<void>
   sendMessage(msg: any): void
+  setInputHandler(handler: UIInputHandler): void
 }
+export type UIInputHandler = (input: any) => any

src/dataEditor/include/omegaEdit/Session.ts

@@ -1,18 +1,9 @@
 import {
-  ALL_EVENTS,
   CreateSessionResponse,
-  EditorClient,
-  EventSubscriptionRequest,
-  ViewportDataResponse,
-  ViewportEvent,
-  ViewportEventKind,
   createViewport,
   getByteOrderMark,
-  getClient,
   getContentType,
   getLanguage,
-  getLogger,
-  getViewportData,
 } from '@omega-edit/client'
 import EventEmitter from 'events'
 import { Viewport } from './Viewport'
@@ -48,9 +39,14 @@ export class Session {
       this.onMetadataUpdate(this.metadata)
     })
   }
+
+  info() {
+    return { ...this.metadata }
+  }
   getViewports() {
     return this.viewports
   }
+
   async createViewport(
     // client: EditorClient,
     offset: number,
@@ -93,9 +89,7 @@ export class Session {
         })
     })
   }
-  info() {
-    return { ...this.metadata }
-  }
+
   private async populateAsyncMetadata() {
     const contentTypeResponse = await getContentType(
       this.id,

src/dataEditor/include/omegaEdit/Viewport.ts

@@ -1,4 +1,4 @@
-import { createViewport, modifyViewport } from '@omega-edit/client'
+import { modifyViewport } from '@omega-edit/client'
 
 export class Viewport {
   constructor(

src/dataEditor/include/omegaEdit/omegaEditServer.ts

@@ -11,11 +11,14 @@ import {
 import assert from 'assert'
 import path from 'path'
 import { APP_DATA_PATH } from '../../config'
-import { IEditServiceProvider, ServerProcess } from '../server/Server'
+import { ServerProcess } from '../server/Server'
 import { IStatusUpdater } from '../status/IStatus'
 
 import * as fs from 'fs'
-import { IServiceMediator } from '../service/editorService'
+import {
+  IEditServiceProvider,
+  IServiceMediator,
+} from '../service/editorService'
 import { OmegaEditService } from './omegaEditService'
 
 export class OmegaEditServer implements IEditServiceProvider {

src/dataEditor/include/omegaEdit/omegaEditService.ts

@@ -1,9 +1,4 @@
-import {
-  EditorClient,
-  createSession,
-  getClient,
-  modifyViewport,
-} from '@omega-edit/client'
+import { createSession } from '@omega-edit/client'
 import { IEditService, IServiceMediator } from '../service/editorService'
 import { Session } from './Session'
 import { Viewport } from './Viewport'
@@ -12,12 +7,12 @@ export class OmegaEditService extends IEditService {
   static ViewportCapacity = 1024
   private session: Session | undefined = undefined
 
-  constructor(
-    mediator: IServiceMediator,
-    private client: EditorClient
-  ) {
+  constructor(mediator: IServiceMediator) {
     super(mediator)
   }
+  request(msg: { type: string; data: any }) {
+    console.debug(`OmegaEditService received request ${msg.type}`)
+  }
   async set(editingFile: string) {
     try {
       this.session = new Session(await createSession(editingFile), (data) => {

src/dataEditor/include/server/Server.ts

@@ -10,7 +10,7 @@
 //       - getHeartbeat()
 
 // import net from 'net'
-import { IEditService, IServiceMediator } from '../service/editorService'
+// import { IEditService, IServiceMediator } from '../service/editorService'
 
 export type ServerProcess = {
   pidFile: string
@@ -29,9 +29,3 @@ export type ServerProcess = {
 //     }, this.interval)
 //   }
 // }
-export interface IEditServiceProvider {
-  getService(
-    mediator: IServiceMediator,
-    targetFile: string
-  ): Promise<IEditService>
-}

src/dataEditor/include/service/editorService.ts

@@ -2,7 +2,15 @@ export interface IServiceMediator {
   notify(notification: { id: string; data: any }): any
 }
 export abstract class IEditService {
-  constructor(readonly mediator: IServiceMediator) {}
+  constructor(protected mediator: IServiceMediator) {}
+  abstract request(data: any): any
   abstract set(editingFile: string): any
   abstract destroy(): void
 }
+
+export interface IEditServiceProvider {
+  getService(
+    mediator: IServiceMediator,
+    targetFile: string
+  ): Promise<IEditService>
+}

src/dataEditor/standalone/standaloneEditor.ts

@@ -2,7 +2,7 @@ import * as vscode from 'vscode'
 import * as editor_config from '../config'
 import { DataEditor } from '../include/client/dataEditorClient'
 import { OmegaEditService } from '../include/omegaEdit/omegaEditService'
-import { DataEditorUI } from '../include/client/dataEditorUI'
+import { DataEditorUI, UIInputHandler } from '../include/client/dataEditorUI'
 import { SvelteWebviewInitializer } from '../svelteWebviewInitializer'
 
 export class StandaloneEditor extends DataEditor implements vscode.Disposable {
@@ -23,8 +23,12 @@ export class StandaloneEditor extends DataEditor implements vscode.Disposable {
     )
     this.ui?.sendMessage(notification)
   }
+
   initializeUI(ui: DataEditorWebviewPanel): void {
     this.ui = ui
+    this.ui.setInputHandler((uiMsg: any) => {
+      this.editService?.request(uiMsg)
+    })
     setTimeout(() => {
       // Simulate UI Request to scroll viewport
       const request = {
@@ -40,6 +44,7 @@ export class StandaloneEditor extends DataEditor implements vscode.Disposable {
       )
     }, 4000)
   }
+
   async getFile(): Promise<void> {
     const fileUri = await vscode.window.showOpenDialog({
       canSelectMany: false,
@@ -51,20 +56,37 @@ export class StandaloneEditor extends DataEditor implements vscode.Disposable {
   }
 }
 
+interface IDataEditorInputHandler {
+  handle(input: any): any
+}
+
+/*
+UI capable inputs that need to send to service:
+  Viewport:
+    - seek
+    - search
+    - replace
+    - edit (delete)
+  Session:
+    - createViewport ( for multiple viewports to display? )
+*/
 export class DataEditorWebviewPanel implements DataEditorUI {
   protected panel: vscode.WebviewPanel
-  private view: string = 'dataeditor'
+  private view: string = 'dataEditor'
   private svelteWebviewInitializer: SvelteWebviewInitializer
   constructor(context: vscode.ExtensionContext, title: string) {
+    this.svelteWebviewInitializer = new SvelteWebviewInitializer(context)
     this.panel = vscode.window.createWebviewPanel(
       this.view,
       title,
       vscode.ViewColumn.Active,
       { enableScripts: true, retainContextWhenHidden: true }
     )
-    this.svelteWebviewInitializer = new SvelteWebviewInitializer(context)
     this.svelteWebviewInitializer.initialize(this.view, this.panel.webview)
   }
+  setInputHandler(handler: UIInputHandler): void {
+    this.panel.webview.onDidReceiveMessage(handler, this)
+  }
   sendMessage(msg: any): void {
     this.panel.webview.postMessage(msg)
   }

src/svelte/src/components/dataEditor.svelte

@@ -62,6 +62,7 @@ limitations under the License.
   } from './DataDisplays/CustomByteDisplay/BinaryData'
   import { byte_count_divisible_offset } from '../utilities/display'
   import Help from './layouts/Help.svelte'
+  import Button from './Inputs/Buttons/Button.svelte'
 
   $: $UIThemeCSSClass = $darkUITheme ? CSSThemeClass.Dark : CSSThemeClass.Light
 
@@ -94,8 +95,12 @@ limitations under the License.
     const nearestBPRdivisibleViewportFileOffset = byte_count_divisible_offset(
       viewportStartOffset,
       bytesPerRow
-    ) 
-    return (nearestBPRdivisibleTargetFileOffset - nearestBPRdivisibleViewportFileOffset) / bytesPerRow
+    )
+    return (
+      (nearestBPRdivisibleTargetFileOffset -
+        nearestBPRdivisibleViewportFileOffset) /
+      bytesPerRow
+    )
   }
 
   function fetchable_content(offset: number): boolean {
@@ -130,7 +135,13 @@ limitations under the License.
 
     $dataFeedAwaitRefresh = true
 
-    const fetchOffset = Math.max(0, byte_count_divisible_offset(offsetArg - (VIEWPORT_SCROLL_INCREMENT-$bytesPerRow), $bytesPerRow))
+    const fetchOffset = Math.max(
+      0,
+      byte_count_divisible_offset(
+        offsetArg - (VIEWPORT_SCROLL_INCREMENT - $bytesPerRow),
+        $bytesPerRow
+      )
+    )
 
     $dataFeedLineTop = offset_to_viewport_line_number(
       offsetArg,
@@ -252,7 +263,8 @@ limitations under the License.
   function handleKeyBind(event: Event) {
     const kbdEvent = event as KeyboardEvent
     if (key_is_mappable(kbdEvent.key)) {
-      if(document.activeElement) // document.activeElement is possibly undefined / null
+      if (document.activeElement)
+        // document.activeElement is possibly undefined / null
         elementKeypressEventMap.run(document.activeElement.id, kbdEvent)
       return
     }
@@ -314,16 +326,24 @@ limitations under the License.
     on:handleEditorEvent={handleEditorEvent}
     on:traverse-file={traversalEventHandler}
     on:seek={seekEventHandler}
-      />
+  />
 
   <Help />
   <hr />
   <ServerMetrics />
+  <Button
+    description="UI Input Test"
+    fn={() => {
+      vscode.postMessage({
+        type: 'ui-test',
+        data: { viewportId: '1234', data: 0x1234 },
+      })
+    }}>Send UI Input Test</Button
+  >
 </body>
 
 <!-- svelte-ignore css-unused-selector -->
 <style lang="scss">
-
   div.test {
     display: flex;
     flex-wrap: wrap;