@eclipse-glsp/client
Version:
A sprotty-based client for GLSP
141 lines • 6.88 kB
JavaScript
;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
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.GLSPProjectionView = void 0;
/********************************************************************************
* Copyright (c) 2017-2025 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 */
const sprotty_1 = require("@eclipse-glsp/sprotty");
const inversify_1 = require("inversify");
const snabbdom_1 = require("snabbdom");
const messages_1 = require("../base/messages");
const grid_style_1 = require("../features/grid/grid-style");
/**
* Special viewport root view that renders horizontal and vertical projection bars for quick navigation.
*/
let GLSPProjectionView = class GLSPProjectionView extends sprotty_1.ProjectedViewportView {
render(model, context, args) {
const rootNode = ((0, sprotty_1.html)("div", { "class-sprotty-graph": false, style: { width: '100%', height: '100%' } },
this.renderSvg(model, context, args),
this.renderProjections(model, context, args)));
(0, sprotty_1.setAttr)(rootNode, 'tabindex', 1);
(0, sprotty_1.setAttr)(rootNode, 'aria-label', messages_1.messages.diagram.label);
return rootNode;
}
renderSvg(model, context, args) {
const edgeRouting = this.edgeRouterRegistry.routeAllChildren(model);
const transform = `scale(${model.zoom}) translate(${-model.scroll.x},${-model.scroll.y})`;
const ns = 'http://www.w3.org/2000/svg';
const svg = (0, snabbdom_1.h)('svg', { ns, style: { height: '100%', ...this.getGridStyle(model, context) }, class: { 'sprotty-graph': true } }, (0, snabbdom_1.h)('g', { ns, attrs: { transform } }, context.renderChildren(model, { edgeRouting })));
return svg;
}
getGridStyle(viewport, context) {
if (context.targetKind === 'hidden' || !this.gridManager) {
return {};
}
const bounds = this.getBackgroundBounds(viewport, context, this.gridManager);
return {
[grid_style_1.GridProperty.GRID_BACKGROUND_X]: bounds.x + 'px',
[grid_style_1.GridProperty.GRID_BACKGROUND_Y]: bounds.y + 'px',
[grid_style_1.GridProperty.GRID_BACKGROUND_WIDTH]: bounds.width + 'px',
[grid_style_1.GridProperty.GRID_BACKGROUND_HEIGHT]: bounds.height + 'px',
[grid_style_1.GridProperty.GRID_BACKGROUND_ZOOM]: viewport.zoom + ''
};
}
getBackgroundBounds(viewport, context, gridManager) {
const position = sprotty_1.Point.multiplyScalar(sprotty_1.Point.subtract(gridManager.grid, viewport.scroll), viewport.zoom);
const size = sprotty_1.Dimension.fromPoint(sprotty_1.Point.multiplyScalar(gridManager.grid, viewport.zoom));
return { ...position, ...size };
}
renderProjectionBar(projections, model, modelBounds, orientation) {
const vnode = super.renderProjectionBar(projections, model, modelBounds, orientation);
(0, sprotty_1.setClass)(vnode, 'bordered-projection-bar', true);
return vnode;
}
renderViewport(model, params) {
let canvasSize;
let viewportPos;
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 = params.orientation === 'horizontal'
? {
left: `${viewportPos}px`,
width: `${viewportSize}px`
}
: {
top: `${viewportPos}px`,
height: `${viewportSize}px`
};
return (0, sprotty_1.html)("div", { "class-sprotty-viewport": viewportSize !== 0, "class-projection-scroll-bar": true, style: style });
}
renderProjection(projection, model, params) {
const vnode = super.renderProjection(projection, model, params);
(0, sprotty_1.setClass)(vnode, 'glsp-projection', true);
const style = vnode.data.style;
if (style.left) {
style.height = '60%';
}
else {
style.width = '60%';
}
return vnode;
}
};
exports.GLSPProjectionView = GLSPProjectionView;
__decorate([
(0, inversify_1.inject)(sprotty_1.EdgeRouterRegistry),
__metadata("design:type", sprotty_1.EdgeRouterRegistry)
], GLSPProjectionView.prototype, "edgeRouterRegistry", void 0);
__decorate([
(0, inversify_1.inject)(sprotty_1.TYPES.IGridManager),
(0, inversify_1.optional)(),
__metadata("design:type", Object)
], GLSPProjectionView.prototype, "gridManager", void 0);
exports.GLSPProjectionView = GLSPProjectionView = __decorate([
(0, inversify_1.injectable)()
], GLSPProjectionView);
//# sourceMappingURL=glsp-projection-view.js.map