LayerTreeOutline.js 5.0 KB

1234567891011121314151617181920212223242526272829303132
  1. const _symbol=Symbol('layer');export class LayerTreeOutline extends Common.Object{constructor(layerViewHost){super();this._layerViewHost=layerViewHost;this._layerViewHost.registerView(this);this._treeOutline=new UI.TreeOutlineInShadow();this._treeOutline.element.classList.add('layer-tree','overflow-auto');this._treeOutline.element.addEventListener('mousemove',this._onMouseMove.bind(this),false);this._treeOutline.element.addEventListener('mouseout',this._onMouseMove.bind(this),false);this._treeOutline.element.addEventListener('contextmenu',this._onContextMenu.bind(this),true);UI.ARIAUtils.setAccessibleName(this._treeOutline.contentElement,ls`Layers Tree Pane`);this._lastHoveredNode=null;this.element=this._treeOutline.element;this._layerViewHost.showInternalLayersSetting().addChangeListener(this._update,this);}
  2. focus(){this._treeOutline.focus();}
  3. selectObject(selection){this.hoverObject(null);const layer=selection&&selection.layer();const node=layer&&layer[_symbol];if(node){node.revealAndSelect(true);}else if(this._treeOutline.selectedTreeElement){this._treeOutline.selectedTreeElement.deselect();}}
  4. hoverObject(selection){const layer=selection&&selection.layer();const node=layer&&layer[_symbol];if(node===this._lastHoveredNode){return;}
  5. if(this._lastHoveredNode){this._lastHoveredNode.setHovered(false);}
  6. if(node){node.setHovered(true);}
  7. this._lastHoveredNode=node;}
  8. setLayerTree(layerTree){this._layerTree=layerTree;this._update();}
  9. _update(){const showInternalLayers=this._layerViewHost.showInternalLayersSetting().get();const seenLayers=new Map();let root=null;if(this._layerTree){if(!showInternalLayers){root=this._layerTree.contentRoot();}
  10. if(!root){root=this._layerTree.root();}}
  11. function updateLayer(layer){if(!layer.drawsContent()&&!showInternalLayers){return;}
  12. if(seenLayers.get(layer)){console.assert(false,'Duplicate layer: '+layer.id());}
  13. seenLayers.set(layer,true);let node=layer[_symbol];let parentLayer=layer.parent();while(parentLayer&&parentLayer!==root&&!parentLayer.drawsContent()&&!showInternalLayers){parentLayer=parentLayer.parent();}
  14. const parent=layer===root?this._treeOutline.rootElement():parentLayer[_symbol];if(!parent){console.assert(false,'Parent is not in the tree');return;}
  15. if(!node){node=new LayerTreeElement(this,layer);parent.appendChild(node);if(!layer.drawsContent()){node.expand();}}else{if(node.parent!==parent){const oldSelection=this._treeOutline.selectedTreeElement;if(node.parent){node.parent.removeChild(node);}
  16. parent.appendChild(node);if(oldSelection!==this._treeOutline.selectedTreeElement){oldSelection.select();}}
  17. node._update();}}
  18. if(root){this._layerTree.forEachLayer(updateLayer.bind(this),root);}
  19. const rootElement=this._treeOutline.rootElement();for(let node=rootElement.firstChild();node&&!node.root;){if(seenLayers.get(node._layer)){node=node.traverseNextTreeElement(false);}else{const nextNode=node.nextSibling||node.parent;node.parent.removeChild(node);if(node===this._lastHoveredNode){this._lastHoveredNode=null;}
  20. node=nextNode;}}
  21. if(!this._treeOutline.selectedTreeElement){const elementToSelect=this._layerTree.contentRoot()||this._layerTree.root();if(elementToSelect){elementToSelect[_symbol].revealAndSelect(true);}}}
  22. _onMouseMove(event){const node=this._treeOutline.treeElementFromEvent(event);if(node===this._lastHoveredNode){return;}
  23. this._layerViewHost.hoverObject(this._selectionForNode(node));}
  24. _selectedNodeChanged(node){this._layerViewHost.selectObject(this._selectionForNode(node));}
  25. _onContextMenu(event){const selection=this._selectionForNode(this._treeOutline.treeElementFromEvent(event));const contextMenu=new UI.ContextMenu(event);const layer=selection&&selection.layer();if(layer){this._layerSnapshotMap=this._layerViewHost.getLayerSnapshotMap();if(this._layerSnapshotMap.has(layer)){contextMenu.defaultSection().appendItem(ls`Show Paint Profiler`,this.dispatchEventToListeners.bind(this,Events.PaintProfilerRequested,selection),false);}}
  26. this._layerViewHost.showContextMenu(contextMenu,selection);}
  27. _selectionForNode(node){return node&&node._layer?new LayerViewer.LayerView.LayerSelection(node._layer):null;}}
  28. export const Events={PaintProfilerRequested:Symbol('PaintProfilerRequested')};export class LayerTreeElement extends UI.TreeElement{constructor(tree,layer){super();this._treeOutline=tree;this._layer=layer;this._layer[_symbol]=this;this._update();}
  29. _update(){const node=this._layer.nodeForSelfOrAncestor();const title=createDocumentFragment();title.createTextChild(node?node.simpleSelector():'#'+this._layer.id());const details=title.createChild('span','dimmed');details.textContent=Common.UIString(' (%d × %d)',this._layer.width(),this._layer.height());this.title=title;}
  30. onselect(){this._treeOutline._selectedNodeChanged(this);return false;}
  31. setHovered(hovered){this.listItemElement.classList.toggle('hovered',hovered);}}
  32. self.LayerViewer=self.LayerViewer||{};LayerViewer=LayerViewer||{};LayerViewer.LayerTreeOutline=LayerTreeOutline;LayerViewer.LayerTreeOutline.Events=Events;LayerViewer.LayerTreeElement=LayerTreeElement;LayerViewer.LayerTreeElement._symbol=_symbol;