From eb7d4998cad04e81a558874732ee4a02a4a12d64 Mon Sep 17 00:00:00 2001 From: Cahleeb Date: Thu, 13 Jul 2023 08:55:45 -0700 Subject: [PATCH 01/33] Roughing out verseOnImage divs --- .../components/TextSelectionToolbar.svelte | 8 +- src/lib/components/VerseOnImage.svelte | 139 ++++++++++++++++++ src/lib/data/stores/view.js | 1 + src/routes/+layout.svelte | 12 +- 4 files changed, 157 insertions(+), 3 deletions(-) create mode 100644 src/lib/components/VerseOnImage.svelte diff --git a/src/lib/components/TextSelectionToolbar.svelte b/src/lib/components/TextSelectionToolbar.svelte index c4326dca8..702730bd1 100644 --- a/src/lib/components/TextSelectionToolbar.svelte +++ b/src/lib/components/TextSelectionToolbar.svelte @@ -35,7 +35,8 @@ TODO: themeColors, highlights, bookmarks, - audioActive + audioActive, + MODAL_VERSE_ON_IMAGE } from '$lib/data/stores'; import toast, { Toaster } from 'svelte-french-toast'; import { addBookmark, findBookmark, removeBookmark } from '$lib/data/bookmarks'; @@ -198,7 +199,10 @@ TODO: {/if} {#if isTextOnImageEnabled} - {/if} diff --git a/src/lib/components/VerseOnImage.svelte b/src/lib/components/VerseOnImage.svelte new file mode 100644 index 000000000..34a381302 --- /dev/null +++ b/src/lib/components/VerseOnImage.svelte @@ -0,0 +1,139 @@ + + + + + + + + + +
+
+ + + +
+
+ +

Editor Content

+
+
+ + + + + + + + + + + + + +
+
+ + + + + + diff --git a/src/lib/data/stores/view.js b/src/lib/data/stores/view.js index 85f96a307..e5825a240 100644 --- a/src/lib/data/stores/view.js +++ b/src/lib/data/stores/view.js @@ -24,6 +24,7 @@ export const MODAL_COLLECTION = 'collection'; export const MODAL_NOTE = 'note'; export const MODAL_TEXT_APPERANCE = 'text-appearance'; export const MODAL_FONT = 'font'; +export const MODAL_VERSE_ON_IMAGE = 'verse-on-image'; function createModal() { const { subscribe, set } = writable([]); diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 42872aa64..ea06a3a8c 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -10,7 +10,9 @@ MODAL_NOTE, MODAL_TEXT_APPERANCE, NAVBAR_HEIGHT, - MODAL_FONT + MODAL_FONT, + MODAL_VERSE_ON_IMAGE, + NAVBAR_HEIGHT } from '$lib/data/stores'; import { base } from '$app/paths'; import '$lib/app.css'; @@ -18,6 +20,7 @@ import CollectionSelector from '$lib/components/CollectionSelector.svelte'; import NoteDialog from '$lib/components/NoteDialog.svelte'; import FontSelector from '$lib/components/FontSelector.svelte'; + import VerseOnImage from '$lib/components/VerseOnImage.svelte'; $: $modal, showModal(); @@ -38,6 +41,9 @@ case MODAL_FONT: fontSelector.showModal(); break; + case MODAL_VERSE_ON_IMAGE: + verseOnImage.showModal(); + break; } }); modal.clear(); @@ -48,6 +54,7 @@ let collectionSelector; let fontSelector; let noteDialog; + let verseOnImage; @@ -70,6 +77,9 @@ + + + From f8af754776a2fdc00082a9438be223e817f2e473 Mon Sep 17 00:00:00 2001 From: Cahleeb Date: Thu, 13 Jul 2023 09:36:14 -0700 Subject: [PATCH 02/33] Fixed modal size (made fullscreen) and un-rounded corners --- src/lib/components/VerseOnImage.svelte | 4 +- ...s.timestamp-1689265782083-934aea1ea46f.mjs | 72 +++++++++++++++++++ 2 files changed, 74 insertions(+), 2 deletions(-) create mode 100644 vite.config.js.timestamp-1689265782083-934aea1ea46f.mjs diff --git a/src/lib/components/VerseOnImage.svelte b/src/lib/components/VerseOnImage.svelte index 34a381302..e923559bf 100644 --- a/src/lib/components/VerseOnImage.svelte +++ b/src/lib/components/VerseOnImage.svelte @@ -64,12 +64,12 @@ The verse on image component. - +
-
+
diff --git a/vite.config.js.timestamp-1689265782083-934aea1ea46f.mjs b/vite.config.js.timestamp-1689265782083-934aea1ea46f.mjs new file mode 100644 index 000000000..3b33f5767 --- /dev/null +++ b/vite.config.js.timestamp-1689265782083-934aea1ea46f.mjs @@ -0,0 +1,72 @@ +// vite.config.js +import { sveltekit } from "file:///C:/Users/caleb/Documents/GitHub/Wycliffe%20Repos/appbuilder-pwa/node_modules/@sveltejs/kit/src/exports/vite/index.js"; +import { NodeGlobalsPolyfillPlugin } from "file:///C:/Users/caleb/Documents/GitHub/Wycliffe%20Repos/appbuilder-pwa/node_modules/@esbuild-plugins/node-globals-polyfill/dist/index.js"; +import { NodeModulesPolyfillPlugin } from "file:///C:/Users/caleb/Documents/GitHub/Wycliffe%20Repos/appbuilder-pwa/node_modules/@esbuild-plugins/node-modules-polyfill/dist/index.js"; +import rollupNodePolyFill from "file:///C:/Users/caleb/Documents/GitHub/Wycliffe%20Repos/appbuilder-pwa/node_modules/rollup-plugin-node-polyfills/dist/index.js"; +var config = { + plugins: [sveltekit()], + resolve: { + alias: { + // This Rollup aliases are extracted from @esbuild-plugins/node-modules-polyfill, + // see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts + // process and buffer are excluded because already managed + // by node-globals-polyfill + //util: 'rollup-plugin-node-polyfills/polyfills/util', + //sys: 'util', + //events: 'rollup-plugin-node-polyfills/polyfills/events', + stream: "rollup-plugin-node-polyfills/polyfills/stream" + // //path: 'rollup-plugin-node-polyfills/polyfills/path', + // querystring: 'rollup-plugin-node-polyfills/polyfills/qs', + // punycode: 'rollup-plugin-node-polyfills/polyfills/punycode', + // url: 'rollup-plugin-node-polyfills/polyfills/url', + // string_decoder: 'rollup-plugin-node-polyfills/polyfills/string-decoder', + // http: 'rollup-plugin-node-polyfills/polyfills/http', + // https: 'rollup-plugin-node-polyfills/polyfills/http', + // os: 'rollup-plugin-node-polyfills/polyfills/os', + // assert: 'rollup-plugin-node-polyfills/polyfills/assert', + // constants: 'rollup-plugin-node-polyfills/polyfills/constants', + // _stream_duplex: 'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex', + // _stream_passthrough: + // 'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough', + // _stream_readable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/readable', + // _stream_writable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/writable', + // _stream_transform: 'rollup-plugin-node-polyfills/polyfills/readable-stream/transform', + // timers: 'rollup-plugin-node-polyfills/polyfills/timers', + // console: 'rollup-plugin-node-polyfills/polyfills/console', + // vm: 'rollup-plugin-node-polyfills/polyfills/vm', + // zlib: 'rollup-plugin-node-polyfills/polyfills/zlib', + // tty: 'rollup-plugin-node-polyfills/polyfills/tty', + // domain: 'rollup-plugin-node-polyfills/polyfills/domain' + } + }, + optimizeDeps: { + esbuildOptions: { + // Node.js global to browser globalThis + define: { + global: "globalThis" + }, + // Enable esbuild polyfill plugins + plugins: [ + NodeGlobalsPolyfillPlugin({ + process: true, + buffer: true + }), + NodeModulesPolyfillPlugin() + ] + } + }, + build: { + rollupOptions: { + plugins: [ + // Enable rollup polyfills plugin + // used during production bundling + rollupNodePolyFill() + ] + } + } +}; +var vite_config_default = config; +export { + vite_config_default as default +}; +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFxjYWxlYlxcXFxEb2N1bWVudHNcXFxcR2l0SHViXFxcXFd5Y2xpZmZlIFJlcG9zXFxcXGFwcGJ1aWxkZXItcHdhXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFxjYWxlYlxcXFxEb2N1bWVudHNcXFxcR2l0SHViXFxcXFd5Y2xpZmZlIFJlcG9zXFxcXGFwcGJ1aWxkZXItcHdhXFxcXHZpdGUuY29uZmlnLmpzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9DOi9Vc2Vycy9jYWxlYi9Eb2N1bWVudHMvR2l0SHViL1d5Y2xpZmZlJTIwUmVwb3MvYXBwYnVpbGRlci1wd2Evdml0ZS5jb25maWcuanNcIjsvLyB2aXRlLmNvbmZpZy5qc1xuaW1wb3J0IHsgc3ZlbHRla2l0IH0gZnJvbSAnQHN2ZWx0ZWpzL2tpdC92aXRlJztcbi8vIHBvbHlmaWxsIGNvZGUgc291cmNlZCBmcm9tOiBodHRwczovL21lZGl1bS5jb20vQGZ0YWlvbGkvdXNpbmctbm9kZS1qcy1idWlsdGluLW1vZHVsZXMtd2l0aC12aXRlLTYxOTQ3MzdjMmNkMlxuLy8geWFybiBhZGQgLS1kZXYgQGVzYnVpbGQtcGx1Z2lucy9ub2RlLWdsb2JhbHMtcG9seWZpbGxcbmltcG9ydCB7IE5vZGVHbG9iYWxzUG9seWZpbGxQbHVnaW4gfSBmcm9tICdAZXNidWlsZC1wbHVnaW5zL25vZGUtZ2xvYmFscy1wb2x5ZmlsbCc7XG4vLyB5YXJuIGFkZCAtLWRldiBAZXNidWlsZC1wbHVnaW5zL25vZGUtbW9kdWxlcy1wb2x5ZmlsbFxuaW1wb3J0IHsgTm9kZU1vZHVsZXNQb2x5ZmlsbFBsdWdpbiB9IGZyb20gJ0Blc2J1aWxkLXBsdWdpbnMvbm9kZS1tb2R1bGVzLXBvbHlmaWxsJztcbi8vIFlvdSBkb24ndCBuZWVkIHRvIGFkZCB0aGlzIHRvIGRlcHMsIGl0J3MgaW5jbHVkZWQgYnkgQGVzYnVpbGQtcGx1Z2lucy9ub2RlLW1vZHVsZXMtcG9seWZpbGxcbmltcG9ydCByb2xsdXBOb2RlUG9seUZpbGwgZnJvbSAncm9sbHVwLXBsdWdpbi1ub2RlLXBvbHlmaWxscyc7XG5cbi8qKiBAdHlwZSB7aW1wb3J0KCd2aXRlJykuVXNlckNvbmZpZ30gKi9cbmNvbnN0IGNvbmZpZyA9IHtcbiAgICBwbHVnaW5zOiBbc3ZlbHRla2l0KCldLFxuICAgIHJlc29sdmU6IHtcbiAgICAgICAgYWxpYXM6IHtcbiAgICAgICAgICAgIC8vIFRoaXMgUm9sbHVwIGFsaWFzZXMgYXJlIGV4dHJhY3RlZCBmcm9tIEBlc2J1aWxkLXBsdWdpbnMvbm9kZS1tb2R1bGVzLXBvbHlmaWxsLFxuICAgICAgICAgICAgLy8gc2VlIGh0dHBzOi8vZ2l0aHViLmNvbS9yZW1vcnNlcy9lc2J1aWxkLXBsdWdpbnMvYmxvYi9tYXN0ZXIvbm9kZS1tb2R1bGVzLXBvbHlmaWxsL3NyYy9wb2x5ZmlsbHMudHNcbiAgICAgICAgICAgIC8vIHByb2Nlc3MgYW5kIGJ1ZmZlciBhcmUgZXhjbHVkZWQgYmVjYXVzZSBhbHJlYWR5IG1hbmFnZWRcbiAgICAgICAgICAgIC8vIGJ5IG5vZGUtZ2xvYmFscy1wb2x5ZmlsbFxuICAgICAgICAgICAgLy91dGlsOiAncm9sbHVwLXBsdWdpbi1ub2RlLXBvbHlmaWxscy9wb2x5ZmlsbHMvdXRpbCcsXG4gICAgICAgICAgICAvL3N5czogJ3V0aWwnLFxuICAgICAgICAgICAgLy9ldmVudHM6ICdyb2xsdXAtcGx1Z2luLW5vZGUtcG9seWZpbGxzL3BvbHlmaWxscy9ldmVudHMnLFxuICAgICAgICAgICAgc3RyZWFtOiAncm9sbHVwLXBsdWdpbi1ub2RlLXBvbHlmaWxscy9wb2x5ZmlsbHMvc3RyZWFtJ1xuICAgICAgICAgICAgLy8gLy9wYXRoOiAncm9sbHVwLXBsdWdpbi1ub2RlLXBvbHlmaWxscy9wb2x5ZmlsbHMvcGF0aCcsXG4gICAgICAgICAgICAvLyBxdWVyeXN0cmluZzogJ3JvbGx1cC1wbHVnaW4tbm9kZS1wb2x5ZmlsbHMvcG9seWZpbGxzL3FzJyxcbiAgICAgICAgICAgIC8vIHB1bnljb2RlOiAncm9sbHVwLXBsdWdpbi1ub2RlLXBvbHlmaWxscy9wb2x5ZmlsbHMvcHVueWNvZGUnLFxuICAgICAgICAgICAgLy8gdXJsOiAncm9sbHVwLXBsdWdpbi1ub2RlLXBvbHlmaWxscy9wb2x5ZmlsbHMvdXJsJyxcbiAgICAgICAgICAgIC8vIHN0cmluZ19kZWNvZGVyOiAncm9sbHVwLXBsdWdpbi1ub2RlLXBvbHlmaWxscy9wb2x5ZmlsbHMvc3RyaW5nLWRlY29kZXInLFxuICAgICAgICAgICAgLy8gaHR0cDogJ3JvbGx1cC1wbHVnaW4tbm9kZS1wb2x5ZmlsbHMvcG9seWZpbGxzL2h0dHAnLFxuICAgICAgICAgICAgLy8gaHR0cHM6ICdyb2xsdXAtcGx1Z2luLW5vZGUtcG9seWZpbGxzL3BvbHlmaWxscy9odHRwJyxcbiAgICAgICAgICAgIC8vIG9zOiAncm9sbHVwLXBsdWdpbi1ub2RlLXBvbHlmaWxscy9wb2x5ZmlsbHMvb3MnLFxuICAgICAgICAgICAgLy8gYXNzZXJ0OiAncm9sbHVwLXBsdWdpbi1ub2RlLXBvbHlmaWxscy9wb2x5ZmlsbHMvYXNzZXJ0JyxcbiAgICAgICAgICAgIC8vIGNvbnN0YW50czogJ3JvbGx1cC1wbHVnaW4tbm9kZS1wb2x5ZmlsbHMvcG9seWZpbGxzL2NvbnN0YW50cycsXG4gICAgICAgICAgICAvLyBfc3RyZWFtX2R1cGxleDogJ3JvbGx1cC1wbHVnaW4tbm9kZS1wb2x5ZmlsbHMvcG9seWZpbGxzL3JlYWRhYmxlLXN0cmVhbS9kdXBsZXgnLFxuICAgICAgICAgICAgLy8gX3N0cmVhbV9wYXNzdGhyb3VnaDpcbiAgICAgICAgICAgIC8vICAgICAncm9sbHVwLXBsdWdpbi1ub2RlLXBvbHlmaWxscy9wb2x5ZmlsbHMvcmVhZGFibGUtc3RyZWFtL3Bhc3N0aHJvdWdoJyxcbiAgICAgICAgICAgIC8vIF9zdHJlYW1fcmVhZGFibGU6ICdyb2xsdXAtcGx1Z2luLW5vZGUtcG9seWZpbGxzL3BvbHlmaWxscy9yZWFkYWJsZS1zdHJlYW0vcmVhZGFibGUnLFxuICAgICAgICAgICAgLy8gX3N0cmVhbV93cml0YWJsZTogJ3JvbGx1cC1wbHVnaW4tbm9kZS1wb2x5ZmlsbHMvcG9seWZpbGxzL3JlYWRhYmxlLXN0cmVhbS93cml0YWJsZScsXG4gICAgICAgICAgICAvLyBfc3RyZWFtX3RyYW5zZm9ybTogJ3JvbGx1cC1wbHVnaW4tbm9kZS1wb2x5ZmlsbHMvcG9seWZpbGxzL3JlYWRhYmxlLXN0cmVhbS90cmFuc2Zvcm0nLFxuICAgICAgICAgICAgLy8gdGltZXJzOiAncm9sbHVwLXBsdWdpbi1ub2RlLXBvbHlmaWxscy9wb2x5ZmlsbHMvdGltZXJzJyxcbiAgICAgICAgICAgIC8vIGNvbnNvbGU6ICdyb2xsdXAtcGx1Z2luLW5vZGUtcG9seWZpbGxzL3BvbHlmaWxscy9jb25zb2xlJyxcbiAgICAgICAgICAgIC8vIHZtOiAncm9sbHVwLXBsdWdpbi1ub2RlLXBvbHlmaWxscy9wb2x5ZmlsbHMvdm0nLFxuICAgICAgICAgICAgLy8gemxpYjogJ3JvbGx1cC1wbHVnaW4tbm9kZS1wb2x5ZmlsbHMvcG9seWZpbGxzL3psaWInLFxuICAgICAgICAgICAgLy8gdHR5OiAncm9sbHVwLXBsdWdpbi1ub2RlLXBvbHlmaWxscy9wb2x5ZmlsbHMvdHR5JyxcbiAgICAgICAgICAgIC8vIGRvbWFpbjogJ3JvbGx1cC1wbHVnaW4tbm9kZS1wb2x5ZmlsbHMvcG9seWZpbGxzL2RvbWFpbidcbiAgICAgICAgfVxuICAgIH0sXG4gICAgb3B0aW1pemVEZXBzOiB7XG4gICAgICAgIGVzYnVpbGRPcHRpb25zOiB7XG4gICAgICAgICAgICAvLyBOb2RlLmpzIGdsb2JhbCB0byBicm93c2VyIGdsb2JhbFRoaXNcbiAgICAgICAgICAgIGRlZmluZToge1xuICAgICAgICAgICAgICAgIGdsb2JhbDogJ2dsb2JhbFRoaXMnXG4gICAgICAgICAgICB9LFxuICAgICAgICAgICAgLy8gRW5hYmxlIGVzYnVpbGQgcG9seWZpbGwgcGx1Z2luc1xuICAgICAgICAgICAgcGx1Z2luczogW1xuICAgICAgICAgICAgICAgIE5vZGVHbG9iYWxzUG9seWZpbGxQbHVnaW4oe1xuICAgICAgICAgICAgICAgICAgICBwcm9jZXNzOiB0cnVlLFxuICAgICAgICAgICAgICAgICAgICBidWZmZXI6IHRydWVcbiAgICAgICAgICAgICAgICB9KSxcbiAgICAgICAgICAgICAgICBOb2RlTW9kdWxlc1BvbHlmaWxsUGx1Z2luKClcbiAgICAgICAgICAgIF1cbiAgICAgICAgfVxuICAgIH0sXG4gICAgYnVpbGQ6IHtcbiAgICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICAgICAgcGx1Z2luczogW1xuICAgICAgICAgICAgICAgIC8vIEVuYWJsZSByb2xsdXAgcG9seWZpbGxzIHBsdWdpblxuICAgICAgICAgICAgICAgIC8vIHVzZWQgZHVyaW5nIHByb2R1Y3Rpb24gYnVuZGxpbmdcbiAgICAgICAgICAgICAgICByb2xsdXBOb2RlUG9seUZpbGwoKVxuICAgICAgICAgICAgXVxuICAgICAgICB9XG4gICAgfVxufTtcbmV4cG9ydCBkZWZhdWx0IGNvbmZpZztcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFDQSxTQUFTLGlCQUFpQjtBQUcxQixTQUFTLGlDQUFpQztBQUUxQyxTQUFTLGlDQUFpQztBQUUxQyxPQUFPLHdCQUF3QjtBQUcvQixJQUFNLFNBQVM7QUFBQSxFQUNYLFNBQVMsQ0FBQyxVQUFVLENBQUM7QUFBQSxFQUNyQixTQUFTO0FBQUEsSUFDTCxPQUFPO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxNQVFILFFBQVE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLElBdUJaO0FBQUEsRUFDSjtBQUFBLEVBQ0EsY0FBYztBQUFBLElBQ1YsZ0JBQWdCO0FBQUE7QUFBQSxNQUVaLFFBQVE7QUFBQSxRQUNKLFFBQVE7QUFBQSxNQUNaO0FBQUE7QUFBQSxNQUVBLFNBQVM7QUFBQSxRQUNMLDBCQUEwQjtBQUFBLFVBQ3RCLFNBQVM7QUFBQSxVQUNULFFBQVE7QUFBQSxRQUNaLENBQUM7QUFBQSxRQUNELDBCQUEwQjtBQUFBLE1BQzlCO0FBQUEsSUFDSjtBQUFBLEVBQ0o7QUFBQSxFQUNBLE9BQU87QUFBQSxJQUNILGVBQWU7QUFBQSxNQUNYLFNBQVM7QUFBQTtBQUFBO0FBQUEsUUFHTCxtQkFBbUI7QUFBQSxNQUN2QjtBQUFBLElBQ0o7QUFBQSxFQUNKO0FBQ0o7QUFDQSxJQUFPLHNCQUFROyIsCiAgIm5hbWVzIjogW10KfQo= From 6d5f96395316535872526c00afe6519a7414c2a4 Mon Sep 17 00:00:00 2001 From: Cahleeb Date: Thu, 13 Jul 2023 14:28:08 -0700 Subject: [PATCH 03/33] Reimplemented verse on image as a route rather than modal --- .../components/TextSelectionToolbar.svelte | 10 +- src/lib/components/VerseOnImage.svelte | 153 ++++++++---------- src/routes/+layout.svelte | 1 - src/routes/verse-on-image/+page.js | 4 + src/routes/verse-on-image/+page.svelte | 21 +++ 5 files changed, 100 insertions(+), 89 deletions(-) create mode 100644 src/routes/verse-on-image/+page.js create mode 100644 src/routes/verse-on-image/+page.svelte diff --git a/src/lib/components/TextSelectionToolbar.svelte b/src/lib/components/TextSelectionToolbar.svelte index 702730bd1..821fb11f4 100644 --- a/src/lib/components/TextSelectionToolbar.svelte +++ b/src/lib/components/TextSelectionToolbar.svelte @@ -35,8 +35,7 @@ TODO: themeColors, highlights, bookmarks, - audioActive, - MODAL_VERSE_ON_IMAGE + audioActive } from '$lib/data/stores'; import toast, { Toaster } from 'svelte-french-toast'; import { addBookmark, findBookmark, removeBookmark } from '$lib/data/bookmarks'; @@ -199,12 +198,13 @@ TODO: {/if} {#if isTextOnImageEnabled} - + {/if} {#if isHighlightEnabled} -
-
- -

Editor Content

-
-
- - - - - - - - - - - - - -
-
- - - - +
+
+ + + +
+ +
+ + + + + + + + + + + + +
+ +
+ +

Editor Content

+
+
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index ea06a3a8c..04f977de7 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -9,7 +9,6 @@ MODAL_COLLECTION, MODAL_NOTE, MODAL_TEXT_APPERANCE, - NAVBAR_HEIGHT, MODAL_FONT, MODAL_VERSE_ON_IMAGE, NAVBAR_HEIGHT diff --git a/src/routes/verse-on-image/+page.js b/src/routes/verse-on-image/+page.js new file mode 100644 index 000000000..1aadf0293 --- /dev/null +++ b/src/routes/verse-on-image/+page.js @@ -0,0 +1,4 @@ +/** @type {import('./$types').PageLoad} */ +export async function load() { + return {}; +} diff --git a/src/routes/verse-on-image/+page.svelte b/src/routes/verse-on-image/+page.svelte new file mode 100644 index 000000000..1dcb70566 --- /dev/null +++ b/src/routes/verse-on-image/+page.svelte @@ -0,0 +1,21 @@ + + +
+
+ + + + + +
+ +
+ +
+
From bf71b3c595b5a5140f52ebcd0aae46ce80f30694 Mon Sep 17 00:00:00 2001 From: Cahleeb Date: Thu, 13 Jul 2023 15:28:07 -0700 Subject: [PATCH 04/33] Renamed verse-on-image route to "image" --- src/lib/components/TextSelectionToolbar.svelte | 2 +- src/routes/{verse-on-image => image}/+page.js | 0 src/routes/{verse-on-image => image}/+page.svelte | 0 3 files changed, 1 insertion(+), 1 deletion(-) rename src/routes/{verse-on-image => image}/+page.js (100%) rename src/routes/{verse-on-image => image}/+page.svelte (100%) diff --git a/src/lib/components/TextSelectionToolbar.svelte b/src/lib/components/TextSelectionToolbar.svelte index 821fb11f4..77007d29c 100644 --- a/src/lib/components/TextSelectionToolbar.svelte +++ b/src/lib/components/TextSelectionToolbar.svelte @@ -199,7 +199,7 @@ TODO: {/if} {#if isTextOnImageEnabled} diff --git a/src/routes/verse-on-image/+page.js b/src/routes/image/+page.js similarity index 100% rename from src/routes/verse-on-image/+page.js rename to src/routes/image/+page.js diff --git a/src/routes/verse-on-image/+page.svelte b/src/routes/image/+page.svelte similarity index 100% rename from src/routes/verse-on-image/+page.svelte rename to src/routes/image/+page.svelte From dbfa47d82cf63c233132a205c37b9513bc9b1ccc Mon Sep 17 00:00:00 2001 From: Cahleeb Date: Mon, 24 Jul 2023 13:51:01 -0700 Subject: [PATCH 05/33] Implemented scroll-snap functionality for editors. --- src/lib/components/VerseOnImage.svelte | 190 +++++++++++++++++++++---- 1 file changed, 164 insertions(+), 26 deletions(-) diff --git a/src/lib/components/VerseOnImage.svelte b/src/lib/components/VerseOnImage.svelte index 878ff675d..a0429d6fc 100644 --- a/src/lib/components/VerseOnImage.svelte +++ b/src/lib/components/VerseOnImage.svelte @@ -15,6 +15,7 @@ The verse on image component. themeColors, selectedVerses } from '$lib/data/stores'; + import { base } from '$app/paths'; import config from '$lib/data/config'; $: barColor = $themeColors['SliderBarColor']; @@ -24,11 +25,29 @@ The verse on image component. $: verses = $selectedVerses.reduce((text, v) => (text += v.text), ''); let cnv; + let cnv_text = $selectedVerses.reduce((text, v) => (text += v.text), ''); + let cnv_font = '30px Comic Sans MS'; + let cnv_color = 'red'; + // $: cnv_font_w = cnv.width / 2; + // $: cnv_font_h = cnv.height / 2; + onMount(() => { - const canvas = cnv.getContext('2d'); - canvas.fillStyle = 'red'; - canvas.fillRect(0, 0, cnv.width, cnv.height); - // put verses here + const context = cnv.getContext('2d'); + + // /*DEBUG*/ context.fillStyle = 'yellow'; + // /*DEBUG*/ context.fillRect(0, 0, cnv.width, cnv.height); + + var background = new Image(); + background.src = base + '/backgrounds/aaron-burden-6jYoil2GhVk-unsplash-1080.jpg'; + + // Make sure the image is loaded first otherwise nothing will draw. + background.onload = function () { + context.drawImage(background, 0, 0, cnv.width, cnv.height); + context.font = cnv_font; + context.fillStyle = cnv_color; + context.textAlign = 'center'; + context.fillText(cnv_text, cnv.width / 2, cnv.height / 2); + }; }); function shareCanvas() { @@ -54,10 +73,46 @@ The verse on image component. } }); } + + let active_editor_index = -1; + + function centerButton(n) { + const container = document.getElementById('editorTabs'); + const containerRect = container.getBoundingClientRect(); + const buttons = document.querySelectorAll('#editorTabs button'); + const button = n >= 0 && n < buttons.length ? buttons[n] : null; + const buttonRect = button.getBoundingClientRect(); + + const scrollOffset = + buttonRect.left - containerRect.left - containerRect.width / 2 + buttonRect.width / 2; + + container.scrollBy({ left: scrollOffset, behavior: 'smooth' }); + + let carousel = document.getElementById('editorsPane'); + const editors = carousel.children; // document.querySelectorAll('#editorsPane div');// Get the carousel's children. + if (n < editors.length) { + const itemWidth = editors[0].offsetWidth; // Calculate the width of each carousel item + + const scrollDistance = n * itemWidth; // Calculate the total scroll distance to reach the nth child + + carousel.scrollTo({ left: scrollDistance, behavior: 'smooth' }); // Scroll the carousel to the desired position + } else { + console.error('Invalid child index'); + } + + // Remove the activeButton class from all buttons + buttons.forEach((btn) => { + btn.classList.remove('activeButton'); + }); + + // Set the clicked button as the activeButton + active_editor_index = n; + button.classList.add('activeButton'); + }
-
+
@@ -69,44 +124,123 @@ The verse on image component. style="border: 2px solid teal; overflow-x:scroll;" > - - - - - - - - - - -
-
- -

Editor Content

+ +
@@ -123,4 +257,8 @@ The verse on image component. #editorTabs { scrollbar-width: none; } + + #editorTabs button.activeButton { + border-bottom: 2px solid black; + } From e79b11e47a0443d1276d32dc61ecadbde98ab41b Mon Sep 17 00:00:00 2001 From: Cahleeb Date: Thu, 27 Jul 2023 10:29:29 -0700 Subject: [PATCH 06/33] Implemented render function, stylized, moved share button to navbar --- .../components/TextSelectionToolbar.svelte | 1 + src/lib/components/VerseOnImage.svelte | 203 +++++++++++------- src/routes/image/+page.svelte | 18 +- 3 files changed, 143 insertions(+), 79 deletions(-) diff --git a/src/lib/components/TextSelectionToolbar.svelte b/src/lib/components/TextSelectionToolbar.svelte index 77007d29c..50ae9bb3d 100644 --- a/src/lib/components/TextSelectionToolbar.svelte +++ b/src/lib/components/TextSelectionToolbar.svelte @@ -43,6 +43,7 @@ TODO: import { shareText, shareImage } from '$lib/data/share'; import { base } from '$app/paths'; import { play, seekToVerse } from '$lib/data/audio'; + const isAudioPlayable = config?.mainFeatures['text-select-play-audio']; const isRepeatableAudio = config?.mainFeatures['audio-repeat-selection-button']; const isTextOnImageEnabled = config?.mainFeatures['text-on-image']; diff --git a/src/lib/components/VerseOnImage.svelte b/src/lib/components/VerseOnImage.svelte index a0429d6fc..fed277761 100644 --- a/src/lib/components/VerseOnImage.svelte +++ b/src/lib/components/VerseOnImage.svelte @@ -5,7 +5,8 @@ The verse on image component. -
-
+
+
- - +
-
+
- -
@@ -200,51 +231,61 @@ The verse on image component.
diff --git a/src/routes/image/+page.svelte b/src/routes/image/+page.svelte index 1dcb70566..31bc8bf19 100644 --- a/src/routes/image/+page.svelte +++ b/src/routes/image/+page.svelte @@ -2,6 +2,14 @@ import Navbar from '$lib/components/Navbar.svelte'; import VerseOnImage from '$lib/components/VerseOnImage.svelte'; import { t } from '$lib/data/stores'; + import { ShareIcon } from '$lib/icons'; + let verseOnImage_Component; + function share() { + console.log('Share Called'); + if (verseOnImage_Component) { + verseOnImage_Component.shareCanvas(); // Call the exported function from the VerseOnImage component + } + }
@@ -11,11 +19,15 @@ - +
+ +
-
- +
+
From 372b99859fcbfbe71b9171c49bef8d3ac1273c6e Mon Sep 17 00:00:00 2001 From: Cahleeb Date: Sat, 29 Jul 2023 21:54:00 -0700 Subject: [PATCH 07/33] Fixed uses of cnv_text and verses vars. --- src/lib/components/VerseOnImage.svelte | 24 +++--------------------- 1 file changed, 3 insertions(+), 21 deletions(-) diff --git a/src/lib/components/VerseOnImage.svelte b/src/lib/components/VerseOnImage.svelte index fed277761..dd5d7395d 100644 --- a/src/lib/components/VerseOnImage.svelte +++ b/src/lib/components/VerseOnImage.svelte @@ -30,7 +30,6 @@ The verse on image component. $: cnvFullScreen = $windowSize.width < 450; let cnv; - /*DEBUG*/ console.log('v=' + verses); let cnv_background; let cnv_text; let cnv_font = '30px Comic Sans MS'; @@ -53,7 +52,9 @@ The verse on image component. } onMount(async () => { - cnv_text = await selectedVerses.getCompositeText(); + verses = await selectedVerses.getCompositeText(); + cnv_text = verses; + /*DEBUG*/ console.log('v=' + verses); var background = new Image(); background.src = base + '/backgrounds/aaron-burden-6jYoil2GhVk-unsplash-1080.jpg'; @@ -70,26 +71,7 @@ The verse on image component. export function shareCanvas() { cnv.toBlob((blob) => { const file = new File([blob], reference + '.png', { type: 'image/png' }); - shareImage(reference, verses, reference + '.png', file); - - // if (navigator.share) { - // navigator - // .share({ - // title: reference, - // text: verses, - // files: [file] - // }) - // .then(() => { - // console.log('Successfully shared'); - // }) - // .catch((error) => { - // console.error('Error sharing:', error); - // }); - // } else { - // // Handle browser that does not support Web Share API - // console.log('Web Share API is not supported in this browser'); - // } }); } From 4df632ea4a436f8874f8167e448d4f7d792274e6 Mon Sep 17 00:00:00 2001 From: Cahleeb Date: Thu, 10 Aug 2023 13:16:18 -0700 Subject: [PATCH 08/33] Got text roughly working. Look into html-to-canvas next --- src/lib/components/VerseOnImage.svelte | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/lib/components/VerseOnImage.svelte b/src/lib/components/VerseOnImage.svelte index dd5d7395d..e238dbc60 100644 --- a/src/lib/components/VerseOnImage.svelte +++ b/src/lib/components/VerseOnImage.svelte @@ -32,8 +32,9 @@ The verse on image component. let cnv_background; let cnv_text; - let cnv_font = '30px Comic Sans MS'; - let cnv_color = 'red'; + let cnv_font_size = 30; + $: cnv_font = cnv_font_size + 'px Comic Sans MS'; + let cnv_color = 'white'; $: render(cnv_background, cnv_text, cnv_font, cnv_color); @@ -46,8 +47,15 @@ The verse on image component. context.textAlign = 'center'; const lines = getLines(context, canvas_text, cnv.width); - for (const line in lines) { - context.fillText(line, cnv.width / 2, cnv.height / 2); + /*DEBUG*/ console.log(lines); + let textHeight = cnv_font_size * lines.length; + /*DEBUG*/ console.log('th=', textHeight); + for (const lineIndex in lines) { + let line = lines[lineIndex]; + let lineX = cnv.width / 2; + let lineY = + cnv_font_size + (cnv.height - textHeight) / 2 + Number(lineIndex) * cnv_font_size; + context.fillText(line, lineX, lineY); } } From 20e98be0407e3593055e345ac901110647aa212c Mon Sep 17 00:00:00 2001 From: Cahleeb Date: Fri, 11 Aug 2023 13:04:59 -0700 Subject: [PATCH 09/33] Imported html-to-image's toPng function to use in shareCanvas() --- package-lock.json | 13 ++++++++++ package.json | 3 +++ src/lib/components/VerseOnImage.svelte | 33 ++++++++++++++++++++++---- 3 files changed, 44 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index dc7c516b7..4aa72da2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "appbuilder-pwa", "version": "0.0.1", + "dependencies": { + "html-to-image": "^1.11.11" + }, "devDependencies": { "@esbuild-plugins/node-globals-polyfill": "^0.2.3", "@esbuild-plugins/node-modules-polyfill": "^0.2.2", @@ -4649,6 +4652,11 @@ "node": ">=12" } }, + "node_modules/html-to-image": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz", + "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==" + }, "node_modules/htmlparser2": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz", @@ -12254,6 +12262,11 @@ "whatwg-encoding": "^2.0.0" } }, + "html-to-image": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz", + "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==" + }, "htmlparser2": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz", diff --git a/package.json b/package.json index 5e6042c21..4d9b791de 100644 --- a/package.json +++ b/package.json @@ -61,5 +61,8 @@ }, "volta": { "node": "16.17.0" + }, + "dependencies": { + "html-to-image": "^1.11.11" } } diff --git a/src/lib/components/VerseOnImage.svelte b/src/lib/components/VerseOnImage.svelte index e238dbc60..744961bf9 100644 --- a/src/lib/components/VerseOnImage.svelte +++ b/src/lib/components/VerseOnImage.svelte @@ -21,6 +21,7 @@ The verse on image component. import { shareImage } from '$lib/data/share'; import { base } from '$app/paths'; import config from '$lib/data/config'; + import { toPng } from 'html-to-image'; $: barColor = $themeColors['SliderBarColor']; $: progressColor = $themeColors['SliderProgressColor']; @@ -77,10 +78,31 @@ The verse on image component. }); export function shareCanvas() { - cnv.toBlob((blob) => { - const file = new File([blob], reference + '.png', { type: 'image/png' }); - shareImage(reference, verses, reference + '.png', file); - }); + // // DEFAULT + // cnv.toBlob((blob) => { + // const file = new File([blob], reference + '.png', { type: 'image/png' }); + // shareImage(reference, verses, reference + '.png', file); + // }); + + // USING html-to-image + var node = document.getElementById('verseOnImgPreview'); + + toPng(node) + .then(function (dataUrl) { + fetch(dataUrl) + .then((response) => response.blob()) + .then((blob) => { + // Now you have the Blob and can use it as needed + /*DEBUG*/ console.log(blob); + shareImage(reference, verses, reference + '.png', blob); + }) + .catch((error) => { + console.error('Error fetching data:', error); + }); + }) + .catch(function (error) { + console.error('oops, something went wrong!', error); + }); } function getLines(ctx, text, maxWidth) { @@ -144,7 +166,7 @@ The verse on image component. style="border:0px solid green;" style:direction={$direction} > -
+
+

PIE

From dfb65f0f9648733ac3459c3adf2c53fc0906f6bc Mon Sep 17 00:00:00 2001 From: Cahleeb Date: Sat, 12 Aug 2023 14:32:03 -0700 Subject: [PATCH 10/33] Working on making voi text draggable. Fix bounds of draggable border next. --- src/lib/components/VerseOnImage.svelte | 128 ++++++++++++++++++++----- 1 file changed, 102 insertions(+), 26 deletions(-) diff --git a/src/lib/components/VerseOnImage.svelte b/src/lib/components/VerseOnImage.svelte index 744961bf9..a4346df1d 100644 --- a/src/lib/components/VerseOnImage.svelte +++ b/src/lib/components/VerseOnImage.svelte @@ -28,41 +28,47 @@ The verse on image component. $: reference = selectedVerses.getCompositeReference(); let verses; + let voi_ParentDiv; $: cnvFullScreen = $windowSize.width < 450; let cnv; let cnv_background; - let cnv_text; - let cnv_font_size = 30; - $: cnv_font = cnv_font_size + 'px Comic Sans MS'; - let cnv_color = 'white'; - - $: render(cnv_background, cnv_text, cnv_font, cnv_color); - - function render(canvas_background, canvas_text, canvas_font, canvas_color) { + // let cnv_text; + let voi_textBox; + $: txtFormatted = verses; + let voi_fontSize = 30; + $: voi_font = voi_fontSize + 'px Comic Sans MS'; + let voi_fontColor = 'white'; + let voi_txtPadding = '0px'; + let voi_textAlign = 'center'; + let voi_textBoxHeight; + let voi_textBoxWidth; + + $: render(cnv_background /*cnv_text, cnv_font, cnv_color*/); + + function render(canvas_background /*canvas_text, canvas_font, canvas_color*/) { if (!cnv || !canvas_background) return; const context = cnv.getContext('2d'); context.drawImage(canvas_background, 0, 0, cnv.width, cnv.height); - context.font = canvas_font; - context.fillStyle = canvas_color; - context.textAlign = 'center'; - - const lines = getLines(context, canvas_text, cnv.width); - /*DEBUG*/ console.log(lines); - let textHeight = cnv_font_size * lines.length; - /*DEBUG*/ console.log('th=', textHeight); - for (const lineIndex in lines) { - let line = lines[lineIndex]; - let lineX = cnv.width / 2; - let lineY = - cnv_font_size + (cnv.height - textHeight) / 2 + Number(lineIndex) * cnv_font_size; - context.fillText(line, lineX, lineY); - } + // context.font = canvas_font; + // context.fillStyle = canvas_color; + // context.textAlign = 'center'; + + // const lines = getLines(context, canvas_text, cnv.width); + // let textHeight = cnv_font_size * lines.length; + // /*DEBUG*/ console.log('th=', textHeight); + // for (const lineIndex in lines) { + // let line = lines[lineIndex]; + // let lineX = cnv.width / 2; + // let lineY = + // cnv_font_size + (cnv.height - textHeight) / 2 + Number(lineIndex) * cnv_font_size; + // context.fillText(line, lineX, lineY); + // } } onMount(async () => { verses = await selectedVerses.getCompositeText(); - cnv_text = verses; + // cnv_text = verses; /*DEBUG*/ console.log('v=' + verses); var background = new Image(); @@ -73,6 +79,8 @@ The verse on image component. cnv_background = background; /*DEBUG*/ console.log('W&H=', cnv.width, cnv.height); }; + voi_textBoxHeight = voi_ParentDiv.clientHeight * 0.5; + voi_textBoxWidth = voi_ParentDiv.clientWidth * 0.5; centerButton(0); }); @@ -159,6 +167,40 @@ The verse on image component. active_editor_index = n; button.classList.add('activeButton'); } + + let posX = 0; //voi_textPosX + let posY = 0; //voi_textPosY + let dragging = false; + let offsetX, offsetY; + + function handleMouseMove(event) { + if (dragging) { + posX = event.clientX - offsetX; + posY = event.clientY - offsetY; + const newX = event.clientX - offsetX; + const newY = event.clientY - offsetY; + + // Prevent child div from going outside the parent borders + const parentRect = voi_ParentDiv.getBoundingClientRect(); + posX = Math.max(0, Math.min(newX, parentRect.width - voi_textBoxWidth)); + posY = Math.max(0, Math.min(newY, parentRect.height - voi_textBoxHeight)); + } + } + + function handleMouseDown(event) { + dragging = true; + offsetX = event.clientX - posX; // Update offsetX + offsetY = event.clientY - posY; // Update offsetY + + function handleMouseUp() { + dragging = false; + window.removeEventListener('mousemove', handleMouseMove); + window.removeEventListener('mouseup', handleMouseUp); + } + + window.addEventListener('mousemove', handleMouseMove); + window.addEventListener('mouseup', handleMouseUp); + }
-
+
-

PIE

+

handleMouseDown(event.touches[0])} + on:touchmove={(event) => { + event.preventDefault(); + handleMouseMove(event.touches[0]); + }} + on:touchend={() => { + dragging = false; + }} + > + {txtFormatted} +

From fb00635c71bc0b9e5e7c448b2938b251c8281df2 Mon Sep 17 00:00:00 2001 From: Cahleeb Date: Sun, 13 Aug 2023 01:39:33 -0700 Subject: [PATCH 11/33] Implementing voi still. Fix textSize slider allowing too large of textbox next --- src/lib/components/VerseOnImage.svelte | 147 +++++++++++++------------ 1 file changed, 75 insertions(+), 72 deletions(-) diff --git a/src/lib/components/VerseOnImage.svelte b/src/lib/components/VerseOnImage.svelte index a4346df1d..ae8d49330 100644 --- a/src/lib/components/VerseOnImage.svelte +++ b/src/lib/components/VerseOnImage.svelte @@ -26,50 +26,44 @@ The verse on image component. $: barColor = $themeColors['SliderBarColor']; $: progressColor = $themeColors['SliderProgressColor']; + $: viewportWidth_in_px = Math.max( + document.documentElement.clientWidth || 0, + window.innerWidth || 0 + ); + $: viewportHeight_in_px = Math.max( + document.documentElement.clientHeight || 0, + window.innerHeight || 0 + ); + $: reference = selectedVerses.getCompositeReference(); let verses; - let voi_ParentDiv; + let voi_parentDiv; + $: voi_width = cnvFullScreen ? '100vw' : '50vh'; + $: voi_height = cnvFullScreen ? '100vw' : '50vh'; $: cnvFullScreen = $windowSize.width < 450; let cnv; let cnv_background; - // let cnv_text; let voi_textBox; $: txtFormatted = verses; - let voi_fontSize = 30; + let voi_fontSize = 20; $: voi_font = voi_fontSize + 'px Comic Sans MS'; let voi_fontColor = 'white'; let voi_txtPadding = '0px'; let voi_textAlign = 'center'; - let voi_textBoxHeight; let voi_textBoxWidth; + $: voi_textBox_maxHeight = voi_height - voi_textPosY; - $: render(cnv_background /*cnv_text, cnv_font, cnv_color*/); + $: render(cnv_background); - function render(canvas_background /*canvas_text, canvas_font, canvas_color*/) { + function render(canvas_background) { if (!cnv || !canvas_background) return; const context = cnv.getContext('2d'); context.drawImage(canvas_background, 0, 0, cnv.width, cnv.height); - // context.font = canvas_font; - // context.fillStyle = canvas_color; - // context.textAlign = 'center'; - - // const lines = getLines(context, canvas_text, cnv.width); - // let textHeight = cnv_font_size * lines.length; - // /*DEBUG*/ console.log('th=', textHeight); - // for (const lineIndex in lines) { - // let line = lines[lineIndex]; - // let lineX = cnv.width / 2; - // let lineY = - // cnv_font_size + (cnv.height - textHeight) / 2 + Number(lineIndex) * cnv_font_size; - // context.fillText(line, lineX, lineY); - // } } onMount(async () => { verses = await selectedVerses.getCompositeText(); - // cnv_text = verses; - /*DEBUG*/ console.log('v=' + verses); var background = new Image(); background.src = base + '/backgrounds/aaron-burden-6jYoil2GhVk-unsplash-1080.jpg'; @@ -77,11 +71,8 @@ The verse on image component. // Make sure the image is loaded first otherwise nothing will draw. background.onload = function () { cnv_background = background; - /*DEBUG*/ console.log('W&H=', cnv.width, cnv.height); }; - voi_textBoxHeight = voi_ParentDiv.clientHeight * 0.5; - voi_textBoxWidth = voi_ParentDiv.clientWidth * 0.5; - + /*DEBUG*/ voi_textBoxWidth = voi_parentDiv.clientWidth * 0.75; centerButton(0); }); @@ -168,29 +159,30 @@ The verse on image component. button.classList.add('activeButton'); } - let posX = 0; //voi_textPosX - let posY = 0; //voi_textPosY + let voi_textPosX = 0; + let voi_textPosY = 0; let dragging = false; let offsetX, offsetY; function handleMouseMove(event) { if (dragging) { - posX = event.clientX - offsetX; - posY = event.clientY - offsetY; + voi_textPosX = event.clientX - offsetX; + voi_textPosY = event.clientY - offsetY; const newX = event.clientX - offsetX; const newY = event.clientY - offsetY; // Prevent child div from going outside the parent borders - const parentRect = voi_ParentDiv.getBoundingClientRect(); - posX = Math.max(0, Math.min(newX, parentRect.width - voi_textBoxWidth)); - posY = Math.max(0, Math.min(newY, parentRect.height - voi_textBoxHeight)); + const parentRect = voi_parentDiv.getBoundingClientRect(); + const childRect = voi_textBox.getBoundingClientRect(); + voi_textPosX = Math.max(0, Math.min(newX, parentRect.width - childRect.width)); + voi_textPosY = Math.max(0, Math.min(newY, parentRect.height - childRect.height)); } } function handleMouseDown(event) { dragging = true; - offsetX = event.clientX - posX; // Update offsetX - offsetY = event.clientY - posY; // Update offsetY + offsetX = event.clientX - voi_textPosX; // Update offsetX + offsetY = event.clientY - voi_textPosY; // Update offsetY function handleMouseUp() { dragging = false; @@ -204,56 +196,63 @@ The verse on image component.
-
- - -

+

+ + + + +

handleMouseDown(event.touches[0])} - on:touchmove={(event) => { - event.preventDefault(); - handleMouseMove(event.touches[0]); - }} - on:touchend={() => { - dragging = false; - }} - > - {txtFormatted} -

+ bind:this={voi_textBox} + on:mousedown={handleMouseDown} + on:touchstart={(event) => handleMouseDown(event.touches[0])} + on:touchmove={(event) => { + event.preventDefault(); + handleMouseMove(event.touches[0]); + }} + on:touchend={() => { + dragging = false; + }} + > + {txtFormatted} +

+
-
-
+
-