@lvce-editor/completion-worker 1.4.0 → 1.6.0

package/dist/completionWorkerMain.js

@@ -82,12 +82,24 @@ const getType = value => {
       return 'unknown';
   }
 };
+const object = value => {
+  const type = getType(value);
+  if (type !== 'object') {
+    throw new AssertionError('expected value to be of type object');
+  }
+};
 const number = value => {
   const type = getType(value);
   if (type !== 'number') {
     throw new AssertionError('expected value to be of type number');
   }
 };
+const string = value => {
+  const type = getType(value);
+  if (type !== 'string') {
+    throw new AssertionError('expected value to be of type string');
+  }
+};
 
 const isMessagePort = value => {
   return value && value instanceof MessagePort;
@@ -848,11 +860,11 @@ const commands = Object.create(null);
 const register = commandMap => {
   Object.assign(commands, commandMap);
 };
-const getCommand = key => {
+const getCommand$1 = key => {
   return commands[key];
 };
 const execute$1 = (command, ...args) => {
-  const fn = getCommand(command);
+  const fn = getCommand$1(command);
   if (!fn) {
     throw new Error(`command not found ${command}`);
   }
@@ -1046,16 +1058,20 @@ const create$1 = (uid, x, y, width, height, editorUid, editorLanguageId) => {
   set$2(uid, state, state);
 };
 
-const isEqual$3 = (oldState, newState) => {
+const isEqual$4 = (oldState, newState) => {
   return oldState.x === newState.x && oldState.y === newState.y && oldState.width === newState.width && oldState.height === newState.height;
 };
 
+const isEqual$3 = (oldState, newState) => {
+  return oldState.version === newState.version;
+};
+
 const isEqual$2 = (oldState, newState) => {
   return oldState.version === newState.version;
 };
 
 const isEqual$1 = (oldState, newState) => {
-  return oldState.items === newState.items;
+  return oldState.items === newState.items && oldState.focusedIndex === newState.focusedIndex;
 };
 
 const isEqual = (oldState, newState) => {
@@ -1067,9 +1083,10 @@ const RenderBounds = 8;
 const RenderEventListeners = 11;
 const RenderUid = 12;
 const RenderContent = 13;
+const RenderFocusContext = 14;
 
-const modules = [isEqual$2, isEqual$1, isEqual$3, isEqual];
-const numbers = [RenderEventListeners, RenderItems, RenderBounds, RenderUid];
+const modules = [isEqual$3, isEqual$1, isEqual$4, isEqual, isEqual$2];
+const numbers = [RenderEventListeners, RenderItems, RenderBounds, RenderUid, RenderFocusContext];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1091,12 +1108,327 @@ const diff2 = uid => {
   return diffResult;
 };
 
+const focusIndex = (state, index) => {
+  const newState = {
+    ...state,
+    focusedIndex: index,
+    focused: true
+  };
+  return newState;
+};
+
+const focusFirst = state => {
+  const firstIndex = 0;
+  return focusIndex(state, firstIndex);
+};
+
+const focusNext = state => {
+  const {
+    focusedIndex
+  } = state;
+  const nextIndex = focusedIndex + 1;
+  return focusIndex(state, nextIndex);
+};
+
+const focusPrevious = state => {
+  const previousIndex = state.focusedIndex - 1;
+  return focusIndex(state, previousIndex);
+};
+
+const openDetails = async state => {
+  // TODO ask editor worker to add completion details widget
+  return state;
+};
+
+const rpcs = Object.create(null);
+const set$a = (id, rpc) => {
+  rpcs[id] = rpc;
+};
+const get = id => {
+  return rpcs[id];
+};
+
+/* eslint-disable  @typescript-eslint/explicit-function-return-type */
+
+const create = rpcId => {
+  return {
+    // @ts-ignore
+    invoke(method, ...params) {
+      const rpc = get(rpcId);
+      // @ts-ignore
+      return rpc.invoke(method, ...params);
+    },
+    // @ts-ignore
+    invokeAndTransfer(method, ...params) {
+      const rpc = get(rpcId);
+      // @ts-ignore
+      return rpc.invokeAndTransfer(method, ...params);
+    },
+    set(rpc) {
+      set$a(rpcId, rpc);
+    }
+  };
+};
+const EditorWorker$1 = 99;
+const ExtensionHostWorker = 44;
+const {
+  invoke: invoke$9,
+  invokeAndTransfer: invokeAndTransfer$9,
+  set: set$9
+} = create(EditorWorker$1);
+const EditorWorker = {
+  __proto__: null,
+  invoke: invoke$9,
+  invokeAndTransfer: invokeAndTransfer$9,
+  set: set$9
+};
+const {
+  invoke: invoke$7,
+  set: set$7
+} = create(ExtensionHostWorker);
+const ExtensionHost = {
+  __proto__: null,
+  invoke: invoke$7,
+  set: set$7
+};
+
+const {
+  invoke: invoke$1,
+  set: set$1,
+  invokeAndTransfer
+} = EditorWorker;
+
+const OnCompletion = 'onCompletion';
+
+const CompletionExecute = 'ExtensionHostCompletion.execute';
+const CompletionResolveExecute = 'ExtensionHostCompletion.executeResolve';
+
+// TODO add tests for this
+const activateByEvent = async event => {
+  // @ts-ignore
+  await invoke$1('ActivateByEvent.activateByEvent', event);
+};
+
+const {
+  invoke,
+  set
+} = ExtensionHost;
+
+const execute = async ({
+  editorLanguageId,
+  editorUid,
+  args,
+  event,
+  method,
+  noProviderFoundMessage,
+  noProviderFoundResult = undefined
+}) => {
+  const fullEvent = `${event}:${editorLanguageId}`;
+  await activateByEvent(fullEvent);
+  const result = await invoke(method, editorUid, ...args);
+  return result;
+};
+
+const executeCompletionProvider = async (editorUid, editorLanguageId, offset) => {
+  return execute({
+    editorUid,
+    editorLanguageId,
+    event: OnCompletion,
+    method: CompletionExecute,
+    args: [offset],
+    noProviderFoundMessage: 'no completion provider found',
+    noProviderFoundResult: []});
+};
+const executeResolveCompletionItem = async (editor, offset, name, completionItem) => {
+  return execute({
+    event: OnCompletion,
+    method: CompletionResolveExecute,
+    args: [offset, name, completionItem],
+    noProviderFoundMessage: 'no completion provider found',
+    noProviderFoundResult: []});
+};
+
+const getOffsetAtCursor = editorUid => {
+  // TODO ask editor worker
+  return 0;
+};
+
+// TODO possible to do this with events/state machine instead of promises -> enables canceling operations / concurrent calls
+const getCompletions = async (editorUid, editorLanguageId) => {
+  const offset = getOffsetAtCursor();
+  const completions = await executeCompletionProvider(editorUid, editorLanguageId, offset);
+  return completions;
+};
+
+// TODO don't send unnecessary parts of completion item like matches
+const resolveCompletion = async (editorUid, name, completionItem) => {
+  try {
+    string(name);
+    object(completionItem);
+    const offset = getOffsetAtCursor(editorUid);
+    // @ts-ignore
+    const resolvedCompletionItem = await executeResolveCompletionItem(editor, offset, name, completionItem);
+    return resolvedCompletionItem;
+  } catch {
+    return undefined;
+  }
+};
+
+const getSelectionPairs = (selections, i) => {
+  const first = selections[i];
+  const second = selections[i + 1];
+  const third = selections[i + 2];
+  const fourth = selections[i + 3];
+  if (first > third || first === third && second >= fourth) {
+    return [third, fourth, first, second, 1];
+  }
+  return [first, second, third, fourth, 0];
+};
+
+const getSelectionText = (lines, range) => {
+  const startRowIndex = range.start.rowIndex;
+  const startColumnIndex = range.start.columnIndex;
+  const endRowIndex = Math.min(range.end.rowIndex, lines.length - 1);
+  const endColumnIndex = range.end.columnIndex;
+  if (startRowIndex === endRowIndex) {
+    return [lines[startRowIndex].slice(startColumnIndex, endColumnIndex)];
+  }
+  const selectedLines = [lines[startRowIndex].slice(startColumnIndex), ...lines.slice(startRowIndex + 1, endRowIndex), lines[endRowIndex].slice(0, endColumnIndex)];
+  return selectedLines;
+};
+
+// TODO add more exact types
+const replaceRange = (lines, ranges, replacement, origin) => {
+  const changes = [];
+  const rangesLength = ranges.length;
+  for (let i = 0; i < rangesLength; i += 4) {
+    const [selectionStartRow, selectionStartColumn, selectionEndRow, selectionEndColumn] = getSelectionPairs(ranges, i);
+    const start = {
+      rowIndex: selectionStartRow,
+      columnIndex: selectionStartColumn
+    };
+    const end = {
+      rowIndex: selectionEndRow,
+      columnIndex: selectionEndColumn
+    };
+    const selection = {
+      start,
+      end
+    };
+    changes.push({
+      start: start,
+      end: end,
+      inserted: replacement,
+      deleted: getSelectionText(lines, selection),
+      origin
+    });
+  }
+  return changes;
+};
+
+const getEdits = async (editorUid, leadingWord, completionItem) => {
+  const word = completionItem.label;
+  const resolvedItem = await resolveCompletion(editorUid, word, completionItem);
+  const inserted = resolvedItem ? resolvedItem.snippet : word;
+  const lines = await invoke$1('Editor.getLines2', editorUid);
+  const selections = await invoke$1('Editor.getSelections2', editorUid);
+  const [startRowIndex, startColumnIndex] = selections;
+  const leadingWordLength = leadingWord.length;
+  const replaceRange$1 = new Uint32Array([startRowIndex, startColumnIndex - leadingWordLength, startRowIndex, startColumnIndex]);
+  const changes = replaceRange(lines, replaceRange$1, [inserted], '');
+  return changes;
+};
+
+const select = async (state, completionItem) => {
+  const {
+    editorUid,
+    leadingWord
+  } = state;
+  const changes = await getEdits(editorUid, leadingWord, completionItem);
+  // @ts-ignore
+  await invoke$1('Editor.applyEdit2', editorUid, changes);
+  // TODO remove completion widget from editor
+  return {
+    ...state
+  };
+};
+
+const selectIndex = async (state, index) => {
+  const {
+    items
+  } = state;
+  if (index === -1) {
+    return state;
+  }
+  if (index > items.length) {
+    throw new Error('index too large');
+  }
+  const actualIndex = index;
+  const completionItem = items[actualIndex];
+  return select(state, completionItem);
+};
+
+const selectCurrent = state => {
+  const {
+    focusedIndex
+  } = state;
+  return selectIndex(state, focusedIndex);
+};
+
 const commandIds = ['handleSliderPointerDown', 'handleSliderPointerMove', 'initialize'];
 
 const getCommandIds = () => {
   return commandIds;
 };
 
+const Enter = 3;
+const Space$1 = 9;
+const End = 255;
+const Home = 12;
+const UpArrow = 14;
+const DownArrow = 16;
+
+const CtrlCmd = 1 << 11 >>> 0;
+
+const FocusEditorCompletions = 9;
+const FocusEditorRename = 11;
+
+const Completion = 3;
+
+const getCommand = shortId => {
+  return {
+    command: 'Editor.executeWidgetCommand',
+    args: ['Completions', `Completions.${shortId}`, 0, Completion]
+  };
+};
+const getKeyBindings = () => {
+  return [{
+    key: DownArrow,
+    ...getCommand('focusNext'),
+    when: FocusEditorCompletions
+  }, {
+    key: UpArrow,
+    ...getCommand('focusPrevious'),
+    when: FocusEditorCompletions
+  }, {
+    key: Enter,
+    ...getCommand('selectCurrent'),
+    when: FocusEditorCompletions
+  }, {
+    key: End,
+    ...getCommand('focusLast'),
+    when: FocusEditorCompletions
+  }, {
+    key: Home,
+    ...getCommand('focusFirst'),
+    when: FocusEditorCompletions
+  }, {
+    key: CtrlCmd | Space$1,
+    ...getCommand('toggleDetails'),
+    when: FocusEditorCompletions
+  }];
+};
+
 const Diagonal = 1;
 const Left = 2;
 
@@ -1304,63 +1636,40 @@ const getListHeight = (itemsLength, itemHeight, maxHeight) => {
   return Math.min(totalHeight, maxHeight);
 };
 
-const rpcs = Object.create(null);
-const set$a = (id, rpc) => {
-  rpcs[id] = rpc;
-};
-const get = id => {
-  return rpcs[id];
+const getWordAtOffset = async editorUid => {
+  return invoke$1('Editor.getWordAtOffset2', editorUid);
 };
 
-/* eslint-disable  @typescript-eslint/explicit-function-return-type */
-
-const create = rpcId => {
+const handleEditorDeleteLeft = async state => {
+  const {
+    unfilteredItems,
+    itemHeight,
+    maxHeight,
+    editorUid
+  } = state;
+  const x = 0; // TODO
+  // @ts-ignore
+  const y = 0; // TODP
+  const wordAtOffset = await getWordAtOffset(editorUid);
+  if (!wordAtOffset) {
+    return {
+      ...state,
+      disposed: true
+    };
+  }
+  const items = filterCompletionItems(unfilteredItems, wordAtOffset);
+  const newMaxLineY = Math.min(items.length, 8);
+  const height = getListHeight(items.length, itemHeight, maxHeight);
   return {
-    // @ts-ignore
-    invoke(method, ...params) {
-      const rpc = get(rpcId);
-      // @ts-ignore
-      return rpc.invoke(method, ...params);
-    },
-    // @ts-ignore
-    invokeAndTransfer(method, ...params) {
-      const rpc = get(rpcId);
-      // @ts-ignore
-      return rpc.invokeAndTransfer(method, ...params);
-    },
-    set(rpc) {
-      set$a(rpcId, rpc);
-    }
+    ...state,
+    items,
+    x,
+    y,
+    maxLineY: newMaxLineY,
+    leadingWord: wordAtOffset,
+    height
   };
 };
-const EditorWorker$1 = 99;
-const ExtensionHostWorker = 44;
-const {
-  invoke: invoke$9,
-  invokeAndTransfer: invokeAndTransfer$9,
-  set: set$9
-} = create(EditorWorker$1);
-const EditorWorker = {
-  __proto__: null,
-  invoke: invoke$9,
-  invokeAndTransfer: invokeAndTransfer$9,
-  set: set$9
-};
-const {
-  invoke: invoke$7,
-  set: set$7
-} = create(ExtensionHostWorker);
-const ExtensionHost = {
-  __proto__: null,
-  invoke: invoke$7,
-  set: set$7
-};
-
-const {
-  invoke: invoke$1,
-  set: set$1,
-  invokeAndTransfer
-} = EditorWorker;
 
 const getPositionAtCursor = async parentUid => {
   const position = await invoke$1('Editor.getPositionAtCursor', parentUid);
@@ -1368,7 +1677,6 @@ const getPositionAtCursor = async parentUid => {
 };
 
 const getWordBefore = async (editorUid, rowIndex, columnIndex) => {
-  // @ts-ignore
   return invoke$1('Editor.getWordBefore2', editorUid, rowIndex, columnIndex);
 };
 
@@ -1404,6 +1712,52 @@ const handleEditorType = async state => {
   };
 };
 
+const clamp = (num, min, max) => {
+  number(num);
+  number(min);
+  number(max);
+  return Math.min(Math.max(num, min), max);
+};
+
+// TODO optimize this function to return the minimum number
+// of visible items needed, e.g. when not scrolled 5 items with
+// 20px fill 100px but when scrolled 6 items are needed
+const getNumberOfVisibleItems = (listHeight, itemHeight) => {
+  return Math.ceil(listHeight / itemHeight) + 1;
+};
+
+const setDeltaY = (state, value) => {
+  object(state);
+  number(value);
+  const {
+    itemHeight,
+    finalDeltaY,
+    deltaY,
+    height,
+    headerHeight
+  } = state;
+  const listHeight = height - headerHeight;
+  const newDeltaY = clamp(value, 0, finalDeltaY);
+  if (deltaY === newDeltaY) {
+    return state;
+  }
+  // TODO when it only moves by one px, extensions don't need to be rerendered, only negative margin
+  const minLineY = Math.floor(newDeltaY / itemHeight);
+  const maxLineY = minLineY + getNumberOfVisibleItems(listHeight, itemHeight);
+  return {
+    ...state,
+    deltaY: newDeltaY,
+    minLineY,
+    maxLineY
+  };
+};
+
+const handleWheel = (state, deltaMode, deltaY) => {
+  number(deltaMode);
+  number(deltaY);
+  return setDeltaY(state, state.deltaY + deltaY);
+};
+
 const getPortTuple = () => {
   const {
     port1,
@@ -1441,74 +1795,17 @@ const createExtensionHostRpc = async () => {
   }
 };
 
-const {
-  invoke,
-  set
-} = ExtensionHost;
-
 const initialize = async () => {
   const rpc = await createExtensionHostRpc();
   set(rpc);
 };
 
-const OnCompletion = 'onCompletion';
-
-const CompletionExecute = 'ExtensionHostCompletion.execute';
-
-// TODO add tests for this
-const activateByEvent = async event => {
-  // @ts-ignore
-  await invoke$1('ActivateByEvent.activateByEvent', event);
-};
-
-const execute = async ({
-  editorLanguageId,
-  editorUid,
-  args,
-  event,
-  method,
-  noProviderFoundMessage,
-  noProviderFoundResult = undefined
-}) => {
-  const fullEvent = `${event}:${editorLanguageId}`;
-  await activateByEvent(fullEvent);
-  const result = await invoke(method, editorUid, ...args);
-  return result;
-};
-
-const executeCompletionProvider = async (editorUid, editorLanguageId, offset) => {
-  return execute({
-    editorUid,
-    editorLanguageId,
-    event: OnCompletion,
-    method: CompletionExecute,
-    args: [offset],
-    noProviderFoundMessage: 'no completion provider found',
-    noProviderFoundResult: []});
-};
-
-const getOffsetAtCursor = editorUid => {
-  // TODO ask editor worker
-  return 0;
-};
-
-// TODO possible to do this with events/state machine instead of promises -> enables canceling operations / concurrent calls
-const getCompletions = async (editorUid, editorLanguageId) => {
-  const offset = getOffsetAtCursor();
-  const completions = await executeCompletionProvider(editorUid, editorLanguageId, offset);
-  return completions;
-};
-
 const getFinalDeltaY = (height, itemHeight, itemsLength) => {
   const contentHeight = itemsLength * itemHeight;
   const finalDeltaY = Math.max(contentHeight - height, 0);
   return finalDeltaY;
 };
 
-const getWordAtOffset = async editorUid => {
-  return invoke$1('Editor.getWordAtOffset2', editorUid);
-};
-
 const loadContent = async state => {
   const {
     itemHeight,
@@ -1545,7 +1842,8 @@ const loadContent = async state => {
     // @ts-ignore
     rowIndex,
     columnIndex,
-    width: 200
+    width: 200,
+    version: 1
   };
 };
 
@@ -1585,6 +1883,10 @@ const renderEventListeners = state => {
   return [SetEventListeners, uid, eventListeners];
 };
 
+const renderFocusContext = (oldState, newState) => {
+  return [/* method */'Viewlet.setFocusContext', FocusEditorRename];
+};
+
 const ColoredMaskIcon = 'ColoredMaskIcon';
 const EditorCompletion = 'EditorCompletion';
 const EditorCompletionItem = 'EditorCompletionItem';
@@ -1870,6 +2172,8 @@ const getRenderer = diffType => {
       return renderUid;
     case RenderItems:
       return renderItems;
+    case RenderFocusContext:
+      return renderFocusContext;
     default:
       throw new Error('unknown renderer');
   }
@@ -1901,12 +2205,22 @@ const terminate = () => {
 const commandMap = {
   'Completions.create': create$1,
   'Completions.diff2': diff2,
+  'Completions.focusFirst': wrapCommand(focusFirst),
+  'Completions.focusIndex': wrapCommand(focusIndex),
+  'Completions.focusNext': wrapCommand(focusNext),
+  'Completions.focusPrevious': wrapCommand(focusPrevious),
   'Completions.getCommandIds': getCommandIds,
+  'Completions.getKeyBindings': getKeyBindings,
+  'Completions.handleEditorDeleteLeft': wrapCommand(handleEditorDeleteLeft),
+  'Completions.handleEditorType': handleEditorType,
+  'Completions.handleWheel': wrapCommand(handleWheel),
+  'Completions.initialize': initialize,
   'Completions.loadContent': wrapCommand(loadContent),
   'Completions.render2': render2,
+  'Completions.selectCurrent': wrapCommand(selectCurrent),
+  'Completions.selectIndex': wrapCommand(selectIndex),
   'Completions.terminate': terminate,
-  'Completions.initialize': initialize,
-  'Completions.handleEditorType': handleEditorType
+  'Completions.openDetails': wrapCommand(openDetails)
 };
 
 const listen = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/completion-worker",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "Web Worker for the find widget in Lvce Editor",
   "repository": {
     "type": "git",