@finos/legend-extension-dsl-diagram/lib/components/DiagramRenderer.d.ts

Legend extension for Diagram DSL

/**
 * Copyright (c) 2020-present, Goldman Sachs
 *
 * 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.
 */
import { type AbstractProperty, Class } from '@finos/legend-graph';
import type { Diagram } from '../graph/metamodel/pure/packageableElements/diagram/DSL_Diagram_Diagram.js';
import { Rectangle } from '../graph/metamodel/pure/packageableElements/diagram/geometry/DSL_Diagram_Rectangle.js';
import { Point } from '../graph/metamodel/pure/packageableElements/diagram/geometry/DSL_Diagram_Point.js';
import { PositionedRectangle } from '../graph/metamodel/pure/packageableElements/diagram/geometry/DSL_Diagram_PositionedRectangle.js';
import { ClassView } from '../graph/metamodel/pure/packageableElements/diagram/DSL_Diagram_ClassView.js';
import type { PropertyHolderView } from '../graph/metamodel/pure/packageableElements/diagram/DSL_Diagram_PropertyHolderView.js';
import { GeneralizationView } from '../graph/metamodel/pure/packageableElements/diagram/DSL_Diagram_GeneralizationView.js';
import { RelationshipView } from '../graph/metamodel/pure/packageableElements/diagram/DSL_Diagram_RelationshipView.js';
export declare enum DIAGRAM_INTERACTION_MODE {
    LAYOUT = 0,
    PAN = 1,
    ZOOM_IN = 2,
    ZOOM_OUT = 3,
    ADD_RELATIONSHIP = 4,
    ADD_CLASS = 5
}
export declare enum DIAGRAM_RELATIONSHIP_EDIT_MODE {
    PROPERTY = 0,
    INHERITANCE = 1,
    NONE = 2
}
export declare enum DIAGRAM_ALIGNER_OPERATOR {
    ALIGN_LEFT = 0,
    ALIGN_CENTER = 1,
    ALIGN_RIGHT = 2,
    ALIGN_TOP = 3,
    ALIGN_MIDDLE = 4,
    ALIGN_BOTTOM = 5,
    SPACE_HORIZONTALLY = 6,
    SPACE_VERTICALLY = 7
}
export declare const DIAGRAM_ZOOM_LEVELS: number[];
export declare class DiagramRenderer {
    diagram: Diagram;
    isReadOnly: boolean;
    enableLayoutAutoAdjustment: boolean;
    div: HTMLDivElement;
    canvas: HTMLCanvasElement;
    ctx: CanvasRenderingContext2D;
    canvasDimension: Rectangle;
    canvasCenter: Point;
    /**
     * The screen or artboard that contains all parts of the diagram. It's important to understand that this is indeed a virtual screen
     * because it is constructed by constructing the smallest possible bounding rectangle around the diagram. As such, information about
     * the screen is not persisted (in the protocol JSON)
     */
    virtualScreen: PositionedRectangle;
    /**
     * This refers the offset of the virtual screen with respect to the canvas. We have 2 types of coordinate:
     * `stored` (in the JSON protocol of class and relationship views) vs. `rendering`.
     *
     * There are 2 important facts about stored coordinates:
     * 1. Zoom is not taken into account (unlike rendering coordinates which change as we zoom)
     * 2. They are with respect to the canvas, not the screen (because the screen is virtual - see above)
     *
     * As such, when we debug, let's say we have a position (x,y), if we want to find that coordinate in the coordiante system of the canvas, we have to
     * add the offset, so the coordinate of (x, y) is (x + screenOffset.x, y + screenOffset.y) when we refer to the canvas coordinate system
     * So if we turn on debug mode and try to move the top left corner of the screen to the `offset crosshair` the screen coordinate system should align
     * with the canvas coordinate system. Of course due to centering and moving the screen around there is still an offset between the 2 coordinate system,
     * but we know for a fact that the top left of the screen will have stored coordinate (0,0)
     */
    screenOffset: Point;
    zoom: number;
    interactionMode: DIAGRAM_INTERACTION_MODE;
    relationshipMode: DIAGRAM_RELATIONSHIP_EDIT_MODE;
    triangle: [Point, Point, Point];
    diamond: [Point, Point, Point, Point];
    fontFamily: string;
    fontSize: number;
    lineHeight: number;
    truncateText: boolean;
    maxLineLength: number;
    screenPadding: number;
    classViewSpaceX: number;
    classViewSpaceY: number;
    propertySpacing: number;
    showScreenGrid: boolean;
    showScreenBoxGuide: boolean;
    screenGridAxisTickLength: number;
    screenGridSpacingX: number;
    screenGridSpacingY: number;
    screenGridLineWidth: number;
    screenGridLineColor: string;
    screenGridLabelTextColor: string;
    screenGuideLineColor: string;
    screenGuideLabelTextColor: string;
    showCanvasGrid: boolean;
    showCanvasBoxGuide: boolean;
    showScreenOffsetGuide: boolean;
    canvasGridAxisTickLength: number;
    canvasGridSpacingX: number;
    canvasGridSpacingY: number;
    canvasGridLineWidth: number;
    canvasGridLineColor: string;
    canvasGridLabelTextColor: string;
    canvasGuideLineColor: string;
    canvasGuideLabelTextColor: string;
    screenOffsetGuideLineColor: string;
    screenOffsetGuideLabelTextColor: string;
    defaultLineWidth: number;
    defaultLineColor: string;
    canvasColor: string;
    backgroundColor: string;
    classViewFillColor: string;
    classViewHeaderTextColor: string;
    classViewPropertyTextColor: string;
    classViewPrimitivePropertyTextColor: string;
    classViewDerivedPropertyTextColor: string;
    relationshipViewTextColor: string;
    propertyViewOwnedDiamondColor: string;
    propertyViewSharedDiamondColor: string;
    generalizationViewInheritanceTriangeFillColor: string;
    selectionBoxBorderColor: string;
    selection?: PositionedRectangle | undefined;
    selectionStart?: Point | undefined;
    selectedClassCorner?: ClassView | undefined;
    selectedClassProperty?: {
        property: AbstractProperty;
        selectionPoint: Point;
    } | undefined;
    selectedClasses: ClassView[];
    selectedPropertyOrAssociation?: PropertyHolderView | undefined;
    selectedInheritance?: GeneralizationView | undefined;
    selectedPoint?: Point | undefined;
    private _selectedClassesInitialPositions;
    startClassView?: ClassView | undefined;
    handleAddRelationship?: ((start: ClassView, target: ClassView) => RelationshipView | undefined) | undefined;
    mouseOverClassCorner?: ClassView | undefined;
    mouseOverClassName?: ClassView | undefined;
    mouseOverClassView?: ClassView | undefined;
    mouseOverClassProperty?: AbstractProperty | undefined;
    mouseOverPropertyHolderViewLabel?: PropertyHolderView | undefined;
    cursorPosition: Point;
    leftClick: boolean;
    middleClick: boolean;
    rightClick: boolean;
    clickX: number;
    clickY: number;
    positionBeforeLastMove: Point;
    onAddClassViewClick: (point: Point) => void;
    onClassViewRightClick: (classView: ClassView, point: Point) => void;
    onBackgroundDoubleClick?: ((point: Point) => void) | undefined;
    onClassViewDoubleClick?: ((classView: ClassView, point: Point) => void) | undefined;
    onClassNameDoubleClick?: ((classView: ClassView, point: Point) => void) | undefined;
    onClassPropertyDoubleClick?: ((property: AbstractProperty, point: Point, propertyHolderView: PropertyHolderView | undefined) => void) | undefined;
    handleEditClassView: (classView: ClassView) => void;
    handleEditProperty: (property: AbstractProperty, point: Point, propertyHolderView: PropertyHolderView | undefined) => void;
    handleAddSimpleProperty: (classView: ClassView) => void;
    constructor(div: HTMLDivElement, diagram: Diagram);
    setIsReadOnly(val: boolean): void;
    setEnableLayoutAutoAdjustment(val: boolean): void;
    setMouseOverClassView(val: ClassView | undefined): void;
    setMouseOverClassName(val: ClassView | undefined): void;
    setMouseOverClassCorner(val: ClassView | undefined): void;
    setMouseOverClassProperty(val: AbstractProperty | undefined): void;
    setMouseOverPropertyHolderViewLabel(val: PropertyHolderView | undefined): void;
    setSelectionStart(val: Point | undefined): void;
    setSelectedClassCorner(val: ClassView | undefined): void;
    setSelectedClasses(val: ClassView[]): void;
    setSelectedPropertyOrAssociation(val: PropertyHolderView | undefined): void;
    setSelectedInheritance(val: GeneralizationView | undefined): void;
    setLeftClick(val: boolean): void;
    setMiddleClick(val: boolean): void;
    setRightClick(val: boolean): void;
    setZoomLevel(val: number): void;
    render(options?: {
        initial?: boolean | undefined;
    }): void;
    refresh(): void;
    refreshCanvas(): void;
    clearScreen(): void;
    private drawScreen;
    autoRecenter(): void;
    /**
     * Reset the screen offset
     */
    private center;
    changeMode(editMode: DIAGRAM_INTERACTION_MODE, relationshipMode: DIAGRAM_RELATIONSHIP_EDIT_MODE): void;
    align(op: DIAGRAM_ALIGNER_OPERATOR): void;
    truncateTextWithEllipsis(val: string, limit?: number): string;
    canvasCoordinateToModelCoordinate(point: Point): Point;
    modelCoordinateToCanvasCoordinate(point: Point): Point;
    /**
     * Mouse events' coordinate x,y are relative to the viewport, not the canvas element
     * so we need to calculate them relative to the canvas element
     */
    resolveMouseEventCoordinate(e: MouseEvent): Point;
    eventCoordinateToCanvasCoordinate(point: Point): Point;
    canvasCoordinateToEventCoordinate(point: Point): Point;
    hasPropertyView(classView: ClassView, property: AbstractProperty): boolean;
    get divPosition(): Point;
    private manageVirtualScreen;
    /**
     * Here we zoom with respect to the point the mouse is currently pointing at.
     * The idea is fairly simple. We convert the coordinate of the zoom point
     * to the model coordinate and find a way to alter `screenOffset` in response
     * to change in zoom level to ensure the model coordinate stays constant.
     */
    private executeZoom;
    private zoomPoint;
    zoomCenter(zoomLevel: number): void;
    zoomToFit(): void;
    /**
     * Add a classview to current diagram and draw it.
     * This function is intended to be used with drag and drop, hence the position paramter, which must be relative to the screen/window
     */
    addClassView(addedClass: Class, classViewModelCoordinate?: Point): ClassView | undefined;
    private drawBoundingBox;
    private drawDiagram;
    drawAll(): void;
    private drawScreenGrid;
    private drawCanvasGrid;
    private drawClassViewProperty;
    private computeClassNameWidth;
    ensureClassViewMeetMinDimensions(classView: ClassView): void;
    private drawClassView;
    private drawLinePropertyNameAndMultiplicity;
    private drawLinePropertyText;
    private drawPropertyOrAssociation;
    private drawInheritance;
    /**
     * Reorder will move the class view to the top of the class view array of the diagram,
     * This will bring it to front.
     */
    private reorderDiagramDomain;
    /**
     * Shift relationship views if both ends' classviews are moved.
     */
    private potentiallyShiftRelationships;
    recenter(): void;
    switchToZoomMode(): void;
    switchToViewMode(): void;
    switchToPanMode(): void;
    switchToAddPropertyMode(): void;
    switchToAddInheritanceMode(): void;
    switchToAddClassMode(): void;
    ejectProperty(): void;
    getSuperTypeLevels(classViews: ClassView[], diagram: Diagram, currentDepth: number, recurseMaxDepth: number): ClassView[][];
    layoutTaxonomy(classViewLevels: ClassView[][], diagram: Diagram, positionInitialClass: boolean, superType: boolean): [ClassView[], GeneralizationView[]];
    keydown(e: KeyboardEvent): void;
    mouseup(e: MouseEvent): void;
    mousedblclick(e: MouseEvent): void;
    mousedown(e: MouseEvent): void;
    mousewheel(e: WheelEvent): void;
    mousemove(e: MouseEvent): void;
}
//# sourceMappingURL=DiagramRenderer.d.ts.map