21 | {label}
22 |
23 |
24 |
29 |
26 |
27 |
28 |
23 | {#each Object.entries($bubble.optionSet) as [key, v], _ (key)}
24 | {@const value = getAny(v)}
25 | {#if value["type"] === "number"}
26 |
47 | {/if}
48 |
49 |
73 |
74 |
75 |
76 |
--------------------------------------------------------------------------------
/src/bookeditor/bubbleinspector/HistoryStorage.svelte:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/bookeditor/bubbleinspector/WebFontListItem.svelte:
--------------------------------------------------------------------------------
1 |
24 |
25 |
27 |
34 |
38 | {/if}
39 | {#if value["type"] === "boolean"}
40 | {value["label"]}
28 |
35 |
36 |
37 |
41 |
44 | {/if}
45 | {/each}
46 | {value["label"]}
42 |
43 |
26 |
27 |
28 | 
29 |
30 |
31 |
--------------------------------------------------------------------------------
/src/bookeditor/bubbleinspector/bubbleInspectorStore.ts:
--------------------------------------------------------------------------------
1 | import { type Writable, writable } from "svelte/store";
2 | import type { Bubble } from "../../lib/layeredCanvas/dataModels/bubble";
3 | import type { Film } from "../../lib/layeredCanvas/dataModels/film";
4 | import type { Page } from '../../lib/book/book';
5 |
6 | type BubbleInspectorCommand = "generate" | "scribble" | "punch";
7 |
8 | export type BubbleInspectorPosition = {
9 | center: {x: number, y: number},
10 | height: number,
11 | offset: number,
12 | }
13 |
14 | export type BubbleInspectorTarget = {
15 | bubble: Bubble,
16 | page: Page,
17 | command: BubbleInspectorCommand | null,
18 | commandTargetFilm: Film | null,
19 | }
20 |
21 | export const bubbleInspectorTarget: Writable
22 |
23 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/src/bookeditor/effectchooser/effectChooserStore.ts:
--------------------------------------------------------------------------------
1 | import { type Writable, writable } from "svelte/store";
2 |
3 | export type EffectChoiceNotifier = (tag: string | null) => void;
4 |
5 | export const effectChoiceNotifier: Writable
24 |
36 |
25 | {#each effects as { name, label, hint }}
26 |
33 | {/each}
34 |
35 |
29 |
30 |
31 |
32 |
52 |
--------------------------------------------------------------------------------
/src/bubbleBucket/bubbleBucketStore.ts:
--------------------------------------------------------------------------------
1 | import { writable, type Writable } from "svelte/store";
2 | import type { Page } from "../lib/book/book";
3 |
4 | export const bubbleBucketPage: Writableloading...
16 | {:then fileSystem}
17 |
29 |
33 |
34 |
45 |
--------------------------------------------------------------------------------
/src/filemanager/FileManagerInsertZone.svelte:
--------------------------------------------------------------------------------
1 |
29 |
30 |
31 |
30 |
31 |
32 |
39 |
45 |
46 |
47 |
83 |
84 |
--------------------------------------------------------------------------------
/src/filemanager/currentFile.ts:
--------------------------------------------------------------------------------
1 | // 現在のファイルIDをSessionStorageに記録する関数
2 | import type { NodeId } from '../lib/filesystem/fileSystem';
3 |
4 | export type CurrentFileInfo = {
5 | id: NodeId;
6 | fileSystem: 'cloud' | 'local';
7 | }
8 |
9 | export async function recordCurrentFileInfo(info: CurrentFileInfo): Promise
43 |
44 |
26 |
27 |
28 |
33 |
34 |
39 |
40 |
45 |
46 |
51 |
52 | {#if comment}
53 |
56 |
57 |
70 |
71 |
--------------------------------------------------------------------------------
/src/generator/Gallery.svelte:
--------------------------------------------------------------------------------
1 |
32 |
33 |
29 | Schnell
30 |
31 |
32 |
35 | Pro
36 |
37 |
38 |
41 | ちび
42 |
43 |
44 |
47 | まんが
48 |
49 |
50 | {comment}
54 | {/if}
55 |
34 | {#each canvases as canvas}
35 |
36 | {/each}
37 |
38 |
39 |
--------------------------------------------------------------------------------
/src/generator/ImageGeneratorPlain.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
34 |
35 |
53 |
--------------------------------------------------------------------------------
/src/generator/ImageProvider.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 |
19 |
27 |
28 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
29 |
32 |
33 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/generator/ImagingProgressBar.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
22 |
23 |
--------------------------------------------------------------------------------
/src/generator/batchImagingStore.ts:
--------------------------------------------------------------------------------
1 | import { type Writable, writable, get } from "svelte/store";
2 | import type { Page } from "../lib/book/book";
3 |
4 | export const batchImagingPage: Writable画像生成中
11 | 12 |
13 |
15 |
16 | {#if imageProgress !== null}
17 |
18 |
20 | {/if}
21 |
16 |
19 |
20 |
--------------------------------------------------------------------------------
/src/mascot/Mascot.svelte:
--------------------------------------------------------------------------------
1 |
15 |
16 | {document.id}
17 | {document.text}
18 | {
21 | $mascotWindowRect = new DOMRect(offsetX, offsetY, $mascotWindowRect.width, $mascotWindowRect.height);
22 | return `translate(${offsetX}px, ${offsetY}px)`;
23 | }
24 | }}>
25 |
35 |
36 |
70 |
--------------------------------------------------------------------------------
/src/mascot/mascotStore.ts:
--------------------------------------------------------------------------------
1 | import { writable } from "svelte/store";
2 | import type { Writable } from "svelte/store";
3 |
4 | export const mascotVisible = writable(false);
5 | export const mascotWindowRect: Writable
26 |
28 |
29 |
30 |
31 |
32 |
34 |
25 |
26 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/src/notebook/NotebookTextarea.svelte:
--------------------------------------------------------------------------------
1 |
24 |
25 |
26 | {#if waiting}
27 |
32 |
42 |
43 |
--------------------------------------------------------------------------------
/src/notebook/callAdvise.ts:
--------------------------------------------------------------------------------
1 | import { Notebook } from '../lib/book/notebook';
2 | import { advise } from '../firebase';
3 | import { onlineAccount, type OnlineAccount } from '../utils/accountStore';
4 |
5 | export async function callAdvise(action: string, notebook: Notebook, instruction?: string): Promise
28 |
30 | {:else}
31 |
33 |
34 |
35 | 
dispatch('advise', value)} use:toolTip={`カイルちゃん考えて！[${cost}]`} />
36 |
37 |
38 | 
39 |
40 | {/if}
41 |
28 | >;
7 |
8 | export function assurePreferences() {
9 | dbPromise = openDB("preferences", preferencesVersion, {
10 | upgrade(db) {
11 | for (const store of preferencesStores) {
12 | db.createObjectStore(store);
13 | }
14 | }
15 | });
16 | }
17 |
18 | export function getDBPromise() {
19 | return dbPromise;
20 | }
21 |
22 | export function createPreference(storeName: string, key: string) {
23 | let saved: T | undefined = undefined;
24 | return {
25 | get: async () => {
26 | saved = await (await dbPromise).get(storeName, key);
27 | console.log("preference get", saved);
28 | return saved;
29 | },
30 | getOrDefault: async (defaultValue: T) => {
31 | saved = await (await dbPromise).get(storeName, key);
32 | if (saved === undefined) {
33 | saved = defaultValue;
34 | await (await dbPromise).put(storeName, defaultValue, key);
35 | }
36 | console.log("preference getOrDefault", saved);
37 | return saved;
38 | },
39 | set: async (value: T) => {
40 | if (value !== saved) {
41 | saved = value;
42 | await (await dbPromise).put(storeName, value, key);
43 | console.log("preference set", value);
44 | }
45 | }
46 | };
47 | }
48 |
49 |
--------------------------------------------------------------------------------
/src/rootelements/AboutButton.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/rootelements/BellButton.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/src/rootelements/CabinetButton.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/rootelements/DownloadButton.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/rootelements/MaterialBucketButton.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/rootelements/RulerButton.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/rootelements/SaveOffButton.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 | {#if $saveProhibitFlag}
18 |
22 | {:else}
23 |
27 | {/if}
28 |
29 |
43 |
--------------------------------------------------------------------------------
/src/rootelements/VideoButton.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/t.json:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonigata/FramePlanner2/2a1aa68a993c8bd45595d21548cc441e7f9c24ee/src/t.json
--------------------------------------------------------------------------------
/src/toolbar/AvatarIcon.svelte:
--------------------------------------------------------------------------------
1 |
27 |
28 |
29 |
30 | ("standard");
5 |
--------------------------------------------------------------------------------
/src/undoStore.ts:
--------------------------------------------------------------------------------
1 | import { writable } from "svelte/store";
2 |
3 | export const undoStore = writable(null);
4 | export const commitIfDirtyToken = writable(false);
5 | export const commitToken = writable(null); // tag
6 |
--------------------------------------------------------------------------------
/src/utils/AutoSizeCanvas.svelte:
--------------------------------------------------------------------------------
1 |
23 |
24 |
51 |
--------------------------------------------------------------------------------
/src/utils/Feathral.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | 
12 | x{cost}
13 |
14 |
15 |
21 |
--------------------------------------------------------------------------------
/src/utils/FileBrowser.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 | = {
4 | subscribe: (run: (value: AsyncStoreState) => void) => () => void;
5 | trigger: () => Promise;
6 | resolve: (value: T) => void;
7 | isActive: {subscribe: (run: (value: boolean) => void) => () => void };
8 | };
9 |
10 | type AsyncStoreState = {
11 | isActive: boolean;
12 | resolve: ((value: T) => void) | null;
13 | };
14 |
15 | export function createAsyncStore(): AsyncStoreActions {
16 | const store = writable>({ isActive: false, resolve: null });
17 |
18 | const isActive = derived(store, $store => $store.isActive);
19 |
20 | function trigger(): Promise {
21 | return new Promise((resolve) => {
22 | store.set({ isActive: true, resolve });
23 | });
24 | }
25 |
26 | function resolve(value: T) {
27 | const currentState = get(store);
28 | if (currentState.resolve) {
29 | currentState.resolve(value);
30 | store.set({ isActive: false, resolve: null }); // 自動的にisActiveをfalseに設定
31 | }
32 | }
33 |
34 | return {
35 | subscribe: store.subscribe,
36 | trigger,
37 | resolve,
38 | isActive
39 | };
40 | }
41 |
--------------------------------------------------------------------------------
/src/utils/backUpIndexedDB.ts:
--------------------------------------------------------------------------------
1 | type DataCopy = { [storeName: string]: any[] };
2 |
3 | export const copyIndexedDB = (dbName: string): Promise => {
4 | return new Promise((resolve, reject) => {
5 | const request = indexedDB.open(dbName);
6 | let db: IDBDatabase | null = null;
7 |
8 | request.onsuccess = (event: Event) => {
9 | db = (event.target as IDBOpenDBRequest).result;
10 | const dataCopy: DataCopy = {};
11 |
12 | const transaction = db.transaction(db.objectStoreNames, "readonly");
13 | transaction.oncomplete = () => {
14 | resolve(dataCopy);
15 | };
16 | transaction.onerror = (event) => reject(event);
17 |
18 | Array.from(db.objectStoreNames).forEach((storeName) => {
19 | const store = transaction.objectStore(storeName);
20 | const query = store.getAll();
21 |
22 | query.onsuccess = () => {
23 | dataCopy[storeName] = query.result;
24 | };
25 | });
26 | };
27 |
28 | request.onerror = (event) => {
29 | reject((event.target as IDBRequest).error);
30 | };
31 | });
32 | };
33 |
34 |
35 | export const restoreIndexedDB = (dbName: string, dataCopy: DataCopy): Promise => {
36 | return new Promise((resolve, reject) => {
37 | const request = indexedDB.open(dbName);
38 |
39 | request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
40 | // Create object stores if they don't exist, based on dataCopy keys
41 | let db = (event.target as IDBOpenDBRequest).result;
42 | Object.keys(dataCopy).forEach((storeName) => {
43 | if (!db.objectStoreNames.contains(storeName)) {
44 | db.createObjectStore(storeName);
45 | }
46 | });
47 | };
48 |
49 | request.onsuccess = (event: Event) => {
50 | const db = (event.target as IDBOpenDBRequest).result;
51 | const transaction = db.transaction(db.objectStoreNames, "readwrite");
52 |
53 | transaction.oncomplete = () => resolve();
54 | transaction.onerror = (event) => reject(event);
55 |
56 | Object.entries(dataCopy).forEach(([storeName, records]) => {
57 | const store = transaction.objectStore(storeName);
58 | // Clear existing entries to avoid duplicates
59 | store.clear();
60 | records.forEach((record) => {
61 | store.add(record);
62 | });
63 | });
64 | };
65 |
66 | request.onerror = (event) => {
67 | reject((event.target as IDBRequest).error);
68 | };
69 | });
70 | };
71 |
--------------------------------------------------------------------------------
/src/utils/bookArchiverStore.ts:
--------------------------------------------------------------------------------
1 | import { type Writable, writable } from "svelte/store";
2 |
3 | export type BookArchiveOperation =
4 | 'download' |
5 | 'copy' |
6 | 'export-psd' |
7 | 'aipictors' |
8 | 'envelope' |
9 | 'export-prompts' |
10 | 'publish' |
11 | 'share-book';
12 |
13 | export const bookArchiver: Writable = writable([]);
14 |
--------------------------------------------------------------------------------
/src/utils/colorpicker/ColorPickerLabel.svelte:
--------------------------------------------------------------------------------
1 |
15 |
16 |
17 |
18 | = writable(null);
10 |
--------------------------------------------------------------------------------
/src/utils/delayedCommiter.ts:
--------------------------------------------------------------------------------
1 | export class DelayedCommiter {
2 | when: number;
3 | timerId: number | null;
4 | commit: () => void;
5 |
6 | constructor(commit: () => void) {
7 | this.when = 0;
8 | this.timerId = null;
9 | this.commit = commit;
10 | }
11 |
12 | schedule(ms: number) {
13 | // 未来の方を選ぶ
14 | const newWhen = Date.now() + ms;
15 | if (this.when < newWhen) {
16 | if (this.timerId !== null) {
17 | clearTimeout(this.timerId);
18 | }
19 | this.when = newWhen;
20 | this.timerId = window.setTimeout(() => {
21 | this.commit();
22 | this.when = 0;
23 | this.timerId = null;
24 | }, ms);
25 | }
26 | }
27 |
28 | cancel() {
29 | if (this.timerId !== null) {
30 | clearTimeout(this.timerId);
31 | this.when = 0;
32 | this.timerId = null;
33 | }
34 | }
35 |
36 | force() {
37 | if (this.timerId !== null) {
38 | clearTimeout(this.timerId);
39 | this.when = 0;
40 | this.timerId = null;
41 | this.commit();
42 | }
43 | }
44 | }
45 |
46 | export class DelayedCommiterGroup {
47 | commiters: { [key: string]: DelayedCommiter };
48 | currentTag: string | null = null;
49 |
50 | constructor( commiters: { [key: string]: () => void }) {
51 | this.commiters = {};
52 | for (const key in commiters) {
53 | this.commiters[key] = new DelayedCommiter(commiters[key]);
54 | }
55 | }
56 |
57 | schedule(key: string, ms: number) {
58 | if (this.currentTag !== key) {
59 | this.force();
60 | }
61 | this.commiters[key].schedule(ms);
62 | this.currentTag = key;
63 | }
64 |
65 | cancel() {
66 | for (const key in this.commiters) {
67 | this.commiters[key].cancel();
68 | }
69 | }
70 |
71 | force() {
72 | for (const key in this.commiters) {
73 | this.commiters[key].force();
74 | }
75 | }
76 | }
--------------------------------------------------------------------------------
/src/utils/developmentFlagStore.ts:
--------------------------------------------------------------------------------
1 | import { writable, get } from "svelte/store";
2 |
3 | export const developmentFlag = writable(false);
4 | export const saveProhibitFlag = writable(false);
5 |
6 | // localhostか127.0.0.1だったら
7 | developmentFlag.set(location.hostname === "localhost" || location.hostname === "127.0.0.1");
8 | console.log("================ developmentFlag", get(developmentFlag));
9 |
--------------------------------------------------------------------------------
/src/utils/dropzone.ts:
--------------------------------------------------------------------------------
1 | // src/actions/dropzone.ts
2 | type DropHandler = (files: FileList) => void;
3 |
4 | export function dropzone(node: HTMLElement, onDrop: DropHandler) {
5 | const handleDragOver = (event: DragEvent) => {
6 | event.preventDefault();
7 | node.classList.add('drag-over');
8 | };
9 |
10 | const handleDragLeave = (event: DragEvent) => {
11 | node.classList.remove('drag-over');
12 | };
13 |
14 | const handleDrop = (event: DragEvent) => {
15 | event.preventDefault();
16 | node.classList.remove('drag-over');
17 | if (event.dataTransfer) {
18 | const files = event.dataTransfer.files;
19 | if (files.length > 0) {
20 | onDrop(files); // 引数で渡された関数を実行
21 | }
22 | }
23 | };
24 |
25 | node.addEventListener('dragover', handleDragOver);
26 | node.addEventListener('dragleave', handleDragLeave);
27 | node.addEventListener('drop', handleDrop);
28 |
29 | return {
30 | destroy() {
31 | node.removeEventListener('dragover', handleDragOver);
32 | node.removeEventListener('dragleave', handleDragLeave);
33 | node.removeEventListener('drop', handleDrop);
34 | }
35 | };
36 | }
37 |
--------------------------------------------------------------------------------
/src/utils/effectprocessor/effectProcessorStore.ts:
--------------------------------------------------------------------------------
1 | import type { Film } from "../../lib/layeredCanvas/dataModels/film";
2 | import { redrawToken } from "../../bookeditor/bookStore";
3 | import { PubSubQueue } from "../pubsub";
4 |
5 | export const effectProcessorQueue = new PubSubQueue();
6 | effectProcessorQueue.subscribe(async (film: Film) => {
7 | let inputMedia = film.media;
8 | for (const effect of film.effects) {
9 | inputMedia = await effect.apply(inputMedia);
10 | }
11 | redrawToken.set(true);
12 | });
13 |
14 |
--------------------------------------------------------------------------------
/src/utils/executeProcessAndNotify.ts:
--------------------------------------------------------------------------------
1 | import { toastStore } from '@skeletonlabs/skeleton';
2 |
3 | export async function executeProcessAndNotify(
4 | thresholdMillisecs: number,
5 | notificationMessage: string,
6 | asyncProcess: () => Promise
7 | ): Promise {
8 | const granted = await requestNotificationPermission();
9 | try {
10 | const start = new Date();
11 | const result = await asyncProcess();
12 | const timeouts = thresholdMillisecs < (new Date().getTime() - start.getTime());
13 | if (granted) {
14 | sendNotification(notificationMessage, timeouts);
15 | }
16 | return result;
17 | } catch (error) {
18 | console.error("プロセス実行中にエラーが発生しました: ", error);
19 | throw error;
20 | }
21 | }
22 |
23 | async function requestNotificationPermission(): Promise {
24 | if (!("Notification" in window)) return false;
25 | if (Notification.permission === "granted") return true;
26 | if (Notification.permission === "denied") return false;
27 |
28 | const permission = await Notification.requestPermission();
29 | return permission === "granted";
30 | }
31 |
32 | function sendNotification(message: string, timeouts: boolean) {
33 | if (document.visibilityState === 'visible' || !timeouts) {
34 | toastStore.trigger({ message, timeout: 3000 });
35 | } else {
36 | const n = new Notification(message);
37 | n.onclick = () => {
38 | window.focus();
39 | n.close();
40 | };
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/utils/fileBrowserStore.ts:
--------------------------------------------------------------------------------
1 | import { writable, type Writable } from "svelte/store";
2 |
3 | export const browserUsedImages: Writable = writable([]);
4 | export const browserStrayImages: Writable= writable([]);
5 |
--------------------------------------------------------------------------------
/src/utils/hoverKeyStore.ts:
--------------------------------------------------------------------------------
1 | export function hoverKey(node: HTMLElement, onKeyDown: (event: KeyboardEvent) => void) {
2 | const handleMouseEnter = (event: MouseEvent) => {
3 | document.addEventListener("keydown", onKeyDown);
4 | }
5 | const handleMouseLeave = (event: MouseEvent) => {
6 | document.removeEventListener("keydown", onKeyDown);
7 | }
8 |
9 | node.addEventListener("mouseenter", handleMouseEnter);
10 | node.addEventListener("mouseleave", handleMouseLeave);
11 |
12 | return {
13 | destroy() {
14 | node.removeEventListener("mouseenter", handleMouseEnter);
15 | node.removeEventListener("mouseleave", handleMouseLeave);
16 | document.removeEventListener("keydown", onKeyDown);
17 | }
18 | };
19 | }
--------------------------------------------------------------------------------
/src/utils/imageViewerStore.ts:
--------------------------------------------------------------------------------
1 | import { type Writable, writable } from "svelte/store";
2 |
3 | export const imageViewerTarget: Writable = writable(null);
4 |
--------------------------------------------------------------------------------
/src/utils/loadingStore.ts:
--------------------------------------------------------------------------------
1 | import { writable, type Writable } from "svelte/store";
2 |
3 | export const loading = writable(false);
4 | export const progress: Writable = writable(null);
5 |
--------------------------------------------------------------------------------
/src/utils/moveInArray.ts:
--------------------------------------------------------------------------------
1 | export function moveInArray(a: T[], oldIndex: number, newIndex: number) {
2 | // console.log("moveInArray", (a as any).map(e => e.index), oldIndex, newIndex);
3 | a.splice(newIndex, 0, a.splice(oldIndex, 1)[0]);
4 | }
5 |
--------------------------------------------------------------------------------
/src/utils/observeResize.ts:
--------------------------------------------------------------------------------
1 | import type { Writable } from 'svelte/store';
2 | import { get } from 'svelte/store';
3 |
4 | export function resize(node: HTMLElement, store: Writable) {
5 | const r = get(store);
6 | node.style.width = r.width + 'px';
7 | node.style.height = r.height + 'px';
8 | node.style.left = r.x + 'px';
9 | node.style.top = r.y + 'px';
10 |
11 | const observer = new ResizeObserver(entries => {
12 | const r = get(store);
13 | store.set(new DOMRect(r.x, r.y, entries[0].contentRect.width, entries[0].contentRect.height));
14 | });
15 |
16 | observer.observe(node);
17 |
18 | return {
19 | destroy() {
20 | observer.disconnect();
21 | }
22 | };
23 | }
24 |
--------------------------------------------------------------------------------
/src/utils/observeWithin.ts:
--------------------------------------------------------------------------------
1 | export function fitWithin(node: HTMLElement) {
2 | const observer = new IntersectionObserver(entries => {
3 | for (const entry of entries) {
4 | if (!entry.isIntersecting) {
5 | const rect = node.getBoundingClientRect();
6 | const parentRect = node.parentElement!.getBoundingClientRect();
7 |
8 | if (rect.bottom > parentRect.bottom) {
9 | node.style.top = `${parentRect.bottom - rect.height}px`;
10 | }
11 | if (rect.right > parentRect.right) {
12 | node.style.left = `${parentRect.right - rect.width}px`;
13 | }
14 | if (rect.top < parentRect.top) {
15 | node.style.top = `0px`;
16 | }
17 | if (rect.left < parentRect.left) {
18 | node.style.left = `0px`;
19 | }
20 | }
21 | }
22 | }, {
23 | threshold: 1.0
24 | });
25 |
26 | observer.observe(node);
27 |
28 | return {
29 | destroy() {
30 | observer.disconnect();
31 | }
32 | };
33 | }
34 |
--------------------------------------------------------------------------------
/src/utils/persistentText.ts:
--------------------------------------------------------------------------------
1 | import { createPreference } from '../preferences';
2 |
3 | interface PersistentOptions {
4 | store: string;
5 | key: string;
6 | onLoad?: (value: string) => void;
7 | }
8 |
9 | export function persistentText(node: HTMLElement, options: PersistentOptions) {
10 | const { store, key, onLoad } = options;
11 |
12 | const preference = createPreference(store, key);
13 |
14 | async function load() {
15 | const value = await preference.get();
16 | if (value) {
17 | if (onLoad) {
18 | onLoad(value);
19 | }
20 | if (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) {
21 | node.value = value;
22 | } else {
23 | node.textContent = value;
24 | }
25 | }
26 | }
27 |
28 | async function save(value: string) {
29 | await preference.set(value);
30 | }
31 |
32 | function onInput() {
33 | const value = node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement
34 | ? node.value
35 | : node.textContent || '';
36 | save(value);
37 | }
38 |
39 | node.addEventListener('input', onInput);
40 | load(); // 初期ロード
41 |
42 | return {
43 | update(newOptions: PersistentOptions) {
44 | Object.assign(options, newOptions);
45 | },
46 | destroy() {
47 | node.removeEventListener('input', onInput);
48 | }
49 | };
50 | }
51 |
--------------------------------------------------------------------------------
/src/utils/punchFilm.ts:
--------------------------------------------------------------------------------
1 | import { ImageMedia } from '../lib/layeredCanvas/dataModels/media';
2 | import { Film } from '../lib/layeredCanvas/dataModels/film';
3 | import { removeBg } from "../firebase";
4 | import { createCanvasFromImage } from "../lib/layeredCanvas/tools/imageUtil";
5 | import { getAnalytics, logEvent } from "firebase/analytics";
6 |
7 | export async function punchFilm(film: Film) {
8 | const imageMedia = film.media as ImageMedia;
9 | if (!(imageMedia instanceof ImageMedia)) { return; }
10 |
11 | const dataUrl = imageMedia.canvas.toDataURL("image/png");
12 | const r = await removeBg(dataUrl);
13 |
14 | const image = document.createElement('img');
15 | image.src = "data:image/png;base64," + r.result.image;
16 | await image.decode();
17 |
18 | const canvas = createCanvasFromImage(image);
19 | film.media = new ImageMedia(canvas);
20 |
21 | logEvent(getAnalytics(), 'punch');
22 | }
23 |
--------------------------------------------------------------------------------
/src/utils/reactUtil.ts:
--------------------------------------------------------------------------------
1 | import { type Writable } from 'svelte/store';
2 |
3 | export function waitForChange(store: Writable, condition: (value: T) => boolean): Promise {
4 | return new Promise((resolve) => {
5 | const unsubscribe = store.subscribe(value => {
6 | if (condition(value)) {
7 | unsubscribe();
8 | resolve(value);
9 | }
10 | });
11 | });
12 | }
13 |
--------------------------------------------------------------------------------
/src/utils/saver/copyToClipboard.ts:
--------------------------------------------------------------------------------
1 | import type { Page } from '../../lib/book/book';
2 | import { renderPageToBlob } from './renderPage';
3 |
4 | export async function copyToClipboard(page: Page) {
5 | try {
6 | // CanvasをBlobとして取得する
7 | const blob = await renderPageToBlob(page);
8 |
9 | if (blob) {
10 | // BlobをClipboardItemとしてクリップボードに書き込む
11 | await navigator.clipboard.write([
12 | new ClipboardItem({[blob.type]: blob}),
13 | ]);
14 | console.log(`Canvas content copied to clipboard. ${blob.type}`);
15 | } else {
16 | console.error("Failed to copy canvas content to clipboard: Blob is null.");
17 | }
18 | } catch (err) {
19 | console.error("Failed to copy canvas content to clipboard:", err);
20 | }
21 | }
22 |
23 |
--------------------------------------------------------------------------------
/src/utils/saver/exportPrompts.ts:
--------------------------------------------------------------------------------
1 | import { collectLeaves } from '../../lib/layeredCanvas/dataModels/frameTree';
2 | import type { Page } from '../../lib/book/book';
3 |
4 | export async function exportPrompts(pages: Page[]) {
5 | const prompts = [];
6 | for (let i = 0; i < pages.length; i++) {
7 | const leaves = collectLeaves(pages[i].frameTree);
8 | for (const leaf of leaves) {
9 | prompts.push(leaf.prompt);
10 | }
11 | }
12 | const blob = new Blob([prompts.join('\n')], {type: 'text/plain'});
13 | await navigator.clipboard.write([
14 | new ClipboardItem({[blob.type]: blob}),
15 | ]);
16 | }
17 |
--------------------------------------------------------------------------------
/src/utils/saver/postToAiPictors.ts:
--------------------------------------------------------------------------------
1 | import type { Page } from '../../lib/book/book';
2 | import { renderPageToBlob, renderPageToDataUrl } from './renderPage';
3 |
4 | export async function postToAiPictors(page: Page): Promise {
5 | const dataUrl = await renderPageToDataUrl(page);
6 | const blob = new Blob([dataUrl], { type: "text/plain" });
7 | const formData = new FormData();
8 | formData.append("imageData", blob);
9 |
10 | const response = await fetch(
11 | "https://www.aipictors.com/wp-content/themes/AISite/post-img-cache.php",
12 | {
13 | method: 'POST',
14 | body: formData
15 | });
16 |
17 | console.log("postToAiPictors:2");
18 | if (response.ok) {
19 | console.log("postToAiPictors:3");
20 | const data = await response.json();
21 | console.log(data);
22 | if (data.result === "success") {
23 | console.log("postToAiPictors:4");
24 | const nanoid = data.nanoid;
25 | console.log("nanoid:", nanoid);
26 | const newTabUrl = `https://www.aipictors.com/post/?cache=${nanoid}`;
27 | window.open(newTabUrl, "_blank");
28 | } else if (data.result === "oversize") {
29 | throw "画像サイズが大きいです。";
30 | } else if (data.result === "noimage") {
31 | throw "空の画像が送信されました。";
32 | } else {
33 | throw "エラーが発生しました。";
34 | }
35 | console.log("postToAiPictors:5");
36 | } else {
37 | throw "リクエストが失敗しました。";
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/utils/saver/saveAsPng.ts:
--------------------------------------------------------------------------------
1 | import { saveAs } from 'file-saver';
2 | import type { Page } from '../../lib/book/book';
3 | import { renderPageToBlob } from './renderPage';
4 |
5 | export async function saveAsPng(page: Page) {
6 | const png = await renderPageToBlob(page);
7 | saveAs(png, 'comic.png');
8 | }
9 |
--------------------------------------------------------------------------------
/src/utils/saver/saveAsPsd.ts:
--------------------------------------------------------------------------------
1 | import { saveAs } from 'file-saver';
2 | import type { Page } from '../../lib/book/book';
3 | import { renderPageToPsd } from './renderPage';
4 |
5 | export async function saveAsPsd(page: Page) {
6 | const psd = await renderPageToPsd(page);
7 | saveAs(psd, 'comic.psd');
8 | }
9 |
--------------------------------------------------------------------------------
/src/utils/saver/saveAsZip.ts:
--------------------------------------------------------------------------------
1 | import { saveAs } from 'file-saver';
2 | import JSZip from 'jszip';
3 | import type { Page } from '../../lib/book/book';
4 | import { renderPageToBlob, renderPageToPsd } from './renderPage';
5 |
6 | export async function makeZip(pages: Page[], render: (page: Page) => Promise, ext: string): Promise {
7 | const zip = new JSZip();
8 | const folder = zip.folder('book')!;
9 |
10 | for (let i = 0; i < pages.length; i++) {
11 | const pic = await render(pages[i]);
12 | folder.file(`page-${i+1}.${ext}`, pic);
13 | }
14 |
15 | const zipFile = await zip.generateAsync({type: 'blob'});
16 | return zipFile;
17 | }
18 |
19 | export async function saveAsPngZip(pages: Page[]) {
20 | const zipFile = await makeZip(pages, renderPageToBlob, 'png');
21 | saveAs(zipFile, `book.zip`);
22 | }
23 |
24 | export async function saveAsPsdZip(pages: Page[]) {
25 | const zipFile = await makeZip(pages, renderPageToPsd, 'psd');
26 | saveAs(zipFile, `book.psd.zip`);
27 | }
--------------------------------------------------------------------------------
/src/utils/selection.ts:
--------------------------------------------------------------------------------
1 | export type SelectionInfo = {
2 | selectedText: string;
3 | node: HTMLTextAreaElement | HTMLInputElement;
4 | start: number;
5 | end: number;
6 | hasSelection: boolean;
7 | };
8 |
9 | type SelectionCallback = (info: SelectionInfo) => void;
10 |
11 | type SelectionActionReturn = {
12 | destroy: () => void;
13 | };
14 |
15 | export function selection(
16 | node: HTMLTextAreaElement | HTMLInputElement,
17 | callback: SelectionCallback
18 | ): SelectionActionReturn {
19 | const handleSelection = () => {
20 | const start = node.selectionStart ?? 0;
21 | const end = node.selectionEnd ?? 0;
22 | const hasSelection = start !== end;
23 |
24 | const info: SelectionInfo = {
25 | selectedText: hasSelection ? node.value.substring(start, end) : '',
26 | node,
27 | start,
28 | end,
29 | hasSelection
30 | };
31 |
32 | callback(info);
33 | };
34 |
35 | node.addEventListener('selectionchange', handleSelection);
36 |
37 | return {
38 | destroy() {
39 | node.removeEventListener('selectionchange', handleSelection);
40 | }
41 | };
42 | }
--------------------------------------------------------------------------------
/src/utils/sortableList.ts:
--------------------------------------------------------------------------------
1 | import Sortable from 'sortablejs';
2 | import type { Options } from 'sortablejs';
3 |
4 | export type { SortableEvent } from 'sortablejs';
5 |
6 | export function sortableList(node: HTMLElement, options: Partial = {}) {
7 | let sortableInstance: Sortable;
8 |
9 | function createSortable() {
10 | sortableInstance = new Sortable(node, options);
11 | }
12 |
13 | function destroySortable() {
14 | if (sortableInstance) {
15 | sortableInstance.destroy();
16 | }
17 | }
18 |
19 | createSortable();
20 |
21 | return {
22 | update(newOptions: Partial) {
23 | destroySortable();
24 | options = { ...options, ...newOptions };
25 | createSortable();
26 | },
27 | destroy() {
28 | destroySortable();
29 | }
30 | };
31 | }
32 |
--------------------------------------------------------------------------------
/src/utils/waitDialog.ts:
--------------------------------------------------------------------------------
1 | import { type ModalSettings, modalStore } from '@skeletonlabs/skeleton';
2 |
3 | export async function waitDialog(dialogComponent: string): Promise {
4 | const r = await new Promise((resolve) => {
5 | const d: ModalSettings = {
6 | type: 'component',
7 | component: dialogComponent,
8 | response: resolve,
9 | };
10 | modalStore.trigger(d);
11 | });
12 | return r;
13 | }
14 |
--------------------------------------------------------------------------------
/src/videomaker/FrameResidenceTime.svelte:
--------------------------------------------------------------------------------
1 |
31 |
32 | まんがファーム！
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vitest/config'
2 | import { svelte } from '@sveltejs/vite-plugin-svelte'
3 | import { resolve } from 'path'
4 | import { glob } from 'glob'
5 |
6 | // https://vitejs.dev/config/
7 | export default defineConfig({
8 | build: {
9 | minify: false,
10 | rollupOptions: {
11 | input: {
12 | main: resolve(__dirname, 'index.html'),
13 | ...Object.fromEntries(
14 | glob.sync('ads/**/index.html').map(file => [
15 | file.slice(0, -11), // remove '/index.html'
16 | resolve(__dirname, file)
17 | ])
18 | )
19 | }
20 | },
21 | outDir: 'dist'
22 | },
23 | plugins: [svelte()],
24 | optimizeDeps: {
25 | include: ['paper'],
26 | },
27 | server: {
28 | port: 5173,
29 | proxy: {
30 | '^/farm/?$': {
31 | target: 'http://localhost:5173',
32 | rewrite: (path) => '/farm.html',
33 | },
34 | '^/farm/user/(.*)': {
35 | target: 'http://localhost:5173',
36 | rewrite: (path) => '/farm.html',
37 | },
38 | '^/viewer/(.*)': {
39 | target: 'http://localhost:5001',
40 | rewrite: (path) => `/frameplanner-e5569/us-central1/socialcard/${path.split('/').pop()}`,
41 | }
42 | }
43 | },
44 | test: {
45 | globals: true,
46 | environment: 'jsdom',
47 | include: ['src/**/*.{test,spec,vitest}.{js,ts}'],
48 | setupFiles: ['./test/setup.ts'],
49 | },
50 | })
51 |
--------------------------------------------------------------------------------
29 |
30 |
36 |
37 |
38 | {#each colors as c}
39 |
40 |
41 |
51 |
52 |
--------------------------------------------------------------------------------
/src/painter/FreehandInspectorTaper.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 | color = c}
47 | />
48 | {/each}
49 |
50 |
13 |
14 |
15 |
16 | {#if taper.taper == 0}
17 |
20 | {:else}
21 |
26 |
27 |
34 |
--------------------------------------------------------------------------------
/src/preferences.ts:
--------------------------------------------------------------------------------
1 | import { openDB, type IDBPDatabase } from 'idb';
2 |
3 | const preferencesStores = ["imaging"];
4 | const preferencesVersion = 1;
5 |
6 | let dbPromise: Promise
22 |
23 |
24 | {/if}
25 |
31 | {#if src || gravatarUrl}
32 | 
33 | {:else}
34 |
35 | {initials}
36 |
37 | {/if}
38 |
39 |
40 |
47 |
--------------------------------------------------------------------------------
/src/transfer/MangaFarmDialog.svelte:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 | 
10 |
26 |
27 |
--------------------------------------------------------------------------------
/src/uiStore.ts:
--------------------------------------------------------------------------------
1 | import { writable } from "svelte/store";
2 |
3 | export type DominantMode = "standard" | "painting";
4 | export const dominantMode = writableまんがファーム！ オープン
6 |7 | 新しいまんがコミュニケーションサイト「まんがファーム！」がオープンしました！ 8 |
9 |
10 | 11 | FramePlannerは、「まんがファーム！」の1セクションとして再スタートしています。今まで通り無料、ログインなしで使えます！ 12 |
13 |14 | 旧サイト(このサイト、つまりhttps://frameplanner.online、https://frameplanner-e5569.web.app)は今後更新されませんので、お早めに移行をお願いします。 15 |
16 |17 | 新サイトではすでに、動画埋め込み・フォルダパッケージ・高性能背景除去・アップスケーラー・ページ複製・名簿機能などの新機能を実装済みです。 18 |
19 |20 | いまならプロファイル登録で500Spryt(サイト内通貨)、初投稿で500Sprytを貰えるので、AIまんが生成や動画生成で遊んでみてください！ 21 |
22 |23 | データ移行に関しては、旧サイト（ここ）のツールバーからデータのダンプ、新サイトのツールバーからデータのリストアが可能となっていますので、ぜひご活用ください。 24 |
25 |
25 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/src/utils/Comic.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 | {#each pages as page}
11 |
12 |
13 | 
14 |
15 | {/each}
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/src/utils/DebugOnly.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | {#if $developmentFlag}
6 |
14 |
9 |
10 | Feathral: {feathral}
11 |
12 |
13 |
19 |
--------------------------------------------------------------------------------
/src/utils/FeathralCost.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | {#if showsLabel}
9 | 消費
10 | {/if}
11 |
8 |
18 |
19 |
--------------------------------------------------------------------------------
/src/utils/FullScreenLoading.svelte:
--------------------------------------------------------------------------------
1 |
17 |
--------------------------------------------------------------------------------
/src/utils/FullScreenProgress.svelte:
--------------------------------------------------------------------------------
1 |
23 |
--------------------------------------------------------------------------------
/src/utils/ImageViewer.svelte:
--------------------------------------------------------------------------------
1 |
19 |
20 |
9 |
11 |
13 |
14 |
15 |
16 |
17 | 使用中
10 |リンク切れ
12 |
21 |
22 |
23 |
24 | ![Viewer image]()
31 |
32 |
33 |
--------------------------------------------------------------------------------
/src/utils/JsonReader.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 |
16 |
17 |
24 |
25 |
--------------------------------------------------------------------------------
/src/utils/Loading.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 | {#if $loading}
7 |
18 |
22 |
23 |
19 | {json}
20 |
21 |
8 |
12 | {/if}
13 |
14 |
27 |
--------------------------------------------------------------------------------
/src/utils/Parameter.svelte:
--------------------------------------------------------------------------------
1 |
18 |
19 |
9 |
11 |
20 |
30 |
31 |
--------------------------------------------------------------------------------
/src/utils/PassiveToolTip.svelte:
--------------------------------------------------------------------------------
1 |
38 |
39 |
46 |
57 |
58 |
84 |
--------------------------------------------------------------------------------
/src/utils/Progress.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 | {#if $progress != null}
7 |
47 | {#if $toolTipRequest}
48 | {$toolTipRequest.message}
49 | {#if $toolTipRequest.cost}
50 |
56 |
51 |
52 |
53 | {/if}
54 | {/if}
55 |
8 |
12 | {/if}
13 |
14 |
30 |
--------------------------------------------------------------------------------
/src/utils/SignIn.svelte:
--------------------------------------------------------------------------------
1 |
18 |
19 |
9 |
11 |
20 |
34 |
35 |
--------------------------------------------------------------------------------
/src/utils/SliderEdit.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
21 |
22 |
--------------------------------------------------------------------------------
/src/utils/SpreadCanvas.svelte:
--------------------------------------------------------------------------------
1 |
45 |
46 |
21 |
28 |
29 |
30 | {#if !pending}
31 |
32 | {/if}
33 |
22 | {#if pending}
23 | ログイン処理中……
24 | {/if}
25 |
26 |
27 |
47 |
51 |
52 |
--------------------------------------------------------------------------------
/src/utils/Spreader.svelte:
--------------------------------------------------------------------------------
1 |
31 |
32 |
48 |
49 |
50 |
33 |
34 |
36 |
--------------------------------------------------------------------------------
/src/utils/TreeView.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 | -
18 |
-
19 | {#if tree.children && tree.children.length > 0}
20 |
21 |
22 |
23 | ▶
24 | {tree.label}
25 |
26 | {#if expanded}
27 | {#each tree.children as child}
28 |
24 |
43 |
44 |
50 |
--------------------------------------------------------------------------------
/src/utils/ads/AdPanel.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 |
25 |
26 |
30 |
41 |
42 |
27 |
28 |
29 |
19 |
33 |
34 |
43 |
--------------------------------------------------------------------------------
/src/utils/asyncStore.ts:
--------------------------------------------------------------------------------
1 | import { writable, derived, get } from "svelte/store";
2 |
3 | type AsyncStoreActions
24 |
32 |
28 |
31 | 広告 - クリックすると別のタブが開きます
30 |
22 |
27 |
28 |
--------------------------------------------------------------------------------
/src/utils/colorpicker/colorPickerStore.ts:
--------------------------------------------------------------------------------
1 | import { type Writable, writable } from "svelte/store"
2 |
3 | export type ColorPickerCall = {
4 | position: {x: number, y: number};
5 | color: string;
6 | onUpdate: (color: string) => void;
7 | }
8 |
9 | export const colorPickerStore: Writable
23 |
26 |
24 |
25 |
33 |
43 |
44 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
34 | Frame {index}
35 |
36 |
37 |
42 |
39 |
40 |
41 |