@lvce-editor/editor-worker 3.1.0 → 3.3.0

package/dist/editorWorkerMain.js

@@ -116,6 +116,8 @@ const ColorPickerLight = 'ColorPickerLight';
 const ColorPickerRectangle = 'ColorPickerRectangle';
 const ColorPickerSlider = 'ColorPickerSlider';
 const ColorPickerSliderThumb = 'ColorPickerSliderThumb';
+const CompletionDetailCloseButton = 'CompletionDetailCloseButton';
+const CompletionDetailContent = 'CompletionDetailContent';
 const Diagnostic = 'Diagnostic';
 const EditorCompletionItem = 'EditorCompletionItem';
 const EditorCompletionItemDeprecated = 'EditorCompletionItemDeprecated';
@@ -131,11 +133,14 @@ const HoverEditorRow = 'HoverEditorRow';
 const HoverProblem = 'HoverProblem';
 const HoverProblemDetail = 'HoverProblemDetail';
 const HoverProblemMessage = 'HoverProblemMessage';
+const IconClose = 'IconClose';
 const Label = 'Label';
+const MaskIcon = 'MaskIcon';
 const Viewlet = 'Viewlet';
 
 const HandlePointerDown = 'handlePointerDown';
 const HandleSashPointerDown = 'handleSashPointerDown';
+const HandleClose = 'handleClose';
 
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
@@ -6676,6 +6681,24 @@ const editorUnindent = editor => {
 
 // editor.lines //?
 
+const isCompletionDetailWidget = widget => {
+  return widget.id === CompletionDetail;
+};
+const closeDetails = editor => {
+  const {
+    widgets
+  } = editor;
+  const index = widgets.findIndex(isCompletionDetailWidget);
+  if (index === -1) {
+    return editor;
+  }
+  const newWidgets = [...widgets.slice(0, index), ...widgets.slice(index + 1)];
+  return {
+    ...editor,
+    widgets: newWidgets
+  };
+};
+
 const getWidgetState = (editor, id) => {
   const {
     widgets
@@ -6692,18 +6715,6 @@ const getCompletionState = editor => {
   return getWidgetState(editor, Completion);
 };
 
-const closeDetails = editor => {
-  const child = getCompletionState(editor);
-  if (!child) {
-    return editor;
-  }
-  console.log('open details');
-  // TODO when completion details are open, close them
-  // TODO when completion details are opening, close them
-  // TODO when completion details are closed, open them
-  return editor;
-};
-
 const isCompletion$1 = widget => {
   return widget.id === Completion;
 };
@@ -6781,6 +6792,15 @@ const getCompletionDetailState = editor => {
   return getWidgetState(editor, CompletionDetail);
 };
 
+const getCompletionDetailBounds = (completionBounds, borderSize) => {
+  return {
+    x: completionBounds.x + completionBounds.width - borderSize,
+    y: completionBounds.y,
+    width: 100,
+    height: 100
+  };
+};
+
 const openDetails = editor => {
   const child = getCompletionState(editor);
   if (!child) {
@@ -6791,16 +6811,11 @@ const openDetails = editor => {
     return editor;
   }
   const widget = create();
-  console.log({
-    child
-  });
+  const borderSize = 1;
   const newestState = {
     ...widget.newState,
     content: 'abc',
-    x: child.x + child.width,
-    y: child.y,
-    width: 100,
-    height: 100
+    ...getCompletionDetailBounds(child, borderSize)
   };
   const latestWidgets = [...editor.widgets, {
     ...widget,
@@ -6890,14 +6905,11 @@ const selectCurrent = editor => {
 };
 
 const toggleDetails = editor => {
-  const child = getCompletionState(editor);
+  const child = getCompletionDetailState(editor);
   if (!child) {
-    return editor;
+    return openDetails(editor);
   }
-  // TODO when completion details are open, close them
-  // TODO when completion details are opening, close them
-  // TODO when completion details are closed, open them
-  return editor;
+  return closeDetails(editor);
 };
 
 const executeHoverProvider = (editor, offset) => {
@@ -8539,14 +8551,20 @@ const EditorCompletionWidget = {
 const getCompletionDetailVirtualDom = content => {
   const dom = [{
     type: Div,
+    className: 'Viewlet EditorCompletionDetails',
     childCount: 2
   }, {
     type: Div,
-    className: 'CompletionDetailContent',
+    className: CompletionDetailContent,
     childCount: 1
   }, text(content), {
     type: Div,
-    className: 'CompletionDetailCloseButton',
+    className: CompletionDetailCloseButton,
+    onClick: HandleClose,
+    childCount: 1
+  }, {
+    type: Div,
+    className: `${MaskIcon} ${IconClose}`,
     childCount: 0
   }];
   return dom;
@@ -8558,7 +8576,7 @@ const renderContent = {
   },
   apply(oldState, newState) {
     const dom = getCompletionDetailVirtualDom(newState.content);
-    return ['setDom', dom];
+    return ['Viewlet.setDom2', newState.uid, dom];
   }
 };
 const renderBounds = {
@@ -8591,7 +8609,11 @@ const render$1 = (oldState, newState) => {
   const wrappedCommands = [];
   const uid = newState.uid;
   for (const command of commands) {
-    wrappedCommands.push(['Viewlet.send', uid, ...command]);
+    if (command[0] === 'Viewlet.setDom2') {
+      wrappedCommands.push(command);
+    } else {
+      wrappedCommands.push(['Viewlet.send', uid, ...command]);
+    }
   }
   return wrappedCommands;
 };
@@ -8602,8 +8624,9 @@ const add = widget => {
   // that doesn't collide with ids created in renderer worker?
   const uid = widget.newState.uid;
   const allCommands = [];
-  allCommands.push(['Viewlet.create', id, uid]);
+  allCommands.push(['Viewlet.createFunctionalRoot', id, uid]);
   allCommands.push(...commands);
+  allCommands.push(['Viewlet.send', uid, 'appendWidget']);
   return allCommands;
 };
 const remove = widget => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/editor-worker",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "description": "",
   "main": "dist/testWorkerMain.js",
   "type": "module",