sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: add ifiltergenerator powered by misetehoshii

Browse Source
This commit is contained in:
こけっち 2022-09-13 20:54:57 +09:00
parent 7817bfac2e
commit ade3b8e3fb
No known key found for this signature in database
GPG Key ID: 21460619C5FC4DD1
3 changed files with 195 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/package.json
View File

@ -37,6 +37,7 @@
"katex": "0.15.6", "katex": "0.15.6",
"matter-js": "0.18.0", "matter-js": "0.18.0",
"mfm-js": "0.23.0", "mfm-js": "0.23.0",
"misetehoshii": "https://github.com/melt-adzuki/misetehoshii",
"misskey-js": "0.0.14", "misskey-js": "0.0.14",
"photoswipe": "5.3.2", "photoswipe": "5.3.2",
"prismjs": "1.29.0", "prismjs": "1.29.0",

266
packages/client/src/pages/admin/emojigen.vue
View File

@ -1,76 +1,109 @@
<template> <template>
<MkSpacer :content-max="700" :margin-min="16" :margin-max="32"> <MkStickyContainer>
<div class="cwepdizn _formRoot"> <template #header><XHeader v-model:tab="tab" :tabs="headerTabs" /></template>
<FormSection> <MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
<template #label>{{ $ts.preview }}</template> <div class="cwepdizn _formRoot">
<p><img :src="previewUrl" class="img" :alt="emojiName" /></p> <div v-if="tab === 'string'" class="local">
</FormSection> <FormSection>
<FormButton primary class="_formBlock" @click="uploadEmoji">{{ $ts.emojiApproval }}</FormButton> <template #label>{{ $ts.preview }}</template>
<FormSection> <p><img :src="previewUrl" class="img" :alt="emojiName" /></p>
<template #label>{{ $ts.settings }}</template> </FormSection>
<FormInput v-model="emojiName" class="_formBlock"> <FormButton primary class="_formBlock" @click="uploadEmoji('url')">{{ $ts.emojiApproval }}</FormButton>
<template #label>{{ $ts.emojiName }}</template> <FormSection>
</FormInput> <template #label>{{ $ts.settings }}</template>
<FormInput v-model="emojiName" class="_formBlock">
<template #label>{{ $ts.emojiName }}</template>
</FormInput>
<FormTextarea v-model="text" class="_formBlock"> <FormTextarea v-model="text" class="_formBlock">
<template #label>{{ $ts.text }}</template> <template #label>{{ $ts.text }}</template>
</FormTextarea> </FormTextarea>
<FormRadios v-model="emojiAlign" class="_formBlock"> <FormRadios v-model="emojiAlign" class="_formBlock">
<template #label>{{ $ts.emojiAlign }}</template> <template #label>{{ $ts.emojiAlign }}</template>
<option value="left"><i class="fas fa-align-left"/></option> <option value="left"><i class="fas fa-align-left"/></option>
<option value="center"><i class="fas fa-align-center"></i></option> <option value="center"><i class="fas fa-align-center"></i></option>
<option value="right"><i class="fas fa-align-right"/></option> <option value="right"><i class="fas fa-align-right"/></option>
</FormRadios> </FormRadios>
<FormFolder :default-open="false" class="_formBlock"> <FormFolder :default-open="false" class="_formBlock">
<template #label>{{ $ts.emojiSizeSetting }}</template> <template #label>{{ $ts.emojiSizeSetting }}</template>
<FormSection> <FormSection>
<FormSwitch v-model="emojiSizeFixed" class="_formBlock"> <FormSwitch v-model="emojiSizeFixed" class="_formBlock">
<template #label>{{ $ts.emojiSizeFixed }}</template> <template #label>{{ $ts.emojiSizeFixed }}</template>
</FormSwitch> </FormSwitch>
<FormSwitch v-model="emojiStretch" class="_formBlock"> <FormSwitch v-model="emojiStretch" class="_formBlock">
<template #label>{{ $ts.emojiStretch }}</template> <template #label>{{ $ts.emojiStretch }}</template>
</FormSwitch> </FormSwitch>
</FormSection> </FormSection>
</FormFolder> </FormFolder>
<FormFolder :default-open="false" class="_formBlock"> <FormFolder :default-open="false" class="_formBlock">
<template #label>{{ $ts._pages.font }}</template> <template #label>{{ $ts._pages.font }}</template>
<FormRadios v-model="font" class="_formBlock"> <FormRadios v-model="font" class="_formBlock">
<option value="notosans-mono-bold">Noto Sans Mono CJK JP Bold</option> <option value="notosans-mono-bold">Noto Sans Mono CJK JP Bold</option>
<option value="mplus-1p-black">M+ 1p black</option> <option value="mplus-1p-black">M+ 1p black</option>
<option value="rounded-x-mplus-1p-black">Rounded M+ 1p black</option> <option value="rounded-x-mplus-1p-black">Rounded M+ 1p black</option>
<option value="ipamjm">IPAmj明朝</option> <option value="ipamjm">IPAmj明朝</option>
<option value="aoyagireisyoshimo">青柳隷書しも</option> <option value="aoyagireisyoshimo">青柳隷書しも</option>
<option value="LinLibertine_RBah">LinLibertine Bold</option> <option value="LinLibertine_RBah">LinLibertine Bold</option>
</FormRadios> </FormRadios>
</FormFolder> </FormFolder>
<FormFolder :default-open="false" class="_formBlock"> <FormFolder :default-open="false" class="_formBlock">
<template #label>{{ $ts.emojiColor }}</template> <template #label>{{ $ts.emojiColor }}</template>
<FormSection> <FormSection>
<div class="cwepdizn-colors"> <div class="cwepdizn-colors">
<div class="row"> <div class="row">
<button v-for="color in accentColors" :key="color" class="color rounded _button" @click="setAccentColor(color)"> <button v-for="color in accentColors" :key="color" class="color rounded _button" @click="setAccentColor(color)">
<div class="preview" :style="{ background: color }"></div> <div class="preview" :style="{ background: color }"></div>
</button> </button>
</div>
</div>
<FormInput v-model="emojiColor" class="_formBlock" :style="{ color: '#' + emojiColor }">
<template #prefix><i class="fas fa-palette"></i></template>
<template #label @click="colorPick()">{{ $ts.emojiColor }}</template>
<template #caption>#RRGGBB</template>
</FormInput>
<FormButton @click="colorPick()">{{ $ts.colorPicker }}</FormButton>
</FormSection>
</FormFolder>
</FormSection>
</div>
<div v-else-if="tab === 'misetehoshii'" class="remote">
<FormSection>
<template #label>{{ $ts.preview }}</template>
<canvas class="preview__content" ref="canvas" width="64" height="30" />
</FormSection>
<FormButton primary class="_formBlock" @click="uploadEmoji('')">{{ $ts.emojiApproval }}</FormButton>
<FormSection>
<template #label>{{ $ts.settings }}</template>
<FormInput v-model="emojiName" class="_formBlock">
<template #label>{{ $ts.emojiName }}</template>
</FormInput>
<FormTextarea v-model="text" value="見せてほしい" class="_formBlock">
<template #label>{{ $ts.text }}</template>
</FormTextarea>
<FormRadios v-model="backColor" class="_formBlock">
<template #label>{{ $ts._theme.color }}</template>
<option v-for="c in backColors" v-bind:value="c">{{c}}</option>
</FormRadios>
</FormSection>
<FormSection>
<template #label>見せてほしいメーカー</template>
<div>Powered by <MkLink url="https://github.com/melt-adzuki/misetehoshii">misetehoshii</MkLink>
</div> </div>
</div> </FormSection>
</div>
<FormInput v-model="emojiColor" class="_formBlock" :style="{ color: '#' + emojiColor }"> </div>
<template #prefix><i class="fas fa-palette"></i></template> </MkSpacer>
<template #label @click="colorPick()">{{ $ts.emojiColor }}</template> </MkStickyContainer>
<template #caption>#RRGGBB</template>
</FormInput>
<FormButton @click="colorPick()">{{ $ts.colorPicker }}</FormButton>
</FormSection>
</FormFolder>
</FormSection>
</div>
</MkSpacer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -80,6 +113,10 @@ import * as os from '@/os';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { stream } from '@/stream'; import { stream } from '@/stream';
import { uploadFile } from '@/scripts/upload';
import XHeader from './_header_.vue';
import MkTab from '@/components/MkTab.vue';
import MkLink from '@/components/MkLink.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.vue';
import FormSwitch from '@/components/form/switch.vue'; import FormSwitch from '@/components/form/switch.vue';
@ -88,6 +125,22 @@ import FormRadios from '@/components/form/radios.vue';
import FormTextarea from '@/components/form/textarea.vue'; import FormTextarea from '@/components/form/textarea.vue';
import FormFolder from '@/components/form/folder.vue'; import FormFolder from '@/components/form/folder.vue';
import { definePageMetadata } from '@/scripts/page-metadata'; import { definePageMetadata } from '@/scripts/page-metadata';
import { buttonImages } from "misetehoshii/src/assets";
import { draw } from "misetehoshii/src/canvas"
definePageMetadata(computed(() => ({
title: i18n.ts.emojiGen,
icon: 'fas fa-kiss-wink-heart',
})));
const tab = ref('string');
const headerTabs = $computed(() => [{
key: 'string',
title: 'もじもじ',
}, {
key: 'misetehoshii',
title: '見せてほしい',
}]);
const font = ref('rounded-x-mplus-1p-black'); const font = ref('rounded-x-mplus-1p-black');
const text = ref(''); const text = ref('');
@ -111,8 +164,27 @@ const accentColors = [
'#8080ff', '#8080ff',
]; ];
watch([font, text, emojiAlign, emojiSizeFixed, emojiStretch, emojiColor], () => { const backColor = ref('blue')
const canvas = ref<HTMLCanvasElement>()
const buttonImage = computed(() => buttonImages[backColor.value])
const backColors = [
'blue',
'peacockGreen',
'green',
'yellow',
'red',
'pink',
'disabled',
];
const updateCanvas = (): void => {
const context = canvas.value!.getContext("2d")!
draw({ context, text: text.value, button: buttonImage.value })
}
watch([font, text, emojiAlign, emojiSizeFixed, emojiStretch, emojiColor, backColor], () => {
preview(); preview();
updateCanvas();
}); });
const colorPick = (): void => { const colorPick = (): void => {
@ -197,33 +269,57 @@ const getEmojiObject = emojiId => new Promise<Record<string, any> | null>(async
resolve(id[0]); resolve(id[0]);
}); });
const uploadEmoji = async () => { const uploadEmoji = async (type: string) => {
const emojiUrl = makeUrl();
const fileId = await uploadFileFromUrlWithId(emojiUrl);
// ドライブにアップロードされたファイルをリネーム if (type == 'url') {
await os.api('drive/files/update', { const emojiUrl = makeUrl();
fileId, const fileId = await uploadFileFromUrlWithId(emojiUrl);
name: emojiName.value + '.png',
});
const emojiId = await os.api('admin/emoji/add', { fileId }); // ドライブにアップロードされたファイルをリネーム
const emoji = await getEmojiObject(emojiId); await os.api('drive/files/update', {
fileId,
if (!emoji) { name: emojiName.value + '.png',
os.alert({
type: 'error',
text: i18n.ts.failedToUploadEmoji,
}); });
const emojiId = await os.api('admin/emoji/add', { fileId });
const emoji = await getEmojiObject(emojiId);
if (!emoji) {
os.alert({
type: 'error',
text: i18n.ts.failedToUploadEmoji,
});
}
os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), { emoji });
} else {
const canvasImg = new Promise<Blob>(resolve => {
canvas.value!.toBlob(blob => resolve(blob?.slice(0, blob.size, 'image/png') as Blob));
})
const file = new File([await canvasImg], emojiName.value + '.png', { type: 'image/png' });
const fileId = (await uploadFile(file, defaultStore.state.uploadFolder, undefined, true)).id
// ドライブにアップロードされたファイルをリネーム
await os.api('drive/files/update', {
fileId,
name: emojiName.value + '.png',
});
const emojiId = await os.api('admin/emoji/add', { fileId });
const emoji = await getEmojiObject(emojiId);
if (!emoji) {
os.alert({
type: 'error',
text: i18n.ts.failedToUploadEmoji,
});
}
os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), { emoji });
} }
os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), { emoji });
}; };
definePageMetadata(computed(() => ({
title: i18n.ts.emojiGen,
icon: 'fas fa-kiss-wink-heart',
})));
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

14
packages/client/yarn.lock
View File

@ -1226,6 +1226,11 @@ delayed-stream@~1.0.0:
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk= integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
destyle.css@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/destyle.css/-/destyle.css-3.0.2.tgz#80c331db91f02337040b62dc534ab4f3dc075546"
integrity sha512-OUzuAlridP01YP0seHxx+FgwhdXF07Ls9NxnJpR8EI7ADioswoR7VKkBd/s1hNw/G4ILasLSA0k2Kw1M57r1kA==
detect-node@2.1.0, detect-node@^2.1.0: detect-node@2.1.0, detect-node@^2.1.0:
version "2.1.0" version "2.1.0"
resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1" resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
@ -2616,6 +2621,13 @@ minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q== integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
"misetehoshii@https://github.com/melt-adzuki/misetehoshii":
version "0.0.0"
resolved "https://github.com/melt-adzuki/misetehoshii#d00f51529e390808f92172000f960b4f1314f37c"
dependencies:
destyle.css "^3.0.2"
vue "^3.2.37"
misskey-js@0.0.14: misskey-js@0.0.14:
version "0.0.14" version "0.0.14"
resolved "https://registry.yarnpkg.com/misskey-js/-/misskey-js-0.0.14.tgz#1a616bdfbe81c6ee6900219eaf425bb5c714dd4d" resolved "https://registry.yarnpkg.com/misskey-js/-/misskey-js-0.0.14.tgz#1a616bdfbe81c6ee6900219eaf425bb5c714dd4d"
@ -3621,7 +3633,7 @@ vue-prism-editor@2.0.0-alpha.2:
resolved "https://registry.yarnpkg.com/vue-prism-editor/-/vue-prism-editor-2.0.0-alpha.2.tgz#aa53a88efaaed628027cbb282c2b1d37fc7c5c69" resolved "https://registry.yarnpkg.com/vue-prism-editor/-/vue-prism-editor-2.0.0-alpha.2.tgz#aa53a88efaaed628027cbb282c2b1d37fc7c5c69"
integrity sha512-Gu42ba9nosrE+gJpnAEuEkDMqG9zSUysIR8SdXUw8MQKDjBnnNR9lHC18uOr/ICz7yrA/5c7jHJr9lpElODC7w== integrity sha512-Gu42ba9nosrE+gJpnAEuEkDMqG9zSUysIR8SdXUw8MQKDjBnnNR9lHC18uOr/ICz7yrA/5c7jHJr9lpElODC7w==
vue@3.2.39: vue@3.2.39, vue@^3.2.37:
version "3.2.39" version "3.2.39"
resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.39.tgz#de071c56c4c32c41cbd54e55f11404295c0dd62d" resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.39.tgz#de071c56c4c32c41cbd54e55f11404295c0dd62d"
integrity sha512-tRkguhRTw9NmIPXhzk21YFBqXHT2t+6C6wPOgQ50fcFVWnPdetmRqbmySRHznrYjX2E47u0cGlKGcxKZJ38R/g== integrity sha512-tRkguhRTw9NmIPXhzk21YFBqXHT2t+6C6wPOgQ50fcFVWnPdetmRqbmySRHznrYjX2E47u0cGlKGcxKZJ38R/g==