sprotty
Version:
A next-gen framework for graphical views
145 lines • 6.86 kB
JavaScript
;
/********************************************************************************
* 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
********************************************************************************/
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProjectedViewportView = void 0;
/** @jsx html */
const jsx_1 = require("../../lib/jsx");
const inversify_1 = require("inversify");
const snabbdom_1 = require("snabbdom");
const vnode_utils_1 = require("../../base/views/vnode-utils");
const model_1 = require("./model");
/**
* Special viewport root view that renders horizontal and vertical projection bars for quick navigation.
*/
let ProjectedViewportView = class ProjectedViewportView {
render(model, context, args) {
const rootNode = (0, jsx_1.html)("div", { "class-sprotty-root": true },
this.renderSvg(model, context, args),
this.renderProjections(model, context, args));
(0, vnode_utils_1.setAttr)(rootNode, 'tabindex', 0); // make root div focus-able
return rootNode;
}
renderSvg(model, context, args) {
const transform = `scale(${model.zoom}) translate(${-model.scroll.x},${-model.scroll.y})`;
const ns = 'http://www.w3.org/2000/svg';
return (0, snabbdom_1.h)('svg', { ns }, (0, snabbdom_1.h)('g', { ns, attrs: { transform } }, context.renderChildren(model)));
}
renderProjections(model, context, args) {
var _a;
if (model.zoom <= 0) {
return [];
}
const modelBounds = (0, model_1.getModelBounds)(model);
if (!modelBounds) {
return [];
}
const projections = (_a = (0, model_1.getProjections)(model)) !== null && _a !== void 0 ? _a : [];
return [
this.renderProjectionBar(projections, model, modelBounds, 'vertical'),
this.renderProjectionBar(projections, model, modelBounds, 'horizontal')
];
}
renderProjectionBar(projections, model, modelBounds, orientation) {
const params = { modelBounds, orientation };
// 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 (0, jsx_1.html)("div", { "class-sprotty-projection-bar": true, "class-horizontal": orientation === 'horizontal', "class-vertical": orientation === 'vertical' },
this.renderViewport(model, params),
projections.map(p => this.renderProjection(p, model, params)));
}
renderViewport(model, params) {
let canvasSize, 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;
}
const style = params.orientation === 'horizontal' ? {
left: `${viewportPos}px`,
width: `${viewportSize}px`
} : {
top: `${viewportPos}px`,
height: `${viewportSize}px`
};
return (0, jsx_1.html)("div", { "class-sprotty-viewport": true, style: style });
}
renderProjection(projection, model, params) {
let canvasSize, projPos, projSize;
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 = params.orientation === 'horizontal' ? {
left: `${projPos}px`,
width: `${projSize}px`
} : {
top: `${projPos}px`,
height: `${projSize}px`
};
const result = (0, jsx_1.html)("div", { id: `${params.orientation}-projection:${projection.elementId}`, "class-sprotty-projection": true, style: style });
projection.cssClasses.forEach(cl => (0, vnode_utils_1.setClass)(result, cl, true));
return result;
}
};
exports.ProjectedViewportView = ProjectedViewportView;
exports.ProjectedViewportView = ProjectedViewportView = __decorate([
(0, inversify_1.injectable)()
], ProjectedViewportView);
//# sourceMappingURL=views.js.map