@live-change/flow-frontend 0.9.225 → 0.9.227

package/front/src/router.js

@@ -6,19 +6,29 @@ import {
 
 import { dbAdminRoutes } from "@live-change/db-admin"
 
-export function wysiwygRoutes(config = {}) {
+export function flowRoutes(config = {}) {
   const { prefix = '/', route = (r) => r } = config
   return [
-
-    /*route({
-      name: 'wysiwyg:editorWithPreview', path: prefix + '', meta: { },
-      component: () => import("./EditorWithPreview.vue"),
-      props: {
-      }
-    }),*/
+    route({
+      name: 'index',
+      path: prefix,
+      meta: { raw: true },
+      component: () => import("./demo/FlowKitchenSink.vue")
+    }),
+    route({
+      name: 'calculation',
+      path: prefix + 'calc',
+      meta: { raw: true },
+      component: () => import("./demo/calculation/FlowCalculationDemo.vue")
+    }),
+    route({
+      name: 'calculationDetail',
+      path: prefix + 'calc/:calculation',
+      meta: { raw: true },
+      component: () => import("./demo/calculation/FlowCalculationDemo.vue")
+    }),
 
     ...dbAdminRoutes({ prefix: '/_db', route: r => ({ ...r, meta: { ...r.meta, raw: true }}) })
-
   ]
 }
 
@@ -26,12 +36,10 @@ export async function sitemap(route, api) {
 
 }
 
-
 export function createRouter(app, config) {
   const router = _createRouter({
     history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
-    routes: wysiwygRoutes(config)
+    routes: flowRoutes(config)
   })
   return router
 }
-

package/package.json

@@ -1,46 +1,58 @@
 {
   "name": "@live-change/flow-frontend",
-  "version": "0.9.225",
+  "version": "0.9.227",
   "scripts": {
-    "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
-    "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
-    "localDev": "node server/start.js localDev --enableSessions --dbAccess",
-    "dev": "node server/start.js dev --enableSessions",
-    "ssrDev": "node server/start.js ssrDev --enableSessions",
-    "serveAllMem": "cross-env NODE_ENV=production lcli ssrServer --withApi --withServices --updateServices --enableSessions --withDb --dbBackend mem --createDb",
-    "serveAll": "cross-env NODE_ENV=production lcli ssrServer --withApi --withServices --updateServices --enableSessions",
-    "serve": "cross-env NODE_ENV=production lcli ssrServer --enableSessions",
-    "apiServer": "node server/start.js apiServer --enableSessions",
-    "devApiServer": "node server/start.js devApiServer --enableSessions",
-    "memApiServer": "node server/start.js memApiServer --enableSessions",
+    "memDev": "tsx --inspect --expose-gc server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
+    "localDevInit": "tsx server/start.js localDev --enableSessions --initScript ./init.js --dbAccess",
+    "localDev": "tsx server/start.js localDev --enableSessions --dbAccess",
+    "dev": "tsx --inspect --expose-gc server/start.js dev --enableSessions",
+    "ssrDev": "tsx server/start.js ssrDev --enableSessions",
+    "serveAllMem": "cross-env NODE_ENV=production node dist/server/start.js ssrServer --withApi --withServices --updateServices --enableSessions --withDb --dbBackend mem --createDb",
+    "serveAll": "cross-env NODE_ENV=production node dist/server/start.js ssrServer --withApi --withServices --updateServices --enableSessions",
+    "serve": "cross-env NODE_ENV=production node dist/server/start.js ssrServer --enableSessions",
+    "apiServer": "node dist/server/start.js apiServer --enableSessions",
+    "devApiServer": "tsx server/start.js devApiServer --enableSessions",
+    "memApiServer": "tsx server/start.js memApiServer --enableSessions",
     "build": "cd front; yarn build:client && yarn build:server",
     "build:client": "cd front; vite build --ssrManifest --outDir dist/client",
     "build:server": "cd front; vite build --ssr src/entry-server.js --outDir dist/server",
     "generate": "vite build --ssrManifest --outDir dist/static && yarn build:server && node prerender",
-    "debug": "node --inspect-brk server"
+    "debug": "node --inspect-brk server",
+    "describe": "tsx server/start.js describe",
+    "test": "NODE_ENV=test node --import tsx --test --test-concurrency=1 server/calculation/tests/*.test.js",
+    "e2e": "fnm exec -- node --import tsx e2e/runner.ts",
+    "e2e:file": "fnm exec -- node --import tsx e2e/runner.ts",
+    "e2e:headed": "SHOW_BROWSER=1 fnm exec -- node --import tsx e2e/runner.ts"
   },
   "type": "module",
   "dependencies": {
-    "@live-change/access-control-service": "^0.9.225",
-    "@live-change/cli": "^0.9.225",
-    "@live-change/dao": "^0.9.225",
-    "@live-change/dao-vue3": "^0.9.225",
-    "@live-change/dao-websocket": "^0.9.225",
-    "@live-change/db-admin": "^0.9.225",
-    "@live-change/framework": "^0.9.225",
-    "@live-change/frontend-base": "^0.9.225",
-    "@live-change/password-authentication-service": "^0.9.225",
-    "@live-change/secret-code-service": "^0.9.225",
-    "@live-change/secret-link-service": "^0.9.225",
-    "@live-change/session-service": "^0.9.225",
-    "@live-change/user-frontend": "0.9.221",
-    "@live-change/user-service": "^0.9.225",
-    "@live-change/vue3-components": "^0.9.225",
-    "@live-change/vue3-ssr": "^0.9.225",
+    "@live-change/access-control-frontend": "^0.9.227",
+    "@live-change/access-control-service": "^0.9.227",
+    "@live-change/cli": "^0.9.227",
+    "@live-change/dao": "^0.9.227",
+    "@live-change/dao-vue3": "^0.9.227",
+    "@live-change/dao-websocket": "^0.9.227",
+    "@live-change/db-admin": "^0.9.227",
+    "@live-change/e2e-test": "^0.9.227",
+    "@live-change/flow-service": "^0.9.227",
+    "@live-change/framework": "^0.9.227",
+    "@live-change/frontend-base": "^0.9.227",
+    "@live-change/password-authentication-service": "^0.9.227",
+    "@live-change/relations-plugin": "^0.9.227",
+    "@live-change/secret-code-service": "^0.9.227",
+    "@live-change/secret-link-service": "^0.9.227",
+    "@live-change/server": "^0.9.227",
+    "@live-change/session-service": "^0.9.227",
+    "@live-change/user-frontend": "^0.9.227",
+    "@live-change/user-service": "^0.9.227",
+    "@live-change/vue3-components": "^0.9.227",
+    "@live-change/vue3-ssr": "^0.9.227",
+    "@primeuix/themes": "^1.2.1",
     "@vueuse/core": "^12.3.0",
-    "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.5",
     "cross-env": "^7.0.3",
+    "deepmerge": "^4.2.2",
+    "dotenv": "^17.2.1",
     "get-port-sync": "1.0.1",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
@@ -53,16 +65,11 @@
     "vue3-scroll-border": "0.1.7"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.9.225",
-    "codeceptjs": "^3.7.6",
-    "generate-password": "^1.7.1",
     "playwright": "=1.50.1",
-    "random-profile-generator": "^2.3.0",
-    "txtgen": "^3.0.7",
-    "webdriverio": "^9.5.1"
+    "tsx": "^4.21.0"
   },
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "e44dc8b9eefd8b67c40a29b3117781662093c922"
+  "gitHead": "7d4dc92dcb9a50381292dded7d8766a3cadbecf9"
 }

package/server/app.config.js

@@ -0,0 +1,61 @@
+import dotenv from 'dotenv'
+dotenv.config()
+
+import App from '@live-change/framework'
+const app = App.app()
+
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+import { accessSync, readFileSync } from 'fs'
+
+const packageJsonPath = dirname(fileURLToPath(import.meta.url))
+  .split('/').map((part, i, arr) =>
+    join(arr.slice(0, arr.length - i).join('/'), 'package.json')
+  ).find(p => { try { accessSync(p); return true } catch (e) { return false } })
+const packageJson = packageJsonPath ? JSON.parse(readFileSync(packageJsonPath, 'utf-8')) : {}
+
+const name = packageJson.name ?? 'flow-frontend'
+const brandName = process.env.BRAND_NAME || 'Flow editor'
+const homepage = process.env.BASE_HREF ?? packageJson.homepage
+const brandDomain = process.env.BRAND_DOMAIN ||
+  (homepage && homepage.match(/https:\/\/([^/]+)/)?.[1]) || 'example.com'
+const baseHref = process.env.BASE_HREF || homepage || 'http://localhost:8001'
+const version = process.env.VERSION || packageJson.version
+
+const clientConfig = {
+  version,
+  name,
+  brandName,
+  brandDomain,
+  homepage,
+  baseHref
+}
+
+app.config = {
+  ...clientConfig,
+  clientConfig: { ...clientConfig },
+  services: [
+    {
+      name: 'session',
+      path: '@live-change/session-service',
+      createSessionOnUpdate: true
+    },
+    {
+      name: 'flow',
+      path: '@live-change/flow-service',
+      ownerTypes: ['calculation_Calculation'],
+      logicTypes: [
+        'calculation_Constant',
+        'calculation_Add',
+        'calculation_Multiply',
+        'calculation_Power'
+      ],
+      connectionTypes: ['calculation_Wire']
+    },
+    {
+      name: 'calculation'
+    }
+  ]
+}
+
+export default app.config

package/server/calculation/calculation.js

@@ -0,0 +1,20 @@
+import App from '@live-change/framework'
+const app = App.app()
+
+import definition from './definition.js'
+import config from './config.js'
+
+const Session = definition.foreignModel('session', 'Session')
+
+export const Calculation = definition.model({
+  name: 'Calculation',
+  itemOf: {
+    what: Session,
+    readAccess: config.readAccess,
+    writeAccess: config.writeAccess,
+    createAccess: config.writeAccess,
+    updateAccess: config.writeAccess,
+    deleteAccess: config.writeAccess
+  },
+  properties: {}
+})

package/server/calculation/config.js

@@ -0,0 +1,15 @@
+import definition from './definition.js'
+
+const open = () => true
+
+const {
+  readAccess = open,
+  writeAccess = open
+} = definition.config || {}
+
+definition.clientConfig = {}
+
+export default {
+  readAccess,
+  writeAccess
+}

package/server/calculation/definition.js

@@ -0,0 +1,11 @@
+import App from '@live-change/framework'
+const app = App.app()
+
+import relationsPlugin from '@live-change/relations-plugin'
+
+const definition = app.createServiceDefinition({
+  name: 'calculation',
+  use: [relationsPlugin]
+})
+
+export default definition

package/server/calculation/index.js

@@ -0,0 +1,12 @@
+import App from '@live-change/framework'
+const app = App.app()
+
+import definition from './definition.js'
+
+import './calculation.js'
+import './ops.js'
+import './wire.js'
+import './run.js'
+import './triggers.js'
+
+export default definition

package/server/calculation/ops.js

@@ -0,0 +1,69 @@
+import App from '@live-change/framework'
+const app = App.app()
+
+import definition from './definition.js'
+import config from './config.js'
+import { Calculation } from './calculation.js'
+
+const access = {
+  readAccess: config.readAccess,
+  writeAccess: config.writeAccess,
+  createAccess: config.writeAccess,
+  updateAccess: config.writeAccess,
+  deleteAccess: config.writeAccess
+}
+
+export const Constant = definition.model({
+  name: 'Constant',
+  itemOf: {
+    what: Calculation,
+    ...access
+  },
+  properties: {
+    value: {
+      type: Number,
+      default: 1,
+      validation: ['number']
+    }
+  }
+})
+
+export const Add = definition.model({
+  name: 'Add',
+  itemOf: {
+    what: Calculation,
+    ...access
+  },
+  properties: {}
+})
+
+export const Multiply = definition.model({
+  name: 'Multiply',
+  itemOf: {
+    what: Calculation,
+    ...access
+  },
+  properties: {}
+})
+
+export const Power = definition.model({
+  name: 'Power',
+  itemOf: {
+    what: Calculation,
+    ...access
+  },
+  properties: {
+    exponent: {
+      type: Number,
+      default: 2,
+      validation: ['number']
+    }
+  }
+})
+
+export const OP_TYPES = [
+  'calculation_Constant',
+  'calculation_Add',
+  'calculation_Multiply',
+  'calculation_Power'
+]

package/server/calculation/run.js

@@ -0,0 +1,69 @@
+import definition from './definition.js'
+import config from './config.js'
+import { Calculation } from './calculation.js'
+import { runCalculationGraph } from './runGraph.js'
+
+function rowId(row) {
+  return row?.to || row?.id
+}
+
+async function loadOwned(model, calculation) {
+  const rows = await model.sortedIndexRangeGet('byCalculation', [calculation])
+  const objects = []
+  for(const row of rows || []) {
+    const id = rowId(row)
+    const object = await model.get(id)
+    objects.push(object || row)
+  }
+  return objects
+}
+
+function opTypeName(kind) {
+  return {
+    constant: 'calculation_Constant',
+    add: 'calculation_Add',
+    multiply: 'calculation_Multiply',
+    power: 'calculation_Power'
+  }[kind]
+}
+
+definition.action({
+  name: 'runCalculation',
+  properties: {
+    calculation: {
+      type: Calculation,
+      validation: ['nonEmpty']
+    }
+  },
+  access: config.readAccess,
+  async execute({ calculation }, { service }) {
+    const constants = await loadOwned(service.models.Constant, calculation)
+    const adds = await loadOwned(service.models.Add, calculation)
+    const multiplies = await loadOwned(service.models.Multiply, calculation)
+    const powers = await loadOwned(service.models.Power, calculation)
+
+    const ops = [
+      ...constants.map(row => ({ type: opTypeName('constant'), id: row.id })),
+      ...adds.map(row => ({ type: opTypeName('add'), id: row.id })),
+      ...multiplies.map(row => ({ type: opTypeName('multiply'), id: row.id })),
+      ...powers.map(row => ({ type: opTypeName('power'), id: row.id }))
+    ]
+
+    const seen = new Set()
+    const wires = []
+    for(const op of ops) {
+      const rows = await service.models.Wire.sortedIndexRangeGet('bySource', [op.type, op.id])
+      for(const row of rows || []) {
+        const id = rowId(row)
+        if(seen.has(id)) continue
+        seen.add(id)
+        const wire = (await service.models.Wire.get(id)) || row
+        wires.push(wire)
+      }
+    }
+
+    return runCalculationGraph({ constants, adds, multiplies, powers, wires })
+  }
+})
+
+export { runCalculationGraph }

package/server/calculation/runGraph.js

@@ -0,0 +1,85 @@
+function rowId(row) {
+  return row?.to || row?.id
+}
+
+export function runCalculationGraph({
+  constants = [],
+  adds = [],
+  multiplies = [],
+  powers = [],
+  wires = []
+} = {}) {
+  const nodes = new Map()
+  for(const constant of constants) {
+    nodes.set(rowId(constant), {
+      kind: 'constant',
+      value: Number(constant.value ?? 1)
+    })
+  }
+  for(const add of adds) {
+    nodes.set(rowId(add), { kind: 'add' })
+  }
+  for(const multiply of multiplies) {
+    nodes.set(rowId(multiply), { kind: 'multiply' })
+  }
+  for(const power of powers) {
+    nodes.set(rowId(power), {
+      kind: 'power',
+      exponent: Number(power.exponent ?? 2)
+    })
+  }
+
+  const incoming = new Map()
+  const outgoing = new Map()
+  for(const id of nodes.keys()) {
+    incoming.set(id, [])
+    outgoing.set(id, [])
+  }
+  for(const wire of wires) {
+    const source = wire.source
+    const destination = wire.destination
+    if(!nodes.has(source) || !nodes.has(destination)) continue
+    if((wire.destinationPort || 'in') != 'in') continue
+    incoming.get(destination).push(source)
+    outgoing.get(source).push(destination)
+  }
+
+  const indegree = new Map()
+  for(const [id, sources] of incoming) {
+    indegree.set(id, sources.length)
+  }
+  const queue = [...nodes.keys()].filter(id => indegree.get(id) == 0)
+  const order = []
+  while(queue.length) {
+    const id = queue.shift()
+    order.push(id)
+    for(const next of outgoing.get(id)) {
+      indegree.set(next, indegree.get(next) - 1)
+      if(indegree.get(next) == 0) queue.push(next)
+    }
+  }
+
+  if(order.length != nodes.size) {
+    return { values: {}, error: 'Cycle in the graph' }
+  }
+
+  const values = {}
+  for(const id of order) {
+    const node = nodes.get(id)
+    const inputs = incoming.get(id).map(sourceId => values[sourceId])
+    if(node.kind == 'constant') {
+      values[id] = node.value
+    } else if(node.kind == 'add') {
+      values[id] = inputs.reduce((sum, value) => sum + value, 0)
+    } else if(node.kind == 'multiply') {
+      values[id] = inputs.length ? inputs.reduce((product, value) => product * value, 1) : 1
+    } else if(node.kind == 'power') {
+      if(!inputs.length) {
+        return { values, error: 'Power is missing an input' }
+      }
+      values[id] = inputs[0] ** node.exponent
+    }
+  }
+
+  return { values }
+}

package/server/calculation/tests/run.test.js

@@ -0,0 +1,73 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { runCalculationGraph } from '../runGraph.js'
+
+test('constant returns its value', () => {
+  const result = runCalculationGraph({
+    constants: [{ id: 'c', value: 4 }]
+  })
+  assert.equal(result.error, undefined)
+  assert.equal(result.values.c, 4)
+})
+
+test('add sums inbound values', () => {
+  const result = runCalculationGraph({
+    constants: [{ id: 'a', value: 2 }, { id: 'b', value: 5 }],
+    adds: [{ id: 'sum' }],
+    wires: [
+      { source: 'a', destination: 'sum', sourcePort: 'out', destinationPort: 'in' },
+      { source: 'b', destination: 'sum', sourcePort: 'out', destinationPort: 'in' }
+    ]
+  })
+  assert.equal(result.values.sum, 7)
+})
+
+test('empty add is 0 and empty multiply is 1', () => {
+  const result = runCalculationGraph({
+    adds: [{ id: 'sum' }],
+    multiplies: [{ id: 'prod' }]
+  })
+  assert.equal(result.values.sum, 0)
+  assert.equal(result.values.prod, 1)
+})
+
+test('multiply products inbound values', () => {
+  const result = runCalculationGraph({
+    constants: [{ id: 'a', value: 3 }, { id: 'b', value: 4 }],
+    multiplies: [{ id: 'prod' }],
+    wires: [
+      { source: 'a', destination: 'prod', sourcePort: 'out', destinationPort: 'in' },
+      { source: 'b', destination: 'prod', sourcePort: 'out', destinationPort: 'in' }
+    ]
+  })
+  assert.equal(result.values.prod, 12)
+})
+
+test('power raises the inbound base to exponent', () => {
+  const result = runCalculationGraph({
+    constants: [{ id: 'base', value: 3 }],
+    powers: [{ id: 'pow', exponent: 2 }],
+    wires: [
+      { source: 'base', destination: 'pow', sourcePort: 'out', destinationPort: 'in' }
+    ]
+  })
+  assert.equal(result.values.pow, 9)
+})
+
+test('cycle returns an error', () => {
+  const result = runCalculationGraph({
+    adds: [{ id: 'a' }, { id: 'b' }],
+    wires: [
+      { source: 'a', destination: 'b', sourcePort: 'out', destinationPort: 'in' },
+      { source: 'b', destination: 'a', sourcePort: 'out', destinationPort: 'in' }
+    ]
+  })
+  assert.ok(result.error)
+})
+
+test('power without input returns an error', () => {
+  const result = runCalculationGraph({
+    powers: [{ id: 'pow', exponent: 2 }]
+  })
+  assert.ok(result.error)
+})

package/server/calculation/triggers.js

@@ -0,0 +1,95 @@
+import App from '@live-change/framework'
+const app = App.app()
+
+import definition from './definition.js'
+
+function payloadFromTrigger(trig) {
+  const body = trig?.data && typeof trig.data == 'object' ? trig.data : trig
+  return {
+    identifiers: body.identifiers || body,
+    data: body.data,
+    object: body.object,
+    changeType: body.changeType
+  }
+}
+
+function wireQueueKey(trig) {
+  const { identifiers, data } = payloadFromTrigger(trig)
+  return JSON.stringify([
+    identifiers.sourceType,
+    identifiers.source,
+    identifiers.destinationType,
+    identifiers.destination,
+    data?.sourcePort,
+    data?.destinationPort
+  ])
+}
+
+definition.trigger({
+  name: 'createCalculation_Calculation',
+  properties: {
+    object: { type: String },
+    identifiers: { type: Object },
+    data: { type: Object },
+    changeType: { type: String }
+  },
+  async execute({ object }, { triggerService }) {
+    await triggerService({
+      service: 'flow',
+      type: 'flow_setGraph'
+    }, {
+      ownerType: 'calculation_Calculation',
+      owner: object
+    })
+  }
+})
+
+definition.trigger({
+  name: 'changeCalculation_Wire',
+  properties: {
+    object: { type: String },
+    identifiers: { type: Object },
+    data: { type: Object },
+    oldData: { type: Object },
+    changeType: { type: String }
+  },
+  queuedBy: wireQueueKey,
+  async execute({ object, identifiers, data, changeType }, { service }) {
+    if(changeType == 'delete' || !data) return
+    if(!identifiers?.sourceType || !identifiers?.destinationType) {
+      throw app.logicError('invalid_wire')
+    }
+    if(data.sourcePort != 'out' || data.destinationPort != 'in') {
+      throw app.logicError('invalid_wire_ports')
+    }
+
+    const samePair = await service.models.Wire.sortedIndexRangeGet('bySourceAndDestination', [
+      identifiers.sourceType,
+      identifiers.source,
+      identifiers.destinationType,
+      identifiers.destination
+    ])
+    const duplicates = (samePair || []).filter(row => {
+      const id = row.to || row.id
+      if(id == object) return false
+      return row.sourcePort == data.sourcePort && row.destinationPort == data.destinationPort
+    })
+    if(duplicates.length) throw app.logicError('wire_exists')
+
+    if(identifiers.destinationType == 'calculation_Constant' && data.destinationPort == 'in') {
+      throw app.logicError('constant_has_input')
+    }
+
+    if(identifiers.destinationType == 'calculation_Power' && data.destinationPort == 'in') {
+      const existing = await service.models.Wire.sortedIndexRangeGet('byDestination', [
+        identifiers.destinationType,
+        identifiers.destination
+      ])
+      const inbound = (existing || []).filter(row => {
+        const id = row.to || row.id
+        return id != object && (row.destinationPort || 'in') == 'in'
+      })
+      if(inbound.length) throw app.logicError('power_single_input')
+    }
+  }
+})