@_unit/unit 1.0.7 → 1.0.8

package/src/API.ts

@@ -168,6 +168,7 @@ export type API = {
     elementFromPoint(x: number, y: number): Element
     getSelection(): Selection
     createRange(): Range
+    exitPictureInPicture(): Promise<void>
     MutationObserver: IMutationObserverConstructor
     PositionObserver: IPositionObserverCostructor
     ResizeObserver: IResizeObserverConstructor

package/src/Class/Graph/index.ts

@@ -118,7 +118,6 @@ import { C, C_EE } from '../../types/interface/C'
 import { ComponentEvents, Component_ } from '../../types/interface/Component'
 import { G, G_EE, G_MoveSubgraphIntoArgs } from '../../types/interface/G'
 import { U } from '../../types/interface/U'
-import { weakMerge } from '../../types/weakMerge'
 import { forEach, insert, remove } from '../../util/array'
 import { callAll } from '../../util/call/callAll'
 import {
@@ -4535,6 +4534,20 @@ export class Graph<I = any, O = any>
     )
   }
 
+  setUnitPinSetId(
+    unitId: string,
+    type: IO,
+    pinId: string,
+    newPinId: string,
+    emit: boolean = true
+  ): void {
+    const unit = this.getUnit(unitId) as Graph
+
+    unit.setPinSetId(type, pinId, newPinId)
+
+    emit && this.emit('set_unit_pin_set_id', unitId, type, pinId, newPinId, [])
+  }
+
   public setUnitPinConstant(
     unitId: string,
     type: IO,

package/src/Class/Graph/interface.ts

@@ -198,6 +198,13 @@ export type GraphSetPinSetFunctionalData = {
   functional: boolean
 }
 
+export type GraphSetUnitPinSetId = {
+  unitId: string
+  type: IO
+  pinId: string
+  nextPinId: string
+}
+
 export type GraphSetUnitPinConstant = {
   unitId: string
   type: IO

package/src/Class/Graph/moveSubgraph.ts

@@ -345,7 +345,7 @@ export function moveLinkPinInto(
   ignoredUnit: Set<string> = new Set(),
   reverse: boolean
 ): void {
-  if (ignoredUnit.has(unitId)) {
+  if (ignoredUnit.has(unitId) && graphId !== unitId) {
     return
   }
 
@@ -571,29 +571,29 @@ export function moveMerge(
 
     const pickInput = !isInput && !ignoredUnit.has(unitId)
 
-    if ((pickInput && nextInput) || (!pickInput && nextOutput)) {
-      const {
-        mergeId: nextMergeId,
-        pinId: nextPinId,
-        subPinSpec: nextSubPinSpec,
-      } = pickInput ? nextInput : nextOutput
+    // if ((pickInput && nextInput) || (!pickInput && nextOutput)) {
+    const {
+      mergeId: nextMergeId,
+      pinId: nextPinId,
+      subPinSpec: nextSubPinSpec,
+    } = (pickInput ? nextInput : nextOutput) ?? {}
 
-      moveLinkPinInto(
-        source,
-        target,
-        graphId,
-        unitId,
-        type,
-        pinId,
-        data,
-        collapseMap,
-        nextMergeId,
-        nextPinId,
-        null,
-        ignoredUnit,
-        reverse
-      )
-    }
+    moveLinkPinInto(
+      source,
+      target,
+      graphId,
+      unitId,
+      type,
+      pinId,
+      data,
+      collapseMap,
+      nextMergeId,
+      nextPinId,
+      null,
+      ignoredUnit,
+      reverse
+    )
+    // }
   }
 
   forEachPinOnMerge(mergeSpec, moveMergePin)
@@ -981,7 +981,7 @@ export function movePlug(
     subPinId
   )
 
-  const nextSubPinSpec = pathOrDefault(
+  const nextSubPinSpec: GraphSubPinSpec = pathOrDefault(
     nextPlugSpec,
     [type, pinId, subPinId],
     undefined
@@ -1004,7 +1004,7 @@ export function movePlug(
     return
   }
 
-  const { nextPinId } = nextSubPinSpec
+  const { pinId: nextPinId = subPinSpec.pinId } = nextSubPinSpec
 
   let nextSubPinSpec_ = nextSubPinSpec
 

package/src/client/component.ts

@@ -1042,19 +1042,14 @@ export class Component<
     return getRect(this.$element)
   }
 
-  getBoundingClientRect(): {
-    x: number
-    y: number
-    width: number
-    height: number
-  } {
+  getBoundingClientRect(): Rect {
     if (this.$context) {
       if (!this.$primitive) {
         throw new Error('cannot calculate position of multiple elements.')
       }
 
       if (this.$element instanceof Text) {
-        // RETURN
+        // TODO
         return
       }
 
@@ -1958,6 +1953,22 @@ export class Component<
     }
   }
 
+  async requestPictureInPicture(): Promise<void> {
+    const {
+      api: {
+        document: { requestPictureInPictureWindow },
+      },
+    } = this.$system
+
+    const pipWindow = await requestPictureInPictureWindow()
+
+    // @ts-ignore
+    if (pipWindow.document) {
+      // @ts-ignore
+      pipWindow.document.body.appendChild(this.$element)
+    }
+  }
+
   public insertParentChildAt(
     component: Component,
     slotName: string,

package/src/client/extractStyle.ts

@@ -5,6 +5,7 @@ import { Component } from './component'
 import { DEFAULT_FONT_SIZE } from './DEFAULT_FONT_SIZE'
 import { extractTrait } from './extractTrait'
 import { IOElement } from './IOElement'
+import { isContentEditable } from './isTextLike'
 import { LayoutNode } from './LayoutNode'
 import { rawExtractStyle } from './rawExtractStyle'
 import { expandSlot } from './reflectComponentBaseTrait'
@@ -307,3 +308,163 @@ export function _extractStyle(
 
   return style
 }
+
+export function extractFromRawStyle(
+  root: Component,
+  component: Component,
+  element: IOElement,
+  style: Style,
+  fallbackTrait: LayoutNode,
+  measureText: (text: string, fontSize: number) => Size,
+  fitContent: boolean = false,
+  getLeafStyle: (
+    parent_trait: LayoutNode,
+    leaf_path: string[],
+    leaf_comp: Component
+  ) => Style = (parent_trait, leaf_path, leaf_comp) =>
+    extractStyle(root, leaf_comp, parent_trait, measureText, fitContent)
+): Style {
+  const fitWidth = style['width'] === 'fit-content'
+  const fitHeight = style['height'] === 'fit-content'
+
+  if (element instanceof Text) {
+    const fontSize = component.getFontSize()
+
+    const { textContent } = component.$element
+
+    const { width, height } = measureText(textContent, fontSize)
+
+    return {
+      width: `${width}px`,
+      height: `${height}px`,
+    }
+  }
+
+  if (isContentEditable(element) && (fitWidth || fitHeight)) {
+    const fontSize = component.getFontSize()
+
+    const { textContent } = component.$element
+
+    const { width, height } = measureText(textContent, fontSize)
+
+    if (fitWidth) {
+      style['width'] = `${width}px`
+    }
+
+    if (fitHeight) {
+      style['height'] = `${height}px`
+    }
+  }
+
+  if (style['display'] === 'contents') {
+    return {
+      width: '100%',
+      height: '100%',
+    }
+  }
+
+  if (element instanceof HTMLCanvasElement) {
+    const treatProp = (name: 'width' | 'height') => {
+      const prop = component.getProp(name)
+
+      if (prop !== undefined) {
+        if (typeof prop === 'string') {
+          if (isFrameRelativeValue(prop)) {
+            const prop_num = prop.substring(0, prop.length - 2)
+
+            style[name] = `${prop_num}%`
+          } else {
+            // TODO
+          }
+        } else {
+          style[name] = `${prop}px`
+        }
+      } else {
+        style[name] = `${element[name]}px`
+      }
+    }
+
+    treatProp('width')
+    treatProp('height')
+  }
+
+  if (element instanceof HTMLInputElement) {
+    if (
+      element.type === 'text' ||
+      element.type === 'number' ||
+      element.type === 'password'
+    ) {
+      if (style.height === 'fit-content') {
+        const { value } = element
+
+        const fontSize = element.style.fontSize
+
+        const fontSizeNum = parseFontSize(fontSize) ?? DEFAULT_FONT_SIZE
+
+        const { height } = measureText(value, fontSizeNum)
+
+        style.height = `${height}px`
+      }
+    }
+
+    if (element.type === 'range') {
+      style.height = '18px'
+    }
+  } else if (element instanceof HTMLSelectElement) {
+    style.height = '18px'
+  }
+
+  if (element instanceof SVGPathElement) {
+    const d = element.getAttribute('d')
+
+    const bb = getPathBoundingBox(d)
+
+    style['width'] = `${bb.width}px`
+    style['height'] = `${bb.height}px`
+
+    // TODO
+  }
+
+  if (element instanceof SVGRectElement) {
+    style['width'] = `${element.width.animVal.value}px`
+    style['height'] = `${element.height.animVal.value}px`
+
+    // TODO
+  }
+
+  if (element instanceof SVGCircleElement) {
+    const r = element.r.animVal.value
+
+    const width = 2 * r
+    const height = width
+
+    style['width'] = `${width}px`
+    style['height'] = `${height}px`
+
+    // TODO
+  }
+
+  if (fitContent) {
+    if (fitWidth || fitHeight) {
+      const { width, height } = measureChildren(
+        root,
+        component,
+        style,
+        fallbackTrait,
+        measureText,
+        fitContent,
+        getLeafStyle
+      )
+
+      if (fitWidth) {
+        style['width'] = `${width}px`
+      }
+
+      if (fitHeight) {
+        style['height'] = `${height}px`
+      }
+    }
+  }
+
+  return style
+}

package/src/client/isTextLike.ts

@@ -0,0 +1,16 @@
+import { IOElement } from './IOElement'
+import { Component } from './component'
+
+export function isTextLike(leaf_comp: Component): boolean {
+  const is_text =
+    leaf_comp.$element instanceof Text || isContentEditable(leaf_comp.$element)
+
+  return is_text
+}
+
+export function isContentEditable(element: IOElement): boolean {
+  return (
+    element instanceof HTMLDivElement &&
+    element.getAttribute('contenteditable') === 'true'
+  )
+}

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

@@ -45,6 +45,9 @@ export function webDocument(
     createRange(): Range {
       return document.createRange()
     },
+    exitPictureInPicture(): Promise<void> {
+      return document.exitPictureInPicture()
+    },
     MutationObserver: MutationObserver,
     ResizeObserver: ResizeObserver,
     PositionObserver: PositionObserver,

package/src/debug/graph/watchGraphInternal.ts

@@ -21,6 +21,7 @@ import { watchGraphSetUnitIdEvent } from './watchGraphSetUnitIdEvent'
 import { watchGraphSetUnitPinConstant } from './watchGraphSetUnitPinConstantEvent'
 import { watchGraphSetUnitPinData } from './watchGraphSetUnitPinDataEvent'
 import { watchGraphSetUnitPinIgnored } from './watchGraphSetUnitPinIgnoredEvent'
+import { watchGraphSetUnitPinSetId } from './watchGraphSetUnitPinSetIdEvent'
 import { watchGraphUnitComponentAppendEvent } from './watchGraphUnitComponentAppendEvent'
 import { watchGraphUnitComponentRemoveEvent } from './watchGraphUnitComponentRemoveEvent'
 import {
@@ -54,6 +55,7 @@ export const GRAPH_EVENT_TO_WATCHER: Dict<
   reorder_sub_component: watchGraphReorderSubComponent,
   move_sub_component_root: watchGraphMoveSubComponentRoot,
   set_unit_pin_constant: watchGraphSetUnitPinConstant,
+  set_unit_pin_set_id: watchGraphSetUnitPinSetId,
   set_unit_pin_ignored: watchGraphSetUnitPinIgnored,
   set_pin_set_functional: watchGraphSetUnitPinFunctional,
   set_pin_set_id: watchGraphSetPinSetId,

package/src/debug/graph/watchGraphSetUnitPinSetIdEvent.ts

@@ -0,0 +1,39 @@
+import { Graph } from '../../Class/Graph'
+import { GraphSetUnitPinSetId } from '../../Class/Graph/interface'
+import { G_EE } from '../../types/interface/G'
+import { Moment } from '../Moment'
+
+export interface GraphSetUnitPinSetIdMomentData extends GraphSetUnitPinSetId {
+  path: string[]
+}
+
+export interface GraphSetUnitPinSetIdMoment
+  extends Moment<GraphSetUnitPinSetIdMomentData> {}
+
+export function watchGraphSetUnitPinSetId(
+  event: 'set_unit_pin_set_id',
+  graph: Graph,
+  callback: (moment: GraphSetUnitPinSetIdMoment) => void
+): () => void {
+  const listener = (
+    ...[unitId, type, pinId, nextPinId, path]: G_EE['set_unit_pin_set_id']
+  ) => {
+    callback({
+      type: 'graph',
+      event,
+      data: {
+        unitId,
+        type,
+        pinId,
+        nextPinId,
+        path,
+      },
+    })
+  }
+
+  graph.prependListener(event, listener)
+
+  return () => {
+    graph.removeListener(event, listener)
+  }
+}

package/src/docs/concept/README.md

@@ -12,7 +12,7 @@ Unit is also heavily inspired by Functional and Reactive Programming, both highl
 
 The Unit paradigm was specially designed to enable easy visual creation of programs called units, which can be interacted with through their inputs and outputs. A new unit can be built by piping and collapsing together smaller units, in a process called Composition. Unit's fundamentals are not new by themselves - in fact, Unit represents a purposeful re-exploration of Computer Science principles in the context of modern Software Development.
 
-The simplicity of Programming in Unit comes from the iterative application of a very small set of principles. One may start out with an initial set of units, which can be linked together forming a new graph unit, in a process called Composition. Symmetrically, a graph can be decomposed and disconnected into its set of smaller units. Moreover any software can be built by repeatedly taping into those.
+The simplicity of Programming in Unit comes from the iterative application of a very small set of principles. One may start out with an initial set of units, which can be linked together forming a new graph unit, in a process called Composition. Symmetrically, a graph can be decomposed and disconnected into its set of smaller units. Moreover any software can be built by repeating this process.
 
 The concept of a Unit is essentially an advancement of the fundamental concept of a function, common to many Textual Programming Languages, such as JavaScript and C++. A function is supposed to be given an ordered list of arguments as input and it can return a single datum as output. A unit, on the other hand, can receive and send data at any time, in any order and through multiple inputs and outputs. We believe that redefining the fundamental building block of Programming as a unit can exponentially reduce Software Complexity.
 
@@ -30,6 +30,12 @@ That brings us to the world of User Interfaces (UI), which is inseparable from t
 
 Today, programming a UI is about building a thin visual layer on top of a thick black box, represented by the figure of an "app". Such apps are usually optimized, in logic and design, for a specific set of use cases, invariably rendering the UI either unfit or overfit for real life use cases, which are often unpredictable; the user is not free to arbitrarily mold the interface to his liking. He can neither extend nor extract nor focus on the objects he is currently interested on, so he's forced to content with the lack or interference of a certain UI element. This renders people hostage to the specific design decisions of many one-size-fits-all apps, which are usually borderline impossible to customize or extend.
 
-In Unit, the (visual) components that make up a user interface are units! That means they can be composed and decomposed on will. The user can always inspect the layout and logic of anything he can put his eyes on, being that copying, extending, changing or removing. Therefore, like any other unit, every unit website can be unwrapped into its subcomponents, which live side by side with the logical circuitry that controls them; no context switch between Design and Development.
+In Unit, the (visual) components that make up a user interface are units! That means they can be composed and decomposed on will. The user can always inspect the layout and logic of anything he can put his eyes on, being that copying, extending, changing or removing. Therefore, like any other unit, every unit website can be unwrapped into its subcomponents, which live side by side with the logical circuitry that controls them - no context switch between Design and Development.
+
+Likewise, in Unit, there is no explicit separation between "frontend" and "backend". All unit processes can contain components, which helps to visualize it, and can be accessed through an array of standard communication channels. Therefore, the Unit programmer is able to debug "client" and "server" logic side by side. More practically, this divide comes down to the presence of centain APIs, such as "HTTP", "File System" and "Database", which are available in Unit regardless of the host system, so the same program can run anywhere seamlessly regardless of the underlying system/engine.
+
+Curiously, the Unit Environment is optimized for the case of 0 code. It can be used as day to day system, where the user practices no direct programming at all. The user starts out with an empty infinite canvas that can be conveniently populated with the desired units to build up the user's own personal spaces, some ephemeral, most reusable.
+
+There's a curious emergent pattern here: Unit evolves by removing the auto-imposed divide between concepts that can otherwise work very well together: "user" and "programmer", "developer" and "designer", "client" and "server", "local" and "remote", "sync" and "async", "apps" and "systems".
 
 Unit shifts the software paradigm in the direction of user empowerment.

package/src/interface.ts

@@ -50,6 +50,7 @@ export const INHERITANCE = {
   CH: ['EE'],
   IB: ['I'],
   W: ['EE', 'CH'],
+  B: ['IM'],
 }
 
 export type AllTypes<T> = {

package/src/script/build/client.ts

@@ -1,4 +1,4 @@
-import { writeFileSync } from 'fs'
+import { copy, writeFile } from 'fs-extra'
 import { build } from '../build'
 ;(async () => {
   const result = await build({
@@ -14,7 +14,9 @@ import { build } from '../build'
     metafile: true,
   })
 
-  writeFileSync('public/build.json', JSON.stringify(result.metafile ?? {}))
+  await writeFile('public/build.json', JSON.stringify(result.metafile ?? {}))
+
+  await copy('public/index.js', 'build/web.js')
 })()
 
 export default null

package/src/spec/Lazy.ts

@@ -53,8 +53,7 @@ export function lazyFromSpec(
 
     public __ = ['U', 'G']
 
-    public stateful: boolean = false // RETURN __stateful
-    public __element: boolean = false // RETURN __element
+    public __element: boolean = false
 
     private __graph: Graph
 
@@ -104,6 +103,15 @@ export function lazyFromSpec(
         }
       })
     }
+    setUnitPinSetId(
+      unitId: string,
+      type: IO,
+      pinId: string,
+      newPinId: string,
+      ...extra: any[]
+    ): void {
+      throw new Error('Method not implemented.')
+    }
 
     fork(): void {
       this._ensure()

package/src/spec/util.ts

@@ -98,6 +98,10 @@ export const getExposedPinSpecs = (graph: GraphSpec) => {
   }
 }
 
+export const getExposePinSpec = (graph: GraphSpec, type: IO, pinId: string) => {
+  return pathOrDefault(graph, [`${type}s`, pinId], undefined)
+}
+
 export const getUnitExposedPins = (
   graph: GraphSpec,
   unitId: string

package/src/system/_classes.ts

@@ -183,7 +183,7 @@ import EnumerateDevices from './platform/api/media/EnumerateDevices'
 import GetDisplayMedia from './platform/api/media/GetDisplayMedia'
 import GetVideoTracks from './platform/api/media/GetVideoTracks'
 import GrabFrame from './platform/api/media/GrabFrame'
-import BlobToBitmap from './platform/api/media/image/BlobToBitmap'
+import ImageToBitmap from './platform/api/media/image/ImageToBitmap'
 import ImageCapture from './platform/api/media/ImageCapture'
 import MediaRecorder from './platform/api/media/MediaRecorder'
 import RequestPictureInPicture from './platform/api/media/RequestPictureInPicture'
@@ -510,7 +510,7 @@ export default {
 	'6705462c-5b47-11eb-9dfc-2f14c58b2789': GetDisplayMedia,
 	'0bc0c4ad-d2e0-4e3e-92e8-5b9dfee1cf5e': GetVideoTracks,
 	'f238caff-3f71-40d9-b1a9-d992060fea04': GrabFrame,
-	'262beb5f-21bd-4848-a62d-185f6f8a78e1': BlobToBitmap,
+	'262beb5f-21bd-4848-a62d-185f6f8a78e1': ImageToBitmap,
 	'a57383a9-5b24-4dbb-a5d1-0e278d036f89': ImageCapture,
 	'7e1b3a4c-be6b-11eb-b098-1b6b9db93f1e': MediaRecorder,
 	'3889d2f1-a0ed-4e8c-8e75-7a6683224275': RequestPictureInPicture,

package/src/system/_ids.ts

@@ -386,7 +386,7 @@ export const ID_ENUMERATE_DEVICES = '3511f756-2a02-4346-b417-8c34502f79d4'
 export const ID_GET_DISPLAY_MEDIA = '6705462c-5b47-11eb-9dfc-2f14c58b2789'
 export const ID_GET_VIDEO_TRACKS = '0bc0c4ad-d2e0-4e3e-92e8-5b9dfee1cf5e'
 export const ID_GRAB_FRAME = 'f238caff-3f71-40d9-b1a9-d992060fea04'
-export const ID_BLOB_TO_BITMAP = '262beb5f-21bd-4848-a62d-185f6f8a78e1'
+export const ID_IMAGE_TO_BITMAP = '262beb5f-21bd-4848-a62d-185f6f8a78e1'
 export const ID_IMAGE_CAPTURE = 'a57383a9-5b24-4dbb-a5d1-0e278d036f89'
 export const ID_MEDIA_RECORDER = '7e1b3a4c-be6b-11eb-b098-1b6b9db93f1e'
 export const ID_REQUEST_PICTURE_IN_PICTURE = '3889d2f1-a0ed-4e8c-8e75-7a6683224275'