composite-monaco-diff 1.0.2

package/dist/esm/CenterAndHeightResizer.js

@@ -0,0 +1,325 @@
+/**
+ * Resizable center panel with optional left gutter and bottom height handle.
+ *
+ * Import this module to register the element (`customElements.define` at file bottom).
+ * Before calling instance APIs from other modules, wait for registration:
+ *
+ *   await customElements.whenDefined(CenterAndHeightResizer.tagName);
+ *
+ * Before mounting layout-sensitive UI (e.g. Monaco) in slotted content, prefer:
+ *
+ *   await CenterAndHeightResizer.whenHostReady(container);
+ *
+ * @example HTML
+ * ```html
+ * <center-and-height-resizer left="50px" center="350px" height="200px" style="padding: 12px" data-test="idfortest">
+ *   <div>Content</div>
+ * </center-and-height-resizer>
+ * ```
+ *
+ * @example JS
+ * ```js
+ * import { CenterAndHeightResizer } from "./CenterAndHeightResizer.js";
+ *
+ * await customElements.whenDefined(CenterAndHeightResizer.tagName);
+ *
+ * const resizer = document.querySelector(CenterAndHeightResizer.tagName);
+ * resizer.addEventListener("onLeft", (e) => console.log(e.detail.width));
+ * resizer.addEventListener("onCenter", (e) => console.log(e.detail.width));
+ * resizer.addEventListener("onHeight", (e) => console.log(e.detail.height));
+ * ```
+ */
+const SKIP_ATTRIBUTES = ["id", "class", "left", "center", "height", "style"];
+export class CenterAndHeightResizer extends HTMLElement {
+    static tagName = "center-and-height-resizer";
+    leftDiv;
+    rightDiv;
+    centerDiv;
+    resizerLeft;
+    resizerRight;
+    resizerBottom;
+    _isReady = false;
+    _readyPromise;
+    _resolveReady;
+    constructor() {
+        super();
+        this._readyPromise = new Promise((resolve) => {
+            this._resolveReady = resolve;
+        });
+        this.attachShadow({ mode: "open" });
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          padding: 0 !important;
+        }
+        .flex {
+          display: flex;
+          width: 100%;
+          align-items: stretch;
+        }
+        .center-column {
+          display: flex;
+          flex-direction: column;
+          min-width: 0;
+        }
+        .center-div {
+          flex-grow: 1;
+          min-width: 0;
+          box-sizing: border-box;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
+          background: #fff;
+          border-radius: 6px;
+          overflow: auto;
+          min-height: 50px;
+          border: 1px solid #eaeaea;
+        }
+        .side-div {
+          flex-shrink: 0;
+          box-sizing: border-box;
+        }
+        #right-div {
+          flex-grow: 1;
+        }
+        .resizer {
+          flex-shrink: 0;
+          transition: background 0.2s;
+          user-select: none;
+          position: relative;
+        }
+        .resizer.horizontal {
+          width: 8px;
+          cursor: col-resize;
+        }
+        .resizer.vertical {
+          height: 8px;
+          cursor: row-resize;
+          width: 100%;
+        }
+        .resizer:hover,
+        .resizer.active {
+          background: rgba(26, 115, 232, 0.12);
+        }
+        .resizer::after {
+          content: "";
+          position: absolute;
+          background: #ccc;
+          transition: background 0.2s;
+        }
+        .resizer.horizontal::after {
+          left: 50%;
+          top: 0;
+          bottom: 0;
+          width: 14px;
+          transform: translateX(-50%);
+        }
+        .resizer.vertical::after {
+          top: 50%;
+          left: 0;
+          right: 0;
+          height: 14px;
+          transform: translateY(-50%);
+        }
+        .resizer:hover::after,
+        .resizer.active::after {
+          background: #1a73e8;
+        }
+        
+        #resizer-left {
+          margin-right: 5px;
+        }
+        #resizer-right {
+          margin-left: 5px;
+        }
+        #resizer-bottom {
+          margin-top: 5px;
+        }
+      </style>
+      <div class="flex">
+        <div class="side-div" id="left-div"></div>
+        <div class="resizer horizontal" id="resizer-left"></div>
+        <div class="center-column">
+          <div class="center-div" id="center-div">
+            <slot></slot>
+          </div>
+          <div class="resizer vertical" id="resizer-bottom"></div>
+        </div>
+        <div class="resizer horizontal" id="resizer-right"></div>
+        <div class="side-div" id="right-div"></div>
+      </div>
+    `;
+    }
+    static get observedAttributes() {
+        return SKIP_ATTRIBUTES.filter((attr) => !["id", "class"].includes(attr));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (!this.leftDiv)
+            return; // Not connected yet
+        switch (name) {
+            case "left":
+                this.leftDiv.style.width = newValue;
+                break;
+            case "center":
+                this.centerDiv.style.width = newValue;
+                break;
+            case "height":
+                this.centerDiv.style.height = newValue;
+                break;
+            case "style":
+                this.centerDiv.style.cssText = newValue;
+                this._applyInternalStylesToCenterDiv();
+                break;
+        }
+    }
+    connectedCallback() {
+        this.leftDiv = this.shadowRoot.getElementById("left-div");
+        this.rightDiv = this.shadowRoot.getElementById("right-div");
+        this.centerDiv = this.shadowRoot.getElementById("center-div");
+        this.resizerLeft = this.shadowRoot.getElementById("resizer-left");
+        this.resizerRight = this.shadowRoot.getElementById("resizer-right");
+        this.resizerBottom = this.shadowRoot.getElementById("resizer-bottom");
+        const attrLeft = this.getAttribute("left");
+        const attrCenter = this.getAttribute("center");
+        const attrHeight = this.getAttribute("height");
+        if (attrLeft) {
+            this.leftDiv.style.width = attrLeft;
+        }
+        if (attrCenter) {
+            this.centerDiv.style.width = attrCenter;
+        }
+        if (attrHeight) {
+            this.centerDiv.style.height = attrHeight;
+        }
+        this.setupResizer(this.resizerLeft, this.leftDiv, "left", false);
+        this.setupResizer(this.resizerRight, this.centerDiv, "center", false);
+        this.setupHeightResizer(this.resizerBottom, this.centerDiv);
+        this._initForwarding();
+        this._isReady = true;
+        this._resolveReady();
+    }
+    /** Resolves after the first `connectedCallback` (attributes applied to the layout panel). */
+    whenReady() {
+        return this._isReady ? Promise.resolve() : this._readyPromise;
+    }
+    static whenLayoutReady(el, maxFrames = 120) {
+        return new Promise((resolve, reject) => {
+            let frames = 0;
+            const tick = () => {
+                const { width, height } = el.getBoundingClientRect();
+                if (width > 0 && height > 0) {
+                    resolve();
+                    return;
+                }
+                if (++frames >= maxFrames) {
+                    reject(new Error("Layout root did not obtain non-zero dimensions"));
+                    return;
+                }
+                requestAnimationFrame(tick);
+            };
+            tick();
+        });
+    }
+    /** Wait for custom element upgrade, `connectedCallback`, and a non-zero layout panel. */
+    static async whenHostReady(container) {
+        await customElements.whenDefined(CenterAndHeightResizer.tagName);
+        const resizer = container.closest(CenterAndHeightResizer.tagName);
+        if (resizer) {
+            await resizer.whenReady();
+        }
+        const layoutRoot = resizer?.getContentRoot() ?? container;
+        await CenterAndHeightResizer.whenLayoutReady(layoutRoot);
+        return layoutRoot;
+    }
+    _applyInternalStylesToCenterDiv() {
+        const center = this.getAttribute("center");
+        if (center)
+            this.centerDiv.style.width = center;
+        const height = this.getAttribute("height");
+        if (height)
+            this.centerDiv.style.height = height;
+    }
+    _initForwarding() {
+        const observer = new MutationObserver((mutations) => {
+            let syncNeeded = false;
+            for (const mutation of mutations) {
+                if (mutation.type === "attributes") {
+                    if (!SKIP_ATTRIBUTES.includes(mutation.attributeName)) {
+                        syncNeeded = true;
+                        break;
+                    }
+                }
+            }
+            if (syncNeeded)
+                this._syncAttributes();
+        });
+        observer.observe(this, { attributes: true });
+        this._syncAttributes();
+    }
+    _syncAttributes() {
+        for (const attr of Array.from(this.attributes)) {
+            if (SKIP_ATTRIBUTES.includes(attr.name))
+                continue;
+            this.centerDiv.setAttribute(attr.name, attr.value);
+        }
+        if (this.hasAttribute("style")) {
+            this.centerDiv.style.cssText = this.getAttribute("style") || "";
+            this._applyInternalStylesToCenterDiv();
+        }
+    }
+    getContentRoot() {
+        return this.centerDiv || this.shadowRoot.getElementById("center-div");
+    }
+    setupResizer(handle, target, attrName, invert) {
+        handle.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+            handle.classList.add("active");
+            const startX = e.clientX;
+            const startWidth = target.offsetWidth;
+            const onMouseMove = (moveEvent) => {
+                let diff = moveEvent.clientX - startX;
+                if (invert)
+                    diff = -diff;
+                let newWidth = startWidth + diff;
+                newWidth = Math.max(0, newWidth);
+                target.style.width = newWidth + "px";
+                this.setAttribute(attrName, newWidth + "px");
+                const eventName = attrName === "left" ? "onLeft" : "onCenter";
+                this.dispatchEvent(new CustomEvent(eventName, { detail: { width: newWidth } }));
+            };
+            const onMouseUp = () => {
+                handle.classList.remove("active");
+                document.removeEventListener("mousemove", onMouseMove);
+                document.removeEventListener("mouseup", onMouseUp);
+            };
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+        });
+    }
+    setupHeightResizer(handle, target) {
+        handle.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+            handle.classList.add("active");
+            const startY = e.clientY;
+            const startHeight = target.offsetHeight;
+            const onMouseMove = (moveEvent) => {
+                const diff = moveEvent.clientY - startY;
+                let newHeight = startHeight + diff;
+                newHeight = Math.max(0, newHeight);
+                target.style.height = newHeight + "px";
+                this.setAttribute("height", newHeight + "px");
+                this.dispatchEvent(new CustomEvent("onHeight", { detail: { height: newHeight } }));
+            };
+            const onMouseUp = () => {
+                handle.classList.remove("active");
+                document.removeEventListener("mousemove", onMouseMove);
+                document.removeEventListener("mouseup", onMouseUp);
+            };
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+        });
+    }
+}
+customElements.define(CenterAndHeightResizer.tagName, CenterAndHeightResizer);

package/dist/esm/CenterResizer.js

@@ -0,0 +1,195 @@
+/**
+ *   <center-resizer
+ *      left="50px"
+ *      center="350px"
+ *      style="padding: 12px;"
+ *      data-test="idfortest"
+ *   >
+ *      <div>Content</div>
+ *   </center-resizer>
+ *
+ *   const resizer = document.querySelector('center-resizer');
+ *   resizer.addEventListener('onLeft', e => console.log(e.detail.width));
+ *   resizer.addEventListener('onCenter', e => console.log(e.detail.width));
+ */
+const SKIP_ATTRIBUTES = ["id", "class", "left", "center", "style"];
+export class CenterResizer extends HTMLElement {
+    leftDiv;
+    centerDiv;
+    rightDiv;
+    resizerLeft;
+    resizerRight;
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          padding: 0 !important;
+        }
+        .flex {
+          display: flex;
+          width: 100%;
+          align-items: stretch;
+        }
+        .center-div {
+          flex-shrink: 0;
+          min-width: 0;
+          padding-left: 15px;
+          padding-right: 15px;
+          box-sizing: border-box;
+        }
+        .side-div {
+          flex-shrink: 0;
+          box-sizing: border-box;
+        }
+        #right-div {
+          flex-grow: 1;
+        }
+        .resizer {
+          width: 8px;
+          cursor: col-resize;
+          flex-shrink: 0;
+          transition: background 0.2s;
+          user-select: none;
+          margin: 0 -4px;
+          position: relative;
+        }
+        .resizer:hover,
+        .resizer.active {
+          background: rgba(26, 115, 232, 0.2);
+        }
+        .resizer::after {
+          content: "";
+          position: absolute;
+          left: 50%;
+          top: 0;
+          bottom: 0;
+          width: 2px;
+          background: #ccc;
+          transform: translateX(-50%);
+        }
+        .resizer:hover::after,
+        .resizer.active::after {
+          background: #1a73e8;
+        }
+      </style>
+      <div class="flex">
+        <div class="side-div" id="left-div"></div>
+        <div class="resizer" id="resizer-left"></div>
+        <div class="center-div" id="center-div">
+          <slot></slot>
+        </div>
+        <div class="resizer" id="resizer-right"></div>
+        <div class="side-div" id="right-div"></div>
+      </div>
+    `;
+    }
+    static get observedAttributes() {
+        return SKIP_ATTRIBUTES.filter((attr) => !["id", "class"].includes(attr));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (!this.centerDiv)
+            return;
+        switch (name) {
+            case "left":
+                this.leftDiv.style.width = newValue;
+                break;
+            case "center":
+                this.centerDiv.style.width = newValue;
+                break;
+            case "style":
+                this.centerDiv.style.cssText = newValue;
+                this._applyInternalStylesToCenterDiv();
+                break;
+        }
+    }
+    connectedCallback() {
+        this.leftDiv = this.shadowRoot.getElementById("left-div");
+        this.centerDiv = this.shadowRoot.getElementById("center-div");
+        this.rightDiv = this.shadowRoot.getElementById("right-div");
+        this.resizerLeft = this.shadowRoot.getElementById("resizer-left");
+        this.resizerRight = this.shadowRoot.getElementById("resizer-right");
+        const attrLeft = this.getAttribute("left");
+        const attrCenter = this.getAttribute("center");
+        if (attrLeft) {
+            this.leftDiv.style.width = attrLeft;
+        }
+        if (attrCenter) {
+            this.centerDiv.style.width = attrCenter;
+        }
+        this.setupResizer(this.resizerLeft, this.leftDiv, "left");
+        this.setupResizer(this.resizerRight, this.centerDiv, "center");
+        this._initForwarding();
+    }
+    _applyInternalStylesToCenterDiv() {
+        const center = this.getAttribute("center");
+        if (center)
+            this.centerDiv.style.width = center;
+    }
+    _initForwarding() {
+        const observer = new MutationObserver((mutations) => {
+            let syncNeeded = false;
+            for (const mutation of mutations) {
+                if (mutation.type === "attributes") {
+                    if (!SKIP_ATTRIBUTES.includes(mutation.attributeName)) {
+                        syncNeeded = true;
+                        break;
+                    }
+                }
+            }
+            if (syncNeeded)
+                this._syncAttributes();
+        });
+        observer.observe(this, { attributes: true });
+        this._syncAttributes();
+    }
+    _syncAttributes() {
+        for (const attr of Array.from(this.attributes)) {
+            if (SKIP_ATTRIBUTES.includes(attr.name))
+                continue;
+            this.centerDiv.setAttribute(attr.name, attr.value);
+        }
+        if (this.hasAttribute("style")) {
+            this.centerDiv.style.cssText = this.getAttribute("style") || "";
+            this._applyInternalStylesToCenterDiv();
+        }
+    }
+    getContentRoot() {
+        return this.centerDiv || this.shadowRoot.getElementById("center-div");
+    }
+    setupResizer(handle, target, attributeName) {
+        handle.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+            handle.classList.add("active");
+            const startX = e.clientX;
+            const startWidth = target.offsetWidth;
+            const onMouseMove = (moveEvent) => {
+                let diff = moveEvent.clientX - startX;
+                let newWidth = startWidth + diff;
+                newWidth = Math.max(0, newWidth);
+                target.style.width = newWidth + "px";
+                if (attributeName === "center") {
+                    this.setAttribute("center", newWidth + "px");
+                    this.dispatchEvent(new CustomEvent("onCenter", { detail: { width: newWidth } }));
+                }
+                else {
+                    this.setAttribute("left", newWidth + "px");
+                    this.dispatchEvent(new CustomEvent("onLeft", { detail: { width: newWidth } }));
+                }
+            };
+            const onMouseUp = () => {
+                handle.classList.remove("active");
+                document.removeEventListener("mousemove", onMouseMove);
+                document.removeEventListener("mouseup", onMouseUp);
+            };
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+        });
+    }
+}
+customElements.define("center-resizer", CenterResizer);

package/dist/esm/Module.js

@@ -0,0 +1,12 @@
+/** @es.ts
+{
+   mode: "bundle",
+   extension: ".js",
+   options: {
+   }
+}
+@es.ts */
+export * from "./composite-monaco-diff.js";
+export * from "./MonacoDiffManager.js";
+// export * from "./react.js"
+export * from "./trimLeft.js";