Spring/spring-tools
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
BoykoAlex
2019-08-22 14:51:59 -04:00
parent 83193e5d42
commit 7ea3c0ad55
23 changed files with 973 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
nodejs-packages/sprotty-live-beans-client/copy-script.sh Normal file
View File

@@ -0,0 +1,5 @@
rm -rf ../../vscode-extensions/vscode-spring-boot/media/*
mkdir -p ../../vscode-extensions/vscode-spring-boot/media
cp bundle.js* ../../vscode-extensions/vscode-spring-boot/media
cp -R css ../../vscode-extensions/vscode-spring-boot/media
cp -R lib ../../vscode-extensions/vscode-spring-boot/media

46
nodejs-packages/sprotty-live-beans-client/css/diagram.css Normal file
View File

@@ -0,0 +1,46 @@
/********************************************************************************
* 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
********************************************************************************/
.sprotty-node {
fill: #aae;
stroke: #66b;
stroke-width: 3;
}
.sprotty-text {
font-size: 16pt;
text-anchor: middle;
}
.sprotty-edge {
fill: none;
stroke: #488;
stroke-width: 2;
}
.sprotty-node.selected {
stroke: #dd8;
stroke-width: 6;
}
.sprotty-missing {
stroke-width: 1;
stroke: #f00;
fill: #f00;
font-family: SansSerif;
font-size: 14pt;
text-anchor: middle;
}

38
nodejs-packages/sprotty-live-beans-client/css/page.css Normal file
View File

@@ -0,0 +1,38 @@
/********************************************************************************
* 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
********************************************************************************/
.copyright {
margin-top: 10px;
text-align: right;
font-size: 10px;
color: #888;
}
.help {
margin-top: 24px;
text-align: right;
font-size: 16px;
color: #888;
}
svg {
margin-top: 15px;
width: 100%;
height: 500px;
border-style: solid;
border-width: 1px;
border-color: #bbb;
}

39
nodejs-packages/sprotty-live-beans-client/index.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>sprotty Circles Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/page.css">
<!-- support Microsoft browsers -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dom4/3.0.0/dom4.js">
</head>
<body>
<div class="container">
<div class="row" id="sprotty-app" data-app="circlegraph">
<div class="col-md-10">
<h1>sprotty Circles Example</h1>
<p>
<button id="refresh">Refresh</button>
<button id="scrambleNodes">Scramble nodes</button>
</p>
</div>
<div class="help col-md-2">
<a href='https://github.com/theia-ide/sprotty/wiki/Using-sprotty'>Help</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="spring-boot" class="sprotty"/>
</div>
<div class="copyright">
&copy; 2017 <a href="http://typefox.io">TypeFox GmbH</a>.
</div>
</div>
</div>
</div>
<script src="bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
</body>
</html>

33
nodejs-packages/sprotty-live-beans-client/package.json Normal file
View File

@@ -0,0 +1,33 @@
{
"name": "sprotty-live-beans-client",
"version": "1.0.0",
"description": "",
"main": "bundle.js",
"scripts": {
"defunct-build": "tsc -p ./tsconfig.json",
"build": "webpack --progress --config ./webpack.config.js && bash copy-script.sh",
"run": "npx http-server -c-1 .",
"watch": "tsc -w -p ./tsconfig.json",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Kris De Volder <kdevolder@pivotal.io>",
"license": "ISC",
"dependencies": {
"@types/sockjs-client": "^1.1.1",
"reflect-metadata": "^0.1.10",
"sprotty": "^0.6.0",
"sockjs-client": "^1.3.0"
},
"devDependencies": {
"@types/node": "^12.7.2",
"circular-dependency-plugin": "^2.0.0",
"core-js": "^2.5.1",
"css-loader": "^2.1.0",
"http-server": "^0.11.1",
"style-loader": "^0.23.1",
"ts-loader": "^4.4.2",
"typescript": "^3.5.3",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8"
}
}

29
nodejs-packages/sprotty-live-beans-client/src/app.ts Normal file
View File

@@ -0,0 +1,29 @@
/********************************************************************************
* 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
********************************************************************************/
import "reflect-metadata";
console.log("Loaded reflect-metadata");
import runStandalone from "./standalone";
const appDiv = document.getElementById('sprotty-app')
if(appDiv) {
const appMode = appDiv.getAttribute('data-app');
if (appMode === 'circlegraph')
runStandalone();
else
throw new Error('Dunno what to do :-(');
}

78
nodejs-packages/sprotty-live-beans-client/src/di.config.ts Normal file
View File

@@ -0,0 +1,78 @@
/********************************************************************************
* 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
********************************************************************************/
import {BeanNode, VSCodeWebViewDiagramServer} from "./model";
console.log("Loading di.config");
import "reflect-metadata"
import { Container, ContainerModule } from "inversify";
import {
defaultModule,
TYPES,
configureViewerOptions,
ConsoleLogger,
LogLevel,
boundsModule,
hoverModule,
moveModule,
selectModule,
undoRedoModule,
viewportModule,
LocalModelSource,
exportModule,
CircularNode,
configureModelElement,
SGraph,
updateModule,
graphModule,
routingModule,
modelSourceModule,
SLabel,
SLabelView,
SCompartment,
SCompartmentView, SEdge
} from "sprotty";
import {BeanNodeView, CircleNodeView, EdgeView, ExampleGraphView} from "./views";
export default (useWebsocket: boolean) => {
require("sprotty/css/sprotty.css");
require("../css/diagram.css");
const circlegraphModule = new ContainerModule((bind, unbind, isBound, rebind) => {
if (useWebsocket)
bind(TYPES.ModelSource).to(VSCodeWebViewDiagramServer).inSingletonScope();
else
bind(TYPES.ModelSource).to(LocalModelSource).inSingletonScope();
rebind(TYPES.ILogger).to(ConsoleLogger).inSingletonScope();
rebind(TYPES.LogLevel).toConstantValue(LogLevel.log);
const context = { bind, unbind, isBound, rebind };
configureModelElement(context, 'graph', SGraph, ExampleGraphView);
configureModelElement(context, 'node:circle', CircularNode, CircleNodeView);
configureModelElement(context, 'node:bean', BeanNode, BeanNodeView);
configureModelElement(context, 'node:label', SLabel, SLabelView);
configureModelElement(context, 'compartment', SCompartment, SCompartmentView);
configureModelElement(context, 'edge:straight', /*OrthogonalEgde*/ SEdge, EdgeView);
configureViewerOptions(context, {
needsClientLayout: true,
needsServerLayout: true,
baseDiv: 'spring-boot'
});
});
const container = new Container();
container.load(defaultModule, selectModule, moveModule, boundsModule, undoRedoModule, viewportModule,
exportModule, updateModule, graphModule, routingModule, modelSourceModule, circlegraphModule, hoverModule);
return container;
};

67
nodejs-packages/sprotty-live-beans-client/src/model.ts Normal file
View File

@@ -0,0 +1,67 @@
import {ManhattanEdgeRouter, RectangularNode, SEdge, WebSocketDiagramServer, ActionMessage, DiagramServer} from "sprotty";
import {injectable} from 'inversify';
export class BeanNode extends RectangularNode {
}
export class OrthogonalEgde extends SEdge {
routerKind = ManhattanEdgeRouter.KIND;
}
const SOCKET_MESSAGE_BUFFER = 4000;
const END_MESSAGE = '@end';
@injectable()
export class ExampleWebsocketDiagramServer extends WebSocketDiagramServer {
protected sendMessage(message: ActionMessage): void {
if (this.webSocket) {
const messageStr = JSON.stringify(message);
let offset = 0;
while (offset < messageStr.length) {
this.webSocket.send(messageStr.substring(offset, offset + SOCKET_MESSAGE_BUFFER));
offset += SOCKET_MESSAGE_BUFFER;
}
this.webSocket.send(END_MESSAGE);
} else {
throw new Error('WebSocket is not connected');
}
}
}
@injectable()
export class VSCodeWebViewDiagramServer extends DiagramServer {
protected vscode: any;
listen(vscode: any): void {
window.addEventListener('message', event => {
const message = event.data; // The json data that the extension sent
console.log('Message Received');
this.messageReceived(message);
});
this.vscode = vscode;
}
// disconnect() {
// if (this.webSocket) {
// this.webSocket.close();
// this.webSocket = undefined;
// }
// }
//
protected sendMessage(message: ActionMessage): void {
console.log('Send Message');
if (this.vscode) {
this.vscode.postMessage(message);
} else {
throw new Error('No VSCode api object');
}
}
}

118
nodejs-packages/sprotty-live-beans-client/src/standalone.ts Normal file
View File

@@ -0,0 +1,118 @@
/********************************************************************************
* 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
********************************************************************************/
declare const acquireVsCodeApi: any;
import {
TYPES, IActionDispatcher, SModelElementSchema, SEdgeSchema, SNodeSchema, SGraphSchema,
ModelSource, LocalModelSource, WebSocketDiagramServer, RequestModelAction
} from "sprotty";
import createContainer from "./di.config";
import * as SockJS from "sockjs-client";
import {VSCodeWebViewDiagramServer} from "./model";
export default function runStandalone() {
const container = createContainer(true);
const dispatcher = container.get<IActionDispatcher>(TYPES.IActionDispatcher);
// Initialize gmodel
const node0 = {
id: 'node0', type: 'node:bean', position: {x: 100, y: 100}, size: {width: 80, height: 80},
layout: 'vbox',
children: [
{
id: 'node0_header',
type: 'compartment',
layout: 'hbox',
children: [
{
id: 'bean-name',
type: 'node:label',
text: 'SpringBootApplication'
}
]
}
]
};
// const children_for_node = [];
const graph: SGraphSchema = {id: 'graph', type: 'graph', children: [node0]};
let count = 2;
function addNode(): SModelElementSchema[] {
const newNode: SNodeSchema = {
id: 'node' + count,
type: 'node:bean',
position: {
x: Math.random() * 1024,
y: Math.random() * 768
},
size: {
width: 80,
height: 80
}
};
const newEdge: SEdgeSchema = {
id: 'edge' + count,
type: 'edge:straight',
sourceId: 'node0',
targetId: 'node' + count++
};
return [newNode, newEdge];
}
for (let i = 0; i < 10; ++i) {
const newElements = addNode();
for (const e of newElements) {
graph.children.splice(0, 0, e);
}
}
// Run
const modelSource = container.get<ModelSource>(TYPES.ModelSource);
console.log('Model source: ' + modelSource);
if (modelSource instanceof LocalModelSource) {
(<LocalModelSource>modelSource).setModel(graph);
}
if (modelSource instanceof WebSocketDiagramServer) {
const ws = new SockJS('http://localhost:8080/websocket');
modelSource.clientId = 'spring-boot';
modelSource.listen(ws);
ws.addEventListener('open', () => {
dispatcher.dispatch(new RequestModelAction());
});
ws.addEventListener('error', (event) => {
console.error(`WebSocket Error: ${event}`)
})
}
if (modelSource instanceof VSCodeWebViewDiagramServer) {
modelSource.listen(acquireVsCodeApi());
}
console.log('Before requesting model');
// Button features
document.getElementById('refresh')!.addEventListener('click', () => {
dispatcher.dispatch(new RequestModelAction());
});
}

107
nodejs-packages/sprotty-live-beans-client/src/views.tsx Normal file
View File

@@ -0,0 +1,107 @@
/********************************************************************************
* 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 svg */
import { svg } from 'snabbdom-jsx';
import { VNode } from "snabbdom/vnode";
import {
RenderingContext,
SNode,
IView,
SGraphView,
SGraph,
PolylineEdgeView,
SEdge,
Point,
RectangularNodeView,
Selectable,
SPort,
Hoverable,
SShapeElement
} from "sprotty";
import { injectable } from 'inversify';
/**
* A very simple example node consisting of a plain circle.
*/
@injectable()
export class CircleNodeView implements IView {
render(node: SNode, context: RenderingContext): VNode {
const radius = this.getRadius(node);
return <g>
<circle class-sprotty-node={true} class-selected={node.selected} r={radius} cx={radius} cy={radius}></circle>
<text x={radius} y={radius + 7} class-sprotty-text={true}>{node.id.substr(4)}</text>
</g>;
}
protected getRadius(node: SNode) {
return 40;
}
}
@injectable()
export class ExampleGraphView extends SGraphView {
render(model: Readonly<SGraph>, context: RenderingContext): VNode {
const transform = `scale(${model.zoom}) translate(${-model.scroll.x},${-model.scroll.y})`;
return <svg class-sprotty-graph={true}>
<defs>
<marker id="arrow" orient="auto" overflow="visible" markerUnits="userSpaceOnUse">
<path transform="rotate(180)" d="M 10 -5 0 0 10 5 z" />
</marker>
<marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="5" markerHeight="5">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
</defs>
<g transform={transform}>
{context.renderChildren(model)}
</g>
</svg>;
}
}
export class EdgeView extends PolylineEdgeView {
protected renderLine(edge: SEdge, segments: Point[], context: RenderingContext): VNode {
const firstPoint = segments[0];
let path = `M ${firstPoint.x},${firstPoint.y}`;
for (let i = 1; i < segments.length; i++) {
const p = segments[i];
path += ` L ${p.x},${p.y}`;
}
const dom: any = <path d={path}/>;
dom.data.attrs['marker-end'] = 'url(#arrow)';
return dom;
}
}
@injectable()
export class BeanNodeView extends RectangularNodeView {
render(node: Readonly<SShapeElement & Hoverable & Selectable>, context: RenderingContext): VNode {
return <g>
<rect class-sprotty-node={node instanceof SNode} class-sprotty-port={node instanceof SPort}
class-mouseover={node.hoverFeedback} class-selected={node.selected}
x="0" y="0" width={Math.max(node.size.width, 0)} height={Math.max(node.size.height, 0)} rx="10" ry="10"></rect>
{context.renderChildren(node)}
</g>;
}
}

33
nodejs-packages/sprotty-live-beans-client/tsconfig.json Normal file
View File

@@ -0,0 +1,33 @@
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": [
"es6", "dom"
],
"types": [
"node", "reflect-metadata",
],
"typeRoots": [
"node_modules/@types", "typings"
],
"sourceMap": true,
"declaration": true,
"declarationMap": true,
"noImplicitAny": true,
"noImplicitThis": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"strictNullChecks": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"outDir": "lib",
"jsx": "react"
},
"include": [
"src", "typings"
],
"exclude": [
"**/*.spec.ts", "**/*.spec.tsx"
]
}

53
nodejs-packages/sprotty-live-beans-client/webpack.config.js Normal file
View File

@@ -0,0 +1,53 @@
var webpack = require('webpack');
var path = require('path');
var CircularDependencyPlugin = require('circular-dependency-plugin');
module.exports = {
entry: [
'core-js/es6/map',
'core-js/es6/promise',
'core-js/es6/string',
'core-js/es6/symbol',
'./src/app.ts'
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '.')
},
mode: 'development',
devtool: 'source-map',
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
rules: [
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{
test: /\.tsx?$/,
use: [{
loader: 'ts-loader',
options: {
configFile: path.resolve(__dirname, 'tsconfig.json')
}
}]
},
{
test: /\.css$/,
exclude: /\.useable\.css$/,
loader: 'style-loader!css-loader'
}
]
},
node : { fs: 'empty', net: 'empty' },
plugins: [
new CircularDependencyPlugin({
exclude: /(node_modules|examples)\/./,
failOnError: false
}),
new webpack.WatchIgnorePlugin([
/\.js$/,
/\.d\.ts$/
])
]
};