static void Main() { // Global Events. window.onmousedown = (ev) => { IsMouseDown = true; MouseDownX = ev.clientX; MouseDownY = ev.clientY; MouseDownElement = ev.target.As <HTMLElement>(); invokeEvent(ev, MouseDown); }; window.onmousemove = (ev) => { invokeEvent(ev, MouseMove); }; window.onmouseup = (ev) => { IsMouseDown = false; invokeEvent(ev, MouseUp); }; var resizeContainer = new ResizeContainer(); resizeContainer.AttachElement(new HTMLInputElement() { type = "text" }); resizeContainer.ApplySettings(new ControlSettings() { Style = { { "width", "100px" }, { "height", "100px" }, { "left", "100px" }, { "top", "100px" } }, Settings = { { "value", "TextBox1" } } }); document.body.appendChild(resizeContainer.Container); var resizeContainer2 = new ResizeContainer(); resizeContainer2.AttachElement(new HTMLButtonElement() { type = "button" }); resizeContainer2.ApplySettings(new ControlSettings() { Style = { { "width", "100px" }, { "height", "100px" }, { "left", "300px" }, { "top", "100px" } }, Settings = { { "textContent", "Button1" } } }); document.body.appendChild(resizeContainer2.Container); }
private HTMLDivElement createResizeButton(string _left, string _top, Action <MouseEvent> onMove, string overrideWidth = "10px", string overrideHeight = "10px", string zindex = "1000", string overrideColor = "white") { var resizeButton = new HTMLDivElement(); resizeButton.style.position = "absolute"; resizeButton.style.left = _left; resizeButton.style.top = _top; resizeButton.style.width = overrideWidth; resizeButton.style.height = overrideHeight; resizeButton.style.backgroundColor = overrideColor; resizeButton.style.zIndex = zindex; resizeButton.style.boxSizing = "border-box"; if (overrideColor != "transparent") { resizeButton.style.border = "1px solid lightgrey"; resizeButton.style.borderRadius = "1px"; resizeButton.style.visibility = "hidden"; resizeableButtons.Add(resizeButton); } resizeButton.tabIndex = -1; resizeButton.onblur = (ev) => { if (Container.children.Contains(ev.relatedTarget.As <HTMLElement>())) { return; } FocusedResize = null; }; resizeButton.onfocus = (ev) => { FocusedResize = this; foreach (var item in resizeableButtons) { item.style.visibility = null; } }; Program.MouseDown[resizeButton] = (ev) => { startingX = Left; startingY = Top; startingHeight = Height; startingWidth = Width; }; Program.MouseMove[resizeButton] = (ev) => { if (Program.IsMouseDown) { ev.preventDefault(); ev.stopPropagation(); onMove(ev); } }; return(resizeButton); }