mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-01-19 11:16:41 +00:00
Map settings introduction and disable dragging of labels and interfaces when in readonly
This commit is contained in:
parent
1217c4e31c
commit
a4a4415c38
@ -40,6 +40,7 @@ import { SelectionEventSource } from './events/selection-event-source';
|
||||
import { SelectionControlComponent } from './components/selection-control/selection-control.component';
|
||||
import { SelectionSelectComponent } from './components/selection-select/selection-select.component';
|
||||
import { DraggableSelectionComponent } from './components/draggable-selection/draggable-selection.component';
|
||||
import { MapSettingsManager } from './managers/map-settings-manager';
|
||||
|
||||
|
||||
@NgModule({
|
||||
@ -90,6 +91,7 @@ import { DraggableSelectionComponent } from './components/draggable-selection/dr
|
||||
MapDrawingsDataSource,
|
||||
MapSymbolsDataSource,
|
||||
SelectionEventSource,
|
||||
MapSettingsManager,
|
||||
...D3_MAP_IMPORTS
|
||||
],
|
||||
exports: [ D3MapComponent, ExperimentalMapComponent ]
|
||||
|
@ -6,19 +6,18 @@ import { Selection, select } from 'd3-selection';
|
||||
import { GraphLayout } from "../../widgets/graph-layout";
|
||||
import { Context } from "../../models/context";
|
||||
import { Size } from "../../models/size";
|
||||
import { NodesWidget } from '../../widgets/nodes';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { InterfaceLabelWidget } from '../../widgets/interface-label';
|
||||
import { SelectionTool } from '../../tools/selection-tool';
|
||||
import { MovingTool } from '../../tools/moving-tool';
|
||||
import { MapChangeDetectorRef } from '../../services/map-change-detector-ref';
|
||||
import { CanvasSizeDetector } from '../../helpers/canvas-size-detector';
|
||||
import { DrawingsWidget } from '../../widgets/drawings';
|
||||
import { Node } from '../../models/node';
|
||||
import { Link } from '../../../models/link';
|
||||
import { Drawing } from '../../models/drawing';
|
||||
import { Symbol } from '../../../models/symbol';
|
||||
import { GraphDataManager } from '../../managers/graph-data-manager';
|
||||
import { MapSettingsManager } from '../../managers/map-settings-manager';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -51,9 +50,8 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
|
||||
private context: Context,
|
||||
private mapChangeDetectorRef: MapChangeDetectorRef,
|
||||
private canvasSizeDetector: CanvasSizeDetector,
|
||||
private mapSettings: MapSettingsManager,
|
||||
protected element: ElementRef,
|
||||
protected nodesWidget: NodesWidget,
|
||||
protected drawingsWidget: DrawingsWidget,
|
||||
protected interfaceLabelWidget: InterfaceLabelWidget,
|
||||
protected selectionToolWidget: SelectionTool,
|
||||
protected movingToolWidget: MovingTool,
|
||||
@ -84,8 +82,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
|
||||
@Input('draw-link-tool') drawLinkTool: boolean;
|
||||
|
||||
@Input('readonly') set readonly(value) {
|
||||
this.nodesWidget.draggingEnabled = !value;
|
||||
this.drawingsWidget.draggingEnabled = !value;
|
||||
this.mapSettings.isReadOnly = value;
|
||||
}
|
||||
|
||||
ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
|
||||
|
7
src/app/cartography/managers/map-settings-manager.ts
Normal file
7
src/app/cartography/managers/map-settings-manager.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { Injectable } from "@angular/core";
|
||||
|
||||
|
||||
@Injectable()
|
||||
export class MapSettingsManager {
|
||||
public isReadOnly = false;
|
||||
}
|
@ -7,12 +7,12 @@ import { SvgToDrawingConverter } from "../helpers/svg-to-drawing-converter";
|
||||
import { Draggable } from "../events/draggable";
|
||||
import { DrawingWidget } from "./drawing";
|
||||
import { MapDrawing } from "../models/map/map-drawing";
|
||||
import { MapSettingsManager } from "../managers/map-settings-manager";
|
||||
|
||||
|
||||
@Injectable()
|
||||
export class DrawingsWidget implements Widget {
|
||||
public draggable = new Draggable<SVGGElement, MapDrawing>();
|
||||
public draggingEnabled = false;
|
||||
|
||||
// public onContextMenu = new EventEmitter<NodeContextMenu>();
|
||||
// public onDrawingClicked = new EventEmitter<NodeClicked>();
|
||||
@ -22,6 +22,7 @@ export class DrawingsWidget implements Widget {
|
||||
constructor(
|
||||
private drawingWidget: DrawingWidget,
|
||||
private svgToDrawingConverter: SvgToDrawingConverter,
|
||||
private mapSettings: MapSettingsManager
|
||||
) {
|
||||
this.svgToDrawingConverter = new SvgToDrawingConverter();
|
||||
}
|
||||
@ -59,7 +60,7 @@ export class DrawingsWidget implements Widget {
|
||||
.exit()
|
||||
.remove();
|
||||
|
||||
if (this.draggingEnabled) {
|
||||
if (!this.mapSettings.isReadOnly) {
|
||||
this.draggable.call(merge);
|
||||
}
|
||||
}
|
||||
|
@ -9,6 +9,7 @@ import { MapLinkNode } from "../models/map/map-link-node";
|
||||
import { MapLabel } from "../models/map/map-label";
|
||||
import { FontFixer } from "../helpers/font-fixer";
|
||||
import { SelectionManager } from "../managers/selection-manager";
|
||||
import { MapSettingsManager } from "../managers/map-settings-manager";
|
||||
|
||||
|
||||
describe('InterfaceLabelsWidget', () => {
|
||||
@ -16,6 +17,7 @@ describe('InterfaceLabelsWidget', () => {
|
||||
let widget: InterfaceLabelWidget;
|
||||
let linksEnter: Selection<SVGGElement, MapLink, SVGGElement, any>;
|
||||
let links: MapLink[];
|
||||
let mapSettings: MapSettingsManager;
|
||||
|
||||
beforeEach(() => {
|
||||
svg = new TestSVGCanvas();
|
||||
@ -68,7 +70,8 @@ describe('InterfaceLabelsWidget', () => {
|
||||
.exit()
|
||||
.remove();
|
||||
|
||||
widget = new InterfaceLabelWidget(new CssFixer(), new FontFixer(), new SelectionManager());
|
||||
mapSettings = new MapSettingsManager();
|
||||
widget = new InterfaceLabelWidget(new CssFixer(), new FontFixer(), new SelectionManager(), mapSettings);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
@ -9,6 +9,7 @@ import { SelectionManager } from "../managers/selection-manager";
|
||||
import { MapLinkNode } from "../models/map/map-link-node";
|
||||
import { MapNode } from "../models/map/map-node";
|
||||
import { Draggable } from "../events/draggable";
|
||||
import { MapSettingsManager } from "../managers/map-settings-manager";
|
||||
|
||||
@Injectable()
|
||||
export class InterfaceLabelWidget {
|
||||
@ -20,7 +21,8 @@ export class InterfaceLabelWidget {
|
||||
constructor(
|
||||
private cssFixer: CssFixer,
|
||||
private fontFixer: FontFixer,
|
||||
private selectionManager: SelectionManager
|
||||
private selectionManager: SelectionManager,
|
||||
private mapSettings: MapSettingsManager
|
||||
) {
|
||||
}
|
||||
|
||||
@ -121,7 +123,8 @@ export class InterfaceLabelWidget {
|
||||
.exit()
|
||||
.remove();
|
||||
|
||||
if(!this.mapSettings.isReadOnly) {
|
||||
this.draggable.call(merge);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -9,6 +9,7 @@ import { MapNode } from "../models/map/map-node";
|
||||
import { SelectionManager } from "../managers/selection-manager";
|
||||
import { Draggable } from "../events/draggable";
|
||||
import { MapLabel } from "../models/map/map-label";
|
||||
import { MapSettingsManager } from "../managers/map-settings-manager";
|
||||
|
||||
|
||||
@Injectable()
|
||||
@ -20,7 +21,8 @@ export class LabelWidget implements Widget {
|
||||
constructor(
|
||||
private cssFixer: CssFixer,
|
||||
private fontFixer: FontFixer,
|
||||
private selectionManager: SelectionManager
|
||||
private selectionManager: SelectionManager,
|
||||
private mapSettings: MapSettingsManager,
|
||||
) {}
|
||||
|
||||
public redrawLabel(view: SVGSelection, label: MapLabel) {
|
||||
@ -47,8 +49,10 @@ export class LabelWidget implements Widget {
|
||||
.exit()
|
||||
.remove();
|
||||
|
||||
if(!this.mapSettings.isReadOnly) {
|
||||
this.draggable.call(label_view);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private drawLabel(view: SVGSelection) {
|
||||
|
@ -3,6 +3,7 @@ import { TestSVGCanvas } from "../testing";
|
||||
import { NodesWidget } from "./nodes";
|
||||
import { NodeWidget } from "./node";
|
||||
import { instance, mock } from "ts-mockito";
|
||||
import { MapSettingsManager } from "../managers/map-settings-manager";
|
||||
|
||||
|
||||
describe('NodesWidget', () => {
|
||||
@ -13,7 +14,7 @@ describe('NodesWidget', () => {
|
||||
beforeEach(() => {
|
||||
svg = new TestSVGCanvas();
|
||||
nodeWidget = instance(mock(NodeWidget));
|
||||
widget = new NodesWidget(nodeWidget);
|
||||
widget = new NodesWidget(nodeWidget, new MapSettingsManager());
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
@ -6,6 +6,7 @@ import { Layer } from "../models/layer";
|
||||
import { NodeWidget } from "./node";
|
||||
import { Draggable } from "../events/draggable";
|
||||
import { MapNode } from "../models/map/map-node";
|
||||
import { MapSettingsManager } from "../managers/map-settings-manager";
|
||||
|
||||
|
||||
@Injectable()
|
||||
@ -13,10 +14,10 @@ export class NodesWidget implements Widget {
|
||||
static NODE_LABEL_MARGIN = 3;
|
||||
|
||||
public draggable = new Draggable<SVGGElement, MapNode>();
|
||||
public draggingEnabled = false;
|
||||
|
||||
constructor(
|
||||
private nodeWidget: NodeWidget
|
||||
private nodeWidget: NodeWidget,
|
||||
private mapSettings: MapSettingsManager
|
||||
) {
|
||||
}
|
||||
|
||||
@ -49,7 +50,7 @@ export class NodesWidget implements Widget {
|
||||
.exit()
|
||||
.remove();
|
||||
|
||||
if (this.draggingEnabled) {
|
||||
if (!this.mapSettings.isReadOnly) {
|
||||
this.draggable.call(merge);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user