Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-15 16:31:25 -05:00
Code Issues Activity

Merge pull request from penpot/alotor-bugfixing-2

Browse source 
🐛 Fix problem with RTL texts
This commit is contained in:
Eva Marco 2022-05-11 17:08:51 +02:00 • committed by GitHub
commit 50037a6a88
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 16 deletions
frontend/src/app
main/ui/shapes/text
svg_text.cljs
util
text_position_data.jstext_svg_position.cljs

6
frontend/src/app/main/ui/shapes/text/svg_text.cljs
View file

@ -91,8 +91,9 @@
alignment-bl (when (cfg/check-browser? :safari) "text-before-edge")
dominant-bl (when-not (cfg/check-browser? :safari) "ideographic")
rtl? (= "rtl"(:direction data))
props (-> #js {:key (dm/str "text-" (:id shape) "-" index)
:x (:x data)
:x (if rtl? (+ (:x data) (:width data)) (:x data))
:y y
:transform (position-data-transform shape data)
:alignmentBaseline alignment-bl
@ -104,7 +105,7 @@
:textDecoration (:text-decoration data)
:letterSpacing (:letter-spacing data)
:fontStyle (:font-style data)
:direction (if (:rtl data) "rtl" "ltr")
:direction (:direction data)
:whiteSpace "pre"}
(obj/set! "fill" (str "url(#fill-" index "-" render-id ")")))})
shape (assoc shape :fills (:fills data))]
@ -112,3 +113,4 @@
[:& (mf/provider muc/render-ctx) {:value (str render-id "_" (:id shape) "_" index)}
[:& shape-custom-strokes {:shape shape :key index}
[:> :text props (:text data)]]]))]]))

13
frontend/src/app/util/text_position_data.js
View file

@ -21,27 +21,21 @@ goog.scope(function () {
return range.getClientRects();
}
self.parse_text_nodes = function(parent, direction, textNode) {
self.parse_text_nodes = function(parent, textNode) {
const content = textNode.textContent;
const textSize = content.length;
const rtl = direction === "rtl";
let from = 0;
let to = 0;
let current = "";
let result = [];
let prevRect = null;
while (to < textSize) {
const rects = getRangeRects(textNode, from, to + 1);
if (rects.length > 1) {
let position;
if (rtl) {
position = rects[1];
} else {
position = rects[0];
}
const position = prevRect;
result.push({
node: parent,
@ -53,6 +47,7 @@ goog.scope(function () {
current = "";
} else {
prevRect = rects[0];
current += content[to];
to = to + 1;
}

12
frontend/src/app/util/text_svg_position.cljs
View file

@ -18,13 +18,14 @@
[parent-node direction text-node]
(letfn [(parse-entry [^js entry]
{:node (.-node entry)
:position (dom/bounding-rect->rect (.-position entry))
:text (.-text entry)})]
{:node (.-node entry)
:position (dom/bounding-rect->rect (.-position entry))
:text (.-text entry)
:direction direction})]
(into
[]
(map parse-entry)
(tpd/parse-text-nodes parent-node direction text-node))))
(tpd/parse-text-nodes parent-node text-node))))
(defn calc-text-node-positions
@ -75,7 +76,7 @@
(let [text-data (calc-text-node-positions base-node viewport zoom)]
(when (d/not-empty? text-data)
(->> text-data
(mapv (fn [{:keys [node position text]}]
(mapv (fn [{:keys [node position text direction]}]
(let [{:keys [x y width height]} position
styles (js/getComputedStyle ^js node)
get (fn [prop]
@ -87,6 +88,7 @@
:y (+ y height)
:width width
:height height
:direction direction
:font-family (str (get "font-family"))
:font-size (str (get "font-size"))
:font-weight (str (get "font-weight"))