Jiden/create generator sprotty 257

packages/generator-sprotty/.gitignore

@@ -0,0 +1,2 @@
+app/
+test-temp/

packages/generator-sprotty/README.md

@@ -0,0 +1,3 @@
+# Langium Package Generator
+
+This [Yeoman](https://yeoman.io) generator is used to create a new Sprotty project.

packages/generator-sprotty/package.json

@@ -0,0 +1,57 @@
+{
+    "name": "generator-sprotty",
+    "version": "0.13.0",
+    "description": "Yeoman generator for Sprotty",
+    "engines": {
+      "node": ">=14.0.0"
+    },
+    "keywords": [
+      "yeoman-generator",
+      "diagram"
+    ],
+    "license": "(EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0)",
+    "files": [
+      "app",
+      "sprotty-local-template",
+      "src"
+    ],
+    "main": "app/index.js",
+    "types": "app/index.d.ts",
+    "scripts": {
+      "prepare": "yarn run clean && yarn run build",
+      "clean": "shx rm -rf app",
+      "build": "tsc --skipLibCheck",
+      "watch": "tsc --watch --skipLibCheck",
+      "lint": "eslint src test --ext .ts",
+      "run": "yo sprotty",
+      "debug": "npx --node-arg=--inspect yo sprotty",
+      "test:cli": "ts-mocha \"./src/**/*.spec.?(ts|tsx)\"",
+      "test": "jenkins-mocha --config ../../configs/.mocharc.json \"./src/**/*.spec.?(ts|tsx)\""
+    },
+    "dependencies": {
+      "chalk": "~4.1.2",
+      "lodash": "~4.17.21",
+      "which": "~2.0.2",
+      "yeoman-generator": "~5.8.0"
+    },
+    "devDependencies": {
+      "@types/lodash": "~4.14.191",
+      "@types/which": "~2.0.1",
+      "@types/yeoman-generator": "~5.2.11",
+      "@types/yeoman-test": "~4.0.3",
+      "yeoman-test": "~7.3.0"
+    },
+    "volta": {
+      "node": "16.19.0",
+      "npm": "8.19.3"
+    },
+    "repository": {
+      "type": "git",
+      "url": "https://github.com/eclipse-sprotty/sprotty",
+      "directory": "packages/generator-sprotty"
+    },
+    "author": {
+      "name": "TypeFox",
+      "url": "https://www.typefox.io"
+    }
+  }

packages/generator-sprotty/sprotty-local-template/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "<%= project-name %>",
+    "description": "Please enter a brief description here",
+    "scripts": {
+      "build": "esbuild ./src/index.ts --bundle --sourcemap --outfile=./<%= out-path %>/index.js"
+    },
+    "devDependencies": {
+      "typescript": "4.9.5",
+      "esbuild": "^0.17.8"
+    },
+    "dependencies": {
+      "sprotty": "^0.13.0",
+      "reflect-metadata": "^0.1.13"
+    }
+  }

packages/generator-sprotty/sprotty-local-template/src/di.config.ts

@@ -0,0 +1,29 @@
+import { Container, ContainerModule } from "inversify";
+import { configureModelElement, configureViewerOptions, ConsoleLogger, edgeIntersectionModule, loadDefaultModules, LocalModelSource, LogLevel, PolylineEdgeView, RectangularNode, SEdge, SGraph, SGraphView, TYPES } from "sprotty";
+import { TaskNodeView } from "./views";
+
+export default (containerId: string) => {
+
+    const ASCETExamleModule = new ContainerModule((bind, unbind, isBound, rebind) => {
+        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, SGraphView);
+        configureModelElement(context, 'task', RectangularNode, TaskNodeView);
+        configureModelElement(context, 'edge', SEdge, PolylineEdgeView);
+
+        configureViewerOptions(context, {
+            needsClientLayout: false,
+            baseDiv: containerId
+        });
+
+    });
+
+    const container = new Container();
+    loadDefaultModules(container);
+    container.load(ASCETExamleModule);
+    container.load(edgeIntersectionModule)
+    return container;
+
+}

packages/generator-sprotty/sprotty-local-template/src/index.ts

@@ -0,0 +1,11 @@
+import 'reflect-metadata'
+
+import { LocalModelSource, TYPES } from 'sprotty'
+import createContainer from './di.config'
+import { graph } from './model-source';
+
+document.addEventListener("DOMContentLoaded", () => {
+    const container = createContainer('<%= html-element-id %>');
+    const modelSource = container.get<LocalModelSource>(TYPES.ModelSource);
+    modelSource.setModel(graph);
+});

packages/generator-sprotty/sprotty-local-template/src/model-source.ts

@@ -0,0 +1,43 @@
+import { SEdge, SGraph, SNode } from "sprotty-protocol";
+import { TaskNode } from "./model";
+
+export const graph: SGraph = {
+    type: 'graph',
+    id: 'graph',
+    children: [
+        <SNode & TaskNode>{
+            type: 'task',
+            id: 'task01',
+            name: 'First Task',
+            isFinished: true,
+            isRunning: false,
+            position: { x: 0, y: 0 },
+            size: { width: 100, height: 100 }
+        },
+        <SNode & TaskNode>{
+            type: 'task',
+            id: 'task02',
+            name: 'Second Task',
+            isFinished: false,
+            isRunning: true,
+            position: { x: 0, y: 200 },
+            size: { width: 100, height: 100 }
+        },
+        <SNode & TaskNode>{
+            type: 'task',
+            id: 'task03',
+            name: 'Third Task',
+            isFinished: false,
+            isRunning: false,
+            position: { x: 150, y: 0 },
+            size: { width: 100, height: 100 }
+        },
+        <SEdge>{
+            type: 'edge',
+            id: 'edge01',
+            sourceId: 'task01',
+            targetId: 'task02',
+            routerKind: 'manhattan',
+        }
+    ]
+};

packages/generator-sprotty/sprotty-local-template/src/model.ts

@@ -0,0 +1,7 @@
+import { SNode } from "sprotty-protocol"
+
+export interface TaskNode extends SNode {
+    name: string;
+    isRunning: boolean;
+    isFinished: boolean;
+}

packages/generator-sprotty/sprotty-local-template/src/views.tsx

@@ -0,0 +1,22 @@
+/** @jsx svg */
+import { svg } from 'sprotty/lib/lib/jsx';
+import { injectable } from 'inversify';
+import { VNode } from 'snabbdom';
+import { IView, RenderingContext, SNode } from 'sprotty';
+import { TaskNode } from './model';
+
+@injectable()
+export class TaskNodeView implements IView {
+    render(node: Readonly<SNode & TaskNode>, context: RenderingContext): VNode {
+        return <g>
+            <rect class-sprotty-node={true} class-task={true}
+                class-running={node.isRunning}
+                class-finished={node.isFinished}
+                width={node.size.width}
+                height={node.size.height}
+            >
+            </rect>
+            <text x={50} y={50 + 5}>{node.name}</text>
+        </g>;
+    }
+}

packages/generator-sprotty/sprotty-local-template/static/index.html

@@ -0,0 +1,7 @@
+<head>
+    <script src="index.js" type="text/javascript"></script>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div id="<%= html-element-id %>"></div>
+  </body>

packages/generator-sprotty/sprotty-local-template/static/styles.css

@@ -0,0 +1,33 @@
+.sprotty-graph {
+    height: 100%;
+    width: 100%;
+}
+
+.sprotty-node.task {
+    fill: #c0e0fc;
+    stroke: #444;
+    stroke-width: 1;
+}
+
+.sprotty-node.task.running {
+    fill: #f00;
+}
+
+.sprotty-node.task.finished {
+    fill: #0f0;
+}
+
+text {
+    stroke-width: 0;
+    stroke: #000;
+    fill: #000;
+    font-family: sans-serif;
+    font-size: 10pt;
+    text-anchor: middle;
+}
+
+.sprotty-edge {
+    fill: none;
+    stroke: #000;
+    stroke-width: 1px;
+}

packages/generator-sprotty/sprotty-local-template/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "compilerOptions": {
+      "target": "ES2022",
+      "module": "commonjs",
+      "types": [
+        "reflect-metadata"
+      ],
+      "esModuleInterop": true,
+      "sourceMap": true,
+      "experimentalDecorators": true,
+      "jsx": "react"
+    },
+    "lib": ["ES2022","DOM"]
+  }

packages/generator-sprotty/src/index.ts

@@ -0,0 +1,125 @@
+/********************************************************************************
+ * Copyright (c) 2023 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 Generator from 'yeoman-generator';
+import chalk from 'chalk';
+import path from 'path';
+
+const TEMPLATE_DIR = '../sprotty-local-template';
+const USER_DIR = '.';
+
+const PROJECT_NAME = /<%= project-name %>/g;
+const HTML_ELEMENT_ID = /<%= html-element-id %>/g;
+const OUT_PATH = /<%= out-path %>/g;
+
+const PROJECT_PATH = /<%= project-path %>/g;
+
+interface Answers {
+    projectName: string;
+    mainElementId: string;
+    generateStatic: boolean;
+}
+
+function description(...d: string[]): string {
+    return chalk.reset(chalk.dim(d.join(' ') + '\n')) + chalk.blueBright('?');
+}
+
+class SprottyGenerator extends Generator {
+    private answers: Answers;
+
+    writing(): void {
+        this.sourceRoot(path.join(__dirname, TEMPLATE_DIR));
+
+        for (const path of ['package.json', 'tsconfig.json', 'src']) {
+            this.fs.copy(
+                this.templatePath(path),
+                this._projectPath(path),
+                {
+                    process: content =>
+                        this._replaceTemplateWords(content),
+                    processDestinationPath: path =>
+                        this._replaceTemplateNames(path),
+                }
+            );
+        }
+        console.log('generate static: ' + this.answers.generateStatic)
+        if(this.answers.generateStatic) {
+            this.fs.copy(
+                this.templatePath('static'),
+                this._projectPath('static'),
+                {
+                    process: content =>
+                        this._replaceTemplateWords(content),
+                    processDestinationPath: path =>
+                        this._replaceTemplateNames(path),
+                }
+            );
+        }
+    }
+
+    install(): void {
+        const extensionPath = this._projectPath();
+
+        const opts = { cwd: extensionPath };
+        this.spawnCommandSync('npm', ['install'], opts);
+        this.spawnCommandSync('npm', ['run', 'build'], opts);
+    }
+
+    async prompting(): Promise<void> {
+        this.answers = await this.prompt([
+            {
+                type: 'input',
+                name: 'projectName',
+                prefix: description(
+                    'Welcome to Sprotty!',
+                    'This tool generates a new Sprotty Project.\n',
+                    'The project name identifies the npm package and can be used by other packages to depend on this project.'
+                ),
+                message: 'Your project name:',
+                default: 'hello-world',
+            },
+            {
+                type: 'input',
+                name: 'mainElementId',
+                message: 'ID of your main html element for the sprotty diagram:',
+                default: 'sprotty-diagram',
+            },
+            {
+                type: 'confirm',
+                name: 'generateStatic',
+                message: 'generate static folder with index.html and styles.css',
+            },
+        ])
+    }
+
+    _projectPath(...path: string[]): string {
+        return this.destinationPath(USER_DIR, this.answers.projectName, ...path);
+    }
+
+    _replaceTemplateWords(content: Buffer): string {
+        return content.toString()
+            .replace(PROJECT_NAME, this.answers.projectName)
+            .replace(HTML_ELEMENT_ID, this.answers.mainElementId)
+            .replace(OUT_PATH, this.answers.generateStatic ? 'static' : 'out');
+    }
+
+    _replaceTemplateNames(path: string): string {
+        return path.replace(PROJECT_PATH, this.answers.projectName);
+    }
+
+}
+
+export = SprottyGenerator