johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

🎉 Add function to retrieve caret position

Browse Source
This commit is contained in:
Aitor Moreno
2025-09-04 14:57:06 +02:00
parent 0f67730198
commit 732c79b7b5
9 changed files with 203 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/app/render_wasm/api/fonts.cljs
View File

@@ -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)]

7
frontend/text-editor/src/index.html
View File

@@ -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);

55
frontend/text-editor/vite.config.js
View File

@@ -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: {

4
render-wasm/src/render.rs
View File

@@ -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(),

29
render-wasm/src/render/text.rs
View File

@@ -195,7 +195,11 @@ pub fn render(
render_canvas.restore();
}
fn draw_text(canvas: &Canvas, shape: &Shape, paragraph_builders: &mut [Vec<ParagraphBuilder>]) {
fn draw_text(
canvas: &Canvas,
shape: &Shape,
paragraph_builder_groups: &mut [Vec<ParagraphBuilder>],
) {
// 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<Parag
// Height
let container_height = shape.selrect().height();
let total_content_height = calculate_all_paragraphs_height(paragraph_builders, paragraph_width);
let total_content_height =
calculate_all_paragraphs_height(paragraph_builder_groups, paragraph_width);
let mut global_offset_y = match shape.vertical_align() {
VerticalAlign::Center => (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<Parag
let layer_rec = SaveLayerRec::default();
canvas.save_layer(&layer_rec);
for group in paragraph_builders {
for paragraph_builder_group in paragraph_builder_groups {
let mut group_offset_y = global_offset_y;
let group_len = group.len();
let group_len = paragraph_builder_group.len();
for builder in group.iter_mut() {
let mut skia_paragraph = builder.build();
skia_paragraph.layout(paragraph_width);
let paragraph_height = skia_paragraph.height();
for paragraph_builder in paragraph_builder_group.iter_mut() {
let mut paragraph = paragraph_builder.build();
paragraph.layout(paragraph_width);
let paragraph_height = paragraph.height();
let xy = (shape.selrect().x(), shape.selrect().y() + group_offset_y);
skia_paragraph.paint(canvas, xy);
paragraph.paint(canvas, xy);
for line_metrics in skia_paragraph.get_line_metrics().iter() {
render_text_decoration(canvas, &skia_paragraph, builder, line_metrics, xy);
for line_metrics in paragraph.get_line_metrics().iter() {
render_text_decoration(canvas, &paragraph, paragraph_builder, line_metrics, xy);
}
if group_len == 1 {
@@ -235,7 +240,7 @@ fn draw_text(canvas: &Canvas, shape: &Shape, paragraph_builders: &mut [Vec<Parag
}
if group_len > 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 {

55
render-wasm/src/shapes.rs
View File

@@ -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(&current_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<skia::ImageFilter> {
self.blur
.filter(|blur| !blur.hidden)

23
render-wasm/src/shapes/text.rs
View File

@@ -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<PositionWithAffinity> {
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();

13
render-wasm/src/view.rs
View File

@@ -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
}
}

43
render-wasm/src/wasm/text.rs
View File

@@ -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::<RawTextLeafAttrs>();
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
}