Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 19 additions & 20 deletions packages/core/src/view/handler/RubberBandHandler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -113,12 +113,15 @@ class RubberBandHandler implements GraphPlugin {
height = 0;

/**
* Specifies the default opacity to be used for the rubberband div. Default is 20.
* Specifies the default opacity to be used for the rubberband div.
* Valid values are between `0` and `100`.
* @default 20
*/
defaultOpacity = 20;

/**
* Specifies if events are handled. Default is true.
* Specifies if events are handled.
* @default true
*/
enabled = true;

Expand All @@ -133,17 +136,18 @@ class RubberBandHandler implements GraphPlugin {
sharedDiv: HTMLElement | null = null;

/**
* Holds the value of the x argument in the last call to <update>.
* Holds the value of the x argument in the last call to {@link update}.
*/
currentX = 0;

/**
* Holds the value of the y argument in the last call to <update>.
* Holds the value of the y argument in the last call to {@link update}.
*/
currentY = 0;

/**
* Optional fade out effect. Default is false.
* Optional fade out effect.
* @default false
*/
fadeOut = false;

Expand All @@ -155,8 +159,7 @@ class RubberBandHandler implements GraphPlugin {
}

/**
* Enables or disables event handling. This implementation updates
* <enabled>.
* Enables or disables event handling. This implementation updates{@link enabled}.
*/
setEnabled(enabled: boolean) {
this.enabled = enabled;
Expand All @@ -171,9 +174,8 @@ class RubberBandHandler implements GraphPlugin {
}

/**
* Handles the event by initiating a rubberband selection. By consuming the
* event all subsequent events of the gesture are redirected to this
* handler.
* Handles the event by initiating a rubberband selection.
* By consuming the event all subsequent events of the gesture are redirected to this handler.
*/
mouseDown(sender: EventSource, me: InternalMouseEvent) {
if (
Expand Down Expand Up @@ -236,7 +238,7 @@ class RubberBandHandler implements GraphPlugin {
}

/**
* Handles the event by updating therubberband selection.
* Handles the event by updating the rubberband selection.
*/
mouseMove(sender: EventSource, me: InternalMouseEvent) {
if (!me.isConsumed() && this.first) {
Expand Down Expand Up @@ -293,8 +295,7 @@ class RubberBandHandler implements GraphPlugin {
}

/**
* Handles the event by selecting the region of the rubberband using
* {@link Graph#selectRegion}.
* Handles the event by selecting the region of the rubberband using {@link Graph#selectRegion}.
*/
mouseUp(sender: EventSource, me: InternalMouseEvent) {
const active = this.isActive();
Expand All @@ -307,8 +308,7 @@ class RubberBandHandler implements GraphPlugin {
}

/**
* Resets the state of this handler and selects the current region
* for the given event.
* Resets the state of this handler and selects the current region for the given event.
*/
execute(evt: MouseEvent) {
const rect = new Rectangle(this.x, this.y, this.width, this.height);
Expand Down Expand Up @@ -350,7 +350,7 @@ class RubberBandHandler implements GraphPlugin {
}

/**
* Sets <currentX> and <currentY> and calls <repaint>.
* Sets <currentX> and <currentY> and calls {@link repaint}.
*/
update(x: number, y: number) {
this.currentX = x;
Expand All @@ -360,7 +360,7 @@ class RubberBandHandler implements GraphPlugin {
}

/**
* Computes the bounding box and updates the style of the <div>.
* Computes the bounding box and updates the style of the `div`.
*/
repaint() {
if (this.div && this.first) {
Expand All @@ -383,9 +383,8 @@ class RubberBandHandler implements GraphPlugin {
}

/**
* Destroys the handler and all its resources and DOM nodes. This does
* normally not need to be called, it is called automatically when the
* window unloads.
* Destroys the handler and all its resources and DOM nodes.
* This does normally not need to be called, it is called automatically when the window unloads.
*/
onDestroy() {
if (!this.destroyed) {
Expand Down
4 changes: 2 additions & 2 deletions packages/ts-example-without-defaults/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,8 @@ const initializeGraph = (container: HTMLElement) => {
};

// display the maxGraph version in the footer
const footer = <HTMLElement>document.querySelector('footer');
const footer = document.querySelector('footer')!;
footer.innerText = `Built with maxGraph ${constants.VERSION}`;

// Creates the graph inside the given container
initializeGraph(<HTMLElement>document.querySelector('#graph-container'));
initializeGraph(document.querySelector('#graph-container')!);
4 changes: 2 additions & 2 deletions packages/ts-example/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,8 @@ const initializeGraph = (container: HTMLElement) => {
};

// display the maxGraph version in the footer
const footer = <HTMLElement>document.querySelector('footer');
const footer = document.querySelector('footer')!;
footer.innerText = `Built with maxGraph ${constants.VERSION}`;

// Creates the graph inside the given container
initializeGraph(<HTMLElement>document.querySelector('#graph-container'));
initializeGraph(document.querySelector('#graph-container')!);
19 changes: 17 additions & 2 deletions packages/ts-support/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,29 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import { constants, Graph, InternalEvent } from '@maxgraph/core';
import {
CellState,
constants,
Graph,
InternalEvent,
RubberBandHandler,
} from '@maxgraph/core';

const version = constants.VERSION;

// Creates the graph inside the given container
const container = <HTMLElement>document.getElementById('graph-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

const rubberBandHandler = graph.getPlugin<RubberBandHandler>('RubberBandHandler');
rubberBandHandler.defaultOpacity = 50;
rubberBandHandler.fadeOut = true;

// call methods and properties defined in mixins to ensure that interface augmentation is correctly defined
graph.getAllConnectionConstraints(new CellState(), true);
graph.cellsEditable = false;
graph.getFoldingImage(new CellState());