@spectric/ui 0.0.4

package/src/components/Bitdisplay.ts

@@ -0,0 +1,383 @@
+import { css, html, PropertyValues } from 'lit';
+
+
+import { customElement, property, queryAsync } from 'lit/decorators.js';
+import { createRef, ref, Ref } from 'lit/directives/ref.js';
+import { BitArray } from "../classes/BitArray"
+import { DisposableElement, IDisposable } from '../classes/DisposibleElement';
+import { debounceAnimation } from '../utils/debounce';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './types';
+
+export interface BitDisplayProps {
+    /** Array buffer to display */
+    arrayBuffer: ArrayBuffer;
+    /** Bits per line */
+    frameWidth: number;
+    /** How many pixels per bit */
+    scale: number;
+    /** Width of the display canvas */
+    width: number;
+    /** Height of the display canvas */
+    height: number;
+
+}
+type Position = {
+    x: number;
+    y: number;
+}
+export type BitDisplayMouseEvent = {
+    position: Position,
+    nativeEvent: MouseEvent
+    bitIndex: number
+}
+const events = ["mousemove", "click", "dblclick", "mousedown", "mouseup", "contextmenu"] as const
+type BitEventHandler = (event: CustomEvent<BitDisplayMouseEvent>) => void
+type AllEvents = typeof events
+
+export interface BitDisplayEventMap extends Record<`bit${Capitalize<AllEvents[number]>}`, BitEventHandler> {
+}
+
+
+const DEFAULT_SIZE = { width: 200, height: 200 }
+const SCROLLBAR_SIZE = { width: 10, height: 10 }
+/**
+ * @fires bitMousemove - emits BitDisplayMouseEvent on mousemove over the canvas
+ * @fires bitClick - emits BitDisplayMouseEvent on mouse click on the canvas
+ * @fires bitDblclick - emits BitDisplayMouseEvent on mouse double click on the canvas
+ * @fires bitMousedown - emits BitDisplayMouseEvent on mouse down onthe canvas
+ * @fires bitMouseup - emits BitDisplayMouseEvent on mouse up on the canvas
+ * @fires bitContextmenu - emits BitDisplayMouseEvent on mouse right click on the canvas
+ */
+@customElement("spectric-bit-display")
+export class BitDisplayCanvas extends DisposableElement implements BitDisplayProps {
+    @property({ type: Object, attribute: false })
+    arrayBuffer: ArrayBuffer = new ArrayBuffer(0);
+    @property({ type: Number })
+    frameWidth: number = 100;
+    @property({ type: Number })
+    scale: number = 1;
+    @property({ type: Number })
+    width: number = 200;
+    @property({ type: Number })
+    height: number = 200;
+    static styles = css`
+    :host{
+        position: relative;
+        --border-radius: var(--spectric-border-radius,4em);
+        --scroll-color: var(--spectric-background-inverse,#393939);
+        --background-color: var(--spectric-background, #ffffff);
+    }
+    #viewport{
+        overflow: scroll;
+        position: absolute;
+    }
+    #fakescrolldiv {
+        position: relative;
+        overflow-x: hidden;
+        overflow-y: hidden;
+        z-index:-1;
+    }
+    canvas{
+        position: absolute;
+        left:0;
+        top:0;
+        background-color:var(--background-color);
+    }
+    ::-webkit-scrollbar {
+    height: ${SCROLLBAR_SIZE.height}px;
+    width: ${SCROLLBAR_SIZE.width}px;
+
+}
+
+/* Webkit psudo elements don't pick up variables defined by the host */
+::-webkit-scrollbar-thumb {
+    background: var(--spectric-background-inverse,#393939);
+    border-radius: var(--spectric-border-radius,4em);
+    -webkit-border-radius: var(--spectric-border-radius,4em);
+    padding-top: 1px;
+    padding-bottom: 1px;
+    box-shadow: 0 0 1px  var(--spectric-primary,#242424) inset;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: var(--spectric-primary,#009eb3); 
+}
+::-webkit-scrollbar-corner {
+    background: var(--spectric-background, #ffffff);
+}
+/* Buttons */
+
+::-webkit-scrollbar-button:single-button {
+  background-color: transparent;
+  display: block;
+  border-style: solid;
+}/* Up */
+::-webkit-scrollbar-button:single-button:vertical:decrement {
+  border-width: 0 5px 5px 5px;
+  border-color: var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-background-inverse,#393939) var(--spectric-background, #ffffff);
+}
+::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
+  border-color: var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-primary,#009eb3) var(--spectric-background, #ffffff);
+}
+/* Down */
+::-webkit-scrollbar-button:single-button:vertical:increment {
+  border-width: 5px 5px 0 5px;
+  border-color: var(--spectric-background-inverse,#393939) var(--spectric-background, #ffffff) transparent var(--spectric-background, #ffffff);
+}
+
+::-webkit-scrollbar-button:vertical:single-button:increment:hover {
+  border-color: var(--spectric-primary,#009eb3) var(--spectric-background, #ffffff) transparent var(--spectric-background, #ffffff);
+}
+
+/* Left */
+::-webkit-scrollbar-button:single-button:horizontal:decrement {
+    border-width: 5px 5px 5px 0;
+    border-color:var(--spectric-background, #ffffff) var(--spectric-background-inverse,#393939) var(--spectric-background, #ffffff) var(--spectric-background, #ffffff);
+
+}
+
+::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
+    border-width: 5px 5px 5px 0;
+    border-color:var(--spectric-background, #ffffff) var(--spectric-primary,#009eb3) var(--spectric-background, #ffffff) var(--spectric-background, #ffffff);
+
+}
+
+
+
+/* Right */
+::-webkit-scrollbar-button:single-button:horizontal:increment {
+    border-width: 5px 0 5px 5px;
+    border-color:var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-background-inverse,#393939);
+
+}
+
+::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
+    border-width: 5px 0 5px 5px;
+    border-color:var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-primary,#009eb3);
+
+}
+
+    `
+    private state: { scale?: number } = {};
+    private yStart: number = 0;
+    private xStart: number = 0;
+    @queryAsync("canvas")
+    private _canvas!: Promise<HTMLCanvasElement>
+    private refs: {
+        viewport: Ref<HTMLDivElement>,
+        canvas: Ref<HTMLCanvasElement>, scrollDiv: Ref<HTMLDivElement>
+    } = {
+            viewport: createRef(),
+            canvas: createRef(),
+            scrollDiv: createRef()
+        };
+    private _bitArray?: any;
+
+    private resizeObserver: ResizeObserver & IDisposable;
+    private color: string = "#000000";
+    constructor() {
+        super();
+        let observer = new ResizeObserver(this.onResize) as any
+        observer.dispose = () => {
+            this.resizeObserver.disconnect()
+        }
+        this.resizeObserver = observer
+        this.addDisposableListener(document.body, "theme-change", this.onThemeChange)
+
+        var lastPosition: Partial<Record<AllEvents[number], number>> = {}
+        events.forEach(eventName => {
+            this.addDisposableListener(this._canvas, eventName, debounceAnimation(async (e: MouseEvent) => {
+                e.stopImmediatePropagation()
+                e.stopPropagation()
+                e.preventDefault()
+                var canvas = await (this._canvas)
+                let rect = canvas.getBoundingClientRect()
+                let position = {
+                    x: Math.floor(Math.abs(e.clientX - rect.left)),
+                    y: Math.floor(Math.abs(e.clientY - rect.top))
+                };
+                let bitIndex = this.canvasPositionToBit(position)
+                //If the bit index didn't change we don't need to fire an event, this can happen when the scale is more than 1px 
+                if (eventName === "mousemove" && lastPosition[eventName] == bitIndex) {
+                    return
+                }
+                lastPosition[eventName] = bitIndex
+                let bitEventName = "bit" + String(eventName).charAt(0).toUpperCase() + String(eventName).slice(1)
+                if (bitIndex != -1) {
+                    let event = new CustomEvent<BitDisplayMouseEvent>(bitEventName, {
+                        detail: { bitIndex, position, nativeEvent: e }
+                    })
+                    this.dispatchEvent(event)
+                }
+            }))
+        })
+
+    }
+    private onThemeChange = () => {
+        let cssStyle = getComputedStyle(this);
+        if (this.color != cssStyle.color) {
+            this.color = cssStyle.color
+            this.paint()
+        }
+    }
+    connectedCallback(): void {
+        this.onResize()
+        super.connectedCallback()
+        this.registerDisposable(this.resizeObserver)
+        this.resizeObserver.observe(this)
+    }
+
+
+    protected updated(changedProperties: PropertyValues): void {
+        if (changedProperties.has("arrayBuffer")) {
+            if (this.arrayBuffer) {
+                this._bitArray = new BitArray(this.arrayBuffer);
+            }
+        }
+        const repaintProps = ["arrayBuffer", "scale", "frameWidth", "width", "height"]
+        for (const prop of repaintProps) {
+            if (changedProperties.has(prop)) {
+                this.paint();
+                return
+            }
+        }
+    }
+
+
+    private onResize = () => {
+        this.calculateViewport();
+    }
+    canvasPositionToBit(position: { x: number, y: number }) {
+        let x = Math.floor(position.x / this.scale)
+        let y = Math.floor(position.y / this.scale)
+        if (x > this.frameWidth - 1) {
+            return -1
+        }
+        let startBit = this.yStart * this.frameWidth + this.xStart
+        return startBit + (y * this.frameWidth + x)
+    }
+    paint() {
+        if (!this.refs.canvas.value || !this._bitArray) {
+            return
+        }
+        const { frameWidth, _bitArray: bitArray } = this;
+        if (frameWidth <= 0) {
+            return
+        }
+        this.calculateViewport()
+        const { width = DEFAULT_SIZE.width, height = DEFAULT_SIZE.height } = this;
+        const scale = this.getPxPerBit()
+        const context = this.refs.canvas.value.getContext("2d");
+        if (!context) {
+            return
+        }
+        if (this.state.scale != scale) {
+            context.reset()
+            context.scale(scale, scale);
+        }
+        let cssStyle = getComputedStyle(this);
+        context.fillStyle = cssStyle.color
+        context.clearRect(0, 0, width, height);
+        let y = 0;
+
+        for (
+            let i = this.yStart * frameWidth + this.xStart, len = bitArray.length;
+            i < len;
+            i++
+        ) {
+            let x = (i % frameWidth) - this.xStart;
+            if (x < 0) {
+                continue; //Less than 0 we are off screen
+            }
+            if (Math.floor(x * scale) > width) {
+                y++;
+                i = y * frameWidth + this.yStart * frameWidth + this.xStart - 1;
+                continue; //Don't bother going if it is off screen
+            }
+            if (Math.floor(y * scale) > height) {
+                break; //Don't bother going if it is off screen
+            }
+            if (bitArray.getBit(i) === 1) {
+                context.fillRect(x, y, 1, 1);
+            }
+            if ((i + 1) % frameWidth === 0 && i >= frameWidth - 1) {
+                y++;
+            }
+        }
+    }
+    private handleScroll = () => {
+        if (!this.refs.viewport.value) {
+            return
+        }
+        const scale = this.getPxPerBit()
+        this.yStart = this.refs.viewport.value.scrollTop
+            ? Math.floor(this.refs.viewport.value.scrollTop / scale) + 1
+            : 0;
+        this.xStart = this.refs.viewport.value.scrollLeft
+            ? Math.floor(this.refs.viewport.value.scrollLeft / scale) + 1
+            : 0;
+        this.paint();
+    }
+
+    getPxPerBit() {
+        return this.scale > 0 ? this.scale : 1;
+    }
+    calculateViewport() {
+        const { frameWidth, _bitArray: bitArray } = this;
+        if (this.refs.scrollDiv.value) {
+            var pxPerBit = this.getPxPerBit();
+            const height = (bitArray.length / frameWidth) * pxPerBit;
+            const width = frameWidth * pxPerBit;
+            const div = this.refs.scrollDiv.value;
+            div.style.width = width + "px";
+            div.style.height = height + "px"
+        }
+    }
+    protected render(): unknown {
+        //return html`<div>here</div>`
+        const { height = DEFAULT_SIZE.height, width = DEFAULT_SIZE.width } = this
+        return html`
+          <div
+            id="viewport"
+            ${ref(this.refs.viewport)}
+            @scroll=${this.handleScroll}
+            style=${`width:${width}px;height:${height}px;overflow:auto;position:relative`}
+          >
+            <div
+              id="fakescrolldiv"
+              ${ref(this.refs.scrollDiv)}
+            >
+          </div>
+            </div>
+            <canvas
+            ${ref(this.refs.canvas)}
+            width=${width - SCROLLBAR_SIZE.width}
+            height=${height - SCROLLBAR_SIZE.height}
+          ></canvas>
+`
+
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "spectric-bit-display": HTMLElementTagWithEvents<BitDisplayCanvas, BitDisplayEventMap>
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * {@link BitDisplayCanvas}
+             */
+            "spectric-bit-display": ReactElementWithPropsAndEvents<BitDisplayCanvas, BitDisplayProps, BitDisplayEventMap>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * {@link BitDisplayCanvas}
+                 */
+                "spectric-bit-display": ReactElementWithPropsAndEvents<BitDisplayCanvas, BitDisplayProps, BitDisplayEventMap>;
+            }
+        }
+    }
+}

package/src/components/Button.ts

@@ -0,0 +1,121 @@
+import { CSSResultGroup, html, LitElement } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import style from './button.css';
+import { customElement, property } from 'lit/decorators.js';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './types';
+
+export enum ButtonSizes {
+  large = "large",
+  medium = "medium",
+  small = "small",
+}
+type ButtonSizesTypes = `${ButtonSizes}`
+export enum ButtonVariants {
+  primary = "primary",
+  secondary = "secondary",
+  text = "text"
+}
+type ButtonVariantsTypes = `${ButtonVariants}`
+export interface ButtonProps {
+  /** Is this the principal call to action on the page? */
+  variant: ButtonVariantsTypes;
+  /** What background color to use */
+  backgroundColor?: string;
+  /** How large should the button be? */
+  size: ButtonSizesTypes;
+  label?: string,
+  /* should the button be disabled*/
+  disabled: boolean;
+  danger?: boolean;
+}
+const MODES = {
+  "primary": 'spectric-button--primary',
+  "secondary": 'spectric-button--secondary',
+  "text": 'spectric-button--text',
+}
+
+@customElement('spectric-button')
+export class SpectricButton extends LitElement implements ButtonProps {
+
+  static styles?: CSSResultGroup | undefined = style;
+  @property({ type: String, reflect: true })
+  variant: 'primary' | 'secondary' | 'text' = "primary";
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false;
+  @property({ type: String, reflect: true })
+  backgroundColor?: string | undefined;
+  @property({ type: String, reflect: true })
+  size: 'small' | 'medium' | 'large' = "large";
+  @property({ type: String, reflect: true })
+  label?: string = "";
+  @property({ type: Boolean, reflect: true })
+  danger = false;
+  connectedCallback(): void {
+    super.connectedCallback()
+    this.addEventListener("click", this._onClick)
+  }
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    this.removeEventListener("click", this._onClick)
+  }
+  private _onClick = (e: MouseEvent) => {
+    if (e instanceof CustomEvent) {
+      return
+    }
+    e.preventDefault()
+    e.stopImmediatePropagation()
+    e.stopPropagation()
+    const options: CustomEventInit = {
+      bubbles: true,
+      composed: true,
+      detail: e
+    };
+    this.dispatchEvent(new CustomEvent<MouseEvent>('click', options));
+  }
+
+  protected render(): unknown {
+    const mode = MODES[this.variant] || 'spectric-button--primary';
+    return html`
+      <button
+        type="button"
+        ?disabled=${this.disabled}
+        class=${['spectric-button', `spectric-button-danger--${this.danger || false}`, `spectric-button--${this.size || 'medium'}`, mode].join(' ')}
+        style=${styleMap({ backgroundColor: this.backgroundColor })}
+      >
+      <span class="animation"></span>
+      <slot>${this.label}</slot>
+      </button>
+    `;
+  }
+}
+
+export interface ButtonEventMap {
+  //"aaa":(event:CustomEvent<ButtonProps>)=>void
+  "click": (event: CustomEvent<MouseEvent>) => void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "spectric-button": HTMLElementTagWithEvents<SpectricButton, ButtonEventMap>
+
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * {@link SpectricButton}
+       */
+      "spectric-button": ReactElementWithPropsAndEvents<SpectricButton, ButtonProps, ButtonEventMap>;
+    }
+  }
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        /**
+         * {@link SpectricButton}
+         */
+        "spectric-button": ReactElementWithPropsAndEvents<SpectricButton, ButtonProps, ButtonEventMap>;
+      }
+    }
+  }
+}

package/src/components/Header.ts

@@ -0,0 +1,125 @@
+import { html, LitElement, TemplateResult } from 'lit';
+
+import '.';
+import { customElement, property } from 'lit/decorators.js';
+import styles from './header.css';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './types';
+
+
+/**
+ * Properties defining 
+ */
+export interface HeaderProps {
+  username: string;
+  /**
+   * Shows the login Button
+   */
+  showLoginButton?: boolean
+  /**
+   * Shows the create account Button when not logged in
+   */
+  showCreateAccount?: boolean
+}
+export interface HeaderSlots {
+  /** Main name of the application */
+  name?: string | Node | TemplateResult
+  /** Slot to the left of the title typically used for app icons, and/or dropdown navigation menus.*/
+  branding?: string | Node | TemplateResult
+  /** Slot in the center of the header.*/
+  center?: string | Node | TemplateResult
+  /** slot right of login/out buttons*/
+  end?: string | Node | TemplateResult
+}
+
+export interface HeaderEventMap {
+  "login": (event: CustomEvent<void>) => void;
+  "logout": (event: CustomEvent<void>) => void;
+  "createAccount": (event: CustomEvent<void>) => void
+}
+
+/**
+ * @slot name - Main name of the application
+ * @slot branding - Slot to the left of the title typically used for app icons, and/or dropdown navigation menus.
+ * @slot center - Slot in the center of the header.
+ * @slot end - slot right of login/out buttons
+ */
+@customElement("spectric-header")
+export class Header extends LitElement implements HeaderProps {
+  static styles = styles
+  @property({ type: Boolean, reflect: true }) showCreateAccount: boolean = false;
+  @property({ type: Boolean, reflect: true }) showLoginButton: boolean = false;
+  @property({ type: String, reflect: true }) username: string = "";
+  onLogout = () => {
+    const options = {
+      bubbles: true,
+      composed: true,
+    };
+    this.dispatchEvent(new CustomEvent('logout', options));
+
+  }
+  onLogin = () => {
+    const options = {
+      bubbles: true,
+      composed: true,
+    };
+    this.dispatchEvent(new CustomEvent('login', options));
+  }
+  onCreateAccount = () => {
+    const options = {
+      bubbles: true,
+      composed: true,
+    };
+    this.dispatchEvent(new CustomEvent('createAccount', options));
+  }
+  protected render() {
+    return html`
+    <header>
+      <div class="spectric-header">
+        <div style="flex-grow:1;">
+          <slot name="branding"></slot>
+          <h1><slot name="name"></slot></h1>
+          <slot name="center"></slot>
+        </div>
+        ${this.showLoginButton !== false ? html`
+        <div>
+          ${(this.username && this.username !== "")
+          ? html`<spectric-button variant="secondary" size="small" @click=${this.onLogout}>Log out</spectric-button>`
+          : html`
+        ${this.showCreateAccount !== false ? html`<spectric-button variant="text" size="small" @click=${this.onCreateAccount}>Sign up</spectric-button>` : null}
+        <spectric-button variant="primary" size="small" @click=${this.onLogin}>Log in</spectric-button>`
+        }
+           
+  
+        </div>`: null}
+        <slot name="end"></slot>
+      </div>
+    </header>
+  `
+  }
+}
+
+
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "spectric-header": HTMLElementTagWithEvents<Header, HeaderEventMap>
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * {@link Header}
+       */
+      "spectric-header": ReactElementWithPropsAndEvents<Header, HeaderProps, HeaderEventMap>;
+    }
+  }
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        /**
+         * {@link Header}
+         */
+        "spectric-header": ReactElementWithPropsAndEvents<Header, HeaderProps, HeaderEventMap>;
+      }
+    }
+  }
+}