From 732c79b7b54320fb0331a6dd021ba3a969b071f5 Mon Sep 17 00:00:00 2001 From: Aitor Moreno Date: Thu, 4 Sep 2025 14:57:06 +0200 Subject: [PATCH] :tada: Add function to retrieve caret position --- frontend/src/app/render_wasm/api/fonts.cljs | 9 +++- frontend/text-editor/src/index.html | 7 +++ frontend/text-editor/vite.config.js | 55 +++++++++++++++++++-- render-wasm/src/render.rs | 4 +- render-wasm/src/render/text.rs | 29 ++++++----- render-wasm/src/shapes.rs | 55 +++++++++++++++++---- render-wasm/src/shapes/text.rs | 23 +++++++-- render-wasm/src/view.rs | 13 +++++ render-wasm/src/wasm/text.rs | 43 +++++++++++++++- 9 files changed, 203 insertions(+), 35 deletions(-) diff --git a/frontend/src/app/render_wasm/api/fonts.cljs b/frontend/src/app/render_wasm/api/fonts.cljs index 7bcb176d06..3bd3490639 100644 --- a/frontend/src/app/render_wasm/api/fonts.cljs +++ b/frontend/src/app/render_wasm/api/fonts.cljs @@ -98,6 +98,13 @@ (:style font-data) emoji? fallback?) + + (h/call wasm/internal-module "_update_shape_text_layout_for" + (aget shape-id-buffer 0) + (aget shape-id-buffer 1) + (aget shape-id-buffer 2) + (aget shape-id-buffer 3)) + true)) (defn- fetch-font @@ -217,7 +224,6 @@ [shape-id fonts] (keep (fn [font] (store-font shape-id font)) fonts)) - (defn add-emoji-font [fonts] (conj fonts {:font-id "gfont-noto-color-emoji" @@ -275,7 +281,6 @@ :symbols-2 {:font-id "gfont-noto-sans-symbols-2" :font-variant-id "regular" :style 0 :weight 400 :is-fallback true} :music {:font-id "gfont-noto-music" :font-variant-id "regular" :style 0 :weight 400 :is-fallback true}}) - (defn add-noto-fonts [fonts languages] (reduce (fn [acc lang] (if-let [font (get noto-fonts lang)] diff --git a/frontend/text-editor/src/index.html b/frontend/text-editor/src/index.html index 7ef89d3591..0dd8d4bbd8 100644 --- a/frontend/text-editor/src/index.html +++ b/frontend/text-editor/src/index.html @@ -528,6 +528,13 @@ Module._init_shapes_pool(1); setupInteraction(canvas); + canvas.addEventListener('click', (e) => { + console.log('click', e.type, e); + useShape(uuid); + const caretPosition = Module._get_caret_position_at(e.offsetX, e.offsetY); + console.log('caretPosition', caretPosition); + }) + storeFonts(fonts) console.log("text shape", uuid); diff --git a/frontend/text-editor/vite.config.js b/frontend/text-editor/vite.config.js index a6e7b4daf4..34d8e7cdfc 100644 --- a/frontend/text-editor/vite.config.js +++ b/frontend/text-editor/vite.config.js @@ -1,12 +1,61 @@ -import { resolve } from "node:path"; +import path from "node:path"; +import fs from 'node:fs/promises'; import { defineConfig } from "vite"; -import { coverageConfigDefaults } from "vitest/config" +import { coverageConfigDefaults } from "vitest/config"; + +async function waitFor(timeInMillis) { + return new Promise(resolve => + setTimeout(_ => resolve(), timeInMillis) + ); +} + +const wasmWatcherPlugin = (options = {}) => { + return { + name: "vite-wasm-watcher-plugin", + configureServer(server) { + server.watcher.add("../resources/public/js/render_wasm.wasm") + server.watcher.add("../resources/public/js/render_wasm.js") + server.watcher.on("change", async (file) => { + if (file.includes("../resources/")) { + // If we copy the files immediately, we end + // up with an empty .js file (I don't know why). + await waitFor(100) + // copy files. + await fs.copyFile( + path.resolve(file), + path.resolve('./src/wasm/', path.basename(file)) + ) + console.log(`${file} changed`); + } + }); + + server.watcher.on("add", async (file) => { + if (file.includes("../resources/")) { + await fs.copyFile( + path.resolve(file), + path.resolve("./src/wasm/", path.basename(file)), + ); + console.log(`${file} added`); + } + }); + + server.watcher.on("unlink", (file) => { + if (file.includes("../resources/")) { + console.log(`${file} removed`); + } + }); + }, + }; +}; export default defineConfig({ + plugins: [ + wasmWatcherPlugin() + ], root: "./src", resolve: { alias: { - "~": resolve("./src"), + "~": path.resolve("./src"), }, }, build: { diff --git a/render-wasm/src/render.rs b/render-wasm/src/render.rs index 80144fe7e4..7effbf043e 100644 --- a/render-wasm/src/render.rs +++ b/render-wasm/src/render.rs @@ -619,7 +619,7 @@ impl RenderState { let inner_shadows = shape.inner_shadow_paints(); let blur_filter = shape.image_filter(1.); let count_inner_strokes = shape.count_visible_inner_strokes(); - let mut paragraphs = text_content.paragraph_builder_group_from_text(None); + let mut paragraph_builders = text_content.paragraph_builder_group_from_text(None); let mut paragraphs_with_shadows = text_content.paragraph_builder_group_from_text(Some(true)); let mut stroke_paragraphs_list = shape @@ -693,7 +693,7 @@ impl RenderState { Some(self), None, &shape, - &mut paragraphs, + &mut paragraph_builders, Some(fills_surface_id), None, blur_filter.as_ref(), diff --git a/render-wasm/src/render/text.rs b/render-wasm/src/render/text.rs index c435344441..4f69d38926 100644 --- a/render-wasm/src/render/text.rs +++ b/render-wasm/src/render/text.rs @@ -195,7 +195,11 @@ pub fn render( render_canvas.restore(); } -fn draw_text(canvas: &Canvas, shape: &Shape, paragraph_builders: &mut [Vec]) { +fn draw_text( + canvas: &Canvas, + shape: &Shape, + paragraph_builder_groups: &mut [Vec], +) { // Width let paragraph_width = if let crate::shapes::Type::Text(text_content) = &shape.shape_type { text_content.width() @@ -205,7 +209,8 @@ fn draw_text(canvas: &Canvas, shape: &Shape, paragraph_builders: &mut [Vec (container_height - total_content_height) / 2.0, VerticalAlign::Bottom => container_height - total_content_height, @@ -214,19 +219,19 @@ fn draw_text(canvas: &Canvas, shape: &Shape, paragraph_builders: &mut [Vec 1 { - let mut first_paragraph = group[0].build(); + let mut first_paragraph = paragraph_builder_group[0].build(); first_paragraph.layout(paragraph_width); global_offset_y += first_paragraph.height(); } else { diff --git a/render-wasm/src/shapes.rs b/render-wasm/src/shapes.rs index 675b687988..9bfc427073 100644 --- a/render-wasm/src/shapes.rs +++ b/render-wasm/src/shapes.rs @@ -45,8 +45,7 @@ pub use svgraw::*; pub use text::*; pub use transform::*; -use crate::math; -use crate::math::{Bounds, Matrix, Point}; +use crate::math::{self, Bounds, Matrix, Point}; use indexmap::IndexSet; use crate::state::ShapesPool; @@ -655,12 +654,17 @@ impl Shape { Point::new(self.selrect.x(), self.selrect.y() + self.selrect.height()), ); - let center = self.center(); - let mut matrix = self.transform; - matrix.post_translate(center); - matrix.pre_translate(-center); - - bounds.transform_mut(&matrix); + // Apply this transformation only when self.transform + // is not the identity matrix because if it is, + // the result of applying this transformations would be + // the same identity matrix. + if !self.transform.is_identity() { + let mut matrix = self.transform; + let center = self.center(); + matrix.post_translate(center); + matrix.pre_translate(-center); + bounds.transform_mut(&matrix); + } bounds } @@ -829,6 +833,10 @@ impl Shape { rect } + pub fn left_top(&self) -> Point { + Point::new(self.selrect.left, self.selrect.top) + } + pub fn center(&self) -> Point { self.selrect.center() } @@ -918,13 +926,42 @@ impl Shape { ancestors.insert(parent_id); current_id = parent_id; } else { - break; + // FIXME: This should panic! I've removed it temporarily until + // we fix the problems with shapes without parents. + // panic!("Parent can't be found"); } } ancestors } + pub fn get_matrix(&self) -> Matrix { + let mut matrix = Matrix::new_identity(); + matrix.post_translate(self.left_top()); + matrix.post_rotate(self.rotation, self.center()); + matrix + } + + pub fn get_concatenated_matrix(&self, shapes: &ShapesPool) -> Matrix { + let mut matrix = Matrix::new_identity(); + let mut current_id = self.id; + while let Some(parent_id) = shapes.get(¤t_id).and_then(|s| s.parent_id) { + if parent_id == Uuid::nil() { + break; + } + + if let Some(parent) = shapes.get(&parent_id) { + matrix.pre_concat(&parent.get_matrix()); + current_id = parent_id; + } else { + // FIXME: This should panic! I've removed it temporarily until + // we fix the problems with shapes without parents. + // panic!("Parent can't be found"); + } + } + matrix + } + pub fn image_filter(&self, scale: f32) -> Option { self.blur .filter(|blur| !blur.hidden) diff --git a/render-wasm/src/shapes/text.rs b/render-wasm/src/shapes/text.rs index a659a7f1a7..7314f59323 100644 --- a/render-wasm/src/shapes/text.rs +++ b/render-wasm/src/shapes/text.rs @@ -10,10 +10,12 @@ use skia_safe::{ paint::{self, Paint}, textlayout::ParagraphBuilder, textlayout::ParagraphStyle, + textlayout::PositionWithAffinity, }; use std::collections::HashSet; use super::FontFamily; +use crate::math::Point; use crate::shapes::{self, merge_fills}; use crate::utils::{get_fallback_fonts, get_font_collection}; use crate::Uuid; @@ -221,6 +223,22 @@ impl TextContent { self.bounds = Rect::from_ltrb(p1.x, p1.y, p2.x, p2.y); } + pub fn get_caret_position_at(&self, point: &Point) -> Option { + let mut offset_y = 0.0; + let paragraphs = self.layout.paragraphs.iter().flatten(); + + for paragraph in paragraphs { + let start_y = offset_y; + let end_y = offset_y + paragraph.height(); + if point.y > start_y && point.y < end_y { + let position_with_affinity = paragraph.get_glyph_position_at_coordinate(*point); + return Some(position_with_affinity); + } + offset_y += paragraph.height(); + } + None + } + /// Builds the ParagraphBuilders necessary to render /// this text. pub fn paragraph_builder_group_from_text( @@ -273,8 +291,6 @@ impl TextContent { /// Performs an Auto Width text layout. fn text_layout_auto_width(&self) -> TextContentLayoutResult { - // TODO: Deberíamos comprobar primero que los párrafos - // no están generados. let mut paragraph_builders = self.paragraph_builder_group_from_text(None); let paragraphs = self.build_paragraphs_from_paragraph_builders(&mut paragraph_builders, f32::MAX); @@ -297,8 +313,6 @@ impl TextContent { /// Performs an Auto Height text layout. fn text_layout_auto_height(&self) -> TextContentLayoutResult { let width = self.width(); - // TODO: Deberíamos primero comprobar si existen los - // paragraph builders para poder obtener el layout. let mut paragraph_builders = self.paragraph_builder_group_from_text(None); let paragraphs = self.build_paragraphs_from_paragraph_builders(&mut paragraph_builders, f32::INFINITY); @@ -335,7 +349,6 @@ impl TextContent { pub fn update_layout(&mut self, selrect: Rect) -> TextContentSize { self.size.set_size(selrect.width(), selrect.height()); - // 3. Width and Height Calculation match self.grow_type() { GrowType::AutoHeight => { let result = self.text_layout_auto_height(); diff --git a/render-wasm/src/view.rs b/render-wasm/src/view.rs index a78c11f6a3..8f21a27eae 100644 --- a/render-wasm/src/view.rs +++ b/render-wasm/src/view.rs @@ -1,5 +1,7 @@ use skia_safe::Rect; +use crate::math::{Matrix, Point}; + #[derive(Debug, Copy, Clone)] pub(crate) struct Viewbox { pub pan_x: f32, @@ -53,7 +55,18 @@ impl Viewbox { .set_wh(self.width / self.zoom, self.height / self.zoom); } + pub fn pan(&self) -> Point { + Point::new(self.pan_x, self.pan_y) + } + pub fn zoom(&self) -> f32 { self.zoom } + + pub fn get_matrix(&self) -> Matrix { + let mut matrix = Matrix::new_identity(); + matrix.post_translate(self.pan()); + matrix.post_scale((self.zoom, self.zoom), None); + matrix + } } diff --git a/render-wasm/src/wasm/text.rs b/render-wasm/src/wasm/text.rs index 7af6a91235..14c955af88 100644 --- a/render-wasm/src/wasm/text.rs +++ b/render-wasm/src/wasm/text.rs @@ -1,12 +1,13 @@ use macros::ToJs; use super::fonts::RawFontStyle; +use crate::math::{Matrix, Point}; use crate::mem; use crate::shapes::{ self, GrowType, TextAlign, TextDecoration, TextDirection, TextTransform, Type, }; -use crate::utils::uuid_from_u32; -use crate::{with_current_shape_mut, STATE}; +use crate::utils::{uuid_from_u32, uuid_from_u32_quartet}; +use crate::{with_current_shape, with_current_shape_mut, with_state_mut, STATE}; const RAW_LEAF_DATA_SIZE: usize = std::mem::size_of::(); pub const RAW_LEAF_FILLS_SIZE: usize = 160; @@ -370,3 +371,41 @@ pub extern "C" fn update_shape_text_layout() { } }); } + +#[no_mangle] +pub extern "C" fn update_shape_text_layout_for(a: u32, b: u32, c: u32, d: u32) { + with_state_mut!(state, { + let shape_id = uuid_from_u32_quartet(a, b, c, d); + if let Some(shape) = state.shapes.get_mut(&shape_id) { + if let Type::Text(text_content) = &mut shape.shape_type { + text_content.update_layout(shape.selrect); + } + } + }); +} + +#[no_mangle] +pub extern "C" fn get_caret_position_at(x: f32, y: f32) -> i32 { + with_current_shape!(state, |shape: &Shape| { + if let Type::Text(text_content) = &shape.shape_type { + let mut matrix = Matrix::new_identity(); + let shape_matrix = shape.get_concatenated_matrix(&state.shapes); + let view_matrix = state.render_state.viewbox.get_matrix(); + if let Some(inv_view_matrix) = view_matrix.invert() { + matrix.post_concat(&inv_view_matrix); + matrix.post_concat(&shape_matrix); + + let mapped_point = matrix.map_point(Point::new(x, y)); + + if let Some(position_with_affinity) = + text_content.get_caret_position_at(&mapped_point) + { + return position_with_affinity.position; + } + } + } else { + panic!("Trying to update grow type in a shape that it's not a text shape"); + } + }); + -1 +}