@live-change/image-frontend 0.0.3

package/front/src/ImageUpload.js

@@ -0,0 +1,132 @@
+import { ref, onUnmounted, watch } from 'vue'
+import { api as useApi } from '@live-change/vue3-ssr'
+import { Upload } from '@live-change/upload-frontend'
+import { blobToDataUrl } from "./imageUtils.js"
+import preProcessImageFile from "./preprocessImageFile.js";
+
+const sleep = ms => new Promise(r => setTimeout(r, ms))
+
+class ImageUpload {
+  constructor(purpose, uploadable, options = {}) {
+    const blob = uploadable.file
+    const {
+      fileName = blob?.name,
+      api = useApi(options.appContext),
+      uploadOptions = {}
+    } = options
+    this.options = options
+    this.purpose = purpose
+    this.fileName = fileName
+    this.uploadOptions = { appContext: options.appContext, api, ...uploadOptions }
+    this.api = api
+    this.id = options.generateId ? api.uid() : options.id
+    this.localUid = api.uid()
+    this.blob = null
+    this.uploadable = uploadable
+    this.size = null
+    const clientConfig = api.getServiceDefinition('image')?.clientConfig
+    this.config = clientConfig.upload
+
+    this.ownerType = options.ownerType
+    this.owner = options.owner
+    if(!this.ownerType || !this.owner) {
+      const client = api.client.value
+      if(client.user) {
+        this.ownerType = 'user_User'
+        this.owner = client.user
+      } else {
+        this.ownerType = 'session_Session'
+        this.owner = client.session
+      }
+    }
+
+    this.url = ref()
+    this.canvas = ref()
+
+    this.error = ref()
+    this.state = ref('starting')
+
+    this.prepared = false
+
+    this.preparePromise = null
+    this.uploadPromise = null
+  }
+
+  prepare() {
+    if(!this.preparePromise) this.preparePromise = (async () => {
+      if(this.options.unpreparedPreview) {
+        if(this.uploadable.canvas) {
+          if(this.options.saveCanvas) this.canvas.value = this.uploadable.canvas
+          this.url.value = this.uploadable.canvas.toDataURL(this.options.fileType || 'image/png')
+        } else if(this.uploadable.file) {
+          this.url.value = await blobToDataUrl(this.uploadable.file)
+        }
+      }
+
+      const processed = await preProcessImageFile(this.uploadable, { ...this.config, ...this.options })
+      this.blob = processed.blob
+      this.size = processed.size
+
+      if(this.options.preparedPreview) {
+        if(processed.canvas) {
+          if(this.options.saveCanvas) this.canvas.value = processed.canvas
+          this.url.value = processed.canvas.toDataURL(this.options.fileType || 'image/png')
+        } else {
+          this.url.value = await blobToDataUrl(this.blob)
+        }
+        //console.log("PREPARED PREVIEW!", processed, '=>', this.url.value)
+      }
+      const extension = this.blob.type.split('/')[1]
+      if(!this.fileName) {
+        this.fileName = 'unknown.' + extension
+      } else {
+        const nameSplit = this.fileName.split('.')
+        const currentExtension = nameSplit[nameSplit.length - 1]
+        if(currentExtension != extension) {
+          this.fileName = nameSplit.slice(0, -1).concat([extension]).join('.')
+        }
+      }
+      this.prepared = true
+    })()
+    return this.preparePromise
+  }
+
+  async upload() {
+    if(!this.uploadPromise) this.uploadPromise = (async () => {
+      await this.prepare()
+      await sleep(2000)
+
+      this.state.value = 'uploading'
+
+      this.fileUpload = new Upload(this.purpose, this.blob, { fileName: this.fileName, ...this.uploadOptions })
+      await this.fileUpload.promise
+
+      try {
+        const imageParams = {
+          image: this.id,
+          name: this.uploadable.name || this.uploadable.file?.name || this.options.name || 'unknown',
+          width: this.size.width,
+          height: this.size.height,
+          upload: this.fileUpload.id,
+          purpose: this.purpose,
+          ownerType: this.ownerType,
+          owner: this.owner,
+          crop: this.options.crop
+        }
+        console.log("CREATINNG IMAGE!", imageParams)
+        this.id = await this.api.command(["image", "createImage"], imageParams)
+        //this.url.value = `/api/image/image/${this.id}` - useless reload...
+        this.state.value = 'done'
+      } catch(error) {
+        this.error.value = error
+      }
+
+      this.state.value = 'done'
+
+      /// TODO: set this.url.value to server-side address
+    })()
+    return this.uploadPromise
+  }
+}
+
+export default ImageUpload

package/front/src/NavBar.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="surface-overlay py-3 px-6 shadow-2 flex align-items-center justify-content-between
+              relative md:sticky top-0 z-5"
+       style="min-height: 80px" key="navbar">
+    <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-6">
+    <a v-ripple class="cursor-pointer block lg:hidden text-700 p-ripple"
+       v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
+      <i class="pi pi-bars text-4xl"></i>
+    </a>
+    <div class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full surface-overlay left-0 top-100 z-1 shadow-2 lg:shadow-none">
+      <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row">
+        <li>
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
+            <i class="pi pi-home mr-2"></i>
+            <span>Home</span>
+          </a>
+        </li>
+        <li class="lg:relative">
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple"
+             v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
+            <i class="pi pi-users mr-2"></i>
+            <span>Customers</span>
+            <i class="pi pi-angle-down ml-auto lg:ml-3"></i>
+          </a>
+          <ul class="list-none py-3 px-6 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer">
+            <li>
+              <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
+                <i class="pi pi-user-plus mr-2"></i>
+                <span class="font-medium">Add New</span>
+              </a>
+            </li>
+            <li class="relative">
+              <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple"
+                 v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
+                <i class="pi pi-search mr-2"></i>
+                <span class="font-medium">Search</span>
+                <i class="pi pi-angle-down ml-auto lg:-rotate-90"></i>
+              </a>
+              <ul class="list-none py-3 pl-3 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer left-100 top-0">
+                <li>
+                  <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
+                    <i class="pi pi-shopping-cart mr-2"></i>
+                    <span class="font-medium">Purchases</span>
+                  </a>
+                </li>
+                <li class="relative">
+                  <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
+                    <i class="pi pi-comments mr-2"></i>
+                    <span class="font-medium">Messages</span>
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
+            <i class="pi pi-calendar mr-2"></i>
+            <span>Calendar</span>
+          </a>
+        </li>
+        <li>
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
+            <i class="pi pi-chart-line mr-2"></i>
+            <span>Stats</span>
+          </a>
+        </li>
+      </ul>
+      <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row border-top-1 surface-border lg:border-top-none">
+        <li>
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
+            <i class="pi pi-inbox text-base lg:text-2xl mr-2 lg:mr-0"></i>
+            <span class="block lg:hidden font-medium">Inbox</span>
+          </a>
+        </li>
+        <li>
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-3 align-items-center text-600 hover:text-900 hover:surface-100
+           font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
+            <i class="pi pi-bell text-base lg:text-2xl mr-2 lg:mr-0 p-overlay-badge">
+              <Badge value="2"></Badge>
+            </i>
+            <span class="block lg:hidden font-medium">Notifications</span>
+          </a>
+        </li>
+        <li class="border-top-1 surface-border lg:border-top-none">
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
+            <img src="/images/empty-user-photo.svg" class="mr-3 lg:mr-0 border-circle" style="width: 28px; height: 28px"/>
+            <div class="block lg:hidden">
+              <div class="text-900 font-medium">Josephine Lillard</div>
+              <span class="text-600 font-medium text-sm">Marketing Specialist</span>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import Badge from "primevue/badge"
+</script>
+
+<style scoped>
+
+</style>

package/front/src/UploadTest.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="w-full sm:w-9 md:w-8 lg:w-6 surface-card p-4 shadow-2 border-round">
+    <div class="text-center mb-5">
+      <div class="text-900 text-3xl font-medium mb-3">
+        Upload Test
+      </div>
+    </div>
+
+    <div></div>
+<!--    <pre>{{ JSON.stringify(upload, null, "  ") }}</pre>-->
+
+    <FileInput @input="handleUpload" class="inline-block">
+      <Button label="Upload File" icon="pi pi-upload"></Button>
+    </FileInput>
+
+    <div v-if="image">
+      <h2>Image: {{ image }}</h2>
+      <Image :image="image" width="200" height="200" />
+    </div>
+<!--    <UploadView v-if="upload" :upload="upload" cancelable class="surface-card shadow-2 border-round p-4 mt-3" />-->
+  </div>
+</template>
+
+<script setup>
+
+  import Button from "primevue/button"
+  import { ref, shallowRef, getCurrentInstance } from 'vue'
+  import { Upload, UploadView, FileInput } from "@live-change/upload-frontend"
+  import { uploadImage } from "./imageUploads.js"
+  import Image from "./Image.vue"
+
+  const upload = shallowRef()
+  const appContext = getCurrentInstance().appContext
+
+  const image = ref()
+
+  async function handleUpload(file) {
+    console.log("FILE", file)
+    upload.value = uploadImage('test', { file },
+        { preparedPreview: true, appContext, generateId : true, noStart: true })
+    image.value = upload.value.id
+    console.log("START PREPARE!")
+    await upload.value.prepare()
+    console.log("START UPLOAD!")
+    await upload.value.upload()
+    image.value = upload.value.id
+
+    console.log("UPLOADED", upload.value)
+
+    //upload.value = null
+  }
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/dom.js

@@ -0,0 +1,82 @@
+function getElementPositionInWindow(element) {
+  let o = element
+  let x = 0
+  let y = 0
+  while (true) {
+    //console.log("OE", o, x, y)
+    x += o.offsetLeft
+    y += o.offsetTop
+    if(window.getComputedStyle(o).position == 'fixed') {
+      return { x, y }
+    }
+    o = o.offsetParent
+    if(!o) {
+      return {
+        x: x - document.documentElement.scrollLeft || 0,
+        y: y - document.documentElement.scrollTop || 0
+      }
+    }
+    if(o.scrollLeft) x -= o.scrollLeft
+    if(o.scrollTop) y -= o.scrollTop
+  }
+}
+
+function getElementPositionInDocument(element) {
+  let o = element
+  let x = 0
+  let y = 0
+  while (true) {
+    x += o.offsetLeft
+    y += o.offsetTop
+    if(window.getComputedStyle(o).position == 'fixed') {
+      return { x, y }
+    }
+    o = o.offsetParent
+    if(!o) {
+      return {
+        x: x || 0,
+        y: y || 0
+      }
+    }
+    if(o.scrollLeft) x -= o.scrollLeft
+    if(o.scrollTop) y -= o.scrollTop
+  }
+}
+
+function getElementPositionInElement(element, parent) {
+  let o = element
+  let x = 0
+  let y = 0
+  while (true) {
+    x += o.offsetLeft
+    y += o.offsetTop
+    if(window.getComputedStyle(o).position == 'fixed') {
+      return { x, y }
+    }
+    o = o.offsetParent
+    if(!o || o == parent) {
+      return {
+        x: x || 0,
+        y: y || 0
+      }
+    }
+    if(o.scrollLeft) x -= o.scrollLeft
+    if(o.scrollTop) y -= o.scrollTop
+  }
+}
+
+function getScrollParent(element, includeHidden) {
+  let style = getComputedStyle(element)
+  const excludeStaticParent = style.position === "absolute"
+  const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/
+  if (style.position === "fixed") return document.body
+  for (let parent = element; (parent = parent.parentElement);) {
+    style = getComputedStyle(parent)
+    if (excludeStaticParent && style.position === "static") continue
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent
+  }
+  return document.body
+}
+
+
+export { getElementPositionInWindow, getElementPositionInDocument, getElementPositionInElement, getScrollParent }

package/front/src/entry-client.js

@@ -0,0 +1,6 @@
+import { clientEntry } from '@live-change/frontend-base/client-entry.js'
+import App from './App.vue'
+import { createRouter } from './router'
+
+
+clientEntry(App, createRouter)

package/front/src/entry-server.js

@@ -0,0 +1,6 @@
+import { serverEntry } from '@live-change/frontend-base/server-entry.js'
+import App from './App.vue'
+import { createRouter } from './router'
+
+const render = serverEntry(App, createRouter)
+export { render }

package/front/src/imageResizer.js

@@ -0,0 +1,5 @@
+import pica from 'pica'
+
+const imageResizer = pica()
+
+export default imageResizer

package/front/src/imageUploads.js

@@ -0,0 +1,29 @@
+import { ref } from 'vue'
+import ImageUpload from "./ImageUpload.js";
+
+export const imageUploads = ref([])
+
+async function handleUpload(upload, options) {
+  await upload.upload()
+  const existingIndex = imageUploads.value.findIndex(u => u.localUid === upload.localUid)
+  if(existingIndex !== -1) {
+    imageUploads.value.splice(existingIndex, 1)
+  }
+  console.log("IMAGE UPLOADS", imageUploads)
+}
+
+export function uploadImage(purpose, uploadable, options = {}) {
+  const upload = new ImageUpload(purpose, uploadable, options)
+  if(options.id) {
+    const existingIndex = imageUploads.value.findIndex(u => u.id == options.id)
+    if( existingIndex != -1 ) {
+      imageUploads.value[existingIndex].cancel()
+      imageUploads.value[existingIndex] = upload
+      handleUpload(upload, options)
+      return upload
+    }
+  }
+  imageUploads.value.push(upload)
+  handleUpload(upload, options)
+  return upload
+}