2021-09-07 09:07:27 +00:00
|
|
|
import {
|
|
|
|
Graph,
|
|
|
|
InternalEvent,
|
2021-09-07 12:21:22 +00:00
|
|
|
RubberBand,
|
2021-09-07 09:07:27 +00:00
|
|
|
EventUtils,
|
|
|
|
utils,
|
|
|
|
VertexHandler,
|
|
|
|
} from '@maxgraph/core';
|
2021-04-21 11:36:38 +00:00
|
|
|
|
|
|
|
import { globalTypes } from '../.storybook/preview';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
title: 'Icon_Images/ContextIcons',
|
|
|
|
argTypes: {
|
|
|
|
...globalTypes,
|
|
|
|
rubberBand: {
|
|
|
|
type: 'boolean',
|
2021-08-30 14:20:26 +00:00
|
|
|
defaultValue: true,
|
|
|
|
},
|
|
|
|
},
|
2021-04-21 11:36:38 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const Template = ({ label, ...args }) => {
|
|
|
|
const container = document.createElement('div');
|
|
|
|
container.style.position = 'relative';
|
|
|
|
container.style.overflow = 'hidden';
|
|
|
|
container.style.width = `${args.width}px`;
|
|
|
|
container.style.height = `${args.height}px`;
|
|
|
|
container.style.background = 'url(/images/grid.gif)';
|
|
|
|
container.style.cursor = 'default';
|
|
|
|
|
2021-08-30 14:20:26 +00:00
|
|
|
class mxVertexToolHandler extends VertexHandler {
|
|
|
|
// Defines a subclass for VertexHandler that adds a set of clickable
|
2021-04-21 11:36:38 +00:00
|
|
|
// icons to every selected vertex.
|
|
|
|
|
|
|
|
domNode = null;
|
|
|
|
|
|
|
|
init() {
|
|
|
|
super.init();
|
|
|
|
|
|
|
|
// In this example we force the use of DIVs for images in IE. This
|
|
|
|
// handles transparency in PNG images properly in IE and fixes the
|
|
|
|
// problem that IE routes all mouse events for a gesture via the
|
|
|
|
// initial IMG node, which means the target vertices
|
|
|
|
this.domNode = document.createElement('div');
|
|
|
|
this.domNode.style.position = 'absolute';
|
|
|
|
this.domNode.style.whiteSpace = 'nowrap';
|
|
|
|
|
|
|
|
// Workaround for event redirection via image tag in quirks and IE8
|
2021-08-30 14:20:26 +00:00
|
|
|
const createImage = (src) => {
|
|
|
|
return utils.createImage(src);
|
2021-04-21 11:36:38 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
// Delete
|
|
|
|
let img = createImage('images/delete2.png');
|
|
|
|
img.setAttribute('title', 'Delete');
|
|
|
|
img.style.cursor = 'pointer';
|
|
|
|
img.style.width = '16px';
|
|
|
|
img.style.height = '16px';
|
2021-08-30 14:20:26 +00:00
|
|
|
InternalEvent.addGestureListeners(img, (evt) => {
|
2021-04-21 11:36:38 +00:00
|
|
|
// Disables dragging the image
|
2021-08-30 14:20:26 +00:00
|
|
|
InternalEvent.consume(evt);
|
2021-04-21 11:36:38 +00:00
|
|
|
});
|
2021-08-30 14:20:26 +00:00
|
|
|
InternalEvent.addListener(img, 'click', (evt) => {
|
2021-04-21 11:36:38 +00:00
|
|
|
this.graph.removeCells([this.state.cell]);
|
2021-08-30 14:20:26 +00:00
|
|
|
InternalEvent.consume(evt);
|
2021-04-21 11:36:38 +00:00
|
|
|
});
|
|
|
|
this.domNode.appendChild(img);
|
|
|
|
|
|
|
|
// Size
|
|
|
|
img = createImage('images/fit_to_size.png');
|
|
|
|
img.setAttribute('title', 'Resize');
|
|
|
|
img.style.cursor = 'se-resize';
|
|
|
|
img.style.width = '16px';
|
|
|
|
img.style.height = '16px';
|
|
|
|
|
2021-08-30 14:20:26 +00:00
|
|
|
InternalEvent.addGestureListeners(img, (evt) => {
|
|
|
|
this.start(EventUtils.getClientX(evt), EventUtils.getClientY(evt), 7);
|
2021-04-21 11:36:38 +00:00
|
|
|
this.graph.isMouseDown = true;
|
2021-08-30 14:20:26 +00:00
|
|
|
this.graph.isMouseTrigger = EventUtils.isMouseEvent(evt);
|
|
|
|
InternalEvent.consume(evt);
|
2021-04-21 11:36:38 +00:00
|
|
|
});
|
|
|
|
this.domNode.appendChild(img);
|
|
|
|
|
|
|
|
// Move
|
|
|
|
img = createImage('images/plus.png');
|
|
|
|
img.setAttribute('title', 'Move');
|
|
|
|
img.style.cursor = 'move';
|
|
|
|
img.style.width = '16px';
|
|
|
|
img.style.height = '16px';
|
|
|
|
|
2021-09-10 05:17:59 +00:00
|
|
|
const graphHandler = graph.getPlugin('GraphHandler');
|
|
|
|
const connectionHandler = graph.getPlugin('ConnectionHandler');
|
|
|
|
|
2021-08-30 14:20:26 +00:00
|
|
|
InternalEvent.addGestureListeners(img, (evt) => {
|
2021-09-10 05:17:59 +00:00
|
|
|
graphHandler.start(
|
2021-04-21 11:36:38 +00:00
|
|
|
this.state.cell,
|
2021-08-30 14:20:26 +00:00
|
|
|
EventUtils.getClientX(evt),
|
|
|
|
EventUtils.getClientY(evt)
|
2021-04-21 11:36:38 +00:00
|
|
|
);
|
2021-09-10 05:17:59 +00:00
|
|
|
graphHandler.cellWasClicked = true;
|
2021-04-21 11:36:38 +00:00
|
|
|
this.graph.isMouseDown = true;
|
2021-08-30 14:20:26 +00:00
|
|
|
this.graph.isMouseTrigger = EventUtils.isMouseEvent(evt);
|
|
|
|
InternalEvent.consume(evt);
|
2021-04-21 11:36:38 +00:00
|
|
|
});
|
|
|
|
this.domNode.appendChild(img);
|
|
|
|
|
|
|
|
// Connect
|
|
|
|
img = createImage('images/check.png');
|
|
|
|
img.setAttribute('title', 'Connect');
|
|
|
|
img.style.cursor = 'pointer';
|
|
|
|
img.style.width = '16px';
|
|
|
|
img.style.height = '16px';
|
|
|
|
|
2021-08-30 14:20:26 +00:00
|
|
|
InternalEvent.addGestureListeners(img, (evt) => {
|
|
|
|
const pt = utils.convertPoint(
|
2021-04-21 11:36:38 +00:00
|
|
|
this.graph.container,
|
2021-08-30 14:20:26 +00:00
|
|
|
EventUtils.getClientX(evt),
|
|
|
|
EventUtils.getClientY(evt)
|
2021-04-21 11:36:38 +00:00
|
|
|
);
|
2021-09-10 05:17:59 +00:00
|
|
|
connectionHandler.start(this.state, pt.x, pt.y);
|
2021-04-21 11:36:38 +00:00
|
|
|
this.graph.isMouseDown = true;
|
2021-08-30 14:20:26 +00:00
|
|
|
this.graph.isMouseTrigger = EventUtils.isMouseEvent(evt);
|
|
|
|
InternalEvent.consume(evt);
|
2021-04-21 11:36:38 +00:00
|
|
|
});
|
|
|
|
this.domNode.appendChild(img);
|
|
|
|
|
|
|
|
this.graph.container.appendChild(this.domNode);
|
|
|
|
this.redrawTools();
|
|
|
|
}
|
|
|
|
|
|
|
|
redraw() {
|
|
|
|
super.redraw();
|
|
|
|
this.redrawTools();
|
|
|
|
}
|
|
|
|
|
|
|
|
redrawTools() {
|
|
|
|
if (this.state != null && this.domNode != null) {
|
|
|
|
const dy = 4;
|
|
|
|
this.domNode.style.left = `${this.state.x + this.state.width - 56}px`;
|
|
|
|
this.domNode.style.top = `${this.state.y + this.state.height + dy}px`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
destroy(sender, me) {
|
|
|
|
super.destroy(sender, me);
|
|
|
|
|
|
|
|
if (this.domNode != null) {
|
|
|
|
this.domNode.parentNode.removeChild(this.domNode);
|
|
|
|
this.domNode = null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-08-30 14:20:26 +00:00
|
|
|
class MyCustomGraph extends Graph {
|
2021-04-21 11:36:38 +00:00
|
|
|
createHandler(state) {
|
2021-04-25 03:39:40 +00:00
|
|
|
if (state != null && state.cell.isVertex()) {
|
2021-04-21 11:36:38 +00:00
|
|
|
return new mxVertexToolHandler(state);
|
|
|
|
}
|
|
|
|
return super.createHandler(state);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Creates the graph inside the given container
|
|
|
|
const graph = new MyCustomGraph(container);
|
|
|
|
graph.setConnectable(true);
|
2021-09-10 05:17:59 +00:00
|
|
|
|
|
|
|
const connectionHandler = graph.getPlugin('ConnectionHandler');
|
|
|
|
connectionHandler.createTarget = true;
|
2021-04-21 11:36:38 +00:00
|
|
|
|
|
|
|
// Uncomment the following if you want the container
|
|
|
|
// to fit the size of the graph
|
|
|
|
// graph.setResizeContainer(true);
|
|
|
|
|
|
|
|
// Enables rubberband selection
|
2021-09-07 12:21:22 +00:00
|
|
|
if (args.rubberBand) new RubberBand(graph);
|
2021-04-21 11:36:38 +00:00
|
|
|
|
|
|
|
// 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 v1 = graph.insertVertex({
|
|
|
|
parent,
|
|
|
|
value: 'Hello,',
|
|
|
|
position: [20, 20],
|
|
|
|
size: [80, 30],
|
|
|
|
});
|
|
|
|
const v2 = graph.insertVertex({
|
|
|
|
parent,
|
|
|
|
value: 'World!',
|
|
|
|
position: [200, 150],
|
|
|
|
size: [80, 30],
|
|
|
|
});
|
|
|
|
const e1 = graph.insertEdge({
|
|
|
|
parent,
|
|
|
|
source: v1,
|
|
|
|
target: v2,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
return container;
|
2021-08-30 14:20:26 +00:00
|
|
|
};
|
2021-04-21 11:36:38 +00:00
|
|
|
|
2021-08-30 14:20:26 +00:00
|
|
|
export const Default = Template.bind({});
|