@ixfx/components 0.2.2 → 0.2.4

package/dist/hex/hex-editor.js

@@ -0,0 +1,894 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { createShadeMap, getAsciiClass } from './colour.js';
+import { applyDiff, clearChangeset, createHexStore, getChangeset, readByte, reverseDiff, length as storeLength, writeByte, writeBytes } from './data.js';
+import { createUndoRedoStack, push as pushDiff, redo as redoDiff, undo as undoDiff } from './diff.js';
+import { bytesPerRow, clampPos, extendContiguous, extendRectangular, getCursorPos, getSelectedPositions, moveSelection, selectionContains, selectionFromPointerRange } from './selection.js';
+import { isContiguousSelection, isRectangularSelection } from './types.js';
+let IxfxHexEditorElement = class IxfxHexEditorElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = 4;
+        this.colourScheme = `ascii`;
+        this.showChangeset = true;
+        this.hideOffsetCol = false;
+        this.hideHexCol = false;
+        this.hideTextCol = false;
+        this._selection = null;
+        this._scrollTop = 0;
+        this._editState = null;
+        this._containerH = 0;
+        this._shadeMap = null;
+        this._focusSide = null;
+        this._store = createHexStore(new Uint8Array(0));
+        this._undoStack = createUndoRedoStack();
+        this._copyBuffer = null;
+        this._rowHeight = 24;
+        this._dragStart = null;
+        this._dragAnchor = null;
+        this._rectAnchorX = 0;
+        this._rectAnchorY = 0;
+        this._rectAnchorXFromKeyboard = 0;
+        this._rectAnchorYFromKeyboard = 0;
+        this._initialSelectionPoint = 0;
+        this._currentCursorPoint = 0;
+        this._pointerMode = null;
+        this._currentDragDiff = null;
+        this._shiftClickTarget = null;
+        this._onScroll = (e) => {
+            const target = e.target;
+            this._scrollTop = target.scrollTop;
+            this.requestUpdate();
+        };
+        this._onKeyDown = (e) => {
+            const isNavigationKey = [`ArrowLeft`, `ArrowRight`, `ArrowUp`, `ArrowDown`].includes(e.key);
+            if (isNavigationKey) {
+                e.preventDefault();
+                e.stopPropagation();
+                if (this._editState) {
+                    this._editState = null;
+                }
+                const dir = e.key.replace(`Arrow`, ``).toLowerCase();
+                const dataLen = storeLength(this._store);
+                const bpr = bytesPerRow(this.columns);
+                if (e.metaKey || e.ctrlKey) {
+                    if (!this._selection || this._selection.kind !== `rectangular`) {
+                        let startPos = 0;
+                        if (this._selection?.kind === `single`) {
+                            startPos = this._selection.pos;
+                        }
+                        else if (this._selection?.kind === `contiguous`) {
+                            startPos = Math.min(this._selection.start, this._selection.end);
+                        }
+                        this._rectAnchorXFromKeyboard = startPos % bpr;
+                        this._rectAnchorYFromKeyboard = Math.floor(startPos / bpr);
+                        this._selection = { kind: `rectangular`, x: this._rectAnchorXFromKeyboard, y: this._rectAnchorYFromKeyboard, width: 1, height: 1 };
+                    }
+                    this._selection = extendRectangular(this._selection, dir, this.columns, dataLen, this._rectAnchorXFromKeyboard, this._rectAnchorYFromKeyboard);
+                }
+                else if (e.shiftKey) {
+                    if (!this._selection) {
+                        this._initialSelectionPoint = 0;
+                        this._currentCursorPoint = 0;
+                    }
+                    else if (this._selection.kind === `single`) {
+                        this._initialSelectionPoint = this._selection.pos;
+                        this._currentCursorPoint = this._selection.pos;
+                    }
+                    else if (this._selection.kind === `rectangular`) {
+                        const cursorPos = this._selection.y * bpr + this._selection.x;
+                        this._initialSelectionPoint = cursorPos;
+                        this._currentCursorPoint = cursorPos;
+                    }
+                    const newPos = getCursorPos(this._selection, dir, this.columns, dataLen);
+                    const start = Math.min(this._initialSelectionPoint, newPos);
+                    const end = Math.max(this._initialSelectionPoint, newPos);
+                    this._currentCursorPoint = newPos;
+                    this._selection = { kind: `contiguous`, start, end };
+                }
+                else {
+                    this._selection = moveSelection(this._selection, dir, this.columns, dataLen);
+                    const pos = getCursorPos(this._selection, dir, this.columns, dataLen);
+                    this._initialSelectionPoint = pos;
+                    this._currentCursorPoint = pos;
+                }
+                this._dispatchSelectEvent();
+                this.requestUpdate();
+                return;
+            }
+            if (e.key === `Tab`) {
+                e.preventDefault();
+                e.stopPropagation();
+                if (this._editState) {
+                    this._advanceCursor();
+                }
+                else {
+                    const dataLen = storeLength(this._store);
+                    this._selection = moveSelection(this._selection, `right`, this.columns, dataLen);
+                    this._dispatchSelectEvent();
+                }
+                this.requestUpdate();
+                return;
+            }
+            if (e.key === `Escape`) {
+                e.preventDefault();
+                e.stopPropagation();
+                if (this._editState) {
+                    this._editState = null;
+                }
+                else if (this._selection && this._selection.kind !== `single`) {
+                    const sel = this._selection;
+                    let firstPos = 0;
+                    if (sel.kind === `contiguous`) {
+                        const c = sel;
+                        firstPos = Math.min(c.start, c.end);
+                    }
+                    if (sel.kind === `rectangular`) {
+                        const r = sel;
+                        firstPos = r.y * bytesPerRow(this.columns) + r.x;
+                    }
+                    this._selection = { kind: `single`, pos: firstPos };
+                    this._dispatchSelectEvent();
+                }
+                this.requestUpdate();
+                return;
+            }
+            if (this._editState) {
+                e.stopPropagation();
+                if (e.key === `Backspace`) {
+                    this._handleBackspace();
+                    return;
+                }
+                if (e.key === `Enter`) {
+                    if (this._editState.side === `hex` && this._editState.partial.startsWith(`.`)) {
+                        this._commitDecimalValue();
+                    }
+                    return;
+                }
+                if (e.key.length === 1) {
+                    this._handleValueEntry(e.key);
+                }
+                return;
+            }
+            if (this._selection && this._selection.kind === `single` && e.key.length === 1) {
+                e.preventDefault();
+                e.stopPropagation();
+                const pos = this._selection.pos;
+                const side = this._focusSide ?? `hex`;
+                this._editState = { pos, side, partial: `` };
+                this._handleValueEntry(e.key);
+            }
+        };
+    }
+    static { this.styles = css `
+    :host {
+      --hex-row-height: 24px;
+      --hex-offset-width: 8ch;
+      --hex-font: monospace;
+      --hex-font-size: 0.85rem;
+      --hex-changed-weight: bold;
+
+      --ascii-null: #808080;
+      --ascii-printable: #4caf50;
+      --ascii-whitespace: #ffffff;
+      --ascii-control: #f48fb1;
+      --ascii-other: #ffeb3b;
+
+      --shade-null: #808080;
+      --shade-max: #ffffff;
+      --shade-step-start: #ff0000;
+      --shade-step-end: #0000ff;
+
+      display: block;
+      font-family: var(--hex-font);
+      font-size: var(--hex-font-size);
+    }
+
+    .hex-editor {
+      display: flex;
+      flex-direction: column;
+      height: 300px;
+      overflow: hidden;
+      background: #1e1e1e;
+      color: #e0e0e0;
+      border: 1px solid #333;
+      border-radius: 4px;
+    }
+
+    .scroll-container {
+      flex: 1;
+      overflow-y: auto;
+      position: relative;
+    }
+
+    .header {
+      display: flex;
+      background: #2d2d2d;
+      font-weight: bold;
+      border-bottom: 1px solid #444;
+      height: var(--hex-row-height);
+      flex-shrink: 0;
+      align-items: center;
+    }
+
+    .row {
+      display: flex;
+      height: var(--hex-row-height);
+      align-items: center;
+    }
+
+    .row:hover {
+      background: rgba(255, 255, 255, 0.05);
+    }
+
+    .offset-cell {
+      width: var(--hex-offset-width);
+      padding: 0 8px;
+      text-align: right;
+      color: #888;
+      flex-shrink: 0;
+      box-sizing: border-box;
+    }
+
+    .col-group {
+      display: inline-flex;
+      gap: 4px;
+      margin-right: 16px;
+    }
+
+    .col-header {
+      width: calc(8ch + 28px);
+      padding: 0 8px;
+      color: #555;
+      text-align: right;
+      flex-shrink: 0;
+      box-sizing: border-box;
+    }
+
+    .col-header.active {
+      color: #aaa;
+    }
+
+    .text-header {
+      padding: 4px 8px;
+      color: #555;
+      width: calc(var(--columns, 4) * 4 * 1ch);
+      box-sizing: border-box;
+      flex-shrink: 0;
+    }
+
+    .text-header.active {
+      color: #aaa;
+    }
+
+    .hex-cell, .text-char {
+      display: inline-block;
+      width: 2ch;
+      text-align: center;
+      cursor: pointer;
+      user-select: none;
+      padding: 2px 0;
+    }
+
+    .hex-cell.selected, .text-char.selected {
+      background: rgba(100, 149, 237, 0.4);
+    }
+
+    .hex-cell.changed, .text-char.changed {
+      font-weight: var(--hex-changed-weight);
+    }
+
+    .hex-cell.editing {
+      background: rgba(255, 215, 0, 0.3);
+    }
+
+
+    .text-area {
+      display: inline-flex;
+      gap: 0;
+    }
+
+    .text-char {
+      width: 1ch;
+      text-align: left;
+    }
+
+    .byte-null { color: var(--ascii-null); }
+    .byte-printable { color: var(--ascii-printable); }
+    .byte-whitespace { color: var(--ascii-whitespace); }
+    .byte-control { color: var(--ascii-control); }
+    .byte-other { color: var(--ascii-other); }
+  `; }
+    setData(data) {
+        this._store = createHexStore(data);
+        this._undoStack = createUndoRedoStack();
+        this._selection = null;
+        this._editState = null;
+        this._scrollTop = 0;
+        this.requestUpdate();
+    }
+    undo() {
+        const diff = undoDiff(this._undoStack);
+        if (!diff)
+            return;
+        const reverse = reverseDiff(diff);
+        applyDiff(this._store, reverse);
+        this.requestUpdate();
+    }
+    redo() {
+        const diff = redoDiff(this._undoStack);
+        if (!diff)
+            return;
+        applyDiff(this._store, diff);
+        this.requestUpdate();
+    }
+    recomputeColours() {
+        const style = getComputedStyle(this);
+        const nullC = style.getPropertyValue(`--shade-null`).trim() || `#808080`;
+        const maxC = style.getPropertyValue(`--shade-max`).trim() || `#ffffff`;
+        const stepStart = style.getPropertyValue(`--shade-step-start`).trim() || `#ff0000`;
+        const stepEnd = style.getPropertyValue(`--shade-step-end`).trim() || `#0000ff`;
+        this._shadeMap = createShadeMap(nullC, maxC, stepStart, stepEnd);
+        this.requestUpdate();
+    }
+    *selectedBytes() {
+        const positions = getSelectedPositions(this._selection, this.columns);
+        for (let i = 0; i < positions.length; i++) {
+            const pos = positions[i];
+            yield {
+                selection_index: i,
+                array_index: pos,
+                value: readByte(this._store, pos),
+            };
+        }
+    }
+    containsPosition(pos) {
+        return selectionContains(this._selection, pos, this.columns);
+    }
+    selectSingle(position) {
+        this._selection = { kind: `single`, pos: position };
+        this._dispatchSelectEvent();
+        this.requestUpdate();
+    }
+    selectContiguous(start, end) {
+        this._selection = {
+            kind: `contiguous`,
+            start: start,
+            end: end,
+        };
+        this._dispatchSelectEvent();
+        this.requestUpdate();
+    }
+    selectRectangular(x, y, width, height) {
+        this._selection = {
+            kind: `rectangular`,
+            x,
+            y,
+            width,
+            height,
+        };
+        this._dispatchSelectEvent();
+        this.requestUpdate();
+    }
+    clearSelection() {
+        this._selection = null;
+        this._dispatchSelectEvent();
+        this.requestUpdate();
+    }
+    getSelection() {
+        return this._selection;
+    }
+    firstUpdated() {
+        const container = this.shadowRoot?.querySelector(`.scroll-container`);
+        if (container) {
+            const ro = new ResizeObserver((entries) => {
+                this._containerH = entries[0].contentRect.height;
+                this.requestUpdate();
+            });
+            ro.observe(container);
+            this._containerH = container.clientHeight;
+        }
+        this.recomputeColours();
+    }
+    _onPointerDown(pos, side, e) {
+        e.preventDefault();
+        if (e.button !== 0)
+            return;
+        this.shadowRoot?.querySelector(`.hex-editor`)?.focus();
+        this._focusSide = side;
+        const target = e.target;
+        target.setPointerCapture(e.pointerId);
+        const bpr = bytesPerRow(this.columns);
+        const startX = pos % bpr;
+        const startY = Math.floor(pos / bpr);
+        if (e.metaKey || e.ctrlKey) {
+            this._pointerMode = `select-rect`;
+            this._dragAnchor = pos;
+            this._rectAnchorX = startX;
+            this._rectAnchorY = startY;
+        }
+        else if (e.shiftKey) {
+            this._pointerMode = `select-cont`;
+            if (!this._selection || this._selection.kind !== `single`) {
+                this._dragAnchor = pos;
+            }
+            else {
+                this._dragAnchor = this._selection.pos;
+                this._shiftClickTarget = pos;
+            }
+        }
+        else {
+            this._pointerMode = `pending`;
+            this._dragStart = { pos, startValue: readByte(this._store, pos), startY: e.clientY, startX: e.clientX };
+            this._dragAnchor = pos;
+            this._currentDragDiff = null;
+        }
+    }
+    _onPointerMove(pos, _side, e) {
+        if (!this._dragStart)
+            return;
+        const dy = Math.abs(e.clientY - this._dragStart.startY);
+        const dx = Math.abs(e.clientX - this._dragStart.startX);
+        if (this._pointerMode === `pending` && dy > 4 && dy > dx) {
+            this._pointerMode = `drag-value`;
+            this._editState = null;
+        }
+        if (this._pointerMode === `drag-value`) {
+            const delta = Math.round((e.clientY - this._dragStart.startY) / 4);
+            const newValue = Math.max(0, Math.min(255, this._dragStart.startValue - delta));
+            this._currentDragDiff = writeByte(this._store, pos, newValue);
+            this.requestUpdate();
+        }
+        if (this._pointerMode === `select-cont`) {
+            if (this._dragAnchor !== null) {
+                const mode = `contiguous`;
+                this._selection = selectionFromPointerRange(this._dragAnchor, pos, mode, this.columns);
+                this._dispatchSelectEvent();
+            }
+        }
+        if (this._pointerMode === `select-rect`) {
+            const bpr = bytesPerRow(this.columns);
+            const currentX = pos % bpr;
+            const currentY = Math.floor(pos / bpr);
+            const x = Math.min(this._rectAnchorX, currentX);
+            const y = Math.min(this._rectAnchorY, currentY);
+            const width = Math.abs(currentX - this._rectAnchorX) + 1;
+            const height = Math.abs(currentY - this._rectAnchorY) + 1;
+            this._selection = { kind: `rectangular`, x, y, width, height };
+            this._dispatchSelectEvent();
+        }
+    }
+    _onPointerUp(pos, side, e) {
+        const target = e.target;
+        target.releasePointerCapture(e.pointerId);
+        if (this._pointerMode === `pending`) {
+            this._selection = { kind: `single`, pos };
+            this._initialSelectionPoint = pos;
+            this._currentCursorPoint = pos;
+            this._editState = { pos, side, partial: `` };
+            this._dispatchSelectEvent();
+        }
+        if (this._pointerMode === `select-cont`) {
+            if (this._dragAnchor !== null && this._shiftClickTarget !== null) {
+                this._selection = {
+                    kind: `contiguous`,
+                    start: this._dragAnchor,
+                    end: this._shiftClickTarget,
+                };
+                this._initialSelectionPoint = Math.min(this._dragAnchor, this._shiftClickTarget);
+                this._currentCursorPoint = Math.max(this._dragAnchor, this._shiftClickTarget);
+                this._dispatchSelectEvent();
+            }
+            else if (this._dragAnchor !== null) {
+                const mode = `contiguous`;
+                this._selection = selectionFromPointerRange(this._dragAnchor, pos, mode, this.columns);
+                this._initialSelectionPoint = this._dragAnchor;
+                this._currentCursorPoint = pos;
+                this._dispatchSelectEvent();
+            }
+        }
+        if (this._pointerMode === `select-rect`) {
+            const bpr = bytesPerRow(this.columns);
+            const currentX = pos % bpr;
+            const currentY = Math.floor(pos / bpr);
+            const x = Math.min(this._rectAnchorX, currentX);
+            const y = Math.min(this._rectAnchorY, currentY);
+            const width = Math.abs(currentX - this._rectAnchorX) + 1;
+            const height = Math.abs(currentY - this._rectAnchorY) + 1;
+            this._selection = { kind: `rectangular`, x, y, width, height };
+            this._dispatchSelectEvent();
+        }
+        if (this._pointerMode === `drag-value` && this._currentDragDiff) {
+            pushDiff(this._undoStack, this._currentDragDiff);
+            this._dispatchChangeEvent(this._currentDragDiff);
+        }
+        this._pointerMode = null;
+        this._dragStart = null;
+        this._dragAnchor = null;
+        this._currentDragDiff = null;
+        this._shiftClickTarget = null;
+    }
+    _handleBackspace() {
+        if (!this._editState)
+            return;
+        this._editState = { ...this._editState, partial: `` };
+        this.requestUpdate();
+    }
+    _handleValueEntry(key) {
+        if (!this._editState)
+            return;
+        const { pos, side, partial } = this._editState;
+        if (side === `text`) {
+            if (key.length === 1 && key.charCodeAt(0) >= 0x20 && key.charCodeAt(0) <= 0x7E) {
+                const value = key.charCodeAt(0);
+                const diff = writeByte(this._store, pos, value);
+                pushDiff(this._undoStack, diff);
+                this._dispatchChangeEvent(diff);
+                this._advanceCursor();
+            }
+            return;
+        }
+        if (partial === `` && key === `.`) {
+            this._editState = { ...this._editState, partial: `.` };
+            this.requestUpdate();
+            return;
+        }
+        if (partial.startsWith(`.`)) {
+            if (/\d/.test(key)) {
+                let newPartial = partial + key;
+                if (Number(newPartial.slice(1)) > 255) {
+                    newPartial = `.255`;
+                }
+                this._editState = { ...this._editState, partial: newPartial };
+                this.requestUpdate();
+            }
+            return;
+        }
+        const hexChars = `0123456789ABCDEFabcdef`;
+        if (hexChars.includes(key)) {
+            const newPartial = (partial + key.toUpperCase()).slice(-2);
+            this._editState = { ...this._editState, partial: newPartial };
+            this.requestUpdate();
+            if (newPartial.length === 2) {
+                const value = Number.parseInt(newPartial, 16);
+                const diff = writeByte(this._store, pos, value);
+                pushDiff(this._undoStack, diff);
+                this._dispatchChangeEvent(diff);
+                this._advanceCursor();
+            }
+        }
+        else if (partial !== ``) {
+            this._editState = { ...this._editState, partial: `` };
+            this.requestUpdate();
+        }
+    }
+    _commitDecimalValue() {
+        if (!this._editState)
+            return;
+        const value = Number.parseInt(this._editState.partial.slice(1), 10);
+        if (!isNaN(value)) {
+            const diff = writeByte(this._store, this._editState.pos, value);
+            pushDiff(this._undoStack, diff);
+            this._dispatchChangeEvent(diff);
+            this._advanceCursor();
+        }
+    }
+    _advanceCursor() {
+        if (!this._editState)
+            return;
+        const dataLen = storeLength(this._store);
+        const newPos = clampPos(this._editState.pos + 1, dataLen);
+        this._editState = { pos: newPos, side: this._editState.side, partial: `` };
+        this._selection = { kind: `single`, pos: newPos };
+        this.requestUpdate();
+    }
+    _dispatchChangeEvent(diff) {
+        this.dispatchEvent(new CustomEvent(`hex-change`, {
+            detail: { diff },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _dispatchSelectEvent() {
+        const sel = this._selection;
+        let detail;
+        if (!sel) {
+            detail = { type: `none` };
+        }
+        else if (sel.kind === `single`) {
+            detail = { type: `single`, position: sel.pos };
+        }
+        else if (sel.kind === `contiguous`) {
+            detail = { type: `contiguous`, start: sel.start, end: sel.end };
+        }
+        else if (sel.kind === `rectangular`) {
+            detail = { type: `rectangular`, x: sel.x, y: sel.y, width: sel.width, height: sel.height };
+        }
+        else {
+            detail = { type: `none` };
+        }
+        this.dispatchEvent(new CustomEvent(`select`, {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _copy() {
+        const positions = getSelectedPositions(this._selection, this.columns);
+        if (positions.length === 0)
+            return;
+        const bytes = positions.map((p) => readByte(this._store, p));
+        this._copyBuffer = new Uint8Array(bytes);
+        const hexStr = bytes.map((b) => b.toString(16).padStart(2, `0`)).join(` `);
+        navigator.clipboard?.writeText(hexStr).catch(() => { });
+    }
+    async _paste() {
+        let bytes = null;
+        try {
+            const text = await navigator.clipboard?.readText();
+            if (text) {
+                bytes = this._parseHexString(text);
+            }
+        }
+        catch {
+            // ignore
+        }
+        if (!bytes && this._copyBuffer) {
+            bytes = Array.from(this._copyBuffer);
+        }
+        if (!bytes || bytes.length === 0)
+            return;
+        if (!this._selection)
+            return;
+        const entries = new Map();
+        if (this._selection.kind === `single`) {
+            const startPos = this._selection.pos;
+            const dataLen = storeLength(this._store);
+            for (let i = 0; i < bytes.length && startPos + i < dataLen; i++) {
+                entries.set(startPos + i, bytes[i]);
+            }
+        }
+        else if (this._selection.kind === `contiguous`) {
+            const startPos = Math.min(this._selection.start, this._selection.end);
+            const endPos = Math.max(this._selection.start, this._selection.end);
+            const available = endPos - startPos + 1;
+            for (let i = 0; i < Math.min(bytes.length, available); i++) {
+                entries.set(startPos + i, bytes[i]);
+            }
+        }
+        else if (this._selection.kind === `rectangular`) {
+            const { x, y, width, height } = this._selection;
+            const bpr = bytesPerRow(this.columns);
+            let byteIdx = 0;
+            for (let row = 0; row < height && byteIdx < bytes.length; row++) {
+                for (let col = 0; col < width && byteIdx < bytes.length; col++) {
+                    const pos = (y + row) * bpr + x + col;
+                    entries.set(pos, bytes[byteIdx++]);
+                }
+            }
+        }
+        if (entries.size > 0) {
+            const diff = writeBytes(this._store, entries);
+            pushDiff(this._undoStack, diff);
+            this._dispatchChangeEvent(diff);
+            this.requestUpdate();
+        }
+    }
+    _parseHexString(text) {
+        const bytes = [];
+        const cleaned = text.replace(/[^0-9A-F]/gi, ` `).trim();
+        if (!cleaned)
+            return bytes;
+        const parts = cleaned.split(/\s+/);
+        for (const part of parts) {
+            if (part.length === 1) {
+                bytes.push(Number.parseInt(part + part, 16));
+            }
+            else if (part.length === 2) {
+                bytes.push(Number.parseInt(part, 16));
+            }
+        }
+        return bytes;
+    }
+    _getColHeaders() {
+        const headers = [];
+        for (let i = 0; i < this.columns; i++) {
+            const offset = i * 4;
+            headers.push(`+${offset.toString(16).toUpperCase()}`);
+        }
+        return headers;
+    }
+    _isRowShaded(pos) {
+        const sel = this._selection;
+        if (!sel || sel.kind !== `single`)
+            return true;
+        const bpr = bytesPerRow(this.columns);
+        const row = Math.floor(pos / bpr);
+        const selRow = Math.floor(sel.pos / bpr);
+        return row === selRow;
+    }
+    _isHexShaded(pos) {
+        return this._isRowShaded(pos);
+    }
+    _isTextShaded(pos) {
+        return this._isRowShaded(pos);
+    }
+    render() {
+        const dataLen = storeLength(this._store);
+        const bpr = bytesPerRow(this.columns);
+        const totalRows = Math.ceil(dataLen / bpr);
+        const containerH = this._containerH > 0 ? this._containerH : 280;
+        const startRow = Math.floor(this._scrollTop / this._rowHeight);
+        const endRow = Math.min(startRow + Math.ceil(containerH / this._rowHeight) + 2, totalRows);
+        const topSpacerHeight = startRow * this._rowHeight;
+        const botSpacerHeight = (totalRows - endRow) * this._rowHeight;
+        const changeset = getChangeset(this._store);
+        const colHeaders = this._getColHeaders();
+        const hexActive = this._focusSide === `hex` || this._focusSide === null;
+        const textActive = this._focusSide === `text`;
+        return html `
+      <div class="hex-editor" tabindex="0" @keydown=${this._onKeyDown} @pointerleave=${() => { }}>
+        <div class="header">
+          ${this.hideOffsetCol ? null : html `<span class="offset-cell">Offset</span>`}
+          ${this.hideHexCol ? null : repeat(colHeaders, h => html `<span class="col-header ${hexActive ? `active` : ``}">${h}</span>`)}
+          ${this.hideTextCol ? null : html `<span class="text-header ${textActive ? `active` : ``}">Text</span>`}
+        </div>
+        <div class="scroll-container" @scroll=${this._onScroll}>
+          <div style="height: ${topSpacerHeight}px"></div>
+          ${repeat(Array.from({ length: endRow - startRow }, (_, i) => startRow + i), rowIndex => rowIndex, rowIndex => this._renderRow(rowIndex, changeset))}
+          <div style="height: ${botSpacerHeight}px"></div>
+        </div>
+      </div>
+    `;
+    }
+    _renderRow(rowIndex, changeset) {
+        const bpr = bytesPerRow(this.columns);
+        const offset = rowIndex * bpr;
+        return html `
+      <div class="row" data-row=${rowIndex}>
+        ${this.hideOffsetCol ? null : html `<span class="offset-cell">${offset.toString(16).toUpperCase().padStart(6, `0`)}</span>`}
+        ${this.hideHexCol
+            ? null
+            : repeat(Array.from({ length: this.columns }, (_, i) => i), colIndex => colIndex, colIndex => this._renderColumn(rowIndex, colIndex, changeset))}
+        ${this.hideTextCol
+            ? null
+            : html `
+          <span class="text-area">
+            ${repeat(Array.from({ length: bpr }, (_, i) => i), i => i, i => this._renderTextChar(offset + i, changeset))}
+          </span>
+        `}
+      </div>
+    `;
+    }
+    _renderColumn(rowIndex, colIndex, changeset) {
+        const bpr = bytesPerRow(this.columns);
+        const basePos = rowIndex * bpr + colIndex * 4;
+        return html `
+      <span class="col-group">
+        ${[0, 1, 2, 3].map(b => this._renderHexCell(basePos + b, changeset))}
+      </span>
+    `;
+    }
+    _renderHexCell(pos, changeset) {
+        const dataLen = storeLength(this._store);
+        if (pos >= dataLen) {
+            return html `<span class="hex-cell"></span>`;
+        }
+        const byte = readByte(this._store, pos);
+        const hexStr = byte.toString(16).toUpperCase().padStart(2, `0`);
+        const isSelected = selectionContains(this._selection, pos, this.columns);
+        const isChanged = this.showChangeset && changeset.has(pos);
+        const isEditing = this._editState?.pos === pos;
+        const classes = [`hex-cell`];
+        if (isSelected)
+            classes.push(`selected`);
+        if (isChanged)
+            classes.push(`changed`);
+        if (isEditing)
+            classes.push(`editing`);
+        if (this._isHexShaded(pos))
+            classes.push(`shaded`);
+        let displayText = hexStr;
+        let colourStyle;
+        if (isEditing && this._editState) {
+            displayText = this._editState.partial === `` ? hexStr : `${this._editState.partial}_`;
+        }
+        if (this.colourScheme === `shade` && this._shadeMap) {
+            colourStyle = { color: this._shadeMap.forByte(byte) };
+        }
+        else if (this.colourScheme === `ascii`) {
+            classes.push(getAsciiClass(byte));
+        }
+        return html `
+      <span
+        class=${classes.join(` `)}
+        style=${styleMap(colourStyle || {})}
+        @pointerdown=${(e) => this._onPointerDown(pos, `hex`, e)}
+        @pointerup=${(e) => this._onPointerUp(pos, `hex`, e)}
+        @pointermove=${(e) => this._onPointerMove(pos, `hex`, e)}
+      >${displayText}</span>
+    `;
+    }
+    _renderTextChar(pos, changeset) {
+        const dataLen = storeLength(this._store);
+        if (pos >= dataLen) {
+            return html `<span class="text-char"></span>`;
+        }
+        const byte = readByte(this._store, pos);
+        const char = byte >= 0x20 && byte <= 0x7E ? String.fromCharCode(byte) : `.`;
+        const isSelected = selectionContains(this._selection, pos, this.columns);
+        const isChanged = this.showChangeset && changeset.has(pos);
+        const classes = [`text-char`];
+        if (isSelected)
+            classes.push(`selected`);
+        if (isChanged)
+            classes.push(`changed`);
+        if (this._isTextShaded(pos))
+            classes.push(`shaded`);
+        let colourStyle;
+        if (this.colourScheme === `shade` && this._shadeMap) {
+            colourStyle = { color: this._shadeMap.forByte(byte) };
+        }
+        else if (this.colourScheme === `ascii`) {
+            classes.push(getAsciiClass(byte));
+        }
+        return html `
+      <span
+        class=${classes.join(` `)}
+        style=${styleMap(colourStyle || {})}
+        @pointerdown=${(e) => this._onPointerDown(pos, `text`, e)}
+        @pointerup=${(e) => this._onPointerUp(pos, `text`, e)}
+        @pointermove=${(e) => this._onPointerMove(pos, `text`, e)}
+      >${char}</span>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], IxfxHexEditorElement.prototype, "columns", void 0);
+__decorate([
+    property({ type: String })
+], IxfxHexEditorElement.prototype, "colourScheme", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxfxHexEditorElement.prototype, "showChangeset", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `hide-offset-col` })
+], IxfxHexEditorElement.prototype, "hideOffsetCol", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `hide-hex-col` })
+], IxfxHexEditorElement.prototype, "hideHexCol", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `hide-text-col` })
+], IxfxHexEditorElement.prototype, "hideTextCol", void 0);
+__decorate([
+    state()
+], IxfxHexEditorElement.prototype, "_selection", void 0);
+__decorate([
+    state()
+], IxfxHexEditorElement.prototype, "_scrollTop", void 0);
+__decorate([
+    state()
+], IxfxHexEditorElement.prototype, "_editState", void 0);
+__decorate([
+    state()
+], IxfxHexEditorElement.prototype, "_containerH", void 0);
+__decorate([
+    state()
+], IxfxHexEditorElement.prototype, "_shadeMap", void 0);
+__decorate([
+    state()
+], IxfxHexEditorElement.prototype, "_focusSide", void 0);
+IxfxHexEditorElement = __decorate([
+    customElement(`ixfx-hex-editor`)
+], IxfxHexEditorElement);
+export { IxfxHexEditorElement };
+//# sourceMappingURL=hex-editor.js.map