From 11e3a85cc2445a078fed7933b08814b5f0ad6c31 Mon Sep 17 00:00:00 2001 From: u8array Date: Wed, 20 May 2026 22:59:59 +0200 Subject: [PATCH 1/5] feat(ellipse): toggle lockAspect from Properties Panel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A user who wants to flip an ellipse into a circle (or back) had to delete the object and pick the Circle palette entry — lockAspect was write-once at creation time. The new checkbox in the ellipse PropertiesPanel makes the constraint editable on existing objects: - Enabling collapses width and height to min(width, height) so the resulting circle fits inside the prior bbox. max would push past the user's visual extent on one axis; min keeps the move inward and matches the intent of "sperren" — constrain, don't grow. - Disabling drops the flag (undefined, matching the parser-emitted shape) without touching the dimensions, so width and height are immediately editable again with their previous values. uniformScale already reads lockAspect via a predicate on props, so the Konva transformer's enabled anchors recompute on the same render as the flag flip — no extra wiring needed. --- src/locales/ar.ts | 1 + src/locales/bg.ts | 1 + src/locales/cs.ts | 1 + src/locales/da.ts | 1 + src/locales/de.ts | 1 + src/locales/el.ts | 1 + src/locales/en.ts | 1 + src/locales/es.ts | 1 + src/locales/et.ts | 1 + src/locales/fa.ts | 1 + src/locales/fi.ts | 1 + src/locales/fr.ts | 1 + src/locales/he.ts | 1 + src/locales/hr.ts | 1 + src/locales/hu.ts | 1 + src/locales/it.ts | 1 + src/locales/ja.ts | 1 + src/locales/ko.ts | 1 + src/locales/lt.ts | 1 + src/locales/lv.ts | 1 + src/locales/nl.ts | 1 + src/locales/no.ts | 1 + src/locales/pl.ts | 1 + src/locales/pt.ts | 1 + src/locales/ro.ts | 1 + src/locales/sk.ts | 1 + src/locales/sl.ts | 1 + src/locales/sr.ts | 1 + src/locales/sv.ts | 1 + src/locales/tr.ts | 1 + src/locales/zh-hans.ts | 1 + src/locales/zh-hant.ts | 1 + src/registry/ellipse.tsx | 26 ++++++++++++++++++++++++++ 33 files changed, 58 insertions(+) diff --git a/src/locales/ar.ts b/src/locales/ar.ts index 0d29468d..f289b20b 100644 --- a/src/locales/ar.ts +++ b/src/locales/ar.ts @@ -263,6 +263,7 @@ const ar = { height: 'الارتفاع (نقطة)', thickness: 'الحدود (نقطة)', filled: 'ممتلئ', + lockAspect: 'دائرة (تثبيت نسبة العرض إلى الارتفاع)', color: 'اللون', colorB: 'B — أسود', colorW: 'W — أبيض', diff --git a/src/locales/bg.ts b/src/locales/bg.ts index 3d92f752..b16222ba 100644 --- a/src/locales/bg.ts +++ b/src/locales/bg.ts @@ -263,6 +263,7 @@ const bg = { height: 'Височина (точки)', thickness: 'Рамка (точки)', filled: 'Запълнен', + lockAspect: 'Кръг (заключи съотношението)', color: 'Цвят', colorB: 'B — Черен', colorW: 'W — Бял', diff --git a/src/locales/cs.ts b/src/locales/cs.ts index d85150be..4bbd77ab 100644 --- a/src/locales/cs.ts +++ b/src/locales/cs.ts @@ -263,6 +263,7 @@ const cs = { height: 'Výška (body)', thickness: 'Rámeček (body)', filled: 'Vyplněný', + lockAspect: 'Kruh (uzamknout poměr stran)', color: 'Barva', colorB: 'B — Černá', colorW: 'W — Bílá', diff --git a/src/locales/da.ts b/src/locales/da.ts index 070c6ae0..a6d63896 100644 --- a/src/locales/da.ts +++ b/src/locales/da.ts @@ -263,6 +263,7 @@ const da = { height: 'Højde (punkter)', thickness: 'Kant (punkter)', filled: 'Udfyldt', + lockAspect: 'Cirkel (lås formatforhold)', color: 'Farve', colorB: 'B — Sort', colorW: 'W — Hvid', diff --git a/src/locales/de.ts b/src/locales/de.ts index 4f93f7ea..21934be2 100644 --- a/src/locales/de.ts +++ b/src/locales/de.ts @@ -284,6 +284,7 @@ const de = { height: 'Höhe (Punkte)', thickness: 'Rahmen (Punkte)', filled: 'Gefüllt', + lockAspect: 'Kreis (Seitenverhältnis sperren)', color: 'Farbe', colorB: 'B — Schwarz', colorW: 'W — Weiß', diff --git a/src/locales/el.ts b/src/locales/el.ts index 7c1af2a3..24eb3dd4 100644 --- a/src/locales/el.ts +++ b/src/locales/el.ts @@ -263,6 +263,7 @@ const el = { height: 'Ύψος (κουκκίδες)', thickness: 'Πλαίσιο (κουκκίδες)', filled: 'Γεμισμένο', + lockAspect: 'Κύκλος (κλείδωμα αναλογίας διαστάσεων)', color: 'Χρώμα', colorB: 'B — Μαύρο', colorW: 'W — Λευκό', diff --git a/src/locales/en.ts b/src/locales/en.ts index c801945d..a3474e7b 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -284,6 +284,7 @@ const en = { height: 'Height (dots)', thickness: 'Border (dots)', filled: 'Filled', + lockAspect: 'Circle (lock aspect ratio)', color: 'Color', colorB: 'B — Black', colorW: 'W — White', diff --git a/src/locales/es.ts b/src/locales/es.ts index eefc0492..6163e846 100644 --- a/src/locales/es.ts +++ b/src/locales/es.ts @@ -263,6 +263,7 @@ const es = { height: 'Alto (puntos)', thickness: 'Borde (puntos)', filled: 'Relleno', + lockAspect: 'Círculo (bloquear relación de aspecto)', color: 'Color', colorB: 'B — Negro', colorW: 'W — Blanco', diff --git a/src/locales/et.ts b/src/locales/et.ts index 9abebbb4..408df9a6 100644 --- a/src/locales/et.ts +++ b/src/locales/et.ts @@ -263,6 +263,7 @@ const et = { height: 'Kõrgus (punkti)', thickness: 'Ääris (punkti)', filled: 'Täidetud', + lockAspect: 'Ring (lukusta kuvasuhe)', color: 'Värvus', colorB: 'B — Must', colorW: 'W — Valge', diff --git a/src/locales/fa.ts b/src/locales/fa.ts index ffd5b2fa..ca99b0da 100644 --- a/src/locales/fa.ts +++ b/src/locales/fa.ts @@ -263,6 +263,7 @@ const fa = { height: 'ارتفاع (نقطه)', thickness: 'حاشیه (نقطه)', filled: 'پر شده', + lockAspect: 'دایره (قفل کردن نسبت ابعاد)', color: 'رنگ', colorB: 'B — مشکی', colorW: 'W — سفید', diff --git a/src/locales/fi.ts b/src/locales/fi.ts index 435ef73d..aaa2cd54 100644 --- a/src/locales/fi.ts +++ b/src/locales/fi.ts @@ -263,6 +263,7 @@ const fi = { height: 'Korkeus (pistettä)', thickness: 'Reunus (pistettä)', filled: 'Täytetty', + lockAspect: 'Ympyrä (lukitse kuvasuhde)', color: 'Väri', colorB: 'B — Musta', colorW: 'W — Valkoinen', diff --git a/src/locales/fr.ts b/src/locales/fr.ts index 52f1736b..12c42d3f 100644 --- a/src/locales/fr.ts +++ b/src/locales/fr.ts @@ -263,6 +263,7 @@ const fr = { height: 'Hauteur (points)', thickness: 'Bordure (points)', filled: 'Rempli', + lockAspect: 'Cercle (verrouiller le rapport d\'aspect)', color: 'Couleur', colorB: 'B — Noir', colorW: 'W — Blanc', diff --git a/src/locales/he.ts b/src/locales/he.ts index 5f2388e6..2d28db26 100644 --- a/src/locales/he.ts +++ b/src/locales/he.ts @@ -263,6 +263,7 @@ const he = { height: 'גובה (נקודות)', thickness: 'גבול (נקודות)', filled: 'מלא', + lockAspect: 'עיגול (נעל יחס גובה-רוחב)', color: 'צבע', colorB: 'B — שחור', colorW: 'W — לבן', diff --git a/src/locales/hr.ts b/src/locales/hr.ts index 71db443a..600f473a 100644 --- a/src/locales/hr.ts +++ b/src/locales/hr.ts @@ -263,6 +263,7 @@ const hr = { height: 'Visina (točke)', thickness: 'Okvir (točke)', filled: 'Ispunjen', + lockAspect: 'Krug (zaključaj omjer stranica)', color: 'Boja', colorB: 'B — Crna', colorW: 'W — Bijela', diff --git a/src/locales/hu.ts b/src/locales/hu.ts index 857de47f..317499bb 100644 --- a/src/locales/hu.ts +++ b/src/locales/hu.ts @@ -263,6 +263,7 @@ const hu = { height: 'Magasság (pont)', thickness: 'Keret (pont)', filled: 'Kitöltött', + lockAspect: 'Kör (oldalarány rögzítése)', color: 'Szín', colorB: 'B — Fekete', colorW: 'W — Fehér', diff --git a/src/locales/it.ts b/src/locales/it.ts index 5bf09103..3a8e3041 100644 --- a/src/locales/it.ts +++ b/src/locales/it.ts @@ -263,6 +263,7 @@ const it = { height: 'Altezza (punti)', thickness: 'Bordo (punti)', filled: 'Riempito', + lockAspect: 'Cerchio (blocca proporzioni)', color: 'Colore', colorB: 'B — Nero', colorW: 'W — Bianco', diff --git a/src/locales/ja.ts b/src/locales/ja.ts index 0eb26d0e..daa27380 100644 --- a/src/locales/ja.ts +++ b/src/locales/ja.ts @@ -263,6 +263,7 @@ const ja = { height: '高さ (ドット)', thickness: '枠線 (ドット)', filled: '塗りつぶし', + lockAspect: '円(アスペクト比を固定)', color: '色', colorB: 'B — 黒', colorW: 'W — 白', diff --git a/src/locales/ko.ts b/src/locales/ko.ts index 9880b511..f9a5d41e 100644 --- a/src/locales/ko.ts +++ b/src/locales/ko.ts @@ -263,6 +263,7 @@ const ko = { height: '높이 (점)', thickness: '테두리 (점)', filled: '채우기', + lockAspect: '원 (가로세로 비율 고정)', color: '색상', colorB: 'B — 검정', colorW: 'W — 흰색', diff --git a/src/locales/lt.ts b/src/locales/lt.ts index a7196bed..f07a3aba 100644 --- a/src/locales/lt.ts +++ b/src/locales/lt.ts @@ -263,6 +263,7 @@ const lt = { height: 'Aukštis (taškai)', thickness: 'Rėmelis (taškai)', filled: 'Užpildytas', + lockAspect: 'Apskritimas (užfiksuoti kraštinių santykį)', color: 'Spalva', colorB: 'B — Juoda', colorW: 'W — Balta', diff --git a/src/locales/lv.ts b/src/locales/lv.ts index c930c049..bbe2c84e 100644 --- a/src/locales/lv.ts +++ b/src/locales/lv.ts @@ -263,6 +263,7 @@ const lv = { height: 'Augstums (punkti)', thickness: 'Apmale (punkti)', filled: 'Aizpildīts', + lockAspect: 'Aplis (fiksēt malu attiecību)', color: 'Krāsa', colorB: 'B — Melna', colorW: 'W — Balta', diff --git a/src/locales/nl.ts b/src/locales/nl.ts index da274dbf..c5b462a0 100644 --- a/src/locales/nl.ts +++ b/src/locales/nl.ts @@ -263,6 +263,7 @@ const nl = { height: 'Hoogte (punten)', thickness: 'Rand (punten)', filled: 'Gevuld', + lockAspect: 'Cirkel (beeldverhouding vergrendelen)', color: 'Kleur', colorB: 'B — Zwart', colorW: 'W — Wit', diff --git a/src/locales/no.ts b/src/locales/no.ts index f5fb89ca..46c3e000 100644 --- a/src/locales/no.ts +++ b/src/locales/no.ts @@ -263,6 +263,7 @@ const no = { height: 'Høyde (punkter)', thickness: 'Kant (punkter)', filled: 'Fylt', + lockAspect: 'Sirkel (lås sideforhold)', color: 'Farge', colorB: 'B — Svart', colorW: 'W — Hvit', diff --git a/src/locales/pl.ts b/src/locales/pl.ts index cc75ff95..2ed73d71 100644 --- a/src/locales/pl.ts +++ b/src/locales/pl.ts @@ -263,6 +263,7 @@ const pl = { height: 'Wysokość (punkty)', thickness: 'Kontur (punkty)', filled: 'Wypełniony', + lockAspect: 'Okrąg (zablokuj proporcje)', color: 'Kolor', colorB: 'B — Czarny', colorW: 'W — Biały', diff --git a/src/locales/pt.ts b/src/locales/pt.ts index 17a9cddc..bf913146 100644 --- a/src/locales/pt.ts +++ b/src/locales/pt.ts @@ -263,6 +263,7 @@ const pt = { height: 'Altura (pontos)', thickness: 'Borda (pontos)', filled: 'Preenchido', + lockAspect: 'Círculo (bloquear proporção)', color: 'Cor', colorB: 'B — Preto', colorW: 'W — Branco', diff --git a/src/locales/ro.ts b/src/locales/ro.ts index c3f1932c..a3591e41 100644 --- a/src/locales/ro.ts +++ b/src/locales/ro.ts @@ -263,6 +263,7 @@ const ro = { height: 'Înălțime (puncte)', thickness: 'Chenar (puncte)', filled: 'Umplut', + lockAspect: 'Cerc (blochează raportul de aspect)', color: 'Culoare', colorB: 'B — Negru', colorW: 'W — Alb', diff --git a/src/locales/sk.ts b/src/locales/sk.ts index 78510bbd..e4b3ca4f 100644 --- a/src/locales/sk.ts +++ b/src/locales/sk.ts @@ -263,6 +263,7 @@ const sk = { height: 'Výška (body)', thickness: 'Rámček (body)', filled: 'Vyplnený', + lockAspect: 'Kruh (uzamknúť pomer strán)', color: 'Farba', colorB: 'B — Čierna', colorW: 'W — Biela', diff --git a/src/locales/sl.ts b/src/locales/sl.ts index c9c83298..a7044b8a 100644 --- a/src/locales/sl.ts +++ b/src/locales/sl.ts @@ -263,6 +263,7 @@ const sl = { height: 'Višina (točke)', thickness: 'Okvir (točke)', filled: 'Zapolnjen', + lockAspect: 'Krog (zakleni razmerje stranic)', color: 'Barva', colorB: 'B — Črna', colorW: 'W — Bela', diff --git a/src/locales/sr.ts b/src/locales/sr.ts index 4c131f76..7106e914 100644 --- a/src/locales/sr.ts +++ b/src/locales/sr.ts @@ -263,6 +263,7 @@ const sr = { height: 'Visina (tačke)', thickness: 'Okvir (tačke)', filled: 'Popunjen', + lockAspect: 'Круг (закључај однос страница)', color: 'Boja', colorB: 'B — Crna', colorW: 'W — Bela', diff --git a/src/locales/sv.ts b/src/locales/sv.ts index bd95a933..bc160a98 100644 --- a/src/locales/sv.ts +++ b/src/locales/sv.ts @@ -263,6 +263,7 @@ const sv = { height: 'Höjd (punkter)', thickness: 'Kant (punkter)', filled: 'Fylld', + lockAspect: 'Cirkel (lås sidförhållande)', color: 'Färg', colorB: 'B — Svart', colorW: 'W — Vit', diff --git a/src/locales/tr.ts b/src/locales/tr.ts index a9cd7fe6..ce6fe89f 100644 --- a/src/locales/tr.ts +++ b/src/locales/tr.ts @@ -263,6 +263,7 @@ const tr = { height: 'Yükseklik (nokta)', thickness: 'Kenarlık (nokta)', filled: 'Dolu', + lockAspect: 'Daire (en boy oranını kilitle)', color: 'Renk', colorB: 'B — Siyah', colorW: 'W — Beyaz', diff --git a/src/locales/zh-hans.ts b/src/locales/zh-hans.ts index ff637fca..375383de 100644 --- a/src/locales/zh-hans.ts +++ b/src/locales/zh-hans.ts @@ -263,6 +263,7 @@ const zhHans = { height: '高度 (点)', thickness: '边框 (点)', filled: '填充', + lockAspect: '圆形(锁定纵横比)', color: '颜色', colorB: 'B — 黑色', colorW: 'W — 白色', diff --git a/src/locales/zh-hant.ts b/src/locales/zh-hant.ts index b0a47096..e506ec73 100644 --- a/src/locales/zh-hant.ts +++ b/src/locales/zh-hant.ts @@ -263,6 +263,7 @@ const zhHant = { height: '高度 (點)', thickness: '框線 (點)', filled: '填滿', + lockAspect: '圓形(鎖定長寬比)', color: '顏色', colorB: 'B — 黑色', colorW: 'W — 白色', diff --git a/src/registry/ellipse.tsx b/src/registry/ellipse.tsx index eea03806..3930b29d 100644 --- a/src/registry/ellipse.tsx +++ b/src/registry/ellipse.tsx @@ -86,6 +86,32 @@ export const ellipse: ObjectTypeDefinition = { )} + +