import*as Common from"../common/common.js";import*as i18n from"../i18n/i18n.js";import*as UI from"../ui/ui.js";import{LayerSelection}from"./LayerViewHost.js";const UIStrings={layersTreePane:"Layers Tree Pane",showPaintProfiler:"Show Paint Profiler",updateChildDimension:" ({PH1} \xd7 {PH2})"},str_=i18n.i18n.registerUIStrings("layer_viewer/LayerTreeOutline.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class LayerTreeOutline extends Common.ObjectWrapper.ObjectWrapper{constructor(e){super(),this._layerViewHost=e,this._layerViewHost.registerView(this),this._treeOutline=new UI.TreeOutline.TreeOutlineInShadow,this._treeOutline.element.classList.add("layer-tree","overflow-auto"),this._treeOutline.element.addEventListener("mousemove",this._onMouseMove.bind(this),!1),this._treeOutline.element.addEventListener("mouseout",this._onMouseMove.bind(this),!1),this._treeOutline.element.addEventListener("contextmenu",this._onContextMenu.bind(this),!0),UI.ARIAUtils.setAccessibleName(this._treeOutline.contentElement,i18nString(UIStrings.layersTreePane)),this._lastHoveredNode=null,this.element=this._treeOutline.element,this._layerViewHost.showInternalLayersSetting().addChangeListener(this._update,this)}focus(){this._treeOutline.focus()}selectObject(e){this.hoverObject(null);const t=e&&e.layer(),r=t&&layerToTreeElement.get(t);r?r.revealAndSelect(!0):this._treeOutline.selectedTreeElement&&this._treeOutline.selectedTreeElement.deselect()}hoverObject(e){const t=e&&e.layer(),r=t&&layerToTreeElement.get(t);r!==this._lastHoveredNode&&(this._lastHoveredNode&&this._lastHoveredNode.setHovered(!1),r&&r.setHovered(!0),this._lastHoveredNode=r)}setLayerTree(e){this._layerTree=e,this._update()}_update(){const e=this._layerViewHost.showInternalLayersSetting().get(),t=new Map;let r=null;this._layerTree&&(e||(r=this._layerTree.contentRoot()),r||(r=this._layerTree.root())),r&&this._layerTree&&this._layerTree.forEachLayer(function(n){if(!n.drawsContent()&&!e)return;t.get(n)&&console.assert(!1,"Duplicate layer: "+n.id()),t.set(n,!0);let s=layerToTreeElement.get(n)||null,i=n.parent();for(;i&&i!==r&&!i.drawsContent()&&!e;)i=i.parent();const o=n===r?this._treeOutline.rootElement():i&&layerToTreeElement.get(i);if(o)if(s){if(s.parent!==o){const e=this._treeOutline.selectedTreeElement;s.parent&&s.parent.removeChild(s),o.appendChild(s),e&&e!==this._treeOutline.selectedTreeElement&&e.select()}s._update()}else s=new LayerTreeElement(this,n),o.appendChild(s),n.drawsContent()||s.expand();else console.assert(!1,"Parent is not in the tree")}.bind(this),r);for(let n=this._treeOutline.rootElement().firstChild();n instanceof LayerTreeElement&&!n.root;)if(t.get(n._layer))n=n.traverseNextTreeElement(!1);else{const e=n.nextSibling||n.parent;n.parent&&n.parent.removeChild(n),n===this._lastHoveredNode&&(this._lastHoveredNode=null),n=e}if(!this._treeOutline.selectedTreeElement&&this._layerTree){const e=this._layerTree.contentRoot()||this._layerTree.root();if(e){const t=layerToTreeElement.get(e);t&&t.revealAndSelect(!0)}}}_onMouseMove(e){const t=this._treeOutline.treeElementFromEvent(e);t!==this._lastHoveredNode&&this._layerViewHost.hoverObject(this._selectionForNode(t))}_selectedNodeChanged(e){this._layerViewHost.selectObject(this._selectionForNode(e))}_onContextMenu(e){const t=this._selectionForNode(this._treeOutline.treeElementFromEvent(e)),r=new UI.ContextMenu.ContextMenu(e),n=t&&t.layer();n&&(this._layerSnapshotMap=this._layerViewHost.getLayerSnapshotMap(),this._layerSnapshotMap.has(n)&&r.defaultSection().appendItem(i18nString(UIStrings.showPaintProfiler),this.dispatchEventToListeners.bind(this,Events.PaintProfilerRequested,t),!1)),this._layerViewHost.showContextMenu(r,t)}_selectionForNode(e){return e&&e._layer?new LayerSelection(e._layer):null}}export var Events;!function(e){e.PaintProfilerRequested="PaintProfilerRequested"}(Events||(Events={}));export class LayerTreeElement extends UI.TreeOutline.TreeElement{constructor(e,t){super(),this._treeOutline=e,this._layer=t,layerToTreeElement.set(t,this),this._update()}_update(){const e=this._layer.nodeForSelfOrAncestor(),t=document.createDocumentFragment();UI.UIUtils.createTextChild(t,e?e.simpleSelector():"#"+this._layer.id());t.createChild("span","dimmed").textContent=i18nString(UIStrings.updateChildDimension,{PH1:this._layer.width(),PH2:this._layer.height()}),this.title=t}onselect(){return this._treeOutline._selectedNodeChanged(this),!1}setHovered(e){this.listItemElement.classList.toggle("hovered",e)}}export const layerToTreeElement=new WeakMap;