diff --git a/.gitignore b/.gitignore index e43b0f9..625f0f8 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ .DS_Store +tdw.md \ No newline at end of file diff --git a/.vscode/ltex.hiddenFalsePositives.en-US.txt b/.vscode/ltex.hiddenFalsePositives.en-US.txt new file mode 100644 index 0000000..89ed45f --- /dev/null +++ b/.vscode/ltex.hiddenFalsePositives.en-US.txt @@ -0,0 +1 @@ +{"rule":"REPEATED_VERBS","sentence":"^\\QNote: I only could get it to fully work once I enabled enable in Incognito.\\E$"} diff --git a/README.md b/README.md index a4d486a..2198e92 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,36 @@ + + # Goita > guaitar (first-person singular present guaito, first-person singular preterite guaití, past participle guaitat) @@ -41,6 +74,10 @@ Also, two features I have wanted for a while: ## Features and functionality + + Taken from the extension's help modal. These are the default shortcut keys. - `a`: draw an arrow @@ -48,13 +85,16 @@ Taken from the extension's help modal. These are the default shortcut keys. - `p`: draw an ellipse - `s`: highlight an area - `t`: write text - - `ctrl .`: Make text larger (for this text block) - - `ctrl ,`: Make text smaller (for this text block) - - `ctrl /`: Cycle through fonts (Monoid, Reforma, Inter, Roboto) - - `ctrl + scrollwheel`: Resize the text bounding box - - `ctrl + c`: Center the text + - `ctrl + .`: Make text larger (for this text block) + - `ctrl + ,`: Make text smaller (for this text block) + - `ctrl + /`: Cycle through fonts (Monoid, Reforma, Inter, Roboto) + - `ctrl + wheel`: Resize the text bounding box + - `ctrl + c`: Center the text in the bounding box + - `escape`: will remove focus and selection from the text input - `v`: paste images or text from the clipboard - - `ctrl + scrollwheel`: Resize the pasted image while selected + - `ctrl + wheel`: Resize the pasted image while selected +- `Cmd v` (or `Ctrl v`, your system paste) to paste images from the clipboard + - This is similar to the above. - `k`: clip the screenshot - `drag`: dragging moves the clipped image - `shift+drag`: dragging moves the clipping rectangle @@ -66,7 +106,7 @@ Taken from the extension's help modal. These are the default shortcut keys. - `g`: green - `o`: orange - `w`: white - - `x`: black (and highlight then redacts) + - `x`: black. This makes the highlight tool a redaction tool. - `m`: enter meme selection, it will be placed on the last click and behave as a pasted image - `type`: to dynamically search through the list of memes - `tab`: to display meme thumbnails @@ -79,15 +119,23 @@ Taken from the extension's help modal. These are the default shortcut keys. ## Installation -Download/clone this repository somewhere and load the extension in Chrome via `Extensions -> Load unpacked`. I only could get it to fully work once I enabled "enable in Incognito". If you don't feel like doing that, that's okay. I wrote this for my own use anyway… +- Download/clone this repository somewhere in your local machine. +- Enable 'Developer mode' in Chrome via the main menu, in `Extensions -> Manage Extensions`. +- Load the extension in Chrome via `Extensions -> Load unpacked` at the root (where `manifest.json` and `README.md` are located). More details [here](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked). -## Tests? +## Tests -It is kind of tested, at least the editing functionality, which is the "easiest" to test. I took a leaf out of the development of Weave and added Chai/Mocha in-browser tests. They try to reproduce human behavior by sending browser events. I think it is neat, because I need no headless browser or anything. + -You can see them (in separate iframes) [here](https://mostlymaths.net/goita/tests/). +I took a leaf out of the development of Weave and added Chai.js/Mocha.js in-browser tests. They try to reproduce human behavior by sending browser events, creating arrows, dragging them, etc. I think it is neat, because I need no headless browser or anything heavyweight like that. -If you want to run them locally, start a local web server of some sort in the root folder of the repository (like running `python3 -m http.server 8000`) and open the `tests/` link there. The main index holds several iframes with the individual suites per "functionality" (`arrow`, `rect`, `etc`), you can also open the individual pages instead, or add new ones. +The main `index.html` holds several iframes with the individual suites per "functionality" (`arrow`, `rect`, `etc`), and you can also open the individual pages instead, or add new ones. You can see each test [here](https://mostlymaths.net/goita/tests/). + +If you want to run them locally: + +- Start a local web server of some sort in the root folder of the repository (like running a basic Python web server with `python3 -m http.server 8000`) and +- Open the `tests/` link there. The way the tests work is: @@ -101,26 +149,39 @@ There is no testing of the Chrome specific APIs, because there is little of them - Generating images in `popup.js` when pressing the extension button. - Changing the extension and badge title in `screenshot.js` (behind a try with no catch to let this run in tests out of extension sandboxing). +--- + +The `Taskfile.yml` can be used to run the test-driven writing test for this README. + ## Local development, contributing + + The most straightforward route if you want a feature or change stuff: - Clone this somewhere. - Load unpacked, as if you were to use it (it's assumed you want to). -- Make sure you can run the tests as in the previous section. +- Make sure you can run the tests as in the previous section (this requires running a local web server). - Start changing code and trying changes. If you have a screenshot page (i.e. the one you can draw in after pressing the extension) open, refreshing it loads the most current version of your edited code. As for contributing, this is one of my personal projects, and like many others I have, I have a clear idea of what I want (or a clear idea of what I don't). So this is likely to follow whatever my whim is (in other words, I may reject pull requests for no good reason), but as an open source project, please fork, play with this _and make it your own_. ## Credits -- Icon: Gemini via Imagen 3. -- Gemini helped fight with Chrome permissions, but I ended up having to read (again) too much of its documentation. + + +- Icons: [Google Gemini](https://gemini.google.com) +- Tests use the [chai.js](https://www.chaijs.com/)/[mocha.js](https://mochajs.org/) framework. - Added the following open source fonts: - [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono) - - [Reforma 1969](https://pampatype.com/reforma) (or from [FontSquirrel](https://www.fontsquirrel.com/fonts/reforma) to see the license) + - [Reforma 1969](https://www.fontsquirrel.com/fonts/reforma) - [Inter](https://rsms.me/inter/) - [Monoid](https://larsenwork.com/monoid/) - [Special Elite](https://fonts.google.com/specimen/Special+Elite) - - [BlackCasper](https://www.fontsquirrel.com/fonts/BlackCasper?q%5Bterm%5D=ransom&q%5Bsearch_check%5D=Y) + - [BlackCasper](https://www.fontsquirrel.com/fonts/BlackCasper) - [Chicago Kare](https://chicagokare.xyz/) + + + diff --git a/Taskfile.yml b/Taskfile.yml new file mode 100644 index 0000000..4ffa1b7 --- /dev/null +++ b/Taskfile.yml @@ -0,0 +1,14 @@ +version: "3" + +tasks: + dump: + cmds: + - gotllo -exclude=white.js,mocha.js,chai.js,show.js,memes,testImage.js,tdw README.md src/*.js tests/*.js memes/*.js src/style.css tests/index.html -tree=./ > tdw.md + pbdump: + deps: [dump] + cmds: + - /bin/cat tdw.md | pbcopy + tdw: + deps: [dump] + cmds: + - open https://gemini.google.com diff --git a/manifest.json b/manifest.json index 1b8fcd3..1d651d5 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 3, "name": "Goita", "description": "Take a screenshot, add arrows and sh*t as you wish. With blackjack, and memes", - "version": "2.2.1", + "version": "2.2.2", "permissions": [ "tabs", "activeTab", @@ -20,15 +20,6 @@ "service_worker": "src/background.js", "type": "module" }, - "commands": { - "take-screenshot": { - "suggested_key": { - "default": "Ctrl+Shift+P", - "mac": "MacCtrl+Command+P" - }, - "description": "Take a screenshot of the current page" - } - }, "icons": { "512": "media/icon512.png", "128": "media/icon128.png" diff --git a/memes/always-been.jpg b/memes/always-been.jpg index 7b08e90..cbb3f3a 100644 Binary files a/memes/always-been.jpg and b/memes/always-been.jpg differ diff --git a/memes/american-chopper.jpg b/memes/american-chopper.jpg index 5600b20..d2bd550 100644 Binary files a/memes/american-chopper.jpg and b/memes/american-chopper.jpg differ diff --git a/memes/ancient-aliens.jpg b/memes/ancient-aliens.jpg index f14e91b..3a21bc3 100644 Binary files a/memes/ancient-aliens.jpg and b/memes/ancient-aliens.jpg differ diff --git a/memes/batman-slapping.jpg b/memes/batman-slapping.jpg index 537ae7f..6e365db 100644 Binary files a/memes/batman-slapping.jpg and b/memes/batman-slapping.jpg differ diff --git a/memes/batman-thinking.jpg b/memes/batman-thinking.jpg index 0bee8c3..c340448 100644 Binary files a/memes/batman-thinking.jpg and b/memes/batman-thinking.jpg differ diff --git a/memes/be-normal.jpg b/memes/be-normal.jpg index 358531d..be33154 100644 Binary files a/memes/be-normal.jpg and b/memes/be-normal.jpg differ diff --git a/memes/boardroom-suggestion.jpg b/memes/boardroom-suggestion.jpg index 3632079..39e7f52 100644 Binary files a/memes/boardroom-suggestion.jpg and b/memes/boardroom-suggestion.jpg differ diff --git a/memes/cadaver.jpg b/memes/cadaver.jpg index 0378a90..f249d40 100644 Binary files a/memes/cadaver.jpg and b/memes/cadaver.jpg differ diff --git a/memes/carbon-rod.jpg b/memes/carbon-rod.jpg index 953c8ca..929faf8 100644 Binary files a/memes/carbon-rod.jpg and b/memes/carbon-rod.jpg differ diff --git a/memes/change-my-mind.jpg b/memes/change-my-mind.jpg index ceec67f..7664b18 100644 Binary files a/memes/change-my-mind.jpg and b/memes/change-my-mind.jpg differ diff --git a/memes/confused-travolta.jpg b/memes/confused-travolta.jpg index 4d420f9..1debc50 100644 Binary files a/memes/confused-travolta.jpg and b/memes/confused-travolta.jpg differ diff --git a/memes/djokovic.jpg b/memes/djokovic.jpg new file mode 100644 index 0000000..0a964e0 Binary files /dev/null and b/memes/djokovic.jpg differ diff --git a/memes/do-today.jpg b/memes/do-today.jpg index 4d172d8..6cb1b76 100644 Binary files a/memes/do-today.jpg and b/memes/do-today.jpg differ diff --git a/memes/facepalm.jpg b/memes/facepalm.jpg index bb94fc7..edab3da 100644 Binary files a/memes/facepalm.jpg and b/memes/facepalm.jpg differ diff --git a/memes/flex-tape.jpg b/memes/flex-tape.jpg index 29ec78a..de13e33 100644 Binary files a/memes/flex-tape.jpg and b/memes/flex-tape.jpg differ diff --git a/memes/go-banana.jpg b/memes/go-banana.jpg index 24376e8..34eac01 100644 Binary files a/memes/go-banana.jpg and b/memes/go-banana.jpg differ diff --git a/memes/hammocks.jpg b/memes/hammocks.jpg index c731be4..d20bf17 100644 Binary files a/memes/hammocks.jpg and b/memes/hammocks.jpg differ diff --git a/memes/harold.jpg b/memes/harold.jpg index 2730c84..c87b2dc 100644 Binary files a/memes/harold.jpg and b/memes/harold.jpg differ diff --git a/memes/homer-bush.jpg b/memes/homer-bush.jpg index b9c17c2..c008411 100644 Binary files a/memes/homer-bush.jpg and b/memes/homer-bush.jpg differ diff --git a/memes/homer-terminator.jpg b/memes/homer-terminator.jpg index 38494cd..bc47922 100644 Binary files a/memes/homer-terminator.jpg and b/memes/homer-terminator.jpg differ diff --git a/memes/i-hate-this-more.jpg b/memes/i-hate-this-more.jpg index 9e8690c..4afafc0 100644 Binary files a/memes/i-hate-this-more.jpg and b/memes/i-hate-this-more.jpg differ diff --git a/memes/khaaan.jpg b/memes/khaaan.jpg index a2b4b34..9e88898 100644 Binary files a/memes/khaaan.jpg and b/memes/khaaan.jpg differ diff --git a/memes/kick-barney.jpg b/memes/kick-barney.jpg index ec41ac4..bf6a1cc 100644 Binary files a/memes/kick-barney.jpg and b/memes/kick-barney.jpg differ diff --git a/memes/left-exit-12.jpg b/memes/left-exit-12.jpg index df46cdb..76d3cf1 100644 Binary files a/memes/left-exit-12.jpg and b/memes/left-exit-12.jpg differ diff --git a/memes/make-it-so.jpg b/memes/make-it-so.jpg index a4e1c39..04aba85 100644 Binary files a/memes/make-it-so.jpg and b/memes/make-it-so.jpg differ diff --git a/memes/memes.js b/memes/memes.js index e0bee1b..f66a831 100644 --- a/memes/memes.js +++ b/memes/memes.js @@ -445,6 +445,11 @@ const memes = [ file: "no-idea.jpg", keywords: ["I have no idea what I'm doing", "dog", "confused"], }, + { + title: "Djokovic screaming", + file: "djokovic.jpg", + keywords: ["Djokovic screaming", "angry", "tennis", "ffs"], + }, ]; const filterTextElement = diff --git a/memes/no-idea.jpg b/memes/no-idea.jpg index 4c02652..8aecd19 100644 Binary files a/memes/no-idea.jpg and b/memes/no-idea.jpg differ diff --git a/memes/not-sure-if-fry.jpg b/memes/not-sure-if-fry.jpg index c5703ae..391b83e 100644 Binary files a/memes/not-sure-if-fry.jpg and b/memes/not-sure-if-fry.jpg differ diff --git a/memes/nothing-to-see-here.jpg b/memes/nothing-to-see-here.jpg index e5fb7ee..84324d6 100644 Binary files a/memes/nothing-to-see-here.jpg and b/memes/nothing-to-see-here.jpg differ diff --git a/memes/old-man-yells.jpg b/memes/old-man-yells.jpg index f9d3263..9fc072e 100644 Binary files a/memes/old-man-yells.jpg and b/memes/old-man-yells.jpg differ diff --git a/memes/one-does-not-simply.jpg b/memes/one-does-not-simply.jpg index 06409bc..e886cad 100644 Binary files a/memes/one-does-not-simply.jpg and b/memes/one-does-not-simply.jpg differ diff --git a/memes/one-of-us.jpg b/memes/one-of-us.jpg index 21b1ce5..4658a35 100644 Binary files a/memes/one-of-us.jpg and b/memes/one-of-us.jpg differ diff --git a/memes/pepe-silvia.jpg b/memes/pepe-silvia.jpg index f12e230..688f023 100644 Binary files a/memes/pepe-silvia.jpg and b/memes/pepe-silvia.jpg differ diff --git a/memes/pingu-dont-want-to.jpg b/memes/pingu-dont-want-to.jpg index 839b0bc..a2c4ecd 100644 Binary files a/memes/pingu-dont-want-to.jpg and b/memes/pingu-dont-want-to.jpg differ diff --git a/memes/ptsdog.jpg b/memes/ptsdog.jpg index 2349ec6..6ae1782 100644 Binary files a/memes/ptsdog.jpg and b/memes/ptsdog.jpg differ diff --git a/memes/raccoon-plan.jpg b/memes/raccoon-plan.jpg index 126d66c..86a9d3e 100644 Binary files a/memes/raccoon-plan.jpg and b/memes/raccoon-plan.jpg differ diff --git a/memes/ralph-danger.jpg b/memes/ralph-danger.jpg index c1e4d25..0107e65 100644 Binary files a/memes/ralph-danger.jpg and b/memes/ralph-danger.jpg differ diff --git a/memes/say-it-bart.jpg b/memes/say-it-bart.jpg index eb07f97..5f9b4d1 100644 Binary files a/memes/say-it-bart.jpg and b/memes/say-it-bart.jpg differ diff --git a/memes/shut-up-and-take-my-money.jpg b/memes/shut-up-and-take-my-money.jpg index 8a91995..34c95b1 100644 Binary files a/memes/shut-up-and-take-my-money.jpg and b/memes/shut-up-and-take-my-money.jpg differ diff --git a/memes/side-eye-monkey.jpg b/memes/side-eye-monkey.jpg index bd3b95d..451ad5d 100644 Binary files a/memes/side-eye-monkey.jpg and b/memes/side-eye-monkey.jpg differ diff --git a/memes/skinner-idea.jpg b/memes/skinner-idea.jpg index 2fb0fcc..5844372 100644 Binary files a/memes/skinner-idea.jpg and b/memes/skinner-idea.jpg differ diff --git a/memes/smarts.jpg b/memes/smarts.jpg index cd05fcc..f509ef7 100644 Binary files a/memes/smarts.jpg and b/memes/smarts.jpg differ diff --git a/memes/so-far.jpg b/memes/so-far.jpg index b3c7965..eaea11f 100644 Binary files a/memes/so-far.jpg and b/memes/so-far.jpg differ diff --git a/memes/spice-adams.jpg b/memes/spice-adams.jpg index fc4675e..31e9887 100644 Binary files a/memes/spice-adams.jpg and b/memes/spice-adams.jpg differ diff --git a/memes/spiderman-pointing.jpg b/memes/spiderman-pointing.jpg index 753ec76..4c5d572 100644 Binary files a/memes/spiderman-pointing.jpg and b/memes/spiderman-pointing.jpg differ diff --git a/memes/steamed-hams.jpg b/memes/steamed-hams.jpg index 7cfc788..026bac7 100644 Binary files a/memes/steamed-hams.jpg and b/memes/steamed-hams.jpg differ diff --git a/memes/to-do-webcomicname-dot-com.jpg b/memes/to-do-webcomicname-dot-com.jpg index 84357a8..a39384f 100644 Binary files a/memes/to-do-webcomicname-dot-com.jpg and b/memes/to-do-webcomicname-dot-com.jpg differ diff --git a/memes/tom-gauld-science-hell.jpg b/memes/tom-gauld-science-hell.jpg index 9aa8177..d58511e 100644 Binary files a/memes/tom-gauld-science-hell.jpg and b/memes/tom-gauld-science-hell.jpg differ diff --git a/memes/two-buttons.jpg b/memes/two-buttons.jpg index 673ff3e..619e284 100644 Binary files a/memes/two-buttons.jpg and b/memes/two-buttons.jpg differ diff --git a/memes/wink-wink.jpg b/memes/wink-wink.jpg index b9424d2..a1eb66f 100644 Binary files a/memes/wink-wink.jpg and b/memes/wink-wink.jpg differ diff --git a/memes/xkcd-compiling.jpg b/memes/xkcd-compiling.jpg index d2d497c..2509260 100644 Binary files a/memes/xkcd-compiling.jpg and b/memes/xkcd-compiling.jpg differ diff --git a/memes/xkcd-dependency.jpg b/memes/xkcd-dependency.jpg index 7baa417..78d82b3 100644 Binary files a/memes/xkcd-dependency.jpg and b/memes/xkcd-dependency.jpg differ diff --git a/index.html b/pwa/index.html similarity index 59% rename from index.html rename to pwa/index.html index d9c0b80..5cad0c9 100644 --- a/index.html +++ b/pwa/index.html @@ -2,8 +2,9 @@ Goita tu - - + + +
@@ -13,6 +14,6 @@
- + diff --git a/pwa/manifest.json b/pwa/manifest.json new file mode 100644 index 0000000..84838d8 --- /dev/null +++ b/pwa/manifest.json @@ -0,0 +1,20 @@ +{ + "short_name": "Goita", + "name": "Goita", + "icons": [ + { + "src": "../media/icon512.png", + "sizes": "512x512", + "type": "image/png" + }, + { + "src": "../media/icon128.png", + "sizes": "128x128", + "type": "image/png" + } + ], + "start_url": "index.html", + "display": "standalone", + "background_color": "#333333", + "theme_color": "#333333" +} diff --git a/src/main.js b/src/main.js index c455b36..4665c82 100644 --- a/src/main.js +++ b/src/main.js @@ -1,7 +1,7 @@ import { setupAllTheThings } from "./screenshot.js"; import { white } from "./white.js"; -const basepath = window.location.pathname.startsWith("/src") ? "../" : ""; +const basepath = window.location.pathname.startsWith("/src") ? "../" : "../"; // TODO(me): remove once paths are fixed document.addEventListener( "DOMContentLoaded", diff --git a/src/screenshot.js b/src/screenshot.js index 8ebdb8d..6eb9a52 100644 --- a/src/screenshot.js +++ b/src/screenshot.js @@ -245,6 +245,7 @@ const setupAllTheThings = (testImage, basepath) => () => { window._elements[pastedMeme.id] = pastedMeme; selected = pastedMeme; displayMemes = false; + isDrawing = false; } const pastedImage = clipboardData.files && clipboardData.files[0]; if (pastedImage && pastedImage.type.startsWith("image")) { @@ -272,6 +273,7 @@ const setupAllTheThings = (testImage, basepath) => () => { window._elements[pastedMeme.id] = pastedMeme; selected = pastedMeme; displayMemes = false; + isDrawing = false; }; reader.readAsDataURL(pastedImage); @@ -341,6 +343,7 @@ const setupAllTheThings = (testImage, basepath) => () => { window._elements[pastedMeme.id] = pastedMeme; selected = pastedMeme; displayMemes = false; + isDrawing = false; }; if (event.metaKey || event.ctrlKey) { return;