How to use sprotty - 10 common examples

export default function runStandalone() {
    const clientId = getOptionFromDom('client-id') || 'sprotty-client';
    const transport = getOptionFromDom('transport') || 'websocket';
    const container = createContainer(transport=='websocket' ? TransportMedium.Websocket : TransportMedium.LSP, clientId);
    const dispatcher = container.get(TYPES.IActionDispatcher);

    // Run
    const modelSource = container.get(TYPES.ModelSource);

    if (modelSource instanceof WebSocketDiagramServer) {
        const ws = new SockJS('http://localhost:8080/websocket');
        modelSource.listen(ws);
        ws.addEventListener('open', () => {
            dispatcher.dispatch(requestModelAction());
        });
        ws.addEventListener('error', (event) => {
            console.error(`WebSocket Error: ${event}`)
        })
    }

    if (modelSource instanceof VSCodeWebViewDiagramServer) {
        modelSource.listen(acquireVsCodeApi());
        dispatcher.dispatch(requestModelAction());
    }

protected setActiveResizeElement(target: SModelElement): boolean {
        // check if we have a selected, moveable element (multi-selection allowed)
        const moveableElement = findParentByFeature(target, isBoundsAwareMoveable);
        if (isSelected(moveableElement)) {
            // only allow one element to have the element resize handles
            this.activeResizeElementId = moveableElement.id;
            this.tool.dispatchFeedback([new ShowChangeBoundsToolResizeFeedbackAction(this.activeResizeElementId)]);
            return true;
        }
        return false;
    }

mouseUp(target: SModelElement, event: MouseEvent): Action[] {
        super.mouseUp(target, event);
        if (!this.hasPositionDelta()) {
            this.resetPosition();
            return [];
        }

        // no further bound changing, simply send the latest data to the server using a single change bounds action for all relevant elements
        const actions: Action[] = [];
        if (this.activeResizeHandle) {
            // An action. Resize, not move.
            const resizeElement = findParentByFeature(this.activeResizeHandle, isResizable);
            if (this.isActiveResizeElement(resizeElement)) {
                createChangeBoundsAction(resizeElement).forEach(action => actions.push(action));
            }
        } else {
            // Bounds... Change Bounds.
            const newBounds: ElementAndBounds[] = [];
            forEachElement(target, isNonRoutableSelectedBoundsAware, element =>
                createElementAndBounds(element).forEach(bounds => newBounds.push(bounds)));
            if (newBounds.length > 0) {
                actions.push(new ChangeBoundsOperationAction(newBounds));
            }
        }
        this.resetPosition();
        return actions;
    }

const toolFeedbackModule = new ContainerModule((bind, _unbind, isBound) => {
    bind(GLSP_TYPES.IFeedbackActionDispatcher).to(FeedbackActionDispatcher).inSingletonScope();

    // create node and edge tool feedback
    configureCommand({ bind, isBound }, ApplyCursorCSSFeedbackActionCommand);
    configureCommand({ bind, isBound }, DrawFeedbackEdgeCommand);
    configureCommand({ bind, isBound }, RemoveFeedbackEdgeCommand);

    configureView({ bind, isBound }, FeedbackEdgeEnd.TYPE, FeedbackEdgeEndView);
    // move tool feedback: we use sprotties MoveCommand as client-side visual feedback
    configureCommand({ bind, isBound }, MoveCommand);

    // resize tool feedback
    configureCommand({ bind, isBound }, ShowChangeBoundsToolResizeFeedbackCommand);
    configureCommand({ bind, isBound }, HideChangeBoundsToolResizeFeedbackCommand);
    configureView({ bind, isBound }, SResizeHandle.TYPE, SResizeHandleView);

    // reconnect edge tool feedback
    configureCommand({ bind, isBound }, ShowEdgeReconnectHandlesFeedbackCommand);
    configureCommand({ bind, isBound }, HideEdgeReconnectHandlesFeedbackCommand);
    configureCommand({ bind, isBound }, DrawFeedbackEdgeSourceCommand);

    configureCommand({ bind, isBound }, SwitchRoutingModeCommand);

    bind(TYPES.IVNodePostprocessor).to(LocationPostprocessor);
    bind(TYPES.HiddenVNodePostprocessor).to(LocationPostprocessor);
});

// create node and edge tool feedback
    configureCommand({ bind, isBound }, ApplyCursorCSSFeedbackActionCommand);
    configureCommand({ bind, isBound }, DrawFeedbackEdgeCommand);
    configureCommand({ bind, isBound }, RemoveFeedbackEdgeCommand);

    configureView({ bind, isBound }, FeedbackEdgeEnd.TYPE, FeedbackEdgeEndView);
    // move tool feedback: we use sprotties MoveCommand as client-side visual feedback
    configureCommand({ bind, isBound }, MoveCommand);

    // resize tool feedback
    configureCommand({ bind, isBound }, ShowChangeBoundsToolResizeFeedbackCommand);
    configureCommand({ bind, isBound }, HideChangeBoundsToolResizeFeedbackCommand);
    configureView({ bind, isBound }, SResizeHandle.TYPE, SResizeHandleView);

    // reconnect edge tool feedback
    configureCommand({ bind, isBound }, ShowEdgeReconnectHandlesFeedbackCommand);
    configureCommand({ bind, isBound }, HideEdgeReconnectHandlesFeedbackCommand);
    configureCommand({ bind, isBound }, DrawFeedbackEdgeSourceCommand);

    configureCommand({ bind, isBound }, SwitchRoutingModeCommand);

    bind(TYPES.IVNodePostprocessor).to(LocationPostprocessor);
    bind(TYPES.HiddenVNodePostprocessor).to(LocationPostprocessor);
});

const toolFeedbackModule = new ContainerModule((bind, _unbind, isBound) => {
    bind(GLSP_TYPES.IFeedbackActionDispatcher).to(FeedbackActionDispatcher).inSingletonScope();

    // create node and edge tool feedback
    configureCommand({ bind, isBound }, ApplyCursorCSSFeedbackActionCommand);
    configureCommand({ bind, isBound }, DrawFeedbackEdgeCommand);
    configureCommand({ bind, isBound }, RemoveFeedbackEdgeCommand);

    configureView({ bind, isBound }, FeedbackEdgeEnd.TYPE, FeedbackEdgeEndView);
    // move tool feedback: we use sprotties MoveCommand as client-side visual feedback
    configureCommand({ bind, isBound }, MoveCommand);

    // resize tool feedback
    configureCommand({ bind, isBound }, ShowChangeBoundsToolResizeFeedbackCommand);
    configureCommand({ bind, isBound }, HideChangeBoundsToolResizeFeedbackCommand);
    configureView({ bind, isBound }, SResizeHandle.TYPE, SResizeHandleView);

    // reconnect edge tool feedback
    configureCommand({ bind, isBound }, ShowEdgeReconnectHandlesFeedbackCommand);
    configureCommand({ bind, isBound }, HideEdgeReconnectHandlesFeedbackCommand);
    configureCommand({ bind, isBound }, DrawFeedbackEdgeSourceCommand);

    configureCommand({ bind, isBound }, SwitchRoutingModeCommand);

    bind(TYPES.IVNodePostprocessor).to(LocationPostprocessor);
    bind(TYPES.HiddenVNodePostprocessor).to(LocationPostprocessor);
});

const toolFeedbackModule = new ContainerModule((bind, _unbind, isBound) => {
    bind(GLSP_TYPES.IFeedbackActionDispatcher).to(FeedbackActionDispatcher).inSingletonScope();

    // create node and edge tool feedback
    configureCommand({ bind, isBound }, ApplyCursorCSSFeedbackActionCommand);
    configureCommand({ bind, isBound }, DrawFeedbackEdgeCommand);
    configureCommand({ bind, isBound }, RemoveFeedbackEdgeCommand);

    configureView({ bind, isBound }, FeedbackEdgeEnd.TYPE, FeedbackEdgeEndView);
    // move tool feedback: we use sprotties MoveCommand as client-side visual feedback
    configureCommand({ bind, isBound }, MoveCommand);

    // resize tool feedback
    configureCommand({ bind, isBound }, ShowChangeBoundsToolResizeFeedbackCommand);
    configureCommand({ bind, isBound }, HideChangeBoundsToolResizeFeedbackCommand);
    configureView({ bind, isBound }, SResizeHandle.TYPE, SResizeHandleView);

    // reconnect edge tool feedback
    configureCommand({ bind, isBound }, ShowEdgeReconnectHandlesFeedbackCommand);
    configureCommand({ bind, isBound }, HideEdgeReconnectHandlesFeedbackCommand);
    configureCommand({ bind, isBound }, DrawFeedbackEdgeSourceCommand);

    configureCommand({ bind, isBound }, SwitchRoutingModeCommand);

const toolFeedbackModule = new ContainerModule((bind, _unbind, isBound) => {
    bind(GLSP_TYPES.IFeedbackActionDispatcher).to(FeedbackActionDispatcher).inSingletonScope();

    // create node and edge tool feedback
    configureCommand({ bind, isBound }, ApplyCursorCSSFeedbackActionCommand);
    configureCommand({ bind, isBound }, DrawFeedbackEdgeCommand);
    configureCommand({ bind, isBound }, RemoveFeedbackEdgeCommand);

    configureView({ bind, isBound }, FeedbackEdgeEnd.TYPE, FeedbackEdgeEndView);
    // move tool feedback: we use sprotties MoveCommand as client-side visual feedback
    configureCommand({ bind, isBound }, MoveCommand);

    // resize tool feedback
    configureCommand({ bind, isBound }, ShowChangeBoundsToolResizeFeedbackCommand);
    configureCommand({ bind, isBound }, HideChangeBoundsToolResizeFeedbackCommand);
    configureView({ bind, isBound }, SResizeHandle.TYPE, SResizeHandleView);

    // reconnect edge tool feedback
    configureCommand({ bind, isBound }, ShowEdgeReconnectHandlesFeedbackCommand);
    configureCommand({ bind, isBound }, HideEdgeReconnectHandlesFeedbackCommand);
    configureCommand({ bind, isBound }, DrawFeedbackEdgeSourceCommand);

    configureCommand({ bind, isBound }, SwitchRoutingModeCommand);

    bind(TYPES.IVNodePostprocessor).to(LocationPostprocessor);
    bind(TYPES.HiddenVNodePostprocessor).to(LocationPostprocessor);
});

const toolFeedbackModule = new ContainerModule((bind, _unbind, isBound) => {
    bind(GLSP_TYPES.IFeedbackActionDispatcher).to(FeedbackActionDispatcher).inSingletonScope();

    // create node and edge tool feedback
    configureCommand({ bind, isBound }, ApplyCursorCSSFeedbackActionCommand);
    configureCommand({ bind, isBound }, DrawFeedbackEdgeCommand);
    configureCommand({ bind, isBound }, RemoveFeedbackEdgeCommand);

    configureView({ bind, isBound }, FeedbackEdgeEnd.TYPE, FeedbackEdgeEndView);
    // move tool feedback: we use sprotties MoveCommand as client-side visual feedback
    configureCommand({ bind, isBound }, MoveCommand);

    // resize tool feedback
    configureCommand({ bind, isBound }, ShowChangeBoundsToolResizeFeedbackCommand);
    configureCommand({ bind, isBound }, HideChangeBoundsToolResizeFeedbackCommand);
    configureView({ bind, isBound }, SResizeHandle.TYPE, SResizeHandleView);

    // reconnect edge tool feedback
    configureCommand({ bind, isBound }, ShowEdgeReconnectHandlesFeedbackCommand);
    configureCommand({ bind, isBound }, HideEdgeReconnectHandlesFeedbackCommand);
    configureCommand({ bind, isBound }, DrawFeedbackEdgeSourceCommand);

const defaultGLSPModule = new ContainerModule((bind, _unbind, isBound, rebind) => {
    const context = { bind, _unbind, isBound, rebind };
    // Tool manager initialization ------------------------------------
    configureActionHandler(context, SetOperationsAction.KIND, GLSPToolManagerActionHandler);
    bind(GLSP_TYPES.IToolFactory).toFactory((createToolFactory()));

    // Model update initialization ------------------------------------
    configureCommand(context, FeedbackAwareUpdateModelCommand);
    configureActionHandler(context, SetModelCommand.KIND, SetModelActionHandler);

    rebind(TYPES.ICommandStack).to(GLSPCommandStack);
});