3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-18 14:36:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix problem with RTL texts

Browse source
This commit is contained in:
alonso.torres 2022-05-11 15:53:27 +02:00
parent 20211101b7
commit fef69cb707
3 changed files with 15 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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") alignment-bl (when (cfg/check-browser? :safari) "text-before-edge")
dominant-bl (when-not (cfg/check-browser? :safari) "ideographic") dominant-bl (when-not (cfg/check-browser? :safari) "ideographic")
rtl? (= "rtl"(:direction data))
props (-> #js {:key (dm/str "text-" (:id shape) "-" index) props (-> #js {:key (dm/str "text-" (:id shape) "-" index)
:x (:x data) :x (if rtl? (+ (:x data) (:width data)) (:x data))
:y y :y y
:transform (position-data-transform shape data) :transform (position-data-transform shape data)
:alignmentBaseline alignment-bl :alignmentBaseline alignment-bl
@ -104,7 +105,7 @@
:textDecoration (:text-decoration data) :textDecoration (:text-decoration data)
:letterSpacing (:letter-spacing data) :letterSpacing (:letter-spacing data)
:fontStyle (:font-style data) :fontStyle (:font-style data)
:direction (if (:rtl data) "rtl" "ltr") :direction (:direction data)
:whiteSpace "pre"} :whiteSpace "pre"}
(obj/set! "fill" (str "url(#fill-" index "-" render-id ")")))}) (obj/set! "fill" (str "url(#fill-" index "-" render-id ")")))})
shape (assoc shape :fills (:fills data))] shape (assoc shape :fills (:fills data))]
@ -112,3 +113,4 @@
[:& (mf/provider muc/render-ctx) {:value (str render-id "_" (:id shape) "_" index)} [:& (mf/provider muc/render-ctx) {:value (str render-id "_" (:id shape) "_" index)}
[:& shape-custom-strokes {:shape shape :key index} [:& shape-custom-strokes {:shape shape :key index}
[:> :text props (:text data)]]]))]])) [:> :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(); return range.getClientRects();
} }
self.parse_text_nodes = function(parent, direction, textNode) { self.parse_text_nodes = function(parent, textNode) {
const content = textNode.textContent; const content = textNode.textContent;
const textSize = content.length; const textSize = content.length;
const rtl = direction === "rtl";
let from = 0; let from = 0;
let to = 0; let to = 0;
let current = ""; let current = "";
let result = []; let result = [];
let prevRect = null;
while (to < textSize) { while (to < textSize) {
const rects = getRangeRects(textNode, from, to + 1); const rects = getRangeRects(textNode, from, to + 1);
if (rects.length > 1) { if (rects.length > 1) {
let position; const position = prevRect;
if (rtl) {
position = rects[1];
} else {
position = rects[0];
}
result.push({ result.push({
node: parent, node: parent,
@ -53,6 +47,7 @@ goog.scope(function () {
current = ""; current = "";
} else { } else {
prevRect = rects[0];
current += content[to]; current += content[to];
to = to + 1; to = to + 1;
} }

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

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