oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

refactor(frontend): 非推奨となったReactivity Transformを使わないように (#12539)

Browse source 
* refactor(frontend): 非推奨となったReactivity Transformを使わないように

* refactor: 不要な括弧を除去

* fix: 不要なアノテーションを除去

* fix: Refの配列をrefしている部分の対応

* refactor: 不要な括弧を除去

* fix: lint

* refactor: Ref、ShallowRef、ComputedRefの変数の宣言をletからconstに置換

* fix: type error

* chore: drop reactivity transform from eslint configuration

* refactor: remove unnecessary import

* fix: 対応漏れ
This commit is contained in:
zyoshoka 2023-12-07 14:42:09 +09:00 • committed by GitHub
parent e42c91dee7
commit 406b4bdbe7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
277 changed files with 3353 additions and 3441 deletions
Download patch file Download diff file Expand all files Collapse all files

45
packages/frontend/src/components/MkImgWithBlurhash.vue
View file

@ -21,7 +21,6 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts">
import { $ref } from 'vue/macros';
import DrawBlurhash from '@/workers/draw-blurhash?worker';
import TestWebGL2 from '@/workers/test-webgl2?worker';
import { WorkerMultiDispatch } from '@/scripts/worker-multi-dispatch.js';
@ -58,7 +57,7 @@ const canvasPromise = new Promise<WorkerMultiDispatch | HTMLCanvasElement>(resol
</script>
<script lang="ts" setup>
import { computed, nextTick, onMounted, onUnmounted, shallowRef, watch } from 'vue';
import { computed, nextTick, onMounted, onUnmounted, shallowRef, watch, ref } from 'vue';
import { v4 as uuid } from 'uuid';
import { render } from 'buraha';
import { defaultStore } from '@/store.js';
@ -98,41 +97,41 @@ const viewId = uuid();
const canvas = shallowRef<HTMLCanvasElement>();
const root = shallowRef<HTMLDivElement>();
const img = shallowRef<HTMLImageElement>();
let loaded = $ref(false);
let canvasWidth = $ref(64);
let canvasHeight = $ref(64);
let imgWidth = $ref(props.width);
let imgHeight = $ref(props.height);
let bitmapTmp = $ref<CanvasImageSource | undefined>();
const hide = computed(() => !loaded || props.forceBlurhash);
const loaded = ref(false);
const canvasWidth = ref(64);
const canvasHeight = ref(64);
const imgWidth = ref(props.width);
const imgHeight = ref(props.height);
const bitmapTmp = ref<CanvasImageSource | undefined>();
const hide = computed(() => !loaded.value || props.forceBlurhash);
function waitForDecode() {
if (props.src != null && props.src !== '') {
nextTick()
.then(() => img.value?.decode())
.then(() => {
loaded = true;
loaded.value = true;
}, error => {
console.log('Error occurred during decoding image', img.value, error);
});
} else {
loaded = false;
loaded.value = false;
}
}
watch([() => props.width, () => props.height, root], () => {
const ratio = props.width / props.height;
if (ratio > 1) {
canvasWidth = Math.round(64 * ratio);
canvasHeight = 64;
canvasWidth.value = Math.round(64 * ratio);
canvasHeight.value = 64;
} else {
canvasWidth = 64;
canvasHeight = Math.round(64 / ratio);
canvasWidth.value = 64;
canvasHeight.value = Math.round(64 / ratio);
}
const clientWidth = root.value?.clientWidth ?? 300;
imgWidth = clientWidth;
imgHeight = Math.round(clientWidth / ratio);
imgWidth.value = clientWidth;
imgHeight.value = Math.round(clientWidth / ratio);
}, {
immediate: true,
});
@ -140,15 +139,15 @@ watch([() => props.width, () => props.height, root], () => {
function drawImage(bitmap: CanvasImageSource) {
// canvasがない（mountedされていない）場合はTmpに保存しておく
if (!canvas.value) {
bitmapTmp = bitmap;
bitmapTmp.value = bitmap;
return;
}
// canvasがあれば描画する
bitmapTmp = undefined;
bitmapTmp.value = undefined;
const ctx = canvas.value.getContext('2d');
if (!ctx) return;
ctx.drawImage(bitmap, 0, 0, canvasWidth, canvasHeight);
ctx.drawImage(bitmap, 0, 0, canvasWidth.value, canvasHeight.value);
}
function drawAvg() {
@ -160,7 +159,7 @@ function drawAvg() {
// avgColorでお茶をにごす
ctx.beginPath();
ctx.fillStyle = extractAvgColorFromBlurhash(props.hash) ?? '#888';
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
ctx.fillRect(0, 0, canvasWidth.value, canvasHeight.value);
}
async function draw() {
@ -212,8 +211,8 @@ watch(() => props.hash, () => {
onMounted(() => {
// drawImageがmountedより先に呼ばれている場合はここで描画する
if (bitmapTmp) {
drawImage(bitmapTmp);
if (bitmapTmp.value) {
drawImage(bitmapTmp.value);
}
waitForDecode();
});