@finos/legend-extension-dsl-diagram
Version:
Legend extension for Diagram DSL
136 lines • 5.01 kB
JavaScript
/**
* Copyright (c) 2025-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 { guaranteeNonNullable } from '@finos/legend-shared';
import { action, computed, makeObservable, observable } from 'mobx';
import { DIAGRAM_INTERACTION_MODE, } from './DiagramRenderer.js';
export class DiagramViewerState {
diagrams;
queryClass;
_renderer;
currentDiagram;
contextMenuClassView;
showDescription = true;
expandDescription = false;
constructor(diagrams, queryClass) {
makeObservable(this, {
_renderer: observable,
currentDiagram: observable,
contextMenuClassView: observable,
showDescription: observable,
expandDescription: observable,
previousDiagram: computed,
nextDiagram: computed,
currentDiagramIndex: computed,
diagramRenderer: computed,
setDiagramRenderer: action,
setCurrentDiagram: action,
setContextMenuClassView: action,
setShowDescription: action,
setExpandDescription: action,
});
this.queryClass = queryClass;
this.diagrams = diagrams;
this.currentDiagram = diagrams[0];
}
get diagramRenderer() {
return guaranteeNonNullable(this._renderer, `Diagram renderer must be initialized (this is likely caused by calling this method at the wrong place)`);
}
get isDiagramRendererInitialized() {
return Boolean(this._renderer);
}
// NOTE: we have tried to use React to control the cursor and
// could not overcome the jank/lag problem, so we settle with CSS-based approach
// See https://css-tricks.com/using-css-cursors/
// See https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
get diagramCursorClass() {
if (!this.isDiagramRendererInitialized) {
return '';
}
switch (this.diagramRenderer.interactionMode) {
case DIAGRAM_INTERACTION_MODE.PAN: {
return this.diagramRenderer.leftClick
? 'data-space__viewer__diagram-viewer__cursor--grabbing'
: 'data-space__viewer__diagram-viewer__cursor--grab';
}
case DIAGRAM_INTERACTION_MODE.ZOOM_IN: {
return 'data-space__viewer__diagram-viewer__cursor--zoom-in';
}
case DIAGRAM_INTERACTION_MODE.ZOOM_OUT: {
return 'data-space__viewer__diagram-viewer__cursor--zoom-out';
}
case DIAGRAM_INTERACTION_MODE.LAYOUT: {
if (this.diagramRenderer.mouseOverClassView) {
return 'data-space__viewer__diagram-viewer__cursor--pointer';
}
return '';
}
default:
return '';
}
}
get previousDiagram() {
if (!this.currentDiagram) {
return undefined;
}
const idx = this.diagrams.indexOf(this.currentDiagram);
if (idx === 0 || idx === -1) {
return undefined;
}
return this.diagrams[idx - 1];
}
get nextDiagram() {
if (!this.currentDiagram) {
return undefined;
}
const idx = this.diagrams.indexOf(this.currentDiagram);
if (idx === this.diagrams.length - 1 || idx === -1) {
return undefined;
}
return this.diagrams[idx + 1];
}
get currentDiagramIndex() {
return this.currentDiagram
? this.diagrams.indexOf(this.currentDiagram) + 1
: 0;
}
setDiagramRenderer(val) {
this._renderer = val;
}
setCurrentDiagram(val) {
this.currentDiagram = val;
}
setContextMenuClassView(val) {
this.contextMenuClassView = val;
}
setupDiagramRenderer() {
this.diagramRenderer.setIsReadOnly(true);
this.diagramRenderer.setEnableLayoutAutoAdjustment(true);
if (this.queryClass) {
this.diagramRenderer.onClassViewDoubleClick = (classView) => this.queryClass?.(classView.class.value);
}
this.diagramRenderer.onClassViewRightClick = (classView) => {
this.setContextMenuClassView(classView);
};
}
setShowDescription(val) {
this.showDescription = val;
this.setExpandDescription(false);
}
setExpandDescription(val) {
this.expandDescription = val;
}
}
//# sourceMappingURL=DiagramViewerState.js.map