@symbo.ls/sync 2.11.464 → 2.11.466

package/DefaultSyncApp.js

@@ -0,0 +1 @@
+'use strict'

package/Inspect.js

@@ -0,0 +1,197 @@
+'use strict'
+
+import * as smblsUI from '@symbo.ls/uikit'
+import { isObject, isString, isArray } from '@domql/utils'
+import { send } from '@symbo.ls/socket/client'
+
+function returnStringExtend (extend) {
+  return isString(extend) ? extend : isArray(extend) ? extend.find(extItem => isString(extItem)) : ''
+}
+
+function getComponentKey (el) {
+  if (!el) return
+  const __componentKey = el.__ref.__componentKey
+  const extendStr = el.extend && returnStringExtend(el.extend)
+  const parentChildExtendStr = el.parent && el.parent.childExtend && returnStringExtend(el.parent.childExtend)
+  return (__componentKey || extendStr || parentChildExtendStr || '').split('_')[0].split('.')[0].split('+')[0]
+}
+
+function findComponent (el) {
+  if (!el || !el.__ref) return
+  const { components, pages, editor } = el.context
+  const componentKey = getComponentKey(el)
+  if (editor && editor.onInitInspect) {
+    const initInspectReturns = editor.onInitInspect(componentKey, el, el.state)
+    if (!initInspectReturns) return findComponent(el.parent)
+  }
+  if (componentKey && (components[componentKey] || pages[componentKey])) {
+    return el
+  }
+  return findComponent(el.parent)
+}
+
+const inspectOnKey = (app, state, ctx) => {
+  const windowOpts = ctx.window || window
+  windowOpts.onkeydown = (ev) => {
+    if (ev.altKey && ev.shiftKey) {
+      app.state.update({ debugging: true, preventSelect: true }, {
+        preventUpdate: true,
+        preventContentUpdate: true,
+        preventRecursive: true
+      })
+    }
+  }
+  windowOpts.onkeyup = (ev) => {
+    if (app.state.preventSelect && (!ev.altKey || !ev.shiftKey)) {
+      app.state.replace({ debugging: false, preventSelect: false }, {
+        preventUpdate: true,
+        preventContentUpdate: true,
+        preventRecursive: true
+      })
+      app.Inspector.state.update({ area: false })
+    }
+  }
+}
+
+export const Inspect = {
+  props: {
+    '.preventSelect': { userSelect: 'none' },
+    '!preventSelect': { userSelect: 'auto' }
+  },
+
+  Inspector: {
+    state: {},
+    props: (el, s) => ({
+      transition: 'all, defaultBezier, X',
+      position: 'fixed',
+      hide: !(s.area && s.parent.debugging),
+      style: {
+        boxShadow: '0 0 10px #3686F733, 0 0 0 3px #3686F766, 0 0 100vmax 100vmax #000A',
+        zIndex: '9999999',
+        borderRadius: '10px',
+        pointerEvents: 'none'
+      }
+    }),
+
+    span: {
+      props: {
+        position: 'absolute',
+        margin: 'A2 0',
+        fontSize: 'Z',
+        color: 'text',
+        // color: 'blue',
+        zIndex: '99999999',
+        transition: 'all, defaultBezier, X',
+        textDecoration: 'underline',
+        fontWeight: '500',
+        top: '100%',
+        style: {
+          boxShadow: '0 25px 10px 35px black',
+          textShadow: '0 0 10px black'
+        },
+        text: '{{ focusKey }}'
+      }
+    },
+
+    on: {
+      init: ({ context }) => {
+        const { components } = context
+
+        if (isObject(components)) {
+          const { Content, ...rest } = components
+          for (const key in rest) {
+            if (smblsUI[key]) continue
+            if (!rest[key].__ref) rest[key].__ref = {}
+            if (!rest[key].__ref.__componentKey) {
+              rest[key].__ref.__componentKey = key
+            }
+          }
+        }
+      },
+      beforeUpdate: (ch, el, s) => {
+        const { area } = s
+        const isDebugging = s.area && s.parent.debugging
+
+        let style
+        if (!isDebugging) {
+          style = 'display: none !important'
+        } else if (area) {
+          const { x, y, width, height } = area
+          // el.node.style = Object.stringify({
+          //   top: y - 6 + 'px',
+          //   left: x - 6 + 'px',
+          //   width: width + 12 + 'px',
+          //   height: height + 12 + 'px'
+          // })
+          style = `
+            display: block !important;
+            top: ${y - 6}px;
+            left: ${x - 6}px;
+            width: ${width + 12}px;
+            height: ${height + 12}px;
+          `
+        }
+
+        el.node.style = style
+        el.span.node.innerText = s.focusKey
+
+        return false
+      }
+    }
+  },
+
+  on: {
+    inspectOnKey,
+    mousemove: (ev, e, state) => {
+      const el = ev.target.ref
+      const component = findComponent(el)
+      const focusState = e.Inspector.state
+
+      if (!component || !state.debugging || !component.__ref) return focusState.update({ area: false })
+
+      const componentKey = getComponentKey(component)
+      const updateValue = (area) => {
+        focusState.update({ area, focusKey: componentKey })
+      }
+
+      const update = () => {
+        if (ev.altKey && ev.shiftKey) {
+          const { x, y, width, height } = component.node.getBoundingClientRect()
+          const area = { x, y, width, height }
+
+          if (!focusState.area) return updateValue(area)
+          if (focusState.area.x !== area.x) updateValue(area)
+        } else if (focusState.area) {
+          focusState.update({ area: false })
+        }
+      }
+
+      window.requestAnimationFrame(() => {
+        update()
+        window.requestAnimationFrame(update)
+      })
+    },
+    mousedown: (ev, elem, state) => {
+      if (!state.debugging) return
+      const el = ev.target.ref
+      const component = findComponent(el)
+      if (!component) return
+      const componentKey = getComponentKey(component)
+      if (!componentKey) return
+
+      const editor = el.context.editor
+      if (editor && editor.onInspect) {
+        return editor.onInspect(componentKey, el, el.state, { allowRouterWhileInspect: true })
+      }
+
+      const data = JSON.stringify({
+        componentKey: `${componentKey}`
+      })
+      send.call(el.context.socket, 'route', data)
+
+      ev.preventDefault()
+      ev.stopPropagation()
+      return false
+    }
+  }
+}

package/Notifications.js

@@ -0,0 +1,122 @@
+'use strict'
+
+// const ANIMATION = {
+//   fadeInUp: {
+//     from: {
+//       transform: 'translate3d(0, 12.5%, 1px)',
+//       opacity: 0
+//     },
+//     to: {
+//       transform: 'translate3d(0, 0, 1px)',
+//       opacity: 1
+//     }
+//   },
+//   fadeOutDown: {
+//     from: {
+//       transform: 'translate3d(0, 0, 1px)',
+//       opacity: 1
+//     },
+//     to: {
+//       transform: 'translate3d(0, 12.5%, 1px)',
+//       opacity: 0
+//     }
+//   }
+// }
+
+// const COLOR = {
+//   black: '#000000',
+//   blue: '#3686F7'
+// }
+
+// set({
+//   COLOR,
+//   ANIMATION
+// })
+
+const NOTIF_COLORS = {
+  success: 'green',
+  error: 'red',
+  warning: 'yellow'
+}
+
+export const connectedToSymbols = (clients, element, state) => {
+  console.log(clients)
+  if (clients.symbols) {
+    if (!state.connected) {
+      state.notifications.connected = {
+        title: 'Connected',
+        message: 'to the Symbols live server'
+      }
+
+      state.update({ connected: true })
+
+      const t = setTimeout(() => {
+        delete state.notifications.connected
+        element.notifications.content.connected
+          .setProps({ animation: 'fadeOutDown' })
+        state.update({ connected: true })
+        clearTimeout(t)
+      }, 3000)
+    }
+  } else {
+    if (state.connected) {
+      state.notifications.connected = {
+        title: 'Disconnected',
+        type: 'error'
+      }
+
+      state.update({ connected: false })
+
+      const t = setTimeout(() => {
+        delete state.notifications.connected
+        if (element.notifications.content.connected) {
+          element.notifications.content.connected
+            .setProps({ animation: 'fadeOutDown' })
+        }
+        state.update({ connected: true })
+        clearTimeout(t)
+      }, 3000)
+    }
+  }
+}
+
+export const Notifications = {
+  state: {
+    notifications: []
+  },
+
+  Notifications: {
+    props: {
+      position: 'fixed',
+      left: 'A2',
+      bottom: 'Z2',
+      zIndex: '999'
+    },
+    childExtend: {
+      extend: 'Notification',
+      props: ({ state }) => ({
+        animationDuration: 'C',
+        background: NOTIF_COLORS[state.type || 'success'],
+        icon: null,
+        Flex: {
+          Title: {
+            text: '{{ title }}'
+          },
+          P: {
+            text: '{{ title }}'
+          }
+        },
+        onRender: (e, el, s) => {
+          el.setProps({ animation: 'fadeInUp' })
+        },
+        onClick: (e, el, s) => {
+          delete s.notifications[el.key]
+          el.setProps({ animation: 'fadeOutDown' })
+          if (s.onClose) s.onClose(e, el, s)
+        }
+      }),
+      IconText: null
+    },
+    $stateCollection: ({ state }) => state.notifications
+  }
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@symbo.ls/sync",
-  "version": "2.11.464",
+  "version": "2.11.466",
   "main": "index.js",
   "module": "index.js",
-  "gitHead": "7a24490e102fa450e508f8527923647816e26ab9",
+  "gitHead": "ecdaeba51ab8c4d65fc84880530fc42b449e89b3",
   "files": [
-    "src",
+    "*.js",
     "dist"
   ],
   "repository": "https://github.com/symbo-ls/scratch",
@@ -35,7 +35,7 @@
     "@symbo.ls/init": "^2.11.464",
     "@symbo.ls/scratch": "^2.11.464",
     "@symbo.ls/socket": "^2.11.464",
-    "@symbo.ls/uikit": "^2.11.464"
+    "@symbo.ls/uikit": "^2.11.465"
   },
   "devDependencies": {
     "@babel/core": "^7.12.0"