HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

refactor: ♻️ switch from cropperjs to vue-cropper

Browse source 
seems to be less buggy
This commit is contained in:
ThatOneCalculator 2023-10-02 23:03:31 -07:00
parent 01f2f3e810
commit 94f402eff6
No known key found for this signature in database
GPG key ID: 8703CACD01000000
5 changed files with 25 additions and 180 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/client/package.json
View file

@ -43,7 +43,6 @@
"chartjs-plugin-zoom": "2.0.1",
"city-timezones": "^1.2.1",
"compare-versions": "6.1.0",
"cropperjs": "2.0.0-beta.4",
"cross-env": "7.0.3",
"cypress": "10.11.0",
"date-fns": "2.30.0",
@ -93,6 +92,7 @@
"vite": "4.4.9",
"vite-plugin-compression": "^0.5.1",
"vue": "3.3.4",
"vue-cropper": "^1.1.1",
"vue-draggable-plus": "^0.2.6",
"vue-isyourpasswordsafe": "^2.0.0",
"vue-plyr": "^7.0.0",

92
packages/client/src/components/MkCropperDialog.vue
View file

@ -17,18 +17,15 @@
height ? `${height}px` : '100%'
};`"
>
<Transition name="fade">
<div v-if="loading" class="loading">
<MkLoading />
</div>
</Transition>
<div class="container">
<img
ref="imgEl"
:src="imgUrl"
style="display: none"
@load="onImageLoad"
/>
<VueCropper
ref="cropper"
:img="imgUrl"
:auto-crop="true"
:fixed="aspectRatio ? true : false"
:fixed-number="aspectRatio ?? null"
output-type="webp"
></VueCropper>
</div>
</div>
</template>
@ -36,10 +33,9 @@
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { ref } from "vue";
import type * as firefish from "firefish-js";
import Cropper from "cropperjs";
import tinycolor from "tinycolor2";
import { VueCropper } from "vue-cropper";
import XModalWindow from "@/components/MkModalWindow.vue";
import * as os from "@/os";
import { $i } from "@/account";
@ -47,6 +43,7 @@ import { defaultStore } from "@/store";
import { apiUrl, url } from "@/config";
import { query } from "@/scripts/url";
import { i18n } from "@/i18n";
import "vue-cropper/dist/index.css";
const emit = defineEmits<{
(ev: "ok", cropped: firefish.entities.DriveFile): void;
@ -56,21 +53,18 @@ const emit = defineEmits<{
const props = defineProps<{
file: firefish.entities.DriveFile;
aspectRatio: number;
aspectRatio?: Array<number>;
}>();
const imgUrl = `${url}/proxy/image.webp?${query({
url: props.file.url,
})}`;
const dialogEl = ref<InstanceType<typeof XModalWindow>>();
const imgEl = ref<HTMLImageElement>();
let cropper: Cropper | null = null,
loading = ref(true);
const cropper = ref<InstanceType<typeof VueCropper>>();
const ok = async () => {
const promise = new Promise<firefish.entities.DriveFile>(async (res) => {
const croppedCanvas = await cropper?.getCropperSelection()?.$toCanvas();
croppedCanvas.toBlob((blob) => {
cropper.getCropBlob(blob => {
const formData = new FormData();
formData.append("file", blob);
if (defaultStore.state.uploadFolder) {
@ -103,40 +97,6 @@ const cancel = () => {
emit("cancel");
dialogEl.value.close();
};
const onImageLoad = () => {
loading.value = false;
if (cropper) {
cropper.getCropperImage()!.$center("contain");
cropper.getCropperSelection()!.$center();
}
};
onMounted(() => {
cropper = new Cropper(imgEl.value, {});
const computedStyle = getComputedStyle(document.documentElement);
const selection = cropper.getCropperSelection()!;
selection.themeColor = tinycolor(
computedStyle.getPropertyValue("--accent"),
).toHexString();
selection.aspectRatio = props.aspectRatio;
selection.initialAspectRatio = props.aspectRatio;
selection.outlined = true;
window.setTimeout(() => {
cropper.getCropperImage()!.$center("contain");
selection.$center();
}, 100);
// モーダルオープンアニメーションが終わったあとで再度調整
window.setTimeout(() => {
cropper.getCropperImage()!.$center("contain");
selection.$center();
}, 500);
});
</script>
<style lang="scss" scoped>
@ -156,34 +116,10 @@ onMounted(() => {
height: var(--vh);
position: relative;
> .loading {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
-webkit-backdrop-filter: var(--blur, blur(10px));
backdrop-filter: var(--blur, blur(10px));
background: rgba(0, 0, 0, 0.5);
}
> .container {
flex: 1;
width: 100%;
height: 100%;
> ::v-deep(cropper-canvas) {
width: 100%;
height: 100%;
> cropper-selection > cropper-handle[action="move"] {
background: transparent;
}
}
}
}
</style>

2
packages/client/src/os.ts
View file

@ -747,7 +747,7 @@ export async function pickEmoji(src: HTMLElement | null, opts) {
export async function cropImage(
image: firefish.entities.DriveFile,
options: {
aspectRatio: number;
aspectRatio?: Array<number>;
},
): Promise<firefish.entities.DriveFile> {
return new Promise((resolve, reject) => {

4
packages/client/src/pages/settings/profile.vue
View file

@ -257,7 +257,7 @@ function changeAvatar(ev) {
if (!canceled) {
originalOrCropped = await os.cropImage(file, {
aspectRatio: 1,
aspectRatio: [1, 1],
});
}
@ -282,7 +282,7 @@ function changeBanner(ev) {
if (!canceled) {
originalOrCropped = await os.cropImage(file, {
aspectRatio: 2,
aspectRatio: [16, 9],
});
}

105
pnpm-lock.yaml
View file

@ -728,9 +728,6 @@ importers:
compare-versions:
specifier: 6.1.0
version: 6.1.0
cropperjs:
specifier: 2.0.0-beta.4
version: 2.0.0-beta.4
cross-env:
specifier: 7.0.3
version: 7.0.3
@ -878,6 +875,9 @@ importers:
vue:
specifier: 3.3.4
version: 3.3.4
vue-cropper:
specifier: ^1.1.1
version: 1.1.1
vue-draggable-plus:
specifier: ^0.2.6
version: 0.2.6(@types/sortablejs@1.15.1)
@ -1658,94 +1658,6 @@ packages:
dev: true
optional: true
/@cropper/element-canvas@2.0.0-beta.4:
resolution: {integrity: sha512-xL7k5YgtbCLdR/QEj81An4HpPcBTJXf1lq+2xisyHALGeUKQXjA9cJQL7bldYscHAKjmFgNZ5xOMrNaYM++qZw==}
dependencies:
'@cropper/element': 2.0.0-beta.4
'@cropper/utils': 2.0.0-beta.4
dev: true
/@cropper/element-crosshair@2.0.0-beta.4:
resolution: {integrity: sha512-NiwIQZFh963i3E3QbXFiU9oNqs+P1cLJur3+e+DK0E3oLTa7rEfcigP/ZoMj/3DZ9Et0LPhKKRDY2SJ8ZszyPA==}
dependencies:
'@cropper/element': 2.0.0-beta.4
'@cropper/utils': 2.0.0-beta.4
dev: true
/@cropper/element-grid@2.0.0-beta.4:
resolution: {integrity: sha512-uMVVNk1SICwM2nA/7BHkyEojc0DAqsDFIUnC/sIGPtNf3fe5hYQyukby8BEPO7dlqzfIXYmnxacgLaPM9BZ7GQ==}
dependencies:
'@cropper/element': 2.0.0-beta.4
'@cropper/utils': 2.0.0-beta.4
dev: true
/@cropper/element-handle@2.0.0-beta.4:
resolution: {integrity: sha512-PHjC4ptBi0leQ82mPWvivNilNOpiBnV90ueqz99tli8f9bQobx+Os7dzKFwLIpj4WKCNRYhyEvxf1KuKhQisIg==}
dependencies:
'@cropper/element': 2.0.0-beta.4
'@cropper/utils': 2.0.0-beta.4
dev: true
/@cropper/element-image@2.0.0-beta.4:
resolution: {integrity: sha512-Nu5z5EFpyOEC2CAdhNZGfvpG9Xj6ZD46jvpJGKxsel7J7Kqf4qy+5m6nNdq2J+lK7YfTi16svkHeFwzNWZYLAA==}
dependencies:
'@cropper/element': 2.0.0-beta.4
'@cropper/element-canvas': 2.0.0-beta.4
'@cropper/utils': 2.0.0-beta.4
dev: true
/@cropper/element-selection@2.0.0-beta.4:
resolution: {integrity: sha512-wHZhWI80cC5TfFHI/2HT1A+ZbHifnAO+/IAr4IqkbaxtDZ9duqEvM2hhC+ZXgB3BYqVidAJNwpSnZkVK+DlJ6A==}
dependencies:
'@cropper/element': 2.0.0-beta.4
'@cropper/element-canvas': 2.0.0-beta.4
'@cropper/element-image': 2.0.0-beta.4
'@cropper/utils': 2.0.0-beta.4
dev: true
/@cropper/element-shade@2.0.0-beta.4:
resolution: {integrity: sha512-sTFTzlmu+Z31Hp7RHgUAxfDsRIQ/uG8RueOBBHLeKVGFZbYhsIElQaLcVDwebgqXLHVr9imCEvvIX11JeTqiTQ==}
dependencies:
'@cropper/element': 2.0.0-beta.4
'@cropper/element-canvas': 2.0.0-beta.4
'@cropper/element-selection': 2.0.0-beta.4
'@cropper/utils': 2.0.0-beta.4
dev: true
/@cropper/element-viewer@2.0.0-beta.4:
resolution: {integrity: sha512-bXW8OuezoHjyGFmQzX1QEj3OqvmSZwaLiQts+mVhcarYqAEVrK9s/bC/OqZKR2ZKkHeaiGWq+rTOBVAmhZja/A==}
dependencies:
'@cropper/element': 2.0.0-beta.4
'@cropper/element-canvas': 2.0.0-beta.4
'@cropper/element-image': 2.0.0-beta.4
'@cropper/element-selection': 2.0.0-beta.4
'@cropper/utils': 2.0.0-beta.4
dev: true
/@cropper/element@2.0.0-beta.4:
resolution: {integrity: sha512-1P8Vm9+OqTQz4B/rEA0t8xmzKUkYyxzxTiOaDMPKjKbG2R3UZgJBWRzvTgTsDudld9vlR6FfXpDBU1ZWA1BWxQ==}
dependencies:
'@cropper/utils': 2.0.0-beta.4
dev: true
/@cropper/elements@2.0.0-beta.4:
resolution: {integrity: sha512-cXKNFwudKcFrxn75VU9nLWNpjUnHcY0rUvtLn+2YVOLAnCTFLlu+azjOW1XZJ01FAEcC62Itb4CvDae+qgDpcQ==}
dependencies:
'@cropper/element': 2.0.0-beta.4
'@cropper/element-canvas': 2.0.0-beta.4
'@cropper/element-crosshair': 2.0.0-beta.4
'@cropper/element-grid': 2.0.0-beta.4
'@cropper/element-handle': 2.0.0-beta.4
'@cropper/element-image': 2.0.0-beta.4
'@cropper/element-selection': 2.0.0-beta.4
'@cropper/element-shade': 2.0.0-beta.4
'@cropper/element-viewer': 2.0.0-beta.4
dev: true
/@cropper/utils@2.0.0-beta.4:
resolution: {integrity: sha512-mrUTA3LbEq1Y3nPTC5X6koTd2Dk8P+6xTuhp4P8X3mg5Z7d8AVK+0OU5kbB49OLAaEfvGEqbZJ84rLwgMy9RHw==}
dev: true
/@cspotcode/source-map-consumer@0.8.0:
resolution: {integrity: sha512-41qniHzTU8yAGbCp04ohlmSrZf8bkf/iJsl3V0dRGsQN/5GFfx+LbCSsCpp2gqrqjTVg/K6O8ycoV35JIwAzAg==}
engines: {node: '>= 12'}
@ -7393,13 +7305,6 @@ packages:
luxon: 3.3.0
dev: false
/cropperjs@2.0.0-beta.4:
resolution: {integrity: sha512-tWIQnvbou6eJvQkajwhGLOOEw03dM/i23FmnUQtMKjuzbTDSMP61kcwM77Uit8MXEWcUb5PH8n4jawyrFvj5ag==}
dependencies:
'@cropper/elements': 2.0.0-beta.4
'@cropper/utils': 2.0.0-beta.4
dev: true
/cross-env@7.0.3:
resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
@ -18688,6 +18593,10 @@ packages:
resolution: {integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==}
dev: true
/vue-cropper@1.1.1:
resolution: {integrity: sha512-WsqKMpaBf9Osi1LQlE/5AKdD0nHWOy1asLXocaG8NomOWO07jiZi968+/PbMmnD0QbPJOumDQaGuGa13qys85A==}
dev: true
/vue-draggable-plus@0.2.6(@types/sortablejs@1.15.1):
resolution: {integrity: sha512-d+0omKIBIfLiJFggc6H4ePRaifbX+33+OiCMsxn8rG59yWXlJGrobexxgXetnSo/1NLTd0TkYZKNc4CA6iwJZw==}
peerDependencies: