maxGraph/packages/html/stories/Groups.stories.js

176 lines
5.0 KiB
JavaScript
Raw Normal View History

/*
Copyright 2021-present The maxGraph project Contributors
Copyright (c) 2006-2020, JGraph Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
2022-09-17 02:30:23 +00:00
import {
Graph,
RubberBandHandler,
SelectionHandler,
PopupMenuHandler,
} from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Layouts/Groups',
argTypes: {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true,
},
},
};
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';
// Overrides check for valid roots
Graph.prototype.isValidRoot = function () {
return false;
};
// Don't clear selection if multiple cells selected
Finish converting core to ts, JSDoc conversion, consistency+convention changes, example bugfixes (#70) * reorganised directories; removed mx prefix * reduced directory hierarchies; removed mx prefix; type fixes * convert remaining javascript to ts * fix/add types * add type defs * type updates; moved codecs to where they're used * reorganise constants into enums+type additions * removed "Function:" and "Variable:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:", "Variable:" and "Class:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:" prefixes from comments, as they aren't needed in JSDoc * minor changes * convert code example blocks to markdown * module casing updates * converted parameter function documentation to JSDoc * documentation+type updates * removed react subdir (for now) * reorganised various `utils` functions into different files * type updates/bugfixes/workarounds * rename Rubberband and CellEditor to be *Handler to match the other plugins * move codec classes to where they're used to reduce cyclic dependencies * move codec classes to where they're used to reduce cyclic dependencies * type updates/reorganize layout file structure * renamed various files for consistency * import fixes * renamed GraphHandler SelectionHander and various fixes * convert EventObject parameters to objects * add basic better-docs config * update better-docs config * bugfix for shared variables in Graph persisting across instances * fixed accessing handlers in examples; renamed Model to GraphModel * fixed accessing handlers in examples; renamed Model to GraphModel * restored selection model * bugfix * renamed getModel to getDataModel * changed to use graph.batchUpdate() to reduce lines of code * changed to use graph.batchUpdate() to reduce lines of code * finished annotations+added TypeDoc * convert remaining Cell[] instances to CellArray * convert NaturalDocs links to JSDoc
2022-01-08 01:49:35 +00:00
const graphHandlerMouseDown = SelectionHandler.prototype.mouseDown;
SelectionHandler.prototype.mouseDown = function (sender, me) {
graphHandlerMouseDown.apply(this, arguments);
if (this.graph.isCellSelected(me.getCell()) && this.graph.getSelectionCount() > 1) {
this.delayedSelection = false;
}
};
// Selects descendants before children selection mode
const graphHandlerGetInitialCellForEvent =
Finish converting core to ts, JSDoc conversion, consistency+convention changes, example bugfixes (#70) * reorganised directories; removed mx prefix * reduced directory hierarchies; removed mx prefix; type fixes * convert remaining javascript to ts * fix/add types * add type defs * type updates; moved codecs to where they're used * reorganise constants into enums+type additions * removed "Function:" and "Variable:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:", "Variable:" and "Class:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:" prefixes from comments, as they aren't needed in JSDoc * minor changes * convert code example blocks to markdown * module casing updates * converted parameter function documentation to JSDoc * documentation+type updates * removed react subdir (for now) * reorganised various `utils` functions into different files * type updates/bugfixes/workarounds * rename Rubberband and CellEditor to be *Handler to match the other plugins * move codec classes to where they're used to reduce cyclic dependencies * move codec classes to where they're used to reduce cyclic dependencies * type updates/reorganize layout file structure * renamed various files for consistency * import fixes * renamed GraphHandler SelectionHander and various fixes * convert EventObject parameters to objects * add basic better-docs config * update better-docs config * bugfix for shared variables in Graph persisting across instances * fixed accessing handlers in examples; renamed Model to GraphModel * fixed accessing handlers in examples; renamed Model to GraphModel * restored selection model * bugfix * renamed getModel to getDataModel * changed to use graph.batchUpdate() to reduce lines of code * changed to use graph.batchUpdate() to reduce lines of code * finished annotations+added TypeDoc * convert remaining Cell[] instances to CellArray * convert NaturalDocs links to JSDoc
2022-01-08 01:49:35 +00:00
SelectionHandler.prototype.getInitialCellForEvent;
SelectionHandler.prototype.getInitialCellForEvent = function (me) {
2022-09-17 02:30:23 +00:00
const psel = this.graph.getSelectionCell()
? this.graph.getSelectionCell().getParent()
: null;
let cell = graphHandlerGetInitialCellForEvent.apply(this, arguments);
let parent = cell.getParent();
if (psel == null || (psel != cell && psel != parent)) {
while (
!this.graph.isCellSelected(cell) &&
!this.graph.isCellSelected(parent) &&
parent.isVertex() &&
!this.graph.isValidRoot(parent)
) {
cell = parent;
2021-04-25 10:47:53 +00:00
parent = cell.getParent();
}
}
return cell;
};
// Selection is delayed to mouseup if child selected
Finish converting core to ts, JSDoc conversion, consistency+convention changes, example bugfixes (#70) * reorganised directories; removed mx prefix * reduced directory hierarchies; removed mx prefix; type fixes * convert remaining javascript to ts * fix/add types * add type defs * type updates; moved codecs to where they're used * reorganise constants into enums+type additions * removed "Function:" and "Variable:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:", "Variable:" and "Class:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:" prefixes from comments, as they aren't needed in JSDoc * minor changes * convert code example blocks to markdown * module casing updates * converted parameter function documentation to JSDoc * documentation+type updates * removed react subdir (for now) * reorganised various `utils` functions into different files * type updates/bugfixes/workarounds * rename Rubberband and CellEditor to be *Handler to match the other plugins * move codec classes to where they're used to reduce cyclic dependencies * move codec classes to where they're used to reduce cyclic dependencies * type updates/reorganize layout file structure * renamed various files for consistency * import fixes * renamed GraphHandler SelectionHander and various fixes * convert EventObject parameters to objects * add basic better-docs config * update better-docs config * bugfix for shared variables in Graph persisting across instances * fixed accessing handlers in examples; renamed Model to GraphModel * fixed accessing handlers in examples; renamed Model to GraphModel * restored selection model * bugfix * renamed getModel to getDataModel * changed to use graph.batchUpdate() to reduce lines of code * changed to use graph.batchUpdate() to reduce lines of code * finished annotations+added TypeDoc * convert remaining Cell[] instances to CellArray * convert NaturalDocs links to JSDoc
2022-01-08 01:49:35 +00:00
const graphHandlerIsDelayedSelection = SelectionHandler.prototype.isDelayedSelection;
SelectionHandler.prototype.isDelayedSelection = function (cell) {
let result = graphHandlerIsDelayedSelection.apply(this, arguments);
2022-09-17 02:30:23 +00:00
const psel = this.graph.getSelectionCell()
? this.graph.getSelectionCell().getParent()
: null;
const parent = cell.getParent();
if (psel == null || (psel != cell && psel != parent)) {
if (
!this.graph.isCellSelected(cell) &&
parent.isVertex() &&
!this.graph.isValidRoot(parent)
) {
result = true;
}
}
return result;
};
// Delayed selection of parent group
Finish converting core to ts, JSDoc conversion, consistency+convention changes, example bugfixes (#70) * reorganised directories; removed mx prefix * reduced directory hierarchies; removed mx prefix; type fixes * convert remaining javascript to ts * fix/add types * add type defs * type updates; moved codecs to where they're used * reorganise constants into enums+type additions * removed "Function:" and "Variable:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:", "Variable:" and "Class:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:" prefixes from comments, as they aren't needed in JSDoc * minor changes * convert code example blocks to markdown * module casing updates * converted parameter function documentation to JSDoc * documentation+type updates * removed react subdir (for now) * reorganised various `utils` functions into different files * type updates/bugfixes/workarounds * rename Rubberband and CellEditor to be *Handler to match the other plugins * move codec classes to where they're used to reduce cyclic dependencies * move codec classes to where they're used to reduce cyclic dependencies * type updates/reorganize layout file structure * renamed various files for consistency * import fixes * renamed GraphHandler SelectionHander and various fixes * convert EventObject parameters to objects * add basic better-docs config * update better-docs config * bugfix for shared variables in Graph persisting across instances * fixed accessing handlers in examples; renamed Model to GraphModel * fixed accessing handlers in examples; renamed Model to GraphModel * restored selection model * bugfix * renamed getModel to getDataModel * changed to use graph.batchUpdate() to reduce lines of code * changed to use graph.batchUpdate() to reduce lines of code * finished annotations+added TypeDoc * convert remaining Cell[] instances to CellArray * convert NaturalDocs links to JSDoc
2022-01-08 01:49:35 +00:00
SelectionHandler.prototype.selectDelayed = function (me) {
let cell = me.getCell();
if (cell == null) {
cell = this.cell;
}
Finish converting core to ts, JSDoc conversion, consistency+convention changes, example bugfixes (#70) * reorganised directories; removed mx prefix * reduced directory hierarchies; removed mx prefix; type fixes * convert remaining javascript to ts * fix/add types * add type defs * type updates; moved codecs to where they're used * reorganise constants into enums+type additions * removed "Function:" and "Variable:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:", "Variable:" and "Class:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:" prefixes from comments, as they aren't needed in JSDoc * minor changes * convert code example blocks to markdown * module casing updates * converted parameter function documentation to JSDoc * documentation+type updates * removed react subdir (for now) * reorganised various `utils` functions into different files * type updates/bugfixes/workarounds * rename Rubberband and CellEditor to be *Handler to match the other plugins * move codec classes to where they're used to reduce cyclic dependencies * move codec classes to where they're used to reduce cyclic dependencies * type updates/reorganize layout file structure * renamed various files for consistency * import fixes * renamed GraphHandler SelectionHander and various fixes * convert EventObject parameters to objects * add basic better-docs config * update better-docs config * bugfix for shared variables in Graph persisting across instances * fixed accessing handlers in examples; renamed Model to GraphModel * fixed accessing handlers in examples; renamed Model to GraphModel * restored selection model * bugfix * renamed getModel to getDataModel * changed to use graph.batchUpdate() to reduce lines of code * changed to use graph.batchUpdate() to reduce lines of code * finished annotations+added TypeDoc * convert remaining Cell[] instances to CellArray * convert NaturalDocs links to JSDoc
2022-01-08 01:49:35 +00:00
const model = this.graph.getDataModel();
let parent = cell.getParent();
while (
this.graph.isCellSelected(cell) &&
parent.isVertex() &&
!this.graph.isValidRoot(parent)
) {
cell = parent;
parent = cell.getParent();
}
this.graph.selectCellForEvent(cell, me.getEvent());
};
// Returns last selected ancestor
2021-09-07 12:21:22 +00:00
PopupMenuHandler.prototype.getCellForPopupEvent = function (me) {
let cell = me.getCell();
Finish converting core to ts, JSDoc conversion, consistency+convention changes, example bugfixes (#70) * reorganised directories; removed mx prefix * reduced directory hierarchies; removed mx prefix; type fixes * convert remaining javascript to ts * fix/add types * add type defs * type updates; moved codecs to where they're used * reorganise constants into enums+type additions * removed "Function:" and "Variable:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:", "Variable:" and "Class:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:" prefixes from comments, as they aren't needed in JSDoc * minor changes * convert code example blocks to markdown * module casing updates * converted parameter function documentation to JSDoc * documentation+type updates * removed react subdir (for now) * reorganised various `utils` functions into different files * type updates/bugfixes/workarounds * rename Rubberband and CellEditor to be *Handler to match the other plugins * move codec classes to where they're used to reduce cyclic dependencies * move codec classes to where they're used to reduce cyclic dependencies * type updates/reorganize layout file structure * renamed various files for consistency * import fixes * renamed GraphHandler SelectionHander and various fixes * convert EventObject parameters to objects * add basic better-docs config * update better-docs config * bugfix for shared variables in Graph persisting across instances * fixed accessing handlers in examples; renamed Model to GraphModel * fixed accessing handlers in examples; renamed Model to GraphModel * restored selection model * bugfix * renamed getModel to getDataModel * changed to use graph.batchUpdate() to reduce lines of code * changed to use graph.batchUpdate() to reduce lines of code * finished annotations+added TypeDoc * convert remaining Cell[] instances to CellArray * convert NaturalDocs links to JSDoc
2022-01-08 01:49:35 +00:00
const model = this.graph.getDataModel();
let parent = cell.getParent();
while (parent.isVertex() && !this.graph.isValidRoot(parent)) {
if (this.graph.isCellSelected(parent)) {
cell = parent;
}
parent = parent.getParent();
}
return cell;
};
// Creates the graph inside the given container
const graph = new Graph(container);
graph.constrainChildren = false;
graph.extendParents = false;
graph.extendParentsOnAdd = false;
// Uncomment the following if you want the container
// to fit the size of the graph
// graph.setResizeContainer(true);
// Enables rubberband selection
Finish converting core to ts, JSDoc conversion, consistency+convention changes, example bugfixes (#70) * reorganised directories; removed mx prefix * reduced directory hierarchies; removed mx prefix; type fixes * convert remaining javascript to ts * fix/add types * add type defs * type updates; moved codecs to where they're used * reorganise constants into enums+type additions * removed "Function:" and "Variable:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:", "Variable:" and "Class:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:" prefixes from comments, as they aren't needed in JSDoc * minor changes * convert code example blocks to markdown * module casing updates * converted parameter function documentation to JSDoc * documentation+type updates * removed react subdir (for now) * reorganised various `utils` functions into different files * type updates/bugfixes/workarounds * rename Rubberband and CellEditor to be *Handler to match the other plugins * move codec classes to where they're used to reduce cyclic dependencies * move codec classes to where they're used to reduce cyclic dependencies * type updates/reorganize layout file structure * renamed various files for consistency * import fixes * renamed GraphHandler SelectionHander and various fixes * convert EventObject parameters to objects * add basic better-docs config * update better-docs config * bugfix for shared variables in Graph persisting across instances * fixed accessing handlers in examples; renamed Model to GraphModel * fixed accessing handlers in examples; renamed Model to GraphModel * restored selection model * bugfix * renamed getModel to getDataModel * changed to use graph.batchUpdate() to reduce lines of code * changed to use graph.batchUpdate() to reduce lines of code * finished annotations+added TypeDoc * convert remaining Cell[] instances to CellArray * convert NaturalDocs links to JSDoc
2022-01-08 01:49:35 +00:00
if (args.rubberBand) new RubberBandHandler(graph);
// 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
Finish converting core to ts, JSDoc conversion, consistency+convention changes, example bugfixes (#70) * reorganised directories; removed mx prefix * reduced directory hierarchies; removed mx prefix; type fixes * convert remaining javascript to ts * fix/add types * add type defs * type updates; moved codecs to where they're used * reorganise constants into enums+type additions * removed "Function:" and "Variable:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:", "Variable:" and "Class:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:" prefixes from comments, as they aren't needed in JSDoc * minor changes * convert code example blocks to markdown * module casing updates * converted parameter function documentation to JSDoc * documentation+type updates * removed react subdir (for now) * reorganised various `utils` functions into different files * type updates/bugfixes/workarounds * rename Rubberband and CellEditor to be *Handler to match the other plugins * move codec classes to where they're used to reduce cyclic dependencies * move codec classes to where they're used to reduce cyclic dependencies * type updates/reorganize layout file structure * renamed various files for consistency * import fixes * renamed GraphHandler SelectionHander and various fixes * convert EventObject parameters to objects * add basic better-docs config * update better-docs config * bugfix for shared variables in Graph persisting across instances * fixed accessing handlers in examples; renamed Model to GraphModel * fixed accessing handlers in examples; renamed Model to GraphModel * restored selection model * bugfix * renamed getModel to getDataModel * changed to use graph.batchUpdate() to reduce lines of code * changed to use graph.batchUpdate() to reduce lines of code * finished annotations+added TypeDoc * convert remaining Cell[] instances to CellArray * convert NaturalDocs links to JSDoc
2022-01-08 01:49:35 +00:00
graph.batchUpdate(() => {
const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 120, 60);
const v2 = graph.insertVertex(v1, null, 'World!', 90, 20, 60, 20);
Finish converting core to ts, JSDoc conversion, consistency+convention changes, example bugfixes (#70) * reorganised directories; removed mx prefix * reduced directory hierarchies; removed mx prefix; type fixes * convert remaining javascript to ts * fix/add types * add type defs * type updates; moved codecs to where they're used * reorganise constants into enums+type additions * removed "Function:" and "Variable:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:", "Variable:" and "Class:" prefixes from comments, as they aren't needed in JSDoc * removed "Function:" prefixes from comments, as they aren't needed in JSDoc * minor changes * convert code example blocks to markdown * module casing updates * converted parameter function documentation to JSDoc * documentation+type updates * removed react subdir (for now) * reorganised various `utils` functions into different files * type updates/bugfixes/workarounds * rename Rubberband and CellEditor to be *Handler to match the other plugins * move codec classes to where they're used to reduce cyclic dependencies * move codec classes to where they're used to reduce cyclic dependencies * type updates/reorganize layout file structure * renamed various files for consistency * import fixes * renamed GraphHandler SelectionHander and various fixes * convert EventObject parameters to objects * add basic better-docs config * update better-docs config * bugfix for shared variables in Graph persisting across instances * fixed accessing handlers in examples; renamed Model to GraphModel * fixed accessing handlers in examples; renamed Model to GraphModel * restored selection model * bugfix * renamed getModel to getDataModel * changed to use graph.batchUpdate() to reduce lines of code * changed to use graph.batchUpdate() to reduce lines of code * finished annotations+added TypeDoc * convert remaining Cell[] instances to CellArray * convert NaturalDocs links to JSDoc
2022-01-08 01:49:35 +00:00
});
return container;
};
export const Default = Template.bind({});