Merge pull request #22251 from lierdakil/text-editor-element-component

[atom] Added TextEditorElement and TextEditorComponent

types/atom/atom-tests.ts

@@ -13,6 +13,7 @@ declare let element: HTMLElement;
 declare let elements: HTMLElement[];
 declare const div: HTMLDivElement;
 declare const event: KeyboardEvent;
+declare const mouseEvent: MouseEvent;
 
 declare let buffer: Atom.TextBuffer;
 declare const color: Atom.Color;
@@ -65,6 +66,9 @@ declare let subscription: Atom.Disposable;
 declare let subscriptions: Atom.CompositeDisposable;
 declare let tooltips: Atom.Tooltip[];
 declare let workspaceCenter: Atom.WorkspaceCenter;
+declare let pixelPos: Atom.PixelPosition;
+declare let textEditorElement: Atom.TextEditorElement;
+declare let textEditorComponent: Atom.TextEditorComponent;
 
 // AtomEnvironment ============================================================
 function testAtomEnvironment() {
@@ -269,6 +273,10 @@ function testCommandRegistry() {
         description: "A Command Test",
         displayName: "Command: Test",
     });
+    atom.commands.add("atom-text-editor", {
+        "test-function": (event) => event.currentTarget.getModel(),
+        "test-function2": (event) => event.currentTarget.getComponent(),
+    });
 
     const commands = atom.commands.findCommands({ target: element });
     atom.commands.dispatch(element, "test:function");
@@ -3000,6 +3008,7 @@ function testViewRegistry() {
     });
 
     element = atom.views.getView(element);
+    textEditorElement = atom.views.getView(editor);
 }
 
 // Workspace ==================================================================
@@ -3239,3 +3248,39 @@ const pathWatcherPromise = Atom.watchPath("/var/test", {}, (events) => {
         if (event.oldPath) str = event.oldPath;
     }
 });
+
+// TextEditorElement ==========================================================
+function testTextEditorElement() {
+  textEditorComponent = textEditorElement.getComponent();
+  editor = textEditorElement.getModel();
+
+  textEditorElement.getNextUpdatePromise().then(() => {});
+  let num: number = textEditorElement.getBaseCharacterWidth();
+
+  textEditorElement.scrollToTop();
+  textEditorElement.scrollToBottom();
+  textEditorElement.setScrollTop(num);
+  num = textEditorElement.getScrollTop();
+  textEditorElement.setScrollLeft(num);
+  num = textEditorElement.getScrollLeft();
+  num = textEditorElement.getScrollHeight();
+
+  pixelPos = textEditorElement.pixelPositionForBufferPosition(pos);
+  pixelPos = textEditorElement.pixelPositionForScreenPosition({row: 1, column: 2});
+  pixelPos = textEditorElement.pixelPositionForScreenPosition(pos);
+
+  subscription = textEditorElement.onDidChangeScrollTop((scrollTop: number) => {});
+  subscription = textEditorElement.onDidChangeScrollLeft((scrollLeft: number) => {});
+  subscription = textEditorElement.onDidAttach(() => {});
+  subscription = textEditorElement.onDidDetach(() => {});
+
+  textEditorElement = document.createElement('atom-text-editor');
+}
+
+// TextEditorComponent ========================================================
+function testTextEditorComponent() {
+  pixelPos = textEditorComponent.pixelPositionForMouseEvent(mouseEvent);
+  pixelPos = textEditorComponent.pixelPositionForScreenPosition(pos);
+  pos = textEditorComponent.screenPositionForMouseEvent(mouseEvent);
+  pos = textEditorComponent.screenPositionForPixelPosition(pixelPos);
+}

types/atom/index.d.ts

@@ -1,7 +1,8 @@
 // Type definitions for Atom 1.22
 // Project: https://github.com/atom/atom
-// Definitions by: GlenCFL <https://github.com/GlenCFL>,
+// Definitions by: GlenCFL <https://github.com/GlenCFL>
 //                 smhxx <https://github.com/smhxx>
+//                 lierdakil <https://github.com/lierdakil>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.3
 
@@ -16,6 +17,10 @@ import { ChildProcess } from "child_process";
 
 declare global {
     const atom: AtomEnvironment;
+
+    interface HTMLElementTagNameMap {
+      "atom-text-editor": TextEditorElement;
+    }
 }
 
 /**
@@ -255,21 +260,37 @@ export interface Color {
     toRGBAString(): string;
 }
 
+export interface CommandRegistryTargetMap extends HTMLElementTagNameMap {
+  [key: string]: EventTarget;
+}
+
+export type CommandRegistryListener<TargetType extends EventTarget> = {
+  didDispatch(event: CommandEvent<TargetType>): void,
+  displayName?: string,
+  description?: string,
+} | ((event: CommandEvent<TargetType>) => void);
+
 /**
  *  Associates listener functions with commands in a context-sensitive way
  *  using CSS selectors.
  */
 export interface CommandRegistry {
     /** Register a single command. */
-    add(target: string|Node, commandName: string, listener: {
-        didDispatch(event: CommandEvent): void,
-        displayName?: string,
-        description?: string,
-    } | ((event: CommandEvent) => void)): Disposable;
+    add<T extends keyof CommandRegistryTargetMap>(
+        target: T, commandName: string,
+        listener: CommandRegistryListener<CommandRegistryTargetMap[T]>
+      ): Disposable;
+    add<T extends Node>(
+        target: T, commandName: string,
+        listener: CommandRegistryListener<T>
+      ): Disposable;
 
     /** Register multiple commands. */
-    add(target: string|Node, commands: {
-        [key: string]: (event: CommandEvent) => void
+    add<T extends keyof CommandRegistryTargetMap>(target: T, commands: {
+        [key: string]: (event: CommandEvent<CommandRegistryTargetMap[T]>) => void
+    }): CompositeDisposable;
+    add<T extends Node>(target: T, commands: {
+        [key: string]: (event: CommandEvent<T>) => void
     }): CompositeDisposable;
 
     /** Find all registered commands matching a query. */
@@ -2390,6 +2411,68 @@ export class TextEditor {
     tokenForBufferPosition(pos: PointCompatible): {value: string, scopes: string[]};
 }
 
+export interface PixelPosition {
+    left: number;
+    top: number;
+}
+
+/**
+ *  Undocumented: Rendering component for TextEditor
+ */
+export interface TextEditorComponent {
+  /** Does not clip screenPosition, unlike similar method on TextEditorElement */
+  pixelPositionForScreenPosition(screenPosition: PointLike): PixelPosition;
+  screenPositionForPixelPosition(pos: PixelPosition): Point;
+  pixelPositionForMouseEvent(event: {
+    clientX: number, clientY: number
+  }): PixelPosition;
+  screenPositionForMouseEvent(event: {clientX: number, clientY: number}): Point;
+}
+
+/**
+ *  Undocumented: Custom HTML elemnent for TextEditor, atom-text-editor
+ */
+export interface TextEditorElement extends HTMLElement {
+  getModel(): TextEditor;
+  getComponent(): TextEditorComponent;
+  /**
+   * Extended: Get a promise that resolves the next time the element's
+   * DOM is updated in any way.
+   */
+  getNextUpdatePromise(): Promise<void>;
+
+  /** Extended: get the width of an `x` character displayed in this element. */
+  getBaseCharacterWidth(): number;
+
+  /** Essential: Scrolls the editor to the top. */
+  scrollToTop(): void;
+
+  /** Essential: Scrolls the editor to the bottom. */
+  scrollToBottom(): void;
+
+  setScrollTop(scrollTop: number): void;
+  getScrollTop(): number;
+
+  setScrollLeft(scrollLeft: number): void;
+  getScrollLeft(): number;
+
+  getScrollHeight(): number;
+
+  /** Extended: Converts a buffer position to a pixel position. */
+  pixelPositionForBufferPosition(bufferPosition: PointLike): PixelPosition;
+
+  /** Extended: Converts a screen position to a pixel position. */
+  pixelPositionForScreenPosition(screenPosition: PointLike): PixelPosition;
+
+  // Event subscription
+  onDidChangeScrollTop(callback: (scrollTop: number) => void): Disposable;
+  onDidChangeScrollLeft(callback: (scrollLeft: number) => void): Disposable;
+  /** Called when the editor is attached to the DOM. */
+  onDidAttach(callback: () => void): Disposable;
+  /** Called when the editor is detached from the DOM. */
+  onDidDetach(callback: () => void): Disposable;
+}
+
 /** Experimental: This global registry tracks registered TextEditors. */
 export interface TextEditorRegistry {
     // Managing Text Editors
@@ -2478,6 +2561,7 @@ export interface ViewRegistry {
         (instance: T) => HTMLElement|undefined): Disposable;
 
     /** Get the view associated with an object in the workspace. */
+    getView(obj: TextEditor): TextEditorElement;
     getView(obj: object): HTMLElement;
 }
 
@@ -5283,13 +5367,14 @@ export interface BufferStoppedChangingEvent {
  *  intent to stop propagation so event bubbling can be properly simulated for
  *  detached elements.
  */
-export interface CommandEvent extends CustomEvent {
+export interface CommandEvent<CurrentTarget extends EventTarget = EventTarget> extends CustomEvent {
     keyBindingAborted: boolean;
     propagationStopped: boolean;
 
     abortKeyBinding(): void;
     stopPropagation(): CustomEvent;
     stopImmediatePropagation(): CustomEvent;
+    currentTarget: CurrentTarget;
 }
 
 export interface CursorPositionChangedEvent {