/*
* Yioop image editor. Draws a picture kept with a wiki page on a canvas
* the writer may change, and hands the changed picture back to the edit
* form to be saved as the same file. A picture is loaded from the
* address the edit view puts on the editor, drawn to fit the screen
* while keeping its shape, and changed with the controls above it: the
* width and height fields, the turn and mirror marks, and the drawing
* tools. What the writer draws is kept in the picture's own pixels, so a
* turn or a resize afterward carries the drawing with it.
*
* LICENSE
*
* SeekQuarry/Yioop Open Source Pure PHP Search Engine, Crawler, and
* Indexer.
* Copyright (C) 2009 - 2026 Chris Pollett chris@pollett.org
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see
* <https://www.gnu.org/licenses/>.
*
* @author Chris Pollett chris@pollett.org
* @license https://www.gnu.org/licenses/ GPL3
* @copyright 2009 - 2026
*/
/*
* The most of the screen a picture is allowed to fill when first drawn,
* as a part of one. A picture wider or taller than this share is drawn
* smaller so the controls above it and the page around it still show.
*/
const IMAGE_EDITOR_SCREEN_SHARE = 0.6;
/*
* How far a quarter turn is, in degrees. The turn mark adds this to the
* angle each time it is pressed.
*/
const IMAGE_EDITOR_QUARTER_TURN = 90;
/*
* Holds the one editor on the page: the canvas and its context, the
* picture's own pixels kept off screen at their true size, the tools
* the controls choose, and where a drag began. One page edits one file,
* so one set of these is enough.
*/
let image_editor = null;
/*
* How many earlier states of the picture are kept so a writer may step
* back through them. Deep enough for a run of drawings, shallow enough
* that a large picture does not fill the browser's memory.
*/
const IMAGE_EDITOR_UNDO_DEPTH = 20;
/*
* Sets up the image editor once the page has loaded, where the page
* carries one. Reads the picture's address from the editor, loads it,
* and draws it to fit once it arrives. Does nothing on a page with no
* image editor, so it is safe to call on every wiki edit screen.
*/
function initImageEditor()
{
let frame = elt("image-editor");
if (!frame) {
return;
}
let canvas = elt("image-editor-canvas");
image_editor = {
canvas: canvas,
context: canvas.getContext("2d"),
store: document.createElement("canvas"),
drawing: false,
start_x: 0,
start_y: 0,
earlier: [],
typing_at: null,
typed: ""
};
let picture = new Image();
picture.onload = function () {
image_editor.store.width = picture.naturalWidth;
image_editor.store.height = picture.naturalHeight;
image_editor.store.getContext("2d").drawImage(picture, 0, 0);
fitImageEditor();
drawImageEditor();
};
picture.src = frame.getAttribute("data-image-url");
listenImageEditor();
}
/*
* Sizes the canvas so the picture fits the screen while keeping its
* shape. Reads the picture's true size from the off-screen store,
* shrinks it to the allowed share of the window where it is larger, and
* fills the width and height fields with the size shown. Never makes a
* small picture larger, so a small picture stays its own size.
*/
function fitImageEditor()
{
let store = image_editor.store;
let most_wide = window.innerWidth * IMAGE_EDITOR_SCREEN_SHARE;
let most_tall = window.innerHeight * IMAGE_EDITOR_SCREEN_SHARE;
let scale = Math.min(1, most_wide / store.width,
most_tall / store.height);
image_editor.canvas.width = Math.round(store.width * scale);
image_editor.canvas.height = Math.round(store.height * scale);
elt("image-editor-width").value =
image_editor.canvas.width;
elt("image-editor-height").value =
image_editor.canvas.height;
}
/*
* Draws the picture from the off-screen store onto the canvas at the
* canvas's size, so a resize, a turn, or a mirror shows. The store
* holds the true pixels; the canvas holds what the writer sees. Called
* after every change that alters the whole picture.
*/
function drawImageEditor()
{
let context = image_editor.context;
let canvas = image_editor.canvas;
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image_editor.store, 0, 0, canvas.width,
canvas.height);
}
/*
* Copies what is on the canvas back into the off-screen store at the
* store's size, so a drawing the writer made is kept in the picture's
* own pixels. Called after a doodle, a line, or a shape is drawn, so a
* later turn or resize carries the drawing with it.
*/
function keepImageEditor()
{
let store = image_editor.store;
let keep = store.getContext("2d");
keep.setTransform(1, 0, 0, 1, 0, 0);
keep.clearRect(0, 0, store.width, store.height);
keep.drawImage(image_editor.canvas, 0, 0, store.width, store.height);
}
/*
* Puts the width and height a writer typed onto the canvas, keeping the
* picture's pixels in the store at their true size. An empty or
* not-a-number size is left as it was, so a half-typed number does not
* blank the picture.
*
* @param Object field the width or height input the writer changed
*/
function sizeImageEditor()
{
let wide = parseInt(
elt("image-editor-width").value, 10);
let tall = parseInt(
elt("image-editor-height").value, 10);
if (!wide || !tall || wide < 1 || tall < 1) {
return;
}
let sized = document.createElement("canvas");
sized.width = wide;
sized.height = tall;
sized.getContext("2d").drawImage(image_editor.store, 0, 0, wide,
tall);
image_editor.store = sized;
image_editor.canvas.width = wide;
image_editor.canvas.height = tall;
drawImageEditor();
}
/*
* Turns the picture a quarter turn to the right. The store's pixels are
* redrawn onto a fresh store turned on its side, so the width and the
* height swap, then the canvas is fitted and drawn again. Pressing the
* mark four times brings the picture back to where it began.
*/
function rotateImageEditor()
{
rememberImageEditor();
let store = image_editor.store;
let turned = document.createElement("canvas");
turned.width = store.height;
turned.height = store.width;
let context = turned.getContext("2d");
context.translate(turned.width / 2, turned.height / 2);
context.rotate(IMAGE_EDITOR_QUARTER_TURN * Math.PI / 180);
context.drawImage(store, -store.width / 2, -store.height / 2);
image_editor.store = turned;
fitImageEditor();
drawImageEditor();
}
/*
* Mirrors the picture left to right. The store's pixels are redrawn onto
* a fresh store from the far side, so what was on the left is on the
* right, then the canvas is drawn again. Pressing the mark twice brings
* the picture back.
*/
function flipImageEditor(down)
{
rememberImageEditor();
let store = image_editor.store;
let mirror = document.createElement("canvas");
mirror.width = store.width;
mirror.height = store.height;
let context = mirror.getContext("2d");
if (down) {
context.translate(0, store.height);
context.scale(1, -1);
} else {
context.translate(store.width, 0);
context.scale(-1, 1);
}
context.drawImage(store, 0, 0);
image_editor.store = mirror;
drawImageEditor();
}
/*
* Gives where the mouse is over the canvas in canvas pixels, since the
* canvas may be shown at a size other than its pixel size. Reads the
* canvas's place on screen and turns the mouse's page place into a place
* on the canvas.
*
* @param Object event the mouse event the place is read from
* @return Object the x and y of the mouse in canvas pixels
*/
function whereImageEditor(event)
{
let canvas = image_editor.canvas;
let box = canvas.getBoundingClientRect();
return {
x: (event.clientX - box.left) * (canvas.width / box.width),
y: (event.clientY - box.top) * (canvas.height / box.height)
};
}
/*
* Starts a drawing where the mouse went down on the canvas. Keeps the
* place the drag began and, for the doodle tool, moves the pen there so
* the first move draws from the right spot.
*
* @param Object event the mouse-down event on the canvas
*/
function startImageDraw(event)
{
let at = whereImageEditor(event);
if (elt("image-editor-tool").value == "text") {
keepImageEditor();
rememberImageEditor();
image_editor.typing_at = at;
image_editor.typed = "";
return;
}
rememberImageEditor();
image_editor.drawing = true;
image_editor.start_x = at.x;
image_editor.start_y = at.y;
let context = image_editor.context;
context.strokeStyle =
elt("image-editor-color").value;
context.fillStyle = context.strokeStyle;
context.lineWidth = parseInt(
elt("image-editor-thickness").value, 10);
context.lineCap = "round";
if (elt("image-editor-tool").value == "doodle") {
context.beginPath();
context.moveTo(at.x, at.y);
}
}
/*
* Draws as the mouse moves with the button down. The doodle tool adds to
* a free line under the pen. The line and shape tools draw from the
* start to where the mouse is now over a fresh copy of the kept picture,
* so the one being drawn follows the mouse without leaving a trail.
*
* @param Object event the mouse-move event on the canvas
*/
function moveImageDraw(event)
{
if (!image_editor.drawing) {
return;
}
let at = whereImageEditor(event);
let context = image_editor.context;
if (elt("image-editor-tool").value == "doodle") {
context.lineTo(at.x, at.y);
context.stroke();
return;
}
drawImageEditor();
context.beginPath();
if (elt("image-editor-tool").value == "line") {
context.moveTo(image_editor.start_x, image_editor.start_y);
context.lineTo(at.x, at.y);
context.stroke();
return;
}
drawImageShape(context, at);
}
/*
* Draws the chosen shape from where the drag began to where the mouse is
* now. An oval is drawn inside the box the two corners make, and a
* rectangle is drawn as that box. Called while a shape is being dragged
* and once more when it is let go.
*
* @param Object context the canvas context the shape is drawn on
* @param Object at the x and y of the mouse now, in canvas pixels
*/
function drawImageShape(context, at)
{
let tool = elt("image-editor-tool").value;
let left = Math.min(image_editor.start_x, at.x);
let top = Math.min(image_editor.start_y, at.y);
let wide = Math.abs(at.x - image_editor.start_x);
let tall = Math.abs(at.y - image_editor.start_y);
if (tool == "rectangle") {
context.strokeRect(left, top, wide, tall);
return;
}
if (tool == "rectangle_filled") {
context.fillRect(left, top, wide, tall);
return;
}
context.ellipse(left + wide / 2, top + tall / 2, wide / 2, tall / 2,
0, 0, 2 * Math.PI);
if (tool == "oval_filled") {
context.fill();
return;
}
context.stroke();
}
/*
* Ends a drawing where the mouse comes up. Draws the line or shape one
* last time to where the mouse ended, then copies the canvas into the
* store so the drawing becomes part of the picture. A doodle is already
* on the canvas, so it is only kept.
*
* @param Object event the mouse-up event on the canvas
*/
function endImageDraw(event)
{
if (!image_editor.drawing) {
return;
}
image_editor.drawing = false;
if (elt("image-editor-tool").value != "doodle") {
moveImageDrawEnd(event);
}
keepImageEditor();
}
/*
* Draws the line or shape to where the mouse was let go, so the drawn
* thing ends where the writer meant rather than where the last move
* event landed. Reached only from endImageDraw for the line and shape
* tools.
*
* @param Object event the mouse-up event on the canvas
*/
function moveImageDrawEnd(event)
{
let at = whereImageEditor(event);
let context = image_editor.context;
drawImageEditor();
context.beginPath();
if (elt("image-editor-tool").value == "line") {
context.moveTo(image_editor.start_x, image_editor.start_y);
context.lineTo(at.x, at.y);
context.stroke();
return;
}
drawImageShape(context, at);
}
/*
* Reads the picture off the canvas as a data address and puts it in the
* form being sent, so a save writes the changed picture back as the
* file. It runs as the form gathers its fields, and is given that
* gathering by the event, so it sets the value both on the hidden field
* and on the fields being sent. The width and height fields say how
* large the saved picture is, so the kept pixels are drawn onto a canvas
* of that size and read from there. A drawing on the canvas is kept into
* the store first, so it is carried into the saved picture.
*
* @param Object event the form's formdata event, whose formData holds
* the fields being sent
*/
function packImageEditor(event)
{
if (!image_editor) {
return;
}
keepImageEditor();
let wide = parseInt(
elt("image-editor-width").value, 10);
let tall = parseInt(
elt("image-editor-height").value, 10);
if (!wide || !tall || wide < 1 || tall < 1) {
wide = image_editor.store.width;
tall = image_editor.store.height;
}
let output = document.createElement("canvas");
output.width = wide;
output.height = tall;
output.getContext("2d").drawImage(image_editor.store, 0, 0, wide,
tall);
let address = output.toDataURL(imageEditorKind());
elt("image-editor-data").value = address;
if (event && event.formData) {
event.formData.set("image_editor_data", address);
}
}
/*
* Keeps a copy of the picture as it stands so a later undo can put it
* back. Called before every change that alters the picture, and the
* oldest copy is dropped once the stack is full.
*/
function rememberImageEditor()
{
let kept = document.createElement("canvas");
kept.width = image_editor.store.width;
kept.height = image_editor.store.height;
kept.getContext("2d").drawImage(image_editor.store, 0, 0);
image_editor.earlier.push(kept);
if (image_editor.earlier.length > IMAGE_EDITOR_UNDO_DEPTH) {
image_editor.earlier.shift();
}
}
/*
* Puts the picture back as it stood before the last change, and sizes
* the canvas and its fields to match, since a turn or a resize changes
* how large the picture is. Does nothing where no earlier copy is kept.
*/
function undoImageEditor()
{
if (!image_editor || image_editor.earlier.length < 1) {
return;
}
image_editor.store = image_editor.earlier.pop();
image_editor.canvas.width = image_editor.store.width;
image_editor.canvas.height = image_editor.store.height;
elt("image-editor-width").value = image_editor.store.width;
elt("image-editor-height").value = image_editor.store.height;
drawImageEditor();
}
/*
* Draws the text a writer has typed so far at the place they clicked, in
* the font, size and style the text panel names. The picture is redrawn
* from what was kept first, so each letter typed replaces the run before
* it rather than drawing over it.
*/
function drawImageText()
{
let context = image_editor.context;
drawImageEditor();
let style = elt("image-editor-font-style").value;
let weight = (style == "bold") ? "bold " : "";
let slant = (style == "italic") ? "italic " : "";
context.font = slant + weight + elt("image-editor-font-size").value +
"px " + elt("image-editor-font").value;
context.fillStyle = elt("image-editor-color").value;
context.textBaseline = "top";
context.fillText(image_editor.typed, image_editor.typing_at.x,
image_editor.typing_at.y);
}
/*
* Takes a key the writer pressed while text is being placed and adds it
* to what is drawn. A letter is added, the rubbing-out key takes the
* last letter away, and the enter or escape key finishes the text and
* keeps it in the picture.
*
* @param Object event the key event to read
*/
function typeImageText(event)
{
if (!image_editor || !image_editor.typing_at) {
return;
}
if (event.key == "Enter" || event.key == "Escape") {
keepImageEditor();
image_editor.typing_at = null;
image_editor.typed = "";
return;
}
if (event.key == "Backspace") {
image_editor.typed = image_editor.typed.slice(0, -1);
} else if (event.key.length == 1) {
image_editor.typed += event.key;
} else {
return;
}
event.preventDefault();
drawImageText();
}
/*
* Shows the panel naming the font, its size and its style while the text
* tool is chosen, and hides it for every other tool, so the panel stands
* only where it means something.
*/
function showImageTextSettings()
{
let panel = elt("image-editor-text-settings");
if (panel) {
panel.style.display =
(elt("image-editor-tool").value == "text") ? "" : "none";
}
}
/*
* Takes a key pressed anywhere on the editing screen. An undo steps the
* picture back; any other key while text is being placed is added to
* that text.
*
* @param Object event the key event to read
*/
function keyImageEditor(event)
{
if (!image_editor) {
return;
}
if ((event.ctrlKey || event.metaKey) && !event.shiftKey &&
event.key.toLowerCase() == "z") {
event.preventDefault();
undoImageEditor();
return;
}
typeImageText(event);
}
/*
* Gives the kind of picture a save should write, worked out from the
* name the file will be written under. A writer who saves a picture as
* a name ending in jpg gets a jpg, whatever kind it was opened from.
* An ending the canvas cannot write back gives a png.
*
* @return String the kind of picture, as a media type
*/
function imageEditorKind()
{
let named = elt("save-as-name");
let ending = "";
if (named && named.value.indexOf(".") >= 0) {
ending = named.value.split(".").pop().toLowerCase();
}
if (ending == "jpg" || ending == "jpeg") {
return "image/jpeg";
}
if (ending == "webp") {
return "image/webp";
}
return "image/png";
}
/*
* Ties the controls and the canvas to what they do: the size fields
* resize, the marks turn and mirror, and the mouse on the canvas draws.
* The save marks are tied to packing the picture so it is read into the
* form once, just as a save is pressed.
*/
function listenImageEditor()
{
listen(elt("image-editor-width"), "change", sizeImageEditor);
listen(elt("image-editor-height"), "change", sizeImageEditor);
listen(elt("image-editor-rotate"), "click", rotateImageEditor);
listen(elt("image-editor-flip-across"), "click", function () {
flipImageEditor(false);
});
listen(elt("image-editor-flip-down"), "click", function () {
flipImageEditor(true);
});
listen(elt("image-editor-tool"), "change", showImageTextSettings);
let canvas = image_editor.canvas;
listen(canvas, "mousedown", startImageDraw);
listen(canvas, "mousemove", moveImageDraw);
listen(canvas, "mouseup", endImageDraw);
listen(canvas, "mouseleave", endImageDraw);
listen(document, "keydown", keyImageEditor);
showImageTextSettings();
let form = elt("editpageForm");
if (form) {
listen(form, "formdata", packImageEditor);
}
let save_by_hand = elt("wiki-save-button");
if (save_by_hand) {
listen(save_by_hand, "mousedown", packImageEditor);
}
let save_as = elt("wiki-save-as-button");
if (save_as) {
listen(save_as, "mousedown", packImageEditor);
}
}
listen(window, "load", initImageEditor);
(c) 2026 Seekquarry - Open Source Search Engine Software