Merge branch 'gh-pages' of https://github.com/LivelyKernel/lively4-core…

… into gh-pages
LivelyKernel · Jul 18, 2024 · ef80945 · ef80945
2 parents a5cf8f7 + 2083ff9
commit ef80945
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 41 deletions.
diff --git a/src/components/widgets/lively-code-mirror-hint.js b/src/components/widgets/lively-code-mirror-hint.js
@@ -106,9 +106,11 @@ class Completions {
     };
 
     CodeMirror.on(completionsObject, "shown", () => {
-      // lively.warn("shown");
+      // lively.warn("shown " + completionsObject);
     });
     CodeMirror.on(completionsObject, "select", (completion, element) => {
+      // lively.warn("select " + element);
+      debugger
       if (!element.parentElement.querySelector('li.shortcut-present')) {
         element.classList.add('shortcut-present');
         const hints = element.parentElement.querySelectorAll('li.CodeMirror-hint');

diff --git a/src/components/widgets/lively-code-mirror.js b/src/components/widgets/lively-code-mirror.js
@@ -442,6 +442,7 @@ export default class LivelyCodeMirror extends HTMLElement {
         },
         // #KeyboardShortcut Ctrl-Space auto complete
         "Ctrl-Space": cm => {
+          // lively.notify("fix hints position")
           this.fixHintsPosition();
           cm.execCommand("autocomplete");
         },
@@ -646,60 +647,61 @@ export default class LivelyCodeMirror extends HTMLElement {
   }
 
   registerExtraKeys(options) {
-    if (options) this.addKeys(options);
-    var keys = {};
-    keys = Object.assign(keys, CodeMirror.keyMap.sublime);
-    keys = Object.assign(keys, this.ensureExtraKeys());
-    this.editor.setOption("extraKeys", CodeMirror.normalizeKeyMap(keys));
+    if (options) this.addKeys(options)
+    var keys = {}
+    keys = Object.assign(keys, CodeMirror.keyMap.sublime)
+    keys = Object.assign(keys, this.ensureExtraKeys())
+    this.editor.setOption("extraKeys", CodeMirror.normalizeKeyMap(keys))
   }
 
   setupEditorOptions(editor) {
-    editor.setOption("matchBrackets", true);
-    editor.setOption("styleSelectedText", true);
-    editor.setOption("autoCloseBrackets", true);
-    editor.setOption("autoCloseTags", true);
-    editor.setOption("scrollbarStyle", "simple");
-    editor.setOption("scrollbarStyle", "simple");
+    editor.setOption("matchBrackets", true)
+    editor.setOption("styleSelectedText", true)
+    editor.setOption("autoCloseBrackets", true)
+    editor.setOption("autoCloseTags", true)
+    editor.setOption("scrollbarStyle", "simple")
+    editor.setOption("scrollbarStyle", "simple")
+    editor.setOption("autoRefresh",  {delay: 10 })
 
-    editor.setOption("autoRefresh",  {delay: 10 });
-
-
-    editor.setOption("tabSize", indentationWidth());
-    editor.setOption("indentWithTabs", false);
-    editor.setOption("indentUnit", indentationWidth());
 
-    editor.setOption("highlightSelectionMatches", { showToken: /\w/, annotateScrollbar: true
+    editor.setOption("tabSize", indentationWidth())
+    editor.setOption("indentWithTabs", false)
+    editor.setOption("indentUnit", indentationWidth())
 
-      // editor.setOption("keyMap",  "sublime")
-
-    });editor.on("cursorActivity", cm => {
+    editor.setOption("highlightSelectionMatches", { 
+      showToken: /\w/, 
+      annotateScrollbar: true
+    })
+
+    editor.on("cursorActivity", cm => {
       if (this.ternLoaded) {
         this.ternWrapper.then(tw => tw.updateArgHints(cm, this));
       }
-    });
+    })
 
     // http://bl.ocks.org/jasongrout/5378313#fiddle.js
     editor.on("cursorActivity", cm => {
       // this.ternWrapper.then(tw => tw.updateArgHints(cm, this));
-      const widgetEnter = cm.widgetEnter;
-      cm.widgetEnter = undefined;
+      const widgetEnter = cm.widgetEnter
+      cm.widgetEnter = undefined
       if (widgetEnter) {
         // check to see if movement is purely navigational, or if it
         // doing something like extending selection
-        var cursorHead = cm.getCursor('head');
-        var cursorAnchor = cm.getCursor('anchor');
+        var cursorHead = cm.getCursor('head')
+        var cursorAnchor = cm.getCursor('anchor')
         if (posEq(cursorHead, cursorAnchor)) {
-          widgetEnter();
+          widgetEnter()
         }
       }
-    });
+    })
+
     editor.setOption("hintOptions", {
       container: this.shadowRoot.querySelector("#code-mirror-hints"),
       codemirror: this,
       closeCharacters: /\;/ // we want to keep the hint open when typing spaces and "{" in imports...
-    });
+    })
 
-    this.registerExtraKeys();
+    this.registerExtraKeys()
   }
 
   // Fires when an attribute was added, removed, or updated
@@ -1189,7 +1191,7 @@ export default class LivelyCodeMirror extends HTMLElement {
   }
 
   fixHintsPosition() {
-    lively.setPosition(this.shadowRoot.querySelector("#code-mirror-hints"), pt(-document.scrollingElement.scrollLeft, -document.scrollingElement.scrollTop).subPt(lively.getClientPosition(this)));
+    // #TODO not needed any more, beccause we fix it directly src/external/code-mirror/addon/hint/show-hint.js
   }
 
 

diff --git a/src/external/code-mirror/addon/hint/show-hint.js b/src/external/code-mirror/addon/hint/show-hint.js
@@ -258,22 +258,36 @@
     var pos = cm.cursorCoords(completion.options.alignWithWord ? data.from : null);
     var left = pos.left, top = pos.bottom, below = true;
     var offsetLeft = 0, offsetTop = 0;
+
+    // BEGIN #Lively #Hack because new CodeMirror version....
     if (container !== ownerDocument.body) {
+
+
       // We offset the cursor position because left and top are relative to the offsetParent's top left corner.
-      var isContainerPositioned = ['absolute', 'relative', 'fixed'].indexOf(parentWindow.getComputedStyle(container).position) !== -1;
-      var offsetParent = isContainerPositioned ? container : container.offsetParent;
-      var offsetParentPosition = offsetParent.getBoundingClientRect();
-      var bodyPosition = ownerDocument.body.getBoundingClientRect();
-      offsetLeft = (offsetParentPosition.left - bodyPosition.left - offsetParent.scrollLeft);
-      offsetTop = (offsetParentPosition.top - bodyPosition.top - offsetParent.scrollTop);
+
+      // var isContainerPositioned = ['absolute', 'relative', 'fixed'].indexOf(parentWindow.getComputedStyle(container).position) !== -1;
+      // var offsetParent = isContainerPositioned ? container : container.offsetParent;
+      // var offsetParentPosition = offsetParent.getBoundingClientRect();
+      // var bodyPosition = ownerDocument.body.getBoundingClientRect();
+      // offsetLeft = (offsetParentPosition.left - bodyPosition.left - offsetParent.scrollLeft);
+      // offsetTop = (offsetParentPosition.top - bodyPosition.top - offsetParent.scrollTop);     
     }
-    hints.style.left = (left - offsetLeft) + "px";
-    hints.style.top = (top - offsetTop) + "px";
+
+
+    offsetLeft = -document.scrollingElement.scrollLeft;
+    offsetTop = -document.scrollingElement.scrollTop;
+
+    container.appendChild(hints);
+    lively.setClientPosition(hints, lively.pt(left + offsetLeft, top + offsetTop))
+
+    // hints.style.left = (left - offsetLeft) + "px";
+    // hints.style.top = (top - offsetTop) + "px";
 
+    // END #Lively #Hack #Lukas was here too (#Jens)
+
     // If we're at the edge of the screen, then we want the menu to appear on the left of the cursor.
     var winW = parentWindow.innerWidth || Math.max(ownerDocument.body.offsetWidth, ownerDocument.documentElement.offsetWidth);
     var winH = parentWindow.innerHeight || Math.max(ownerDocument.body.offsetHeight, ownerDocument.documentElement.offsetHeight);
-    container.appendChild(hints);
     cm.getInputField().setAttribute("aria-autocomplete", "list")
     cm.getInputField().setAttribute("aria-owns", this.id)
     cm.getInputField().setAttribute("aria-activedescendant", this.id + "-" + this.selectedHint)