remove imgedit.jsx

imzlh · Sep 22, 2024 · 5428029 · 5428029
1 parent 95cb6e8
commit 5428029
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 80 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -404,6 +404,9 @@
 				font-size: 1.6rem;
 				line-height: 3rem;
 
+				// PWA: 允许拖拽
+				-webkit-app-region: drag;
+
 				>svg, >img {
 					display: inline-block;
 					width: 1em;

diff --git a/src/module/home.vue b/src/module/home.vue
@@ -142,7 +142,7 @@
     console.clear = () => {logs.splice(0, logs.length), objCache.splice(0, objCache.length)};
     document.addEventListener('DOMContentLoaded', () => console.info(`%c${name} V${version}`, 'color: #2cae61; padding: .5rem 1rem; background-color: #d5f9ff;'));
     window.addEventListener('error', (event) => logs.push({ type: 'error', message: event.message, time: new Date().toLocaleString(), trace: event.error.stack.split('\n').slice(1) }));
-    window.addEventListener('unhandledrejection', (event) => logs.push({ type: 'error', message: event.reason, time: new Date().toLocaleString(), trace: event.reason.stack?.split('\n').slice(1) }));
+    window.addEventListener('unhandledrejection', (event) => logs.push({ type: 'error', message: event.reason, time: new Date().toLocaleString(), trace: event.reason?.stack?.split('\n').slice(1) }));
 </script>
 
 <script lang="ts" setup>

diff --git a/src/opener/image/imgedit.d.ts b/src/opener/image/imgedit.d.ts
diff --git a/src/opener/image/imgedit.jsx b/src/opener/image/imgedit.jsx
diff --git a/src/opener/imgedit.vue b/src/opener/imgedit.vue
@@ -1,14 +1,80 @@
 <script lang="ts" setup>
-    import { onUnmounted, ref, watch } from 'vue';
-    import {mount} from './image/imgedit';
+    import { onMounted, onUnmounted, ref } from 'vue';
+    import Editor, { TABS, TOOLS } from 'react-filerobot-image-editor';
+    import { FS } from '../utils';
+    import { createRoot } from 'react-dom/client';
+    import { createElement } from 'react';
 
     const _prop = defineProps(['visibility', 'option']),
         file = _prop.option,
         ev = defineEmits(['close']),
-        container = ref();
+        container = ref(),
+        element = createElement(Editor,
+            {
+                source: file.url,
+                onSave: async function (obj) {
+                    if (!obj.imageCanvas) return;
+                    const blob = await new Promise<Blob | null>(rs => obj.imageCanvas!.toBlob(rs, obj.mimeType, 1)),
+                        path = obj.name + '.' + obj.extension;
+                    blob && FS.write(path, blob);
+                },
+                onClose: () => ev('close'),
+                annotationsCommon: {
+                    fill: '#ff0000',
+                },
+                Text: { text: 'Filerobot...' },
+                Rotate: { angle: 90, componentType: 'slider' },
+                Crop: {
+                    presetsItems: [
+                        {
+                            titleKey: 'classicTv',
+                            descriptionKey: '4:3',
+                            ratio: 4 / 3,
+                        },
+                        {
+                            titleKey: 'cinemascope',
+                            descriptionKey: '21:9',
+                            ratio: 21 / 9,
+                        },
+                    ],
+                    presetsFolders: [
+                        {
+                            titleKey: 'socialMedia',
+                            groups: [
+                                {
+                                    titleKey: 'facebook',
+                                    items: [
+                                        {
+                                            titleKey: 'profile',
+                                            width: 180,
+                                            height: 180,
+                                            descriptionKey: 'fbProfileSize',
+                                        },
+                                        {
+                                            titleKey: 'coverPhoto',
+                                            width: 820,
+                                            height: 312,
+                                            descriptionKey: 'fbCoverPhotoSize',
+                                        },
+                                    ],
+                                },
+                            ],
+                        },
+                    ],
+                },
+                tabsIds: [TABS.ADJUST, TABS.ANNOTATE, TABS.WATERMARK, TABS.FILTERS, TABS.FINETUNE],
+                defaultTabId: TABS.ANNOTATE,
+                defaultToolId: TOOLS.TEXT,
+                savingPixelRatio: 1,
+                previewPixelRatio: 1,
+            }
+        );
 
-    const prom_close = new Promise<void>(rs => onUnmounted(rs));
-    watch(container, val => val && mount(val, file, ev, prom_close));
+    onMounted(() => {
+        const app = createRoot(container.value);
+        app.render(element);
+        onUnmounted(() => app.unmount());
+    })
 </script>
 
 <template>