@_unit/unit 1.0.25 → 1.0.27

package/src/API.ts

@@ -218,7 +218,6 @@ export type API = {
     getSelection(): Selection
     createRange(): Range
     exitPictureInPicture(): Promise<void>
-    setTheme(theme: Theme): Promise<void>
     MutationObserver: IMutationObserverConstructor
     PositionObserver: IPositionObserverCostructor
     ResizeObserver: IResizeObserverConstructor
@@ -234,4 +233,7 @@ export type API = {
   worker: {
     start(): Worker
   }
+  theme: {
+    setTheme(theme: Theme): Promise<void>
+  }
 }

package/src/client/PositionObserver.ts

@@ -1,8 +1,8 @@
 import { System } from '../system'
 import {
+  IPositionCallback,
+  IPositionEntry,
   IPositionObserver,
-  PositionObserverCallback,
-  PositionObserverEntry,
 } from '../types/global/IPositionObserver'
 import { Unlisten } from '../types/Unlisten'
 import { callAll } from '../util/call/callAll'
@@ -19,16 +19,16 @@ import {
 export class PositionObserver implements IPositionObserver {
   private _system: System
 
-  private _callback: PositionObserverCallback
+  private _callback: IPositionCallback
   private _unlisten: () => void
   private _abort: () => void
 
-  constructor(system: System, callback: PositionObserverCallback) {
+  constructor(system: System, callback: IPositionCallback) {
     this._system = system
     this._callback = callback
   }
 
-  public observe(element: HTMLElement): PositionObserverEntry {
+  public observe(element: HTMLElement): IPositionEntry {
     // console.log('PositionObserver', 'observe')
 
     const {
@@ -114,13 +114,8 @@ export class PositionObserver implements IPositionObserver {
     }
 
     function __update_local(): void {
-      const {
-        offsetLeft = 0,
-        offsetTop = 0,
-        offsetWidth = 0,
-        offsetHeight = 0,
-        style,
-      } = element
+      const { offsetLeft, offsetTop, offsetWidth, offsetHeight, style } =
+        element
 
       offset_x = offsetLeft
       offset_y = offsetTop
@@ -178,21 +173,17 @@ export class PositionObserver implements IPositionObserver {
 
           _border_x = borderSize
           _border_y = borderSize
-
-          _borderWidth = borderWidth
-
-          bx = _border_x
-          by = _border_y
         }
+
+        _borderWidth = borderWidth
       }
 
+      bx = _border_x
+      by = _border_y
+
       gbx = parent_bx + parent_gbx
       gby = parent_by + parent_gby
 
-      if (offsetWidth === undefined) {
-        debugger
-      }
-
       width = offsetWidth
       height = offsetHeight
     }
@@ -221,22 +212,9 @@ export class PositionObserver implements IPositionObserver {
       ry = ryr + parent_ry
       rz = rzr + parent_rz
 
-      if (isNaN(_border_x) || isNaN(_border_y)) {
-        debugger
-      }
-
       const parent_rz_cos = Math.cos(parent_rz)
       const parent_rz_sin = Math.sin(parent_rz)
 
-      if (
-        isNaN(offset_x) ||
-        isNaN(offset_y) ||
-        isNaN(transform_x) ||
-        isNaN(transform_y)
-      ) {
-        debugger
-      }
-
       const local_x = offset_x + transform_x
       const local_y = offset_y + transform_y
 
@@ -250,10 +228,6 @@ export class PositionObserver implements IPositionObserver {
         parent_scaled_local_y * parent_rz_cos +
         parent_scaled_local_x * parent_rz_sin
 
-      if (isNaN(width) || isNaN(height)) {
-        debugger
-      }
-
       const px =
         parent_gbx / 2 +
         parent_x -
@@ -268,10 +242,6 @@ export class PositionObserver implements IPositionObserver {
         parent_scaled_rotated_local_y * scale_y -
         ((height * parent_scale_y) / 2) * (scale_y - 1)
 
-      if (isNaN(px) || isNaN(py)) {
-        debugger
-      }
-
       const cx =
         px +
         (width * parent_scale_x * parent_rz_cos -
@@ -290,10 +260,6 @@ export class PositionObserver implements IPositionObserver {
       const rcp = rotateVector(cp, rzr)
       const fp = addVector(c, rcp)
 
-      if (isNaN(fp.x)) {
-        debugger
-      }
-
       x = fp.x
       y = fp.y
     }

package/src/client/component.ts

@@ -414,42 +414,6 @@ export class Component<
     }
   }
 
-  togglePopover() {
-    const firstLeaf = this.getFirstRootLeaf()
-
-    if (firstLeaf.$element instanceof HTMLElement) {
-      if (firstLeaf.$element.togglePopover) {
-        firstLeaf.$element.togglePopover()
-      }
-    } else {
-      //
-    }
-  }
-
-  hidePopover() {
-    const firstLeaf = this.getFirstRootLeaf()
-
-    if (firstLeaf.$element instanceof HTMLElement) {
-      if (firstLeaf.$element.hidePopover) {
-        firstLeaf.$element.hidePopover()
-      }
-    } else {
-      //
-    }
-  }
-
-  showPopover() {
-    const firstLeaf = this.getFirstRootLeaf()
-
-    if (firstLeaf.$element instanceof HTMLElement) {
-      if (firstLeaf.$element.showPopover) {
-        firstLeaf.$element.showPopover()
-      }
-    } else {
-      //
-    }
-  }
-
   private $detached: boolean = false
 
   private _animateBase = (
@@ -2439,11 +2403,7 @@ export class Component<
           }
         }
       } else {
-        if (this.$element.contains(component.$element)) {
-          this.domCommitRemoveChild(component)
-        } else {
-          component.$slotParent.domRemoveChild(component)
-        }
+        this.domCommitRemoveChild(component)
       }
     }
 
@@ -2501,13 +2461,7 @@ export class Component<
     const _at = this.$mountParentRoot.indexOf(component)
     const slotName = this.$parentRootSlotName[at]
     this.postRemoveParentRootAt(component, slotName, at, _at)
-    this.domRemoveParentRootAt(
-      component,
-      slotName,
-      at,
-      _at,
-      slotParent ?? this.$slotParent
-    )
+    this.domRemoveParentRootAt(component, slotName, at, _at, slotParent)
     this.memRemoveParentRootAt(component, slotName, at, _at)
   }
 

package/src/client/makeEventListener.ts

@@ -16,7 +16,6 @@ import { makePointerEnterListener } from './event/pointer/pointerenter'
 import { makePointerLeaveListener } from './event/pointer/pointerleave'
 import { makePointerMoveListener } from './event/pointer/pointermove'
 import { makePointerUpListener } from './event/pointer/pointerup'
-import { makeToggleListener } from './event/toggle'
 import { makeWheelListener } from './event/wheel'
 import { Listener } from './Listener'
 
@@ -42,9 +41,6 @@ export type IOUIEventName =
   | 'keypress'
   | 'wheel'
   | 'message'
-  | 'toggle'
-  | 'show'
-  | 'hide'
 
 export const UI_EVENT_SET: Set<IOUIEventName> = new Set([
   'click',
@@ -68,9 +64,6 @@ export const UI_EVENT_SET: Set<IOUIEventName> = new Set([
   'keypress',
   'wheel',
   'message',
-  'toggle',
-  'show',
-  'hide'
 ])
 
 export function makeUIEventListener(
@@ -118,8 +111,6 @@ export function makeUIEventListener(
       return makeKeypressListener(callback)
     case 'wheel':
       return makeWheelListener(callback)
-    case 'toggle':
-      return makeToggleListener(callback)
     default:
       throw new Error(`unknown UI event: ${event}`)
   }

package/src/client/noop/MutationObserver.ts

@@ -1,8 +1,8 @@
 import { IMutationObserver } from '../../types/global/IMutationObserver'
-import { PositionObserverCallback } from '../../types/global/IPositionObserver'
+import { IPositionCallback } from '../../types/global/IPositionObserver'
 
 export class NoopMutationObserver implements IMutationObserver {
-  constructor(callback: PositionObserverCallback) {}
+  constructor(callback: IPositionCallback) {}
 
   public observe(element: HTMLElement): void {}
 

package/src/client/noop/ResizeObserver.ts

@@ -1,8 +1,8 @@
-import { PositionObserverCallback } from '../../types/global/IPositionObserver'
+import { IPositionCallback } from '../../types/global/IPositionObserver'
 import { IResizeObserver } from '../../types/global/IResizeObserver'
 
 export class NoopResizeObserver implements IResizeObserver {
-  constructor(callback: PositionObserverCallback) {}
+  constructor(callback: IPositionCallback) {}
 
   public observe(element: HTMLElement): void {}
 

package/src/client/platform/web/api/document.ts

@@ -4,7 +4,6 @@ import { PositionObserver } from '../../../PositionObserver'
 import { NoopIntersectionObserver } from '../../../noop/IntersectionObserver'
 import { NoopMutationObserver } from '../../../noop/MutationObserver'
 import { NoopResizeObserver } from '../../../noop/ResizeObserver'
-import { Theme, themeBackgroundColor } from '../../../theme'
 
 export function webDocument(
   window: Window,
@@ -58,11 +57,6 @@ export function webDocument(
     ResizeObserver: ResizeObserver,
     PositionObserver: PositionObserver,
     IntersectionObserver: IntersectionObserver,
-    setTheme: async function (theme: Theme): Promise<void> {
-      const color = themeBackgroundColor(theme)
-
-      document.body.style.backgroundColor = color
-    },
   }
 
   return _document

package/src/client/platform/web/api/theme.ts

@@ -0,0 +1,19 @@
+import { API } from '../../../../API'
+import { BootOpt } from '../../../../system'
+import { Theme, themeBackgroundColor } from '../../../theme'
+
+export function webTheme(
+  window: Window,
+  root: HTMLElement,
+  opt: BootOpt
+): API['theme'] {
+  const theme: API['theme'] = {
+    setTheme: async function (theme: Theme): Promise<void> {
+      const color = themeBackgroundColor(theme)
+
+      root.style.backgroundColor = color
+    },
+  }
+
+  return theme
+}

package/src/client/platform/web/boot.ts

@@ -37,6 +37,7 @@ import { webSelection } from './api/selection'
 import { webSpeech } from './api/speech'
 import { webStorage } from './api/storage'
 import { webText } from './api/text'
+import { webTheme } from './api/theme'
 import { webURI } from './api/uri'
 import { webURL } from './api/url'
 import { webWindow } from './api/window'
@@ -92,6 +93,7 @@ export function webBoot(
   const _window = webWindow(window, opt)
   const navigator = webNavigator(window, opt)
   const layout = webLayout(window, opt)
+  const theme = webTheme(window, _root, opt)
 
   const api: API = {
     alert,
@@ -121,6 +123,7 @@ export function webBoot(
     uri,
     window: _window,
     navigator,
+    theme,
   }
 
   const system = boot(null, api, opt)
@@ -129,6 +132,8 @@ export function webBoot(
 
   system.root = _root
 
+  theme.setTheme(system.theme)
+
   attachSprite(system)
   attachStyle(system)
   attachApp(system)

package/src/host/none.ts

@@ -225,9 +225,6 @@ export function noHost(): API {
       exitPictureInPicture() {
         throw new MethodNotImplementedError()
       },
-      setTheme: function (theme: Theme): Promise<void> {
-        throw new MethodNotImplementedError()
-      },
       MutationObserver: null,
       PositionObserver: null,
       ResizeObserver: null,
@@ -317,6 +314,11 @@ export function noHost(): API {
         throw new MethodNotImplementedError()
       },
     },
+    theme: {
+      setTheme: function (theme: Theme): Promise<void> {
+        throw new MethodNotImplementedError()
+      },
+    },
   }
 
   return api

package/src/system/_classes.ts

@@ -210,16 +210,12 @@ import Notification from './platform/api/notification/Notification'
 import Show from './platform/api/notification/Show'
 import IntersectionObserver from './platform/api/observer/IntersectionObserver'
 import Observe from './platform/api/observer/Observe'
-import PositionObserver from './platform/api/observer/PositionObserver'
 import SizeObserver from './platform/api/observer/SizeObserver'
 import PeerGraph from './platform/api/peer/PeerGraph'
 import PeerReceiver from './platform/api/peer/PeerReceiver'
 import PeerShareGraph from './platform/api/peer/PeerShareGraph'
 import PeerTransmitter from './platform/api/peer/PeerTransmitter'
 import SetPointerCapture from './platform/api/pointer/SetPointerCapture'
-import HidePopover from './platform/api/popover/HidePopover'
-import ShowPopover from './platform/api/popover/ShowPopover'
-import TogglePopover from './platform/api/popover/TogglePopover'
 import ScrollIntoView from './platform/api/scroll/ScrollIntoView'
 import Send from './platform/api/Send'
 import Share from './platform/api/share/Share'
@@ -262,7 +258,6 @@ import Button from './platform/component/Button'
 import Canvas from './platform/component/canvas/Canvas'
 import Constrain from './platform/component/Constrain'
 import Div from './platform/component/Div'
-import Follow from './platform/component/Follow'
 import Frame from './platform/component/Frame'
 import H1 from './platform/component/H1'
 import H2 from './platform/component/H2'
@@ -563,16 +558,12 @@ export default {
 	'5aea0bf0-0815-11eb-9304-5f90b5542620': Show,
 	'34a36b3a-cb04-4429-bdbc-15e0c278ad7a': IntersectionObserver,
 	'e8aded15-a1af-42a0-9a9d-f88fcfd03dc3': Observe,
-	'b27ee28f-54fb-4737-91f5-04b52b7cf92d': PositionObserver,
 	'2f2d5ea4-6dd2-406e-a095-5552ebc235e7': SizeObserver,
 	'd4ec46ab-d065-4d1c-9357-fa8b95be0c36': PeerGraph,
 	'f079a38e-fb4f-496e-8e5f-d5e03a590cda': PeerReceiver,
 	'16fa715f-fc94-43f7-831e-335037c8daea': PeerShareGraph,
 	'7375aad5-50fd-403c-80ae-471b95088f04': PeerTransmitter,
 	'd3fc887c-9fc5-11eb-8f63-ab42b0414469': SetPointerCapture,
-	'c6f309c8-9ca7-459c-9dd5-c9c9f92fbe8f': HidePopover,
-	'eed20c86-41fe-46d4-87ba-ad2e6fb1bd4a': ShowPopover,
-	'f9be5d07-9548-4a14-b5b9-fa954599a170': TogglePopover,
 	'de9665db-a188-4252-99f0-ea50fc343058': ScrollIntoView,
 	'b296242e-8b82-11eb-ac6c-0f8d3f9948d0': Send,
 	'04eda925-4423-40c8-83c8-2117a0d81185': Share,
@@ -615,7 +606,6 @@ export default {
 	'94243ec4-8967-4907-8cdd-7223fe256cf6': Canvas,
 	'7c27cf95-6226-4326-8619-32d82bcbe16d': Constrain,
 	'66698a97-15c5-4602-9925-11a1aeb03710': Div,
-	'b3b92c9a-dcfb-4c88-b5c0-2e65ad4305a7': Follow,
 	'd7c86a2a-489f-11eb-b83e-d3767f6d49b7': Frame,
 	'dd7616e2-2e64-4d9c-b13e-ca7efeacd982': H1,
 	'321f971c-b898-4ca4-9e6e-3d75d68940f7': H2,

package/src/system/_components.ts

@@ -22,7 +22,6 @@ import Button from './platform/component/Button/Component'
 import Canvas from './platform/component/canvas/Canvas/Component'
 import Constrain from './platform/component/Constrain/Component'
 import Div from './platform/component/Div/Component'
-import Follow from './platform/component/Follow/Component'
 import Frame from './platform/component/Frame/Component'
 import H1 from './platform/component/H1/Component'
 import H2 from './platform/component/H2/Component'
@@ -92,7 +91,6 @@ export default {
 	'94243ec4-8967-4907-8cdd-7223fe256cf6': Canvas,
 	'7c27cf95-6226-4326-8619-32d82bcbe16d': Constrain,
 	'66698a97-15c5-4602-9925-11a1aeb03710': Div,
-	'b3b92c9a-dcfb-4c88-b5c0-2e65ad4305a7': Follow,
 	'd7c86a2a-489f-11eb-b83e-d3767f6d49b7': Frame,
 	'dd7616e2-2e64-4d9c-b13e-ca7efeacd982': H1,
 	'321f971c-b898-4ca4-9e6e-3d75d68940f7': H2,

package/src/system/_ids.ts

@@ -419,7 +419,6 @@ export const ID_NOTIFICATION = 'bb029770-080e-11eb-9d38-f314d076f14b'
 export const ID_SHOW = '5aea0bf0-0815-11eb-9304-5f90b5542620'
 export const ID_INTERSECTION_OBSERVER = '34a36b3a-cb04-4429-bdbc-15e0c278ad7a'
 export const ID_OBSERVE = 'e8aded15-a1af-42a0-9a9d-f88fcfd03dc3'
-export const ID_POSITION_OBSERVER = 'b27ee28f-54fb-4737-91f5-04b52b7cf92d'
 export const ID_SIZE_OBSERVER = '2f2d5ea4-6dd2-406e-a095-5552ebc235e7'
 export const ID_PEER_DUPLEX = '755b0a17-1b09-45b4-bb7d-e63d21009efd'
 export const ID_PEER_GRAPH = 'd4ec46ab-d065-4d1c-9357-fa8b95be0c36'
@@ -427,9 +426,6 @@ export const ID_PEER_RECEIVER = 'f079a38e-fb4f-496e-8e5f-d5e03a590cda'
 export const ID_PEER_SHARE_GRAPH = '16fa715f-fc94-43f7-831e-335037c8daea'
 export const ID_PEER_TRANSMITTER = '7375aad5-50fd-403c-80ae-471b95088f04'
 export const ID_SET_POINTER_CAPTURE = 'd3fc887c-9fc5-11eb-8f63-ab42b0414469'
-export const ID_HIDE_POPOVER = 'c6f309c8-9ca7-459c-9dd5-c9c9f92fbe8f'
-export const ID_SHOW_POPOVER = 'eed20c86-41fe-46d4-87ba-ad2e6fb1bd4a'
-export const ID_TOGGLE_POPOVER = 'f9be5d07-9548-4a14-b5b9-fa954599a170'
 export const ID_SCROLL_INTO_VIEW = 'de9665db-a188-4252-99f0-ea50fc343058'
 export const ID_SEND = 'b296242e-8b82-11eb-ac6c-0f8d3f9948d0'
 export const ID_SHARE = '04eda925-4423-40c8-83c8-2117a0d81185'
@@ -474,7 +470,6 @@ export const ID_BUTTON = 'b61f5cc6-37e9-45e1-965b-02940820f7ce'
 export const ID_CANVAS = '94243ec4-8967-4907-8cdd-7223fe256cf6'
 export const ID_CONSTRAIN = '7c27cf95-6226-4326-8619-32d82bcbe16d'
 export const ID_DIV = '66698a97-15c5-4602-9925-11a1aeb03710'
-export const ID_FOLLOW = 'b3b92c9a-dcfb-4c88-b5c0-2e65ad4305a7'
 export const ID_FRAME = 'd7c86a2a-489f-11eb-b83e-d3767f6d49b7'
 export const ID_HEADER_1 = 'dd7616e2-2e64-4d9c-b13e-ca7efeacd982'
 export const ID_HEADER_2 = '321f971c-b898-4ca4-9e6e-3d75d68940f7'
@@ -567,7 +562,6 @@ export const ID_ON_POINTER_UP = '43a9d452-b1ee-11ea-923f-efb4af36e68e'
 export const ID_ON_RESIZE = '9fd9d2ea-98a7-11eb-8aa3-fbeb43cb1944'
 export const ID_ON_SET = '9256571c-db04-4559-a0a6-b8b0d107861f'
 export const ID_ON_SHOW = 'cbb19840-081e-11eb-918d-3f728eda5672'
-export const ID_ON_TOGGLE = '9649cf39-fd6e-4437-a268-c0b4def6bcbd'
 export const ID_ON_VALUE = 'd0e6f14c-400c-42f3-bfd6-1bbe0146f490'
 export const ID_ON_WHEEL = '52e6d3c8-0958-4829-bc25-1f6cdbf6e451'
 export const ID_TAG_DATA = '7a602db8-2618-11eb-b9c6-4bb45b6d8833'