x-spacer

custom element horizontal/vertical resizable spacer of arbitrary number of children

npm i x-spacer

pnpm add x-spacer

yarn add x-spacer

Examples

# web

# view source

example/web.tsx

/** @jsxImportSource sigl */
import $ from 'sigl'

import { SpacerElement } from 'x-spacer'

const horiz = ['#040', '#004', '#505', '#770']
const vert = ['#040', '#004', '#505', '#770']

import { Rect } from 'sigl'
import { SurfaceElement, SurfaceItemElement, SurfaceMoveElement, SurfaceResizeElement } from 'x-surface'

interface ItemElement extends $.Element<ItemElement> {}

@$.element()
class ItemElement extends $(SurfaceItemElement) {
  SurfaceMove = $.element(SurfaceMoveElement)
  SurfaceResize = $.element(SurfaceResizeElement)
  Spacer = $.element(SpacerElement)
  mounted($: ItemElement['$']) {
    $.render(({ host, surface, Spacer, SurfaceMove, SurfaceResize }) => (
      <>
        <style>
          {/*css*/ `
          :host {
            box-sizing: border-box;
            border: 2px solid pink;
            display: block;
            position: absolute;
          }

          ${SurfaceMove} {
            background: #067;
            width: 100%;
            height: 20px;
            position: absolute;
          }

          ${SurfaceResize} {
            background: #ba2;
            position: absolute;
            right: 0;
            bottom: 0;
            width: 20px;
            height: 20px;
          }

          ${Spacer}::part(handle) {
            background: #0003;
          }

          div {
            display: flex;
            width: 100%;
            height: 100%;
          }
          `}
        </style>
        <SurfaceMove surface={surface} dest={host} />
        <SurfaceResize surface={surface} dest={host} />

        <Spacer vertical surface={surface}>
          <div style="background: #330">
            <Spacer surface={surface}>
              {horiz.map(x => <div style={'background:' + x}></div>)}
            </Spacer>
          </div>
          {vert.map(x => <div style={'background:' + x}></div>)}
        </Spacer>
      </>
    ))
  }
}

interface SceneElement extends $.Element<SceneElement> {}

@$.element()
class SceneElement extends HTMLElement {
  Surface = $.element(SurfaceElement)
  Item = $.element(ItemElement)

  items = new $.RefSet<ItemElement>([
    { rect: new Rect(0, 0, 500, 500) },
    { rect: new Rect(700, 0, 500, 500) },
  ])

  mounted($: SceneElement['$']) {
    $.render(({ Surface, Item, items }) => (
      <Surface>
        {items.map(item => <Item {x-spacer.item} />)}
      </Surface>
    ))
  }
}

const Scene = $.element(SceneElement)

$.render(
  <>
    <style>
      {/*css*/ `
      ${Scene} {
        display: block;
        width: 100%;
        height: 100%;
        position: fixed;
      }
    `}
    </style>
    <Scene />
  </>,
  document.body
)

API

# SpacerElement

src/x-spacer.tsx#L72

# constructor(args)

# new SpacerElement()

SpacerElement

# args

any []

# $
src/sigl/dist/types/sigl.d.ts#L25
Context<SpacerElement & JsxContext<SpacerElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>

} & __module & {

# Boolean

src/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

# __#2@#offsetHeight

src/sigl/dist/types/mixins/observed.d.ts#L6

number

# __#2@#offsetLeft

src/sigl/dist/types/mixins/observed.d.ts#L3

number

# __#2@#offsetTop

src/sigl/dist/types/mixins/observed.d.ts#L4

number

# __#2@#offsetWidth

src/sigl/dist/types/mixins/observed.d.ts#L5

number

# context

src/sigl/dist/types/sigl.d.ts#L26

ContextClass<SpacerElement & JsxContext<SpacerElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

# dim  =  ...

src/x-spacer.tsx#L87

"height" | "width"

# dispatch

src/sigl/dist/types/events.d.ts#L4

Dispatch<

# (name, detail, init)
# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

<K, E>(name, detail, init)  =>

any

>

# handleDown  =  ...

src/x-spacer.tsx#L192

# (e, index)
# e

PointerEvent

# index

number

(e, index)  =>

void

# host

src/sigl/dist/types/sigl.d.ts#L24

SpacerElement

# items  =  ...

src/x-spacer.tsx#L83

HTMLElement []

# maxDim  =  ...

src/x-spacer.tsx#L88

"maxHeight" | "maxWidth"

# onmounted

EventHandler<SpacerElement, CustomEvent<any>>

# onunmounted

EventHandler<SpacerElement, CustomEvent<any>>

# ownRect

src/sigl/dist/types/mixins/observed.d.ts#L15

Rect

# pcts  =  []

src/x-spacer.tsx#L81

number []

# pos

src/sigl/dist/types/mixins/observed.d.ts#L13

Point

# position  =  ...

src/x-spacer.tsx#L86

"top" | "left"

# rect

src/sigl/dist/types/mixins/observed.d.ts#L12

Rect

# resizeItems  =  ...

src/x-spacer.tsx#L90

Fn<[ named-tuple-member, named-tuple-member, named-tuple-member ], void>

# resizeTo  =  ...

src/x-spacer.tsx#L169

# (index, size)
# index

number

# size

number

(index, size)  =>

true

# reverseOnOrientationChange  =  false

src/x-spacer.tsx#L78

boolean

# root  =  ...

src/x-spacer.tsx#L73

ShadowRoot

# size

src/sigl/dist/types/mixins/observed.d.ts#L14

Point

# sizes  =  []

src/x-spacer.tsx#L80

number []

# state  =  ...

src/x-spacer.tsx#L75

State<SpacerElement, {

# Idle  =  'spaceridle'

string

# Resizing  =  'spacerresizing'

string

}, string> & EventMethods<SpacerElement, {}> & InlineEventMap<SpacerElement, {}>

# surface

src/x-spacer.tsx#L84

SurfaceElement

# vertical  =  false

src/x-spacer.tsx#L76

boolean

# __#2@#updateOffsets()

__#2@#updateOffsets()  =>

void

# created(ctx)

# ctx
Context<SpacerElement & JsxContext<SpacerElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

created(ctx)  =>

void

# mounted($)

src/x-spacer.tsx#L241

# $
Context<SpacerElement & JsxContext<SpacerElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

On<Fn<[ EventHandler<SpacerElement, LifecycleEvents & object [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<SpacerElement, keyof SpacerElement>

# SpacerState  =  ...

src/x-spacer.tsx#L52

{

# Idle  =  'spaceridle'

string

# Resizing  =  'spacerresizing'

string

}

Credits

• sigl by stagas – Web framework
• x-surface by stagas – Infinitely pannable and zoomable HTML surface as a Web Component.

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas