refactor: simplify the code of `ts-example` (#255)

Replicate the improvements done in the `maxgraph-integration-examples`
repository:
- introduce function to simplify the main file
- Remove out dated comments
- Simplify the code and use "type" imports when possible
development
Thomas Bouffard 2023-11-16 11:53:47 +01:00 committed by GitHub
parent 43e84c49e8
commit f58ec67e5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 93 additions and 97 deletions

View File

@ -14,23 +14,17 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import { import type { AbstractCanvas2D, ColorValue, Rectangle } from '@maxgraph/core';
AbstractCanvas2D, import { CellRenderer, EllipseShape, RectangleShape } from '@maxgraph/core';
CellRenderer,
type ColorValue,
EllipseShape,
Rectangle,
RectangleShape,
} from '@maxgraph/core';
export function registerCustomShapes(): void { export const registerCustomShapes = (): void => {
console.info('Registering custom shapes...'); console.info('Registering custom shapes...');
// @ts-ignore TODO fix CellRenderer. Calls to this function are also marked as 'ts-ignore' in CellRenderer // @ts-ignore TODO fix CellRenderer. Calls to this function are also marked as 'ts-ignore' in CellRenderer
CellRenderer.registerShape('customRectangle', CustomRectangleShape); CellRenderer.registerShape('customRectangle', CustomRectangleShape);
// @ts-ignore // @ts-ignore
CellRenderer.registerShape('customEllipse', CustomEllipseShape); CellRenderer.registerShape('customEllipse', CustomEllipseShape);
console.info('Custom shapes registered'); console.info('Custom shapes registered');
} };
class CustomRectangleShape extends RectangleShape { class CustomRectangleShape extends RectangleShape {
constructor(bounds: Rectangle, fill: ColorValue, stroke: ColorValue) { constructor(bounds: Rectangle, fill: ColorValue, stroke: ColorValue) {

View File

@ -25,95 +25,97 @@ import {
} from '@maxgraph/core'; } from '@maxgraph/core';
import { registerCustomShapes } from './custom-shapes'; import { registerCustomShapes } from './custom-shapes';
const initializeGraph = (container: HTMLElement) => {
// Disables the built-in context menu
InternalEvent.disableContextMenu(container);
const graph = new Graph(container);
graph.setPanning(true); // Use mouse right button for panning
new RubberBandHandler(graph); // Enables rubber band selection
// shapes and styles
registerCustomShapes();
// create a dedicated style for "ellipse" to share properties
graph.getStylesheet().putCellStyle('myEllipse', {
perimeter: Perimeter.EllipsePerimeter,
shape: 'ellipse',
verticalAlign: 'top',
verticalLabelPosition: 'bottom',
});
// 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(() => {
// use the legacy insertVertex method
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,
{
baseStyleNames: ['myEllipse'],
fillColor: 'orange',
}
);
// use the legacy insertEdge method
graph.insertEdge(parent, null, 'an orthogonal style edge', vertex01, vertex02, {
// TODO cannot use constants.EDGESTYLE.ORTHOGONAL
// TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
// See https://github.com/maxGraph/maxGraph/issues/205
edgeStyle: 'orthogonalEdgeStyle',
rounded: true,
});
// insert vertex using custom shapes using the new insertVertex method
const vertex11 = graph.insertVertex({
parent,
value: 'a custom rectangle',
position: [20, 200],
size: [100, 100],
style: { shape: 'customRectangle' },
});
// use the new insertVertex method using position and size parameters
const vertex12 = graph.insertVertex({
parent,
value: 'a custom ellipse',
x: 150,
y: 350,
width: 70,
height: 70,
style: {
baseStyleNames: ['myEllipse'],
shape: 'customEllipse',
},
});
// use the new insertEdge method
graph.insertEdge({
parent,
value: 'another edge',
source: vertex11,
target: vertex12,
style: { endArrow: 'block' },
});
});
};
// display the maxGraph version in the footer // display the maxGraph version in the footer
const footer = <HTMLElement>document.querySelector('footer'); const footer = <HTMLElement>document.querySelector('footer');
footer.innerText = `Built with maxGraph ${Client.VERSION}`; footer.innerText = `Built with maxGraph ${Client.VERSION}`;
// Creates the graph inside the given container // Creates the graph inside the given container
const container = <HTMLElement>document.getElementById('graph-container'); initializeGraph(<HTMLElement>document.querySelector('#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();
// create a dedicated style for "ellipse" to share properties
graph.getStylesheet().putCellStyle('myEllipse', {
perimeter: Perimeter.EllipsePerimeter,
shape: 'ellipse',
verticalAlign: 'top',
verticalLabelPosition: 'bottom',
});
// 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(() => {
// use the legacy insertVertex method
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,
{
baseStyleNames: ['myEllipse'],
fillColor: 'orange',
}
);
// use the legacy insertEdge method
graph.insertEdge(parent, null, 'an orthogonal style edge', vertex01, vertex02, {
// TODO cannot use constants.EDGESTYLE.ORTHOGONAL
// TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
// See https://github.com/maxGraph/maxGraph/issues/205
edgeStyle: 'orthogonalEdgeStyle',
rounded: true,
});
// insert vertex using custom shapes using the new insertVertex method
const vertex11 = graph.insertVertex({
parent,
value: 'a custom rectangle',
position: [20, 200],
size: [100, 100],
style: { shape: 'customRectangle' },
});
// use the new insertVertex method using position and size parameters
const vertex12 = graph.insertVertex({
parent,
value: 'a custom ellipse',
x: 150,
y: 350,
width: 70,
height: 70,
style: {
baseStyleNames: ['myEllipse'],
shape: 'customEllipse',
},
});
// use the new insertEdge method
graph.insertEdge({
parent,
value: 'another edge',
source: vertex11,
target: vertex12,
style: { endArrow: 'block' },
});
});