x-popup

Popup Web Component used for tooltips and context menus

npm i x-popup

pnpm add x-popup

yarn add x-popup

Examples

# web

# view source

example/web.tsx

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

import { filterMap } from 'everyday-utils'
import { Rect } from 'sigl'
import { SurfaceElement, SurfaceItemElement, SurfaceMoveElement, SurfaceResizeElement } from 'x-surface'
import { PopupElement, PopupScene } from 'x-popup'

interface ItemElement extends $.Element<ItemElement> {}
@$.element()
class ItemElement extends $(SurfaceItemElement) {
  SurfaceMove = $.element(SurfaceMoveElement)
  SurfaceResize = $.element(SurfaceResizeElement)

  @$.attr() label = $.String

  mounted($: ItemElement['$']) {
    $.render(({ host, surface, 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;
          }
          `}
        </style>
        <SurfaceMove surface={surface} dest={host} />
        <SurfaceResize surface={surface} dest={host} />
      </>
    ))
  }
}

interface SceneElement extends $.Element<SceneElement> {}
@$.element()
class SceneElement extends HTMLElement {
  Surface = $.element(SurfaceElement)
  Item = $.element(ItemElement)
  Popup = $.element(PopupElement)

  surface?: SurfaceElement
  popupScene = $(this).reduce(({ surface }) => new PopupScene(surface))

  items = new $.RefSet<ItemElement>([
    { rect: new Rect(0, 0, 100, 100), label: 'one' },
    { rect: new Rect(200, 0, 100, 100), label: 'two' },
  ])

  mounted($: SceneElement['$']) {
    const Popups = $.part(({ Popup, popupScene, surface, items }) =>
      filterMap([x-popup.items], item => item.ref.current)
        .map(el => (
          <Popup
            scene={popupScene}
            surface={surface}
            // placement="nwr"
            dest={el as unknown as SurfaceItemElement}
          >
            {el.label}
          </Popup>
        ))
    )

    $.render(({ Surface, Item, items }) => (
      <>
        <style>
          {/*css*/ `
          :host {
            display: block;
            width: 100%;
            height: 100%;
            position: fixed;
          }

          [part=popups] {
            position: absolute;
            z-index: 2;
            left: 0;
            top: 0;
            width: 100%;
          }`}
        </style>

        <Surface ref={$.ref.surface}>
          {items.map(item => <Item {x-popup.item} />)}
        </Surface>

        <div part="popups">
          <Popups />
        </div>
      </>
    ))
  }
}

const Scene = $.element(SceneElement)

$.render(<Scene />, document.body)

API

# PopupElement

src/x-popup.tsx#L70

# constructor()

node_modules/typescript/lib/lib.dom.d.ts#L6370

# new PopupElement()

PopupElement

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

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>

} & __module & {

# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# center  =  false

src/x-popup.tsx#L76

boolean

# contents

src/x-popup.tsx#L83

HTMLDivElement

# contentsRect

src/x-popup.tsx#L84

Rect

# context

ContextClass<PopupElement & JsxContext<PopupElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# dest

src/x-popup.tsx#L86

SurfaceItemElement

# destRect

src/x-popup.tsx#L87

Rect

# dispatch

Dispatch<

# (name, detail, init)
# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

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

any

>

# host

PopupElement

# hostMatrixString

src/x-popup.tsx#L96

string

# onmounted

EventHandler<PopupElement, CustomEvent<any>>

# onunmounted

EventHandler<PopupElement, CustomEvent<any>>

# placed  =  false

src/x-popup.tsx#L75

boolean

# placement  =  'n'

src/x-popup.tsx#L74

Placement

# popup

src/x-popup.tsx#L89

Popup

# pos

src/x-popup.tsx#L91

Point

# rect

src/x-popup.tsx#L90

Rect

# rigid  =  false

src/x-popup.tsx#L77

boolean

# scene

src/x-popup.tsx#L81

PopupScene

# setHostStyleTransform

src/x-popup.tsx#L97

# (matrixString)
# matrixString

string

(matrixString)  =>

void

# surface

src/x-popup.tsx#L80

SurfaceElement

# transition  =  SurfaceState.Idle

src/x-popup.tsx#L78

ValuesOf<{

# CenteringItem

"surfacecenteringitem"

# CenteringView

"surfacecenteringview"

# Connecting

"surfaceconnecting"

# FullSize

"surfacefullsize"

# Idle

"surfaceidle"

# MinimapPanning

"surfaceminimappanning"

# Overlay

"surfaceoverlay"

# Panning

"surfacepanning"

# Pinching

"surfacepinching"

# Selecting

"surfaceselecting"

# Wheeling

"surfacewheeling"

}>

# viewMatrix

src/x-popup.tsx#L93

Matrix

# viewportRect

src/x-popup.tsx#L94

Rect

# created(ctx)

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

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

created(ctx)  =>

void

# mounted($)

src/x-popup.tsx#L99

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

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

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

# toJSON()

toJSON()  =>

Pick<PopupElement, keyof PopupElement>

# PopupScene

src/popup-scene.ts#L17

# constructor(surface)

src/popup-scene.ts#L28

# new PopupScene()

PopupScene

# surface

SurfaceElement

# $
src/popup-scene.ts#L23
PopupScene & ContextClass<PopupScene> & {

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}

# context

src/popup-scene.ts#L24

ContextClass<PopupScene>

# popups  =  ...

src/popup-scene.ts#L26

Set<Popup>

# runCollisions

src/popup-scene.ts#L20

# ()
()  =>

void

# surface

src/popup-scene.ts#L28

SurfaceElement

# viewMatrix  =  ...

src/popup-scene.ts#L19

Matrix

# viewportRect  =  ...

src/popup-scene.ts#L18

Rect

# create(this)

src/popup-scene.ts#L37

# this

PopupScene

create(this)  =>

void

# destroy()

src/popup-scene.ts#L33

destroy()  =>

void

Credits

• everyday-utils by stagas – Everyday utilities
• 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