Socket
Socket
Sign inDemoInstall

sprotty

Package Overview
Dependencies
6
Maintainers
4
Versions
236
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.2.0 to 1.3.0-next.8eb479f.3

lib/features/export/svg-export-postprocessor.d.ts
lib/features/export/svg-export-postprocessor.d.ts.map
lib/features/export/svg-export-postprocessor.js
lib/features/export/svg-export-postprocessor.js.map
src/features/export/svg-export-postprocessor.ts

3

lib/base/types.d.ts
/********************************************************************************
* Copyright (c) 2017-2018 TypeFox and others.
* Copyright (c) 2017-2024 TypeFox and others.
*

@@ -67,2 +67,3 @@ * This program and the accompanying materials are made available under the

SvgExporter: symbol;
ISvgExportPostprocessor: symbol;
IUIExtension: symbol;

@@ -69,0 +70,0 @@ UIExtensionRegistry: symbol;

3

lib/base/types.js
"use strict";
/********************************************************************************
* Copyright (c) 2017-2018 TypeFox and others.
* Copyright (c) 2017-2024 TypeFox and others.
*

@@ -71,2 +71,3 @@ * This program and the accompanying materials are made available under the

SvgExporter: Symbol('SvgExporter'),
ISvgExportPostprocessor: Symbol('ISvgExportPostprocessor'),
IUIExtension: Symbol('IUIExtension'),

@@ -73,0 +74,0 @@ UIExtensionRegistry: Symbol('UIExtensionRegistry'),

1

lib/features/edge-junction/di.config.js

@@ -27,4 +27,5 @@ "use strict";

bind(types_1.TYPES.IVNodePostprocessor).toService(junction_postprocessor_1.JunctionPostProcessor);
bind(types_1.TYPES.HiddenVNodePostprocessor).toService(junction_postprocessor_1.JunctionPostProcessor);
});
exports.default = edgeJunctionModule;
//# sourceMappingURL=di.config.js.map

7

lib/features/edge-junction/junction-postprocessor.d.ts

@@ -16,6 +16,6 @@ /********************************************************************************

********************************************************************************/
import { IVNodePostprocessor } from "../../base/views/vnode-postprocessor";
import { VNode } from "snabbdom";
import { Action } from "sprotty-protocol";
import { Action, SModelRoot } from "sprotty-protocol";
import { SModelElementImpl } from "../../base/model/smodel";
import { IVNodePostprocessor } from "../../base/views/vnode-postprocessor";
/**

@@ -26,3 +26,6 @@ * Finds all junction points in the first SVG group element (diagram root level) and moves them to the end of the SVG.

export declare class JunctionPostProcessor implements IVNodePostprocessor {
currentModel: SModelRoot;
isFirstRender: boolean;
private viewerOptions;
private modelSource;
decorate(vnode: VNode, element: SModelElementImpl): VNode;

@@ -29,0 +32,0 @@ postUpdate(cause?: Action | undefined): void;

45

lib/features/edge-junction/junction-postprocessor.js

@@ -29,3 +29,5 @@ "use strict";

const inversify_1 = require("inversify");
const sprotty_protocol_1 = require("sprotty-protocol");
const types_1 = require("../../base/types");
const model_source_1 = require("../../model-source/model-source");
/**

@@ -36,2 +38,5 @@ * Finds all junction points in the first SVG group element (diagram root level) and moves them to the end of the SVG.

let JunctionPostProcessor = class JunctionPostProcessor {
constructor() {
this.isFirstRender = true;
}
decorate(vnode, element) {

@@ -41,11 +46,37 @@ return vnode;

postUpdate(cause) {
const baseDiv = this.viewerOptions.baseDiv;
const svg = document.querySelector(`#${baseDiv} > svg > g`);
if (svg) {
const junctionGroups = Array.from(document.querySelectorAll('g.sprotty-junction'));
// if the model has changed, we need to remove the junction points from the previous model
if (this.currentModel !== this.modelSource.model) {
this.isFirstRender = true;
}
// if the cause of the update is a RequestBoundsAction (from the hidden model)
// and we are rendering the diagram for the first time (not from an update or setting the same model again)
// we need to remove the junction points from the previous model
if ((cause === null || cause === void 0 ? void 0 : cause.kind) === sprotty_protocol_1.RequestBoundsAction.KIND && this.isFirstRender) {
const junctionPointsInHiddenDiv = document.querySelectorAll(`#${this.viewerOptions.hiddenDiv} > svg > g > g.sprotty-junction`);
junctionPointsInHiddenDiv.forEach(e => e.remove());
const junctionPointsInBaseDiv = document.querySelectorAll(`#${this.viewerOptions.baseDiv} > svg > g > g.sprotty-junction`);
junctionPointsInBaseDiv.forEach(e => e.remove());
}
const hiddenSvg = document.querySelector(`#${this.viewerOptions.hiddenDiv} > svg > g`);
const baseSvg = document.querySelector(`#${this.viewerOptions.baseDiv} > svg > g`);
// move junction points to the end of the SVG in the hidden div
if (hiddenSvg) {
const junctionGroups = Array.from(document.querySelectorAll(`#${this.viewerOptions.hiddenDiv} > svg > g > g > g.sprotty-junction`));
junctionGroups.forEach(junctionGroup => {
junctionGroup.remove();
});
svg.append(...junctionGroups);
hiddenSvg.append(...junctionGroups);
}
// move junction points to the end of the SVG in the base div
if (baseSvg) {
const junctionGroups = Array.from(document.querySelectorAll(`#${this.viewerOptions.baseDiv} > svg > g > g > g.sprotty-junction`));
junctionGroups.forEach(junctionGroup => {
junctionGroup.remove();
});
baseSvg.append(...junctionGroups);
}
// update the current model
this.currentModel = this.modelSource.model;
// after the first render, we don't need to remove the junction points anymore
this.isFirstRender = false;
}

@@ -58,2 +89,6 @@ };

], JunctionPostProcessor.prototype, "viewerOptions", void 0);
__decorate([
(0, inversify_1.inject)(types_1.TYPES.ModelSource),
__metadata("design:type", model_source_1.ModelSource)
], JunctionPostProcessor.prototype, "modelSource", void 0);
exports.JunctionPostProcessor = JunctionPostProcessor = __decorate([

@@ -60,0 +95,0 @@ (0, inversify_1.injectable)()

72

lib/features/edge-layout/edge-layout.js

@@ -37,2 +37,3 @@ "use strict";

const types_1 = require("../../base/types");
const model_3 = require("../move/model");
let EdgeLayoutPostprocessor = class EdgeLayoutPostprocessor {

@@ -46,3 +47,3 @@ /**

decorate(vnode, element) {
var _a, _b;
var _a, _b, _c, _d;
if ((0, model_2.isEdgeLayoutable)(element) && element.parent instanceof sgraph_1.SEdgeImpl) {

@@ -59,30 +60,29 @@ if (element.bounds !== geometry_1.Bounds.EMPTY) {

let transform = '';
// Calculation of potential free movement. Just add the actual bounds to the point on edge.
const freeTransform = `translate(${((_a = pointOnEdge === null || pointOnEdge === void 0 ? void 0 : pointOnEdge.x) !== null && _a !== void 0 ? _a : 0) + actualBounds.x}, ${((_b = pointOnEdge === null || pointOnEdge === void 0 ? void 0 : pointOnEdge.y) !== null && _b !== void 0 ? _b : 0) + actualBounds.y})`;
// get the relative position on segment. This can be later changed if the moveMode is set to 'edge'.
let derivativeOnEdge = router.derivativeAt(edge, position);
;
// Check if edgeplacement is set. If not the label is freely movable if movefeature is enabled for such labels.
if (hasOwnPlacement) {
if (pointOnEdge) {
let derivativeOnEdge;
// handle different move modes
if (placement.moveMode && placement.moveMode !== 'edge') {
// get the relative position on segment
derivativeOnEdge = router.derivativeAt(edge, position);
// handle free move mode
if (placement.moveMode === 'free') {
transform += freeTransform;
}
else {
// The moveMode is neither 'edge' nor 'free' so it is 'none'. Hence the label is not movable and gets the fixed point on edge.
if (pointOnEdge) {
if (hasOwnPlacement) {
switch (placement.moveMode) {
case 'edge':
// Find orthogonal intersection point on edge and use it as the label's position
const orthogonalPoint = router.findOrthogonalIntersection(edge, geometry_1.Point.add(pointOnEdge, actualBounds));
if (orthogonalPoint) {
derivativeOnEdge = orthogonalPoint.derivative;
transform += `translate(${orthogonalPoint.point.x}, ${orthogonalPoint.point.y})`;
}
break;
case 'free':
// Calculation of potential free movement. Just add the actual bounds to the point on edge.
transform += `translate(${((_a = pointOnEdge === null || pointOnEdge === void 0 ? void 0 : pointOnEdge.x) !== null && _a !== void 0 ? _a : 0) + actualBounds.x}, ${((_b = pointOnEdge === null || pointOnEdge === void 0 ? void 0 : pointOnEdge.y) !== null && _b !== void 0 ? _b : 0) + actualBounds.y})`;
;
break;
case 'none':
transform += `translate(${pointOnEdge.x}, ${pointOnEdge.y})`;
}
break;
default:
this.logger.error({}, 'No moveMode set for edge label. Skipping edge placement.');
break;
}
else {
// no movemode was set or set to 'edge': label movement is constrained to the edge
// Find orthogonal intersection point on edge and use it as the label's position
const orthogonalPoint = router.findOrthogonalIntersection(edge, geometry_1.Point.add(pointOnEdge, actualBounds));
if (orthogonalPoint) {
derivativeOnEdge = orthogonalPoint.derivative;
transform += `translate(${orthogonalPoint.point.x}, ${orthogonalPoint.point.y})`;
}
}
if (derivativeOnEdge) {

@@ -111,6 +111,14 @@ const angle = (0, geometry_1.toDegrees)(Math.atan2(derivativeOnEdge.y, derivativeOnEdge.x));

}
else {
// if the element is moveable and no placement is specified, the label is freely movable (i.e. moveMode = 'free').
// Otherwise it is fixed to its position (i.e. moveMode = 'none').
if ((0, model_3.isMoveable)(element)) {
transform += `translate(${((_c = pointOnEdge === null || pointOnEdge === void 0 ? void 0 : pointOnEdge.x) !== null && _c !== void 0 ? _c : 0) + actualBounds.x}, ${((_d = pointOnEdge === null || pointOnEdge === void 0 ? void 0 : pointOnEdge.y) !== null && _d !== void 0 ? _d : 0) + actualBounds.y})`;
;
}
else {
transform += `translate(${pointOnEdge.x}, ${pointOnEdge.y})`;
}
}
}
else {
transform += freeTransform;
}
(0, vnode_utils_1.setAttr)(vnode, 'transform', transform);

@@ -175,3 +183,7 @@ }

}
return allPlacements.reverse().reduce((a, b) => { return Object.assign(Object.assign({}, a), b); }, model_2.DEFAULT_EDGE_PLACEMENT);
const edgePlacement = allPlacements.reverse().reduce((a, b) => { return Object.assign(Object.assign({}, a), b); }, model_2.DEFAULT_EDGE_PLACEMENT);
if (!edgePlacement.moveMode) {
edgePlacement.moveMode = (0, model_3.isMoveable)(element) ? 'edge' : 'none';
}
return edgePlacement;
}

@@ -178,0 +190,0 @@ getAlignment(label, placement, angle) {

2

lib/features/edge-layout/model.d.ts
/********************************************************************************
* Copyright (c) 2017-2018 TypeFox and others.
* Copyright (c) 2017-2024 TypeFox and others.
*

@@ -4,0 +4,0 @@ * This program and the accompanying materials are made available under the

5

lib/features/edge-layout/model.js
"use strict";
/********************************************************************************
* Copyright (c) 2017-2018 TypeFox and others.
* Copyright (c) 2017-2024 TypeFox and others.
*

@@ -44,5 +44,4 @@ * This program and the accompanying materials are made available under the

position: 0.5,
offset: 7,
moveMode: 'edge'
offset: 7
};
//# sourceMappingURL=model.js.map

8

lib/features/export/export.d.ts
/********************************************************************************
* Copyright (c) 2017-2018 TypeFox and others.
* Copyright (c) 2017-2024 TypeFox and others.
*

@@ -26,8 +26,12 @@ * This program and the accompanying materials are made available under the

}
export interface ExportSvgOptions {
skipCopyStyles?: boolean;
}
export interface RequestExportSvgAction extends RequestAction<ExportSvgAction> {
kind: typeof RequestExportSvgAction.KIND;
options?: ExportSvgOptions;
}
export declare namespace RequestExportSvgAction {
const KIND = "requestExportSvg";
function create(): RequestExportSvgAction;
function create(options?: ExportSvgOptions): RequestExportSvgAction;
}

@@ -34,0 +38,0 @@ export declare class ExportSvgCommand extends HiddenCommand {

7

lib/features/export/export.js
"use strict";
/********************************************************************************
* Copyright (c) 2017-2018 TypeFox and others.
* Copyright (c) 2017-2024 TypeFox and others.
*

@@ -58,6 +58,7 @@ * This program and the accompanying materials are made available under the

RequestExportSvgAction.KIND = 'requestExportSvg';
function create() {
function create(options = {}) {
return {
kind: RequestExportSvgAction.KIND,
requestId: (0, actions_1.generateRequestId)()
requestId: (0, actions_1.generateRequestId)(),
options
};

@@ -64,0 +65,0 @@ }

18

lib/features/export/svg-exporter.d.ts
/********************************************************************************
* Copyright (c) 2017-2018 TypeFox and others.
* Copyright (c) 2017-2024 TypeFox and others.
*

@@ -16,8 +16,10 @@ * This program and the accompanying materials are made available under the

********************************************************************************/
import { RequestAction, ResponseAction } from 'sprotty-protocol/lib/actions';
import { Action, ResponseAction } from 'sprotty-protocol/lib/actions';
import { Bounds } from 'sprotty-protocol/lib/utils/geometry';
import { ViewerOptions } from '../../base/views/viewer-options';
import { ActionDispatcher } from '../../base/actions/action-dispatcher';
import { SModelRootImpl } from '../../base/model/smodel';
import { ViewerOptions } from '../../base/views/viewer-options';
import { ILogger } from '../../utils/logging';
import { RequestExportSvgAction, ExportSvgOptions } from "./export";
import { ISvgExportPostProcessor } from "./svg-export-postprocessor";
export interface ExportSvgAction extends ResponseAction {

@@ -27,6 +29,7 @@ kind: typeof ExportSvgAction.KIND;

responseId: string;
options?: ExportSvgOptions;
}
export declare namespace ExportSvgAction {
const KIND = "exportSvg";
function create(svg: string, requestId: string): ExportSvgAction;
function create(svg: string, requestId: string, options?: ExportSvgOptions): ExportSvgAction;
}

@@ -37,7 +40,8 @@ export declare class SvgExporter {

protected log: ILogger;
export(root: SModelRootImpl, request?: RequestAction<ExportSvgAction>): void;
protected createSvg(svgElementOrig: SVGSVGElement, root: SModelRootImpl): string;
protected postprocessors: ISvgExportPostProcessor[];
export(root: SModelRootImpl, request?: RequestExportSvgAction): void;
protected createSvg(svgElementOrig: SVGSVGElement, root: SModelRootImpl, options?: ExportSvgOptions, cause?: Action): string;
protected copyStyles(source: Element, target: Element, skippedProperties: string[]): void;
protected getBounds(root: SModelRootImpl): Bounds;
protected getBounds(root: SModelRootImpl, document: Document): Bounds;
}
//# sourceMappingURL=svg-exporter.d.ts.map

42

lib/features/export/svg-exporter.js
"use strict";
/********************************************************************************
* Copyright (c) 2017-2018 TypeFox and others.
* Copyright (c) 2017-2024 TypeFox and others.
*

@@ -30,13 +30,14 @@ * This program and the accompanying materials are made available under the

const geometry_1 = require("sprotty-protocol/lib/utils/geometry");
const model_1 = require("../bounds/model");
const action_dispatcher_1 = require("../../base/actions/action-dispatcher");
const types_1 = require("../../base/types");
const model_1 = require("../bounds/model");
var ExportSvgAction;
(function (ExportSvgAction) {
ExportSvgAction.KIND = 'exportSvg';
function create(svg, requestId) {
function create(svg, requestId, options) {
return {
kind: ExportSvgAction.KIND,
svg,
responseId: requestId
responseId: requestId,
options
};

@@ -47,2 +48,5 @@ }

let SvgExporter = class SvgExporter {
constructor() {
this.postprocessors = [];
}
export(root, request) {

@@ -60,7 +64,7 @@ if (typeof document !== 'undefined') {

}
const svg = this.createSvg(svgElement, root);
this.actionDispatcher.dispatch(ExportSvgAction.create(svg, request ? request.requestId : ''));
const svg = this.createSvg(svgElement, root, (request === null || request === void 0 ? void 0 : request.options) || {}, request);
this.actionDispatcher.dispatch(ExportSvgAction.create(svg, request ? request.requestId : '', request === null || request === void 0 ? void 0 : request.options));
}
}
createSvg(svgElementOrig, root) {
createSvg(svgElementOrig, root, options, cause) {
const serializer = new XMLSerializer();

@@ -78,7 +82,14 @@ const svgCopy = serializer.serializeToString(svgElementOrig);

svgElementNew.removeAttribute('opacity');
// inline-size copied from sprotty-hidden svg shrinks the svg so it is not visible.
this.copyStyles(svgElementOrig, svgElementNew, ['width', 'height', 'opacity', 'inline-size']);
if (!(options === null || options === void 0 ? void 0 : options.skipCopyStyles)) {
// inline-size copied from sprotty-hidden svg shrinks the svg so it is not visible.
this.copyStyles(svgElementOrig, svgElementNew, ['width', 'height', 'opacity', 'inline-size']);
}
svgElementNew.setAttribute('version', '1.1');
const bounds = this.getBounds(root);
const bounds = this.getBounds(root, docCopy);
svgElementNew.setAttribute('viewBox', `${bounds.x} ${bounds.y} ${bounds.width} ${bounds.height}`);
svgElementNew.setAttribute('width', `${bounds.width}`);
svgElementNew.setAttribute('height', `${bounds.height}`);
this.postprocessors.forEach(postprocessor => {
postprocessor.postUpdate(svgElementNew, cause);
});
const svgCode = serializer.serializeToString(svgElementNew);

@@ -111,3 +122,7 @@ document.body.removeChild(iframe);

}
getBounds(root) {
getBounds(root, document) {
const svgElement = document.querySelector('svg');
if (svgElement) {
return svgElement.getBBox();
}
const allBounds = [geometry_1.Bounds.EMPTY];

@@ -135,2 +150,7 @@ root.children.forEach(element => {

], SvgExporter.prototype, "log", void 0);
__decorate([
(0, inversify_1.multiInject)(types_1.TYPES.ISvgExportPostprocessor),
(0, inversify_1.optional)(),
__metadata("design:type", Array)
], SvgExporter.prototype, "postprocessors", void 0);
exports.SvgExporter = SvgExporter = __decorate([

@@ -137,0 +157,0 @@ (0, inversify_1.injectable)()

4

lib/index.d.ts
/********************************************************************************
* Copyright (c) 2017-2018 TypeFox and others.
* Copyright (c) 2017-2024 TypeFox and others.
*

@@ -79,2 +79,3 @@ * This program and the accompanying materials are made available under the

export * from './features/export/svg-exporter';
export * from './features/export/svg-export-postprocessor';
export * from './features/fade/fade';

@@ -90,2 +91,3 @@ export * from './features/fade/model';

export * from './features/edge-junction/junction-finder';
export * from './features/edge-junction/junction-postprocessor';
export * from './features/move/model';

@@ -92,0 +94,0 @@ export * from './features/move/move';

4

lib/index.js
"use strict";
/********************************************************************************
* Copyright (c) 2017-2018 TypeFox and others.
* Copyright (c) 2017-2024 TypeFox and others.
*

@@ -101,2 +101,3 @@ * This program and the accompanying materials are made available under the

__exportStar(require("./features/export/svg-exporter"), exports);
__exportStar(require("./features/export/svg-export-postprocessor"), exports);
__exportStar(require("./features/fade/fade"), exports);

@@ -112,2 +113,3 @@ __exportStar(require("./features/fade/model"), exports);

__exportStar(require("./features/edge-junction/junction-finder"), exports);
__exportStar(require("./features/edge-junction/junction-postprocessor"), exports);
__exportStar(require("./features/move/model"), exports);

@@ -114,0 +116,0 @@ __exportStar(require("./features/move/move"), exports);

6

package.json
{
"name": "sprotty",
"version": "1.2.0",
"version": "1.3.0-next.8eb479f.3+8eb479f",
"description": "A next-gen framework for graphical views",

@@ -29,3 +29,3 @@ "license": "(EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0)",

"snabbdom": "~3.5.1",
"sprotty-protocol": "^1.2.0",
"sprotty-protocol": "1.3.0-next.8eb479f.3+8eb479f",
"tinyqueue": "^2.0.3"

@@ -55,3 +55,3 @@ },

"types": "lib/index",
"gitHead": "0c679d4bdabcf0d9da8d25a8cc9f650a679b54df"
"gitHead": "8eb479fbd7b1836d32ad82d7a8188769a474598c"
}

3

src/base/types.ts
/********************************************************************************
* Copyright (c) 2017-2018 TypeFox and others.
* Copyright (c) 2017-2024 TypeFox and others.
*

@@ -69,2 +69,3 @@ * This program and the accompanying materials are made available under the

SvgExporter: Symbol('SvgExporter'),
ISvgExportPostprocessor: Symbol('ISvgExportPostprocessor'),
IUIExtension: Symbol('IUIExtension'),

@@ -71,0 +72,0 @@ UIExtensionRegistry: Symbol('UIExtensionRegistry'),

1

src/features/edge-junction/di.config.ts

@@ -27,4 +27,5 @@ /********************************************************************************

bind(TYPES.IVNodePostprocessor).toService(JunctionPostProcessor);
bind(TYPES.HiddenVNodePostprocessor).toService(JunctionPostProcessor);
});
export default edgeJunctionModule;

52

src/features/edge-junction/junction-postprocessor.ts

@@ -17,9 +17,10 @@ /********************************************************************************

import { injectable, inject } from "inversify";
import { IVNodePostprocessor } from "../../base/views/vnode-postprocessor";
import { inject, injectable } from "inversify";
import { VNode } from "snabbdom";
import { Action } from "sprotty-protocol";
import { Action, RequestBoundsAction, SModelRoot } from "sprotty-protocol";
import { SModelElementImpl } from "../../base/model/smodel";
import { TYPES } from "../../base/types";
import { ViewerOptions } from "../../base/views/viewer-options";
import { IVNodePostprocessor } from "../../base/views/vnode-postprocessor";
import { ModelSource } from "../../model-source/model-source";

@@ -32,3 +33,7 @@ /**

export class JunctionPostProcessor implements IVNodePostprocessor {
currentModel: SModelRoot;
isFirstRender = true;
@inject(TYPES.ViewerOptions) private viewerOptions: ViewerOptions;
@inject(TYPES.ModelSource) private modelSource: ModelSource;

@@ -39,14 +44,45 @@ decorate(vnode: VNode, element: SModelElementImpl): VNode {

postUpdate(cause?: Action | undefined): void {
const baseDiv = this.viewerOptions.baseDiv;
const svg = document.querySelector(`#${baseDiv} > svg > g`);
if (svg) {
const junctionGroups = Array.from(document.querySelectorAll('g.sprotty-junction'));
// if the model has changed, we need to remove the junction points from the previous model
if (this.currentModel !== this.modelSource.model) {
this.isFirstRender = true;
}
// if the cause of the update is a RequestBoundsAction (from the hidden model)
// and we are rendering the diagram for the first time (not from an update or setting the same model again)
// we need to remove the junction points from the previous model
if (cause?.kind === RequestBoundsAction.KIND && this.isFirstRender) {
const junctionPointsInHiddenDiv = document.querySelectorAll(`#${this.viewerOptions.hiddenDiv} > svg > g > g.sprotty-junction`);
junctionPointsInHiddenDiv.forEach(e => e.remove());
const junctionPointsInBaseDiv = document.querySelectorAll(`#${this.viewerOptions.baseDiv} > svg > g > g.sprotty-junction`);
junctionPointsInBaseDiv.forEach(e => e.remove());
}
const hiddenSvg = document.querySelector(`#${this.viewerOptions.hiddenDiv} > svg > g`);
const baseSvg = document.querySelector(`#${this.viewerOptions.baseDiv} > svg > g`);
// move junction points to the end of the SVG in the hidden div
if (hiddenSvg) {
const junctionGroups = Array.from(document.querySelectorAll(`#${this.viewerOptions.hiddenDiv} > svg > g > g > g.sprotty-junction`));
junctionGroups.forEach(junctionGroup => {
junctionGroup.remove();
});
hiddenSvg.append(...junctionGroups);
}
svg.append(...junctionGroups);
// move junction points to the end of the SVG in the base div
if (baseSvg) {
const junctionGroups = Array.from(document.querySelectorAll(`#${this.viewerOptions.baseDiv} > svg > g > g > g.sprotty-junction`));
junctionGroups.forEach(junctionGroup => {
junctionGroup.remove();
});
baseSvg.append(...junctionGroups);
}
// update the current model
this.currentModel = this.modelSource.model;
// after the first render, we don't need to remove the junction points anymore
this.isFirstRender = false;
}
}

64

src/features/edge-layout/edge-layout.ts

@@ -31,2 +31,3 @@ /********************************************************************************

import { ILogger } from '../../utils/logging';
import { isMoveable } from '../move/model';

@@ -57,27 +58,26 @@ @injectable()

let transform = '';
// Calculation of potential free movement. Just add the actual bounds to the point on edge.
const freeTransform = `translate(${(pointOnEdge?.x ?? 0) + actualBounds.x}, ${(pointOnEdge?.y ?? 0) + actualBounds.y})`;
// get the relative position on segment. This can be later changed if the moveMode is set to 'edge'.
let derivativeOnEdge = router.derivativeAt(edge, position);;
// Check if edgeplacement is set. If not the label is freely movable if movefeature is enabled for such labels.
if (hasOwnPlacement) {
if (pointOnEdge) {
let derivativeOnEdge: Point | undefined;
// handle different move modes
if (placement.moveMode && placement.moveMode !== 'edge') {
// get the relative position on segment
derivativeOnEdge = router.derivativeAt(edge, position);
// handle free move mode
if (placement.moveMode === 'free') {
transform += freeTransform;
} else {
// The moveMode is neither 'edge' nor 'free' so it is 'none'. Hence the label is not movable and gets the fixed point on edge.
if (pointOnEdge) {
if (hasOwnPlacement) {
switch (placement.moveMode) {
case 'edge':
// Find orthogonal intersection point on edge and use it as the label's position
const orthogonalPoint = router.findOrthogonalIntersection(edge, Point.add(pointOnEdge, actualBounds));
if (orthogonalPoint) {
derivativeOnEdge = orthogonalPoint.derivative;
transform += `translate(${orthogonalPoint.point.x}, ${orthogonalPoint.point.y})`;
}
break;
case 'free':
// Calculation of potential free movement. Just add the actual bounds to the point on edge.
transform += `translate(${(pointOnEdge?.x ?? 0) + actualBounds.x}, ${(pointOnEdge?.y ?? 0) + actualBounds.y})`;;
break;
case 'none':
transform += `translate(${pointOnEdge.x}, ${pointOnEdge.y})`;
}
} else {
// no movemode was set or set to 'edge': label movement is constrained to the edge
// Find orthogonal intersection point on edge and use it as the label's position
const orthogonalPoint = router.findOrthogonalIntersection(edge, Point.add(pointOnEdge, actualBounds));
if (orthogonalPoint) {
derivativeOnEdge = orthogonalPoint.derivative;
transform += `translate(${orthogonalPoint.point.x}, ${orthogonalPoint.point.y})`;
}
break;
default:
this.logger.error({}, 'No moveMode set for edge label. Skipping edge placement.');
break;
}

@@ -105,5 +105,11 @@ if (derivativeOnEdge) {

}
} else {
// if the element is moveable and no placement is specified, the label is freely movable (i.e. moveMode = 'free').
// Otherwise it is fixed to its position (i.e. moveMode = 'none').
if (isMoveable(element)) {
transform += `translate(${(pointOnEdge?.x ?? 0) + actualBounds.x}, ${(pointOnEdge?.y ?? 0) + actualBounds.y})`;;
} else {
transform += `translate(${pointOnEdge.x}, ${pointOnEdge.y})`;
}
}
} else {
transform += freeTransform;
}

@@ -170,4 +176,10 @@ setAttr(vnode, 'transform', transform);

}
return allPlacements.reverse().reduce(
const edgePlacement = allPlacements.reverse().reduce(
(a, b) => { return {...a, ...b}; }, DEFAULT_EDGE_PLACEMENT);
if (!edgePlacement.moveMode) {
edgePlacement.moveMode = isMoveable(element) ? 'edge' : 'none';
}
return edgePlacement;
}

@@ -174,0 +186,0 @@

5

src/features/edge-layout/model.ts
/********************************************************************************
* Copyright (c) 2017-2018 TypeFox and others.
* Copyright (c) 2017-2024 TypeFox and others.
*

@@ -85,4 +85,3 @@ * This program and the accompanying materials are made available under the

position: 0.5,
offset: 7,
moveMode: 'edge'
offset: 7
};

12

src/features/export/export.ts
/********************************************************************************
* Copyright (c) 2017-2018 TypeFox and others.
* Copyright (c) 2017-2024 TypeFox and others.
*

@@ -42,4 +42,9 @@ * This program and the accompanying materials are made available under the

export interface ExportSvgOptions {
skipCopyStyles?: boolean
}
export interface RequestExportSvgAction extends RequestAction<ExportSvgAction> {
kind: typeof RequestExportSvgAction.KIND
options?: ExportSvgOptions
}

@@ -49,6 +54,7 @@ export namespace RequestExportSvgAction {

export function create(): RequestExportSvgAction {
export function create(options: ExportSvgOptions = {}): RequestExportSvgAction {
return {
kind: KIND,
requestId: generateRequestId()
requestId: generateRequestId(),
options
};

@@ -55,0 +61,0 @@ }

59

src/features/export/svg-exporter.ts
/********************************************************************************
* Copyright (c) 2017-2018 TypeFox and others.
* Copyright (c) 2017-2024 TypeFox and others.
*

@@ -17,16 +17,19 @@ * This program and the accompanying materials are made available under the

import { injectable, inject } from "inversify";
import { RequestAction, ResponseAction } from 'sprotty-protocol/lib/actions';
import { inject, injectable, multiInject, optional } from "inversify";
import { Action, ResponseAction } from 'sprotty-protocol/lib/actions';
import { Bounds } from 'sprotty-protocol/lib/utils/geometry';
import { ViewerOptions } from '../../base/views/viewer-options';
import { isBoundsAware } from '../bounds/model';
import { ActionDispatcher } from '../../base/actions/action-dispatcher';
import { SModelRootImpl } from '../../base/model/smodel';
import { TYPES } from '../../base/types';
import { SModelRootImpl } from '../../base/model/smodel';
import { ViewerOptions } from '../../base/views/viewer-options';
import { ILogger } from '../../utils/logging';
import { isBoundsAware } from '../bounds/model';
import { RequestExportSvgAction, ExportSvgOptions } from "./export";
import { ISvgExportPostProcessor } from "./svg-export-postprocessor";
export interface ExportSvgAction extends ResponseAction {
kind: typeof ExportSvgAction.KIND;
svg: string
responseId: string
svg: string;
responseId: string;
options?: ExportSvgOptions;
}

@@ -36,7 +39,8 @@ export namespace ExportSvgAction {

export function create(svg: string, requestId: string): ExportSvgAction {
export function create(svg: string, requestId: string, options?: ExportSvgOptions): ExportSvgAction {
return {
kind: KIND,
svg,
responseId: requestId
responseId: requestId,
options
};

@@ -52,4 +56,5 @@ }

@inject(TYPES.ILogger) protected log: ILogger;
@multiInject(TYPES.ISvgExportPostprocessor) @optional() protected postprocessors: ISvgExportPostProcessor[] = [];
export(root: SModelRootImpl, request?: RequestAction<ExportSvgAction>): void {
export(root: SModelRootImpl, request?: RequestExportSvgAction): void {
if (typeof document !== 'undefined') {

@@ -68,8 +73,8 @@ const hiddenDiv = document.getElementById(this.options.hiddenDiv);

}
const svg = this.createSvg(svgElement, root);
this.actionDispatcher.dispatch(ExportSvgAction.create(svg, request ? request.requestId : ''));
const svg = this.createSvg(svgElement, root, request?.options || {}, request);
this.actionDispatcher.dispatch(ExportSvgAction.create(svg, request ? request.requestId : '', request?.options));
}
}
protected createSvg(svgElementOrig: SVGSVGElement, root: SModelRootImpl): string {
protected createSvg(svgElementOrig: SVGSVGElement, root: SModelRootImpl, options?: ExportSvgOptions, cause?: Action): string {
const serializer = new XMLSerializer();

@@ -87,9 +92,20 @@ const svgCopy = serializer.serializeToString(svgElementOrig);

svgElementNew.removeAttribute('opacity');
// inline-size copied from sprotty-hidden svg shrinks the svg so it is not visible.
this.copyStyles(svgElementOrig, svgElementNew, ['width', 'height', 'opacity', 'inline-size']);
if (!options?.skipCopyStyles) {
// inline-size copied from sprotty-hidden svg shrinks the svg so it is not visible.
this.copyStyles(svgElementOrig, svgElementNew, ['width', 'height', 'opacity', 'inline-size']);
}
svgElementNew.setAttribute('version', '1.1');
const bounds = this.getBounds(root);
const bounds = this.getBounds(root, docCopy);
svgElementNew.setAttribute('viewBox', `${bounds.x} ${bounds.y} ${bounds.width} ${bounds.height}`);
svgElementNew.setAttribute('width', `${bounds.width}`);
svgElementNew.setAttribute('height', `${bounds.height}`);
this.postprocessors.forEach(postprocessor => {
postprocessor.postUpdate(svgElementNew, cause);
});
const svgCode = serializer.serializeToString(svgElementNew);
document.body.removeChild(iframe);
return svgCode;

@@ -122,4 +138,9 @@ }

protected getBounds(root: SModelRootImpl) {
const allBounds: Bounds[] = [ Bounds.EMPTY ];
protected getBounds(root: SModelRootImpl, document: Document) {
const svgElement = document.querySelector('svg');
if (svgElement) {
return svgElement.getBBox();
}
const allBounds: Bounds[] = [Bounds.EMPTY];
root.children.forEach(element => {

@@ -126,0 +147,0 @@ if (isBoundsAware(element)) {

4

src/index.ts
/********************************************************************************
* Copyright (c) 2017-2018 TypeFox and others.
* Copyright (c) 2017-2024 TypeFox and others.
*

@@ -101,2 +101,3 @@ * This program and the accompanying materials are made available under the

export * from './features/export/svg-exporter';
export * from './features/export/svg-export-postprocessor';

@@ -117,2 +118,3 @@ export * from './features/fade/fade';

export * from './features/edge-junction/junction-finder';
export * from './features/edge-junction/junction-postprocessor';

@@ -119,0 +121,0 @@ export * from './features/move/model';

lib/base/types.d.ts.map

Sorry, the diff of this file is not supported yet

lib/base/types.js.map

Sorry, the diff of this file is not supported yet

lib/features/edge-junction/di.config.d.ts.map

Sorry, the diff of this file is not supported yet

lib/features/edge-junction/di.config.js.map

Sorry, the diff of this file is not supported yet

lib/features/edge-junction/junction-postprocessor.d.ts.map

Sorry, the diff of this file is not supported yet

lib/features/edge-junction/junction-postprocessor.js.map

Sorry, the diff of this file is not supported yet

lib/features/edge-layout/edge-layout.d.ts.map

Sorry, the diff of this file is not supported yet

lib/features/edge-layout/edge-layout.js.map

Sorry, the diff of this file is not supported yet

lib/features/edge-layout/model.d.ts.map

Sorry, the diff of this file is not supported yet

lib/features/edge-layout/model.js.map

Sorry, the diff of this file is not supported yet

lib/features/export/export.d.ts.map

Sorry, the diff of this file is not supported yet

lib/features/export/export.js.map

Sorry, the diff of this file is not supported yet

lib/features/export/svg-exporter.d.ts.map

Sorry, the diff of this file is not supported yet

lib/features/export/svg-exporter.js.map

Sorry, the diff of this file is not supported yet

lib/index.d.ts.map

Sorry, the diff of this file is not supported yet

lib/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc