@_unit/unit 1.0.23 → 1.0.24

package/src/API.ts

@@ -201,6 +201,7 @@ export type API = {
     }
     ReadableStream: ReadableStream
     open: (url: string, target: string, features: string) => Window
+    getComputedStyle: (element: Element) => CSSStyleDeclaration
   }
   document: {
     createElement<K extends keyof HTMLElementTagNameMap>(

package/src/client/PositionObserver.ts

@@ -33,6 +33,7 @@ export class PositionObserver implements IPositionObserver {
 
     const {
       api: {
+        window: { getComputedStyle },
         document: { MutationObserver, ResizeObserver },
         animation: { requestAnimationFrame, cancelAnimationFrame },
       },
@@ -63,6 +64,12 @@ export class PositionObserver implements IPositionObserver {
     let px: number = 0
     let py: number = 0
 
+    let gpx: number = 0
+    let gpy: number = 0
+
+    let gbx: number = 0
+    let gby: number = 0
+
     let width: number = 0
     let height: number = 0
 
@@ -82,6 +89,15 @@ export class PositionObserver implements IPositionObserver {
     let parent_x: number = 0
     let parent_y: number = 0
 
+    let parent_px: number = 0
+    let parent_py: number = 0
+
+    let parent_gpx: number = 0
+    let parent_gpy: number = 0
+
+    let parent_gbx: number = 0
+    let parent_gby: number = 0
+
     let parent_scroll_top = 0
     let parent_scroll_left = 0
 
@@ -93,7 +109,14 @@ export class PositionObserver implements IPositionObserver {
     let parent_rz = 0
 
     let _transform: string | undefined
-    let _border: string | undefined
+    let _borderWidth: string | undefined
+    let _padding: string | undefined
+
+    let _border_x: number = 0
+    let _border_y: number = 0
+
+    let _padding_x: number = 0
+    let _padding_y: number = 0
 
     function _update_local(): void {
       __update_local()
@@ -108,7 +131,9 @@ export class PositionObserver implements IPositionObserver {
       offset_x = offsetLeft
       offset_y = offsetTop
 
-      const { transform, border } = style
+      const { transform, padding } = style
+
+      const { borderWidth } = getComputedStyle(element)
 
       if (
         transform !== _transform ||
@@ -145,9 +170,9 @@ export class PositionObserver implements IPositionObserver {
         _transform = transform
       }
 
-      if (border !== _border) {
-        if (border) {
-          const [borderSizeStr] = border.split(' ')
+      if (borderWidth !== _borderWidth) {
+        if (borderWidth) {
+          const [borderSizeStr] = borderWidth.split(' ')
 
           let borderSize = 0
 
@@ -157,13 +182,33 @@ export class PositionObserver implements IPositionObserver {
             borderSize = applyLayoutValue(borderSizeStr, 0)
           }
 
-          px = borderSize
-          py = borderSize
+          _border_x = borderSize
+          _border_y = borderSize
         }
 
-        _border = border
+        _borderWidth = borderWidth
       }
 
+      if (padding !== _padding) {
+        const [paddingSizeStr] = padding.split(' ')
+
+        const paddingSize = applyLayoutValue(paddingSizeStr, 0)
+
+        _padding_x = paddingSize
+        _padding_y = paddingSize
+
+        _padding = padding
+      }
+
+      px = _border_x
+      py = _border_y
+
+      gpx = -parent_gpx + _padding_x
+      gpy = -parent_gpy + _padding_y
+
+      gbx = parent_px - parent_gbx
+      gby = parent_py - parent_gby
+
       width = offsetWidth
       height = offsetHeight
     }
@@ -195,8 +240,8 @@ export class PositionObserver implements IPositionObserver {
       const parent_rz_cos = Math.cos(parent_rz)
       const parent_rz_sin = Math.sin(parent_rz)
 
-      const local_x = offset_x + transform_x
-      const local_y = offset_y + transform_y
+      const local_x = offset_x + transform_x - parent_gpx
+      const local_y = offset_y + transform_y - parent_gpy
 
       const parent_scaled_local_x = local_x * parent_scale_x
       const parent_scaled_local_y = local_y * parent_scale_y
@@ -209,12 +254,14 @@ export class PositionObserver implements IPositionObserver {
         parent_scaled_local_x * parent_rz_sin
 
       const px =
+        -parent_gbx +
         parent_x -
         parent_scroll_left +
         parent_scaled_rotated_local_x * scale_x -
         ((width * parent_scale_x) / 2) * (scale_x - 1)
 
       const py =
+        -parent_gby +
         parent_y -
         parent_scroll_top +
         parent_scaled_rotated_local_y * scale_y -
@@ -245,7 +292,7 @@ export class PositionObserver implements IPositionObserver {
     const update = (): void => {
       _update()
 
-      this._callback(x, y, sx, sy, rx, ry, rz, px, py)
+      this._callback(x, y, sx, sy, rx, ry, rz, px, py, gpx, gpy, gbx, gby)
     }
 
     const mutationConfig = {
@@ -379,10 +426,20 @@ export class PositionObserver implements IPositionObserver {
           ry: number,
           rz: number,
           px: number,
-          py: number
+          py: number,
+          gpx: number,
+          gpy: number,
+          gbx: number,
+          gby: number
         ) {
-          parent_x = x + px
-          parent_y = y + py
+          parent_x = x
+          parent_y = y
+          parent_px = px
+          parent_py = py
+          parent_gpx = gpx
+          parent_gpy = gpy
+          parent_gbx = gbx
+          parent_gby = gby
           parent_scale_x = sx
           parent_scale_y = sy
           parent_rx = rx
@@ -447,7 +504,7 @@ export class PositionObserver implements IPositionObserver {
     __update_local()
     _update()
 
-    return { x, y, sx, sy, rx, ry, rz, px, py }
+    return { x, y, sx, sy, rx, ry, rz, px, py, gpx, gpy, gbx, gby }
   }
 
   disconnect() {

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

@@ -2,7 +2,7 @@ import { API } from '../../../../API'
 import { BootOpt } from '../../../../system'
 
 export function webWindow(window: Window, opt: BootOpt): API['window'] {
-  const _window = {
+  const _window: API['window'] = {
     // @ts-ignore
     AudioContext: window.AudioContext,
     // @ts-ignore
@@ -26,6 +26,9 @@ export function webWindow(window: Window, opt: BootOpt): API['window'] {
     open(url: string, target: string, features: string) {
       return window.open(url, target, features)
     },
+    getComputedStyle(element: Element): CSSStyleDeclaration {
+      return window.getComputedStyle(element)
+    },
   }
 
   return _window

package/src/host/none.ts

@@ -289,6 +289,9 @@ export function noHost(): API {
       CompressionStream: undefined,
       DecompressionStream: undefined,
       ReadableStream: undefined,
+      getComputedStyle: function (element: Element): CSSStyleDeclaration {
+        throw new MethodNotImplementedError()
+      },
     },
     navigator: {
       share: function (data: ShareData): Promise<void> {

package/src/system/_classes.ts

@@ -282,6 +282,7 @@ import ForeignObject from './platform/component/svg/ForeignObject'
 import Group from './platform/component/svg/Group'
 import Line from './platform/component/svg/Line'
 import Marker from './platform/component/svg/Marker'
+import Object from './platform/component/svg/Object'
 import Path from './platform/component/svg/Path'
 import Rect from './platform/component/svg/Rect'
 import SVG from './platform/component/svg/SVG'
@@ -630,6 +631,7 @@ export default {
 	'be11165e-489f-11eb-921f-87b924eb0725': Group,
 	'38d26d76-2559-11eb-ae02-dfda9b9b137e': Line,
 	'9932f3bc-9241-11ea-89fa-0b2fdace0f08': Marker,
+	'c90ea697-ba4f-48ca-85e0-d9f26731e33e': Object,
 	'60bc7930-8982-11ea-8b24-cf97a783bb32': Path,
 	'c0bfe832-8967-11ea-8c4c-1f2995e41b68': Rect,
 	'98c279fc-7f5e-11ea-b9e4-f772f9f0bed1': SVG,

package/src/system/_components.ts

@@ -44,6 +44,7 @@ import ForeignObject from './platform/component/svg/ForeignObject/Component'
 import Group from './platform/component/svg/Group/Component'
 import Line from './platform/component/svg/Line/Component'
 import Marker from './platform/component/svg/Marker/Component'
+import Object from './platform/component/svg/Object/Component'
 import Path from './platform/component/svg/Path/Component'
 import Rect from './platform/component/svg/Rect/Component'
 import SVG from './platform/component/svg/SVG/Component'
@@ -113,6 +114,7 @@ export default {
 	'be11165e-489f-11eb-921f-87b924eb0725': Group,
 	'38d26d76-2559-11eb-ae02-dfda9b9b137e': Line,
 	'9932f3bc-9241-11ea-89fa-0b2fdace0f08': Marker,
+	'c90ea697-ba4f-48ca-85e0-d9f26731e33e': Object,
 	'60bc7930-8982-11ea-8b24-cf97a783bb32': Path,
 	'c0bfe832-8967-11ea-8c4c-1f2995e41b68': Rect,
 	'98c279fc-7f5e-11ea-b9e4-f772f9f0bed1': SVG,

package/src/system/_ids.ts

@@ -492,6 +492,7 @@ export const ID_FOREIGN_OBJECT = 'e049f16e-2559-11eb-bdc4-db5b8a11164b'
 export const ID_G = 'be11165e-489f-11eb-921f-87b924eb0725'
 export const ID_LINE = '38d26d76-2559-11eb-ae02-dfda9b9b137e'
 export const ID_MARKER = '9932f3bc-9241-11ea-89fa-0b2fdace0f08'
+export const ID_SVG_OBJECT = 'c90ea697-ba4f-48ca-85e0-d9f26731e33e'
 export const ID_PATH = '60bc7930-8982-11ea-8b24-cf97a783bb32'
 export const ID_RECT = 'c0bfe832-8967-11ea-8c4c-1f2995e41b68'
 export const ID_SVG = '98c279fc-7f5e-11ea-b9e4-f772f9f0bed1'