chore: improve the configuration to build the npm package (#87)

Root and all package.json files
  - Fix license, version and authors
  - Remove the non-relevant .npmignore file at the project. It was designed for mxgraph, the whole directory structure
  changed, and we don't plan to publish the root package

`core` package
  - Generate type definition and javascript files for ESM output
    - dedicated folder for `esm` and `types` in the `dist` folder to clearly separate concerns
    - exported in the package.json
  - Add npm script for `npm pack` configuration
  - Drop the `postinstall` npm script that built the `core` bundle. It would have been run when the package is installed
  in dependent projects at dependencies install. And it would have failed as it tries to build the project from TypeScript
  sources that are not available in the npm package.

fix: ConstraintHandler now loads image as everywhere else in the code using `Client.imageBasePath`
Using import doesn't work as the image is not available in the npm package. It generated error like this in ViteJS
project:
Failed to resolve import "../../../images/point.gif" from "../core/dist/esm/view/handler/ConstraintHandler.js". Does the file exist?
This gif import had been introduced to make `Anchors.stories.js` retrieve the gif file. Configuring `imageBasePath` as
already done in other stories fixes the issue.

Don't export EditorCodec and StylesheetCodec as they generate errors.
This is a temporary solution to avoid error in dependent project (at least, with ViteJS projects).
development
Thomas Bouffard 2022-07-05 08:08:25 +02:00 committed by GitHub
parent 6180434a5f
commit 893ad44ff2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 304 additions and 102 deletions

View File

@ -31,12 +31,22 @@ jobs:
matrix:
os: ['ubuntu-20.04', 'macos-11', 'windows-2019']
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Setup node
uses: actions/setup-node@v2
uses: actions/setup-node@v3
with:
node-version: '16'
- name: Install dependencies and build @maxgraph/core
node-version-file: '.nvmrc'
- name: Install dependencies
run: npm install
- name: Generate TypeScript declaration files
- name: Build @maxgraph/core - umd
working-directory: packages/core
run: npm run build
- name: Build @maxgraph/core - esm
working-directory: packages/core
run: npm run generate-esm
- name: Generate @maxgraph/core types
working-directory: packages/core
run: npm run generate-types
- name: Build ts-example
working-directory: packages/ts-example
run: npm run build

1
.gitignore vendored
View File

@ -7,6 +7,7 @@ javascript/examples/**/dist
*.iml
dist
package-lock.json
*.tgz
# dependencies
/node_modules

View File

@ -1,22 +0,0 @@
.classpath
.idea/
.jshintrc
.project
.settings
.vs
*.sln
bin
build.sh
classes
docs/
dotnet/
index.html
java/
javascript/debug/
javascript/devel/
javascript/examples/
javascript/index.html
mxgraph-dotnet.*suo
php/
pom.xml
target

1
.nvmrc Normal file
View File

@ -0,0 +1 @@
16

View File

@ -32,7 +32,7 @@ Chrome, Edge, Firefox, Safari, Chromium based browsers (Brave, Opera, ....) for
maxGraph is under active development. An alpha version will be released soon with the npm package once [licensing](#license)
and [versioning](https://github.com/maxGraph/maxGraph/issues/92) issues have been resolved.
In the meantime, you can test the project by running the [Storybook examples](#development).
In the meantime, you can test the project by running the [Storybook examples](#development) or [build the npm package locally](#build-local-npm-package).
## <a id="license"></a> Transition to Apache 2.0 license
@ -52,10 +52,11 @@ const container = <HTMLElement>document.getElementById('graph-container');
// Disables the built-in context menu
InternalEvent.disableContextMenu(container);
const graph = new Graph(container);
graph.setPanning(true); // Use mouse right button for panning
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
const parent = graph.getDefaultParent();
graph.setPanning(true); // Use mouse right button for panning
// Adds cells to the model in a single step
graph.batchUpdate(() => {
@ -65,7 +66,7 @@ graph.batchUpdate(() => {
});
```
You will see something like in the following:
You will see something like in the following _maxGraph panning_ demo:
![maxGraph panning demo](docs/maxgraph_demo.gif "maxGraph panning demo")
@ -162,6 +163,12 @@ and select `@mxgraph/html`.
Since both commands are in watch mode, so it's recommended to open two terminals and run them separately. When a file is saved from the core package, the html storybook will be automatically updated.
### Building the npm package for local usage
### <a id="build-local-npm-package"></a> Building the npm package for usage in external project
Will be documented soon.
Run
- from the project root: `npm install`
- then, from the `packages/core` folder: `npm pack`
The `packages/core` folder or the generated `packages/core/maxgraph-core-***.tgz` file are now ready for use in an external project, using [npm link](https://docs.npmjs.com/cli/v8/commands/npm-link) or `npm install`.
Examples of use can be found in this [repository].(https://github.com/tbouffard/maxgraph-integration-examples).

View File

@ -1,13 +1,9 @@
{
"name": "maxgraph",
"description": "max-graph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.",
"version": "1.0.0",
"license": "Apache-2.0",
"version": "0.1.0",
"description": "maxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.",
"homepage": "https://github.com/maxGraph/maxGraph",
"author": {
"name": "",
"email": ""
},
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/maxGraph/maxGraph"
@ -15,13 +11,11 @@
"bugs": {
"url": "https://github.com/maxGraph/maxGraph/issues"
},
"main": "./javascript/dist/build.js",
"scripts": {
"dev": "node ./scripts/dev",
"bootstrap": "lerna bootstrap --no-ci",
"postinstall": "lerna bootstrap --no-ci",
"docs": "jsdoc -c jsdoc.json",
"generate-types": "lerna run generate-types"
"docs": "jsdoc -c jsdoc.json"
},
"devDependencies": {
"@babel/core": "^7.16.0",
@ -33,6 +27,7 @@
"babel-loader": "^8.2.3",
"better-docs": "^2.3.2",
"css-loader": "^6.5.1",
"cross-env": "~7.0.3",
"file-loader": "^6.2.0",
"jsdoc": "^3.6.7",
"lerna": "^4.0.0",
@ -44,6 +39,5 @@
"webpack": "^5.64.4",
"webpack-cli": "^4.9.1",
"webpack-merge": "^5.8.0"
},
"sideEffects": true
}
}

View File

@ -1 +0,0 @@
declare module '*.gif';

View File

@ -1,23 +1,32 @@
{
"name": "@maxgraph/core",
"version": "1.0.0",
"description": "",
"module": "./src/index.ts",
"main": "./dist/maxgraph.js",
"types": "./dist/maxgraph.d.ts",
"license": "Apache-2.0",
"version": "0.1.0",
"description": "maxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.",
"main": "dist/maxgraph.js",
"module": "dist/esm/index.js",
"types": "dist/types/index.d.ts",
"files": [
"./dist"
"dist"
],
"homepage": "https://github.com/maxGraph/maxGraph",
"repository": {
"type": "git",
"url": "git+https://github.com/maxGraph/maxGraph"
},
"bugs": {
"url": "https://github.com/maxGraph/maxGraph/issues"
},
"scripts": {
"dev": "webpack --watch --mode=development",
"build": "NODE_ENV=production webpack --mode=production",
"postinstall": "webpack --mode=development",
"generate-types": "tsc --emitDeclarationOnly"
"build": "cross-env NODE_ENV=production webpack --mode=production",
"generate-types": "tsc --emitDeclarationOnly",
"generate-esm": "tsc --emitDeclarationOnly false --declaration false --declarationDir null",
"prepack": "run-s generate-types generate-esm build"
},
"author": "",
"license": "ISC",
"devDependencies": {
"circular-dependency-plugin": "^5.2.2"
"circular-dependency-plugin": "^5.2.2",
"npm-run-all": "~4.1.5"
},
"sideEffects": true
}

View File

@ -5,22 +5,9 @@
class Client {
/**
* Class: Client
*
* Bootstrapping mechanism for the mxGraph thin client. The production version
* of this file contains all code required to run the mxGraph thin client, as
* well as global constants to identify the browser and operating system in
* use. You may have to load chrome://global/content/contentAreaUtils.js in
* your page to disable certain security restrictions in Mozilla.
*
* Contains the current version of the mxGraph library. The strings that
* communicate versions of mxGraph use the following format.
*
* versionMajor.versionMinor.buildNumber.revisionNumber
*
* Current version is 4.2.2.
* Contains the current version of the maxGraph library.
*/
static VERSION = '4.2.2';
static VERSION = '0.1.0';
/**
* Optional global config variable to specify the extension of resource files.

View File

@ -24,7 +24,7 @@ import { NODETYPE } from '../util/Constants';
import Translations from '../util/Translations';
import MaxLog from '../gui/MaxLog';
import Codec from '../serialization/Codec';
import { DropHandler } from 'src/view/other/DragSource';
import type { DropHandler } from '../view/other/DragSource';
/**
* Toolbar for the editor. This modifies the state of the graph

View File

@ -48,7 +48,11 @@ export { default as VisibleChange } from './view/undoable_changes/VisibleChange'
export { EditorKeyHandler, EditorKeyHandlerCodec } from './editor/EditorKeyHandler';
export { EditorPopupMenu, EditorPopupMenuCodec } from './editor/EditorPopupMenu';
export { EditorToolbar, EditorToolbarCodec } from './editor/EditorToolbar';
// TODO restore EditorToolbarCodec if needed
// currently, the following error occurs when running vitejs build
// [ERROR] No matching export in "../core/dist/esm/editor/EditorToolbar.js" for import "EditorToolbarCodec"
// export { EditorToolbar, EditorToolbarCodec } from './editor/EditorToolbar';
export { EditorToolbar } from './editor/EditorToolbar';
export { Editor, EditorCodec } from './editor/Editor';
export { default as CellHighlight } from './view/cell/CellHighlight';
@ -156,7 +160,11 @@ export { default as Rectangle } from './view/geometry/Rectangle';
export { default as EdgeStyle } from './view/style/EdgeStyle';
export { default as Perimeter } from './view/style/Perimeter';
export { default as StyleRegistry } from './view/style/StyleRegistry';
export { Stylesheet, StylesheetCodec } from './view/style/Stylesheet';
// TODO restore StylesheetCodec if needed
// currently, the following error occurs when running vitejs build
// [ERROR] No matching export in "../core/dist/esm/view/style/Stylesheet.js" for import "StylesheetCodec"
// export { Stylesheet, StylesheetCodec } from './view/style/Stylesheet';
export { Stylesheet } from './view/style/Stylesheet';
export * as DomHelpers from './util/domHelpers';
@ -200,3 +208,6 @@ export { default as CellArray } from './view/cell/CellArray';
export { default as TemporaryCellStates } from './view/cell/TemporaryCellStates';
export { default as ConnectionConstraint } from './view/other/ConnectionConstraint';
export { default as Multiplicity } from './view/other/Multiplicity';
// Ensure types are exported in the type definitions
export * from './types';

View File

@ -19,7 +19,7 @@ import Rectangle from '../view/geometry/Rectangle';
import Cell from '../view/cell/Cell';
import GraphDataModel from '../view/GraphDataModel';
import CellArray from '../view/cell/CellArray';
import { CellStateStyle, CellStyle, NumericCellStateStyleKeys } from 'src/types';
import type { CellStateStyle, CellStyle, NumericCellStateStyleKeys } from '../types';
/**
* Removes the cursors from the style of the given DOM node and its

View File

@ -26,8 +26,6 @@ import ConnectionConstraint from '../other/ConnectionConstraint';
import Point from '../geometry/Point';
import Cell from '../cell/Cell';
import pointImg from '../../../images/point.gif';
/**
* Handles constraints on connection targets. This class is in charge of
* showing fixed points when the mouse is over a vertex and handles constraints
@ -39,8 +37,7 @@ class ConstraintHandler {
/**
* {@link Image} to be used as the image for fixed connection points.
*/
// pointImage: mxImage;
pointImage = new Image(pointImg, 5, 5);
pointImage = new Image(`${Client.imageBasePath}/point.gif`, 5, 5);
/**
* Reference to the enclosing {@link mxGraph}.

View File

@ -9,7 +9,7 @@ import InternalEvent from '../event/InternalEvent';
import Dictionary from '../../util/Dictionary';
import { Graph } from '../Graph';
import Point from '../geometry/Point';
import { CellStyle } from 'src/types';
import type { CellStyle } from '../../types';
declare module '../Graph' {
interface Graph {

View File

@ -3,7 +3,7 @@ import Geometry from '../geometry/Geometry';
import { Graph } from '../Graph';
import CellArray from '../cell/CellArray';
import { mixInto } from '../../util/Utils';
import { CellStyle } from 'src/types';
import type { CellStyle } from '../../types';
declare module '../Graph' {
interface Graph {

View File

@ -3,7 +3,7 @@
"baseUrl": ".",
"allowSyntheticDefaultImports": true,
"declaration": true,
"declarationDir": "./dist",
"declarationDir": "./dist/types",
"declarationMap": false,
"emitDeclarationOnly": true,
"esModuleInterop": true,
@ -11,7 +11,7 @@
"module": "ES2020",
"lib": ["dom"],
"moduleResolution": "node",
"outDir": "./dist",
"outDir": "./dist/esm",
"strict": true,
"target": "ES2020",
"skipLibCheck": false,

View File

@ -1,13 +1,13 @@
{
"name": "@maxgraph/html",
"version": "1.0.0",
"description": "",
"license": "Apache-2.0",
"version": "0.0.0",
"private": true,
"description": "Storybook stories",
"main": "index.js",
"scripts": {
"dev": "start-storybook -p 8901"
},
"author": "",
"license": "ISC",
"dependencies": {
"@maxgraph/core": "*"
},

View File

@ -1,4 +1,5 @@
import {
Client,
Graph,
InternalEvent,
RubberBandHandler,
@ -24,6 +25,8 @@ export default {
};
const Template = ({ label, ...args }) => {
Client.setImageBasePath('/images');
const container = document.createElement('div');
container.style.position = 'relative';
container.style.overflow = 'hidden';

View File

@ -0,0 +1,11 @@
# TypeScript project using the maxGraph npm package
Initialized from https://github.com/vitejs/vite/tree/v2.9.8/packages/create-vite/template-vanilla-ts
Do not forget to initialize all packages (you may also need to build the maxgraph@core package)
> From the repository root, run `npm install`.
Run `npm run dev` and go to http://localhost:3000/
If you want to bundle the application, run `npm run build` and then run `npm run preview` to access to a preview of the
bundle application.

View File

@ -0,0 +1,15 @@
<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
<stop stop-color="#41D1FF"/>
<stop offset="1" stop-color="#BD34FE"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFEA83"/>
<stop offset="0.0833333" stop-color="#FFDD35"/>
<stop offset="1" stop-color="#FFA800"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>maxGraph TypeScript Integration with Vite</title>
<script type="module" src="/src/main.ts"></script>
<style>
</style>
</head>
<body>
<h1>maxGraph TypeScript Integration with Vite</h1>
<p>Display a test graph. Activated behaviours:</p>
<ul>
<li>Panning: use mouse right button</li>
<li>Cells selection with Rubberband: use mouse left button</li>
</ul>
<div id="graph-container"></div>
<footer></footer>
</body>
</html>

View File

@ -0,0 +1,17 @@
{
"name": "@maxgraph/ts-example-built-with-vite",
"license": "Apache-2.0",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@maxgraph/core": "*"
},
"devDependencies": {
"vite": "~2.9.12"
}
}

View File

@ -0,0 +1,42 @@
import {AbstractCanvas2D, CellRenderer, type ColorValue, EllipseShape, Rectangle, RectangleShape} from '@maxgraph/core';
export function registerCustomShapes(): void {
console.info('Registering custom shapes...');
// @ts-ignore TODO fix CellRenderer. Calls to this function are also marked as 'ts-ignore' in CellRenderer
CellRenderer.registerShape('customRectangle', CustomRectangleShape);
// @ts-ignore
CellRenderer.registerShape('customEllipse', CustomEllipseShape);
console.info('Custom shapes registered');
}
class CustomRectangleShape extends RectangleShape {
constructor(bounds: Rectangle, fill: ColorValue, stroke: ColorValue) {
super(bounds, fill, stroke, 3);
// TODO if set, the shape is not painted
// this.isRounded = true; // force rounded shape
}
paintBackground(c: AbstractCanvas2D, x: number, y: number, w: number, h: number): void {
c.setFillColor('Chartreuse');
super.paintBackground(c, x, y, w, h);
}
paintVertexShape(c: AbstractCanvas2D, x: number, y: number, w: number, h: number) {
c.setStrokeColor('Black');
super.paintVertexShape(c, x, y, w, h);
}
}
class CustomEllipseShape extends EllipseShape {
constructor(bounds: Rectangle, fill: string, stroke: string) {
super(bounds, fill, stroke, 5);
}
paintVertexShape(c: AbstractCanvas2D, x: number, y: number, w: number, h: number) {
c.setFillColor('Yellow');
c.setStrokeColor('Red');
super.paintVertexShape(c, x, y, w, h);
}
}

View File

@ -0,0 +1,39 @@
import './style.css';
import {type CellStyle, Client, Graph, InternalEvent, RubberBandHandler} from '@maxgraph/core';
import {registerCustomShapes} from "./custom-shapes";
// display the maxGraph version in the footer
const footer = document.querySelector<HTMLElement>('footer')!;
footer.innerText = `Built with maxGraph ${Client.VERSION}`;
// Creates the graph inside the given container
const container = <HTMLElement>document.getElementById('graph-container');
// Disables the built-in context menu
InternalEvent.disableContextMenu(container);
const graph = new Graph(container);
graph.setPanning(true); // Use mouse right button for panning
// WARN: as the maxGraph css files are not available in the npm package (at least for now), dedicated CSS class must be defined in style.css
new RubberBandHandler(graph); // Enables rubber band selection
// shapes and styles
registerCustomShapes();
// @ts-ignore TODO fix TS2532: Object is possibly 'undefined'.
graph.getStylesheet().getDefaultEdgeStyle().edgeStyle = 'orthogonalEdgeStyle'; // TODO use constants.EDGESTYLE instead of 'orthogonalEdgeStyle'
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
const parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.batchUpdate(() => {
const vertex01 = graph.insertVertex(parent, null, 'a regular rectangle', 10, 10, 100, 100);
const vertex02 = graph.insertVertex(parent, null, 'a regular ellipse', 350, 90, 50, 50, <CellStyle>{shape: 'ellipse', fillColor: 'orange'});
graph.insertEdge(parent, null, 'a regular edge', vertex01, vertex02);
// insert vertices using custom shapes
// TODO type issue in CellStyle type, shape should allow string to manage custom implementation
const vertex11 = graph.insertVertex(parent, null, 'a custom rectangle', 20, 200, 100, 100, /*<CellStyle>*/{shape: 'customRectangle'});
const vertex12 = graph.insertVertex(parent, null, 'a custom ellipse', 150, 350, 70, 70, /*<CellStyle>*/{shape: 'customEllipse'});
graph.insertEdge(parent, null, 'another edge', vertex11, vertex12);
});

View File

@ -0,0 +1,35 @@
body {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
h1 {
text-align: center;
margin-top: 3rem;
}
footer {
position: absolute;
bottom: 1rem;
right: 1rem;
z-index: 1;
font-weight: 800;
}
#graph-container {
border: #B0B0B0 1px solid;
height: 70vh;
overflow: hidden;
}
/* For rubber band selection as we don't have access to the maxGraph CSS files in the project */
div.mxRubberband {
position: absolute;
overflow: hidden;
border-style: solid;
border-width: 2px;
border-color: #b18426;
background: #db9b0b;
}

1
packages/ts-example/src/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

View File

@ -0,0 +1,21 @@
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ESNext", "DOM"],
"moduleResolution": "Node",
"strict": true,
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
// TODO required because some type definitions in the @maxgraph/core package generate errors: https://github.com/maxGraph/maxGraph/issues/96
"skipLibCheck": true
},
"include": ["src"]
}