Make saving image from editor happen, improve image editor theming

owncloud · Sep 19, 2024 · af058a1 · af058a1
1 parent 88f5264
commit af058a1
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 50 deletions.
diff --git a/packages/web-app-image-editor/package.json b/packages/web-app-image-editor/package.json
@@ -18,6 +18,7 @@
   "peerDependencies": {
     "@ownclouders/web-client": "0.0.3",
     "@ownclouders/web-pkg": "0.0.6",
+    "pinia": "2.2.2",
     "typescript": "5.5.4",
     "vitest": "2.0.4",
     "vue": "^3.4.21",

diff --git a/packages/web-app-image-editor/pnpm-lock.yaml b/packages/web-app-image-editor/pnpm-lock.yaml
diff --git a/packages/web-app-image-editor/src/App.vue b/packages/web-app-image-editor/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="oc-image-editor oc-width-1-1 oc-height-1-1">
+  <div class="oc-media-editor oc-width-1-1 oc-height-1-1">
     <div ref="tuiImageEditor" class="oc-width-1-1 oc-height-1-1"></div>
   </div>
 </template>
@@ -8,19 +8,33 @@
 import 'tui-color-picker/dist/tui-color-picker.css'
 import 'tui-image-editor/dist/tui-image-editor.css'
 import ImageEditor from 'tui-image-editor'
-import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
+import { defineComponent, onBeforeUnmount, onMounted, PropType, ref, unref } from 'vue'
+import { storeToRefs } from 'pinia'
+
+import { Resource } from '@ownclouders/web-client'
+import { FileContext, useThemeStore } from '@ownclouders/web-pkg'
 
 export default defineComponent({
   props: {
+    currentFileContext: { type: Object as PropType<FileContext>, required: true },
+    resource: { type: Object as PropType<Resource>, required: true },
     url: {
       type: String,
       required: true
+    },
+    currentContent: {
+      type: String,
+      required: true
     }
   },
+  emits: ['update:currentContent'],
   setup(props, { emit }) {
     const tuiImageEditor = ref(null)
     let editorInstance = null
 
+    const themeStore = useThemeStore()
+    const { currentTheme } = storeToRefs(themeStore)
+
     const addEventListener = () => {
       Object.keys(emit).forEach((eventName) => {
         editorInstance.on(eventName, (...args) => emit(eventName, ...args))
@@ -30,25 +44,43 @@ export default defineComponent({
     onMounted(() => {
       editorInstance = new ImageEditor(tuiImageEditor.value, {
         includeUI: {
+          theme: {
+            // Note: These two options don't exist on the type, but get applied nonetheless
+            // @ts-ignore
+            'loadButton.display': 'none',
+            // @ts-ignore
+            'downloadButton.display': 'none',
+
+            'common.bi.image': '',
+            'common.bisize.width': '',
+            'common.bisize.height': '',
+
+            'common.backgroundColor':
+              unref(currentTheme).designTokens.colorPalette['background-default']
+          },
           loadImage: {
             path: props.url,
-            name: 'SampleImage'
+            name: props.resource.name
           }
         },
-        // TODO: Grab window width and height via VueUse
         cssMaxWidth: 700,
         cssMaxHeight: 500,
         usageStatistics: false
       })
-      addEventListener()
 
-      // TODO: Communicate to AppTopBar whether the image has been modified
-      // checkIfDirty = setInterval(() => {
-      //   const isDirty = !editorInstance.isEmptyUndoStack()
-      //   if (isDirty) {
-      //     emit('update:currentContent', isDirty)
-      //   }
-      // }, 300)
+      // TODO: Check if we need to watch for more changes
+      editorInstance.on('undoStackChanged', function (length) {
+        const format = props.resource.mimeType.replace('image/', '')
+
+        const currentImageContent = editorInstance
+          .toDataURL({
+            format,
+            quality: 0.8
+          })
+          .replace(`data:${props.resource.mimeType};base64,`, '')
+
+        emit('update:currentContent', currentImageContent)
+      })
     })
 
     onBeforeUnmount(() => {

diff --git a/packages/web-app-image-editor/src/index.ts b/packages/web-app-image-editor/src/index.ts
@@ -12,7 +12,8 @@ export default defineWebApplication({
         name: applicationId,
         path: '/:driveAliasAndItem(.*)?',
         component: AppWrapperRoute(MediaEditor, {
-          applicationId
+          applicationId,
+          contentType: 'image'
         }),
         meta: {
           authContext: 'hybrid',
@@ -27,10 +28,9 @@ export default defineWebApplication({
       id: applicationId,
       icon: 'file-code',
       defaultExtension: 'png',
-      // TODO: add more extensions from web media viewer
       extensions: ['png', 'jpg', 'jpeg'].map((extension) => ({
         extension,
-        routeName: 'media-editor'
+        routeName: 'image-editor'
       }))
     }