@eclipse-glsp/client 2.7.0-next.2 → 2.7.0-next.3

package/lib/features/label-edit-ui/label-edit-ui.d.ts

@@ -14,8 +14,11 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { EditLabelUI } from '@eclipse-glsp/sprotty';
+import { EditorContextService } from '../../base/editor-context-service';
 export declare class GlspEditLabelUI extends EditLabelUI {
+    protected editorContextService: EditorContextService;
     protected initializeContents(containerElement: HTMLElement): void;
     protected setContainerVisible(visible: boolean): void;
+    protected isLabelInVisibleViewport(): boolean;
 }
 //# sourceMappingURL=label-edit-ui.d.ts.map

package/lib/features/label-edit-ui/label-edit-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"label-edit-ui.d.ts","sourceRoot":"","sources":["../../../src/features/label-edit-ui/label-edit-ui.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;kFAckF;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAIpD,qBACa,eAAgB,SAAQ,WAAW;cACzB,kBAAkB,CAAC,gBAAgB,EAAE,WAAW,GAAG,IAAI;cAKvD,mBAAmB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;CAQjE"}
+{"version":3,"file":"label-edit-ui.d.ts","sourceRoot":"","sources":["../../../src/features/label-edit-ui/label-edit-ui.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;kFAckF;AAClF,OAAO,EAAU,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAGzE,qBACa,eAAgB,SAAQ,WAAW;IAE5C,SAAS,CAAC,oBAAoB,EAAE,oBAAoB,CAAC;cAElC,kBAAkB,CAAC,gBAAgB,EAAE,WAAW,GAAG,IAAI;cAkBvD,mBAAmB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAS9D,SAAS,CAAC,wBAAwB,IAAI,OAAO;CAehD"}

package/lib/features/label-edit-ui/label-edit-ui.js

@@ -5,6 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GlspEditLabelUI = void 0;
 /********************************************************************************
@@ -24,11 +27,26 @@ exports.GlspEditLabelUI = void 0;
  ********************************************************************************/
 const sprotty_1 = require("@eclipse-glsp/sprotty");
 const inversify_1 = require("inversify");
+const editor_context_service_1 = require("../../base/editor-context-service");
 const ui_extension_1 = require("../../base/ui-extension/ui-extension");
 let GlspEditLabelUI = class GlspEditLabelUI extends sprotty_1.EditLabelUI {
     initializeContents(containerElement) {
         super.initializeContents(containerElement);
         containerElement.classList.add(ui_extension_1.CSS_UI_EXTENSION_CLASS);
+        this.editorContextService.onViewportChanged(() => {
+            window.requestAnimationFrame(() => {
+                if (this.isActive && this.containerElement) {
+                    if (this.isLabelInVisibleViewport()) {
+                        this.setPosition(this.containerElement);
+                        this.applyFontStyling();
+                    }
+                    else {
+                        // Cancel editing if the label moved out of the visible viewport
+                        this.hide();
+                    }
+                }
+            });
+        });
     }
     setContainerVisible(visible) {
         var _a, _b;
@@ -40,8 +58,27 @@ let GlspEditLabelUI = class GlspEditLabelUI extends sprotty_1.EditLabelUI {
             (_b = this.containerElement) === null || _b === void 0 ? void 0 : _b.classList.add(ui_extension_1.CSS_HIDDEN_EXTENSION_CLASS);
         }
     }
+    isLabelInVisibleViewport() {
+        if (!this.labelElement) {
+            return false;
+        }
+        const canvasBounds = this.editorContextService.canvasBounds;
+        const scroll = { x: window.scrollX, y: window.scrollY };
+        const canvasScreenBounds = {
+            x: canvasBounds.x - scroll.x,
+            y: canvasBounds.y - scroll.y,
+            width: canvasBounds.width,
+            height: canvasBounds.height
+        };
+        const labelBounds = this.labelElement.getBoundingClientRect();
+        return sprotty_1.Bounds.overlap(labelBounds, canvasScreenBounds);
+    }
 };
 exports.GlspEditLabelUI = GlspEditLabelUI;
+__decorate([
+    (0, inversify_1.inject)(editor_context_service_1.EditorContextService),
+    __metadata("design:type", editor_context_service_1.EditorContextService)
+], GlspEditLabelUI.prototype, "editorContextService", void 0);
 exports.GlspEditLabelUI = GlspEditLabelUI = __decorate([
     (0, inversify_1.injectable)()
 ], GlspEditLabelUI);

package/lib/features/label-edit-ui/label-edit-ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"label-edit-ui.js","sourceRoot":"","sources":["../../../src/features/label-edit-ui/label-edit-ui.ts"],"names":[],"mappings":";;;;;;;;;AAAA;;;;;;;;;;;;;;kFAckF;AAClF,mDAAoD;AACpD,yCAAuC;AACvC,uEAA0G;AAGnG,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,qBAAW;IACzB,kBAAkB,CAAC,gBAA6B;QAC/D,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;QAC3C,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,qCAAsB,CAAC,CAAC;IAC3D,CAAC;IAEkB,mBAAmB,CAAC,OAAgB;;QACnD,IAAI,OAAO,EAAE,CAAC;YACV,MAAA,IAAI,CAAC,gBAAgB,0CAAE,SAAS,CAAC,MAAM,CAAC,yCAA0B,CAAC,CAAC;YACpE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QAC7B,CAAC;aAAM,CAAC;YACJ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,SAAS,CAAC,GAAG,CAAC,yCAA0B,CAAC,CAAC;QACrE,CAAC;IACL,CAAC;CACJ,CAAA;AAdY,0CAAe;0BAAf,eAAe;IAD3B,IAAA,sBAAU,GAAE;GACA,eAAe,CAc3B"}
+{"version":3,"file":"label-edit-ui.js","sourceRoot":"","sources":["../../../src/features/label-edit-ui/label-edit-ui.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;kFAckF;AAClF,mDAA4D;AAC5D,yCAA+C;AAC/C,8EAAyE;AACzE,uEAA0G;AAGnG,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,qBAAW;IAIzB,kBAAkB,CAAC,gBAA6B;QAC/D,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;QAC3C,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,qCAAsB,CAAC,CAAC;QACvD,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,EAAE;YAC7C,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;gBAC9B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBACzC,IAAI,IAAI,CAAC,wBAAwB,EAAE,EAAE,CAAC;wBAClC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;wBACxC,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBAC5B,CAAC;yBAAM,CAAC;wBACJ,gEAAgE;wBAChE,IAAI,CAAC,IAAI,EAAE,CAAC;oBAChB,CAAC;gBACL,CAAC;YACL,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACP,CAAC;IAEkB,mBAAmB,CAAC,OAAgB;;QACnD,IAAI,OAAO,EAAE,CAAC;YACV,MAAA,IAAI,CAAC,gBAAgB,0CAAE,SAAS,CAAC,MAAM,CAAC,yCAA0B,CAAC,CAAC;YACpE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QAC7B,CAAC;aAAM,CAAC;YACJ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,SAAS,CAAC,GAAG,CAAC,yCAA0B,CAAC,CAAC;QACrE,CAAC;IACL,CAAC;IAES,wBAAwB;QAC9B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACrB,OAAO,KAAK,CAAC;QACjB,CAAC;QACD,MAAM,YAAY,GAAG,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC;QAC5D,MAAM,MAAM,GAAG,EAAE,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC;QACxD,MAAM,kBAAkB,GAAW;YAC/B,CAAC,EAAE,YAAY,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;YAC5B,CAAC,EAAE,YAAY,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;YAC5B,KAAK,EAAE,YAAY,CAAC,KAAK;YACzB,MAAM,EAAE,YAAY,CAAC,MAAM;SAC9B,CAAC;QACF,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC;QAC9D,OAAO,gBAAM,CAAC,OAAO,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;IAC3D,CAAC;CACJ,CAAA;AA9CY,0CAAe;AAEd;IADT,IAAA,kBAAM,EAAC,6CAAoB,CAAC;8BACG,6CAAoB;6DAAC;0BAF5C,eAAe;IAD3B,IAAA,sBAAU,GAAE;GACA,eAAe,CA8C3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-glsp/client",
-  "version": "2.7.0-next.2+eaf7d17",
+  "version": "2.7.0-next.3+d60eef8",
   "description": "A sprotty-based client for GLSP",
   "keywords": [
     "eclipse",
@@ -46,7 +46,7 @@
     "watch": "tsc -w"
   },
   "dependencies": {
-    "@eclipse-glsp/sprotty": "2.7.0-next.2+eaf7d17",
+    "@eclipse-glsp/sprotty": "2.7.0-next.3+d60eef8",
     "autocompleter": "^9.1.2",
     "file-saver": "^2.0.5",
     "lodash": "4.17.23",
@@ -63,5 +63,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "eaf7d170b7f9f665c70146b0423261269edd2a66"
+  "gitHead": "d60eef80376ff83a706d3cd536a9fe049afb70cd"
 }

package/src/features/label-edit-ui/label-edit-ui.ts

@@ -13,15 +13,32 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { EditLabelUI } from '@eclipse-glsp/sprotty';
-import { injectable } from 'inversify';
+import { Bounds, EditLabelUI } from '@eclipse-glsp/sprotty';
+import { inject, injectable } from 'inversify';
+import { EditorContextService } from '../../base/editor-context-service';
 import { CSS_HIDDEN_EXTENSION_CLASS, CSS_UI_EXTENSION_CLASS } from '../../base/ui-extension/ui-extension';
 
 @injectable()
 export class GlspEditLabelUI extends EditLabelUI {
+    @inject(EditorContextService)
+    protected editorContextService: EditorContextService;
+
     protected override initializeContents(containerElement: HTMLElement): void {
         super.initializeContents(containerElement);
         containerElement.classList.add(CSS_UI_EXTENSION_CLASS);
+        this.editorContextService.onViewportChanged(() => {
+            window.requestAnimationFrame(() => {
+                if (this.isActive && this.containerElement) {
+                    if (this.isLabelInVisibleViewport()) {
+                        this.setPosition(this.containerElement);
+                        this.applyFontStyling();
+                    } else {
+                        // Cancel editing if the label moved out of the visible viewport
+                        this.hide();
+                    }
+                }
+            });
+        });
     }
 
     protected override setContainerVisible(visible: boolean): void {
@@ -32,4 +49,20 @@ export class GlspEditLabelUI extends EditLabelUI {
             this.containerElement?.classList.add(CSS_HIDDEN_EXTENSION_CLASS);
         }
     }
+
+    protected isLabelInVisibleViewport(): boolean {
+        if (!this.labelElement) {
+            return false;
+        }
+        const canvasBounds = this.editorContextService.canvasBounds;
+        const scroll = { x: window.scrollX, y: window.scrollY };
+        const canvasScreenBounds: Bounds = {
+            x: canvasBounds.x - scroll.x,
+            y: canvasBounds.y - scroll.y,
+            width: canvasBounds.width,
+            height: canvasBounds.height
+        };
+        const labelBounds = this.labelElement.getBoundingClientRect();
+        return Bounds.overlap(labelBounds, canvasScreenBounds);
+    }
 }