added html and css editors

codeeditor-app/elements/resize-handle/resize-handle.less

@@ -2,20 +2,42 @@
 
 resize-handle {
     background: transparent;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 8px;
+    position: absolute !important;
     z-index: 9;
     cursor: ew-resize;
     transition: 1s ease-in;
+    flex: none !important;
 }
 
-resize-handle:hover {
+resize-handle[dir="horizontal"] {
+    cursor: ew-resize;
+    width: 8px;
+    top: 0;
+    bottom: 0;
+}
+
+resize-handle[dir="vertical"] {
+    cursor: ns-resize;
+    height: 8px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+resize-handle:hover, resize-handle.active {
     background: @primary-interaction-highlight-white;
     transition: none;
 }
 
+#fixed-resize-overlay {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+}
+
 @media (prefers-color-scheme: dark) {
 
     resize-handle:hover {

codeeditor-app/elements/resize-handle/resize-handle.ts

@@ -4,7 +4,6 @@ import './resize-handle.less';
 
 export class ResizeHandle extends BaseElement {
 
-    public isDowned = false;
 
     onInit(): void {
         this.setDragEvents();
@@ -12,54 +11,120 @@ export class ResizeHandle extends BaseElement {
 
     setDragEvents() {
         this.addEventListener("mousedown", (evt: MouseEvent) => {
-            this.isDowned = true;
-            this.getIframe().style.display = "none";
-        });
+            evt.preventDefault();
+            evt.stopPropagation();
+            this.setOverlay({
+                x: evt.pageX,
+                y: evt.pageY
+            });
 
-        window.addEventListener("mousemove", (evt: MouseEvent) => {
-            if (this.isDowned) {
-                this.setPosition(evt.pageX);
-            }
-        });
-
-        window.addEventListener("mouseup", (evt: MouseEvent) => {
-            if (this.isDowned) {
-                this.getIframe().style.display = "block";
-                this.isDowned = false;
-            }
         });
 
         this.addEventListener("touchstart", (evt: TouchEvent) => {
-            this.isDowned = true;
-            this.getIframe().style.display = "none";
-        });
-
-        window.addEventListener("touchmove", (evt: TouchEvent) => {
-            if (this.isDowned) {
-                this.setPosition(evt.touches[0].pageX);
-            }
-        });
-
-        window.addEventListener("touchend", (evt: TouchEvent) => {
-            if (this.isDowned) {
-                this.getIframe().style.display = "block";
-                this.isDowned = false;
-            }
+            evt.preventDefault();
+            evt.stopPropagation();
+            this.setOverlay({
+                x: evt.touches[0].pageX,
+                y: evt.touches[0].pageY
+            });
         });
     }
 
-    setPosition(x: number) {
+    setSize(x: number, y: number) {
         var t = this.getTarget();
 
-        t.style.minWidth = x + "px";
-        t.style.maxWidth = x + "px";
+        if (t) {
+            if (this.directionIsHorizontal()) {
+                t.style.minWidth = x + "px";
+                t.style.maxWidth = x + "px";
+            }
+            else {
+                t.style.minHeight = y + "px";
+                t.style.maxHeight = y + "px";
+            }
+        }
     }
 
     getTarget() {
-        return <CodeEditor>this.find("code-editor");
+        var targetAttr = this.getAttribute("target");
+        if (targetAttr) {
+            var target = <HTMLElement>document.querySelector(targetAttr);
+
+            if (target) {
+                return target;
+            }
+        }
+
+        return this.parentElement;
+    }
+
+    directionIsHorizontal() {
+        var attr = this.getAttribute("dir");
+
+        if (attr) {
+            if (attr.toLowerCase().indexOf('v') === 0) {
+                return false;
+            }
+        }
+
+        return true;
     }
 
     getIframe() {
         return <HTMLIFrameElement>this.find("iframe");
     }
+
+    setOverlay(start: { x: number, y: number }) {
+        var overlay = document.createElement("div");
+        overlay.setAttribute("id", "fixed-resize-overlay");
+
+        var targetStartSize = { width: 0, height: 0 };
+
+        var target = this.getTarget();
+        if (target) {
+            var bounds = target.getBoundingClientRect();
+
+            targetStartSize = {
+                width: bounds.width,
+                height: bounds.height
+            };
+        }
+
+        overlay.addEventListener("mousemove", (evt: MouseEvent) => {
+            this.getIframe().style.pointerEvents = "none";
+            this.classList.add("active");
+            this.setSize(targetStartSize.width + (evt.pageX - start.x), targetStartSize.height + (evt.pageY - start.y));
+        });
+
+        overlay.addEventListener("mouseup", (evt: MouseEvent) => {
+            this.getIframe().style.pointerEvents = "all";
+            this.classList.remove("active");
+            this.removeOverlay();
+        });
+
+        overlay.addEventListener("touchmove", (evt: TouchEvent) => {
+            this.getIframe().style.pointerEvents = "none";
+            this.classList.add("active");
+            this.setSize(targetStartSize.width + (start.x - evt.touches[0].pageX), targetStartSize.height + (start.y - evt.touches[0].pageY));
+        });
+
+        overlay.addEventListener("touchend", (evt: TouchEvent) => {
+            this.getIframe().style.pointerEvents = "all";
+            this.classList.remove("active");
+            this.removeOverlay();
+        });
+
+        document.body.classList.remove("animate");
+        document.body.appendChild(overlay);
+    }
+
+    removeOverlay() {
+        var overlay = document.getElementById("fixed-resize-overlay");
+
+        if (overlay) {
+            overlay.parentElement?.removeChild(overlay);
+        }
+        
+        document.body.classList.add("animate");
+    }
 }