@lvce-editor/server 0.4.4 → 0.6.0

package/static/fbac85f/packages/renderer-worker/src/parts/ViewletEditorFindWidget/ViewletEditorFindWidget.js

@@ -0,0 +1,200 @@
+import * as ViewletStates from '../ViewletStates/ViewletStates.js'
+import * as TextDocumentSearch from '../TextDocumentSearch/TextDocumentSearch.js'
+import * as Command from '../Command/Command.js'
+
+export const name = 'EditorFindWidget'
+
+export const create = () => {
+  return {
+    value: '',
+    matchIndex: 0,
+    totalMatches: 0,
+    ariaAnnouncement: '',
+  }
+}
+
+export const getPosition = () => {
+  const editor = ViewletStates.getState('EditorText')
+  if (!editor) {
+    return {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0,
+    }
+  }
+  const width = 200
+  const height = 30
+  const paddingTop = 10
+  const paddingRight = 20
+  const left = editor.left + editor.width - width - paddingRight
+  const top = editor.top + paddingTop
+  return {
+    top,
+    left,
+    width,
+    height,
+  }
+}
+
+const getMatchCount = (matches) => {
+  return matches.length / 2
+}
+
+export const loadContent = (state) => {
+  const editor = ViewletStates.getState('EditorText')
+  if (!editor) {
+    return state
+  }
+  const { selections, lines } = editor
+  const startRowIndex = selections[0]
+  const startColumnIndex = selections[1]
+  const endRowIndex = selections[2]
+  const endColumnIndex = selections[3]
+  const line = lines[startRowIndex]
+  const value = line.slice(startColumnIndex, endColumnIndex)
+  const matches = TextDocumentSearch.findMatches(lines, value)
+  const totalMatches = getMatchCount(matches)
+
+  return {
+    ...state,
+    value,
+    matchIndex: 1,
+    totalMatches,
+  }
+}
+
+export const handleInput = (state, value) => {
+  // TODO get focused editor
+  // highlight locations that match value
+  const editor = ViewletStates.getState('EditorText')
+  const { lines, selections } = editor
+  const startRowIndex = selections[0]
+  const startColumnIndex = selections[1]
+  const endRowIndex = selections[2]
+  const endColumnIndex = selections[3]
+  const matches = TextDocumentSearch.findMatches(lines, value)
+  const totalMatches = getMatchCount(matches)
+  return {
+    ...state,
+    value,
+    totalMatches,
+  }
+}
+
+// TODO this function should be synchronous
+export const focusNext = async (state) => {
+  const { value, matchIndex } = state
+  const editor = ViewletStates.getState('EditorText')
+  const { lines, selections } = editor
+  const startRowIndex = selections[0]
+  const startColumnIndex = selections[1]
+  const endRowIndex = selections[2]
+  const endColumnIndex = selections[3]
+  // TODO find next match and highlight it
+  const nextMatch = TextDocumentSearch.findNextMatch(
+    lines,
+    value,
+    startRowIndex + 1
+  )
+  const newSelections = new Uint32Array([
+    nextMatch.rowIndex,
+    nextMatch.columnIndex,
+    nextMatch.rowIndex,
+    nextMatch.columnIndex + value.length,
+  ])
+  // TODO set selections synchronously and render input match index,
+  // input value and new selections at the same time
+  await Command.execute('Editor.setSelections', newSelections)
+  // TODO reveal new position in editor
+  return {
+    ...state,
+    matchIndex: matchIndex + 1,
+  }
+}
+
+// TODO should be synchronous
+export const focusPrevious = async (state) => {
+  const { value, matchIndex } = state
+  const editor = ViewletStates.getState('EditorText')
+  const { lines, selections } = editor
+  const startRowIndex = selections[0]
+  const startColumnIndex = selections[1]
+  const endRowIndex = selections[2]
+  const endColumnIndex = selections[3]
+  // TODO find next match and highlight it
+  const nextMatch = TextDocumentSearch.findPreviousMatch(
+    lines,
+    value,
+    startRowIndex - 1
+  )
+  const newSelections = new Uint32Array([
+    nextMatch.rowIndex,
+    nextMatch.columnIndex,
+    nextMatch.rowIndex,
+    nextMatch.columnIndex + value.length,
+  ])
+  // TODO set selections synchronously and render input match index,
+  // input value and new selections at the same time
+  await Command.execute('Editor.setSelections', newSelections)
+  // TODO reveal new position in editor
+  return {
+    ...state,
+    matchIndex: matchIndex - 1,
+  }
+}
+
+export const hasFunctionalRender = true
+
+const renderValue = {
+  isEqual(oldState, newState) {
+    return oldState.value === newState.value
+  },
+  apply(oldState, newState) {
+    return [
+      /* Viewlet.invoke */ 'Viewlet.send',
+      /* id */ 'EditorFindWidget',
+      /* method */ 'setValue',
+      /* value */ newState.value,
+    ]
+  },
+}
+
+const renderMatchCount = {
+  isEqual(oldState, newState) {
+    return (
+      oldState.matchIndex === newState.matchIndex &&
+      oldState.totalMatches === newState.totalMatches
+    )
+  },
+  apply(oldState, newState) {
+    const matchCountText = `${newState.matchIndex} of ${newState.totalMatches}`
+    return [
+      /* Viewlet.invoke */ 'Viewlet.send',
+      /* id */ 'EditorFindWidget',
+      /* method */ 'setMatchCountText',
+      /* value */ matchCountText,
+    ]
+  },
+}
+
+const getAriaLabel = (state) => {
+  return `${state.matchIndex} of ${state.totalMatches} found for ${state.value}`
+}
+
+const renderAriaAnnouncement = {
+  isEqual(oldState, newState) {
+    return (
+      oldState.ariaAnnouncement === newState.ariaAnnouncement &&
+      oldState.matchIndex === newState.matchIndex &&
+      oldState.totalMatches === newState.totalMatches &&
+      oldState.value === newState.value
+    )
+  },
+  apply(oldState, newState) {
+    const ariaLabel = getAriaLabel(newState)
+    return [/* Viewlet.invoke */ 'Viewlet.ariaAnnounce', /* text */ ariaLabel]
+  },
+}
+
+export const render = [renderValue, renderMatchCount, renderAriaAnnouncement]

package/static/fbac85f/packages/renderer-worker/src/parts/ViewletEditorImage/ViewletEditorImage.ipc.js

@@ -0,0 +1,23 @@
+import * as Viewlet from '../Viewlet/Viewlet.js'
+import * as ViewletEditorImage from './ViewletEditorImage.js'
+import * as LazyCommand from '../LazyCommand/LazyCommand.js'
+
+// prettier-ignore
+const Imports = {
+  CopyImage: () => import('./ViewletEditorImageCopyImage.js'),
+  CopyPath: ()=>import('./ViewletEditorImageCopyPath.js'),
+  HandleContextMenu:()=>import('./ViewletEditorImageHandleContextMenu.js')
+}
+
+// prettier-ignore
+export const Commands = {
+  'EditorImage.copyImage': LazyCommand.create('EditorImage', Imports.CopyImage, 'copyImage'),
+  'EditorImage.handleContextMenu': LazyCommand.create('EditorImage', Imports.HandleContextMenu, 'handleContextMenu'),
+  'EditorImage.handlePointerDown': Viewlet.wrapViewletCommand('EditorImage', ViewletEditorImage.handlePointerDown),
+  'EditorImage.handlePointerMove': Viewlet.wrapViewletCommand('EditorImage', ViewletEditorImage.handlePointerMove),
+  'EditorImage.handlePointerUp': Viewlet.wrapViewletCommand('EditorImage', ViewletEditorImage.handlePointerUp),
+  'EditorImage.handleWheel': Viewlet.wrapViewletCommand('EditorImage', ViewletEditorImage.handleWheel),
+  'EditorImage.copyPath': LazyCommand.create('EditorImage', Imports.CopyPath, 'copyPath'),
+}
+
+export * from './ViewletEditorImage.js'

package/static/fbac85f/packages/renderer-worker/src/parts/ViewletEditorImage/ViewletEditorImage.js

@@ -0,0 +1,284 @@
+import * as Assert from '../Assert/Assert.js'
+import * as Clamp from '../Clamp/Clamp.js'
+import * as Command from '../Command/Command.js'
+import * as FileSystem from '../FileSystem/FileSystem.js'
+import * as MenuEntryId from '../MenuEntryId/MenuEntryId.js'
+
+export const name = 'EditorImage'
+
+export const create = (id, uri, left, top, width, height) => {
+  return {
+    src: '',
+    disposed: false,
+    top,
+    left,
+    width,
+    height,
+    uri,
+    domMatrix: new DOMMatrix(),
+    pointerOffsetX: 0,
+    pointerOffsetY: 0,
+    minZoom: 0.1,
+    maxZoom: 2 ** 15, // max value that doesn't result in degradation
+    zoomFactor: 200,
+    touchZoomFactor: 1.015,
+    eventCache: [],
+    previousDiff: 0,
+    pointerDownCount: 0,
+  }
+}
+
+const loadContentRemote = (state, uri) => {
+  const src = `/remote${uri}`
+  return {
+    ...state,
+    src,
+  }
+}
+
+const loadContentWithBlobUrl = async (state, uri) => {
+  const content = await FileSystem.readFile(uri)
+  const mimeType = await Command.execute('Mime.getMediaMimeType', uri)
+  const blob = await Command.execute(
+    'Blob.binaryStringToBlob',
+    content,
+    mimeType
+  )
+  const dataUrl = await Command.execute('Url.createObjectUrl', blob)
+  return {
+    ...state,
+    src: dataUrl,
+  }
+}
+
+const canUseRemoteLoading = (uri) => {
+  const protocol = FileSystem.getProtocol(uri)
+  return protocol === ''
+}
+
+// TODO revoke object url when disposed
+export const loadContent = async (state, ...args) => {
+  const { uri } = state
+  if (canUseRemoteLoading(uri)) {
+    return loadContentRemote(state, uri)
+  }
+  return loadContentWithBlobUrl(state, uri)
+}
+
+export const contentLoaded = async (state) => {}
+
+export const dispose = async (state) => {
+  const { src } = state
+  if (src.startsWith('blob:')) {
+    await Command.execute('Url.revokeObjectUrl', src)
+  }
+  return {
+    ...state,
+    disposed: true,
+  }
+}
+
+export const handlePointerDown = (state, pointerId, x, y) => {
+  Assert.object(state)
+  Assert.number(x)
+  Assert.number(y)
+  const { eventCache, pointerDownCount } = state
+  const newEventCache = [...eventCache, { pointerId, x, y }]
+  const newPointerDownCount = pointerDownCount + 1
+  return {
+    ...state,
+    pointerOffsetX: x,
+    pointerOffsetY: y,
+    eventCache: newEventCache,
+    pointerDownCount: newPointerDownCount,
+  }
+}
+
+const distance = (point1, point2) => {
+  var dx = point1.x - point2.x
+  var dy = point1.y - point2.y
+  return Math.sqrt(dx * dx + dy * dy)
+}
+
+export const handlePointerMove = (state, pointerId, x, y) => {
+  Assert.object(state)
+  Assert.number(x)
+  Assert.number(y)
+  const {
+    pointerOffsetX,
+    pointerOffsetY,
+    domMatrix,
+    eventCache,
+    previousDiff,
+    touchZoomFactor,
+    pointerDownCount,
+  } = state
+  if (pointerDownCount === 0) {
+    return state
+  }
+  const index = eventCache.findIndex((event) => event.pointerId === pointerId)
+  // TODO avoid mutation
+  eventCache[index] = { pointerId, x, y }
+
+  if (eventCache.length === 2) {
+    const currentDiff = distance(eventCache[0], eventCache[1])
+    if (previousDiff > 0) {
+      if (currentDiff > previousDiff) {
+        const newDomMatrix = new DOMMatrix([
+          (domMatrix.a *= touchZoomFactor),
+          domMatrix.b,
+          domMatrix.c,
+          (domMatrix.d *= touchZoomFactor),
+          domMatrix.e,
+          domMatrix.f,
+        ])
+        return {
+          ...state,
+          previousDiff: currentDiff,
+          domMatrix: newDomMatrix,
+        }
+      }
+      if (currentDiff < previousDiff) {
+        const newDomMatrix = new DOMMatrix([
+          (domMatrix.a /= touchZoomFactor),
+          domMatrix.b,
+          domMatrix.c,
+          (domMatrix.d /= touchZoomFactor),
+          domMatrix.e,
+          domMatrix.f,
+        ])
+        return {
+          ...state,
+          previousDiff: currentDiff,
+          domMatrix: newDomMatrix,
+        }
+      }
+    }
+    return {
+      ...state,
+      previousDiff: currentDiff,
+    }
+  }
+  const deltaX = x - pointerOffsetX
+  const deltaY = y - pointerOffsetY
+  const newDomMatrix = new DOMMatrix([
+    domMatrix.a,
+    domMatrix.b,
+    domMatrix.c,
+    domMatrix.d,
+    domMatrix.e + deltaX,
+    domMatrix.f + deltaY,
+  ])
+  return {
+    ...state,
+    pointerOffsetX: x,
+    pointerOffsetY: y,
+    domMatrix: newDomMatrix,
+  }
+}
+
+export const handlePointerUp = (state, pointerId, x, y) => {
+  const { eventCache, pointerDownCount } = state
+  if (pointerDownCount === 0) {
+    return state
+  }
+  const index = eventCache.findIndex((event) => event.pointerId === pointerId)
+  const newEventCache = [
+    ...eventCache.slice(0, index),
+    ...eventCache.slice(index + 1),
+  ]
+  const newPointerDownCount = pointerDownCount - 1
+  return {
+    ...state,
+    eventCache: newEventCache,
+    pointerDownCount: newPointerDownCount,
+  }
+}
+
+const getNewZoom = (zoom, currentZoomFactor, minZoom, maxZoom) => {
+  const newZoom = zoom * currentZoomFactor
+  return Clamp.clamp(newZoom, minZoom, maxZoom)
+}
+
+const getCurrentZoomFactor = (zoomFactor, deltaY) => {
+  // TODO use enum for direction
+  const direction = deltaY < 0 ? 'up' : 'down'
+  const normalizedDeltaY = 1 + Math.abs(deltaY) / zoomFactor
+  const currentZoomFactor =
+    direction === 'up' ? normalizedDeltaY : 1 / normalizedDeltaY
+  return currentZoomFactor
+}
+
+export const handleWheel = (state, x, y, deltaX, deltaY) => {
+  if (deltaY === 0) {
+    return state
+  }
+  const { top, left } = state
+  const relativeX = x - left
+  const relativeY = y - top
+  const { domMatrix, zoomFactor, minZoom, maxZoom } = state
+  const currentZoomFactor = getCurrentZoomFactor(zoomFactor, deltaY)
+  const newDomMatrix = new DOMMatrix()
+    .translateSelf(relativeX, relativeY)
+    .scaleSelf(currentZoomFactor)
+    .translateSelf(-relativeX, -relativeY)
+    .multiplySelf(domMatrix)
+  return {
+    ...state,
+    domMatrix: newDomMatrix,
+  }
+}
+
+export const hasFunctionalRender = true
+
+const renderSrc = {
+  isEqual(oldState, newState) {
+    return oldState.src === newState.src
+  },
+  apply(oldState, newState) {
+    return [
+      /* Viewlet.invoke */ 'Viewlet.send',
+      /* id */ 'EditorImage',
+      /* method */ 'setSrc',
+      /* src */ newState.src,
+    ]
+  },
+}
+
+// workaround for browser bug
+const stringifyDomMatrix = (domMatrix) => {
+  const { a, b, c, d, e, f } = domMatrix
+  return `matrix(${a}, ${b}, ${c}, ${d}, ${e}, ${f})`
+}
+
+const renderTransform = {
+  isEqual(oldState, newState) {
+    return oldState.domMatrix === newState.domMatrix
+  },
+  apply(oldState, newState) {
+    const transform = stringifyDomMatrix(newState.domMatrix)
+    return [
+      /* Viewlet.invoke */ 'Viewlet.send',
+      /* id */ 'EditorImage',
+      /* method */ 'setTransform',
+      /* transform */ transform,
+    ]
+  },
+}
+
+const renderCursor = {
+  isEqual(oldState, newState) {
+    return oldState.eventCache.length === newState.eventCache.length
+  },
+  apply(oldState, newState) {
+    const isDragging = newState.eventCache.length > 0
+    return [
+      /* Viewlet.invoke */ 'Viewlet.send',
+      /* id */ 'EditorImage',
+      /* method */ 'setDragging',
+      /* isDragging */ isDragging,
+    ]
+  },
+}
+
+export const render = [renderSrc, renderTransform, renderCursor]

package/static/fbac85f/packages/renderer-worker/src/parts/ViewletEditorImage/ViewletEditorImageCopyImage.js

@@ -0,0 +1,7 @@
+import * as Command from '../Command/Command.js'
+
+export const copyImage = async (state) => {
+  const blob = await Command.execute('Ajax.getBlob', state.src)
+  await Command.execute('ClipBoard.writeImage', blob)
+  return state
+}

package/static/fbac85f/packages/renderer-worker/src/parts/ViewletEditorImage/ViewletEditorImageCopyPath.js

@@ -0,0 +1,6 @@
+import * as Command from '../Command/Command.js'
+
+export const copyPath = async (state) => {
+  await Command.execute('ClipBoard.writeText', state.uri)
+  return state
+}

package/static/fbac85f/packages/renderer-worker/src/parts/ViewletEditorImage/ViewletEditorImageHandleContextMenu.js

@@ -0,0 +1,12 @@
+import * as Command from '../Command/Command.js'
+import * as MenuEntryId from '../MenuEntryId/MenuEntryId.js'
+
+export const handleContextMenu = async (state, x, y) => {
+  await Command.execute(
+    /* ContextMenu.show */ 'ContextMenu.show',
+    /* x */ x,
+    /* y */ y,
+    /* id */ MenuEntryId.EditorImage
+  )
+  return state
+}