diff --git a/README.md b/README.md index 6a11ad6..2768224 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,9 @@ An extension to take and annotate screenshots. -It can also be used in a standalone way by visiting https://www.mostlymaths.net/goita/ To annotate an image you have in your clipboard, press `q`, otherwise you can paste pieces of images using `v` [NOTE: this is broken in Safari due to some clipboard permission issue]. Depending on the browser you may need to click "paste", or accept some clipboard access permissions. All images and text are processed locally, no data is sent anywhere. +It can also be used in a standalone way by visiting https://www.mostlymaths.net/goita/ To annotate an image you have in your clipboard, press `q`, otherwise you can paste pieces of images using `v` [NOTE: this is broken in Safari due to some clipboard permission issue]. Depending on the browser you may need to click "paste", or accept some clipboard access permissions. Use `m` to have fun with memes. + +All images and text are processed locally, no data is sent anywhere. ## Demo video @@ -31,43 +33,43 @@ Also, two features I have wanted for a while: 2. In addition to an image, **it can export the screenshot as a `data:base64` encoded URL**, where the image is clickable (combines with point 1). I can't embed an example in a README (github seems to throw such a long URL away) but you can find it in [`media/data-url-example`](https://raw.githubusercontent.com/rberenguel/goita/refs/heads/gh-pages/media/data-url-example), copy that blob of text in the URL of your browser (tested in Chrome and Safari) and you should see a screenshot as the one above, clickable. -## Annotation features - -For all these, creation and deletion (click the element and press backspace) should be possible. - -- [x] Choose color: press `c` and then one of: - - `r`: Red (this is the default). - - `y`: Yellow. - - `b`: Blue. - - `g`: Green. - - `w`: White. - - `x`: Redact (will use solid black in everything). - - `c`: To cancel the "choose color" mode. -- [x] Rectangles: press `r` and drag to create. -- [x] Arrows: press `a` and drag to create from source to destination. -- [x] Text: press `t` and click to place. - - [x] `Ctrl-.` and `Ctrl-,` increase and decrease the font for text, respectively. - - [x] `Ctrl + scrollwheel` over a text block increase / decrease the size of the bounding box. - - [x] `Ctrl-/` Cycle through fonts (Monoid, Reforma1969, Inter, Roboto) -- [x] Highlight: press `s` and drag to create. Use color `x` to redact. (why `s` and not `h`? Because all other shape/tool letters are on the left hand) -- [x] Redact: Use highlighting with color "redact". -- [x] Clip-on-drag the initial screenshot: press `k` at any time. - - The resulting clipped block is draggable after clicking on it to select it. - - Shift-dragging drags the clip. - - Select the clipped image and press `k` again to restore the viewframe. -- [x] Paste images from the clipboard: press `v` and then click somewhere. - - The pasted image is draggable. - - The pasted image can be deleted by pressing backspace (like any other element after selection). - - `Ctrl + scrollwheel` over a pasted image resizes it. -- [x] Paste HTML text from the clipboard: press `v` and then click somewhere. - - The pasted text is draggable. - - The pasted text is contenteditable. - - The pasted image can be deleted by pressing backspace (like any other element after selection). - - [x] Handle `text/plain` -- [x] Circles/ellipses: press `p` and drag, like a rectangle -- [x] The current mode and color (when drawing) is showed in the extension badge. Make sure to pin it. -- [x] Control font size for text (it is fixed and the same for all blocks) -- [x] Most shortcuts are quickly customizable in a single file (`shortcuts.js`) +## Features and functionality + +Taken from the extension's help modal. These are the default shortcut keys. + +- `a`: draw an arrow +- `r`: draw a rectangle +- `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 +- `v`: paste images or text from the clipboard + - `ctrl + scrollwheel`: Resize the pasted image while selected +- `k`: clip the screenshot + - `drag`: dragging moves the clipped image + - `shift+drag`: dragging moves the clipping rectangle +- `q`: swap the screenshot for whatever image there is on the clipboard (or go back to the screenshot) +- `c`: choose color for the next operations + - `r`: red (default) + - `y`: yellow + - `b`: blue + - `g`: green + - `o`: orange + - `w`: white + - `x`: black (and highlight then redacts) +- `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 + - `enter`: to select the topmost meme + - `click`: on the image or name to select it + - `paste`: an external meme URL (should be valid) to use that instead + - `esc`: to dismiss +- `z`: switch between the screenshot and a white canvas (better for tweaking memes or diagrams) +- `backspace`: delete anything selected ## Installation diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..8009ecf Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html index 02eb7a1..4aaa000 100644 --- a/index.html +++ b/index.html @@ -61,6 +61,6 @@
- + diff --git a/manifest.json b/manifest.json index eef2026..1a1697e 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": "1.9.3", + "version": "2.0.0", "permissions": [ "tabs", "activeTab", diff --git a/media/favicon.ico b/media/favicon.ico new file mode 100644 index 0000000..8009ecf Binary files /dev/null and b/media/favicon.ico differ diff --git a/media/icon.ico b/media/icon.ico new file mode 100644 index 0000000..e69de29 diff --git a/memes/always-been.jpg b/memes/always-been.jpg index 62ad13e..1b00429 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 b8a923e..8c24695 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 c07a7a9..0bfeb4f 100644 Binary files a/memes/ancient-aliens.jpg and b/memes/ancient-aliens.jpg differ diff --git a/memes/bart-chair.jpg b/memes/bart-chair.jpg index d3d8702..d7947d2 100644 Binary files a/memes/bart-chair.jpg and b/memes/bart-chair.jpg differ diff --git a/memes/batman-slapping.jpg b/memes/batman-slapping.jpg index d59683d..745a6ab 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 d58017a..fa3f845 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 d9bd7d9..cd17246 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 821468a..3bb7076 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 3ef03bc..8a82eb7 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 fad1c92..696e8da 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 0db6542..87d10b8 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 7eb5d3e..670c72b 100644 Binary files a/memes/confused-travolta.jpg and b/memes/confused-travolta.jpg differ diff --git a/memes/distracted-boyfriend.jpg b/memes/distracted-boyfriend.jpg index 7fb9b5e..ef09306 100644 Binary files a/memes/distracted-boyfriend.jpg and b/memes/distracted-boyfriend.jpg differ diff --git a/memes/do-today.jpg b/memes/do-today.jpg index f941ad4..09f9b86 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 new file mode 100644 index 0000000..92fdb58 Binary files /dev/null and b/memes/facepalm.jpg differ diff --git a/memes/flex-tape.jpg b/memes/flex-tape.jpg index d3649b3..49f83ff 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 c0af9d8..a45d4a8 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 f8f4eec..7017bd8 100644 Binary files a/memes/hammocks.jpg and b/memes/hammocks.jpg differ diff --git a/memes/harold.jpg b/memes/harold.jpg index 9bb2a5d..0747648 100644 Binary files a/memes/harold.jpg and b/memes/harold.jpg differ diff --git a/memes/homer-terminator.jpg b/memes/homer-terminator.jpg index 7a9f980..9750bfd 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 8fe14ea..cf7aa3d 100644 Binary files a/memes/i-hate-this-more.jpg and b/memes/i-hate-this-more.jpg differ diff --git a/memes/invisible-typewriter.jpg b/memes/invisible-typewriter.jpg index db73fc4..78e0c27 100644 Binary files a/memes/invisible-typewriter.jpg and b/memes/invisible-typewriter.jpg differ diff --git a/memes/is-this-a-pigeon.jpg b/memes/is-this-a-pigeon.jpg index 85d773b..d427b9e 100644 Binary files a/memes/is-this-a-pigeon.jpg and b/memes/is-this-a-pigeon.jpg differ diff --git a/memes/khaaan.jpg b/memes/khaaan.jpg index c57d3b2..10deb7a 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 90808f1..55c0a77 100644 Binary files a/memes/kick-barney.jpg and b/memes/kick-barney.jpg differ diff --git a/memes/kill-it-with-fire.jpg b/memes/kill-it-with-fire.jpg index fe54a93..db7eeb4 100644 Binary files a/memes/kill-it-with-fire.jpg and b/memes/kill-it-with-fire.jpg differ diff --git a/memes/left-exit-12.jpg b/memes/left-exit-12.jpg index ada306a..8246ae3 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 2a3fd6f..1d713f6 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 22bc4c1..f7f5cbb 100644 --- a/memes/memes.js +++ b/memes/memes.js @@ -14,12 +14,12 @@ const memes = [ { title: "Confused Travolta", file: "confused-travolta.jpg", - keywords: ["confused", "travolta", "pulp fiction"], + keywords: ["confused travolta", "pulp fiction"], }, { title: "Homer Terminator", file: "homer-terminator.jpg", - keywords: ["terminator", "homer", "rod tod", "simpsons"], + keywords: ["terminator homer", "rod tod", "simpsons"], }, { title: "Ralph: Go Banana", @@ -29,7 +29,12 @@ const memes = [ { title: "Ralph (Chuckles): I'm in Danger", file: "ralph-danger.jpg", - keywords: ["ralph chuckle in danger", "ralph", "simpsons"], + keywords: [ + "Ralph (Chuckles): I'm in Danger", + "ralph chuckle in danger", + "ralph", + "simpsons", + ], }, { title: "Skinner Out of Touch", @@ -310,6 +315,12 @@ const memes = [ ], }, + { + title: "Picard Facepalm", + file: "facepalm.jpg", + keywords: ["Picard facepalm", "facepalm", "jean-luc picard", "star trek"], + }, + { title: "Khaaan!", file: "khaaan.jpg", @@ -416,8 +427,15 @@ const memes = [ }, ]; -const filterTextElement = document.getElementById("filter-text"); -const filteredMemesElement = document.getElementById("filtered-memes"); +const filterTextElement = + document.getElementById("filter-text") || + document.body.appendChild(document.createElement("div")); +filterTextElement.id = "filter-text"; + +const filteredMemesElement = + document.getElementById("filtered-memes") || + document.body.appendChild(document.createElement("div")); +filteredMemesElement.id = "filtered-memes"; function filterMemes(text, settings = {}) { const lowerCaseText = text.toLowerCase(); @@ -452,7 +470,6 @@ function filterMemes(text, settings = {}) { } function displayMemes(memes, settings) { - console.log(memes); const container = document.getElementById("meme-container"); if (container) { diff --git a/memes/not-sure-if-fry.jpg b/memes/not-sure-if-fry.jpg index 4675b9d..0f7ddbd 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 8bad13e..7de0a35 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 aaea6e1..8f16abf 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 9149c74..c5b9027 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 fb2954a..6a907fd 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 a2af473..28cb469 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 5d0c182..efe94f5 100644 Binary files a/memes/pingu-dont-want-to.jpg and b/memes/pingu-dont-want-to.jpg differ diff --git a/memes/pingu-toot.jpg b/memes/pingu-toot.jpg index 0d81a05..5676dae 100644 Binary files a/memes/pingu-toot.jpg and b/memes/pingu-toot.jpg differ diff --git a/memes/ptsdog.jpg b/memes/ptsdog.jpg index 99859d4..4b3bea3 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 d8026da..0cad61f 100644 Binary files a/memes/raccoon-plan.jpg and b/memes/raccoon-plan.jpg differ diff --git a/memes/raccoon-praise.jpg b/memes/raccoon-praise.jpg index 5befec3..6625777 100644 Binary files a/memes/raccoon-praise.jpg and b/memes/raccoon-praise.jpg differ diff --git a/memes/ralph-danger.jpg b/memes/ralph-danger.jpg index 38767fb..7a11877 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 52927cb..e0ba80b 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 0f3d488..09d2ded 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 c33ae47..be1a026 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 3c068f4..2422db6 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 3e33e74..5889a3c 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 bd3dc49..03518af 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 0119ad7..84165a6 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 b1a664d..89e104f 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 d71147b..0380207 100644 Binary files a/memes/steamed-hams.jpg and b/memes/steamed-hams.jpg differ diff --git a/memes/stop-already.jpg b/memes/stop-already.jpg index 84314d8..e6bd0c2 100644 Binary files a/memes/stop-already.jpg and b/memes/stop-already.jpg differ diff --git a/memes/thought-police.jpg b/memes/thought-police.jpg index 73b6dd2..e14b5a1 100644 Binary files a/memes/thought-police.jpg and b/memes/thought-police.jpg differ diff --git a/memes/to-do-webcomicname-dot-com.jpg b/memes/to-do-webcomicname-dot-com.jpg index 96e7b85..29cab98 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 a75b1a7..0a692dd 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 f448990..912e7ff 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 7c153e0..33ec252 100644 Binary files a/memes/wink-wink.jpg and b/memes/wink-wink.jpg differ diff --git a/src/help.js b/src/help.js new file mode 100644 index 0000000..0f30fd2 --- /dev/null +++ b/src/help.js @@ -0,0 +1,66 @@ +export { createHelpDiv }; + +function createHelpDiv() { + if (document.getElementById("help")) { + return; + } + + const helpDiv = document.createElement("div"); + helpDiv.id = "help"; + helpDiv.classList.add("hide"); + + helpDiv.innerHTML = ` +

Goita! Ruben Berenguel 2024

+
+ +

h show and hide this help

+

{arrow} draw an arrow

+

{rect}: draw a rectangle

+

{ellipse} draw an ellipse

+

{highlight} highlight an area

+

{text} 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

+

{paste} paste images or text from the clipboard

+

ctrl + scrollwheel Resize the pasted image

+

{clip} clip the screenshot

+

drag dragging moves the clipped image

+

shift+drag dragging moves the clipping rectangle

+

{clipboard} swap the screenshot for whatever + image there is on the clipboard (or go back to the screenshot)

+

{color} choose color for the next operations

+

r red (default)

+

y yellow

+

b blue

+

g green

+

o orange

+

w white

+

x black (and highlight then redacts)

+

{memes}: enter meme selection, it will be placed on the last click

+

type to dynamically search through the list of memes

+

tab to display meme thumbnails

+

enter to select the topmost meme

+

click on the image or name to select it

+

paste an external meme URL (should be valid) to use that instead

+

esc to dismiss

+

{empty}: switch between the screenshot and a white canvas (better for tweaking memes or diagrams)

+

backspace: delete anything selected

+ `; + + document.body.insertBefore(helpDiv, document.body.firstChild); +} diff --git a/src/screenshot.html b/src/screenshot.html index 11eba70..0b48002 100644 --- a/src/screenshot.html +++ b/src/screenshot.html @@ -6,54 +6,6 @@ -
-

Goita! Ruben Berenguel 2024

-
- -

h show and hide this help

-

{arrow} draw an arrow

-

{rect}: draw a rectangle

-

{ellipse} draw an ellipse

-

{highlight} highlight an area

-

{text} 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

-

- {paste} paste images or text from the clipboard -

-

ctrl + scrollwheel Resize the pasted image

-

{clip} clip the screenshot

-

drag dragging moves the clipped image

-

shift+drag dragging moves the clipping rectangle

-

- {clipboard} swap the screenshot for whatever - image there is on the clipboard (or go back to the screenshot) -

-

{color} choose color for the next operations

-

r red (default)

-

y yellow

-

b blue

-

g green

-

o orange

-

w white

-

x black (and highlight then redacts)

-

backspace: delete anything selected

-
diff --git a/src/screenshot.js b/src/screenshot.js index 4c080c6..5f1da02 100644 --- a/src/screenshot.js +++ b/src/screenshot.js @@ -11,6 +11,7 @@ import { ClipPath } from "./clip.js"; import { shortcuts } from "./shortcuts.js"; import { filterMemes } from "../memes/memes.js"; +import { createHelpDiv } from "./help.js"; window._elements = {}; // I leak this into window to make testing easier. @@ -81,6 +82,9 @@ const loadImage = (flipped) => (data) => { const sourceLinkDiv = () => document.getElementById("sourceLink"); +const filterText = document.getElementById("filter-text"); +const filteredMemes = document.getElementById("filtered-memes"); + const setupAllTheThings = (testImage) => () => { try { chrome.storage.local.set({ linkback: true }); @@ -164,6 +168,9 @@ const setupAllTheThings = (testImage) => () => { } const svg = document.getElementById("svgOverlay"); + + createHelpDiv(); + const help = document.getElementById("help"); // the useful globals; @@ -203,11 +210,46 @@ const setupAllTheThings = (testImage) => () => { chrome.action.setTitle({ title: title }); chrome.action.setBadgeText({ text: title }); } catch (err) { + if (chrome.action === undefined) { + // This is expected while on browser mode + return; + } console.info(err); } } setBadge("empty"); + document.addEventListener("paste", (event) => { + const clipboardData = event.clipboardData || window.clipboardData; + + if (clipboardData) { + const pastedText = clipboardData.getData("text"); + if (pastedText && kind === "memes") { + // Can I take this out? It's the same as the callback-meme + const container = document.getElementById("meme-container"); + + if (container) { + container.remove(); + } + let x = 0, + y = 0; + if (lastClick) { + x = lastClick.offsetX; + y = lastClick.offsetY; + } + const pastedMeme = new Image(x, y, pastedText, svg); + kind = null; + searchText = ""; + filterText.style.display = "none"; + filteredMemes.style.display = "none"; + setBadge("empty"); + window._elements[pastedMeme.id] = pastedMeme; + selected = pastedMeme; + displayMemes = false; + } + } + }); + document.addEventListener( "wheel", (event) => { @@ -238,7 +280,6 @@ const setupAllTheThings = (testImage) => () => { } } if (event.key === "Escape" && selected) { - console.info(selected); if (selected.is) { selected.deselect(); } else { @@ -250,10 +291,6 @@ const setupAllTheThings = (testImage) => () => { return; } if (kind === "memes") { - const filterText = document.getElementById("filter-text"); - const filteredMemes = document.getElementById("filtered-memes"); - event.stopPropagation(); - event.preventDefault(); const currentClick = lastClick; const memeCallback = (memePath) => () => { const container = document.getElementById("meme-container"); @@ -277,16 +314,18 @@ const setupAllTheThings = (testImage) => () => { selected = pastedMeme; displayMemes = false; }; - if (event.metaKey) { + if (event.metaKey || event.ctrlKey) { return; } + event.stopPropagation(); + event.preventDefault(); if (event.key === "Backspace") { searchText = searchText.slice(0, -1); filterMemes(searchText, { display: displayMemes, callback: memeCallback, }); - } else if (event.key === "Control" || event.key === "Tab") { + } else if (event.key === "Tab") { displayMemes = !displayMemes; filterMemes(searchText, { display: displayMemes, @@ -298,8 +337,8 @@ const setupAllTheThings = (testImage) => () => { filterText.style.display = "none"; filteredMemes.style.display = "none"; setBadge("empty"); + displayMemes = false; const container = document.getElementById("meme-container"); - if (container) { container.remove(); } @@ -352,7 +391,7 @@ const setupAllTheThings = (testImage) => () => { return; } if (selected && selected.is && selected.is("text") && selected.focused()) { - console.info("Texting, stop any propagation"); + // Texting, stop any propagation event.stopPropagation(); return; } @@ -453,13 +492,11 @@ const setupAllTheThings = (testImage) => () => { } } if (wants(event) == "rect") { - console.info("Drawing rect"); isDrawing = true; kind = "rect"; setBadge("rect"); } if (wants(event) == "ellipse") { - console.info("Drawing ellipse"); isDrawing = true; kind = "ellipse"; setBadge("ellipse"); @@ -487,7 +524,6 @@ const setupAllTheThings = (testImage) => () => { } if (wants(event) == "highlight") { setBadge("highlight"); - console.info("drawing highlight"); isDrawing = true; kind = "highlight"; } @@ -495,7 +531,6 @@ const setupAllTheThings = (testImage) => () => { setBadge("arrow"); isDrawing = true; kind = "arrow"; - console.info("Drawing arrow"); } if (wants(event) == "paste") { kind = "paste"; @@ -508,14 +543,12 @@ const setupAllTheThings = (testImage) => () => { isDrawing = true; kind = "text"; event.stopPropagation(); - console.info("Creating text"); } if (wants(event) == "memes") { setBadge("memes"); isDrawing = true; kind = "memes"; event.stopPropagation(); - console.info("Starting text filtering"); return; } if (isDrawing) { @@ -773,7 +806,7 @@ const setupAllTheThings = (testImage) => () => { _kind = "text"; } else { if (!_kind) { - console.info("Clicked on something useless unexpectedly"); + console.info("Clicked on something useless (unexpectedly?)"); if (selected) { selected.deselect(); } @@ -830,12 +863,10 @@ const setupAllTheThings = (testImage) => () => { document.addEventListener("mouseup", () => { if (isDrawing) { - console.info("Stopped drawing"); setBadge("empty"); isDrawing = false; document.body.style.cursor = ""; if (selected.is) { - console.info("Deselecting on mouseup while drawing"); if (!selected.is("text")) { selected.deselect(); selected = null; diff --git a/src/style.css b/src/style.css index 339679b..c5ed423 100644 --- a/src/style.css +++ b/src/style.css @@ -79,7 +79,7 @@ svg { #help { padding: 1em; position: absolute; - transform: translate(50%, 20vh); + transform: translate(50%, 10vh); font-family: "Roboto Mono"; font-size: 16px; width: 50%; diff --git a/src/text.js b/src/text.js index 5f17aaa..9f9cd69 100644 --- a/src/text.js +++ b/src/text.js @@ -122,7 +122,6 @@ class Text { } fontName() { - console.log(FONT_CLASSES[this._font]); return FONT_CLASSES[this._font]; } @@ -139,8 +138,6 @@ class Text { } fontSizeUp() { - console.log("sizing up"); - console.log(this._fontSize); this._fontSize = this._fontSize + 2; this.fontSize(); } @@ -151,9 +148,7 @@ class Text { } fontSize() { - console.log(this._font, this._fontSize); const sizing = `${FONT_FACTORS[this._font] * this._fontSize}px`; - console.log(sizing); this.element.style.fontSize = `${sizing}`; } @@ -205,7 +200,6 @@ class Text { this.isSelected = false; this.dragOff(); const te = this.element.querySelector(".text-editor"); - console.info(`Deselected text: '${te.textContent}'`); this.element.classList.remove("selected"); if (te.textContent.trim().length === 0) { console.info("Purging empty text"); diff --git a/tests/events.js b/tests/events.js index 9ae127d..bccf817 100644 --- a/tests/events.js +++ b/tests/events.js @@ -1,4 +1,4 @@ -export { kev, mev, del, esc }; +export { kev, mev, pev, del, esc, enter, tab }; const kev = (letter) => new KeyboardEvent("keydown", { @@ -14,6 +14,14 @@ const esc = new KeyboardEvent("keydown", { key: "Escape", }); +const enter = new KeyboardEvent("keydown", { + key: "Enter", +}); + +const tab = new KeyboardEvent("keydown", { + key: "Tab", +}); + const mev = (_clientX, _clientY, kind) => { let clientX = _clientX; let clientY = _clientY; @@ -26,3 +34,9 @@ const mev = (_clientX, _clientY, kind) => { }); return ev; }; + +const pev = (text) => { + const event = new Event("paste", { bubbles: true, cancelable: true }); + event.clipboardData = { getData: (type) => (type === "text" ? text : "") }; + return event; +}; diff --git a/tests/favicon.ico b/tests/favicon.ico new file mode 100644 index 0000000..8009ecf Binary files /dev/null and b/tests/favicon.ico differ diff --git a/tests/index.html b/tests/index.html index d63af19..896674a 100644 --- a/tests/index.html +++ b/tests/index.html @@ -6,11 +6,10 @@ All Goita tests