@eclipse-glsp/client 0.10.0-next.c94277c.176 → 1.0.0

package/src/features/context-menu/selection-service-aware-context-menu-mouse-listener.ts

@@ -15,53 +15,47 @@
  ********************************************************************************/
 import { Action } from '@eclipse-glsp/protocol';
 import { inject, injectable, optional } from 'inversify';
-import {
-    ContextMenuProviderRegistry,
-    findParentByFeature,
-    IContextMenuServiceProvider,
-    isSelectable,
-    MouseListener,
-    SModelElement
-} from 'sprotty';
+import { ContextMenuProviderRegistry, IContextMenuServiceProvider, MouseListener, SModelElement } from 'sprotty';
 import { FocusStateChangedAction } from '../../base/actions/focus-change-action';
 import { TYPES } from '../../base/types';
 import { SelectionService } from '../select/selection-service';
 
 @injectable()
 export class SelectionServiceAwareContextMenuMouseListener extends MouseListener {
-    @inject(TYPES.IContextMenuServiceProvider) @optional() protected readonly contextMenuService: IContextMenuServiceProvider;
-    @inject(TYPES.IContextMenuProviderRegistry) @optional() protected readonly menuProvider: ContextMenuProviderRegistry;
-    @inject(TYPES.SelectionService) protected selectionService: SelectionService;
+    @inject(TYPES.IContextMenuServiceProvider)
+    @optional()
+    protected readonly contextMenuService?: IContextMenuServiceProvider;
+
+    @inject(TYPES.IContextMenuProviderRegistry)
+    @optional()
+    protected readonly menuProvider?: ContextMenuProviderRegistry;
+
+    @inject(TYPES.SelectionService)
+    protected selectionService: SelectionService;
 
     /**
-     * Opens the context menu on right-click.
+     * Opens the context menu.
      */
-    override mouseDown(target: SModelElement, event: MouseEvent): (Action | Promise<Action>)[] {
-        if (event.button === 2 && this.contextMenuService && this.menuProvider) {
-            return this.openContextMenu(event, target);
-        }
-        return [];
+    override contextMenu(target: SModelElement, event: MouseEvent): (Action | Promise<Action>)[] {
+        return this.openContextMenu(target, event);
     }
 
     /**
      * Opens the context menu.
      *
-     *   - query the element on the click-target
-     *   - select the element
      *   - query the context menu service and the context menu elements
      *   - show the context menu
      *   - send a focus state change to indicate that the diagram becomes inactive, once the context menu is shown
      *
      * When the context menu is closed, we focus the diagram element again.
      */
-    protected openContextMenu(event: MouseEvent, target: SModelElement): Promise<Action>[] {
-        const mousePosition = { x: event.x, y: event.y };
-        const selectableTarget = findParentByFeature(target, isSelectable);
-        if (selectableTarget) {
-            selectableTarget.selected = true;
-            this.selectionService.updateSelection(target.root, [selectableTarget.id], []);
+    protected openContextMenu(target: SModelElement, event: MouseEvent): Promise<Action>[] {
+        if (!this.contextMenuService || !this.menuProvider) {
+            return [];
         }
 
+        const mousePosition = { x: event.x, y: event.y };
+
         const result = Promise.all([this.contextMenuService(), this.menuProvider.getItems(target.root, mousePosition)])
             .then(([menuService, menuItems]) => menuService.show(menuItems, mousePosition, () => this.focusEventTarget(event)))
             .then((): Action => FocusStateChangedAction.create(false));

package/src/features/hover/hover.ts

@@ -23,20 +23,11 @@ import {
     SModelRootSchema
 } from '@eclipse-glsp/protocol';
 import { injectable } from 'inversify';
-import {
-    EMPTY_ROOT,
-    HoverFeedbackAction,
-    HoverMouseListener,
-    IActionHandler,
-    ICommand,
-    SIssueMarker,
-    SIssueSeverity,
-    SModelElement
-} from 'sprotty';
+import { EMPTY_ROOT, HoverFeedbackAction, HoverMouseListener, IActionHandler, ICommand, SModelElement } from 'sprotty';
 import { FocusStateChangedAction } from '../../base/actions/focus-change-action';
 import { EnableDefaultToolsAction, EnableToolsAction } from '../../base/tool-manager/tool-actions';
 import { EdgeCreationTool } from '../tools/edge-creation-tool';
-import { GIssueMarker } from '../validation/issue-marker';
+import { getSeverity, GIssueMarker } from '../validation/issue-marker';
 @injectable()
 export class GlspHoverMouseListener extends HoverMouseListener implements IActionHandler {
     protected enableHover = true;
@@ -117,16 +108,3 @@ export class GlspHoverMouseListener extends HoverMouseListener implements IActio
         return bounds;
     }
 }
-
-export function getSeverity(marker: SIssueMarker): SIssueSeverity {
-    let currentSeverity: SIssueSeverity = 'info';
-    for (const severity of marker.issues.map(s => s.severity)) {
-        if (severity === 'error') {
-            return severity;
-        }
-        if (severity === 'warning' && currentSeverity === 'info') {
-            currentSeverity = severity;
-        }
-    }
-    return currentSeverity;
-}

package/src/features/mouse-tool/mouse-tool.ts

@@ -49,10 +49,6 @@ export class RankingMouseTool extends MouseTool implements IMouseTool {
         this.rankedMouseListeners = groupBy(this.mouseListeners, listener => getRank(listener));
     }
 
-    contextMenu(model: SModelRoot, event: MouseEvent): void {
-        event.preventDefault();
-    }
-
     protected override handleEvent<K extends MouseListenerMethods>(methodName: K, model: SModelRoot, event: MouseEvent): void {
         this.focusOnMouseEvent(methodName, model);
         const element = this.getTargetElement(model, event);

package/src/features/select/select-mouse-listener.ts

@@ -13,7 +13,21 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { SelectMouseListener } from 'sprotty';
+import { Action, SelectAction } from '@eclipse-glsp/protocol';
+import {
+    BringToFrontAction,
+    findParentByFeature,
+    isCtrlOrCmd,
+    isSelectable,
+    SButton,
+    SelectMouseListener,
+    SModelElement,
+    SModelRoot,
+    SRoutableElement,
+    SRoutingHandle,
+    SwitchEditModeAction
+} from 'sprotty';
+import { toArray } from 'sprotty/lib/utils/iterable';
 import { DEFAULT_RANK, Ranked } from '../rank/model';
 
 /**
@@ -22,4 +36,70 @@ import { DEFAULT_RANK, Ranked } from '../rank/model';
  */
 export class RankedSelectMouseListener extends SelectMouseListener implements Ranked {
     rank: number = DEFAULT_RANK - 1; /* we want to be executed before all default mouse listeners */
+
+    override mouseDown(target: SModelElement, event: MouseEvent): Action[] {
+        const result: Action[] = [];
+        if (this.buttonHandlerRegistry !== undefined && target instanceof SButton && target.enabled) {
+            const buttonHandler = this.buttonHandlerRegistry.get(target.type);
+            if (buttonHandler !== undefined) {
+                return buttonHandler.buttonPressed(target);
+            }
+        }
+        const selectableTarget = findParentByFeature(target, isSelectable);
+        if (selectableTarget !== undefined || target instanceof SModelRoot) {
+            this.hasDragged = false;
+            let deselect: SModelElement[] = [];
+            // multi-selection?
+            if (!isCtrlOrCmd(event)) {
+                deselect = toArray(
+                    target.root.index
+                        .all()
+                        .filter(
+                            element =>
+                                isSelectable(element) &&
+                                element.selected &&
+                                !(selectableTarget instanceof SRoutingHandle && element === (selectableTarget.parent as SModelElement))
+                        )
+                );
+            }
+            if (selectableTarget !== undefined) {
+                if (!selectableTarget.selected) {
+                    this.wasSelected = false;
+                    result.push(
+                        SelectAction.create({
+                            selectedElementsIDs: [selectableTarget.id],
+                            deselectedElementsIDs: deselect.map(e => e.id)
+                        })
+                    );
+                    result.push(BringToFrontAction.create([selectableTarget.id]));
+                    const routableDeselect = deselect.filter(e => e instanceof SRoutableElement).map(e => e.id);
+                    if (selectableTarget instanceof SRoutableElement) {
+                        result.push(
+                            SwitchEditModeAction.create({
+                                elementsToActivate: [selectableTarget.id],
+                                elementsToDeactivate: routableDeselect
+                            })
+                        );
+                    } else if (routableDeselect.length > 0) {
+                        result.push(SwitchEditModeAction.create({ elementsToDeactivate: routableDeselect }));
+                    }
+                } else if (isCtrlOrCmd(event)) {
+                    this.wasSelected = false;
+                    result.push(SelectAction.create({ deselectedElementsIDs: [selectableTarget.id] }));
+                    if (selectableTarget instanceof SRoutableElement) {
+                        result.push(SwitchEditModeAction.create({ elementsToDeactivate: [selectableTarget.id] }));
+                    }
+                } else {
+                    this.wasSelected = true;
+                }
+            } else {
+                result.push(SelectAction.create({ deselectedElementsIDs: deselect.map(e => e.id) }));
+                const routableDeselect = deselect.filter(e => e instanceof SRoutableElement).map(e => e.id);
+                if (routableDeselect.length > 0) {
+                    result.push(SwitchEditModeAction.create({ elementsToDeactivate: routableDeselect }));
+                }
+            }
+        }
+        return result;
+    }
 }

package/src/features/{model-source-watcher → source-model-watcher}/di.config.ts

@@ -13,13 +13,13 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { ModelSourceChangedAction } from '@eclipse-glsp/protocol';
+import { SourceModelChangedAction } from '@eclipse-glsp/protocol';
 import { ContainerModule } from 'inversify';
 import { configureActionHandler } from 'sprotty';
-import { ModelSourceChangedActionHandler } from './model-source-changed-action-handler';
+import { SourceModelChangedActionHandler } from './source-model-changed-action-handler';
 
-const modelSourceWatcherModule = new ContainerModule((bind, _unbind, isBound) => {
-    configureActionHandler({ bind, isBound }, ModelSourceChangedAction.KIND, ModelSourceChangedActionHandler);
+const sourceModelWatcherModule = new ContainerModule((bind, _unbind, isBound) => {
+    configureActionHandler({ bind, isBound }, SourceModelChangedAction.KIND, SourceModelChangedActionHandler);
 });
 
-export default modelSourceWatcherModule;
+export default sourceModelWatcherModule;

package/src/features/{model-source-watcher/model-source-changed-action-handler.ts → source-model-watcher/source-model-changed-action-handler.ts}

@@ -13,43 +13,43 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Action, ModelSourceChangedAction, ServerMessageAction, ServerStatusAction } from '@eclipse-glsp/protocol';
+import { Action, ServerMessageAction, ServerStatusAction, SourceModelChangedAction } from '@eclipse-glsp/protocol';
 import { inject, injectable, optional } from 'inversify';
 import { IActionDispatcher, IActionHandler, ViewerOptions } from 'sprotty';
 import { TYPES } from '../../base/types';
 
 /**
- * An external handler of the model source change event.
+ * An external handler of the source model change event.
  *
  * This allows external applications to react specifically to this event, e.g. by bringing up the diagram,
  * check their dirty state, show a dialog, etc.
  */
 @injectable()
-export abstract class ExternalModelSourceChangedHandler {
+export abstract class ExternalSourceModelChangedHandler {
     /**
-     * Notifies about a change of the model source.
+     * Notifies about a change of the source model.
      * @returns actions to be dispatched after the notification.
      */
-    abstract notifyModelSourceChange(modelSourceName: string, options: ViewerOptions): Promise<Action[]>;
+    abstract notifySourceModelChange(sourceModelName: string, options: ViewerOptions): Promise<Action[]>;
 }
 
 @injectable()
-export class ModelSourceChangedActionHandler implements IActionHandler {
+export class SourceModelChangedActionHandler implements IActionHandler {
     @inject(TYPES.IActionDispatcher)
     protected dispatcher: IActionDispatcher;
 
     @inject(TYPES.ViewerOptions)
     protected options: ViewerOptions;
 
-    @inject(ExternalModelSourceChangedHandler)
+    @inject(ExternalSourceModelChangedHandler)
     @optional()
-    protected externalModelSourceChangedHandler?: ExternalModelSourceChangedHandler;
+    protected externalModelSourceChangedHandler?: ExternalSourceModelChangedHandler;
 
     handle(action: Action): void {
-        if (ModelSourceChangedAction.is(action)) {
+        if (SourceModelChangedAction.is(action)) {
             if (this.externalModelSourceChangedHandler) {
                 this.externalModelSourceChangedHandler
-                    .notifyModelSourceChange(action.modelSourceName, this.options)
+                    .notifySourceModelChange(action.sourceModelName, this.options)
                     .then(actions => this.dispatcher.dispatchAll(actions));
                 return;
             }
@@ -57,8 +57,8 @@ export class ModelSourceChangedActionHandler implements IActionHandler {
         }
     }
 
-    protected showSimpleNotification(action: ModelSourceChangedAction): void {
-        const message = `The model source ${action.modelSourceName} has changed. You might want to consider reloading.`;
+    protected showSimpleNotification(action: SourceModelChangedAction): void {
+        const message = `The source model ${action.sourceModelName} has changed. You might want to consider reloading.`;
         const timeout = 0;
         const severity = 'WARNING';
         this.dispatcher.dispatchAll([

package/src/features/validation/issue-marker.ts

@@ -13,14 +13,23 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Marker, MarkerKind } from '@eclipse-glsp/protocol';
-import { SDecoration, SIssue, SIssueMarker, SParentElement } from 'sprotty';
+import { Bounds, Marker, MarkerKind } from '@eclipse-glsp/protocol';
+import { isBoundsAware, Projectable, SDecoration, SIssue, SIssueMarker, SIssueSeverity, SParentElement } from 'sprotty';
 
-export class GIssueMarker extends SIssueMarker {
+export class GIssueMarker extends SIssueMarker implements Projectable {
     constructor() {
         super();
         this.features = new Set<symbol>(SDecoration.DEFAULT_FEATURES);
     }
+    projectionCssClasses: string[];
+    projectedBounds?: Bounds;
+    override issues: SIssue[] = [];
+    override type = 'marker';
+
+    computeProjectionCssClasses(): void {
+        const severityCss = getSeverity(this);
+        this.projectionCssClasses = ['sprotty-issue', 'sprotty-' + severityCss];
+    }
 }
 
 /**
@@ -31,14 +40,15 @@ export class GIssueMarker extends SIssueMarker {
  * @returns the child `SIssueMarker` or a new `SIssueMarker` if no such child exists.
  */
 export function getOrCreateSIssueMarker(modelElement: SParentElement): SIssueMarker {
-    let issueMarker: SIssueMarker | undefined;
+    let issueMarker: GIssueMarker | undefined;
 
     issueMarker = getSIssueMarker(modelElement);
 
     if (issueMarker === undefined) {
         issueMarker = new GIssueMarker();
-        issueMarker.type = 'marker';
-        issueMarker.issues = new Array<SIssue>();
+        if (isBoundsAware(modelElement)) {
+            issueMarker.projectedBounds = modelElement.parentToLocal(modelElement.bounds);
+        }
         modelElement.add(issueMarker);
     }
 
@@ -51,11 +61,11 @@ export function getOrCreateSIssueMarker(modelElement: SParentElement): SIssueMar
  * @param modelElement for which the `SIssueMarker` should be retrieved.
  * @returns the child `SIssueMarker` or `undefined` if no such child exists.
  */
-export function getSIssueMarker(modelElement: SParentElement): SIssueMarker | undefined {
-    let issueMarker: SIssueMarker | undefined;
+export function getSIssueMarker(modelElement: SParentElement): GIssueMarker | undefined {
+    let issueMarker: GIssueMarker | undefined;
 
     for (const child of modelElement.children) {
-        if (child instanceof SIssueMarker) {
+        if (child instanceof GIssueMarker) {
             issueMarker = child;
         }
     }
@@ -69,8 +79,8 @@ export function getSIssueMarker(modelElement: SParentElement): SIssueMarker | un
  * @param marker `Marker` for that an `SIssue` should be created.
  * @returns the created `SIssue`.
  */
-export function createSIssue(marker: Marker): SIssue {
-    const issue: SIssue = new SIssue();
+export function createSIssue(marker: Marker, parent?: SParentElement): SIssue {
+    const issue = new SIssue();
     issue.message = marker.description;
 
     switch (marker.kind) {
@@ -87,6 +97,18 @@ export function createSIssue(marker: Marker): SIssue {
             break;
         }
     }
-
     return issue;
 }
+
+export function getSeverity(marker: SIssueMarker): SIssueSeverity {
+    let currentSeverity: SIssueSeverity = 'info';
+    for (const severity of marker.issues.map(s => s.severity)) {
+        if (severity === 'error') {
+            return severity;
+        }
+        if (severity === 'warning' && currentSeverity === 'info') {
+            currentSeverity = severity;
+        }
+    }
+    return currentSeverity;
+}

package/src/features/validation/validate.ts

@@ -19,10 +19,9 @@ import { CommandExecutionContext, CommandReturn, IActionDispatcher, IActionHandl
 import { EditorContextService } from '../../base/editor-context-service';
 import { TYPES } from '../../base/types';
 import { removeCssClasses } from '../../utils/smodel-util';
-import { getSeverity } from '../hover/hover';
 import { IFeedbackActionDispatcher, IFeedbackEmitter } from '../tool-feedback/feedback-action-dispatcher';
 import { FeedbackCommand } from '../tool-feedback/model';
-import { createSIssue, getOrCreateSIssueMarker, getSIssueMarker } from './issue-marker';
+import { createSIssue, getOrCreateSIssueMarker, getSeverity, getSIssueMarker, GIssueMarker } from './issue-marker';
 
 /**
  * Feedback emitter sending actions for visualizing model validation feedback and
@@ -151,6 +150,9 @@ export class ApplyMarkersCommand extends FeedbackCommand {
                 const issueMarker = getOrCreateSIssueMarker(modelElement);
                 const issue = createSIssue(marker);
                 issueMarker.issues.push(issue);
+                if (issueMarker instanceof GIssueMarker) {
+                    issueMarker.computeProjectionCssClasses();
+                }
                 addMaxSeverityCSSClassToIssueParent(modelElement, issueMarker);
             }
         });
@@ -160,7 +162,6 @@ export class ApplyMarkersCommand extends FeedbackCommand {
 
 function addMaxSeverityCSSClassToIssueParent(modelElement: SParentElement, issueMarker: SIssueMarker): void {
     const maxSeverityCSSClass = getSeverity(issueMarker);
-
     if (!modelElement.cssClasses) {
         modelElement.cssClasses = [maxSeverityCSSClass];
     } else {
@@ -170,7 +171,8 @@ function addMaxSeverityCSSClassToIssueParent(modelElement: SParentElement, issue
 }
 
 function removeCSSClassFromIssueParent(modelElement: SParentElement, issueMarker: SIssueMarker): void {
-    removeCssClasses(modelElement, [getSeverity(issueMarker)]);
+    const severity = getSeverity(issueMarker);
+    removeCssClasses(modelElement, [severity]);
 }
 
 /**

package/src/index.ts

@@ -22,11 +22,11 @@ import glspEditLabelModule from './features/edit-label/di.config';
 import modelHintsModule from './features/hints/di.config';
 import glspHoverModule from './features/hover/di.config';
 import layoutModule from './features/layout/di.config';
-import modelSourceWatcherModule from './features/model-source-watcher/di.config';
 import glspMouseToolModule from './features/mouse-tool/di.config';
 import { navigationModule } from './features/navigation/di.config';
 import saveModule from './features/save/di.config';
 import glspSelectModule from './features/select/di.config';
+import sourceModelWatcherModule from './features/source-model-watcher/di.config';
 import toolFeedbackModule from './features/tool-feedback/di.config';
 import paletteModule from './features/tool-palette/di.config';
 import { enableDefaultToolsOnFocusLossModule, toolsModule } from './features/tools/di.config';
@@ -66,7 +66,6 @@ export * from './features/hints/model';
 export * from './features/hints/type-hints';
 export * from './features/hover/hover';
 export * from './features/layout/layout-elements-action';
-export * from './features/model-source-watcher/model-source-changed-action-handler';
 export * from './features/mouse-tool/mouse-tool';
 export * from './features/navigation/navigation-action-handler';
 export * from './features/navigation/navigation-target-resolver';
@@ -74,6 +73,7 @@ export * from './features/rank/model';
 export * from './features/reconnect/model';
 export * from './features/save/model';
 export * from './features/save/save-keylistener';
+export * from './features/source-model-watcher/source-model-changed-action-handler';
 export * from './features/tool-feedback/change-bounds-tool-feedback';
 export * from './features/tool-feedback/creation-tool-feedback';
 export * from './features/tool-feedback/css-feedback';
@@ -121,6 +121,6 @@ export {
     navigationModule,
     markerNavigatorModule,
     glspDecorationModule,
-    modelSourceWatcherModule,
+    sourceModelWatcherModule as modelSourceWatcherModule,
     glspViewportModule
 };

package/src/views/glsp-projection-view.tsx

@@ -0,0 +1,166 @@
+/********************************************************************************
+ * Copyright (c) 2017-2018 TypeFox and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+/** @jsx html */
+import { Bounds } from '@eclipse-glsp/protocol';
+import { injectable } from 'inversify';
+import { h, VNode, VNodeStyle } from 'snabbdom';
+import {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    html,
+    IViewArgs,
+    ProjectedViewportView,
+    ProjectionParams,
+    RenderingContext,
+    setClass,
+    ViewportRootElement,
+    ViewProjection
+} from 'sprotty';
+
+/**
+ * Special viewport root view that renders horizontal and vertical projection bars for quick navigation.
+ */
+@injectable()
+export class GLSPProjectionView extends ProjectedViewportView {
+    override render(model: Readonly<ViewportRootElement>, context: RenderingContext, args?: IViewArgs): VNode {
+        return (
+            <div class-sprotty-graph={true} style={{ width: '100%' }}>
+                {this.renderSvg(model, context, args)}
+                {this.renderProjections(model, context, args)}
+            </div>
+        );
+    }
+
+    protected override renderSvg(model: Readonly<ViewportRootElement>, context: RenderingContext, args?: IViewArgs): VNode {
+        const transform = `scale(${model.zoom}) translate(${-model.scroll.x},${-model.scroll.y})`;
+        const ns = 'http://www.w3.org/2000/svg';
+        const svg = h('svg', { ns, style: { height: '100%' } }, h('g', { ns, attrs: { transform } }, context.renderChildren(model)));
+        return svg;
+    }
+
+    protected override renderProjectionBar(
+        projections: ViewProjection[],
+        model: Readonly<ViewportRootElement>,
+        modelBounds: Bounds,
+        orientation: 'horizontal' | 'vertical'
+    ): VNode {
+        const params: ProjectionParams = { modelBounds, orientation } as ProjectionParams;
+        // NOTE: Here we assume that the projection bars have the same size as the diagram canvas,
+        // i.e. they are drawn as overlay above the canvas.
+        params.factor =
+            orientation === 'horizontal' ? model.canvasBounds.width / modelBounds.width : model.canvasBounds.height / modelBounds.height;
+        params.zoomedFactor = params.factor / model.zoom;
+        return (
+            <div
+                class-sprotty-projection-bar={true}
+                class-horizontal={orientation === 'horizontal'}
+                class-vertical={orientation === 'vertical'}
+                class-bordered-projection-bar={true}
+            >
+                {this.renderViewport(model, params)}
+                {projections.map(p => this.renderProjection(p, model, params))}
+            </div>
+        );
+    }
+
+    protected override renderViewport(model: Readonly<ViewportRootElement>, params: ProjectionParams): VNode {
+        let canvasSize;
+        let viewportPos: number;
+        if (params.orientation === 'horizontal') {
+            canvasSize = model.canvasBounds.width;
+            viewportPos = (model.scroll.x - params.modelBounds.x) * params.factor;
+        } else {
+            canvasSize = model.canvasBounds.height;
+            viewportPos = (model.scroll.y - params.modelBounds.y) * params.factor;
+        }
+        let viewportSize = canvasSize * params.zoomedFactor;
+        if (viewportPos < 0) {
+            viewportSize += viewportPos;
+            viewportPos = 0;
+        } else if (viewportPos > canvasSize) {
+            viewportPos = canvasSize;
+        }
+        if (viewportSize < 0) {
+            viewportSize = 0;
+        } else if (viewportPos + viewportSize > canvasSize) {
+            viewportSize = canvasSize - viewportPos;
+        }
+        if (Math.abs(viewportSize - canvasSize) < 1) {
+            viewportSize = 0;
+        }
+        const style: VNodeStyle =
+            params.orientation === 'horizontal'
+                ? {
+                      left: `${viewportPos}px`,
+                      width: `${viewportSize}px`,
+                      border: 'none'
+                  }
+                : {
+                      top: `${viewportPos}px`,
+                      height: `${viewportSize}px`,
+                      border: 'none'
+                  };
+        return <div class-sprotty-viewport={viewportSize !== 0} class-projection-scroll-bar={true} style={style} />;
+    }
+
+    protected override renderProjection(projection: ViewProjection, model: Readonly<ViewportRootElement>, params: ProjectionParams): VNode {
+        let canvasSize;
+        let projPos;
+        let projSize: number;
+        if (params.orientation === 'horizontal') {
+            canvasSize = model.canvasBounds.width;
+            projPos = (projection.projectedBounds.x - params.modelBounds.x) * params.factor;
+            projSize = projection.projectedBounds.width * params.factor;
+        } else {
+            canvasSize = model.canvasBounds.height;
+            projPos = (projection.projectedBounds.y - params.modelBounds.y) * params.factor;
+            projSize = projection.projectedBounds.height * params.factor;
+        }
+        if (projPos < 0) {
+            projSize += projPos;
+            projPos = 0;
+        } else if (projPos > canvasSize) {
+            projPos = canvasSize;
+        }
+        if (projSize < 0) {
+            projSize = 0;
+        } else if (projPos + projSize > canvasSize) {
+            projSize = canvasSize - projPos;
+        }
+        const style: VNodeStyle =
+            params.orientation === 'horizontal'
+                ? {
+                      left: `${projPos}px`,
+                      width: `${projSize}px`,
+                      height: '60%'
+                  }
+                : {
+                      top: `${projPos}px`,
+                      height: `${projSize}px`,
+                      width: '60%'
+                  };
+        const result = (
+            <div
+                id={`${params.orientation}-projection:${projection.elementId}`}
+                class-sprotty-projection={true}
+                class-glsp-projection={true}
+                style={style}
+            />
+        );
+        projection.cssClasses.forEach(cl => setClass(result, cl, true));
+        return result;
+    }
+}

package/src/views/index.ts

@@ -16,6 +16,8 @@
 export * from './base-view-module';
 export * from './compartments';
 export * from './glsp-edge-view';
+export * from './glsp-projection-view';
 export * from './issue-marker-view';
 export * from './rounded-corner';
 export * from './rounded-corner-view';
+

package/lib/features/model-source-watcher/di.config.d.ts

@@ -1,4 +0,0 @@
-import { ContainerModule } from 'inversify';
-declare const modelSourceWatcherModule: ContainerModule;
-export default modelSourceWatcherModule;
-//# sourceMappingURL=di.config.d.ts.map