editbox.rs 40 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220
  1. use miniquad::{window, BufferId, KeyCode, KeyMods, MouseButton, TextureId, TouchPhase};
  2. use rand::{rngs::OsRng, Rng};
  3. use std::{
  4. collections::HashMap,
  5. sync::{
  6. atomic::{AtomicBool, Ordering},
  7. Arc, Mutex as SyncMutex, Weak,
  8. },
  9. time::Instant,
  10. };
  11. use crate::{
  12. error::Result,
  13. gfx2::{
  14. DrawCall, DrawInstruction, DrawMesh, GraphicsEventPublisherPtr, Point, Rectangle,
  15. RenderApi, RenderApiPtr, Vertex,
  16. },
  17. mesh::{Color, MeshBuilder, MeshInfo, COLOR_BLUE, COLOR_WHITE},
  18. prop::{
  19. PropertyBool, PropertyColor, PropertyFloat32, PropertyPtr, PropertyStr, PropertyUint32,
  20. },
  21. pubsub::Subscription,
  22. scene::{Pimpl, SceneGraph, SceneGraphPtr2, SceneNodeId},
  23. text2::{self, Glyph, GlyphPositionIter, RenderedAtlas, SpritePtr, TextShaper, TextShaperPtr},
  24. util::zip3,
  25. };
  26. use super::{eval_rect, get_parent_rect, read_rect, DrawUpdate, OnModify, Stoppable};
  27. const CURSOR_WIDTH: f32 = 4.;
  28. #[derive(Debug, Clone, Eq, Hash, PartialEq)]
  29. enum PressedKey {
  30. Char(char),
  31. Key(KeyCode),
  32. }
  33. /// On key press (repeat=false), we immediately process the event.
  34. /// Then there's a delay (repeat=true) and then for every step time
  35. /// while key press events are being sent, we allow an event.
  36. /// This ensures smooth typing in the editbox.
  37. struct PressedKeysSmoothRepeat {
  38. /// When holding keys, we track from start and last sent time.
  39. /// This is useful for initial delay and smooth scrolling.
  40. pressed_keys: HashMap<PressedKey, RepeatingKeyTimer>,
  41. /// Initial delay before allowing keys
  42. start_delay: u32,
  43. /// Minimum time between repeated keys
  44. step_time: u32,
  45. }
  46. impl PressedKeysSmoothRepeat {
  47. fn new(start_delay: u32, step_time: u32) -> Self {
  48. Self { pressed_keys: HashMap::new(), start_delay, step_time }
  49. }
  50. fn key_down(&mut self, key: PressedKey, repeat: bool) -> u32 {
  51. //debug!(target: "PressedKeysSmoothRepeat", "key_down({:?}, {})", key, repeat);
  52. if !repeat {
  53. self.pressed_keys.remove(&key);
  54. return 1;
  55. }
  56. // Insert key if not exists
  57. if !self.pressed_keys.contains_key(&key) {
  58. //debug!(target: "PressedKeysSmoothRepeat", "insert key {:?}", key);
  59. self.pressed_keys.insert(key.clone(), RepeatingKeyTimer::new());
  60. }
  61. let repeater = self.pressed_keys.get_mut(&key).expect("repeat map");
  62. repeater.update(self.start_delay, self.step_time)
  63. }
  64. /*
  65. fn key_up(&mut self, key: &PressedKey) {
  66. //debug!(target: "PressedKeysSmoothRepeat", "key_up({:?})", key);
  67. println!("{:?}", self.pressed_keys.keys());
  68. assert!(self.pressed_keys.contains_key(key));
  69. self.pressed_keys.remove(key).expect("key was pressed");
  70. }
  71. */
  72. }
  73. struct RepeatingKeyTimer {
  74. start: Instant,
  75. actions: u32,
  76. }
  77. impl RepeatingKeyTimer {
  78. fn new() -> Self {
  79. Self { start: Instant::now(), actions: 0 }
  80. }
  81. fn update(&mut self, start_delay: u32, step_time: u32) -> u32 {
  82. let elapsed = self.start.elapsed().as_millis();
  83. //debug!(target: "RepeatingKeyTimer", "update() elapsed={}, actions={}",
  84. // elapsed, self.actions);
  85. if elapsed < start_delay as u128 {
  86. return 0
  87. }
  88. let total_actions = ((elapsed - start_delay as u128) / step_time as u128) as u32;
  89. let remaining_actions = total_actions - self.actions;
  90. self.actions = total_actions;
  91. remaining_actions
  92. }
  93. }
  94. #[derive(Clone)]
  95. struct TextRenderInfo {
  96. mesh: MeshInfo,
  97. texture_id: TextureId,
  98. }
  99. pub type EditBoxPtr = Arc<EditBox>;
  100. pub struct EditBox {
  101. node_id: SceneNodeId,
  102. tasks: Vec<smol::Task<()>>,
  103. sg: SceneGraphPtr2,
  104. render_api: RenderApiPtr,
  105. // So we can lock the event stream when we gain focus
  106. event_pub: GraphicsEventPublisherPtr,
  107. text_shaper: TextShaperPtr,
  108. key_repeat: SyncMutex<PressedKeysSmoothRepeat>,
  109. render_info: SyncMutex<Option<TextRenderInfo>>,
  110. glyphs: SyncMutex<Vec<Glyph>>,
  111. dc_key: u64,
  112. is_active: PropertyBool,
  113. is_focused: PropertyBool,
  114. rect: PropertyPtr,
  115. baseline: PropertyFloat32,
  116. scroll: PropertyFloat32,
  117. cursor_pos: PropertyUint32,
  118. font_size: PropertyFloat32,
  119. text: PropertyStr,
  120. text_color: PropertyColor,
  121. cursor_color: PropertyColor,
  122. hi_bg_color: PropertyColor,
  123. selected: PropertyPtr,
  124. z_index: PropertyUint32,
  125. debug: PropertyBool,
  126. mouse_btn_held: AtomicBool,
  127. }
  128. impl EditBox {
  129. pub async fn new(
  130. ex: Arc<smol::Executor<'static>>,
  131. sg: SceneGraphPtr2,
  132. node_id: SceneNodeId,
  133. render_api: RenderApiPtr,
  134. event_pub: GraphicsEventPublisherPtr,
  135. text_shaper: TextShaperPtr,
  136. ) -> Pimpl {
  137. let scene_graph = sg.lock().await;
  138. let node = scene_graph.get_node(node_id).unwrap();
  139. let node_name = node.name.clone();
  140. let is_active = PropertyBool::wrap(node, "is_active", 0).unwrap();
  141. let is_focused = PropertyBool::wrap(node, "is_focused", 0).unwrap();
  142. let rect = node.get_property("rect").expect("EditBox::rect");
  143. let baseline = PropertyFloat32::wrap(node, "baseline", 0).unwrap();
  144. let scroll = PropertyFloat32::wrap(node, "scroll", 0).unwrap();
  145. let cursor_pos = PropertyUint32::wrap(node, "cursor_pos", 0).unwrap();
  146. let font_size = PropertyFloat32::wrap(node, "font_size", 0).unwrap();
  147. let text = PropertyStr::wrap(node, "text", 0).unwrap();
  148. let text_color = PropertyColor::wrap(node, "text_color").unwrap();
  149. let cursor_color = PropertyColor::wrap(node, "cursor_color").unwrap();
  150. let hi_bg_color = PropertyColor::wrap(node, "hi_bg_color").unwrap();
  151. let selected = node.get_property("selected").unwrap();
  152. let z_index = PropertyUint32::wrap(node, "z_index", 0).unwrap();
  153. let debug = PropertyBool::wrap(node, "debug", 0).unwrap();
  154. drop(scene_graph);
  155. // testing
  156. window::show_keyboard(true);
  157. let glyphs = text_shaper.shape(text.get(), font_size.get()).await;
  158. let self_ = Arc::new_cyclic(|me: &Weak<Self>| {
  159. // Start a task monitoring for key down events
  160. let ev_sub = event_pub.subscribe_char();
  161. let me2 = me.clone();
  162. let char_task = ex.spawn(async move {
  163. loop {
  164. Self::process_char(&me2, &ev_sub).await;
  165. }
  166. });
  167. let ev_sub = event_pub.subscribe_key_down();
  168. let me2 = me.clone();
  169. let key_down_task = ex.spawn(async move {
  170. loop {
  171. Self::process_key_down(&me2, &ev_sub).await;
  172. }
  173. });
  174. /*
  175. let ev_sub = event_pub.subscribe_key_up();
  176. let me2 = me.clone();
  177. let key_up_task = ex.spawn(async move {
  178. loop {
  179. let Ok((key, mods)) = ev_sub.receive().await else {
  180. debug!(target: "ui::editbox", "Event relayer closed");
  181. break
  182. };
  183. let Some(self_) = me2.upgrade() else {
  184. // Should not happen
  185. panic!("self destroyed before key_up_task was stopped!");
  186. };
  187. let key = PressedKey::Key(key);
  188. let mut repeater = self_.key_repeat.lock().unwrap();
  189. repeater.key_up(&key);
  190. }
  191. });
  192. */
  193. let ev_sub = event_pub.subscribe_mouse_btn_down();
  194. let me2 = me.clone();
  195. let mouse_btn_down_task = ex.spawn(async move {
  196. loop {
  197. Self::process_mouse_btn_down(&me2, &ev_sub).await;
  198. }
  199. });
  200. let ev_sub = event_pub.subscribe_mouse_btn_up();
  201. let me2 = me.clone();
  202. let mouse_btn_up_task = ex.spawn(async move {
  203. loop {
  204. Self::process_mouse_btn_up(&me2, &ev_sub).await;
  205. }
  206. });
  207. let ev_sub = event_pub.subscribe_mouse_move();
  208. let me2 = me.clone();
  209. let mouse_move_task = ex.spawn(async move {
  210. loop {
  211. Self::process_mouse_move(&me2, &ev_sub).await;
  212. }
  213. });
  214. let ev_sub = event_pub.subscribe_touch();
  215. let me2 = me.clone();
  216. let touch_task = ex.spawn(async move {
  217. loop {
  218. Self::process_touch(&me2, &ev_sub).await;
  219. }
  220. });
  221. let mut on_modify = OnModify::new(ex, node_name, node_id, me.clone());
  222. on_modify.when_change(is_focused.prop(), Self::change_focus);
  223. // on modify tasks too
  224. let mut tasks = vec![
  225. char_task,
  226. key_down_task,
  227. mouse_btn_down_task,
  228. mouse_btn_up_task,
  229. mouse_move_task,
  230. touch_task,
  231. ];
  232. tasks.append(&mut on_modify.tasks);
  233. Self {
  234. node_id,
  235. tasks,
  236. sg,
  237. render_api,
  238. event_pub,
  239. text_shaper,
  240. key_repeat: SyncMutex::new(PressedKeysSmoothRepeat::new(400, 50)),
  241. render_info: SyncMutex::new(None),
  242. glyphs: SyncMutex::new(glyphs),
  243. dc_key: OsRng.gen(),
  244. is_active,
  245. is_focused,
  246. rect,
  247. baseline,
  248. scroll,
  249. cursor_pos,
  250. font_size,
  251. text,
  252. text_color,
  253. cursor_color,
  254. hi_bg_color,
  255. selected,
  256. z_index,
  257. debug,
  258. mouse_btn_held: AtomicBool::new(false),
  259. }
  260. });
  261. Pimpl::EditBox(self_)
  262. }
  263. /// Called whenever the text or any text property changes.
  264. /// Not related to cursor, text highlighting or bounding (clip) rects.
  265. async fn regen_mesh(&self, mut clip: Rectangle) -> TextRenderInfo {
  266. clip.x = 0.;
  267. clip.y = 0.;
  268. let is_focused = self.is_focused.get();
  269. let text = self.text.get();
  270. let font_size = self.font_size.get();
  271. let text_color = self.text_color.get();
  272. let baseline = self.baseline.get();
  273. let scroll = self.scroll.get();
  274. let cursor_pos = self.cursor_pos.get() as usize;
  275. let cursor_color = self.cursor_color.get();
  276. let debug = self.debug.get();
  277. debug!(target: "ui::editbox", "Rendering text '{}' clip={:?}", text, clip);
  278. let glyphs = self.glyphs.lock().unwrap().clone();
  279. let atlas = text2::make_texture_atlas(&self.render_api, font_size, &glyphs).await.unwrap();
  280. let mut mesh = MeshBuilder::with_clip(clip.clone());
  281. self.draw_selected(&mut mesh, &glyphs, clip.h).unwrap();
  282. let mut glyph_pos_iter = GlyphPositionIter::new(font_size, &glyphs, baseline);
  283. // Used for drawing the cursor when it's at the end of the line.
  284. let mut rhs = 0.;
  285. for (glyph_idx, uv_rect, mut glyph_rect, glyph) in
  286. zip3(atlas.uv_rects.into_iter(), glyph_pos_iter, glyphs.iter())
  287. {
  288. glyph_rect.x += scroll;
  289. //mesh.draw_outline(&glyph_rect, COLOR_BLUE, 2.);
  290. let mut color = text_color.clone();
  291. if glyph.sprite.has_color {
  292. color = COLOR_WHITE;
  293. }
  294. mesh.draw_box(&glyph_rect, color, &uv_rect);
  295. if is_focused && cursor_pos != 0 && cursor_pos == glyph_idx {
  296. let cursor_rect =
  297. Rectangle { x: glyph_rect.x - CURSOR_WIDTH, y: 0., w: CURSOR_WIDTH, h: clip.h };
  298. mesh.draw_box(&cursor_rect, cursor_color, &Rectangle::zero());
  299. }
  300. rhs = glyph_rect.rhs();
  301. }
  302. if is_focused && cursor_pos == 0 {
  303. let cursor_rect = Rectangle { x: 0., y: 0., w: CURSOR_WIDTH, h: clip.h };
  304. mesh.draw_box(&cursor_rect, cursor_color, &Rectangle::zero());
  305. } else if is_focused && cursor_pos == glyphs.len() {
  306. let cursor_rect =
  307. Rectangle { x: rhs - CURSOR_WIDTH, y: 0., w: CURSOR_WIDTH, h: clip.h };
  308. mesh.draw_box(&cursor_rect, cursor_color, &Rectangle::zero());
  309. }
  310. if debug {
  311. mesh.draw_outline(&clip, COLOR_BLUE, 1.);
  312. }
  313. let mesh = mesh.alloc(&self.render_api).await.unwrap();
  314. TextRenderInfo { mesh, texture_id: atlas.texture_id }
  315. }
  316. fn draw_selected(
  317. &self,
  318. mesh: &mut MeshBuilder,
  319. glyphs: &Vec<Glyph>,
  320. clip_h: f32,
  321. ) -> Result<()> {
  322. if self.selected.is_null(0)? || self.selected.is_null(1)? {
  323. // Nothing selected so do nothing
  324. return Ok(())
  325. }
  326. let start = self.selected.get_u32(0)? as usize;
  327. let end = self.selected.get_u32(1)? as usize;
  328. // Selection started but nothing selected yet so do nothing
  329. if start == end {
  330. return Ok(())
  331. }
  332. let sel_start = std::cmp::min(start, end);
  333. let sel_end = std::cmp::max(start, end);
  334. let font_size = self.font_size.get();
  335. let baseline = self.baseline.get();
  336. let scroll = self.scroll.get();
  337. let hi_bg_color = self.hi_bg_color.get();
  338. let mut glyph_pos_iter = GlyphPositionIter::new(font_size, &glyphs, baseline);
  339. let mut start_x = 0.;
  340. let mut end_x = 0.;
  341. // When cursor lands at the end of the line
  342. let mut rhs = 0.;
  343. for (glyph_idx, mut glyph_rect) in glyph_pos_iter.enumerate() {
  344. glyph_rect.x += scroll;
  345. if glyph_idx == sel_start {
  346. start_x = glyph_rect.x;
  347. }
  348. if glyph_idx == sel_end {
  349. end_x = glyph_rect.x;
  350. }
  351. rhs = glyph_rect.rhs();
  352. }
  353. if sel_start == 0 {
  354. start_x = scroll;
  355. }
  356. if sel_end == glyphs.len() {
  357. end_x = rhs;
  358. }
  359. // We don't need to do manual clipping since MeshBuilder should do that
  360. let select_rect = Rectangle { x: start_x, y: 0., w: end_x - start_x, h: clip_h };
  361. mesh.draw_box(&select_rect, hi_bg_color, &Rectangle::zero());
  362. Ok(())
  363. }
  364. async fn do_key_action(&self, key: char, mods: &KeyMods) {
  365. match key {
  366. //KeyCode::Left => {}
  367. _ => self.insert_char(key).await,
  368. }
  369. }
  370. async fn process_char(me: &Weak<Self>, ev_sub: &Subscription<(char, KeyMods, bool)>) {
  371. let Ok((key, mods, repeat)) = ev_sub.receive().await else {
  372. debug!(target: "ui::editbox", "Event relayer closed");
  373. return
  374. };
  375. // First filter for only single digit keys
  376. if DISALLOWED_CHARS.contains(&key) {
  377. return
  378. }
  379. let Some(self_) = me.upgrade() else {
  380. // Should not happen
  381. panic!("self destroyed before char_task was stopped!");
  382. };
  383. if !self_.is_focused.get() {
  384. return
  385. }
  386. if mods.ctrl || mods.alt {
  387. if repeat {
  388. return
  389. }
  390. self_.handle_shortcut(key, &mods).await;
  391. return
  392. }
  393. let actions = {
  394. let mut repeater = self_.key_repeat.lock().unwrap();
  395. repeater.key_down(PressedKey::Char(key), repeat)
  396. };
  397. debug!(target: "ui::editbox", "Key {:?} has {} actions", key, actions);
  398. for _ in 0..actions {
  399. self_.insert_char(key).await;
  400. }
  401. }
  402. async fn process_key_down(me: &Weak<Self>, ev_sub: &Subscription<(KeyCode, KeyMods, bool)>) {
  403. let Ok((key, mods, repeat)) = ev_sub.receive().await else {
  404. debug!(target: "ui::editbox", "Event relayer closed");
  405. return
  406. };
  407. // First filter for only single digit keys
  408. // Avoid processing events handled by insert_char()
  409. if !ALLOWED_KEYCODES.contains(&key) {
  410. return
  411. }
  412. let Some(self_) = me.upgrade() else {
  413. // Should not happen
  414. panic!("self destroyed before char_task was stopped!");
  415. };
  416. if !self_.is_focused.get() {
  417. return
  418. }
  419. let actions = {
  420. let mut repeater = self_.key_repeat.lock().unwrap();
  421. repeater.key_down(PressedKey::Key(key), repeat)
  422. };
  423. // Suppress noisy message
  424. if actions > 0 {
  425. debug!(target: "ui::editbox", "Key {:?} has {} actions", key, actions);
  426. }
  427. for _ in 0..actions {
  428. self_.handle_key(&key, &mods).await;
  429. }
  430. }
  431. async fn process_mouse_btn_down(
  432. me: &Weak<Self>,
  433. ev_sub: &Subscription<(MouseButton, f32, f32)>,
  434. ) {
  435. let Ok((btn, mouse_x, mouse_y)) = ev_sub.receive().await else {
  436. debug!(target: "ui::editbox", "Event relayer closed");
  437. return
  438. };
  439. let Some(self_) = me.upgrade() else {
  440. // Should not happen
  441. panic!("self destroyed before mouse_btn_down_task was stopped!");
  442. };
  443. if !self_.is_active.get() {
  444. return
  445. }
  446. self_.handle_mouse_btn_down(btn, mouse_x, mouse_y).await;
  447. }
  448. async fn process_mouse_btn_up(me: &Weak<Self>, ev_sub: &Subscription<(MouseButton, f32, f32)>) {
  449. let Ok((btn, mouse_x, mouse_y)) = ev_sub.receive().await else {
  450. debug!(target: "ui::editbox", "Event relayer closed");
  451. return
  452. };
  453. let Some(self_) = me.upgrade() else {
  454. // Should not happen
  455. panic!("self destroyed before mouse_btn_up_task was stopped!");
  456. };
  457. if !self_.is_active.get() {
  458. return
  459. }
  460. self_.handle_mouse_btn_up(btn, mouse_x, mouse_y);
  461. }
  462. async fn process_mouse_move(me: &Weak<Self>, ev_sub: &Subscription<(f32, f32)>) {
  463. let Ok((mouse_x, mouse_y)) = ev_sub.receive().await else {
  464. debug!(target: "ui::editbox", "Event relayer closed");
  465. return
  466. };
  467. let Some(self_) = me.upgrade() else {
  468. // Should not happen
  469. panic!("self destroyed before mouse_move_task was stopped!");
  470. };
  471. if !self_.is_active.get() {
  472. return
  473. }
  474. self_.handle_mouse_move(mouse_x, mouse_y).await;
  475. }
  476. async fn process_touch(me: &Weak<Self>, ev_sub: &Subscription<(TouchPhase, u64, f32, f32)>) {
  477. let Ok((phase, id, touch_x, touch_y)) = ev_sub.receive().await else {
  478. debug!(target: "ui::editbox", "Event relayer closed");
  479. return
  480. };
  481. let Some(self_) = me.upgrade() else {
  482. // Should not happen
  483. panic!("self destroyed before touch_task was stopped!");
  484. };
  485. if !self_.is_active.get() {
  486. return
  487. }
  488. self_.handle_touch(phase, id, touch_x, touch_y).await;
  489. }
  490. async fn change_focus(self: Arc<Self>) {
  491. if !self.is_active.get() {
  492. return
  493. }
  494. debug!(target: "ui::editbox", "Focus changed");
  495. let is_focused = self.is_focused.get();
  496. // Cursor visibility will change so just redraw everything lol
  497. self.redraw().await;
  498. }
  499. async fn handle_mouse_btn_down(&self, btn: MouseButton, mouse_x: f32, mouse_y: f32) {
  500. if btn != MouseButton::Left {
  501. return
  502. }
  503. let mouse_pos = Point::from([mouse_x, mouse_y]);
  504. let mut focus_changed = false;
  505. let Some(rect) = self.get_cached_world_rect().await else { return };
  506. // clicking inside box will:
  507. // 1. make it active
  508. // 2. begin selection
  509. if rect.contains(&mouse_pos) {
  510. window::show_keyboard(true);
  511. if self.is_focused.get() {
  512. debug!(target: "ui::editbox", "EditBox clicked");
  513. } else {
  514. debug!(target: "ui::editbox", "EditBox focused");
  515. self.is_focused.set(true);
  516. focus_changed = true;
  517. }
  518. let cpos = self.find_closest_glyph_idx(mouse_x, &rect);
  519. // set cursor pos
  520. self.cursor_pos.set(cpos);
  521. self.apply_cursor_scrolling();
  522. // begin selection
  523. self.selected.set_u32(0, cpos).unwrap();
  524. self.selected.set_u32(1, cpos).unwrap();
  525. self.mouse_btn_held.store(true, Ordering::Relaxed);
  526. // click outside the box will make it unfocused
  527. } else if self.is_focused.get() {
  528. debug!(target: "ui::editbox", "EditBox unfocused");
  529. self.is_focused.set(false);
  530. self.selected.set_null(0).unwrap();
  531. self.selected.set_null(1).unwrap();
  532. focus_changed = true;
  533. }
  534. // Further on_focus logic change is handled by property modified callback
  535. // which calls Self::change_focus()
  536. // We still need to redraw if cursor is changed though, but we want to avoid redrawing
  537. // twice, so we do this check:
  538. if !focus_changed {
  539. self.redraw().await;
  540. }
  541. }
  542. fn handle_mouse_btn_up(&self, btn: MouseButton, x: f32, y: f32) {
  543. if btn != MouseButton::Left {
  544. return
  545. }
  546. // releasing mouse button will end selection
  547. self.mouse_btn_held.store(false, Ordering::Relaxed);
  548. }
  549. async fn handle_mouse_move(&self, mouse_x: f32, mouse_y: f32) {
  550. if !self.mouse_btn_held.load(Ordering::Relaxed) {
  551. return;
  552. }
  553. // if active and selection_active, then use x to modify the selection.
  554. // also implement scrolling when cursor is to the left or right
  555. // just scroll to the end
  556. // also set cursor_pos too
  557. let Some(rect) = self.get_cached_world_rect().await else { return };
  558. let cpos = self.find_closest_glyph_idx(mouse_x, &rect);
  559. self.cursor_pos.set(cpos);
  560. self.selected.set_u32(1, cpos).unwrap();
  561. self.apply_cursor_scrolling();
  562. self.redraw().await;
  563. }
  564. async fn handle_touch(&self, phase: TouchPhase, id: u64, touch_x: f32, touch_y: f32) {
  565. // Ignore multi-touch
  566. if id != 0 {
  567. return
  568. }
  569. // Simulate mouse events
  570. match phase {
  571. TouchPhase::Started => {
  572. self.handle_mouse_btn_down(MouseButton::Left, touch_x, touch_y).await
  573. }
  574. TouchPhase::Moved => self.handle_mouse_move(touch_x, touch_y).await,
  575. TouchPhase::Ended => self.handle_mouse_btn_up(MouseButton::Left, touch_x, touch_y),
  576. TouchPhase::Cancelled => {}
  577. }
  578. }
  579. /// Used when clicking the text. Given the x coord of the mouse, it finds the index
  580. /// of the closest glyph to that x coord.
  581. fn find_closest_glyph_idx(&self, x: f32, rect: &Rectangle) -> u32 {
  582. let font_size = self.font_size.get();
  583. let baseline = self.baseline.get();
  584. let glyphs = self.glyphs.lock().unwrap().clone();
  585. let mouse_x = x - rect.x;
  586. if mouse_x > rect.w {
  587. // Highlight to the end
  588. let cpos = glyphs.len() as u32;
  589. return cpos;
  590. // Scroll to the right handled in render
  591. } else if mouse_x < 0. {
  592. return 0;
  593. }
  594. let scroll = self.scroll.get();
  595. let mut cpos = 0;
  596. let lhs = 0.;
  597. let mut last_d = (lhs - mouse_x).abs();
  598. let mut glyph_pos_iter = GlyphPositionIter::new(font_size, &glyphs, baseline);
  599. let mut rhs = 0.;
  600. for (i, glyph_rect) in glyph_pos_iter.skip(1).enumerate() {
  601. // Because we skip the first item
  602. let glyph_idx = (i + 1) as u32;
  603. let x1 = glyph_rect.x + scroll;
  604. // I don't know what this is doing but it works so I won't touch it for now.
  605. let curr_d = (x1 - mouse_x).abs();
  606. if curr_d < last_d {
  607. last_d = curr_d;
  608. cpos = glyph_idx;
  609. }
  610. rhs = glyph_rect.rhs();
  611. }
  612. // also check the right hand side
  613. let curr_d = (rhs - mouse_x).abs();
  614. if curr_d < last_d {
  615. //last_d = curr_d;
  616. cpos = glyphs.len() as u32;
  617. }
  618. cpos
  619. }
  620. async fn insert_char(&self, key: char) {
  621. if !self.selected.is_null(0).unwrap() {
  622. self.delete_highlighted();
  623. // This is inefficient but we don't give a shit here
  624. self.redraw().await;
  625. };
  626. let mut text = String::new();
  627. let cursor_pos = self.cursor_pos.get();
  628. let glyphs = self.glyphs.lock().unwrap().clone();
  629. // We rebuild the string but insert our substr at cursor_pos.
  630. // The substr is inserted before cursor_pos, and appending to the end
  631. // of the string is when cursor_pos = len(str).
  632. // We can't use String::insert() because sometimes multiple chars are combined
  633. // into a single glyph. We treat the cursor pos as acting on the substrs
  634. // themselves.
  635. for (i, glyph) in glyphs.iter().enumerate() {
  636. if cursor_pos == i as u32 {
  637. text.push(key);
  638. }
  639. text.push_str(&glyph.substr);
  640. }
  641. // Append to the end
  642. if cursor_pos == glyphs.len() as u32 {
  643. text.push(key);
  644. }
  645. self.text.set(text);
  646. // Not always true lol
  647. // If glyphs are recombined, this could get messed up
  648. // meh lets pretend it doesn't exist for now.
  649. self.cursor_pos.set(cursor_pos + 1);
  650. self.apply_cursor_scrolling();
  651. self.redraw().await;
  652. }
  653. async fn handle_shortcut(&self, key: char, mods: &KeyMods) {
  654. debug!(target: "ui::editbox", "handle_shortcut({:?}, {:?})", key, mods);
  655. match key {
  656. 'c' => {
  657. if mods.ctrl {
  658. self.copy_highlighted().unwrap();
  659. }
  660. }
  661. 'v' => {
  662. if mods.ctrl {
  663. if let Some(text) = window::clipboard_get() {
  664. self.paste_text(text).await;
  665. }
  666. }
  667. }
  668. _ => {}
  669. }
  670. }
  671. async fn handle_key(&self, key: &KeyCode, mods: &KeyMods) {
  672. debug!(target: "ui::editbox", "handle_key({:?}, {:?})", key, mods);
  673. match key {
  674. KeyCode::Left => {
  675. let mut cursor_pos = self.cursor_pos.get();
  676. // Start selection if shift is held
  677. if !mods.shift {
  678. self.selected.set_null(0).unwrap();
  679. self.selected.set_null(1).unwrap();
  680. } else if self.selected.is_null(0).unwrap() {
  681. assert!(self.selected.is_null(1).unwrap());
  682. self.selected.set_u32(0, cursor_pos).unwrap();
  683. }
  684. if cursor_pos > 0 {
  685. cursor_pos -= 1;
  686. debug!(target: "ui::editbox", "Left cursor_pos={}", cursor_pos);
  687. self.cursor_pos.set(cursor_pos);
  688. }
  689. // Update selection
  690. if mods.shift {
  691. self.selected.set_u32(1, cursor_pos).unwrap();
  692. }
  693. self.apply_cursor_scrolling();
  694. self.redraw().await;
  695. }
  696. KeyCode::Right => {
  697. let mut cursor_pos = self.cursor_pos.get();
  698. // Start selection if shift is held
  699. if !mods.shift {
  700. self.selected.set_null(0).unwrap();
  701. self.selected.set_null(1).unwrap();
  702. } else if self.selected.is_null(0).unwrap() {
  703. assert!(self.selected.is_null(1).unwrap());
  704. self.selected.set_u32(0, cursor_pos).unwrap();
  705. }
  706. let glyphs_len = self.glyphs.lock().unwrap().len() as u32;
  707. if cursor_pos < glyphs_len {
  708. cursor_pos += 1;
  709. debug!(target: "ui::editbox", "Right cursor_pos={}", cursor_pos);
  710. self.cursor_pos.set(cursor_pos);
  711. }
  712. // Update selection
  713. if mods.shift {
  714. self.selected.set_u32(1, cursor_pos).unwrap();
  715. }
  716. self.apply_cursor_scrolling();
  717. self.redraw().await;
  718. }
  719. //KeyCode::Up,
  720. //KeyCode::Down,
  721. //KeyCode::Enter,
  722. KeyCode::Kp0 => self.insert_char('0').await,
  723. KeyCode::Kp1 => self.insert_char('1').await,
  724. KeyCode::Kp2 => self.insert_char('2').await,
  725. KeyCode::Kp3 => self.insert_char('3').await,
  726. KeyCode::Kp4 => self.insert_char('4').await,
  727. KeyCode::Kp5 => self.insert_char('5').await,
  728. KeyCode::Kp6 => self.insert_char('6').await,
  729. KeyCode::Kp7 => self.insert_char('7').await,
  730. KeyCode::Kp8 => self.insert_char('8').await,
  731. KeyCode::Kp9 => self.insert_char('9').await,
  732. KeyCode::KpDecimal => self.insert_char('.').await,
  733. KeyCode::Enter | KeyCode::KpEnter => self.send_event().await,
  734. KeyCode::Delete => {
  735. if !self.selected.is_null(0).unwrap() {
  736. self.delete_highlighted();
  737. } else {
  738. let glyphs = self.glyphs.lock().unwrap().clone();
  739. let cursor_pos = self.cursor_pos.get();
  740. if cursor_pos == glyphs.len() as u32 {
  741. return;
  742. }
  743. // Regen text
  744. let mut text = String::new();
  745. for (i, glyph) in glyphs.iter().enumerate() {
  746. let mut substr = glyph.substr.clone();
  747. if cursor_pos as usize == i {
  748. // Lmk if anyone knows a better way to do substr.pop_front()
  749. let mut chars = substr.chars();
  750. chars.next();
  751. substr = chars.as_str().to_string();
  752. }
  753. text.push_str(&substr);
  754. }
  755. self.text.set(text);
  756. };
  757. self.apply_cursor_scrolling();
  758. self.redraw().await;
  759. }
  760. KeyCode::Backspace => {
  761. if !self.selected.is_null(0).unwrap() {
  762. self.delete_highlighted();
  763. } else {
  764. let glyphs = self.glyphs.lock().unwrap().clone();
  765. let cursor_pos = self.cursor_pos.get();
  766. if cursor_pos == 0 {
  767. return;
  768. }
  769. let mut text = String::new();
  770. for (i, glyph) in glyphs.iter().enumerate() {
  771. let mut substr = glyph.substr.clone();
  772. if cursor_pos as usize - 1 == i {
  773. substr.pop().unwrap();
  774. }
  775. text.push_str(&substr);
  776. }
  777. self.text.set(text);
  778. self.cursor_pos.set(cursor_pos - 1);
  779. };
  780. self.apply_cursor_scrolling();
  781. self.redraw().await;
  782. }
  783. _ => {}
  784. }
  785. }
  786. fn delete_highlighted(&self) {
  787. assert!(!self.selected.is_null(0).unwrap());
  788. assert!(!self.selected.is_null(1).unwrap());
  789. let start = self.selected.get_u32(0).unwrap() as usize;
  790. let end = self.selected.get_u32(1).unwrap() as usize;
  791. let sel_start = std::cmp::min(start, end);
  792. let sel_end = std::cmp::max(start, end);
  793. let mut text = String::new();
  794. let glyphs = self.glyphs.lock().unwrap().clone();
  795. // Regen text
  796. for (i, glyph) in glyphs.iter().enumerate() {
  797. if sel_start <= i && i < sel_end {
  798. continue
  799. }
  800. text.push_str(&glyph.substr);
  801. }
  802. debug!(
  803. target: "ui::editbox",
  804. "delete_highlighted() text=\"{}\", cursor_pos={}",
  805. text, sel_start
  806. );
  807. self.text.set(text);
  808. self.selected.set_null(0).unwrap();
  809. self.selected.set_null(1).unwrap();
  810. self.cursor_pos.set(sel_start as u32);
  811. }
  812. fn copy_highlighted(&self) -> Result<()> {
  813. let start = self.selected.get_u32(0)? as usize;
  814. let end = self.selected.get_u32(1)? as usize;
  815. let sel_start = std::cmp::min(start, end);
  816. let sel_end = std::cmp::max(start, end);
  817. let mut text = String::new();
  818. let glyphs = self.glyphs.lock().unwrap().clone();
  819. for (glyph_idx, glyph) in glyphs.iter().enumerate() {
  820. if sel_start <= glyph_idx && glyph_idx < sel_end {
  821. text.push_str(&glyph.substr);
  822. }
  823. }
  824. info!(target: "ui::editbox", "Copied '{}'", text);
  825. window::clipboard_set(&text);
  826. Ok(())
  827. }
  828. async fn paste_text(&self, key: String) {
  829. let mut text = String::new();
  830. let cursor_pos = self.cursor_pos.get();
  831. if cursor_pos == 0 {
  832. text = key.clone();
  833. }
  834. let glyphs = self.glyphs.lock().unwrap().clone();
  835. for (glyph_idx, glyph) in glyphs.iter().enumerate() {
  836. text.push_str(&glyph.substr);
  837. if cursor_pos == glyph_idx as u32 + 1 {
  838. text.push_str(&key);
  839. }
  840. }
  841. self.text.set(text);
  842. // Not always true lol
  843. self.cursor_pos.set(cursor_pos + 1);
  844. self.apply_cursor_scrolling();
  845. self.redraw().await;
  846. }
  847. /// Beware of this method. Here be dragons.
  848. /// Possibly racy so we limit it just to cursor scrolling.
  849. fn cached_rect(&self) -> Rectangle {
  850. let Ok(rect) = read_rect(self.rect.clone()) else {
  851. panic!("Node bad rect property");
  852. };
  853. rect
  854. }
  855. async fn get_parent_rect(&self) -> Option<Rectangle> {
  856. let sg = self.sg.lock().await;
  857. let node = sg.get_node(self.node_id).unwrap();
  858. let Some(parent_rect) = get_parent_rect(&sg, node) else {
  859. return None;
  860. };
  861. drop(sg);
  862. Some(parent_rect)
  863. }
  864. async fn get_cached_world_rect(&self) -> Option<Rectangle> {
  865. // NBD if it's slightly wrong
  866. let mut rect = self.cached_rect();
  867. // If layers can be nested and we use offsets for (x, y)
  868. // then this will be incorrect for nested layers.
  869. // For now we don't allow nesting of layers.
  870. let parent_rect = self.get_parent_rect().await?;
  871. // Offset rect which is now in world coords
  872. rect.x += parent_rect.x;
  873. rect.y += parent_rect.y;
  874. Some(rect)
  875. }
  876. /// Whenever the cursor property is modified this MUST be called
  877. /// to recalculate the scroll x property.
  878. fn apply_cursor_scrolling(&self) {
  879. // This may need updating but yolo rite
  880. let rect = self.cached_rect();
  881. let cursor_pos = self.cursor_pos.get() as usize;
  882. let mut scroll = self.scroll.get();
  883. let cursor_x = {
  884. let font_size = self.font_size.get();
  885. let baseline = self.baseline.get();
  886. let glyphs = self.glyphs.lock().unwrap().clone();
  887. let mut glyph_pos_iter = GlyphPositionIter::new(font_size, &glyphs, baseline);
  888. if cursor_pos == 0 {
  889. 0.
  890. } else if cursor_pos == glyphs.len() {
  891. let glyph_pos = glyph_pos_iter.last().unwrap();
  892. glyph_pos.rhs()
  893. } else {
  894. assert!(cursor_pos < glyphs.len());
  895. let glyph_pos = glyph_pos_iter.nth(cursor_pos).expect("glyph pos mismatch glyphs");
  896. glyph_pos.x
  897. }
  898. };
  899. let cursor_lhs = cursor_x + scroll;
  900. let cursor_rhs = cursor_lhs + CURSOR_WIDTH;
  901. if cursor_rhs > rect.w {
  902. scroll = rect.w - cursor_x;
  903. } else if cursor_lhs < 0. {
  904. scroll = -cursor_x + CURSOR_WIDTH;
  905. }
  906. self.scroll.set(scroll);
  907. }
  908. async fn redraw(&self) {
  909. let old = self.render_info.lock().unwrap().clone();
  910. let glyphs = self.text_shaper.shape(self.text.get(), self.font_size.get()).await;
  911. *self.glyphs.lock().unwrap() = glyphs;
  912. // draw will recalc this when it's None
  913. *self.render_info.lock().unwrap() = None;
  914. let sg = self.sg.lock().await;
  915. let node = sg.get_node(self.node_id).unwrap();
  916. let Some(parent_rect) = get_parent_rect(&sg, node) else {
  917. return;
  918. };
  919. let Some(draw_update) = self.draw(&sg, &parent_rect).await else {
  920. error!(target: "ui::editbox", "Text {:?} failed to draw", node);
  921. return;
  922. };
  923. self.render_api.replace_draw_calls(draw_update.draw_calls).await;
  924. debug!(target: "ui::editbox", "replace draw calls done");
  925. // We're finished with these so clean up.
  926. if let Some(old) = old {
  927. self.render_api.delete_buffer(old.mesh.vertex_buffer);
  928. self.render_api.delete_buffer(old.mesh.index_buffer);
  929. self.render_api.delete_texture(old.texture_id);
  930. }
  931. }
  932. pub async fn draw(&self, sg: &SceneGraph, parent_rect: &Rectangle) -> Option<DrawUpdate> {
  933. debug!(target: "ui::editbox", "EditBox::draw()");
  934. // Only used for debug messages
  935. let node = sg.get_node(self.node_id).unwrap();
  936. if let Err(err) = eval_rect(self.rect.clone(), parent_rect) {
  937. panic!("Node {:?} bad rect property: {}", node, err);
  938. }
  939. let Ok(mut rect) = read_rect(self.rect.clone()) else {
  940. panic!("Node {:?} bad rect property", node);
  941. };
  942. rect.x += parent_rect.x;
  943. rect.y += parent_rect.y;
  944. let render_info = self.render_info.lock().unwrap().clone();
  945. let render_info = match render_info {
  946. Some(render_info) => render_info,
  947. None => {
  948. let render_info = self.regen_mesh(rect.clone()).await;
  949. *self.render_info.lock().unwrap() = Some(render_info.clone());
  950. render_info
  951. }
  952. };
  953. let mesh = DrawMesh {
  954. vertex_buffer: render_info.mesh.vertex_buffer,
  955. index_buffer: render_info.mesh.index_buffer,
  956. texture: Some(render_info.texture_id),
  957. num_elements: render_info.mesh.num_elements,
  958. };
  959. let off_x = rect.x / parent_rect.w;
  960. let off_y = rect.y / parent_rect.h;
  961. let scale_x = 1. / parent_rect.w;
  962. let scale_y = 1. / parent_rect.h;
  963. let model = glam::Mat4::from_translation(glam::Vec3::new(off_x, off_y, 0.)) *
  964. glam::Mat4::from_scale(glam::Vec3::new(scale_x, scale_y, 1.));
  965. Some(DrawUpdate {
  966. key: self.dc_key,
  967. draw_calls: vec![(
  968. self.dc_key,
  969. DrawCall {
  970. instrs: vec![DrawInstruction::ApplyMatrix(model), DrawInstruction::Draw(mesh)],
  971. dcs: vec![],
  972. z_index: self.z_index.get(),
  973. },
  974. )],
  975. })
  976. }
  977. async fn send_event(&self) {
  978. let text = self.text.get();
  979. debug!(target: "ui::editbox", "sending text {}", text);
  980. // This should probably be unset instead
  981. self.text.set(String::new());
  982. self.cursor_pos.set(0);
  983. self.redraw().await;
  984. }
  985. }
  986. impl Stoppable for EditBox {
  987. async fn stop(&self) {
  988. // TODO: Delete own draw call
  989. // Free buffers
  990. // Should this be in drop?
  991. //self.render_api.delete_buffer(self.vertex_buffer);
  992. //self.render_api.delete_buffer(self.index_buffer);
  993. }
  994. }
  995. /// Filter these char events from being handled since we handle them
  996. /// using the key_up/key_down events.
  997. /// Avoids duplicate processing of keyboard input events.
  998. static DISALLOWED_CHARS: &'static [char] = &['\r', '\u{8}', '\u{7f}', '\t', '\n'];
  999. /// These keycodes are handled via normal key_up/key_down events.
  1000. /// Anything in this list must be disallowed char events.
  1001. static ALLOWED_KEYCODES: &'static [KeyCode] = &[
  1002. KeyCode::Left,
  1003. KeyCode::Right,
  1004. KeyCode::Up,
  1005. KeyCode::Down,
  1006. KeyCode::Enter,
  1007. KeyCode::Kp0,
  1008. KeyCode::Kp1,
  1009. KeyCode::Kp2,
  1010. KeyCode::Kp3,
  1011. KeyCode::Kp4,
  1012. KeyCode::Kp5,
  1013. KeyCode::Kp6,
  1014. KeyCode::Kp7,
  1015. KeyCode::Kp8,
  1016. KeyCode::Kp9,
  1017. KeyCode::KpDecimal,
  1018. KeyCode::KpEnter,
  1019. KeyCode::Delete,
  1020. KeyCode::Backspace,
  1021. ];