VisualEditor.js

/**
 * Manages logic related to item selection.
 */
class VisualEditorSelection
{
    /**
     * This contains the actual selected items.
     */
	selection = [];
    /**
     * Creates a new selection object.
     */
	construct()
	{
		this.selection = [];
	}
    /**
     * Adds items to the selection.
     * @param {Array} items - items to be added 
     * @param {boolean} fireEvent - fires the SelectionChange event in the editor. 
     */
	add(items, fireEvent = true)
	{
        // first, remove the items to be added in case any are already in the selection
        // explicitly do not fire the event
		this.remove(items, false);
        // add the items to the array
		this.selection.push(...items);
        // fire the event if requested
		if(fireEvent)
			VisualEditor.triggerSelectionChange();
    }
    /**
     * Removes items from the selection.
     * @param {Array} items - Items to be removed.
     * @param {boolean} fireEvent - fires the SelectionChange event in the editor.
     */
	remove(items, fireEvent = true)
	{
        // exclude items to be removed from the selection and set the new selection
		this.selection = this.selection.filter(item=>!items.includes(item));
        // fire the event if requested
		if(fireEvent)
			VisualEditor.triggerSelectionChange();
    }
    /**
     * Empties the selection.
     * @param {boolean} fireEvent - fires the SelectionChange event in the editor.
     */
	clear(fireEvent = true)
	{
		this.selection = [];
        // fire the event if requested.
		if(fireEvent)
			VisualEditor.triggerSelectionChange();
	}
    /**
     * Replaces the selection with the given items.
     * @param {Array} items - Items for the selection to contain.
     * @param {boolean} fireEvent - fires the SelectionChange event in the editor.
     */
	set(items, fireEvent = true)
	{
        // empty out the selection
		this.clear(false);
        // add the new items
		this.add(items, false);
        // fire the event if requested.
		if(fireEvent)
			VisualEditor.triggerSelectionChange();
    }
}

class VisualEditor
{
    /**
     * Main edit modes.
     */
	static EDIT_MODES = {POINTER: 0, WIRE: 1, LINK: 2, CODE: 3, INVENTORY: 4};
    /**
     * Submodes applicable to main edit modes.
     */
	static SUB_MODES = {NONE: 0, 
		WIRE_MOVE: 1, WIRE_ADD: 2, WIRE_REMOVE: 3, WIRE_SELECTED: 4, WIRE_LINE_SELECT: 5,
		LINK_END: 6
	};
	static #offsetX=0;
	static #offsetY=0;
	/**
	Virtual canvas X offset.
	 */
	static get offsetX()
	{
		return this.#offsetX;
	}
	/**
	Virtual canvas X offset, forced to integers.
	 */
	static set offsetX(value)
	{
		this.#offsetX=Math.round(value);
	}
	/**
	Virtual canvas Y offset.
	 */
	static get offsetY()
	{
		return this.#offsetY;
	}
	/**
	Virtual canvas Y offset, forced to integers.
	 */
	static set offsetY(value)
	{
		this.#offsetY=Math.round(value);
	}
	static draggingView = false;
	static dragX=0;
	static dragY=0;
	static zoom = 1;
	/**
     * Default separator for full item references.
     */
	static ITEM_REF_SEPARATOR = "$";
    /**
     * Current edit mode.
     */
	static editMode = this.EDIT_MODES.POINTER;
    /**
     * Current submode.
     */
	static subMode = this.SUB_MODES.NONE;
	
	/**
     * Indicates whether the Ctrl key is currently down.
     */
	static ctrl = false;
	/**
     * Indicates whether the Shift key is currently down.
     */
	static shift = false;
    /**
     * Indicates whether the mouse button is currently down.
     */
	static mouseDownNow = false;
	static mouseDownPrev = false;
    /**
     * Keeps track of the item currently selected out of multiple
     * under the mouse.
     */
	static currentDepth = 0;
    /**
     * Keeps track of currently selected objects in the editor.
     */
	static currentSelection = new VisualEditorSelection();
    /**
     * Keeps track of currently highlighted (for example, by hovering) objects in the editor.
     */
	static #highligthed = [];
	static get currentHightlight()
	{
		return this.#highligthed;
	}
	static set currentHightlight(value)
	{
		this.#highligthed=value;
		this.highlightLayer.canvas.title="";
		if(value.length!=0)
		{
			this.highlightLayer.canvas.title=value.length>1?"Multiple items":value[0].getLabel();
		}
	}

	/*
		HW editor stuff
	*/
	static hwDisplay = null;
	static hwBox = null;
	static hwFrameList = null;
	static hwBankList = null;
	static hwConnectorList = null;
	static hwCurrentItem = null;
	static hwCurrentHighLight = null;
	static hwElements = null;
	static hwElementProps = null;

    /**
     * If exactly one item is selected, contains the item.
     */
	static currentSingleItem = null;
    /**
     * If exactly one item is selected, contains the item's type.
     */
	static currentSingleType = "";
    /**
     * Contains an object currently being moved by the mouse.
     */
	static currentMoving = null;
    /**
     * X offset of the moved item, used to align the item to the mouse.
     */
	static currentMovingX = 0;
    /**
     * Y offset of the moved item, used to align the item to the mouse.
     */
	static currentMovingY = 0;
	
    /**
     * An object containing all "fixed" hardware, starting with Locations.
     */
	static fixedMap = null;
    /**
     * An object containing all "movable" hardware, starting with Lines.
     */
	static lineMap = null;
    /**
     * An object containing all hardware components available for use.
     */
	static inventory = null;
    /**
     * A canvas used for rendering the items in the visual view.
     */
	static mapLayer = null;
    /**
     * A canvas used for rendering highlight and selection outlines in the visual view.
     */
	static highlightLayer = null;
    /**
     * A HTML element where the tree view will be displayed and updated.
     */
    static treeViewContainer = null;
    /**
     * A HTML element where item property sheets will be displayed.
     */
	static propSheetContainer = null;
    /**
     * A HTML element containing the visual view.
     */
    static mouseArea = null;
    /**
     * A HTML element containing the toolbar buttons.
     */
    static toolBar = null;
	static templates={};
	static dialogs={};
	/**
	 * Contains the data: URL for the frame pre-render.
	 */
	static framePreRenderSrc ="";

	static frameTypeRegistry = {};

	static screenToCanvas(x,y)
	{
		return [(x-this.offsetX)/this.zoom,(y-this.offsetY)/this.zoom];
	}
	/**
	 * Checks if any registered component hitboxes intersect a given coordinate.
	 * @param {number} x - X coordinate
	 * @param {number} y - Y coordinate
	 * @param {boolean} onlyTopLevel - if true, only results with the highest selection priority will be returned
	 * @returns a list of components intersecting the coordinate.
	 */
	static getMouseHits(x, y, onlyTopLevel = false)
	{
		//[x,y] = this.screenToCanvas(x,y);
		//console.log(x,y);
		let results = VisualItem.hitboxMapping.filter(box=>{return box.hitbox.contains(x, y)});
		results = results.filter(box=>box.item.testHit(x, y) && !box.item.collapseView);
		results.sort((a, b)=>b.level-a.level);
		if(results && onlyTopLevel)
		{
			results = results.filter(box=>box.level == results[0].level);	
		}
		let hits = [];
		results.forEach(box=>hits.push(box.item));
		return hits;
	}
    /**
     * Fetches all individual entries in the tree view pane.
     * @returns {Array} - an array (possibly empty) of all items in the tree view pane.
     */
    static getTreeItems()
    {
        return this.treeViewContainer ? this.treeViewContainer.querySelectorAll("span.tree_item_name") : [];
    }
	/**
	 * Loads hardware inventory (frame templates, connectors etc)
	 * @param {*} inventory 
	 */
	static loadInventory(inventory)
	{
		VisualEditor.inventory = inventory;
		// console.log(VisualEditor.inventory.subItems);
		let frames = VisualEditor.inventory.subItems.filter(vi=>vi.type=="frame_tpl");
		//console.log(frames);
		// render all frame types into an image for dialog boxes
		// #TODO use these prerenders in the interface
		let framerenders = document.createElement("canvas");
		framerenders.width = DIM_FRAME_WIDTH;
		framerenders.height=DIM_FRAME_HEIGHT * (frames.length)
		framerenders.id="framelist";
		let ctx1 = framerenders.getContext("2d");
		for(let i=0;i<frames.length;i++)
		{
			let f = new VisualFrame(inventory, " ");
			f.label =" ";
			f.frametype=frames[i].name;
			f.commit(VisualEditor);
			//f.updateSize();
			f.cY=DIM_FRAME_HEIGHT *i-2;
			f.cX=(-1 * DIM_FRAME_SIDES);
			f.subItems.forEach((sub)=>{sub.updatePosition()});
			f.drawTop(ctx1);
			//console.log(f);
			VisualEditor.frameTypeRegistry[frames[i].name] = {"index": i, "desc": frames[i].label};
		}
		VisualEditor.framePreRenderSrc = framerenders.toDataURL("png");
		
		//VisualEditor.dialogs.addFrame.querySelector("#framelist").replaceWith(framerenders);
	}

	static initInventoryEditor()
	{
		VisualEditor.inventory.subItems.forEach((component)=>{
			let list;
			let number=0;
			switch(component.type)
			{
				case "frame_tpl":
				{
					list=VisualEditor.hwFrameList;
					number = VisualEditor.inventory.frameUsages[component.name] ?? 0;
					break;
				}
				case "socket_tpl":
				{
					number = VisualEditor.inventory.conUsagesInventory[component.name] ?? 0;
					list = VisualEditor.hwConnectorList;
					break;
				}
				case "socket_bank":
				{
					number = VisualEditor.inventory.bankUsagesInventory[component.name] ?? 0;
					list = VisualEditor.hwBankList;
					break;
				}
			}
			if(list)
			{
				let li=document.createElement("li");
				let bbbb = document.createElement("strong");
				bbbb.style.display="inline-block";
				bbbb.style.width="2rem";
				bbbb.style.paddingRight="1rem";
				bbbb.append(number);
				li.appendChild(bbbb);
				li.append(component.name);
				li.dataset.itemref=component.getFullName();
				li.addEventListener("click",(e)=>{
					VisualEditor.hwCurrentHighLight=null;
					VisualEditor.updateHwCurrent(component.createClonedView(component.parent));
					// console.log(VisualEditor.hwCurrentItem);
				})
				list.appendChild(li);
			}
			else
			{
				console.log(component);
			}
		});
	}
	static redrawHwDisplay()
	{
		let component = VisualEditor.hwCurrentItem;
		VisualEditor.hwDisplay.resetTransform();
		VisualEditor.hwDisplay.scale(2,2);
		VisualEditor.hwDisplay.clearRect(0,0,640,72);
		VisualEditor.hwDisplay.translate(5,0);
		component.counter=0;
		component.draw(VisualEditor.hwDisplay);
		if(VisualEditor.hwCurrentHighLight)
		{
			VisualEditor.hwDisplay.strokeStyle="#FF0000";
			// VisualEditor.hwD
			let x=VisualEditor.hwCurrentHighLight.x;
			let y=VisualEditor.hwCurrentHighLight.y;
			let w=VisualEditor.hwCurrentHighLight.width;
			let h=VisualEditor.hwCurrentHighLight.height;
			
			VisualEditor.hwDisplay.strokeRect(x,y,w,h);
		}
		VisualEditor.hwDisplay.translate(-5,0);
		VisualEditor.hwDisplay.lineWidth=1;
		VisualEditor.hwDisplay.strokeStyle="#000000";
		VisualEditor.hwDisplay.strokeRect(1,1,318,34);
	}
	static updateHwCurrent(component)
	{
		VisualEditor.hwCurrentItem = component;
		this.redrawHwDisplay();
		// console.log(component);
		VisualEditor.hwElements.innerText="";
		component.subItems.forEach((e)=>{
			VisualEditor.hwElements.appendChild(VisualEditor.hwElementLine(e));
		});
		if(component.subItems.length==0 && component.type!="socket_tpl")
		{
			let b = document.createElement("button");
			b.append("Add component");
			b.addEventListener("click",VisualEditor.hwMakeInsert(component,0));
			VisualEditor.hwElements.appendChild(b);
		}
			let props=VisualEditor.hwElementProps;
			props.innerText="";
		if(component.renderer)
		{
			let txtbox=document.createElement("textarea");
			txtbox.style.width="100%";
			txtbox.style.height="90%";
			txtbox.value=component.renderer.toCode(0);
			props.appendChild(txtbox);
			let c_butt=document.createElement("button");
			c_butt.style.width="100%";
			c_butt.style.height="5%";
			c_butt.append("Compile");
			c_butt.addEventListener("click",(ev)=>{
				// hijack the inventory parser
				// preload it with a dummy root object
				let pp = new VisualParser(txtbox.value,invparser,new VisualTEMPLATE(null,"null"));
		        pp.init();
				// put a nice fresh renderer as the root object
				pp.objectStack=[new VisualRenderer(pp.rootObject,"renderer")];
				pp.go();
				// should be in here
				// #TODO: deal with any parsing issues at some point
				component.renderer=pp.rootObject.subItems[0];
				VisualEditor.updateHwCurrent(component);
			});
			props.appendChild(c_butt);
		}
	}

static buildHwPortOptionsEditor(item)
{
	let tpl;
	let value;
	if(item.tpl!=undefined)
	{
		tpl =VisualEditor.templates['hwElTpl'].content.cloneNode(true);
		value = item.tpl;
	}
	else
	{
		value = item.counter;
		tpl =VisualEditor.templates['hwElCtr'].content.cloneNode(true);
	}
	let input=tpl.querySelector("#hw_value");
	input.value=value;
	input.addEventListener("input",(event)=>{
		if(item.tpl!=undefined)
		{
			item.tpl=input.value;
		}
		else
		{
			item.counter=input.value;
		}
		VisualEditor.redrawHwDisplay();
	});
	return tpl.firstElementChild;
}

	static buildHwElementEditor(item)
	{
		
		let tpl = VisualEditor.templates['hwElProps'].content.cloneNode(true);
		let optlist = tpl.querySelector("#hwelement_id");
		let others = VisualEditor.inventory.allOfType(item.type=="bank"?"socket_bank":"socket_tpl");
		others.forEach((e)=>{
			let opt = document.createElement("option");
			opt.append(e.name);
			if(e.name==item.ref)
			{
				opt.selected=true;
			}
			optlist.appendChild(opt);
		});
		let inX=tpl.querySelector("#hw_x");
		let inY=tpl.querySelector("#hw_y");
		inX.value=item.x;
		inY.value=item.y;
		inX.addEventListener("input",(event)=>{
			item.x=Number(inX.value);
			item.y=Number(inY.value);
			VisualEditor.redrawHwDisplay();
		});
		inY.addEventListener("input",(event)=>{
			item.x=Number(inX.value);
			item.y=Number(inY.value);
			VisualEditor.redrawHwDisplay();
		});
		optlist.addEventListener("change",(event)=>{
			item.ref=optlist.value;
			item.updateSize();
			VisualEditor.redrawHwDisplay();
		});
		return tpl.firstElementChild;
	}

	static hwHighlightItem(item)
	{
		VisualEditor.hwCurrentHighLight=item;
		VisualEditor.hwElements.childNodes.forEach((c)=>{
			if(c.dataset.element==item.name)
			{
				c.dataset.selected="yes";
			}
			else
			{
				c.dataset.selected="no";
			}
		});
		VisualEditor.redrawHwDisplay();
	}

	static hwElementLine(item)
	{
		let li;
		if(item.type!="port_options")
		{
			li=VisualEditor.buildHwElementEditor(item);
			li.addEventListener("click",(e)=>{
				VisualEditor.hwHighlightItem(item);
				// console.log(item);
				
			});
			
		}
		else
		{
			
			li=VisualEditor.buildHwPortOptionsEditor(item);
		}
		VisualEditor.hwDoLineButtons(li,item);
		li.dataset.element=item.name;
		return li;
	}

	static hwMakeInsert(target_item, index)
	{
		return (ev)=>{
			let dlg = VisualEditor.dialogs.addHwElement;
			dlg.querySelector("#hw_element_counter_value").value=1;
			dlg.querySelector("#hw_element_template_value").value="";
			let optlist = dlg.querySelector("#hw_element_listbox");
			optlist.innerText="";
			let types=['socket_tpl'];
			if(target_item.type=="frame_tpl")
			{
				types.push("socket_bank");
			}
			let others = VisualEditor.inventory.allOfTypes(types);
			others.forEach((e)=>{
				let opt = document.createElement("option");
				opt.append(e.name);
				optlist.appendChild(opt);
			});
			dlg.addEventListener("close",(event)=>{
				if(dlg.returnValue!="")
				{
					let selectedItem=VisualEditor.inventory.find(dlg.returnValue);
					let newItem;
					let type=dlg.querySelector("input[name=hw_new_element_type]:checked").value;
					switch(type)
					{
						case "component":
						{
							if(selectedItem.type=="socket_tpl")
							{
								newItem = new VisualConnectorPlacement(target_item,"c_"+target_item.getNextPrefixedSlot("c_"));
							}
							if(selectedItem.type=="socket_bank")
							{
								
								newItem = new VisualBankPlacement(target_item,"c_"+target_item.getNextPrefixedSlot("c_"));
							}
							newItem.ref=dlg.returnValue;
							break;
						}
						case "counter":
						{
							let ctr=dlg.querySelector("#hw_element_counter_value").value;
							newItem= new VisualPortOptions(target_item,"c_"+target_item.getNextPrefixedSlot("c_"));
							newItem.counter=Number(ctr);
							break;
						}
						case "template":
						{
							let tpl=dlg.querySelector("#hw_element_template_value").value;
							tpl=tpl.trim();
							if(tpl=="")
								return;
							newItem= new VisualPortOptions(target_item,"c_"+target_item.getNextPrefixedSlot("c_"));
							newItem.tpl=tpl;
							break;
						}
					}
					target_item.insertAt(index,newItem);
					target_item.updateSize();
					VisualEditor.updateHwCurrent(target_item);
					console.log(target_item);
				}
			},{once:true});
			dlg.showModal();
		};
	}
	static hwDoLineButtons(row,item)
	{
		let up=row.querySelector("#hw_moveup");
		let dn=row.querySelector("#hw_movedn");
		let iup=row.querySelector("#hw_insup");
		let idn=row.querySelector("#hw_insdn");
		let rm=row.querySelector("#hw_remove");
		let index = item.parent.indexOf(item);
		let pp=item.parent;
		if(index==0)
		{
			up.parentElement.removeChild(up);
		}
		else
		{
			up.addEventListener("click",(e)=>{
				pp.removeItem(item);
				pp.insertAt(index-1, item);
				VisualEditor.updateHwCurrent(pp);
			});
		}
		if(index==pp.subItems.length-1)
		{
			dn.parentElement.removeChild(dn);
		}
		else
		{
			dn.addEventListener("click",(e)=>{
				pp.removeItem(item);
				pp.insertAt(index+1, item);
				VisualEditor.updateHwCurrent(pp);
			});
		}
		iup.addEventListener("click",VisualEditor.hwMakeInsert(pp,index+1));
		idn.addEventListener("click",VisualEditor.hwMakeInsert(pp,index));
		rm.addEventListener("click",(ev)=>{
			pp.removeItem(item);
			VisualEditor.hwCurrentHighLight=null;
			VisualEditor.updateHwCurrent(pp);
			// this is needed to prevent the click event on the row with the item firing
			// and highlighting the nonexistent item
			ev.stopPropagation();
		});
	}

	static generateFramePreviewSprite(index, tagname="div")
	{
		let el = document.createElement(tagname);
		el.style.backgroundImage="url(" + VisualEditor.framePreRenderSrc + ")";
		el.style.width = DIM_FRAME_WIDTH+"px";
		el.style.height= DIM_FRAME_HEIGHT+"px";
		el.style.position="relative";
		el.style.backgroundPositionX=0;
		el.style.backgroundPositionY= index * -1 * DIM_FRAME_HEIGHT+"px";
		return el;
	}

    /**
     * Refreshes the highlight and selection outlines in both the visual view and the tree view.
     */
	static redrawSelection()
	{
        // draw on the layer used for selections
		const ctx = VisualEditor.highlightLayer;
		ctx.resetTransform();
		ctx.clearRect(0,0,5000,5000);
		ctx.translate(VisualEditor.offsetX,VisualEditor.offsetY);
		ctx.scale(VisualEditor.zoom,VisualEditor.zoom);
        // line styles for highlights
		let selectionOutline = {
			strokeStyle : "rgb(255 0 0 / 80%)",
			lineWidth: 5
		};
		let highlighter1 = {
			strokeStyle : "red",
			lineWidth: 3
		};
		let highlighter2 = {
			strokeStyle :"rgb(255 0 0 / 30%)",
			lineWidth: 3
		};
        // process selection
        let itemIDs = [];
		if(VisualEditor.currentSelection)
		{
			VisualEditor.currentSelection.selection.forEach((box)=>{
                // render the item on this layer to make it more visible
                box.drawTop(ctx);
                // render this item's defined highlight (outline of item and possibly related items)
                box.drawHighlight(ctx, selectionOutline);
                // collect the item's full name to update the tree view
                itemIDs.push(box.getFullName(VisualEditor.ITEM_REF_SEPARATOR));
            });
            // update the tree view with the collected items
            VisualEditor.getTreeItems().forEach((item)=>{
                // get a given entry's item reference
                let objid = item.dataset.itemref;
                // mark as selected if found,
                if(itemIDs.find(id=>id==objid))
                {
                    item.classList.add("selected");
                }
                // remove marking otherwise
                else
                {
                    item.classList.remove("selected");
                }
            });
		}
        // process highlights
        itemIDs = [];
		if(VisualEditor.currentHightlight)
		{
			VisualEditor.currentHightlight.forEach((box)=>{
                // render this item's defined highlight (outline of item and possibly related items)
                box.drawHighlight(ctx, highlighter1);
                // collect the item's full name to update the tree view
                itemIDs.push(box.getFullName(VisualEditor.ITEM_REF_SEPARATOR));
            });
            // update the tree view with the collected items
            VisualEditor.getTreeItems().forEach((item)=>{
                // get a given entry's item reference
                let objid = item.dataset.itemref;
                // mark as highlighted if found,
                if(itemIDs.find(id=>id==objid))
                {
                    item.classList.add("highlighted");
                }
                // remove marking otherwise
                else
                {
                    item.classList.remove("highlighted");
                }
            });
		}
	}
    /**
     * Performs a full redraw of all items on the visual view.
     */
	static redrawItems()
	{
        // use the object/item layer
		const ctx = VisualEditor.mapLayer;
		ctx.resetTransform();
		ctx.clearRect(0,0,5000,5000);
		ctx.translate(VisualEditor.offsetX,VisualEditor.offsetY);
		ctx.scale(VisualEditor.zoom,VisualEditor.zoom);
		VisualEditor.drawCallCount=0;
        // draw the "fixed" items (locations, racks etc)
		VisualEditor.fixedMap.draw(ctx);
		//console.log("Equipment draw calls: " + VisualEditor.drawCallCount);
		VisualEditor.drawCallCount=0;
        // draw the "movable" items (cabling)
		VisualEditor.lineMap.draw(ctx);
		//console.log("Linemap draw calls: " + VisualEditor.drawCallCount);
		VisualEditor.drawCallCount=0;
        // draw collapsed items
		VisualEditor.fixedMap.drawCollapsed(ctx);
		//console.log("Collapsed draw calls: " + VisualEditor.drawCallCount);
		VisualEditor.drawCallCount=0;
	}
    /**
     * Performs a complete refresh of all displays and item properties.
     */
	static refreshView()
	{
		
		VisualEditor.redrawItems();
		VisualItem.hitboxMapping = [];
		VisualEditor.lineMap.updateSize();
		VisualEditor.lineMap.updatePosition();
		VisualEditor.lineMap.updateHitboxMapping();
		VisualEditor.fixedMap.updateSize();
		VisualEditor.fixedMap.updatePosition();
		VisualEditor.fixedMap.updateHitboxMapping();
		
		VisualEditor.redrawSelection()
	}
    /**
     * Sets the current selection to a specific @type {VisualLine}.
     * @param {string} name - name of the line to be selected. Silently fails if line not found. 
     */
	static selectLine(name)
	{
		const line = VisualEditor.lineMap.find(name);
        // if the line is found, select it
		if(line)
		{
			VisualEditor.currentSelection.set([line]);
			VisualEditor.redrawSelection();
		}
        // else complain, but very quietly
        else
        {
            console.log("Line <%s> was not found when trying to select it.", name);
        }
	}
    /**
     * Performs any tasks relevant to a selection change, and fires the event.
     */
	static triggerSelectionChange()
	{
		// for contextual actions requiring a specific item type to be selected
		if(VisualEditor.currentSelection.selection.length> 0)
		{
			//console.log("non-empty selection made");
            // if exactly one item is selected, set the currentSingle* properties
			if(VisualEditor.currentSelection.selection.length === 1)
			{
				VisualEditor.currentSingleItem = VisualEditor.currentSelection.selection[0];
				VisualEditor.currentSingleType = VisualEditor.currentSingleItem.type;
				//console.log("exactly one item of type <" + VisualEditor.currentSingleType + "> picked");
				this.updateContextTools();
			}
            // otherwise, clear the currentSingle* properties
			else
			{	
			    VisualEditor.currentSingleItem = null;
			    VisualEditor.currentSingleType = "";
			}
		}
        // also clear the currentSingle* properties
		else
		{
			//console.log("selection is empty now");
			VisualEditor.currentSingleItem = null;
			VisualEditor.currentSingleType = "";
		}
        // run the user-replaceable function (#TODO: proper event handling? does JS do that?)
		this.selectionChange();
	}

	static updateContextTools()
	{
		VisualEditor.toolBar.querySelector("#add_line").disabled = VisualEditor.currentSingleType != "socket";
		VisualEditor.toolBar.querySelector("#add_frame").disabled = VisualEditor.currentSingleType != "rack";
			
	}

    /**
     * This is fired if the SelectionChange event is triggered - replace with event handler.
     */
	static selectionChange = function()
	{
		
	};


    /**
     * Builds a property sheet for a given item, and inserts it into the sheet container.
     * @param {VisualItem} target_object - the subject of the property sheet.
     */
	static buildPropSheet(target_object, rebuild = false)
	{
        // load the template
		let tpl = VisualEditor.templates['propSheet'].content.cloneNode(true);
        // this reference will be stuck into every single HTML element downstream, for convenience
		let itemref = target_object.getFullName();
		tpl.firstElementChild.dataset.itemref=itemref;
        // the item badge styles itself as needed with CSS
		let item_badge = tpl.querySelector(".item_badge");
		item_badge.dataset.itemref = itemref;
		item_badge.dataset.itemtype = target_object.type;
        // the item title is actually an <input>, mimicking as regular text
        // this allows for fancy editing on click effect
		let item_label = tpl.querySelector(".item_title");
		item_label.dataset.itemref = itemref;
		item_label.dataset.itemtype = target_object.type;
        // while "inactive", displays either the label or the default name
		item_label.value = target_object.getLabel();
        // set this to the name to show the default if the text field is erased fully
        item_label.placeholder  = target_object.name;
        // when the title is selected, clicked, tabbed to etc, triggering editing
        item_label.addEventListener("focus",(e)=>
        {
            // swap out the value for the actual label, pre-fill with default if empty
            item_label.value = target_object.label == "" ? target_object.getLabel() : target_object.label;
            // activate editing - the CSS ensures the control is clearly a textbox in this state
            item_label.readOnly = false;
        });
        // extra QoL - pressing Enter also saves the value
        item_label.addEventListener("keydown",(e)=>
        {
            if(e.code == "Enter")
            {
                item_label.blur();
            }
        });
        // when done editing, navigate away from the textbox or hit Enter 
        item_label.addEventListener("blur",(e)=>
        {
            // ensure a clean value without stray spaces gets entered
            target_object.label = item_label.value.trim();
            // "mask" the input as a regular text label again
            item_label.readOnly = true;
            // reset the displayed text to the proper labeling as defined by the item
            item_label.value = target_object.getLabel();
            // notify the editor that an item was changed
            VisualEditor.reportUpdate(target_object);
            // refresh everything (#TODO: is this really needed for one tiny label?)
            VisualEditor.refreshView();
        });
        // get the reference to the container for any item type specific controls
		let sheet = tpl.querySelector(".item_properties");
		sheet.dataset.itemref = itemref;
		let btn_rename = tpl.querySelector("#id_button");
		tpl.querySelector("#item_id").innerText=target_object.name;
		btn_rename.addEventListener("click",(e)=>{
			VisualEditor.cancellablePrompt((value)=>{
				return !target_object.parent?.checkName(value) || value===target_object.name;
			},(value)=>{
				VisualEditor.reportRename(target_object,value);
				VisualEditor.refreshView();
			},(value)=>{
				return "Bad value <"+value+">";
			},"Enter new ID value");
		});
		// fetch the item's property sheet and display
		target_object.getPropSheet().forEach((el)=>sheet.appendChild(el));

		// now shove all this stuff into the container
		if(rebuild)
		{
			VisualEditor.propSheetContainer.querySelectorAll(".infoblock").forEach((b)=>{
				if(b.dataset.itemref == itemref)
				{
					b.replaceWith(tpl.firstElementChild);
				}
			});
		}
        else
        {
            VisualEditor.propSheetContainer.appendChild(tpl.firstElementChild);
        }
	}
	static addContextButtons()
	{
		
        VisualEditor.checkIfCanCreateGroup();
        VisualEditor.checkIfCanAddToGroup();
        VisualEditor.checkForCableCreateButton();
	}
	static checkForCableCreateButton()
	{
		const sel = VisualEditor.currentSelection.selection;
		//console.warn(sel);
		// require exactly 2 items
		if(sel.length!=2)
			return;
		//console.log("2 items");
		// require both to be frames
		if(sel[0].type!="frame" || sel[1].type!="frame")
			return;
		//console.log("2 frames");
		if(VisualEditor.fixedMap.cablesBetween(sel[0],sel[1]).length>0)
		{
			//console.warn("connected frames");
			// #TODO some stuff for existing cable
			return;
		}
		// require no prior cables attached
		if(sel[0].getCables().length>0 || sel[1].getCables().length>0)
			return;
		//console.warn("frames have no cables");
		let sheet =  VisualEditor.propSheetContainer;
		let addbutton = document.createElement("button");
		addbutton.addEventListener("click",(e)=>{
			VisualEditor.promptName((e)=>{
				let cname = VisualEditor.dialogs.newItem.returnValue;
				if(!cname)
					return;
				let c = new VisualCable(VisualEditor.fixedMap,cname);
				c.from=sel[0];
				c.to=sel[1];
				c.commit();
				VisualEditor.fixedMap.addItem(c);
				VisualEditor.fixedMap.updatePosition();
				VisualEditor.refreshView();
			},"Cable name","OK");
		});
		addbutton.append("Create cable");
		sheet.appendChild(addbutton);
	}
	static checkIfCanCreateGroup()
	{
		const sel = VisualEditor.currentSelection.selection;
		if(sel.length==0)
			return;
		for(let i=0;i<sel.length;i++)
		{
			if(sel[i].type!="patch")
				return false;
			if(sel[i].parent.name!="looseLinks")
				return false;
		}
		let sheet =  VisualEditor.propSheetContainer;
		let addbutton = document.createElement("button");
						addbutton.append("Create group");
						addbutton.addEventListener("click",(e)=>{
							let nn = VisualEditor.lineMap.getNextPrefixedSlot("g_");
							let line = new VisualLine(VisualEditor.lineMap, "g_"+nn);
							line.doContinuity=false;
							line.label="Group "+nn;
							line.subtype="linkgroup";
							for(let i=0;i<sel.length;i++)
							{
								sel[i].name=line.getNextSlot();
								sel[i].parent=line;
								VisualEditor.lineMap.looseLinks.removeItem(sel[i]);
								line.addItem(sel[i]);
							}
							VisualEditor.lineMap.addItem(line);
							VisualEditor.currentSelection.set([line]);
							VisualEditor.reportUpdate(VisualEditor.lineMap);
							VisualEditor.redrawSelection();
						});
						sheet.appendChild(addbutton);
		return true;
	}
	static checkIfCanAddToGroup()
	{
		const sel = VisualEditor.currentSelection.selection;
		let g0=null;
		let adds = 0;
		for(let i=0;i<sel.length;i++)
		{
			if(sel[i].type!="patch")
				return false;
			if(sel[i].parent.name=="looseLinks")
			{
				adds++;
				continue;
			}
			if(sel[i].parent.doContinuity)
				return false;
			if(!g0)
				g0=sel[i].parent;
			if(g0!=sel[i].parent)
				return false;
		}
		if(!g0)
			return false;
		if(adds==0)
			return false;
		let sheet =  VisualEditor.propSheetContainer;
		let addbutton = document.createElement("button");
						addbutton.append("Add to "+g0.getLabel());
						addbutton.addEventListener("click",(e)=>{
							sel.forEach((l)=>{
								if(l.parent == g0)
									return;
								l.name=g0.getNextSlot();
								l.parent=g0;
								VisualEditor.lineMap.looseLinks.removeItem(l);
								g0.addItem(l);
							});
							VisualEditor.reportUpdate(VisualEditor.lineMap);
							VisualEditor.redrawSelection();
							VisualEditor.triggerSelectionChange();
						});
						sheet.appendChild(addbutton);
		return true;

	}
    /**
     * Called when an item has been changed.
     * @param {VisualItem} target_object - the item that has been changed.
     */
    static reportUpdate(target_object)
    {
        let safelbl = target_object.getFullName(VisualEditor.ITEM_REF_SEPARATOR);
        // get the first <li> matching the itemref - shouldn't be more than one anyway
        let node = VisualEditor.treeViewContainer.querySelector("li[data-itemref=\""+safelbl+"\"]");
        if(node)
        {
            // if found, hollow out the <li> and build that item's tree inside of it
            VisualEditor.buildTree(node,target_object,true);
        }
		VisualEditor.buildPropSheet(target_object, true);
    }
    /**
     * Called when an item has been changed.
     * @param {VisualItem} target_object - the item that has been changed.
     */
    static reportRename(target_object,new_name)
    {
        let safelbl = target_object.getFullName(VisualEditor.ITEM_REF_SEPARATOR);
        // get the first <li> matching the itemref - shouldn't be more than one anyway
        let node = VisualEditor.treeViewContainer.querySelector("li[data-itemref=\""+safelbl+"\"]");
        if(node)
        {
			target_object.name=new_name;
            // if found, hollow out the <li> and build that item's tree inside of it
            VisualEditor.buildTree(node,target_object,true);
        }
		VisualEditor.buildPropSheet(target_object, true);
    }
    /**
     * Creates a colour-coded badge indicating a specifc line, optionally clickable to select that line.
     * @param {VisualLine} line - the Line to create the badge for.
     * @param {boolean} passive - if true, the badge does not select the line when clicked.
     * @returns 
     */
	static createLineBadge(line, passive = false)
	{
			let badge = document.createElement("div");
			badge.classList.add("line_badge");
			badge.append(" ");
			badge.style.borderTopColor = line.colour1;
			badge.style.borderBottomColor = line.colour2;
			badge.dataset.lineName = line.name;
			badge.title=line.getLabel();
            // wire it up unless asked not to
			if(!passive)
			{
				// on click, select the line
				badge.addEventListener("click",(e)=>{
					VisualEditor.selectLine(e.target.dataset.lineName);
				});
                // on hover, highlight the line
				badge.addEventListener("mouseover",(e)=>{
                    VisualEditor.currentHightlight = [line];
                    VisualEditor.refreshView();
				});
			}
			return badge;
	}
	/**
	 * Generates a text label that will act as a proxy for the item, highlighting it when hovered
	   and selecting it when clicked. Supports the Ctrl key.
	 * @param {VisualItem} item - the item to link to the label.
	 * @param {string} tagname - the HTML tag name to use for the label, defaults to "span"
	 * @returns The text label as a HTML element.
	 */
	static createHotLabel(item, tagname="span")
	{
		let lbl = document.createElement(tagname);
		lbl.append(item.getLabel());
		lbl.addEventListener("click",(e)=>{
			if(e.ctrlKey)
			{
				VisualEditor.currentSelection.add([item], true);
			}
			else
			{	
				VisualEditor.currentSelection.set([item], true);
			}
			VisualEditor.refreshView();
		});
		lbl.addEventListener("mouseover", (e)=>{
			VisualEditor.currentHightlight = [item];
			VisualEditor.redrawSelection();
		});
		return lbl;
	}

	static find(address)
	{
		let domain = address.shift();
		//console.log(address);
		let item = null;
		// look in either of the current 2 types of items
		switch(domain)
		{
			case "Equipment":
			{
				item = VisualEditor.fixedMap.find(...address);
				break;
			}
			case "Lines":
			{
				item = VisualEditor.lineMap.find(...address);
				break;
			}
		}
		return item;
	}
	

    /**
     * Builds a tree view with the object as the root item. The tree is built recursively.
     * The tree is then either inserted or replaces a specified HTML element.
     * @param {HTMLElement} target_node - the HTML element to attach or replace with the tree.
     * @param {VisualItem} target_object - the object to build the tree from.
     * @param {boolean} replace - if true, the targeted HTML element will be replaced with the tree.
     * Otherwise, the tree is appended as a child of the targeted element.
     */
	static buildTree(target_node, target_object, replace = false)
	{
        // this will be added to every HTML element involved for good measure
		let safelbl = target_object.getFullName(VisualEditor.ITEM_REF_SEPARATOR);
        // get the template out
		let tpl = VisualEditor.templates['treeItem'].content.cloneNode(true);
        // this is the item's display name
		let item_label = tpl.querySelector(".tree_item_name");
        // this will contain tool buttons that can pop up on hovering the item in the list
		let toolbox = tpl.querySelector(".tool_buttons");
        // add a line badge if the item is a Line
		if(target_object.type == "line")
		{
			let badge = this.createLineBadge(target_object);
			badge.dataset.itemref = safelbl;
			item_label.appendChild(badge);
		}
		item_label.append(target_object.getLabel());
		item_label.dataset.itemref = safelbl;
        // indicate that this item is hidden from view/collapsed
		if(target_object.collapseView)
		{
			item_label.classList.add("tree_item_hidden");
		}
		toolbox.dataset.itemref = safelbl;
		// "hide/show" tool button
		let eye = document.createElement("a");
		eye.append(target_object.collapseView ? "🕶️" : "👁️");
		eye.addEventListener("click", (e)=>{
			target_object.toggleCollapseView();
			VisualEditor.reportUpdate(target_object);
		});
		eye.dataset.itemref= safelbl;
		toolbox.appendChild(eye);
        // this is the <li> containing this item
		let li = tpl.querySelector(".tree_item");
		li.dataset.itemtype = target_object.type;
		li.dataset.itemsubtype = target_object.subtype;
		li.dataset.itemref = safelbl;
        // the following implements collapsible tree view that behaves more or less like one expects it to
        // black magic fuckery begins here
        li.addEventListener("click",(e)=>{
            let lbl = e.target.querySelector(".treetoggle");
            // collapse toggle on clicking the markers
            // yes, clicking on the list markers specifically
            // counts as clicking on the corresponding <li> nodes
            // so the following runs specifically when
            // 1) a <li> receives a click event
            // 2) said <li> contains a checkbox with the class "treetoggle"
            if(lbl && e.target.nodeName == "LI")
            {
                // toggle a checkbox
                // CSS does the heavy lifting here
                lbl.checked = !lbl.checked;
                // 
                e.stopPropagation();
            }
            // else do whatever one normally does on clicking a specific entry
            else
            {
                // see that's why all these itemrefs are everywhere
                // can't miss one
                let address = e.target.dataset.itemref.split(VisualEditor.ITEM_REF_SEPARATOR);
                // currently the "top" level gets special treatment as those are separate objects
                let item = VisualEditor.find(address);
                //console.log(item);
                // if found, do selection
                // add on Ctrl else select the item as is
                if(item)
                {
					if(e.ctrlKey)
					{
                        VisualEditor.currentSelection.add([item], true);
					}
					else
					{	
                        VisualEditor.currentSelection.set([item], true);
					}
                    VisualEditor.refreshView();
                }
            }
            
        });
        // mouseover is way less magical, same code as selection
        // #TODO global editor method to locate item by full address?
        tpl.querySelector(".tree_item").addEventListener("mouseover", (e)=>{
            // find the moused item and higlight it if found
            let identifier = e.target.dataset.itemref;
            let address = identifier.split(VisualEditor.ITEM_REF_SEPARATOR);
            let domain = address.shift();
            //console.log(address);
            let item = null;
            switch(domain)
            {
                case "Equipment":
                    {
                        item = VisualEditor.fixedMap.find(...address);
                        break;
                    }
                case "Lines":
                    {
                        item = VisualEditor.lineMap.find(...address);
                        break;
                    }
                case "Inventory":
                    {
                        item = VisualEditor.inventory.find(...address);
                        break;
                    }
            }
            // console.log(item);
            if(item)
            {
                VisualEditor.currentHightlight = [item];
                VisualEditor.refreshView();
            }


        });
        // set the magic checkbox's id to the itemref as well
		tpl.querySelector(".treetoggle").id = safelbl;
        // recurse if there are items under this item
		if(target_object.subItems.length > 0 )
		{
			let subs = document.createElement("ul");
			subs.dataset.itemref = safelbl;
			target_object.subItems.forEach((sub)=>{
				this.buildTree(subs, sub);
			});
			li.append(subs);
		}
        if(replace)
        {
            // this nicely lets the topmost item of a changed item keep its collapse state
            let collapsestate=!!target_node.querySelector("input[type=\"checkbox\"")?.checked;
            tpl.firstElementChild.querySelector("input[type=\"checkbox\"").checked = collapsestate;
            target_node.replaceWith( tpl.firstElementChild);
        }
        // if not replacing just insert the node
        else
        {
            target_node.appendChild(tpl.firstElementChild);
        }
	}


	static showAddFrameDlg(min, max, rackID)
	{
		console.log("loading dlg");
		// only initiate on socket
		if(!VisualEditor.currentSingleItem || VisualEditor.currentSingleType!="rack")
		{
			return;
		}
		VisualEditor.dialogs.addFrame.querySelector('#override').checked=false;
		VisualEditor.dialogs.addFrame.querySelector('#override').addEventListener("change",function (e){
			if(this.checked)
			{
				VisualEditor.dialogs.addFrame.querySelector("#slot").min =1;
				VisualEditor.dialogs.addFrame.querySelector("#slot").max =999;
			}
			else
			{
				
				VisualEditor.dialogs.addFrame.querySelector("#slot").min =min;
				VisualEditor.dialogs.addFrame.querySelector("#slot").max =max;
			}
		});
		VisualEditor.dialogs.addFrame.querySelector('#rackref').value = rackID;
		//console.log(rackID);
		VisualEditor.dialogs.addFrame.querySelector("#slot").value =min;
		VisualEditor.dialogs.addFrame.querySelector("#slot").min =min;
		VisualEditor.dialogs.addFrame.querySelector("#slot").max =max;
		let frames = document.createElement("div");
		let names = Object.keys(VisualEditor.frameTypeRegistry);
		let checked = true;
		let list = document.createElement("ul");
		list.id = "framelist";
		names.forEach((fname)=>{
			let idx = VisualEditor.frameTypeRegistry[fname]['index'];
			let flbl = VisualEditor.frameTypeRegistry[fname]['desc'] == "" ? fname :  VisualEditor.frameTypeRegistry[fname]['desc'];
			let img = VisualEditor.generateFramePreviewSprite(idx,"span");
			let lbl = document.createElement("label");
			lbl.htmlFor="frame_opt_" + idx;
			lbl.appendChild(img);
			lbl.append(flbl);
			let row = document.createElement("li");
			let radbtn = document.createElement("input");
			radbtn.value=fname;
			radbtn.type="radio";
			radbtn.name="frameselector";
			radbtn.id="frame_opt_" +idx;
			radbtn.checked = checked;
			if(checked)
			{
				checked = false;
			}
			row.appendChild(radbtn);
			row.appendChild(lbl);
			list.appendChild(row);
		});
		VisualEditor.dialogs.addFrame.querySelector("#framelist").replaceWith(list);
		VisualEditor.dialogs.addFrame.returnValue ="";
		VisualEditor.dialogs.addFrame.showModal();

	}
	static addFrameResult()
	{
		if(VisualEditor.dialogs.addFrame.returnValue!="ok")
		{
			return;
		}
		let frame = VisualEditor.dialogs.addFrame.querySelector('input[name=frameselector]:checked').value;
		let override = VisualEditor.dialogs.addFrame.querySelector('#override').checked;
		let slot = VisualEditor.dialogs.addFrame.querySelector('#slot').value;
		let rackID = VisualEditor.dialogs.addFrame.querySelector('#rackref').value.split(VisualEditor.ITEM_REF_SEPARATOR);
		//console.log(rackID);
		let rack = VisualEditor.find(rackID);
		if(rack)
		{
			console.log(rack);
			let newname =String(rack.getNextPrefixedSlot(""));
			let newframe = new VisualFrame(rack, newname);
			rack.freeSlot(slot-1);
			newframe.slot = slot-1;
			newframe.frametype = frame;
			newframe.label=slot;
			newframe.commit(VisualEditor);
			if(override)
			{
				//newframe.name=String(rack.getNextSlot()+1);
				//rack.freeSlot(slot-1);
			}
			rack.addItem(newframe);
			rack.updateSize();
			rack.updatePosition();
			VisualEditor.reportUpdate(rack);
			VisualEditor.refreshView();
		}
	}
	static cancellablePrompt(verifier, success, fail, prompt="",button="",placeholder="")
	{
		VisualEditor.dialogs.cancellable.querySelector("#err_text").innerText="";
		VisualEditor.dialogs.cancellable.querySelector("#err_msg").style.display="none";
		VisualEditor.dialogs.cancellable.querySelector("#cancellable_input").value="";
		if(prompt)
		{
			VisualEditor.dialogs.cancellable.querySelector("#prompt").innerText = prompt+":";
			VisualEditor.dialogs.cancellable.querySelector("#cancellable_input").placeholder = placeholder ?? prompt+" here";
		}
		if(button)
			VisualEditor.dialogs.cancellable.querySelector("#button").innerText = button;
		let result=VisualEditor.dialogs.cancellable.querySelector("#cancellable_input");
		let exitproc=(e)=>{
			e.preventDefault();
			console.log(result.value);
			if(verifier(result.value))
			{
				console.log("success");
				success(result.value);
				VisualEditor.dialogs.cancellable.querySelector("#button").removeEventListener("click",exitproc);
				VisualEditor.dialogs.cancellable.close("");
			}
			else
			{
				console.log("failure");
				VisualEditor.dialogs.cancellable.querySelector("#err_text").innerText=fail(result.value);
				VisualEditor.dialogs.cancellable.querySelector("#err_msg").style.display="inline";
			}
		};
		VisualEditor.dialogs.cancellable.addEventListener("close",(e)=>{VisualEditor.dialogs.cancellable.querySelector("#button").removeEventListener("click",exitproc);},{once:true});
		VisualEditor.dialogs.cancellable.querySelector("#button").addEventListener("click",exitproc);
		VisualEditor.dialogs.cancellable.showModal();
	}
	static promptName(callback,prompt ="",button ="",placeholder)
	{
		VisualEditor.dialogs.newItem.querySelector("#itemname").value="";
		if(prompt)
		{
			VisualEditor.dialogs.newItem.querySelector("#prompt").innerText = prompt+":";
			VisualEditor.dialogs.newItem.querySelector("#itemname").placeholder = placeholder ?? prompt+" here";
		}
		if(button)
			VisualEditor.dialogs.newItem.querySelector("#button").innerText = button;
		
		VisualEditor.dialogs.newItem.addEventListener("close",callback,{once:true});
		VisualEditor.dialogs.newItem.showModal();
	}
	static createLine()
	{
		console.log("creating line");
		// only initiate on socket
		if(!VisualEditor.currentSingleItem || VisualEditor.currentSingleType!="socket")
		{
			return;
		}
		console.log("actually creating line");
		
		VisualEditor.dialogs.newLine.showModal();

	}

	static createLineResult(e)
	{
		if(VisualEditor.dialogs.newLine.returnValue)
		{
            // make a fake socket to attach the wire to
			let mSocket = new VisualSocket(VisualEditor.fixedMap, "mousemove");
			// temp patch to make the fake socket match the mouse exactly
			VisualEditor.currentMovingX=-1*(DIM_FRAME_SIDES + 5);
			VisualEditor.currentMovingY=-2;
			let fromSocket=VisualEditor.currentSingleItem;
			if(VisualEditor.lineMap.checkName(VisualEditor.dialogs.newLine.returnValue))
			{
				return;
			}
			let line = new VisualLine(VisualEditor.lineMap, VisualEditor.dialogs.newLine.returnValue);
			let newpatch = new VisualPatch(line, line.getNextSlot());
			newpatch.from = VisualEditor.currentSingleItem;
			fromSocket.connect(newpatch);
			newpatch.to = mSocket;
			mSocket.connect(newpatch);
			line.addItem(newpatch);
			VisualEditor.lineMap.addItem(line);
			VisualEditor.reportUpdate(VisualEditor.lineMap);
			VisualEditor.toolBar.querySelector("#mode_rewire").click();
			VisualEditor.subMode = this.SUB_MODES.WIRE_MOVE;
			// attach the fake socket to the mouse
			VisualEditor.currentMoving = mSocket;
			// refresh
			VisualEditor.redrawSelection();

		}

	}

	//////////////////////////////////////////////////////////////////////////
	///////////////////// EDITOR MODES BELOW /////////////////////////////////
	//////////////////////////////////////////////////////////////////////////



    /**
     * Sets the editor mode to default (selecting and moving items).
     */
	static setModePointer()
	{
		
        VisualEditor.updateCursor();
	}
    /**
     * Sets the editor mode to wiring (moving existing wires and extending lines).
     */
	static setModeWire()
	{
		
        VisualEditor.updateCursor();
	}
    /**
     * Sets the editor mode to wiring (moving existing wires and extending lines).
     */
	static setModeLink()
	{
		VisualEditor.editMode = this.EDIT_MODES.LINK;
        VisualEditor.updateCursor();
	}

	/**
	 * Sets editor mode to specified mode.
	 */
	static setEditorModeHandler(e)
	{
		let mode = e.currentTarget.dataset.mode ?? "";
		if(mode=="code")
		{
		}
		else
		{
		}
		let editMode = this.EDIT_MODES.POINTER;
		document.getElementById("add_location").disabled=true;
				VisualEditor.toolBar.parentElement.querySelector("#hwstudio").style.display="none";
				VisualEditor.toolBar.parentElement.querySelector("#controls").style.display="none";
				VisualEditor.highlightLayer.canvas.style.display="none";
				VisualEditor.mapLayer.canvas.style.display="none";
		switch(mode)
		{
			case "wire":
			{
				editMode = this.EDIT_MODES.WIRE;
				VisualEditor.highlightLayer.canvas.style.display="block";
				VisualEditor.mapLayer.canvas.style.display="block";
				break;
			}
			case "pointer":
			{
				editMode = this.EDIT_MODES.POINTER;
				document.getElementById("add_location").disabled=false;
				VisualEditor.highlightLayer.canvas.style.display="block";
				VisualEditor.mapLayer.canvas.style.display="block";
				break;
			}
			case "link":
			{
				VisualEditor.highlightLayer.canvas.style.display="block";
				VisualEditor.mapLayer.canvas.style.display="block";
				editMode = this.EDIT_MODES.LINK;
				break;
			}
			case "code":
			{
				editMode = this.EDIT_MODES.CODE;
				VisualEditor.toolBar.parentElement.querySelector("#controls").style.display="block";
				break;
			}
			case "inventory":
			{
				document.getElementById("add_location").disabled=true;
				VisualEditor.toolBar.parentElement.querySelector("#hwstudio").style.display="block";
				editMode = this.EDIT_MODES.INVENTORY;
				break;
			}
		}
		VisualEditor.setEditorMode(editMode,VisualEditor.SUB_MODES.NONE);
		VisualEditor.toolBar.querySelectorAll(".mode_button").forEach((b)=>{
			if(b.dataset.mode==mode)
			{
				b.classList.add("current_mode");

			}
			else
			{
				b.classList.remove("current_mode");
			}
		});
	}
	/**
	 * Sets editor mode to specified mode.
	 */
	static setEditorMode(mode, submode=-1)
	{
		if(submode!=-1)
		{
			VisualEditor.subMode = submode;
			VisualEditor.editMode = mode;
		}
		else
		{
			VisualEditor.editMode = mode;
		}
        VisualEditor.updateCursor();
	}




    /**
     * Gets the appropriate cursor while in default mode.
     * @returns {string} a CSS name for the cursor.
     */
	static getCursorPointerMode()
	{
		let cursor = "auto";
        // if hovering an empty spot on a location, show move cursor
        if(VisualEditor.currentHightlight[0]?.type == "location")
        {
            cursor = "move";
        }
		return cursor;
	}
    /**
     * Gets the appropriate cursor while in default mode.
     * @returns {string} a CSS name for the cursor.
     */
	static getCursorLinkMode()
	{
		let cursor = "alias";
        // if hovering an empty spot on a location, show move cursor
        if(VisualEditor.currentHightlight[0]?.connections?.length <1 && VisualEditor.subMode == this.SUB_MODES.NONE)
        {
            cursor = "copy";
        }
		if(VisualEditor.currentHightlight[0]?.connections?.length > 1)
		{
			cursor = "not-allowed";
		}
		if(VisualEditor.subMode == this.SUB_MODES.LINK_END && VisualEditor.currentHightlight[0]?.connections?.length>0)
		{
			cursor = "not-allowed";
		}
		return cursor;
	}
    /**
     * Gets the appropriate cursor while in wiring mode.
     * @returns {string} a CSS name for the cursor.
     */
	static getCursorWireMode()
	{
        // default to the "shortcut" style cursor
		let cursor = "alias";
        // figure out what the user is currently hovering
		let currentHover = VisualEditor.currentHightlight.length > 0 ? VisualEditor.currentHightlight[0] : null;
		let currentHoverSocket = currentHover && currentHover.type == "socket" ? currentHover : null;
		let currentHoverWire = currentHover && currentHover.type == "patch" ? currentHover : null;
		let currentSelected = VisualEditor.currentSelection.selection.length > 0 ? VisualEditor.currentSelection.selection[0] : null;
		let currentWire = currentSelected && currentSelected.type == "patch" ? currentSelected : null;
		// if moving/adding a wire, check if hovered item is a socket that can accept the wire
        if(VisualEditor.subMode == this.SUB_MODES.WIRE_ADD || VisualEditor.subMode == this.SUB_MODES.WIRE_MOVE)
		{
			if(currentHoverSocket && !currentHoverSocket.canAdd(currentWire))
			{
				cursor = "not-allowed";
			}
			else
			{
				cursor = "copy";
			}
			
		}
        // if a wire has been previously selected, indicate possible actions
		if(VisualEditor.subMode == this.SUB_MODES.WIRE_SELECTED)
		{
            // "normal" cursor if another wire is hovered - user can select that one instead
			if(currentHoverWire)
			{
				cursor = "alias";
			}
			else if(currentHoverSocket)
			{
				if(VisualEditor.shift)
				{
                    // if Shift is pressed and the line can be extended from the currently hovered socket,
                    // indicate this
					if(currentHoverSocket.canStart(currentWire))
					{
						cursor = "copy";
					}
                    // else display 🚫
					else
					{
						cursor = "not-allowed";
					}
				}
				else
				{
                    // if no Shift and current socket can be moved from, show "normal" cursor
					if(currentHoverSocket.canMove(currentWire))
					{
						cursor = "alias";
					}
                    // 🚫 otherwise
					else
					{
						cursor = "not-allowed";
					}

				}
			}
		}
		return cursor;
	}
    /**
     * Gets the appropriate cursor for the current editing mode and state.
     * @returns {string} - the CSS string with the cursor name.
     */
	static getDefaultCursor()
	{
		// console.log(VisualEditor.editMode);
		switch(VisualEditor.editMode)
		{
			case VisualEditor.EDIT_MODES.POINTER:
			{
				return this.getCursorPointerMode();
			}
			case VisualEditor.EDIT_MODES.WIRE:
			{
				return this.getCursorWireMode();
			}
			case VisualEditor.EDIT_MODES.LINK:
			{
				return this.getCursorLinkMode();
			}
		}
	}
    /**
     * Gets the cursor and applies it to the visual area.
     */
	static updateCursor()
	{
		let def_cursor = this.getDefaultCursor();
		VisualEditor.mouseArea.style.cursor = def_cursor;

	}
    /**
     * Handles mouse clicks in wiring mode.
     * @param {Number} x - x coordinate of mouse
     * @param {Number} y - y coordinate of mouse
     * @param {boolean} dbl - true if double click
     */
	static handleWireMode(x, y, dbl)
	{
		let results = VisualEditor.getMouseHits(x, y, false);
        // only interested in wires and sockets
		results = results.filter((item)=>item.selectionOrder == 4 || item.selectionOrder == 5);
		// if none are clicked, exit
        if(results.length < 1)
		{
			console.log("no wires or sockets picked");
			return;
		}
		// if currently moving a wire, and a socket is clicked, connect the wire to the socket and exit
		if(VisualEditor.currentMoving && VisualEditor.currentMoving.type == "socket" &&  results[0]?.type == "socket")
		{
			let newlink =VisualEditor.currentMoving.connections[0]
			results[0].takeFrom(VisualEditor.currentMoving, newlink);
            // #HACK! do it properly later.
			newlink.parent.commit(null);
			// reset state 
			VisualEditor.currentMoving = null;
			VisualEditor.currentSelection.set([newlink]);
			VisualEditor.refreshView();
			VisualEditor.subMode = VisualEditor.SUB_MODES.NONE;
			return;
		}

		//console.log( results[0]?.type);
		
		//console.log(VisualEditor.currentSingleType, " +++ ", results[0]?.type);

		// if a wire has been selected and a socket is clicked
		// start moving the wire connected to that socket (and any matching)
		if(VisualEditor.subMode == VisualEditor.SUB_MODES.WIRE_SELECTED && results[0]?.type == "socket")
		{
			let fromSocket = results[0];
			let fromLine =VisualEditor.currentSingleItem;
            // make sure the selected socket actually is connected to the wire
			if(!fromSocket.canMove(fromLine))
			{
				console.warn("selected socket is not one of the ends");
				return;
			}
			//console.log("ready to wire!");
            // make a fake socket to attach the wire to
			let mSocket = new VisualSocket(VisualEditor.fixedMap, "mousemove");
			// temp patch to make the fake socket match the mouse exactly
			VisualEditor.currentMovingX=-1*(DIM_FRAME_SIDES + 5);
			VisualEditor.currentMovingY=-2;
            // if shift is pressed, try adding a new wire from the target socket
			if(VisualEditor.shift)
			{
				if(!fromSocket.canStart(fromLine))
				{
					console.warn("can't add a new wire from here");
					return;
				}
                // create a wire, attach it from the target socket to the fake socket
				let newpatch = new VisualPatch(fromLine.parent, fromLine.parent.getNextSlot());
				newpatch.from = fromSocket;
				fromSocket.connect(newpatch);
				newpatch.to = mSocket;
				mSocket.connect(newpatch);
				fromLine.parent.addItem(newpatch);
                VisualEditor.reportUpdate(fromLine.parent);
                
				VisualEditor.subMode = this.SUB_MODES.WIRE_ADD;
			}
            // else move whatever is attached to the socket
			else
			{
				mSocket.takeFrom(fromSocket, fromLine);
				VisualEditor.subMode = this.SUB_MODES.WIRE_MOVE;
			}
			// attach the fake socket to the mouse
			VisualEditor.currentMoving = mSocket;
			// refresh
			VisualEditor.redrawSelection();
			return;
		}

		// else only wires are of interest and should pop out over sockets

		results = results.filter((item)=>item.selectionOrder == 4); // #TODO: remove the hardcode

		// advance depth to allow clickthrough selection if multiple items are under the mouse			
		VisualEditor.currentDepth++;
		if(VisualEditor.currentDepth >= results.length)
		{
			VisualEditor.currentDepth = 0;
		}
		// if a wire is clicked go for it
		if(results[VisualEditor.currentDepth]?.type == "patch")
		{
			VisualEditor.currentSelection.set([results[VisualEditor.currentDepth]])
			console.log("wire selected!");		
			VisualEditor.subMode = VisualEditor.SUB_MODES.WIRE_SELECTED;
			VisualEditor.redrawSelection();

			return;
		}
		// idk what to do here
		else
		{
		}
		
		
		VisualEditor.redrawSelection();

	}
    /**
     * Handles mouse up events in wiring mode.
     * @param {Number} x - x coordinate of mouse
     * @param {Number} y - y coordinate of mouse
     * @returns 
     */
	static handleMUpWireMode(x, y)
	{

	}
    /**
     * Handles mouse downs in wiring mode.
     * @param {Number} x - x coordinate of mouse
     * @param {Number} y - y coordinate of mouse
     */
	static handleMDownWireMode(x, y)
	{

	}
    /**
     * Handles mouse moving in wiring mode.
     * @param {Number} x - x coordinate of mouse
     * @param {Number} y - y coordinate of mouse
     */
	static handleMMoveWireMode(x, y)
	{
		VisualEditor.currentHightlight = [];
		let results = VisualEditor.getMouseHits(x, y, false);
        // see if any wires or sockets are under the mouse
		results = results.filter((item)=>item.selectionOrder == 4 || item.selectionOrder == 5);
		if(results && results.length>0)
		{
			let issocket = results[0].type == "socket";
            // hightlight the socket if a wire is being moved or a socket is to be selected for wiring
			if((issocket && (VisualEditor.currentMoving || VisualEditor.currentSingleType == "patch")))
			{
				VisualEditor.currentHightlight = results;
			}
			else
			{
                // check for wires under the mouse
				results = results.filter((item)=>item.selectionOrder == 4 );
				let iswire = false;
				if(results.length>0)
				{
					iswire = results[0].type == "patch";
				}
                // if currently not moving a wire, allow the wires to be highlighted
				if(!VisualEditor.currentMoving && iswire)
				{
					VisualEditor.currentHightlight = results;
				}
			}

		}
		
		VisualEditor.redrawSelection();
        // refresh mouse attached items
		if(VisualEditor.currentMoving)
		{
			VisualEditor.currentMoving.updatePosition();
		}
	}
    /**
     * Handles mouse clicks in default mode.
     * @param {Number} x - x coordinate of mouse
     * @param {Number} y - y coordinate of mouse
     * @param {boolean} dbl - true if double click
     */
	static handlePointerMode(x, y, dbl)
	{
		let results = VisualEditor.getMouseHits(x, y, true);
		// if empty space is clicked without Ctrl, clear selection, refresh and exit
		if(results.length < 1)
		{
			if(!VisualEditor.ctrl)
			{
				//console.log("before clear", VisualEditor.currentSelection);
				VisualEditor.currentSelection.clear();
				//console.log("after clear", VisualEditor.currentSelection);
			}
				
			VisualEditor.redrawSelection()
			return;
		}
        // if doubleclicking on a selected wire, highlight all wires in the same line
		if(dbl && results[VisualEditor.currentDepth]?.type == "patch")
		{
			VisualEditor.currentSelection.set(results[VisualEditor.currentDepth].parent.subItems);
			// refresh, exit
			VisualEditor.redrawSelection();
			return;
		}
        // cycle the counter to select the next item under the mouse
        // #BUG: messes with the doubleclicking behaviour, as the first click of the double click
        // advances the counter once, and the second click actually fires the double click event
		VisualEditor.currentDepth++;
		if(VisualEditor.currentDepth >= results.length)
		{
			VisualEditor.currentDepth = 0;
		}
        // if Ctrl is down, add currently picked item to selection
		if(VisualEditor.ctrl)
		{
			VisualEditor.currentSelection.add([results[VisualEditor.currentDepth]])
		}
        // else just select the one item
		else
		{
			VisualEditor.currentSelection.set([results[VisualEditor.currentDepth]])
		}
		VisualEditor.redrawSelection();
	}
    /**
     * Handles mouse downs in default mode.
     * @param {Number} x - x coordinate of mouse
     * @param {Number} y - y coordinate of mouse
     */
	static handleMDownPointerMode(x, y)
	{
        // if hovering a location, start moving it
        // #TODO: maybe only do this if it is selected first?
		if(VisualEditor.currentHightlight[0]?.type == "location")
		{
			console.log("picked up", VisualEditor.currentHightlight[0]);
			VisualEditor.currentMoving = VisualEditor.currentHightlight[0];
            // set offsets so it aligns with where exactly the mouse grabbed it
			VisualEditor.currentMovingX = VisualEditor.currentMoving.x - x;
			VisualEditor.currentMovingY = VisualEditor.currentMoving.y - y;
		}
		if(VisualEditor.currentHightlight.length<1)
		{
			VisualEditor.draggingView=true;
		}
		VisualEditor.updateCursor();
	}
    /**
     * Handles mouse ups in default mode.
     * @param {Number} x - x coordinate of mouse
     * @param {Number} y - y coordinate of mouse
     */
	static handleMUpPointerMode(x, y)
	{
        // drop the moved object
		VisualEditor.currentMoving = null;
	}
    /**
     * Handles mouse moving in default mode.
     * @param {Number} x - x coordinate of mouse
     * @param {Number} y - y coordinate of mouse
     */
	static handleMMovePointerMode(x, y)
	{
		let results = VisualEditor.getMouseHits(x, y, true);
		// highlight everything the mouse touches
        VisualEditor.currentHightlight = results;
		VisualEditor.redrawSelection();
        VisualEditor.updateCursor();
		// remnants from ages ago
        // #TODO: remove
        let currentlabel = "";
		let currentrect = [];
		window.fiber.current = currentlabel;
	    window.fiber.selection = currentrect;
	}

	static handleLinkMode(x,y,dbl)
	{
		let results = VisualEditor.getMouseHits(x, y, true);
		if(results.length < 1)
		{
			return;
		}
		let item = results[0];
		if(item.type != "socket")
		{
			return;
		}
		// check if the target socket is empty
		if(VisualEditor.subMode == VisualEditor.SUB_MODES.LINK_END)
		{
			if( results[0].connections.length >0)
			{
				return
			}
			let newlink =VisualEditor.currentMoving.connections[0]
			results[0].takeFrom(VisualEditor.currentMoving, newlink);
			// reset state 
			VisualEditor.currentMoving = null;
			VisualEditor.currentSelection.clear();
			VisualEditor.refreshView();
			VisualEditor.subMode = VisualEditor.SUB_MODES.NONE;
			return;

		}
		if(results[0].connections.length <1)
		{
			
            // make a fake socket to attach the wire to
			let mSocket = new VisualSocket(VisualEditor.fixedMap, "mousemove");
			// temp patch to make the fake socket match the mouse exactly
			VisualEditor.currentMovingX=-1*(DIM_FRAME_SIDES + 5);
			VisualEditor.currentMovingY=-2;
			// create a wire, attach it from the target socket to the fake socket
			let newpatch = new VisualPatch(VisualEditor.lineMap.looseLinks, VisualEditor.lineMap.getNextSlot());
			newpatch.from = results[0];
			results[0].connect(newpatch);
			newpatch.to = mSocket;
			mSocket.connect(newpatch);
			VisualEditor.lineMap.looseLinks.subItems.push(newpatch);
			VisualEditor.reportUpdate(VisualEditor.lineMap.looseLinks);
			VisualEditor.subMode = this.SUB_MODES.LINK_END;
		
			// attach the fake socket to the mouse
			VisualEditor.currentMoving = mSocket;
			// refresh
			VisualEditor.redrawSelection();
			return;
		}
		else if(results[0].connections.length == 1 && results[0].connections[0].parent == VisualEditor.lineMap.looseLinks)
		{ // make a fake socket to attach the wire to
			let mSocket = new VisualSocket(VisualEditor.fixedMap, "mousemove");
			// temp patch to make the fake socket match the mouse exactly
			VisualEditor.currentMovingX=-1*(DIM_FRAME_SIDES + 5);
			VisualEditor.currentMovingY=-2;
            

			mSocket.takeFrom(results[0], results[0].connections[0]);
			VisualEditor.subMode = this.SUB_MODES.LINK_END;
			// attach the fake socket to the mouse
			VisualEditor.currentMoving = mSocket;
			// refresh
			VisualEditor.redrawSelection();
			return;
			
		}
	}
    /**
     * Handles mouse up events in wiring mode.
     * @param {Number} x - x coordinate of mouse
     * @param {Number} y - y coordinate of mouse
     * @returns 
     */
	static handleMUpLinkMode(x, y)
	{

	}
    /**
     * Handles mouse downs in wiring mode.
     * @param {Number} x - x coordinate of mouse
     * @param {Number} y - y coordinate of mouse
     */
	static handleMDownLinkMode(x, y)
	{

	}
    /**
     * Handles mouse moving in wiring mode.
     * @param {Number} x - x coordinate of mouse
     * @param {Number} y - y coordinate of mouse
     */
	static handleMMoveLinkMode(x, y)
	{
		VisualEditor.currentHightlight = [];
		let results = VisualEditor.getMouseHits(x, y, true);
        // see if any sockets are under the mouse
		results = results.filter((item)=>item.selectionOrder == 5);
		if(results && results.length>0)
		{
			VisualEditor.currentHightlight = results;
		}
		
		VisualEditor.redrawSelection();
        // refresh mouse attached items
		if(VisualEditor.currentMoving)
		{
			VisualEditor.currentMoving.updatePosition();
		}
	}
}