diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 24b4ed20f..f17bd8b25 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -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 diff --git a/.gitignore b/.gitignore index c623b8d49..7fd96f7f4 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ javascript/examples/**/dist *.iml dist package-lock.json +*.tgz # dependencies /node_modules diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 57bf4588f..000000000 --- a/.npmignore +++ /dev/null @@ -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 diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 000000000..b6a7d89c6 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +16 diff --git a/README.md b/README.md index 0d4de55f4..858c98647 100644 --- a/README.md +++ b/README.md @@ -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). ## Transition to Apache 2.0 license @@ -52,10 +52,11 @@ const container = 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 +### 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). diff --git a/package.json b/package.json index 09d03509f..5e3fea1f0 100644 --- a/package.json +++ b/package.json @@ -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 + } } diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts deleted file mode 100644 index c12648142..000000000 --- a/packages/core/index.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module '*.gif'; \ No newline at end of file diff --git a/packages/core/package.json b/packages/core/package.json index 2221c5254..ab7cf4134 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -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 } diff --git a/packages/core/src/Client.ts b/packages/core/src/Client.ts index 2a0c61a94..48a59033f 100644 --- a/packages/core/src/Client.ts +++ b/packages/core/src/Client.ts @@ -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. @@ -37,7 +24,7 @@ class Client { static setResourceExtension = (value: string) => { Client.mxResourceExtension = value; - + // Removes dependency with mxResources. // Client.mxResourceExtension can be used instead. // mxResources.extension = value; @@ -143,7 +130,7 @@ class Client { * contains the assignment. Trailing slashes are automatically removed. */ static imageBasePath = '.'; - + static setImageBasePath = (value: string) => { if (typeof value !== 'undefined' && value.length > 0) { // Adds a trailing slash if required @@ -416,9 +403,9 @@ class Client { * @param id unique id for the link element to check if it already exists */ static link = ( - rel: string, - href: string, - doc: Document | null=null, + rel: string, + href: string, + doc: Document | null=null, id: string | null=null ) => { doc = doc || document; diff --git a/packages/core/src/editor/EditorToolbar.ts b/packages/core/src/editor/EditorToolbar.ts index 9ad836dc5..0f8ecc41e 100644 --- a/packages/core/src/editor/EditorToolbar.ts +++ b/packages/core/src/editor/EditorToolbar.ts @@ -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 @@ -204,10 +204,10 @@ export class EditorToolbar { * @param funct - Optional JavaScript function that takes the {@link Editor} as the first and only argument that is executed after the mode has been selected. */ addMode( - title: string, - icon: string, - mode: string, - pressed: string | null=null, + title: string, + icon: string, + mode: string, + pressed: string | null=null, funct: Function | null=null ): any { const clickHandler = () => { @@ -238,11 +238,11 @@ export class EditorToolbar { * Default is true. */ addPrototype( - title: string, - icon: string, - ptype: Function | Cell, - pressed: string, - insert: (editor: Editor, cell: Cell, me: MouseEvent, cellUnderMousePointer?: Cell | null) => void, + title: string, + icon: string, + ptype: Function | Cell, + pressed: string, + insert: (editor: Editor, cell: Cell, me: MouseEvent, cellUnderMousePointer?: Cell | null) => void, toggle: boolean=true ): HTMLImageElement | HTMLButtonElement { // Creates a wrapper function that is in charge of constructing diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 3885cac4e..b55f847da 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -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'; diff --git a/packages/core/src/util/styleUtils.ts b/packages/core/src/util/styleUtils.ts index 3f930f451..ff3834364 100644 --- a/packages/core/src/util/styleUtils.ts +++ b/packages/core/src/util/styleUtils.ts @@ -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 diff --git a/packages/core/src/view/handler/ConstraintHandler.ts b/packages/core/src/view/handler/ConstraintHandler.ts index 3991b07a3..5d8e8cddb 100644 --- a/packages/core/src/view/handler/ConstraintHandler.ts +++ b/packages/core/src/view/handler/ConstraintHandler.ts @@ -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}. diff --git a/packages/core/src/view/mixins/EdgeMixin.ts b/packages/core/src/view/mixins/EdgeMixin.ts index 441b8efe3..f7c4313b8 100644 --- a/packages/core/src/view/mixins/EdgeMixin.ts +++ b/packages/core/src/view/mixins/EdgeMixin.ts @@ -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 { diff --git a/packages/core/src/view/mixins/VertexMixin.ts b/packages/core/src/view/mixins/VertexMixin.ts index decc9838e..c6503520d 100644 --- a/packages/core/src/view/mixins/VertexMixin.ts +++ b/packages/core/src/view/mixins/VertexMixin.ts @@ -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 { diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json index 704517518..f40e9c20b 100644 --- a/packages/core/tsconfig.json +++ b/packages/core/tsconfig.json @@ -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, diff --git a/packages/html/package.json b/packages/html/package.json index cdfe97068..fb99d1058 100644 --- a/packages/html/package.json +++ b/packages/html/package.json @@ -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": "*" }, diff --git a/packages/html/stories/Anchors.stories.js b/packages/html/stories/Anchors.stories.js index acfc47e8e..0aeda974a 100644 --- a/packages/html/stories/Anchors.stories.js +++ b/packages/html/stories/Anchors.stories.js @@ -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'; diff --git a/packages/ts-example/README.md b/packages/ts-example/README.md new file mode 100644 index 000000000..a03765878 --- /dev/null +++ b/packages/ts-example/README.md @@ -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. diff --git a/packages/ts-example/favicon.svg b/packages/ts-example/favicon.svg new file mode 100644 index 000000000..de4aeddc1 --- /dev/null +++ b/packages/ts-example/favicon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/ts-example/index.html b/packages/ts-example/index.html new file mode 100644 index 000000000..54c8ff733 --- /dev/null +++ b/packages/ts-example/index.html @@ -0,0 +1,24 @@ + + + + + + + maxGraph TypeScript Integration with Vite + + + + +

maxGraph TypeScript Integration with Vite

+

Display a test graph. Activated behaviours:

+ +
+ + + + diff --git a/packages/ts-example/package.json b/packages/ts-example/package.json new file mode 100644 index 000000000..16555a78f --- /dev/null +++ b/packages/ts-example/package.json @@ -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" + } +} diff --git a/packages/ts-example/src/custom-shapes.ts b/packages/ts-example/src/custom-shapes.ts new file mode 100644 index 000000000..3ca037e67 --- /dev/null +++ b/packages/ts-example/src/custom-shapes.ts @@ -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); + } +} diff --git a/packages/ts-example/src/main.ts b/packages/ts-example/src/main.ts new file mode 100644 index 000000000..23fefb994 --- /dev/null +++ b/packages/ts-example/src/main.ts @@ -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('footer')!; +footer.innerText = `Built with maxGraph ${Client.VERSION}`; + +// Creates the graph inside the given container +const container = 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, {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, /**/{shape: 'customRectangle'}); + const vertex12 = graph.insertVertex(parent, null, 'a custom ellipse', 150, 350, 70, 70, /**/{shape: 'customEllipse'}); + graph.insertEdge(parent, null, 'another edge', vertex11, vertex12); +}); diff --git a/packages/ts-example/src/style.css b/packages/ts-example/src/style.css new file mode 100644 index 000000000..dcb56b86e --- /dev/null +++ b/packages/ts-example/src/style.css @@ -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; +} diff --git a/packages/ts-example/src/vite-env.d.ts b/packages/ts-example/src/vite-env.d.ts new file mode 100644 index 000000000..11f02fe2a --- /dev/null +++ b/packages/ts-example/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/packages/ts-example/tsconfig.json b/packages/ts-example/tsconfig.json new file mode 100644 index 000000000..2b114a62f --- /dev/null +++ b/packages/ts-example/tsconfig.json @@ -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"] +}