diff --git a/treb-embed/custom-element/spreadsheet-constructor.ts b/treb-embed/custom-element/spreadsheet-constructor.ts
new file mode 100644
index 00000000..eae3f1f2
--- /dev/null
+++ b/treb-embed/custom-element/spreadsheet-constructor.ts
@@ -0,0 +1,352 @@
+
+import html from './layout-template.html';
+import css from './style-main.scss';
+
+import css1 from 'treb-grid/style/grid-layout.scss';
+import css2 from 'treb-grid/style/grid.scss';
+import css3 from '../style/embed.scss';
+
+import { EmbeddedSpreadsheet } from '../src/embedded-spreadsheet';
+import type { EmbeddedSpreadsheetOptions } from 'treb-embed/src/options';
+
+interface ElementMap {
+ toolbar: HTMLElement,
+ sidebar: HTMLElement,
+ dialog: HTMLElement,
+ container: HTMLElement,
+ spreadsheet: HTMLElement,
+ 'toggle-sidebar-button': HTMLElement,
+}
+
+export class SpreadsheetConstructor {
+
+ protected static attached_stylesheets = false;
+
+ public elements: Partial = {};
+
+ public sheet?: EmbeddedSpreadsheet;
+
+ /**
+ * this is just lazy, we could use a list
+ */
+ public MapElements(element: Element|ShadowRoot) {
+ for (const child of Array.from(element.children)) {
+ if (child.id) {
+ this.elements[child.id as keyof ElementMap] = child as HTMLElement;
+ }
+ if (child.nodeType === 1) {
+ this.MapElements(child);
+ }
+ }
+ }
+
+ public ConstructElement(root: HTMLElement) {
+
+ if (!SpreadsheetConstructor.attached_stylesheets) {
+
+ const stylesheets: CSSStyleSheet[] = [];
+
+ for (const text of [css, css1, css2, css3]) {
+ const sheet = new CSSStyleSheet();
+ sheet.replaceSync(text);
+ stylesheets.push(sheet);
+ }
+
+ document.adoptedStyleSheets = [...document.adoptedStyleSheets, ...stylesheets];
+ SpreadsheetConstructor.attached_stylesheets = true;
+
+ }
+
+ root.classList.add('treb-root-node');
+ root.innerHTML = html;
+
+
+ /*
+
+ root.attachShadow({ mode: 'open' });
+ if (root.shadowRoot) {
+
+ const sheet = new CSSStyleSheet();
+ sheet.replaceSync(css);
+
+ const stylesheets: CSSStyleSheet[] = [sheet];
+
+ for (const text of [css1, css2, css3]) {
+ const sheet = new CSSStyleSheet();
+ sheet.replaceSync(text);
+ stylesheets.push(sheet);
+ }
+
+ root.shadowRoot.adoptedStyleSheets = stylesheets;
+ root.shadowRoot.innerHTML = html;
+ }
+
+ */
+
+ }
+
+ public AttachElement(root: HTMLElement) {
+
+ (window as any).sheet = this;
+
+ const options: Partial = {};
+ const names = root.getAttributeNames();
+
+ for (const name of names) {
+ let value: any = root.getAttribute(name);
+ if (value === null || value.toLowerCase() === 'true') {
+ value = true;
+ }
+ else {
+ const test = Number(value);
+ if (!isNaN(test)) {
+ value = test;
+ }
+ }
+ (options as any)[name] = value;
+ }
+
+ console.info({options});
+
+ this.MapElements(root);
+ this.sheet = new EmbeddedSpreadsheet({
+ container: this.elements.spreadsheet,
+ storage_key: 'temp',
+ tab_bar: 'auto',
+ add_tab: true,
+ delete_tab: true,
+ scale_control: true,
+ stats: true,
+ ...options,
+ });
+
+ this.elements.sidebar?.addEventListener('click', event => {
+ const command = (event.target as HTMLElement)?.dataset.command;
+ if (command) {
+ this.sheet?.ExecToolbarCommand(command, root);
+ }
+ });
+
+ // hide toolbar/sidebar here, if desired, before we attach transitions
+
+ // this.toolbar_element?.classList.add('hidden');
+ // this.sidebar_element?.classList.add('hidden');
+
+ // now attach transitions to marked elements (async)
+
+ const animated = Array.from(root.querySelectorAll('.animate'));
+
+ Promise.resolve().then(() => {
+ for (const element of animated) {
+ element.classList.remove('animate');
+ element.classList.add('animated');
+ }
+ });
+
+ const button = this.elements['toggle-sidebar-button'];
+ if (button) {
+ button.addEventListener('click', () => {
+ root.classList.toggle('collapsed');
+ });
+ }
+
+ //////////////////////////
+
+ // FIXME: could simplify
+ // could also walk the tree...
+
+ const resize_handle = root.querySelector('#resize-handle') as HTMLElement;
+ const resize_layout = root.querySelector('#resize-layout') as HTMLElement;
+ const mask = root.querySelector('#mask') as HTMLElement;
+ const target = root.querySelector('.treb-layout-resize-container') as HTMLElement;
+
+ const size = { width: 0, height: 0 };
+ const position = { x: 0, y: 0 };
+ const delta = { x: 0, y: 0 };
+
+ const Finish = () => {
+ mask.classList.remove('visible');
+
+ resize_layout?.classList.remove('visible');
+ resize_handle?.classList.remove('retain-opacity');
+
+ if (delta.x || delta.y) {
+ const rect = root.getBoundingClientRect();
+ (root as HTMLElement).style.width = (rect.width + delta.x) + 'px';
+ (root as HTMLElement).style.height = (rect.height + delta.y) + 'px';
+
+ this.sheet?.Resize();
+
+ }
+
+ };
+
+ mask?.addEventListener('mousemove', (event: MouseEvent) => {
+
+ if (event.buttons === 0) {
+ Finish();
+ }
+ else {
+ delta.x = event.screenX - position.x;
+ delta.y = event.screenY - position.y,
+ resize_layout.style.width = (size.width + delta.x) + 'px';
+ resize_layout.style.height = (size.height + delta.y) + 'px';
+ }
+ });
+
+ mask?.addEventListener('mouseup', (event: MouseEvent) => Finish());
+
+ resize_handle?.addEventListener('mousedown', (event: MouseEvent) => {
+
+ event.stopPropagation();
+ event.preventDefault();
+
+ mask.classList.add('visible');
+ mask.style.cursor = 'nw-resize';
+
+ resize_handle?.classList.add('retain-opacity');
+
+
+ position.x = event.screenX;
+ position.y = event.screenY;
+
+ delta.x = 0;
+ delta.y = 0;
+
+ if (resize_layout) {
+ resize_layout.classList.add('visible');
+ if (target) {
+ const host_rect = root.getBoundingClientRect() || { left: 0, top: 0 };
+ const rect = target.getBoundingClientRect();
+
+ resize_layout.style.top = (rect.top - host_rect.top) + 'px';
+ resize_layout.style.left = (rect.left - host_rect.left) + 'px';
+ resize_layout.style.width = rect.width + 'px';
+ resize_layout.style.height = rect.height + 'px';
+
+ size.width = rect.width;
+ size.height = rect.height;
+ }
+ }
+ });
+
+ ///////////////////////////////////////////
+
+ /*
+
+ const shadow = root.shadowRoot;
+
+ if (shadow) {
+
+ this.MapElements(shadow);
+
+ console.info('calling new ES, container', this.elements.container)
+ const sheet = new EmbeddedSpreadsheet({
+ container: this.elements.spreadsheet,
+ storage_key: 'temp',
+ });
+
+
+ // hide toolbar/sidebar here, if desired
+
+ // this.toolbar_element?.classList.add('hidden');
+ // this.sidebar_element?.classList.add('hidden');
+
+ // element transitions are set separately so we can hide stuff
+ // on the initial load without triggering any animations.
+
+ Promise.resolve().then(() => {
+ this.elements.toolbar?.classList.add('animated');
+ this.elements.sidebar?.classList.add('animated');
+ });
+
+ const button = this.elements['toggle-sidebar-button'];
+ if (button) {
+ button.addEventListener('click', () => {
+ this.elements.sidebar?.classList.toggle('hidden');
+ button.classList.toggle('sidebar-hidden');
+ });
+ }
+
+ // FIXME: could simplify
+ // could also walk the tree...
+
+ const resize_handle = shadow.querySelector('#resize-handle') as HTMLElement;
+ const resize_layout = shadow.querySelector('#resize-layout') as HTMLElement;
+ const mask = shadow.querySelector('#mask') as HTMLElement;
+ const target = shadow.querySelector('#main') as HTMLElement;
+
+ const size = { width: 0, height: 0 };
+ const position = { x: 0, y: 0 };
+ const delta = { x: 0, y: 0 };
+
+ const Finish = () => {
+ mask.classList.remove('visible');
+
+ resize_layout?.classList.remove('visible');
+ resize_handle?.classList.remove('retain-opacity');
+
+ if (delta.x || delta.y) {
+ const rect = shadow.host.getBoundingClientRect();
+ (shadow.host as HTMLElement).style.width = (rect.width + delta.x) + 'px';
+ (shadow.host as HTMLElement).style.height = (rect.height + delta.y) + 'px';
+ }
+
+ };
+
+ mask?.addEventListener('mousemove', (event: MouseEvent) => {
+
+ if (event.buttons === 0) {
+ Finish();
+ }
+ else {
+ delta.x = event.screenX - position.x;
+ delta.y = event.screenY - position.y,
+ resize_layout.style.width = (size.width + delta.x) + 'px';
+ resize_layout.style.height = (size.height + delta.y) + 'px';
+ }
+ });
+
+ mask?.addEventListener('mouseup', (event: MouseEvent) => Finish());
+
+ resize_handle?.addEventListener('mousedown', (event: MouseEvent) => {
+
+ event.stopPropagation();
+ event.preventDefault();
+
+ mask.classList.add('visible');
+ mask.style.cursor = 'nw-resize';
+
+ resize_handle?.classList.add('retain-opacity');
+
+
+ position.x = event.screenX;
+ position.y = event.screenY;
+
+ delta.x = 0;
+ delta.y = 0;
+
+ if (resize_layout) {
+ resize_layout.classList.add('visible');
+ if (target) {
+ const host_rect = shadow.host.getBoundingClientRect() || { left: 0, top: 0 };
+ const rect = target.getBoundingClientRect();
+
+ resize_layout.style.top = (rect.top - host_rect.top) + 'px';
+ resize_layout.style.left = (rect.left - host_rect.left) + 'px';
+ resize_layout.style.width = rect.width + 'px';
+ resize_layout.style.height = rect.height + 'px';
+
+ size.width = rect.width;
+ size.height = rect.height;
+ }
+ }
+ });
+
+ }
+
+ */
+
+ }
+
+}
\ No newline at end of file
diff --git a/treb-embed/custom-element/style-main.scss b/treb-embed/custom-element/style-main.scss
new file mode 100644
index 00000000..c7fde2b0
--- /dev/null
+++ b/treb-embed/custom-element/style-main.scss
@@ -0,0 +1,370 @@
+
+@import 'treb-icons.scss';
+
+:host, .treb-root-node {
+
+ all: initial;
+ font-family: var(--treb-font-stack, sans-serif); // stack
+ position: relative;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ grid-template-rows: auto minmax(0, 1fr);
+
+ // can we make these optional? [probably]
+ width: 600px;
+ height: 450px;
+
+}
+
+* {
+ box-sizing: border-box;
+}
+
+#toolbar {
+ // background: pink;
+
+ grid-row: 1;
+ grid-column: 1/3;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: .5em;
+ overflow: hidden;
+
+ &.animated {
+ transition: height var(--treb-layout-transition, .25s ease),
+ opacity var(--treb-layout-transition, .25s ease);
+ }
+
+ // toolbar defaults to hidden, set .toolbar-visible on the host/root
+ // element to show
+
+ // height: 2rem;
+
+ height: 0px;
+ opacity: 0;
+
+}
+
+#sidebar {
+ // background: lightskyblue;
+
+ padding-top: 1em;
+ grid-row: 2;
+ grid-column: 2;
+ display: flex;
+ flex-direction: column;
+ gap: .75em;
+ justify-content: flex-start;
+ overflow: hidden;
+ width: 2.5rem;
+ align-items: center;
+
+ // we use margin on the contained elements instead
+ // of padding on this component so that we can set
+ // width -> 0 to hide it
+
+ // actually we will need to use an explicit width for
+ // that to work (unless we want to measure it, which
+ // won't work if it starts closed)
+
+ &.animated {
+ transition: width var(--treb-sidebar-transition, .2s ease),
+ opacity var(--treb-sidebar-transition, .2s ease);
+ }
+
+ /*
+ &.hidden {
+ width: 0px;
+ opacity: 0;
+ }
+ */
+
+}
+
+:host, .treb-root-node {
+ &.toolbar-visible #toolbar {
+ height: 2rem;
+ opacity: 1;
+ }
+}
+
+:host, .treb-root-node {
+ &.collapsed #sidebar {
+ width: 0px;
+ opacity: 0;
+ }
+}
+
+
+#sidebar > button {
+
+ padding: 0;
+ margin: 0;
+ border: 0;
+ background: transparent;
+
+}
+
+#sidebar > button, #toggle-sidebar-button {
+
+ &::after {
+ display: block;
+ height: 24px;
+ width: 24px;
+ content: '';
+ background: #ccc;
+ mask-position: center;
+ -webkit-mask-position: center;
+ mask-repeat: no-repeat;
+ -webkit-mask-repeat: no-repeat;
+ transition: background-color 0.1s ease;
+ }
+
+ &:hover::after {
+ background: #666;
+ }
+
+}
+
+#toggle-sidebar-button {
+
+ position: absolute;
+ right: .5rem;
+ bottom: 4rem;
+ background: transparent;
+ border: 0;
+ border: 1px solid transparent;
+ height: 24px;
+ width: 24px;
+
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ margin: 0;
+
+ z-index: 99;
+
+ &::after {
+ height: 12px;
+ width: 12px;
+ mask-image: var(--treb-sidebar-icon-chevron-right);
+ -webkit-mask-image: var(--treb-sidebar-icon-chevron-right);
+ }
+
+}
+
+:host, .treb-root-node {
+ &.collapsed #toggle-sidebar-button {
+
+ border-color: #ccc;
+ border-right-color: #fff;
+ right: 0px;
+ border-top-right-radius: 0px;
+ border-bottom-right-radius: 0px;
+ &::after {
+ mask-image: var(--treb-sidebar-icon-chevron-left);
+ -webkit-mask-image: var(--treb-sidebar-icon-chevron-left);
+ }
+ background: #fff;
+
+ }
+}
+
+#spreadsheet {
+
+ grid-row: 2;
+ grid-column: 1;
+
+ position: relative;
+ display: grid;
+
+ grid-template-rows: auto minmax(0, 1fr) auto;
+ grid-template-columns: minmax(0, 1fr);
+
+}
+
+#main {
+ // border: 1px solid orange;
+ // grid-row: 3;
+ // grid-column: 1;
+
+ // this is relative so we can place the resize handle on top
+ // of the scrollbars in the contained element via absolute
+
+ position: relative;
+ box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .61);
+
+}
+
+.treb-layout-resize-container {
+ overflow: hidden;
+ position: relative;
+ display: flex;
+}
+
+#container {
+ overflow: scroll;
+ width: 100%;
+ height: 100%;
+}
+
+#spreadsheet-tiles {
+ display: grid;
+ grid-template-rows: 1fr 1fr;
+ grid-template-columns: 1fr 1fr;
+}
+
+.tile {
+ width: 400px;
+ height: 300px;
+}
+
+#resize-handle {
+ border: .5rem solid var(--treb-resize-handle-color, blue);
+ border-top-color: transparent;
+ border-left-color: transparent;
+ position: absolute;
+ bottom: 0px;
+ right: 0px;
+ cursor: nw-resize;
+
+ // the opacity change is just annoying, don't bother
+ /*
+ opacity: .35;
+ transition: opacity var(--treb-resize-transition, .1s ease-in-out);
+ &:hover, &.retain-opacity {
+ opacity: 1;
+ }
+ */
+
+ &.disabled {
+ display: none;
+ }
+
+}
+
+.spreadsheet-header {
+ &.hidden {
+ display: none;
+ }
+}
+
+#spreadsheet-header {
+ // background-color: aquamarine;
+ // grid-row: 2;
+ // grid-column: 1;
+ display: flex;
+ flex-direction: row;
+ gap: .5em;
+ padding: .5em 0;
+
+ & > div {
+ border-radius: 3px;
+ border: 1px solid #ccc;
+ padding: .25em;
+ line-height: 1.6;
+ }
+
+}
+
+#formula-editor {
+ flex-grow: 1;
+}
+
+/**
+ * switch to class for dupes
+ * this one (generally?) doesn't change, so we don't animate it
+ * /
+.spreadsheet-footer {
+
+ display: flex;
+ flex-direction: row;
+ gap: .5em;
+
+
+ &.hidden {
+ opacity: 0;
+ height: 0px;
+ overflow: hidden;
+ }
+
+}
+*/
+
+.spreadsheet-footer {
+ &.hidden {
+ display: none;
+ }
+}
+
+.flex-grow {
+ flex-grow: 1;
+}
+
+#mask {
+
+ // background: pink;
+ // opacity: .5;
+
+ z-index: 9999; // ugh
+
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 100vw;
+ height: 100vh;
+ display: none;
+ pointer-events: none;
+
+ &.visible {
+ display: block;
+ pointer-events: initial;
+ }
+
+}
+
+
+#resize-layout {
+
+ z-index: 9998; // ugh
+
+
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ border: 1px dotted var(--treb-resize-frame-color, blue);
+ width: 100%;
+ height: 100%;
+ display: none;
+
+ &.visible {
+ display: block;
+ }
+
+}
+
+#dialog {
+ position: absolute;
+ transform: translate(-50%, -50%);
+ top: 50%;
+ left: 50%;
+ border: 1px solid red;
+ border-radius: 3px;
+ box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .61);
+ background: #fff;
+ padding: 1rem;
+ display: none;
+
+ &.visible {
+ display: block;
+ }
+
+}
+
+.disable-on-dialog.disabled {
+ opacity: .5;
+ pointer-events: none;
+}
diff --git a/treb-embed/custom-element/treb-icons.scss b/treb-embed/custom-element/treb-icons.scss
new file mode 100644
index 00000000..7041fd1f
--- /dev/null
+++ b/treb-embed/custom-element/treb-icons.scss
@@ -0,0 +1,363 @@
+
+// :host {
+:root {
+
+ /* source: fontawesome-free-5.15.4-desktop/svgs/solid/external-link-alt.svg */
+ --treb-sidebar-icon-popout: url("data:image/svg+xml, ");
+
+ /* source: fontawesome-free-5.15.4-desktop/svgs/solid/sliders-h.svg */
+ --treb-sidebar-icon-toolbar: url("data:image/svg+xml, ");
+
+ /* source: fontawesome-free-5.15.4-desktop/svgs/solid/download.svg */
+ --treb-sidebar-icon-export: url("data:image/svg+xml, ");
+
+ /* source: fontawesome-free-5.15.4-desktop/svgs/solid/sync-alt.svg */
+ --treb-sidebar-icon-reset: url("data:image/svg+xml, ");
+
+ /* source: fontawesome-free-5.15.4-desktop/svgs/solid/question-circle.svg */
+ --treb-sidebar-icon-about: url("data:image/svg+xml, ");
+
+ /* source: fontawesome-free-5.15.4-desktop/svgs/solid/chevron-left.svg */
+ --treb-sidebar-icon-chevron-left: url("data:image/svg+xml, ");
+
+ /* source: fontawesome-free-5.15.4-desktop/svgs/solid/chevron-right.svg */
+ --treb-sidebar-icon-chevron-right: url("data:image/svg+xml, ");
+
+ /* source: fontawesome-free-5.15.4-desktop/svgs/solid/history.svg */
+ --treb-sidebar-icon-revert: url("data:image/svg+xml, ");
+
+ /* source: bootstrap-icons-1.8.3/text-left.svg */
+ --treb-icon-text-align-left: url("data:image/svg+xml,");
+
+ /* source: bootstrap-icons-1.8.3/text-center.svg */
+ --treb-icon-text-align-center: url("data:image/svg+xml,");
+
+ /* source: bootstrap-icons-1.8.3/text-right.svg */
+ --treb-icon-text-align-right: url("data:image/svg+xml,");
+
+ /* source: treb/align-up.svg */
+ --treb-icon-text-align-top: url("data:image/svg+xml, ");
+
+ /* source: bootstrap-icons-1.8.3/arrows-collapse.svg */
+ --treb-icon-text-align-middle: url("data:image/svg+xml,");
+
+ /* source: treb/align-down.svg */
+ --treb-icon-text-align-bottom: url("data:image/svg+xml, ");
+
+ /* source: bootstrap-icons-1.8.3/folder.svg */
+ --treb-icon-file-menu: url("data:image/svg+xml,");
+
+ /* source: treb/wrap.svg */
+ --treb-icon-wrap-text: url("data:image/svg+xml, ");
+
+ /* source: bootstrap-icons-1.8.3/fullscreen.svg */
+ --treb-icon-unmerge-cells: url("data:image/svg+xml,");
+
+ /* source: bootstrap-icons-1.8.3/fullscreen-exit.svg */
+ --treb-icon-merge-cells: url("data:image/svg+xml,");
+
+ /* source: bootstrap-icons-1.8.3/lock.svg */
+ --treb-icon-lock: url("data:image/svg+xml,");
+
+ /* source: bootstrap-icons-1.8.3/chat-square.svg */
+ --treb-icon-comment: url("data:image/svg+xml,");
+
+ /* source: bootstrap-icons-1.8.3/paint-bucket.svg */
+ --treb-icon-fill-color: url("data:image/svg+xml,");
+
+ /* source: treb/letter.svg */
+ --treb-icon-text-color: url("data:image/svg+xml, ");
+
+ /* source: bootstrap-icons-1.8.3/border-bottom.svg */
+ --treb-icon-border-bottom: url("data:image/svg+xml,");
+
+ /* source: bootstrap-icons-1.8.3/border-top.svg */
+ --treb-icon-border-top: url("data:image/svg+xml,");
+
+ /* source: bootstrap-icons-1.8.3/border-left.svg */
+ --treb-icon-border-left: url("data:image/svg+xml,");
+
+ /* source: bootstrap-icons-1.8.3/border-right.svg */
+ --treb-icon-border-right: url("data:image/svg+xml,");
+
+ /* source: treb/border-double-bottom.svg */
+ --treb-icon-border-double-bottom: url("data:image/svg+xml, ");
+
+ /* source: bootstrap-icons-1.8.3/border-all.svg */
+ --treb-icon-border-all: url("data:image/svg+xml,");
+
+ /* source: bootstrap-icons-1.8.3/border-outer.svg */
+ --treb-icon-border-outer: url("data:image/svg+xml,");
+
+ /* source: bootstrap-icons-1.8.3/border.svg */
+ --treb-icon-border-none: url("data:image/svg+xml,");
+
+ /* source: bootstrap-icons-1.8.3/palette2.svg */
+ --treb-icon-palette: url("data:image/svg+xml,");
+
+ /* source: treb/square.svg */
+ --treb-icon-layout: url("data:image/svg+xml, ");
+
+ /* source: bootstrap-icons-1.8.3/snow.svg */
+ --treb-icon-freeze: url("data:image/svg+xml,");
+
+ /* source: treb/column-chart.svg */
+ --treb-icon-column-chart: url("data:image/svg+xml, ");
+
+ /* source: treb/donut-chart.svg */
+ --treb-icon-donut-chart: url("data:image/svg+xml, ");
+
+ /* source: treb/bar-chart.svg */
+ --treb-icon-bar-chart: url("data:image/svg+xml, ");
+
+ /* source: treb/line-chart.svg */
+ --treb-icon-line-chart: url("data:image/svg+xml, ");
+
+ /* source: bootstrap-icons-1.8.3/image.svg */
+ --treb-icon-image: url("data:image/svg+xml,");
+
+ /* source: treb/rotate.svg */
+ --treb-icon-recalculate: url("data:image/svg+xml, ");
+
+ /* source: bootstrap-icons-1.8.3/check2.svg */
+ --treb-icon-check: url("data:image/svg+xml,");
+
+ /* source: bootstrap-icons-1.8.3/table.svg */
+ --treb-icon-table: url("data:image/svg+xml,");
+
+}
+
+
+#sidebar-recalculate-button::after {
+ mask-image: var(--treb-sidebar-icon-reset);
+ -webkit-mask-image: var(--treb-sidebar-icon-reset);
+}
+
+#sidebar-toolbar-button::after {
+ mask-image: var(--treb-sidebar-icon-toolbar);
+ -webkit-mask-image: var(--treb-sidebar-icon-toolbar);
+}
+
+#sidebar-export-button::after {
+ mask-image: var(--treb-sidebar-icon-export);
+ -webkit-mask-image: var(--treb-sidebar-icon-export);
+}
+
+#sidebar-about-button::after {
+ mask-image: var(--treb-sidebar-icon-about);
+ -webkit-mask-image: var(--treb-sidebar-icon-about);
+}
+
+#sidebar-revert-button::after {
+ mask-image: var(--treb-sidebar-icon-revert);
+ -webkit-mask-image: var(--treb-sidebar-icon-revert);
+}
+
+/*
+ .treb-sidebar-icon-popout {
+ mask-image: var(--treb-sidebar-icon-popout);
+ -webkit-mask-image: var(--treb-sidebar-icon-popout);
+ }
+
+ .treb-sidebar-icon-toolbar {
+ mask-image: var(--treb-sidebar-icon-toolbar);
+ -webkit-mask-image: var(--treb-sidebar-icon-toolbar);
+ }
+
+ .treb-sidebar-icon-export {
+ mask-image: var(--treb-sidebar-icon-export);
+ -webkit-mask-image: var(--treb-sidebar-icon-export);
+ }
+
+ .treb-sidebar-icon-reset {
+ mask-image: var(--treb-sidebar-icon-reset);
+ -webkit-mask-image: var(--treb-sidebar-icon-reset);
+ }
+
+ .treb-sidebar-icon-about {
+ mask-image: var(--treb-sidebar-icon-about);
+ -webkit-mask-image: var(--treb-sidebar-icon-about);
+ }
+
+ .treb-sidebar-icon-chevron-left {
+ mask-image: var(--treb-sidebar-icon-chevron-left);
+ -webkit-mask-image: var(--treb-sidebar-icon-chevron-left);
+ }
+
+ .treb-sidebar-icon-chevron-right {
+ mask-image: var(--treb-sidebar-icon-chevron-right);
+ -webkit-mask-image: var(--treb-sidebar-icon-chevron-right);
+ }
+
+ .treb-sidebar-icon-revert {
+ mask-image: var(--treb-sidebar-icon-revert);
+ -webkit-mask-image: var(--treb-sidebar-icon-revert);
+ }
+
+ .treb-icon-text-align-left {
+ mask-image: var(--treb-icon-text-align-left);
+ -webkit-mask-image: var(--treb-icon-text-align-left);
+ }
+
+ .treb-icon-text-align-center {
+ mask-image: var(--treb-icon-text-align-center);
+ -webkit-mask-image: var(--treb-icon-text-align-center);
+ }
+
+ .treb-icon-text-align-right {
+ mask-image: var(--treb-icon-text-align-right);
+ -webkit-mask-image: var(--treb-icon-text-align-right);
+ }
+
+ .treb-icon-text-align-top {
+ mask-image: var(--treb-icon-text-align-top);
+ -webkit-mask-image: var(--treb-icon-text-align-top);
+ }
+
+ .treb-icon-text-align-middle {
+ mask-image: var(--treb-icon-text-align-middle);
+ -webkit-mask-image: var(--treb-icon-text-align-middle);
+ }
+
+ .treb-icon-text-align-bottom {
+ mask-image: var(--treb-icon-text-align-bottom);
+ -webkit-mask-image: var(--treb-icon-text-align-bottom);
+ }
+
+ .treb-icon-file-menu {
+ mask-image: var(--treb-icon-file-menu);
+ -webkit-mask-image: var(--treb-icon-file-menu);
+ }
+
+ .treb-icon-wrap-text {
+ mask-image: var(--treb-icon-wrap-text);
+ -webkit-mask-image: var(--treb-icon-wrap-text);
+ }
+
+ .treb-icon-unmerge-cells {
+ mask-image: var(--treb-icon-unmerge-cells);
+ -webkit-mask-image: var(--treb-icon-unmerge-cells);
+ }
+
+ .treb-icon-merge-cells {
+ mask-image: var(--treb-icon-merge-cells);
+ -webkit-mask-image: var(--treb-icon-merge-cells);
+ }
+
+ .treb-icon-lock {
+ mask-image: var(--treb-icon-lock);
+ -webkit-mask-image: var(--treb-icon-lock);
+ }
+
+ .treb-icon-comment {
+ mask-image: var(--treb-icon-comment);
+ -webkit-mask-image: var(--treb-icon-comment);
+ }
+
+ .treb-icon-fill-color {
+ mask-image: var(--treb-icon-fill-color);
+ -webkit-mask-image: var(--treb-icon-fill-color);
+ }
+
+ .treb-icon-text-color {
+ mask-image: var(--treb-icon-text-color);
+ -webkit-mask-image: var(--treb-icon-text-color);
+ }
+
+ .treb-icon-border-bottom {
+ mask-image: var(--treb-icon-border-bottom);
+ -webkit-mask-image: var(--treb-icon-border-bottom);
+ }
+
+ .treb-icon-border-top {
+ mask-image: var(--treb-icon-border-top);
+ -webkit-mask-image: var(--treb-icon-border-top);
+ }
+
+ .treb-icon-border-left {
+ mask-image: var(--treb-icon-border-left);
+ -webkit-mask-image: var(--treb-icon-border-left);
+ }
+
+ .treb-icon-border-right {
+ mask-image: var(--treb-icon-border-right);
+ -webkit-mask-image: var(--treb-icon-border-right);
+ }
+
+ .treb-icon-border-double-bottom {
+ mask-image: var(--treb-icon-border-double-bottom);
+ -webkit-mask-image: var(--treb-icon-border-double-bottom);
+ }
+
+ .treb-icon-border-all {
+ mask-image: var(--treb-icon-border-all);
+ -webkit-mask-image: var(--treb-icon-border-all);
+ }
+
+ .treb-icon-border-outer {
+ mask-image: var(--treb-icon-border-outer);
+ -webkit-mask-image: var(--treb-icon-border-outer);
+ }
+
+ .treb-icon-border-none {
+ mask-image: var(--treb-icon-border-none);
+ -webkit-mask-image: var(--treb-icon-border-none);
+ }
+
+ .treb-icon-palette {
+ mask-image: var(--treb-icon-palette);
+ -webkit-mask-image: var(--treb-icon-palette);
+ }
+
+ .treb-icon-layout {
+ mask-image: var(--treb-icon-layout);
+ -webkit-mask-image: var(--treb-icon-layout);
+ }
+
+ .treb-icon-freeze {
+ mask-image: var(--treb-icon-freeze);
+ -webkit-mask-image: var(--treb-icon-freeze);
+ }
+
+ .treb-icon-column-chart {
+ mask-image: var(--treb-icon-column-chart);
+ -webkit-mask-image: var(--treb-icon-column-chart);
+ }
+
+ .treb-icon-donut-chart {
+ mask-image: var(--treb-icon-donut-chart);
+ -webkit-mask-image: var(--treb-icon-donut-chart);
+ }
+
+ .treb-icon-bar-chart {
+ mask-image: var(--treb-icon-bar-chart);
+ -webkit-mask-image: var(--treb-icon-bar-chart);
+ }
+
+ .treb-icon-line-chart {
+ mask-image: var(--treb-icon-line-chart);
+ -webkit-mask-image: var(--treb-icon-line-chart);
+ }
+
+ .treb-icon-image {
+ mask-image: var(--treb-icon-image);
+ -webkit-mask-image: var(--treb-icon-image);
+ }
+
+ .treb-icon-recalculate {
+ mask-image: var(--treb-icon-recalculate);
+ -webkit-mask-image: var(--treb-icon-recalculate);
+ }
+
+ .treb-icon-check {
+ mask-image: var(--treb-icon-check);
+ -webkit-mask-image: var(--treb-icon-check);
+ }
+
+ .treb-icon-table {
+ mask-image: var(--treb-icon-table);
+ -webkit-mask-image: var(--treb-icon-table);
+ }
+
+}
+*/
diff --git a/treb-embed/custom-element/treb-spreadsheet-element.ts b/treb-embed/custom-element/treb-spreadsheet-element.ts
new file mode 100644
index 00000000..878923ca
--- /dev/null
+++ b/treb-embed/custom-element/treb-spreadsheet-element.ts
@@ -0,0 +1,23 @@
+
+import { SpreadsheetConstructor } from './spreadsheet-constructor';
+
+export { SpreadsheetConstructor }; // re-export
+
+class TREBElement extends HTMLElement {
+
+ public instance = new SpreadsheetConstructor();
+
+ constructor() {
+ super();
+ this.instance.ConstructElement(this);
+ }
+
+ public connectedCallback() {
+ this.instance.AttachElement(this);
+ }
+
+}
+
+customElements.define('treb-spreadsheet', TREBElement);
+
+
diff --git a/treb-embed/src/embedded-spreadsheet.ts b/treb-embed/src/embedded-spreadsheet.ts
index 85bcdca9..a5db761e 100644
--- a/treb-embed/src/embedded-spreadsheet.ts
+++ b/treb-embed/src/embedded-spreadsheet.ts
@@ -595,6 +595,9 @@ export class EmbeddedSpreadsheet {
if (container) {
+
+ /* TEMP disabling (for component)
+
this.view = document.createElement('div');
this.view.classList.add('treb-view');
@@ -606,6 +609,10 @@ export class EmbeddedSpreadsheet {
this.view.appendChild(this.node);
container.appendChild(this.view);
+ */
+
+ this.node = container;
+
this.node.addEventListener('focusin', () => {
this.focus_target = this;
});
@@ -1031,6 +1038,11 @@ export class EmbeddedSpreadsheet {
* @internal
*/
public Unsplit(): void {
+
+ throw new Error('ENOTIMPL');
+
+ /*
+
// console.info("unsplit", this.views);
const target = this.views.pop();
if (target) {
@@ -1055,6 +1067,9 @@ export class EmbeddedSpreadsheet {
this.node?.focus();
}
+
+ */
+
}
/**
@@ -1066,6 +1081,10 @@ export class EmbeddedSpreadsheet {
*/
public Split(): void {
+ throw new Error('ENOTIMPL');
+
+ /*
+
const view = this.CreateView();
view.grid.EnsureActiveSheet(true);
@@ -1122,6 +1141,8 @@ export class EmbeddedSpreadsheet {
subscription,
});
+ */
+
}
protected HandleToolbarEvent(event: ToolbarEvent): void {
@@ -1466,6 +1487,26 @@ export class EmbeddedSpreadsheet {
}
+ /**
+ *
+ * @internal
+ */
+ public ExecToolbarCommand(command: string, host: HTMLElement) {
+ switch (command) {
+ case 'toggle-toolbar':
+ host.classList.toggle('toolbar-visible');
+ break;
+
+ case 'recalculate':
+ this.Recalculate();
+ break;
+
+ default:
+ console.info('unhandled command', command);
+ break;
+ }
+ }
+
/**
* this is public because it's created by the composite sheet.
* FIXME: perhaps there's a better way to do that? via message passing? (...)
diff --git a/treb-grid/src/editors/formula_bar.ts b/treb-grid/src/editors/formula_bar.ts
index ae7057b0..fc63ad8c 100644
--- a/treb-grid/src/editors/formula_bar.ts
+++ b/treb-grid/src/editors/formula_bar.ts
@@ -1,24 +1,24 @@
-/*
- * This file is part of TREB.
- *
- * TREB is free software: you can redistribute it and/or modify it under the
- * terms of the GNU General Public License as published by the Free Software
- * Foundation, either version 3 of the License, or (at your option) any
- * later version.
- *
- * TREB is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
- * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
- * details.
- *
- * You should have received a copy of the GNU General Public License along
- * with TREB. If not, see .
- *
- * Copyright 2022-2023 trebco, llc.
- * info@treb.app
- *
- */
-
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the
+ * terms of the GNU General Public License as published by the Free Software
+ * Foundation, either version 3 of the License, or (at your option) any
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with TREB. If not, see .
+ *
+ * Copyright 2022-2023 trebco, llc.
+ * info@treb.app
+ *
+ */
+
import { Yield } from 'treb-utils';
import { DOMUtilities } from '../util/dom_utilities';
@@ -176,21 +176,25 @@ export class FormulaBar extends FormulaEditorBase {
// create layout. need a flex patch for chrome
- const outer_node = DOMUtilities.CreateDiv('treb-formula-bar-container notranslate', container);
- const inner_node = DOMUtilities.CreateDiv('treb-formula-bar', outer_node);
+ // const outer_node = DOMUtilities.CreateDiv('treb-formula-bar-container notranslate', container);
+ //const inner_node = DOMUtilities.CreateDiv('treb-formula-bar', outer_node);
+
+ // const outer_node = container.querySelector('.treb-formula-bar-container') as HTMLDivElement;
+ // outer_node.classList.remove('hidden');
+
+ const inner_node= container.querySelector('.treb-formula-bar') as HTMLDivElement;
- // this.node = DOMUtilities.CreateDiv('treb-formula-bar', container);
+ // this.address_label_container = DOMUtilities.CreateDiv('address-label', inner_node);
+ // this.address_label = DOMUtilities.CreateDiv('', this.address_label_container);
- this.address_label_container = DOMUtilities.CreateDiv('address-label', inner_node);
- this.address_label = DOMUtilities.CreateDiv('', this.address_label_container);
+ this.address_label_container = inner_node.querySelector('.address-label') as HTMLDivElement;
+ this.address_label = this.address_label_container.querySelector('div') as HTMLDivElement;
this.InitAddressLabel();
if (this.options.insert_function_button) {
this.button = DOMUtilities.Create('button', 'formula-button', inner_node);
- //const text1 = DOMUtilities.Create('span', 'text-1', this.button);
- //const text2 = DOMUtilities.Create('span', 'text-2', this.button);
this.button.addEventListener('click', () => {
const formula: string = this.editor_node ? this.editor_node.textContent || '' : '';
@@ -199,9 +203,12 @@ export class FormulaBar extends FormulaEditorBase {
}
- this.container_node = DOMUtilities.CreateDiv('editor-container', inner_node);
- this.editor_node = DOMUtilities.CreateDiv('formula-editor', this.container_node);
- this.editor_node.setAttribute('contenteditable', 'true');
+ // this.container_node = DOMUtilities.CreateDiv('editor-container', inner_node);
+ // this.editor_node = DOMUtilities.CreateDiv('formula-editor', this.container_node);
+ // this.editor_node.setAttribute('contenteditable', 'true');
+
+ this.container_node = inner_node.querySelector('.editor-container') as HTMLDivElement;
+ this.editor_node = this.container_node.querySelector('.formula-editor') as HTMLDivElement;
// flag for composing via IME. when this is set we don't want to
// handle input events.
diff --git a/treb-grid/src/editors/formula_editor_base.ts b/treb-grid/src/editors/formula_editor_base.ts
index 1cb3079e..e3a083b9 100644
--- a/treb-grid/src/editors/formula_editor_base.ts
+++ b/treb-grid/src/editors/formula_editor_base.ts
@@ -1,24 +1,24 @@
-/*
- * This file is part of TREB.
- *
- * TREB is free software: you can redistribute it and/or modify it under the
- * terms of the GNU General Public License as published by the Free Software
- * Foundation, either version 3 of the License, or (at your option) any
- * later version.
- *
- * TREB is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
- * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
- * details.
- *
- * You should have received a copy of the GNU General Public License along
- * with TREB. If not, see .
- *
- * Copyright 2022-2023 trebco, llc.
- * info@treb.app
- *
- */
-
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the
+ * terms of the GNU General Public License as published by the Free Software
+ * Foundation, either version 3 of the License, or (at your option) any
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with TREB. If not, see .
+ *
+ * Copyright 2022-2023 trebco, llc.
+ * info@treb.app
+ *
+ */
+
import { Area, Cell, Theme, Rectangle, Localization, ICellAddress } from 'treb-base-types';
import { Yield, EventSource } from 'treb-utils';
import type { Parser, UnitRange, UnitAddress, ParseResult, ExpressionUnit } from 'treb-parser';
@@ -303,6 +303,12 @@ export abstract class FormulaEditorBase extends EventSou
*/
protected SubstringToCaret(node: HTMLDivElement): string {
+ // there are some issues with selection and shadow DOM.
+ // meaning it doesn't work. there are workarounds, but we
+ // have to watch out for browser issues. sigh.
+
+ // https://github.com/WICG/webcomponents/issues/79
+
// FIXME: x/browser
// not sure about x/browser with this... only for electron atm
diff --git a/treb-grid/src/layout/grid_layout.ts b/treb-grid/src/layout/grid_layout.ts
index 812bbd2d..8e9a2062 100644
--- a/treb-grid/src/layout/grid_layout.ts
+++ b/treb-grid/src/layout/grid_layout.ts
@@ -1,24 +1,24 @@
-/*
- * This file is part of TREB.
- *
- * TREB is free software: you can redistribute it and/or modify it under the
- * terms of the GNU General Public License as published by the Free Software
- * Foundation, either version 3 of the License, or (at your option) any
- * later version.
- *
- * TREB is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
- * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
- * details.
- *
- * You should have received a copy of the GNU General Public License along
- * with TREB. If not, see .
- *
- * Copyright 2022-2023 trebco, llc.
- * info@treb.app
- *
- */
-
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the
+ * terms of the GNU General Public License as published by the Free Software
+ * Foundation, either version 3 of the License, or (at your option) any
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with TREB. If not, see .
+ *
+ * Copyright 2022-2023 trebco, llc.
+ * info@treb.app
+ *
+ */
+
import { BaseLayout } from './base_layout';
import type { Tile } from '../types/tile';
import { DOMUtilities } from '../util/dom_utilities';
@@ -31,115 +31,46 @@ export class GridLayout extends BaseLayout {
constructor(model: DataModel, view: ViewModel){
super(model, view);
- /*
- const nodes = tmpl`
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `;
-
- this.column_header = nodes.column_header as HTMLDivElement;
- this.row_header = nodes.row_header as HTMLDivElement;
- this.corner = nodes.corner as HTMLDivElement;
- this.corner_canvas = nodes.corner_canvas as HTMLCanvasElement;
- this.contents = nodes.contents as HTMLDivElement;
- this.grid_selection = (nodes.grid_selection as any) as SVGSVGElement;
- this.row_header_selection = (nodes.row_header_selection as any) as SVGSVGElement;
- this.column_header_selection = (nodes.column_header_selection as any) as SVGSVGElement;
- this.corner_selection = (nodes.corner_selection as any) as SVGSVGElement;
- this.annotation_container = nodes.annotation_container as HTMLDivElement;
- this.grid_cover = nodes.grid_cover as HTMLDivElement;
- this.column_header_cover = nodes.column_header_cover as HTMLDivElement;
- this.row_header_cover = nodes.row_header_cover as HTMLDivElement;
- */
-
- // nodes always exist
-
- // everything except the selection node and the mouse
- // mask needs to get attached to a container, when it's
- // available
+ // in this model, the nodes aren't ready immediately; this is an issue
+ // because we may call things like update theme out of order. better to
+ // fix that properly than to make this more resilient (although we could
+ // do both)
- this.column_header = DOMUtilities.CreateDiv('top-header');
- this.row_header = DOMUtilities.CreateDiv('left-header');
-
- this.corner = DOMUtilities.CreateDiv('corner');
- this.corner_canvas = document.createElement('canvas');
- this.corner.appendChild(this.corner_canvas);
-
- this.contents = DOMUtilities.CreateDiv('contents');
- this.buffer_canvas = DOMUtilities.Create('canvas', 'treb-buffer-canvas', this.contents);
-
- // selection node attached to contents
- this.grid_selection = document.createElementNS(SVGNS, 'svg');
- this.grid_selection.classList.add('grid-selection');
- this.contents.appendChild(this.grid_selection);
-
- // selection node for frozen rows
- this.row_header_selection = document.createElementNS(SVGNS, 'svg');
- this.row_header_selection.classList.add('frozen-selection');
- this.row_header_selection.classList.add('frozen-selection-rows');
- this.column_header.appendChild(this.row_header_selection);
- this.row_header_annotations = DOMUtilities.CreateDiv('frozen-annotation-container frozen-annotation-container-rows', this.column_header);
+ }
- // ...columns
- this.column_header_selection = document.createElementNS(SVGNS, 'svg');
- this.column_header_selection.classList.add('frozen-selection');
- this.column_header_selection.classList.add('frozen-selection-columns');
- this.row_header.appendChild(this.column_header_selection);
- this.column_header_annotations = DOMUtilities.CreateDiv('frozen-annotation-container frozen-annotation-container-columns', this.row_header);
+ /** connect nodes */
+ public InitializeInternal(container: HTMLElement, scroll_callback: () => void): void {
- // ...corner
- this.corner_selection = document.createElementNS(SVGNS, 'svg');
- this.corner_selection.classList.add('frozen-selection');
- this.corner.appendChild(this.corner_selection);
- this.corner_annotations = DOMUtilities.CreateDiv('frozen-annotation-container frozen-annotation-container-corner', this.corner);
+ console.info('initialize internal');
+ this.container = container;
+ this.container.classList.add('grid-layout');
- this.annotation_container = DOMUtilities.CreateDiv('annotation-container');
+ this.scroll_reference_node = this.container;
- this.grid_cover = DOMUtilities.CreateDiv('tile-cover grid-cover');
- this.column_header_cover = DOMUtilities.CreateDiv('tile-cover column-header-cover');
- this.row_header_cover = DOMUtilities.CreateDiv('tile-cover row-header-cover');
+ this.column_header = container.querySelector('.top-header') as HTMLDivElement;
+ this.row_header_selection = this.column_header.querySelector('.frozen-selection') as SVGSVGElement;
+ this.row_header_annotations = this.column_header.querySelector('.frozen-annotation-container') as HTMLDivElement;
- }
+ this.row_header = container.querySelector('.left-header') as HTMLDivElement;
+ this.column_header_selection = this.row_header.querySelector('.frozen-selection') as SVGSVGElement;
+ this.column_header_annotations = this.row_header.querySelector('.frozen-annotation-container') as HTMLDivElement;
- /** attach node structure to container */
- public InitializeInternal(container: HTMLElement, scroll_callback: () => void): void {
+ this.corner = container.querySelector('.corner') as HTMLDivElement;
+ this.corner_canvas = this.corner.querySelector('canvas') as HTMLCanvasElement;
+ this.corner_selection = this.corner.querySelector('.frozen-selection') as SVGSVGElement;
+ this.corner_annotations = this.corner.querySelector('.frozen-annotation-container') as HTMLDivElement;
- this.container = container;
- this.container.classList.add('grid-layout');
+ this.contents = container.querySelector('.contents') as HTMLDivElement;
+ this.buffer_canvas = this.contents.querySelector('.treb-buffer-canvas') as HTMLCanvasElement;
+ this.grid_selection = this.contents.querySelector('.grid-selection') as SVGSVGElement;
- this.scroll_reference_node = this.container;
+ this.annotation_container = container.querySelector('.annotation-container') as HTMLDivElement;
+
+ this.grid_cover = container.querySelector('.grid-cover') as HTMLDivElement;
+ this.column_header_cover = container.querySelector('.column-header-cover') as HTMLDivElement;
+ this.row_header_cover = container.querySelector('.row-header-cover') as HTMLDivElement;
- container.appendChild(this.column_header);
- container.appendChild(this.row_header);
- container.appendChild(this.corner);
- container.appendChild(this.contents);
- container.appendChild(this.annotation_container);
- container.appendChild(this.grid_cover);
- container.appendChild(this.column_header_cover);
- container.appendChild(this.row_header_cover);
container.appendChild(this.mock_selection);
this.container.addEventListener('scroll', () => scroll_callback());
diff --git a/treb-grid/src/render/tile_renderer.ts b/treb-grid/src/render/tile_renderer.ts
index d7c8953d..b869f2f4 100644
--- a/treb-grid/src/render/tile_renderer.ts
+++ b/treb-grid/src/render/tile_renderer.ts
@@ -85,7 +85,7 @@ export class TileRenderer {
*/
protected overflow_areas: OverflowRecord[] = [];
- protected buffer_canvas: HTMLCanvasElement;
+ protected buffer_canvas!: HTMLCanvasElement;
protected buffer_context!: CanvasRenderingContext2D;
protected buffer_canvas_size: Size = { width: 256, height: 256 };
@@ -96,9 +96,18 @@ export class TileRenderer {
protected view: ViewModel,
protected options: GridOptions, ) {
+ console.info('tile renderer ctor');
+
+ }
+
+ /** initialize when layout is in place so we have the buffer */
+ public Initialize() {
+
+ console.info('tile renderer init');
+
// this.buffer_canvas = document.createElement('canvas');
- this.buffer_canvas = layout.buffer_canvas;
+ this.buffer_canvas = this.layout.buffer_canvas;
this.buffer_canvas.width = this.buffer_canvas_size.width;
this.buffer_canvas.height = this.buffer_canvas_size.height;
diff --git a/treb-grid/src/types/grid.ts b/treb-grid/src/types/grid.ts
index 5b99577e..0875c258 100644
--- a/treb-grid/src/types/grid.ts
+++ b/treb-grid/src/types/grid.ts
@@ -1619,7 +1619,7 @@ export class Grid extends GridBase {
// using `.treb-main.treb-theme`. we have some extra classes we still
// need to clean up, though.
- grid_container.classList.add('treb-main');
+ // grid_container.classList.add('treb-main');
if (UA.is_windows) {
grid_container.classList.add('treb-ua-windows');
@@ -1628,26 +1628,34 @@ export class Grid extends GridBase {
grid_container.classList.add('treb-ua-osx');
}
- grid_container.classList.add('treb-theme');
+ // grid_container.classList.add('treb-theme');
// this.ApplyTheme();
- this.UpdateTheme(true);
+ // moving // this.UpdateTheme(true);
- const container = document.createElement('div');
+ // const higher_level_container = grid_container.querySelector('.treb-layout-master');
+
+ // this node is the actual grid, plus nodes that provide other UI
+ // or functionality on top of the grid like tooltips, and AC
+ this.container = grid_container.querySelector('#inner-container') as HTMLElement;
+
+ /*
+ const container = document.createElement('div');
const higher_level_container = document.createElement('div');
higher_level_container.classList.add('treb-layout-master');
higher_level_container.setAttribute('role', 'grid');
higher_level_container.appendChild(container);
grid_container.appendChild(higher_level_container);
+ */
// grid_container.appendChild(container);
let autocomplete: Autocomplete | undefined;
- if (this.options.formula_bar) {
+ if (this.container && this.options.formula_bar) {
if (!autocomplete) {
- autocomplete = new Autocomplete({ theme: this.theme, container });
+ autocomplete = new Autocomplete({ theme: this.theme, container: this.container });
}
this.InitFormulaBar(grid_container, autocomplete);
}
@@ -1664,33 +1672,6 @@ export class Grid extends GridBase {
{
let scale = this.layout.scale;
- /*
- // RiskAMP web used 5% increments above 100% and 2.5% below...
- // that worked well, but it does require the decimal point
- // which (IMO) looks messy
-
- switch (event.action) {
- case 'increase':
- if (scale >= 1) {
- scale += 0.05;
- }
- else {
- scale += 0.025;
- }
- break;
- case 'decrease':
- if (scale >= 1.05) {
- scale -= 0.05;
- }
- else {
- scale -= 0.025;
- }
- break;
- default:
- scale = event.action;
- }
- */
-
scale = Math.round(event.value * 1000) / 1000;
scale = Math.min(2, Math.max(scale, .5));
@@ -1739,8 +1720,8 @@ export class Grid extends GridBase {
// set container and add class for our styles
- this.container = container;
- this.container.classList.add('treb-grid');
+ // this.container = container;
+ // this.container.classList.add('treb-grid');
// we can force scrollbars, but it breaks sticky (apparently)
//
@@ -1753,7 +1734,7 @@ export class Grid extends GridBase {
// accept focus, keyboard input
- this.container.setAttribute('tabindex', '-1');
+ // this.container.setAttribute('tabindex', '-1');
/* see method comment
@@ -1773,7 +1754,7 @@ export class Grid extends GridBase {
// create dom structure
- this.layout.Initialize(container, {
+ this.layout.Initialize(this.container, {
// scroll callback
scroll: () => this.OnScroll(),
@@ -1796,7 +1777,12 @@ export class Grid extends GridBase {
focus: () => this.Focus(),
},
this.options.scrollbars);
-
+
+ this.tile_renderer.Initialize();
+
+ // moved here //
+ this.UpdateTheme(true);
+
this.selection_renderer.Initialize();
this.layout.UpdateTiles();
@@ -1805,7 +1791,7 @@ export class Grid extends GridBase {
// Sheet.sheet_events.Subscribe(this.HandleSheetEvent.bind(this));
if (!autocomplete) {
- autocomplete = new Autocomplete({ theme: this.theme, container });
+ autocomplete = new Autocomplete({ theme: this.theme, container: this.container });
}
this.InitOverlayEditor(autocomplete);
diff --git a/treb-grid/src/types/tab_bar.ts b/treb-grid/src/types/tab_bar.ts
index 65c526f0..88e1b489 100644
--- a/treb-grid/src/types/tab_bar.ts
+++ b/treb-grid/src/types/tab_bar.ts
@@ -1,24 +1,24 @@
-/*
- * This file is part of TREB.
- *
- * TREB is free software: you can redistribute it and/or modify it under the
- * terms of the GNU General Public License as published by the Free Software
- * Foundation, either version 3 of the License, or (at your option) any
- * later version.
- *
- * TREB is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
- * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
- * details.
- *
- * You should have received a copy of the GNU General Public License along
- * with TREB. If not, see .
- *
- * Copyright 2022-2023 trebco, llc.
- * info@treb.app
- *
- */
-
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the
+ * terms of the GNU General Public License as published by the Free Software
+ * Foundation, either version 3 of the License, or (at your option) any
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with TREB. If not, see .
+ *
+ * Copyright 2022-2023 trebco, llc.
+ * info@treb.app
+ *
+ */
+
import type { DataModel, ViewModel } from './data_model';
import { EventSource } from 'treb-utils';
import type { Sheet } from './sheet';
@@ -183,14 +183,16 @@ export class TabBar extends EventSource {
this._visible = show;
if (show) {
- this.grid_container.classList.add('treb-tab-bar-layout');
- this.grid_container.parentElement?.classList.add('has-tab-bar');
- this.container.style.display = 'flex';
+ // this.grid_container.classList.add('treb-tab-bar-layout');
+ // this.grid_container.parentElement?.classList.add('has-tab-bar');
+ // this.container.style.display = 'flex';
+ this.container.classList.remove('hidden');
}
else {
- this.grid_container.classList.remove('treb-tab-bar-layout');
- this.grid_container.parentElement?.classList.remove('has-tab-bar');
- this.container.style.display = 'none';
+ // this.grid_container.classList.remove('treb-tab-bar-layout');
+ // this.grid_container.parentElement?.classList.remove('has-tab-bar');
+ // this.container.style.display = 'none';
+ this.container.classList.add('hidden');
}
}
@@ -262,8 +264,8 @@ export class TabBar extends EventSource {
this.Show(true);
}
- this.grid_container.classList.add('treb-tab-bar-layout');
- this.grid_container.parentElement?.classList.add('has-tab-bar');
+ // this.grid_container.classList.add('treb-tab-bar-layout');
+ // this.grid_container.parentElement?.classList.add('has-tab-bar');
const target = this.node;
@@ -579,9 +581,14 @@ export class TabBar extends EventSource {
*/
private Init(grid_container: HTMLElement) {
- this.container = document.createElement('div');
+ this.container = grid_container.querySelector('.spreadsheet-footer') as HTMLElement;
+
+ // if we're here, show
+ this.container.classList.remove('hidden');
+
+ // this.container = document.createElement('div');
this.container.classList.add('treb-tab-bar-container');
- grid_container.appendChild(this.container);
+ // grid_container.appendChild(this.container);
this.node = document.createElement('div');
this.node.classList.add('treb-tab-bar');
diff --git a/treb-grid/style/formula-bar.scss b/treb-grid/style/formula-bar.scss
index 7e720462..0d9c6354 100644
--- a/treb-grid/style/formula-bar.scss
+++ b/treb-grid/style/formula-bar.scss
@@ -1,32 +1,34 @@
-/*
- * This file is part of TREB.
- *
- * TREB is free software: you can redistribute it and/or modify it under the
- * terms of the GNU General Public License as published by the Free Software
- * Foundation, either version 3 of the License, or (at your option) any
- * later version.
- *
- * TREB is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
- * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
- * details.
- *
- * You should have received a copy of the GNU General Public License along
- * with TREB. If not, see .
- *
- * Copyright 2022-2023 trebco, llc.
- * info@treb.app
- *
- */
-
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the
+ * terms of the GNU General Public License as published by the Free Software
+ * Foundation, either version 3 of the License, or (at your option) any
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with TREB. If not, see .
+ *
+ * Copyright 2022-2023 trebco, llc.
+ * info@treb.app
+ *
+ */
+
.treb-main {
/* flex patch for chrome */
- .treb-formula-bar-container {
+ //.treb-formula-bar-container {
+
+ // display: block;
+ // order: 1;
- display: block;
- order: 1;
+ // &.hidden { display: none; }
& .treb-formula-bar {
@@ -186,6 +188,6 @@
}
}
- }
+ //}
}
\ No newline at end of file