blob: d5248b02ce6858f30ea5f44ee6c8d2ddab0e9729 [file] [log] [blame]
Sean Condon0c577f62018-11-18 22:40:05 +00001/*
2 * Copyright 2018-present Open Networking Foundation
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
Sean Condon71910542019-02-16 18:16:42 +000016import {
17 Directive,
18 ElementRef,
19 EventEmitter,
20 Input,
21 OnChanges, Output
22} from '@angular/core';
Sean Condon1ae15802019-03-02 09:07:18 +000023import {ForceDirectedGraph, Node} from '../models';
Sean Condon0c577f62018-11-18 22:40:05 +000024import * as d3 from 'd3';
Sean Condon3dd062f2020-04-14 09:25:00 +010025import {LogService, MetaUi, ZoomUtils} from 'org_onosproject_onos/web/gui2-fw-lib/public_api';
Sean Condon71910542019-02-16 18:16:42 +000026import {BackgroundSvgComponent} from '../../backgroundsvg/backgroundsvg.component';
Sean Condon0c577f62018-11-18 22:40:05 +000027
28@Directive({
29 selector: '[onosDraggableNode]'
30})
31export class DraggableDirective implements OnChanges {
32 @Input() draggableNode: Node;
33 @Input() draggableInGraph: ForceDirectedGraph;
Sean Condon71910542019-02-16 18:16:42 +000034 @Output() newLocation = new EventEmitter<MetaUi>();
Sean Condon0c577f62018-11-18 22:40:05 +000035
36 constructor(
Sean Condon71910542019-02-16 18:16:42 +000037 private _element: ElementRef,
38 private log: LogService
Sean Condon0c577f62018-11-18 22:40:05 +000039 ) {
Sean Condon71910542019-02-16 18:16:42 +000040 this.log.debug('DraggableDirective constructed');
Sean Condon0c577f62018-11-18 22:40:05 +000041 }
42
43 ngOnChanges() {
44 this.applyDraggableBehaviour(
45 this._element.nativeElement,
46 this.draggableNode,
Sean Condon71910542019-02-16 18:16:42 +000047 this.draggableInGraph,
48 this.newLocation);
Sean Condon0c577f62018-11-18 22:40:05 +000049 }
50
51 /**
52 * A method to bind a draggable behaviour to an svg element
53 */
Sean Condon71910542019-02-16 18:16:42 +000054 applyDraggableBehaviour(element, node: Node, graph: ForceDirectedGraph, newLocation: EventEmitter<MetaUi>) {
Sean Condon0c577f62018-11-18 22:40:05 +000055 const d3element = d3.select(element);
56
57 function started() {
58 /** Preventing propagation of dragstart to parent elements */
59 d3.event.sourceEvent.stopPropagation();
60
61 if (!d3.event.active) {
62 graph.simulation.alphaTarget(0.3).restart();
63 }
64
Sean Condon71910542019-02-16 18:16:42 +000065 d3.event.on('drag', () => dragged()).on('end', () => ended());
Sean Condon0c577f62018-11-18 22:40:05 +000066
67 function dragged() {
68 node.fx = d3.event.x;
69 node.fy = d3.event.y;
70 }
71
72 function ended() {
73 if (!d3.event.active) {
74 graph.simulation.alphaTarget(0);
75 }
Sean Condon1ae15802019-03-02 09:07:18 +000076 newLocation.emit(ZoomUtils.convertXYtoGeo(node.fx, node.fy));
Sean Condon0c577f62018-11-18 22:40:05 +000077
Sean Condon71910542019-02-16 18:16:42 +000078 // node.fx = null;
79 // node.fy = null;
Sean Condon0c577f62018-11-18 22:40:05 +000080 }
81 }
82
83 d3element.call(d3.drag()
84 .on('start', started));
85 }
86}