skyquake/plugins/composer/src/src/libraries/graph/DescriptorGraphSelection.js

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 /**
  20  * Provide the visual treatment for selecting elements in the Canvas.
  21  *
  22  * Clicking on a Descriptor toggles selection.
  23  * Clicking on a Path toggles selection.
  24  * Clicking on the SVG container removes selection.
  25  * Only one thing can be selected at a time.
  26  *
  27  */
  28 import d3 from 'd3'
  29 import DescriptorModelFactory from './../model/DescriptorModelFactory'
  30 import ComposerAppActions from '../../actions/ComposerAppActions'
  31 import SelectionManager from '../SelectionManager'
  32 import CatalogItemsActions from '../../actions/CatalogItemsActions'
  33
  34 export default class DescriptorGraphSelection {
  35
  36         constructor(graph) {
  37                 this.graph = graph;
  38                 this.containers = [];
  39         }
  40
  41         addContainers(containers) {
  42                 this.containers = containers;
  43         }
  44
  45         render() {
  46
  47                 const comp = this;
  48
  49                 // prevent multiple bindings of the same listener
  50                 this.unbindListeners();
  51
  52                 // clicking on the background deselects all descriptors
  53                 comp.boundClickSVGHandler = function () {
  54                         // do not deselect if user is dragging: https://github.com/mbostock/d3/issues/1445
  55                         if (d3.event.defaultPrevented) return;
  56                         const target = SelectionManager.getClosestElementWithUID(d3.event.target);
  57                         if (target) {
  58                                 const data = d3.select(target).datum() || {};
  59                                 if (target && DescriptorModelFactory.isContainer(data)) {
  60                                         ComposerAppActions.selectModel(data);
  61                                         ComposerAppActions.outlineModel(data);
  62                                 } else {
  63                                         ComposerAppActions.clearSelection();
  64                                 }
  65                         } else {
  66                                 ComposerAppActions.clearSelection();
  67                         }
  68                 };
  69                 comp.graph.svg.on('click.selection', comp.boundClickSVGHandler);
  70
  71         }
  72
  73         unbindListeners() {
  74                 this.graph.svg.on('.selection', null);
  75         }
  76
  77         destroy() {
  78                 this.unbindListeners();
  79                 this.containers.length = 0;
  80                 this.graph = null;
  81         }
  82
  83 }