Compare commits
1 Commits
feature/ni
...
feature/ni
| Author | SHA1 | Date | |
|---|---|---|---|
|
379c84f64a |
2
.github/workflows/test-coverage.yaml
vendored
2
.github/workflows/test-coverage.yaml
vendored
@@ -1,6 +1,6 @@
|
||||
name: Coverage
|
||||
|
||||
on: [pull_request]
|
||||
on: [pull_request, push]
|
||||
|
||||
jobs:
|
||||
coverage:
|
||||
|
||||
@@ -58,4 +58,3 @@ pub mod mock_time;
|
||||
pub use model::get_milliseconds_since_epoch;
|
||||
pub use model::Model;
|
||||
pub use user_model::UserModel;
|
||||
pub use user_model::BorderArea;
|
||||
|
||||
@@ -683,13 +683,6 @@ impl Model {
|
||||
Err(format!("Invalid color: {}", color))
|
||||
}
|
||||
|
||||
/// Makes the grid lines in the sheet visible (`true`) or hidden (`false`)
|
||||
pub fn set_show_grid_lines(&mut self, sheet: u32, show_grid_lines: bool) -> Result<(), String> {
|
||||
let worksheet = self.workbook.worksheet_mut(sheet)?;
|
||||
worksheet.show_grid_lines = show_grid_lines;
|
||||
Ok(())
|
||||
}
|
||||
|
||||
fn get_cell_value(&self, cell: &Cell, cell_reference: CellReferenceIndex) -> CalcResult {
|
||||
use Cell::*;
|
||||
match cell {
|
||||
|
||||
@@ -65,7 +65,6 @@ impl Model {
|
||||
color: Default::default(),
|
||||
frozen_columns: 0,
|
||||
frozen_rows: 0,
|
||||
show_grid_lines: true,
|
||||
views,
|
||||
}
|
||||
}
|
||||
@@ -353,14 +352,7 @@ impl Model {
|
||||
let now = dt.format("%Y-%m-%dT%H:%M:%SZ").to_string();
|
||||
|
||||
let mut views = HashMap::new();
|
||||
views.insert(
|
||||
0,
|
||||
WorkbookView {
|
||||
sheet: 0,
|
||||
window_width: 800,
|
||||
window_height: 600,
|
||||
},
|
||||
);
|
||||
views.insert(0, WorkbookView { sheet: 0 });
|
||||
|
||||
// String versions of the locale are added here to simplify the serialize/deserialize logic
|
||||
let workbook = Workbook {
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
mod test_add_delete_sheets;
|
||||
mod test_autofill_columns;
|
||||
mod test_autofill_rows;
|
||||
mod test_clear_cells;
|
||||
mod test_diff_queue;
|
||||
mod test_evaluation;
|
||||
mod test_general;
|
||||
mod test_grid_lines;
|
||||
mod test_rename_sheet;
|
||||
mod test_row_column;
|
||||
mod test_styles;
|
||||
|
||||
@@ -1,404 +0,0 @@
|
||||
#![allow(clippy::unwrap_used)]
|
||||
|
||||
use crate::constants::{LAST_COLUMN, LAST_ROW};
|
||||
use crate::expressions::types::Area;
|
||||
use crate::test::util::new_empty_model;
|
||||
use crate::UserModel;
|
||||
|
||||
#[test]
|
||||
fn basic_tests() {
|
||||
let model = new_empty_model();
|
||||
let mut model = UserModel::from_model(model);
|
||||
// This is cell A3
|
||||
model.set_user_input(0, 3, 1, "alpha").unwrap();
|
||||
// We autofill from A3 to C3
|
||||
model
|
||||
.auto_fill_columns(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 3,
|
||||
column: 1,
|
||||
width: 1,
|
||||
height: 1,
|
||||
},
|
||||
5,
|
||||
)
|
||||
.unwrap();
|
||||
// B3
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 3, 2),
|
||||
Ok("alpha".to_string())
|
||||
);
|
||||
// C3
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 3, 3),
|
||||
Ok("alpha".to_string())
|
||||
);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn one_cell_right() {
|
||||
let model = new_empty_model();
|
||||
let mut model = UserModel::from_model(model);
|
||||
model.set_user_input(0, 1, 1, "23").unwrap();
|
||||
model
|
||||
.auto_fill_columns(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: 1,
|
||||
width: 1,
|
||||
height: 1,
|
||||
},
|
||||
2,
|
||||
)
|
||||
.unwrap();
|
||||
// B1
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 1, 2),
|
||||
Ok("23".to_string())
|
||||
);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn alpha_beta_gamma() {
|
||||
let model = new_empty_model();
|
||||
let mut model = UserModel::from_model(model);
|
||||
// cells A1:B3
|
||||
model.set_user_input(0, 1, 1, "Alpher").unwrap(); // A1
|
||||
model.set_user_input(0, 1, 2, "Bethe").unwrap(); // B1
|
||||
model.set_user_input(0, 1, 3, "Gamow").unwrap(); // C1
|
||||
model.set_user_input(0, 2, 1, "=A1").unwrap(); // A2
|
||||
model.set_user_input(0, 2, 2, "=B1").unwrap(); // B2
|
||||
model.set_user_input(0, 2, 3, "=C1").unwrap(); // C2
|
||||
|
||||
// We autofill from A1:C2 to I2
|
||||
model
|
||||
.auto_fill_columns(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: 1,
|
||||
width: 3,
|
||||
height: 2,
|
||||
},
|
||||
9,
|
||||
)
|
||||
.unwrap();
|
||||
|
||||
// D1
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 1, 4),
|
||||
Ok("Alpher".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 1, 5),
|
||||
Ok("Bethe".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 1, 6),
|
||||
Ok("Gamow".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 1, 7),
|
||||
Ok("Alpher".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 1, 8),
|
||||
Ok("Bethe".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 1, 9),
|
||||
Ok("Gamow".to_string())
|
||||
);
|
||||
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 2, 4),
|
||||
Ok("Alpher".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 2, 5),
|
||||
Ok("Bethe".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 2, 6),
|
||||
Ok("Gamow".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 2, 7),
|
||||
Ok("Alpher".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 2, 8),
|
||||
Ok("Bethe".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 2, 9),
|
||||
Ok("Gamow".to_string())
|
||||
);
|
||||
|
||||
assert_eq!(model.get_cell_content(0, 2, 4), Ok("=D1".to_string()));
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn styles() {
|
||||
let model = new_empty_model();
|
||||
let mut model = UserModel::from_model(model);
|
||||
// cells A1:C1
|
||||
model.set_user_input(0, 1, 1, "Alpher").unwrap();
|
||||
model.set_user_input(0, 2, 1, "Bethe").unwrap();
|
||||
model.set_user_input(0, 3, 1, "Gamow").unwrap();
|
||||
|
||||
let b1 = Area {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: 2,
|
||||
width: 1,
|
||||
height: 1,
|
||||
};
|
||||
|
||||
let c1 = Area {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: 3,
|
||||
width: 1,
|
||||
height: 1,
|
||||
};
|
||||
|
||||
model.update_range_style(&b1, "font.i", "true").unwrap();
|
||||
model
|
||||
.update_range_style(&c1, "fill.bg_color", "#334455")
|
||||
.unwrap();
|
||||
|
||||
model
|
||||
.auto_fill_columns(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: 1,
|
||||
width: 3,
|
||||
height: 1,
|
||||
},
|
||||
9,
|
||||
)
|
||||
.unwrap();
|
||||
|
||||
// Check that cell E1 has B1 style
|
||||
let style = model.get_cell_style(0, 1, 5).unwrap();
|
||||
assert!(style.font.i);
|
||||
// A6 would have the style of A3
|
||||
let style = model.get_cell_style(0, 1, 6).unwrap();
|
||||
assert_eq!(style.fill.bg_color, Some("#334455".to_string()));
|
||||
|
||||
model.undo().unwrap();
|
||||
|
||||
assert_eq!(model.get_cell_content(0, 1, 4), Ok("".to_string()));
|
||||
// Check that cell A5 has A2 style
|
||||
let style = model.get_cell_style(0, 1, 5).unwrap();
|
||||
assert!(!style.font.i);
|
||||
// A6 would have the style of A3
|
||||
let style = model.get_cell_style(0, 1, 6).unwrap();
|
||||
assert_eq!(style.fill.bg_color, None);
|
||||
|
||||
model.redo().unwrap();
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 1, 4),
|
||||
Ok("Alpher".to_string())
|
||||
);
|
||||
// Check that cell A5 has A2 style
|
||||
let style = model.get_cell_style(0, 1, 5).unwrap();
|
||||
assert!(style.font.i);
|
||||
// A6 would have the style of A3
|
||||
let style = model.get_cell_style(0, 1, 6).unwrap();
|
||||
assert_eq!(style.fill.bg_color, Some("#334455".to_string()));
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn left() {
|
||||
let model = new_empty_model();
|
||||
let mut model = UserModel::from_model(model);
|
||||
// cells A10:A12
|
||||
model.set_user_input(0, 1, 10, "Alpher").unwrap();
|
||||
model.set_user_input(0, 1, 11, "Bethe").unwrap();
|
||||
model.set_user_input(0, 1, 12, "Gamow").unwrap();
|
||||
|
||||
// We fill upwards to row 5
|
||||
model
|
||||
.auto_fill_columns(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: 10,
|
||||
width: 3,
|
||||
height: 1,
|
||||
},
|
||||
5,
|
||||
)
|
||||
.unwrap();
|
||||
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 1, 9),
|
||||
Ok("Gamow".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 1, 8),
|
||||
Ok("Bethe".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 1, 7),
|
||||
Ok("Alpher".to_string())
|
||||
);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn left_4() {
|
||||
let model = new_empty_model();
|
||||
let mut model = UserModel::from_model(model);
|
||||
// cells A10:A13
|
||||
model.set_user_input(0, 1, 10, "Margaret Burbidge").unwrap();
|
||||
model.set_user_input(0, 1, 11, "Geoffrey Burbidge").unwrap();
|
||||
model.set_user_input(0, 1, 12, "Willy Fowler").unwrap();
|
||||
model.set_user_input(0, 1, 13, "Fred Hoyle").unwrap();
|
||||
|
||||
// We fill left to row 5
|
||||
model
|
||||
.auto_fill_columns(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: 10,
|
||||
width: 4,
|
||||
height: 1,
|
||||
},
|
||||
5,
|
||||
)
|
||||
.unwrap();
|
||||
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 1, 9),
|
||||
Ok("Fred Hoyle".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 1, 8),
|
||||
Ok("Willy Fowler".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 1, 5),
|
||||
Ok("Fred Hoyle".to_string())
|
||||
);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn errors() {
|
||||
let model = new_empty_model();
|
||||
let mut model = UserModel::from_model(model);
|
||||
|
||||
model.set_user_input(0, 1, 4, "Margaret Burbidge").unwrap();
|
||||
|
||||
// Invalid sheet
|
||||
assert_eq!(
|
||||
model.auto_fill_columns(
|
||||
&Area {
|
||||
sheet: 3,
|
||||
row: 1,
|
||||
column: 4,
|
||||
width: 1,
|
||||
height: 1,
|
||||
},
|
||||
10,
|
||||
),
|
||||
Err("Invalid worksheet index: '3'".to_string())
|
||||
);
|
||||
|
||||
// invalid column
|
||||
assert_eq!(
|
||||
model.auto_fill_columns(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: -1,
|
||||
width: 1,
|
||||
height: 1,
|
||||
},
|
||||
10,
|
||||
),
|
||||
Err("Invalid column: '-1'".to_string())
|
||||
);
|
||||
|
||||
// invalid column
|
||||
assert_eq!(
|
||||
model.auto_fill_columns(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: LAST_COLUMN - 1,
|
||||
width: 10,
|
||||
height: 1,
|
||||
},
|
||||
10,
|
||||
),
|
||||
Err("Invalid column: '16392'".to_string())
|
||||
);
|
||||
|
||||
assert_eq!(
|
||||
model.auto_fill_columns(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: LAST_ROW + 1,
|
||||
column: 1,
|
||||
width: 10,
|
||||
height: 1,
|
||||
},
|
||||
10,
|
||||
),
|
||||
Err("Invalid row: '1048577'".to_string())
|
||||
);
|
||||
|
||||
assert_eq!(
|
||||
model.auto_fill_columns(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: LAST_ROW - 2,
|
||||
column: 1,
|
||||
width: 1,
|
||||
height: 10,
|
||||
},
|
||||
10,
|
||||
),
|
||||
Err("Invalid row: '1048583'".to_string())
|
||||
);
|
||||
|
||||
assert_eq!(
|
||||
model.auto_fill_columns(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: 5,
|
||||
width: 10,
|
||||
height: 1,
|
||||
},
|
||||
-10,
|
||||
),
|
||||
Err("Invalid row: '-10'".to_string())
|
||||
);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn invalid_parameters() {
|
||||
let model = new_empty_model();
|
||||
let mut model = UserModel::from_model(model);
|
||||
model.set_user_input(0, 1, 1, "23").unwrap();
|
||||
assert_eq!(
|
||||
model.auto_fill_columns(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: 1,
|
||||
width: 2,
|
||||
height: 1,
|
||||
},
|
||||
2,
|
||||
),
|
||||
Err("Invalid parameters for autofill".to_string())
|
||||
);
|
||||
}
|
||||
@@ -1,399 +0,0 @@
|
||||
#![allow(clippy::unwrap_used)]
|
||||
|
||||
use crate::constants::{LAST_COLUMN, LAST_ROW};
|
||||
use crate::expressions::types::Area;
|
||||
use crate::test::util::new_empty_model;
|
||||
use crate::UserModel;
|
||||
|
||||
#[test]
|
||||
fn basic_tests() {
|
||||
let model = new_empty_model();
|
||||
let mut model = UserModel::from_model(model);
|
||||
// This is cell A3
|
||||
model.set_user_input(0, 3, 1, "alpha").unwrap();
|
||||
// We autofill from A3 to A5
|
||||
model
|
||||
.auto_fill_rows(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 3,
|
||||
column: 1,
|
||||
width: 1,
|
||||
height: 1,
|
||||
},
|
||||
5,
|
||||
)
|
||||
.unwrap();
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 4, 1),
|
||||
Ok("alpha".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 5, 1),
|
||||
Ok("alpha".to_string())
|
||||
);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn one_cell_down() {
|
||||
let model = new_empty_model();
|
||||
let mut model = UserModel::from_model(model);
|
||||
model.set_user_input(0, 1, 1, "23").unwrap();
|
||||
model
|
||||
.auto_fill_rows(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: 1,
|
||||
width: 1,
|
||||
height: 1,
|
||||
},
|
||||
2,
|
||||
)
|
||||
.unwrap();
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 2, 1),
|
||||
Ok("23".to_string())
|
||||
);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn alpha_beta_gamma() {
|
||||
let model = new_empty_model();
|
||||
let mut model = UserModel::from_model(model);
|
||||
// cells A1:B3
|
||||
model.set_user_input(0, 1, 1, "Alpher").unwrap();
|
||||
model.set_user_input(0, 2, 1, "Bethe").unwrap();
|
||||
model.set_user_input(0, 3, 1, "Gamow").unwrap();
|
||||
model.set_user_input(0, 1, 2, "=A1").unwrap();
|
||||
model.set_user_input(0, 2, 2, "=A2").unwrap();
|
||||
model.set_user_input(0, 3, 2, "=A3").unwrap();
|
||||
// We autofill from A1:B3 to A9
|
||||
model
|
||||
.auto_fill_rows(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: 1,
|
||||
width: 2,
|
||||
height: 3,
|
||||
},
|
||||
9,
|
||||
)
|
||||
.unwrap();
|
||||
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 4, 1),
|
||||
Ok("Alpher".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 5, 1),
|
||||
Ok("Bethe".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 6, 1),
|
||||
Ok("Gamow".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 7, 1),
|
||||
Ok("Alpher".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 8, 1),
|
||||
Ok("Bethe".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 9, 1),
|
||||
Ok("Gamow".to_string())
|
||||
);
|
||||
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 4, 2),
|
||||
Ok("Alpher".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 5, 2),
|
||||
Ok("Bethe".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 6, 2),
|
||||
Ok("Gamow".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 7, 2),
|
||||
Ok("Alpher".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 8, 2),
|
||||
Ok("Bethe".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 9, 2),
|
||||
Ok("Gamow".to_string())
|
||||
);
|
||||
|
||||
assert_eq!(model.get_cell_content(0, 4, 2), Ok("=A4".to_string()));
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn styles() {
|
||||
let model = new_empty_model();
|
||||
let mut model = UserModel::from_model(model);
|
||||
// cells A1:B3
|
||||
model.set_user_input(0, 1, 1, "Alpher").unwrap();
|
||||
model.set_user_input(0, 2, 1, "Bethe").unwrap();
|
||||
model.set_user_input(0, 3, 1, "Gamow").unwrap();
|
||||
|
||||
let a2 = Area {
|
||||
sheet: 0,
|
||||
row: 2,
|
||||
column: 1,
|
||||
width: 1,
|
||||
height: 1,
|
||||
};
|
||||
|
||||
let a3 = Area {
|
||||
sheet: 0,
|
||||
row: 3,
|
||||
column: 1,
|
||||
width: 1,
|
||||
height: 1,
|
||||
};
|
||||
|
||||
model.update_range_style(&a2, "font.i", "true").unwrap();
|
||||
model
|
||||
.update_range_style(&a3, "fill.bg_color", "#334455")
|
||||
.unwrap();
|
||||
|
||||
model
|
||||
.auto_fill_rows(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: 1,
|
||||
width: 1,
|
||||
height: 3,
|
||||
},
|
||||
9,
|
||||
)
|
||||
.unwrap();
|
||||
|
||||
// Check that cell A5 has A2 style
|
||||
let style = model.get_cell_style(0, 5, 1).unwrap();
|
||||
assert!(style.font.i);
|
||||
// A6 would have the style of A3
|
||||
let style = model.get_cell_style(0, 6, 1).unwrap();
|
||||
assert_eq!(style.fill.bg_color, Some("#334455".to_string()));
|
||||
|
||||
model.undo().unwrap();
|
||||
|
||||
assert_eq!(model.get_cell_content(0, 4, 1), Ok("".to_string()));
|
||||
// Check that cell A5 has A2 style
|
||||
let style = model.get_cell_style(0, 5, 1).unwrap();
|
||||
assert!(!style.font.i);
|
||||
// A6 would have the style of A3
|
||||
let style = model.get_cell_style(0, 6, 1).unwrap();
|
||||
assert_eq!(style.fill.bg_color, None);
|
||||
|
||||
model.redo().unwrap();
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 4, 1),
|
||||
Ok("Alpher".to_string())
|
||||
);
|
||||
// Check that cell A5 has A2 style
|
||||
let style = model.get_cell_style(0, 5, 1).unwrap();
|
||||
assert!(style.font.i);
|
||||
// A6 would have the style of A3
|
||||
let style = model.get_cell_style(0, 6, 1).unwrap();
|
||||
assert_eq!(style.fill.bg_color, Some("#334455".to_string()));
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn upwards() {
|
||||
let model = new_empty_model();
|
||||
let mut model = UserModel::from_model(model);
|
||||
// cells A10:A12
|
||||
model.set_user_input(0, 10, 1, "Alpher").unwrap();
|
||||
model.set_user_input(0, 11, 1, "Bethe").unwrap();
|
||||
model.set_user_input(0, 12, 1, "Gamow").unwrap();
|
||||
|
||||
// We fill upwards to row 5
|
||||
model
|
||||
.auto_fill_rows(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 10,
|
||||
column: 1,
|
||||
width: 1,
|
||||
height: 3,
|
||||
},
|
||||
5,
|
||||
)
|
||||
.unwrap();
|
||||
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 9, 1),
|
||||
Ok("Gamow".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 8, 1),
|
||||
Ok("Bethe".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 7, 1),
|
||||
Ok("Alpher".to_string())
|
||||
);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn upwards_4() {
|
||||
let model = new_empty_model();
|
||||
let mut model = UserModel::from_model(model);
|
||||
// cells A10:A13
|
||||
model.set_user_input(0, 10, 1, "Margaret Burbidge").unwrap();
|
||||
model.set_user_input(0, 11, 1, "Geoffrey Burbidge").unwrap();
|
||||
model.set_user_input(0, 12, 1, "Willy Fowler").unwrap();
|
||||
model.set_user_input(0, 13, 1, "Fred Hoyle").unwrap();
|
||||
|
||||
// We fill upwards to row 5
|
||||
model
|
||||
.auto_fill_rows(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 10,
|
||||
column: 1,
|
||||
width: 1,
|
||||
height: 4,
|
||||
},
|
||||
5,
|
||||
)
|
||||
.unwrap();
|
||||
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 9, 1),
|
||||
Ok("Fred Hoyle".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 8, 1),
|
||||
Ok("Willy Fowler".to_string())
|
||||
);
|
||||
assert_eq!(
|
||||
model.get_formatted_cell_value(0, 5, 1),
|
||||
Ok("Fred Hoyle".to_string())
|
||||
);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn errors() {
|
||||
let model = new_empty_model();
|
||||
let mut model = UserModel::from_model(model);
|
||||
// cells A10:A13
|
||||
model.set_user_input(0, 4, 1, "Margaret Burbidge").unwrap();
|
||||
|
||||
// Invalid sheet
|
||||
assert_eq!(
|
||||
model.auto_fill_rows(
|
||||
&Area {
|
||||
sheet: 3,
|
||||
row: 4,
|
||||
column: 1,
|
||||
width: 1,
|
||||
height: 1,
|
||||
},
|
||||
10,
|
||||
),
|
||||
Err("Invalid worksheet index: '3'".to_string())
|
||||
);
|
||||
|
||||
// invalid row
|
||||
assert_eq!(
|
||||
model.auto_fill_rows(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: -1,
|
||||
column: 1,
|
||||
width: 1,
|
||||
height: 1,
|
||||
},
|
||||
10,
|
||||
),
|
||||
Err("Invalid row: '-1'".to_string())
|
||||
);
|
||||
|
||||
// invalid row
|
||||
assert_eq!(
|
||||
model.auto_fill_rows(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: LAST_ROW - 1,
|
||||
column: 1,
|
||||
width: 1,
|
||||
height: 10,
|
||||
},
|
||||
10,
|
||||
),
|
||||
Err("Invalid row: '1048584'".to_string())
|
||||
);
|
||||
|
||||
assert_eq!(
|
||||
model.auto_fill_rows(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: LAST_COLUMN + 1,
|
||||
width: 1,
|
||||
height: 10,
|
||||
},
|
||||
10,
|
||||
),
|
||||
Err("Invalid column: '16385'".to_string())
|
||||
);
|
||||
|
||||
assert_eq!(
|
||||
model.auto_fill_rows(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: LAST_COLUMN - 2,
|
||||
width: 10,
|
||||
height: 1,
|
||||
},
|
||||
10,
|
||||
),
|
||||
Err("Invalid column: '16391'".to_string())
|
||||
);
|
||||
|
||||
assert_eq!(
|
||||
model.auto_fill_rows(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 5,
|
||||
column: 1,
|
||||
width: 1,
|
||||
height: 10,
|
||||
},
|
||||
-10,
|
||||
),
|
||||
Err("Invalid row: '-10'".to_string())
|
||||
);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn invalid_parameters() {
|
||||
let model = new_empty_model();
|
||||
let mut model = UserModel::from_model(model);
|
||||
model.set_user_input(0, 1, 1, "23").unwrap();
|
||||
assert_eq!(
|
||||
model.auto_fill_rows(
|
||||
&Area {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: 1,
|
||||
width: 1,
|
||||
height: 2,
|
||||
},
|
||||
2,
|
||||
),
|
||||
Err("Invalid parameters for autofill".to_string())
|
||||
);
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
#![allow(clippy::unwrap_used)]
|
||||
|
||||
use crate::test::util::new_empty_model;
|
||||
use crate::UserModel;
|
||||
|
||||
#[test]
|
||||
fn basic_tests() {
|
||||
let model = new_empty_model();
|
||||
let mut model = UserModel::from_model(model);
|
||||
model.new_sheet();
|
||||
|
||||
// default sheet has show_grid_lines = true
|
||||
assert_eq!(model.get_show_grid_lines(0), Ok(true));
|
||||
|
||||
// default new sheet has show_grid_lines = true
|
||||
assert_eq!(model.get_show_grid_lines(1), Ok(true));
|
||||
|
||||
// wrong sheet number
|
||||
assert_eq!(
|
||||
model.get_show_grid_lines(2),
|
||||
Err("Invalid sheet index".to_string())
|
||||
);
|
||||
|
||||
// we can set it
|
||||
model.set_show_grid_lines(1, false).unwrap();
|
||||
assert_eq!(model.get_show_grid_lines(1), Ok(false));
|
||||
assert_eq!(model.get_show_grid_lines(0), Ok(true));
|
||||
|
||||
model.undo().unwrap();
|
||||
|
||||
assert_eq!(model.get_show_grid_lines(1), Ok(true));
|
||||
assert_eq!(model.get_show_grid_lines(0), Ok(true));
|
||||
|
||||
model.redo().unwrap();
|
||||
|
||||
let send_queue = model.flush_send_queue();
|
||||
let mut model2 = UserModel::from_model(new_empty_model());
|
||||
model2.apply_external_diffs(&send_queue).unwrap();
|
||||
|
||||
assert_eq!(model2.get_show_grid_lines(1), Ok(false));
|
||||
assert_eq!(model2.get_show_grid_lines(0), Ok(true));
|
||||
}
|
||||
@@ -33,10 +33,6 @@ pub struct WorkbookSettings {
|
||||
pub struct WorkbookView {
|
||||
/// The index of the currently selected sheet.
|
||||
pub sheet: u32,
|
||||
/// The current width of the window
|
||||
pub window_width: i64,
|
||||
/// The current heigh of the window
|
||||
pub window_height: i64,
|
||||
}
|
||||
|
||||
/// An internal representation of an IronCalc Workbook
|
||||
@@ -115,8 +111,6 @@ pub struct Worksheet {
|
||||
pub frozen_rows: i32,
|
||||
pub frozen_columns: i32,
|
||||
pub views: HashMap<u32, WorksheetView>,
|
||||
/// Whether or not to show the grid lines in the worksheet
|
||||
pub show_grid_lines: bool,
|
||||
}
|
||||
|
||||
/// Internal representation of Excel's sheet_data
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
use std::{collections::HashMap, fmt::Debug};
|
||||
|
||||
use bitcode::{Decode, Encode};
|
||||
use serde::{Deserialize, Serialize};
|
||||
|
||||
use crate::{
|
||||
@@ -12,35 +13,176 @@ use crate::{
|
||||
},
|
||||
model::Model,
|
||||
types::{
|
||||
Alignment, BorderItem, BorderStyle, CellType, Col, HorizontalAlignment, SheetProperties,
|
||||
Style, VerticalAlignment,
|
||||
Alignment, BorderItem, BorderStyle, Cell, CellType, Col, HorizontalAlignment, Row,
|
||||
SheetProperties, Style, VerticalAlignment,
|
||||
},
|
||||
utils::is_valid_hex_color,
|
||||
};
|
||||
|
||||
use crate::user_model::history::{
|
||||
ColumnData, Diff, DiffList, DiffType, History, QueueDiffs, RowData,
|
||||
};
|
||||
|
||||
#[derive(Serialize, Deserialize)]
|
||||
pub enum BorderType {
|
||||
All,
|
||||
Inner,
|
||||
Outer,
|
||||
Top,
|
||||
Right,
|
||||
Bottom,
|
||||
Left,
|
||||
CenterH,
|
||||
CenterV,
|
||||
None,
|
||||
#[cfg_attr(test, derive(PartialEq, Debug))]
|
||||
pub struct SelectedView {
|
||||
pub sheet: u32,
|
||||
pub row: i32,
|
||||
pub column: i32,
|
||||
pub range: [i32; 4],
|
||||
pub top_row: i32,
|
||||
pub left_column: i32,
|
||||
}
|
||||
|
||||
/// This is the struct for a border area
|
||||
#[derive(Serialize, Deserialize)]
|
||||
pub struct BorderArea {
|
||||
item: BorderItem,
|
||||
r#type: BorderType,
|
||||
#[derive(Clone, Encode, Decode)]
|
||||
struct RowData {
|
||||
row: Option<Row>,
|
||||
data: HashMap<i32, Cell>,
|
||||
}
|
||||
|
||||
#[derive(Clone, Encode, Decode)]
|
||||
struct ColumnData {
|
||||
column: Option<Col>,
|
||||
data: HashMap<i32, Cell>,
|
||||
}
|
||||
|
||||
#[derive(Clone, Encode, Decode)]
|
||||
enum Diff {
|
||||
// Cell diffs
|
||||
SetCellValue {
|
||||
sheet: u32,
|
||||
row: i32,
|
||||
column: i32,
|
||||
new_value: String,
|
||||
old_value: Box<Option<Cell>>,
|
||||
},
|
||||
CellClearContents {
|
||||
sheet: u32,
|
||||
row: i32,
|
||||
column: i32,
|
||||
old_value: Box<Option<Cell>>,
|
||||
},
|
||||
CellClearAll {
|
||||
sheet: u32,
|
||||
row: i32,
|
||||
column: i32,
|
||||
old_value: Box<Option<Cell>>,
|
||||
old_style: Box<Style>,
|
||||
},
|
||||
SetCellStyle {
|
||||
sheet: u32,
|
||||
row: i32,
|
||||
column: i32,
|
||||
old_value: Box<Style>,
|
||||
new_value: Box<Style>,
|
||||
},
|
||||
// Column and Row diffs
|
||||
SetColumnWidth {
|
||||
sheet: u32,
|
||||
column: i32,
|
||||
new_value: f64,
|
||||
old_value: f64,
|
||||
},
|
||||
SetRowHeight {
|
||||
sheet: u32,
|
||||
row: i32,
|
||||
new_value: f64,
|
||||
old_value: f64,
|
||||
},
|
||||
InsertRow {
|
||||
sheet: u32,
|
||||
row: i32,
|
||||
},
|
||||
DeleteRow {
|
||||
sheet: u32,
|
||||
row: i32,
|
||||
old_data: Box<RowData>,
|
||||
},
|
||||
InsertColumn {
|
||||
sheet: u32,
|
||||
column: i32,
|
||||
},
|
||||
DeleteColumn {
|
||||
sheet: u32,
|
||||
column: i32,
|
||||
old_data: Box<ColumnData>,
|
||||
},
|
||||
SetFrozenRowsCount {
|
||||
sheet: u32,
|
||||
new_value: i32,
|
||||
old_value: i32,
|
||||
},
|
||||
SetFrozenColumnsCount {
|
||||
sheet: u32,
|
||||
new_value: i32,
|
||||
old_value: i32,
|
||||
},
|
||||
DeleteSheet {
|
||||
sheet: u32,
|
||||
},
|
||||
NewSheet {
|
||||
index: u32,
|
||||
name: String,
|
||||
},
|
||||
RenameSheet {
|
||||
index: u32,
|
||||
old_value: String,
|
||||
new_value: String,
|
||||
},
|
||||
SetSheetColor {
|
||||
index: u32,
|
||||
old_value: String,
|
||||
new_value: String,
|
||||
},
|
||||
// FIXME: we are missing SetViewDiffs
|
||||
}
|
||||
|
||||
type DiffList = Vec<Diff>;
|
||||
|
||||
#[derive(Default)]
|
||||
struct History {
|
||||
undo_stack: Vec<DiffList>,
|
||||
redo_stack: Vec<DiffList>,
|
||||
}
|
||||
|
||||
impl History {
|
||||
fn push(&mut self, diff_list: DiffList) {
|
||||
self.undo_stack.push(diff_list);
|
||||
self.redo_stack = vec![];
|
||||
}
|
||||
|
||||
fn undo(&mut self) -> Option<Vec<Diff>> {
|
||||
match self.undo_stack.pop() {
|
||||
Some(diff_list) => {
|
||||
self.redo_stack.push(diff_list.clone());
|
||||
Some(diff_list)
|
||||
}
|
||||
None => None,
|
||||
}
|
||||
}
|
||||
|
||||
fn redo(&mut self) -> Option<Vec<Diff>> {
|
||||
match self.redo_stack.pop() {
|
||||
Some(diff_list) => {
|
||||
self.undo_stack.push(diff_list.clone());
|
||||
Some(diff_list)
|
||||
}
|
||||
None => None,
|
||||
}
|
||||
}
|
||||
|
||||
fn clear(&mut self) {
|
||||
self.redo_stack = vec![];
|
||||
self.undo_stack = vec![];
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Clone, Encode, Decode)]
|
||||
enum DiffType {
|
||||
Undo,
|
||||
Redo,
|
||||
}
|
||||
|
||||
#[derive(Clone, Encode, Decode)]
|
||||
struct QueueDiffs {
|
||||
r#type: DiffType,
|
||||
list: DiffList,
|
||||
}
|
||||
|
||||
fn boolean(value: &str) -> Result<bool, String> {
|
||||
@@ -146,7 +288,7 @@ fn vertical(value: &str) -> Result<VerticalAlignment, String> {
|
||||
/// # }
|
||||
/// ```
|
||||
pub struct UserModel {
|
||||
pub(crate) model: Model,
|
||||
model: Model,
|
||||
history: History,
|
||||
send_queue: Vec<QueueDiffs>,
|
||||
pause_evaluation: bool,
|
||||
@@ -682,154 +824,6 @@ impl UserModel {
|
||||
self.model.set_frozen_columns(sheet, frozen_columns)
|
||||
}
|
||||
|
||||
/// Paste `styles` in the selected area
|
||||
pub fn on_paste_styles(&mut self, styles: &[Vec<Style>]) -> Result<(), String> {
|
||||
let styles_heigh = styles.len() as i32;
|
||||
let styles_width = styles[0].len() as i32;
|
||||
let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
view.sheet
|
||||
} else {
|
||||
return Ok(());
|
||||
};
|
||||
let range = if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
|
||||
if let Some(view) = worksheet.views.get(&self.model.view_id) {
|
||||
view.range
|
||||
} else {
|
||||
return Ok(());
|
||||
}
|
||||
} else {
|
||||
return Ok(());
|
||||
};
|
||||
|
||||
// If the pasted area is smaller than the selected area we increase it
|
||||
let [row_start, column_start, row_end, column_end] = range;
|
||||
let last_row = row_end.max(row_start + styles_heigh - 1);
|
||||
let last_column = column_end.max(column_start + styles_width - 1);
|
||||
|
||||
let mut diff_list = Vec::new();
|
||||
for row in row_start..=last_row {
|
||||
for column in column_start..=last_column {
|
||||
let row_index = ((row - row_start) % styles_heigh) as usize;
|
||||
let column_index = ((column - column_start) % styles_width) as usize;
|
||||
let style = &styles[row_index][column_index];
|
||||
let old_value = self.model.get_style_for_cell(sheet, row, column);
|
||||
self.model.set_cell_style(sheet, row, column, style)?;
|
||||
diff_list.push(Diff::SetCellStyle {
|
||||
sheet,
|
||||
row,
|
||||
column,
|
||||
old_value: Box::new(old_value),
|
||||
new_value: Box::new(style.clone()),
|
||||
});
|
||||
}
|
||||
}
|
||||
self.push_diff_list(diff_list);
|
||||
|
||||
// select the pasted range
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
|
||||
if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
|
||||
view.range = [row_start, column_start, last_row, last_column];
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Sets the border
|
||||
pub fn set_area_with_border(
|
||||
&mut self,
|
||||
range: &Area,
|
||||
border_area: &BorderArea,
|
||||
) -> Result<(), String> {
|
||||
let sheet = range.sheet;
|
||||
let mut diff_list = Vec::new();
|
||||
let last_row = range.row + range.height - 1;
|
||||
let last_column = range.column + range.width - 1;
|
||||
for row in range.row..=last_row {
|
||||
for column in range.column..=last_column {
|
||||
let old_value = self.model.get_style_for_cell(sheet, row, column);
|
||||
let mut style = old_value.clone();
|
||||
|
||||
// First remove all existing borders
|
||||
style.border.top = None;
|
||||
style.border.right = None;
|
||||
style.border.bottom = None;
|
||||
style.border.left = None;
|
||||
|
||||
match border_area.r#type {
|
||||
BorderType::All => {
|
||||
style.border.top = Some(border_area.item.clone());
|
||||
style.border.right = Some(border_area.item.clone());
|
||||
style.border.bottom = Some(border_area.item.clone());
|
||||
style.border.left = Some(border_area.item.clone());
|
||||
}
|
||||
BorderType::Inner => {
|
||||
if row != range.row {
|
||||
style.border.top = Some(border_area.item.clone());
|
||||
}
|
||||
if row != last_row {
|
||||
style.border.bottom = Some(border_area.item.clone());
|
||||
}
|
||||
if column != range.column {
|
||||
style.border.left = Some(border_area.item.clone());
|
||||
}
|
||||
if column != last_column {
|
||||
style.border.right = Some(border_area.item.clone());
|
||||
}
|
||||
}
|
||||
BorderType::Outer => {
|
||||
if row == range.row {
|
||||
style.border.top = Some(border_area.item.clone());
|
||||
}
|
||||
if row == last_row {
|
||||
style.border.bottom = Some(border_area.item.clone());
|
||||
}
|
||||
if column == range.column {
|
||||
style.border.left = Some(border_area.item.clone());
|
||||
}
|
||||
if column == last_column {
|
||||
style.border.right = Some(border_area.item.clone());
|
||||
}
|
||||
}
|
||||
BorderType::Top => style.border.top = Some(border_area.item.clone()),
|
||||
BorderType::Right => style.border.right = Some(border_area.item.clone()),
|
||||
BorderType::Bottom => style.border.bottom = Some(border_area.item.clone()),
|
||||
BorderType::Left => style.border.left = Some(border_area.item.clone()),
|
||||
BorderType::CenterH => {
|
||||
if row != range.row {
|
||||
style.border.top = Some(border_area.item.clone());
|
||||
}
|
||||
if row != last_row {
|
||||
style.border.bottom = Some(border_area.item.clone());
|
||||
}
|
||||
}
|
||||
BorderType::CenterV => {
|
||||
if column != range.column {
|
||||
style.border.left = Some(border_area.item.clone());
|
||||
}
|
||||
if column != last_column {
|
||||
style.border.right = Some(border_area.item.clone());
|
||||
}
|
||||
}
|
||||
BorderType::None => {
|
||||
// noop, we already removed all the borders
|
||||
}
|
||||
}
|
||||
|
||||
self.model.set_cell_style(sheet, row, column, &style)?;
|
||||
diff_list.push(Diff::SetCellStyle {
|
||||
sheet,
|
||||
row,
|
||||
column,
|
||||
old_value: Box::new(old_value),
|
||||
new_value: Box::new(style),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
self.push_diff_list(diff_list);
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Updates the range with a cell style.
|
||||
/// See also:
|
||||
/// * [Model::set_cell_style]
|
||||
@@ -929,7 +923,7 @@ impl UserModel {
|
||||
column,
|
||||
old_value: Box::new(old_value),
|
||||
new_value: Box::new(style),
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
self.push_diff_list(diff_list);
|
||||
@@ -945,208 +939,6 @@ impl UserModel {
|
||||
Ok(self.model.get_style_for_cell(sheet, row, column))
|
||||
}
|
||||
|
||||
/// Fills the cells from `source_area` until `to_row`.
|
||||
/// This simulates the user clicking on the cell outline handle and dragging it downwards (or upwards)
|
||||
pub fn auto_fill_rows(&mut self, source_area: &Area, to_row: i32) -> Result<(), String> {
|
||||
let mut diff_list = Vec::new();
|
||||
let sheet = source_area.sheet;
|
||||
let row1 = source_area.row;
|
||||
let column1 = source_area.column;
|
||||
let width1 = source_area.width;
|
||||
let height1 = source_area.height;
|
||||
|
||||
// Check first all parameters are valid
|
||||
if self.model.workbook.worksheet(sheet).is_err() {
|
||||
return Err(format!("Invalid worksheet index: '{sheet}'"));
|
||||
}
|
||||
|
||||
if !is_valid_column_number(column1) {
|
||||
return Err(format!("Invalid column: '{column1}'"));
|
||||
}
|
||||
if !is_valid_row(row1) {
|
||||
return Err(format!("Invalid row: '{row1}'"));
|
||||
}
|
||||
if !is_valid_column_number(column1 + width1 - 1) {
|
||||
return Err(format!("Invalid column: '{}'", column1 + width1 - 1));
|
||||
}
|
||||
if !is_valid_row(row1 + height1 - 1) {
|
||||
return Err(format!("Invalid row: '{}'", row1 + height1 - 1));
|
||||
}
|
||||
|
||||
if !is_valid_row(to_row) {
|
||||
return Err(format!("Invalid row: '{to_row}'"));
|
||||
}
|
||||
|
||||
// anchor_row is the first row that repeats in each case.
|
||||
let anchor_row;
|
||||
let sign;
|
||||
// this is the range of rows we are going to fill
|
||||
let row_range: Vec<i32>;
|
||||
|
||||
if to_row >= row1 + height1 {
|
||||
// we go downwards, we start from `row1 + height1` to `to_row`,
|
||||
anchor_row = row1;
|
||||
sign = 1;
|
||||
row_range = (row1 + height1..to_row + 1).collect();
|
||||
} else if to_row < row1 {
|
||||
// we go upwards, starting from `row1 - `` all the way to `to_row`
|
||||
anchor_row = row1 + height1 - 1;
|
||||
sign = -1;
|
||||
row_range = (to_row..row1).rev().collect();
|
||||
} else {
|
||||
return Err("Invalid parameters for autofill".to_string());
|
||||
}
|
||||
|
||||
for column in column1..column1 + width1 {
|
||||
let mut index = 0;
|
||||
for row_ref in &row_range {
|
||||
// Save value and style first
|
||||
let row = *row_ref;
|
||||
let old_value = self
|
||||
.model
|
||||
.workbook
|
||||
.worksheet(sheet)?
|
||||
.cell(row, column)
|
||||
.cloned();
|
||||
let old_style = self.model.get_style_for_cell(sheet, row, column);
|
||||
|
||||
// compute the new value and set it
|
||||
let source_row = anchor_row + index;
|
||||
let target_value = self
|
||||
.model
|
||||
.extend_to(sheet, source_row, column, row, column)?;
|
||||
self.model
|
||||
.set_user_input(sheet, row, column, target_value.to_string());
|
||||
|
||||
// Compute the new style and set it
|
||||
let new_style = self.model.get_style_for_cell(sheet, source_row, column);
|
||||
self.model.set_cell_style(sheet, row, column, &new_style)?;
|
||||
|
||||
// Add the diffs
|
||||
diff_list.push(Diff::SetCellStyle {
|
||||
sheet,
|
||||
row,
|
||||
column,
|
||||
old_value: Box::new(old_style),
|
||||
new_value: Box::new(new_style),
|
||||
});
|
||||
diff_list.push(Diff::SetCellValue {
|
||||
sheet,
|
||||
row,
|
||||
column,
|
||||
new_value: target_value.to_string(),
|
||||
old_value: Box::new(old_value),
|
||||
});
|
||||
|
||||
index = (index + sign) % height1;
|
||||
}
|
||||
}
|
||||
self.push_diff_list(diff_list);
|
||||
self.evaluate();
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Fills the cells from `source_area` until `to_column`.
|
||||
/// This simulates the user clicking on the cell outline handle and dragging it to the right (or to the left)
|
||||
pub fn auto_fill_columns(&mut self, source_area: &Area, to_column: i32) -> Result<(), String> {
|
||||
let mut diff_list = Vec::new();
|
||||
let sheet = source_area.sheet;
|
||||
let row1 = source_area.row;
|
||||
let column1 = source_area.column;
|
||||
let width1 = source_area.width;
|
||||
let height1 = source_area.height;
|
||||
|
||||
// Check first all parameters are valid
|
||||
if self.model.workbook.worksheet(sheet).is_err() {
|
||||
return Err(format!("Invalid worksheet index: '{sheet}'"));
|
||||
}
|
||||
|
||||
if !is_valid_column_number(column1) {
|
||||
return Err(format!("Invalid column: '{column1}'"));
|
||||
}
|
||||
if !is_valid_row(row1) {
|
||||
return Err(format!("Invalid row: '{row1}'"));
|
||||
}
|
||||
if !is_valid_column_number(column1 + width1 - 1) {
|
||||
return Err(format!("Invalid column: '{}'", column1 + width1 - 1));
|
||||
}
|
||||
if !is_valid_row(row1 + height1 - 1) {
|
||||
return Err(format!("Invalid row: '{}'", row1 + height1 - 1));
|
||||
}
|
||||
|
||||
if !is_valid_row(to_column) {
|
||||
return Err(format!("Invalid row: '{to_column}'"));
|
||||
}
|
||||
|
||||
// anchor_column is the first column that repeats in each case.
|
||||
let anchor_column;
|
||||
let sign;
|
||||
// this is the range of columns we are going to fill
|
||||
let column_range: Vec<i32>;
|
||||
|
||||
if to_column >= column1 + width1 {
|
||||
// we go right, we start from `1 + width` to `to_column`,
|
||||
anchor_column = column1;
|
||||
sign = 1;
|
||||
column_range = (column1 + width1..to_column + 1).collect();
|
||||
} else if to_column < column1 {
|
||||
// we go left, starting from `column1 - `` all the way to `to_column`
|
||||
anchor_column = column1 + width1 - 1;
|
||||
sign = -1;
|
||||
column_range = (to_column..column1).rev().collect();
|
||||
} else {
|
||||
return Err("Invalid parameters for autofill".to_string());
|
||||
}
|
||||
|
||||
for row in row1..row1 + height1 {
|
||||
let mut index = 0;
|
||||
for column_ref in &column_range {
|
||||
let column = *column_ref;
|
||||
// Save value and style first
|
||||
let old_value = self
|
||||
.model
|
||||
.workbook
|
||||
.worksheet(sheet)?
|
||||
.cell(row, column)
|
||||
.cloned();
|
||||
let old_style = self.model.get_style_for_cell(sheet, row, column);
|
||||
|
||||
// compute the new value and set it
|
||||
let source_column = anchor_column + index;
|
||||
let target_value = self
|
||||
.model
|
||||
.extend_to(sheet, row, source_column, row, column)?;
|
||||
self.model
|
||||
.set_user_input(sheet, row, column, target_value.to_string());
|
||||
|
||||
// Compute the new style and set it
|
||||
let new_style = self.model.get_style_for_cell(sheet, row, source_column);
|
||||
self.model.set_cell_style(sheet, row, column, &new_style)?;
|
||||
|
||||
// Add the diffs
|
||||
diff_list.push(Diff::SetCellStyle {
|
||||
sheet,
|
||||
row,
|
||||
column,
|
||||
old_value: Box::new(old_style),
|
||||
new_value: Box::new(new_style),
|
||||
});
|
||||
diff_list.push(Diff::SetCellValue {
|
||||
sheet,
|
||||
row,
|
||||
column,
|
||||
new_value: target_value.to_string(),
|
||||
old_value: Box::new(old_value),
|
||||
});
|
||||
|
||||
index = (index + sign) % width1;
|
||||
}
|
||||
}
|
||||
self.push_diff_list(diff_list);
|
||||
self.evaluate();
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Returns information about the sheets
|
||||
///
|
||||
/// See also:
|
||||
@@ -1156,24 +948,165 @@ impl UserModel {
|
||||
self.model.get_worksheets_properties()
|
||||
}
|
||||
|
||||
/// Set the gid lines in the worksheet to visible (`true`) or hidden (`false`)
|
||||
pub fn set_show_grid_lines(&mut self, sheet: u32, show_grid_lines: bool) -> Result<(), String> {
|
||||
let old_value = self.model.workbook.worksheet(sheet)?.show_grid_lines;
|
||||
self.model.set_show_grid_lines(sheet, show_grid_lines)?;
|
||||
/// Returns the selected sheet index
|
||||
pub fn get_selected_sheet(&self) -> u32 {
|
||||
if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
view.sheet
|
||||
} else {
|
||||
0
|
||||
}
|
||||
}
|
||||
|
||||
self.push_diff_list(vec![Diff::SetShowGridLines {
|
||||
sheet,
|
||||
new_value: show_grid_lines,
|
||||
old_value,
|
||||
}]);
|
||||
/// Returns the selected cell
|
||||
pub fn get_selected_cell(&self) -> (u32, i32, i32) {
|
||||
let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
view.sheet
|
||||
} else {
|
||||
0
|
||||
};
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
|
||||
if let Some(view) = worksheet.views.get(&self.model.view_id) {
|
||||
return (sheet, view.row, view.column);
|
||||
}
|
||||
}
|
||||
// return a safe default
|
||||
(0, 1, 1)
|
||||
}
|
||||
|
||||
/// Returns selected view
|
||||
pub fn get_selected_view(&self) -> SelectedView {
|
||||
let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
view.sheet
|
||||
} else {
|
||||
0
|
||||
};
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
|
||||
if let Some(view) = worksheet.views.get(&self.model.view_id) {
|
||||
return SelectedView {
|
||||
sheet,
|
||||
row: view.row,
|
||||
column: view.column,
|
||||
range: view.range,
|
||||
top_row: view.top_row,
|
||||
left_column: view.left_column,
|
||||
};
|
||||
}
|
||||
}
|
||||
// return a safe default
|
||||
SelectedView {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: 1,
|
||||
range: [1, 1, 1, 1],
|
||||
top_row: 1,
|
||||
left_column: 1,
|
||||
}
|
||||
}
|
||||
|
||||
/// Sets the the selected sheet
|
||||
pub fn set_selected_sheet(&mut self, sheet: u32) -> Result<(), String> {
|
||||
if self.model.workbook.worksheet(sheet).is_err() {
|
||||
return Err(format!("Invalid worksheet index {}", sheet));
|
||||
}
|
||||
if let Some(view) = self.model.workbook.views.get_mut(&0) {
|
||||
view.sheet = sheet;
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Returns true in the grid lines for
|
||||
pub fn get_show_grid_lines(&self, sheet: u32) -> Result<bool, String> {
|
||||
Ok(self.model.workbook.worksheet(sheet)?.show_grid_lines)
|
||||
/// Sets the selected cell
|
||||
pub fn set_selected_cell(&mut self, row: i32, column: i32) -> Result<(), String> {
|
||||
let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
view.sheet
|
||||
} else {
|
||||
0
|
||||
};
|
||||
if !is_valid_column_number(column) {
|
||||
return Err(format!("Invalid column: '{column}'"));
|
||||
}
|
||||
if !is_valid_column_number(row) {
|
||||
return Err(format!("Invalid row: '{row}'"));
|
||||
}
|
||||
if self.model.workbook.worksheet(sheet).is_err() {
|
||||
return Err(format!("Invalid worksheet index {}", sheet));
|
||||
}
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
|
||||
if let Some(view) = worksheet.views.get_mut(&0) {
|
||||
view.row = row;
|
||||
view.column = column;
|
||||
view.range = [row, column, row, column];
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Sets the selected range
|
||||
pub fn set_selected_range(
|
||||
&mut self,
|
||||
start_row: i32,
|
||||
start_column: i32,
|
||||
end_row: i32,
|
||||
end_column: i32,
|
||||
) -> Result<(), String> {
|
||||
let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
view.sheet
|
||||
} else {
|
||||
0
|
||||
};
|
||||
|
||||
if !is_valid_column_number(start_column) {
|
||||
return Err(format!("Invalid column: '{start_column}'"));
|
||||
}
|
||||
if !is_valid_column_number(start_row) {
|
||||
return Err(format!("Invalid row: '{start_row}'"));
|
||||
}
|
||||
|
||||
if !is_valid_column_number(end_column) {
|
||||
return Err(format!("Invalid column: '{end_column}'"));
|
||||
}
|
||||
if !is_valid_column_number(end_row) {
|
||||
return Err(format!("Invalid row: '{end_row}'"));
|
||||
}
|
||||
if self.model.workbook.worksheet(sheet).is_err() {
|
||||
return Err(format!("Invalid worksheet index {}", sheet));
|
||||
}
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
|
||||
if let Some(view) = worksheet.views.get_mut(&0) {
|
||||
view.range = [start_row, start_column, end_row, end_column];
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Sets the value of the first visible cell
|
||||
pub fn set_top_left_visible_cell(
|
||||
&mut self,
|
||||
top_row: i32,
|
||||
left_column: i32,
|
||||
) -> Result<(), String> {
|
||||
let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
view.sheet
|
||||
} else {
|
||||
0
|
||||
};
|
||||
|
||||
if !is_valid_column_number(left_column) {
|
||||
return Err(format!("Invalid column: '{left_column}'"));
|
||||
}
|
||||
if !is_valid_column_number(top_row) {
|
||||
return Err(format!("Invalid row: '{top_row}'"));
|
||||
}
|
||||
if self.model.workbook.worksheet(sheet).is_err() {
|
||||
return Err(format!("Invalid worksheet index {}", sheet));
|
||||
}
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
|
||||
if let Some(view) = worksheet.views.get_mut(&0) {
|
||||
view.top_row = top_row;
|
||||
view.left_column = left_column;
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
// **** Private methods ****** //
|
||||
|
||||
fn push_diff_list(&mut self, diff_list: DiffList) {
|
||||
@@ -1337,13 +1270,6 @@ impl UserModel {
|
||||
} => {
|
||||
self.model.set_sheet_color(*index, old_value)?;
|
||||
}
|
||||
Diff::SetShowGridLines {
|
||||
sheet,
|
||||
old_value,
|
||||
new_value: _,
|
||||
} => {
|
||||
self.model.set_show_grid_lines(*sheet, *old_value)?;
|
||||
}
|
||||
}
|
||||
}
|
||||
if needs_evaluation {
|
||||
@@ -1464,13 +1390,6 @@ impl UserModel {
|
||||
} => {
|
||||
self.model.set_sheet_color(*index, new_value)?;
|
||||
}
|
||||
Diff::SetShowGridLines {
|
||||
sheet,
|
||||
old_value: _,
|
||||
new_value,
|
||||
} => {
|
||||
self.model.set_show_grid_lines(*sheet, *new_value)?;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1485,7 +1404,7 @@ impl UserModel {
|
||||
mod tests {
|
||||
use crate::{
|
||||
types::{HorizontalAlignment, VerticalAlignment},
|
||||
user_model::common::{horizontal, vertical},
|
||||
user_model::{horizontal, vertical},
|
||||
};
|
||||
|
||||
#[test]
|
||||
@@ -1,164 +0,0 @@
|
||||
use std::collections::HashMap;
|
||||
|
||||
use bitcode::{Decode, Encode};
|
||||
|
||||
use crate::types::{Cell, Col, Row, Style};
|
||||
|
||||
#[derive(Clone, Encode, Decode)]
|
||||
pub(crate) struct RowData {
|
||||
pub(crate) row: Option<Row>,
|
||||
pub(crate) data: HashMap<i32, Cell>,
|
||||
}
|
||||
|
||||
#[derive(Clone, Encode, Decode)]
|
||||
pub(crate) struct ColumnData {
|
||||
pub(crate) column: Option<Col>,
|
||||
pub(crate) data: HashMap<i32, Cell>,
|
||||
}
|
||||
|
||||
#[derive(Clone, Encode, Decode)]
|
||||
pub(crate) enum Diff {
|
||||
// Cell diffs
|
||||
SetCellValue {
|
||||
sheet: u32,
|
||||
row: i32,
|
||||
column: i32,
|
||||
new_value: String,
|
||||
old_value: Box<Option<Cell>>,
|
||||
},
|
||||
CellClearContents {
|
||||
sheet: u32,
|
||||
row: i32,
|
||||
column: i32,
|
||||
old_value: Box<Option<Cell>>,
|
||||
},
|
||||
CellClearAll {
|
||||
sheet: u32,
|
||||
row: i32,
|
||||
column: i32,
|
||||
old_value: Box<Option<Cell>>,
|
||||
old_style: Box<Style>,
|
||||
},
|
||||
SetCellStyle {
|
||||
sheet: u32,
|
||||
row: i32,
|
||||
column: i32,
|
||||
old_value: Box<Style>,
|
||||
new_value: Box<Style>,
|
||||
},
|
||||
// Column and Row diffs
|
||||
SetColumnWidth {
|
||||
sheet: u32,
|
||||
column: i32,
|
||||
new_value: f64,
|
||||
old_value: f64,
|
||||
},
|
||||
SetRowHeight {
|
||||
sheet: u32,
|
||||
row: i32,
|
||||
new_value: f64,
|
||||
old_value: f64,
|
||||
},
|
||||
InsertRow {
|
||||
sheet: u32,
|
||||
row: i32,
|
||||
},
|
||||
DeleteRow {
|
||||
sheet: u32,
|
||||
row: i32,
|
||||
old_data: Box<RowData>,
|
||||
},
|
||||
InsertColumn {
|
||||
sheet: u32,
|
||||
column: i32,
|
||||
},
|
||||
DeleteColumn {
|
||||
sheet: u32,
|
||||
column: i32,
|
||||
old_data: Box<ColumnData>,
|
||||
},
|
||||
SetFrozenRowsCount {
|
||||
sheet: u32,
|
||||
new_value: i32,
|
||||
old_value: i32,
|
||||
},
|
||||
SetFrozenColumnsCount {
|
||||
sheet: u32,
|
||||
new_value: i32,
|
||||
old_value: i32,
|
||||
},
|
||||
DeleteSheet {
|
||||
sheet: u32,
|
||||
},
|
||||
NewSheet {
|
||||
index: u32,
|
||||
name: String,
|
||||
},
|
||||
RenameSheet {
|
||||
index: u32,
|
||||
old_value: String,
|
||||
new_value: String,
|
||||
},
|
||||
SetSheetColor {
|
||||
index: u32,
|
||||
old_value: String,
|
||||
new_value: String,
|
||||
},
|
||||
SetShowGridLines {
|
||||
sheet: u32,
|
||||
old_value: bool,
|
||||
new_value: bool,
|
||||
}, // FIXME: we are missing SetViewDiffs
|
||||
}
|
||||
|
||||
pub(crate) type DiffList = Vec<Diff>;
|
||||
|
||||
#[derive(Default)]
|
||||
pub(crate) struct History {
|
||||
pub(crate) undo_stack: Vec<DiffList>,
|
||||
pub(crate) redo_stack: Vec<DiffList>,
|
||||
}
|
||||
|
||||
impl History {
|
||||
pub fn push(&mut self, diff_list: DiffList) {
|
||||
self.undo_stack.push(diff_list);
|
||||
self.redo_stack = vec![];
|
||||
}
|
||||
|
||||
pub fn undo(&mut self) -> Option<Vec<Diff>> {
|
||||
match self.undo_stack.pop() {
|
||||
Some(diff_list) => {
|
||||
self.redo_stack.push(diff_list.clone());
|
||||
Some(diff_list)
|
||||
}
|
||||
None => None,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn redo(&mut self) -> Option<Vec<Diff>> {
|
||||
match self.redo_stack.pop() {
|
||||
Some(diff_list) => {
|
||||
self.undo_stack.push(diff_list.clone());
|
||||
Some(diff_list)
|
||||
}
|
||||
None => None,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn clear(&mut self) {
|
||||
self.redo_stack = vec![];
|
||||
self.undo_stack = vec![];
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Clone, Encode, Decode)]
|
||||
pub enum DiffType {
|
||||
Undo,
|
||||
Redo,
|
||||
}
|
||||
|
||||
#[derive(Clone, Encode, Decode)]
|
||||
pub struct QueueDiffs {
|
||||
pub r#type: DiffType,
|
||||
pub list: DiffList,
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
#![deny(missing_docs)]
|
||||
|
||||
mod common;
|
||||
mod history;
|
||||
mod ui;
|
||||
|
||||
pub use common::UserModel;
|
||||
|
||||
#[cfg(test)]
|
||||
pub use ui::SelectedView;
|
||||
|
||||
pub use common::BorderArea;
|
||||
@@ -1,671 +0,0 @@
|
||||
#![deny(missing_docs)]
|
||||
|
||||
use serde::{Deserialize, Serialize};
|
||||
|
||||
use crate::expressions::utils::{is_valid_column_number, is_valid_row};
|
||||
|
||||
use super::common::UserModel;
|
||||
|
||||
#[derive(Serialize, Deserialize)]
|
||||
#[cfg_attr(test, derive(PartialEq, Debug))]
|
||||
pub struct SelectedView {
|
||||
pub sheet: u32,
|
||||
pub row: i32,
|
||||
pub column: i32,
|
||||
pub range: [i32; 4],
|
||||
pub top_row: i32,
|
||||
pub left_column: i32,
|
||||
}
|
||||
|
||||
impl UserModel {
|
||||
/// Returns the selected sheet index
|
||||
pub fn get_selected_sheet(&self) -> u32 {
|
||||
if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
view.sheet
|
||||
} else {
|
||||
0
|
||||
}
|
||||
}
|
||||
|
||||
/// Returns the selected cell
|
||||
pub fn get_selected_cell(&self) -> (u32, i32, i32) {
|
||||
let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
view.sheet
|
||||
} else {
|
||||
0
|
||||
};
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
|
||||
if let Some(view) = worksheet.views.get(&self.model.view_id) {
|
||||
return (sheet, view.row, view.column);
|
||||
}
|
||||
}
|
||||
// return a safe default
|
||||
(0, 1, 1)
|
||||
}
|
||||
|
||||
/// Returns selected view
|
||||
pub fn get_selected_view(&self) -> SelectedView {
|
||||
let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
view.sheet
|
||||
} else {
|
||||
0
|
||||
};
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
|
||||
if let Some(view) = worksheet.views.get(&self.model.view_id) {
|
||||
return SelectedView {
|
||||
sheet,
|
||||
row: view.row,
|
||||
column: view.column,
|
||||
range: view.range,
|
||||
top_row: view.top_row,
|
||||
left_column: view.left_column,
|
||||
};
|
||||
}
|
||||
}
|
||||
// return a safe default
|
||||
SelectedView {
|
||||
sheet: 0,
|
||||
row: 1,
|
||||
column: 1,
|
||||
range: [1, 1, 1, 1],
|
||||
top_row: 1,
|
||||
left_column: 1,
|
||||
}
|
||||
}
|
||||
|
||||
/// Sets the the selected sheet
|
||||
pub fn set_selected_sheet(&mut self, sheet: u32) -> Result<(), String> {
|
||||
if self.model.workbook.worksheet(sheet).is_err() {
|
||||
return Err(format!("Invalid worksheet index {}", sheet));
|
||||
}
|
||||
if let Some(view) = self.model.workbook.views.get_mut(&0) {
|
||||
view.sheet = sheet;
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Sets the selected cell
|
||||
pub fn set_selected_cell(&mut self, row: i32, column: i32) -> Result<(), String> {
|
||||
let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
view.sheet
|
||||
} else {
|
||||
0
|
||||
};
|
||||
if !is_valid_column_number(column) {
|
||||
return Err(format!("Invalid column: '{column}'"));
|
||||
}
|
||||
if !is_valid_row(row) {
|
||||
return Err(format!("Invalid row: '{row}'"));
|
||||
}
|
||||
if self.model.workbook.worksheet(sheet).is_err() {
|
||||
return Err(format!("Invalid worksheet index {}", sheet));
|
||||
}
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
|
||||
if let Some(view) = worksheet.views.get_mut(&0) {
|
||||
view.row = row;
|
||||
view.column = column;
|
||||
view.range = [row, column, row, column];
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Sets the selected range
|
||||
pub fn set_selected_range(
|
||||
&mut self,
|
||||
start_row: i32,
|
||||
start_column: i32,
|
||||
end_row: i32,
|
||||
end_column: i32,
|
||||
) -> Result<(), String> {
|
||||
let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
view.sheet
|
||||
} else {
|
||||
0
|
||||
};
|
||||
|
||||
if !is_valid_column_number(start_column) {
|
||||
return Err(format!("Invalid column: '{start_column}'"));
|
||||
}
|
||||
if !is_valid_row(start_row) {
|
||||
return Err(format!("Invalid row: '{start_row}'"));
|
||||
}
|
||||
|
||||
if !is_valid_column_number(end_column) {
|
||||
return Err(format!("Invalid column: '{end_column}'"));
|
||||
}
|
||||
if !is_valid_row(end_row) {
|
||||
return Err(format!("Invalid row: '{end_row}'"));
|
||||
}
|
||||
if self.model.workbook.worksheet(sheet).is_err() {
|
||||
return Err(format!("Invalid worksheet index {}", sheet));
|
||||
}
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
|
||||
if let Some(view) = worksheet.views.get_mut(&0) {
|
||||
view.range = [start_row, start_column, end_row, end_column];
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// The selected range is expanded with the keyboard
|
||||
pub fn on_expand_selected_range(&mut self, key: &str) -> Result<(), String> {
|
||||
let (sheet, window_width, window_height) =
|
||||
if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
(
|
||||
view.sheet,
|
||||
view.window_width as f64,
|
||||
view.window_height as f64,
|
||||
)
|
||||
} else {
|
||||
return Ok(());
|
||||
};
|
||||
let (selected_row, selected_column, range, top_row, left_column) =
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
|
||||
if let Some(view) = worksheet.views.get(&self.model.view_id) {
|
||||
(
|
||||
view.row,
|
||||
view.column,
|
||||
view.range,
|
||||
view.top_row,
|
||||
view.left_column,
|
||||
)
|
||||
} else {
|
||||
return Ok(());
|
||||
}
|
||||
} else {
|
||||
return Ok(());
|
||||
};
|
||||
let [row_start, column_start, row_end, column_end] = range;
|
||||
|
||||
match key {
|
||||
"ArrowRight" => {
|
||||
if selected_column > column_start {
|
||||
let new_column = column_start + 1;
|
||||
if !(is_valid_column_number(new_column)) {
|
||||
return Ok(());
|
||||
}
|
||||
self.set_selected_range(row_start, new_column, row_end, column_end)?;
|
||||
} else {
|
||||
let new_column = column_end + 1;
|
||||
if !is_valid_column_number(new_column) {
|
||||
return Ok(());
|
||||
}
|
||||
// if the column is not fully visible we 'scroll' right until it is
|
||||
let mut width = 0.0;
|
||||
let mut c = left_column;
|
||||
while c <= new_column {
|
||||
width += self.model.get_column_width(sheet, c)?;
|
||||
c += 1;
|
||||
}
|
||||
if width > window_width {
|
||||
self.set_top_left_visible_cell(top_row, left_column + 1)?;
|
||||
}
|
||||
self.set_selected_range(row_start, column_start, row_end, column_end + 1)?;
|
||||
}
|
||||
}
|
||||
"ArrowLeft" => {
|
||||
if selected_column < column_end {
|
||||
let new_column = column_end - 1;
|
||||
if !is_valid_column_number(new_column) {
|
||||
return Ok(());
|
||||
}
|
||||
if new_column < left_column {
|
||||
self.set_top_left_visible_cell(top_row, new_column)?;
|
||||
}
|
||||
self.set_selected_range(row_start, column_start, row_end, new_column)?;
|
||||
} else {
|
||||
let new_column = column_start - 1;
|
||||
if !is_valid_column_number(new_column) {
|
||||
return Ok(());
|
||||
}
|
||||
if new_column < left_column {
|
||||
self.set_top_left_visible_cell(top_row, new_column)?;
|
||||
}
|
||||
self.set_selected_range(row_start, new_column, row_end, column_end)?;
|
||||
}
|
||||
}
|
||||
"ArrowUp" => {
|
||||
if selected_row < row_end {
|
||||
let new_row = row_end - 1;
|
||||
if !is_valid_row(new_row) {
|
||||
return Ok(());
|
||||
}
|
||||
self.set_selected_range(row_start, column_start, new_row, column_end)?;
|
||||
} else {
|
||||
let new_row = row_start - 1;
|
||||
if !is_valid_row(new_row) {
|
||||
return Ok(());
|
||||
}
|
||||
if new_row < top_row {
|
||||
self.set_top_left_visible_cell(new_row, left_column)?;
|
||||
}
|
||||
self.set_selected_range(new_row, column_start, row_end, column_end)?;
|
||||
}
|
||||
}
|
||||
"ArrowDown" => {
|
||||
if selected_row > row_start {
|
||||
let new_row = row_start + 1;
|
||||
if !is_valid_row(new_row) {
|
||||
return Ok(());
|
||||
}
|
||||
self.set_selected_range(new_row, column_start, row_end, column_end)?;
|
||||
} else {
|
||||
let new_row = row_end + 1;
|
||||
if !is_valid_row(new_row) {
|
||||
return Ok(());
|
||||
}
|
||||
let mut height = 0.0;
|
||||
let mut r = top_row;
|
||||
while r <= new_row + 1 {
|
||||
height += self.model.get_row_height(sheet, r)?;
|
||||
r += 1;
|
||||
}
|
||||
if height >= window_height {
|
||||
self.set_top_left_visible_cell(top_row + 1, left_column)?;
|
||||
}
|
||||
self.set_selected_range(row_start, column_start, new_row, column_end)?;
|
||||
}
|
||||
}
|
||||
_ => {}
|
||||
}
|
||||
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Sets the value of the first visible cell
|
||||
pub fn set_top_left_visible_cell(
|
||||
&mut self,
|
||||
top_row: i32,
|
||||
left_column: i32,
|
||||
) -> Result<(), String> {
|
||||
let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
view.sheet
|
||||
} else {
|
||||
0
|
||||
};
|
||||
|
||||
if !is_valid_column_number(left_column) {
|
||||
return Err(format!("Invalid column: '{left_column}'"));
|
||||
}
|
||||
if !is_valid_row(top_row) {
|
||||
return Err(format!("Invalid row: '{top_row}'"));
|
||||
}
|
||||
if self.model.workbook.worksheet(sheet).is_err() {
|
||||
return Err(format!("Invalid worksheet index {}", sheet));
|
||||
}
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
|
||||
if let Some(view) = worksheet.views.get_mut(&0) {
|
||||
view.top_row = top_row;
|
||||
view.left_column = left_column;
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Sets the width of the window
|
||||
pub fn set_window_width(&mut self, window_width: f64) {
|
||||
if let Some(view) = self.model.workbook.views.get_mut(&self.model.view_id) {
|
||||
view.window_width = window_width as i64;
|
||||
};
|
||||
}
|
||||
|
||||
/// Gets the width of the window
|
||||
pub fn get_window_width(&mut self) -> Result<i64, String> {
|
||||
if let Some(view) = self.model.workbook.views.get_mut(&self.model.view_id) {
|
||||
return Ok(view.window_width);
|
||||
};
|
||||
Err("View not found".to_string())
|
||||
}
|
||||
|
||||
/// Sets the height of the window
|
||||
pub fn set_window_height(&mut self, window_height: f64) {
|
||||
if let Some(view) = self.model.workbook.views.get_mut(&self.model.view_id) {
|
||||
view.window_height = window_height as i64;
|
||||
};
|
||||
}
|
||||
|
||||
/// Gets the height of the window
|
||||
pub fn get_window_height(&mut self) -> Result<i64, String> {
|
||||
if let Some(view) = self.model.workbook.views.get_mut(&self.model.view_id) {
|
||||
return Ok(view.window_height);
|
||||
};
|
||||
Err("View not found".to_string())
|
||||
}
|
||||
|
||||
/// User presses right arrow
|
||||
pub fn on_arrow_right(&mut self) -> Result<(), String> {
|
||||
let (sheet, window_width) =
|
||||
if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
(view.sheet, view.window_width)
|
||||
} else {
|
||||
return Err("View not found".to_string());
|
||||
};
|
||||
let worksheet = match self.model.workbook.worksheet(sheet) {
|
||||
Ok(s) => s,
|
||||
Err(_) => return Err("Worksheet not found".to_string()),
|
||||
};
|
||||
let view = match worksheet.views.get(&self.model.view_id) {
|
||||
Some(s) => s,
|
||||
None => return Err("View not found".to_string()),
|
||||
};
|
||||
let new_column = view.column + 1;
|
||||
if !is_valid_column_number(new_column) {
|
||||
return Ok(());
|
||||
}
|
||||
// if the column is not fully visible we 'scroll' right until it is
|
||||
let mut width = 0.0;
|
||||
let mut column = view.left_column;
|
||||
while column <= new_column {
|
||||
width += self.model.get_column_width(sheet, column)?;
|
||||
column += 1;
|
||||
}
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
|
||||
if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
|
||||
view.column = new_column;
|
||||
view.range = [view.row, new_column, view.row, new_column];
|
||||
if width > window_width as f64 {
|
||||
view.left_column += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// User presses left arrow
|
||||
pub fn on_arrow_left(&mut self) -> Result<(), String> {
|
||||
let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
view.sheet
|
||||
} else {
|
||||
return Err("View not found".to_string());
|
||||
};
|
||||
let worksheet = match self.model.workbook.worksheet(sheet) {
|
||||
Ok(s) => s,
|
||||
Err(_) => return Err("Worksheet not found".to_string()),
|
||||
};
|
||||
let view = match worksheet.views.get(&self.model.view_id) {
|
||||
Some(s) => s,
|
||||
None => return Err("View not found".to_string()),
|
||||
};
|
||||
let new_column = view.column - 1;
|
||||
if !is_valid_column_number(new_column) {
|
||||
return Ok(());
|
||||
}
|
||||
// if the column is not fully visible we 'scroll' right until it is
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
|
||||
if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
|
||||
view.column = new_column;
|
||||
view.range = [view.row, new_column, view.row, new_column];
|
||||
if new_column < view.left_column {
|
||||
view.left_column = new_column;
|
||||
}
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// User presses up arrow key
|
||||
pub fn on_arrow_up(&mut self) -> Result<(), String> {
|
||||
let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
view.sheet
|
||||
} else {
|
||||
return Err("View not found".to_string());
|
||||
};
|
||||
let worksheet = match self.model.workbook.worksheet(sheet) {
|
||||
Ok(s) => s,
|
||||
Err(_) => return Err("Worksheet not found".to_string()),
|
||||
};
|
||||
let view = match worksheet.views.get(&self.model.view_id) {
|
||||
Some(s) => s,
|
||||
None => return Err("View not found".to_string()),
|
||||
};
|
||||
let new_row = view.row - 1;
|
||||
if !is_valid_row(new_row) {
|
||||
return Ok(());
|
||||
}
|
||||
// if the column is not fully visible we 'scroll' right until it is
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
|
||||
if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
|
||||
view.row = new_row;
|
||||
view.range = [new_row, view.column, new_row, view.column];
|
||||
if new_row < view.top_row {
|
||||
view.top_row = new_row;
|
||||
}
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// User presses down arrow key
|
||||
pub fn on_arrow_down(&mut self) -> Result<(), String> {
|
||||
let (sheet, window_height) =
|
||||
if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
(view.sheet, view.window_height)
|
||||
} else {
|
||||
return Err("View not found".to_string());
|
||||
};
|
||||
let worksheet = match self.model.workbook.worksheet(sheet) {
|
||||
Ok(s) => s,
|
||||
Err(_) => return Err("Worksheet not found".to_string()),
|
||||
};
|
||||
let view = match worksheet.views.get(&self.model.view_id) {
|
||||
Some(s) => s,
|
||||
None => return Err("View not found".to_string()),
|
||||
};
|
||||
let new_row = view.row + 1;
|
||||
if !is_valid_row(new_row) {
|
||||
return Ok(());
|
||||
}
|
||||
// if the row is not fully visible we 'scroll' down until it is
|
||||
let mut height = 0.0;
|
||||
let mut row = view.top_row;
|
||||
while row <= new_row + 1 {
|
||||
height += self.model.get_row_height(sheet, row)?;
|
||||
row += 1;
|
||||
}
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
|
||||
if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
|
||||
view.row = new_row;
|
||||
view.range = [new_row, view.column, new_row, view.column];
|
||||
if height > window_height as f64 {
|
||||
view.top_row += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
// TODO: This function should be memoized
|
||||
/// Returns the x-coordinate of the cell in the top left corner
|
||||
pub fn get_scroll_x(&self) -> Result<f64, String> {
|
||||
let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
view.sheet
|
||||
} else {
|
||||
return Err("View not found".to_string());
|
||||
};
|
||||
let worksheet = match self.model.workbook.worksheet(sheet) {
|
||||
Ok(s) => s,
|
||||
Err(_) => return Err("Worksheet not found".to_string()),
|
||||
};
|
||||
let view = match worksheet.views.get(&self.model.view_id) {
|
||||
Some(s) => s,
|
||||
None => return Err("View not found".to_string()),
|
||||
};
|
||||
let mut scroll_x = 0.0;
|
||||
for column in 1..view.left_column {
|
||||
scroll_x += self.model.get_column_width(sheet, column)?;
|
||||
}
|
||||
Ok(scroll_x)
|
||||
}
|
||||
|
||||
// TODO: This function should be memoized
|
||||
/// Returns the y-coordinate of the cell in the top left corner
|
||||
pub fn get_scroll_y(&self) -> Result<f64, String> {
|
||||
let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
view.sheet
|
||||
} else {
|
||||
return Err("View not found".to_string());
|
||||
};
|
||||
let worksheet = match self.model.workbook.worksheet(sheet) {
|
||||
Ok(s) => s,
|
||||
Err(_) => return Err("Worksheet not found".to_string()),
|
||||
};
|
||||
let view = match worksheet.views.get(&self.model.view_id) {
|
||||
Some(s) => s,
|
||||
None => return Err("View not found".to_string()),
|
||||
};
|
||||
let mut scroll_y = 0.0;
|
||||
for row in 1..view.top_row {
|
||||
scroll_y += self.model.get_row_height(sheet, row)?;
|
||||
}
|
||||
Ok(scroll_y)
|
||||
}
|
||||
|
||||
/// User presses page down
|
||||
pub fn on_page_down(&mut self) -> Result<(), String> {
|
||||
let (sheet, window_height) =
|
||||
if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
(view.sheet, view.window_height)
|
||||
} else {
|
||||
return Err("View not found".to_string());
|
||||
};
|
||||
let worksheet = match self.model.workbook.worksheet(sheet) {
|
||||
Ok(s) => s,
|
||||
Err(_) => return Err("Worksheet not found".to_string()),
|
||||
};
|
||||
let view = match worksheet.views.get(&self.model.view_id) {
|
||||
Some(s) => s,
|
||||
None => return Err("View not found".to_string()),
|
||||
};
|
||||
|
||||
let mut height = 0.0;
|
||||
let mut last_row = view.top_row;
|
||||
while height <= window_height as f64 {
|
||||
height += self.model.get_row_height(sheet, last_row)?;
|
||||
last_row += 1;
|
||||
}
|
||||
if !is_valid_row(last_row) {
|
||||
return Ok(());
|
||||
}
|
||||
let row_delta = view.row - view.top_row;
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
|
||||
if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
|
||||
view.top_row = last_row;
|
||||
view.row = view.top_row + row_delta;
|
||||
view.range = [view.row, view.column, view.row, view.column];
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// On page up
|
||||
pub fn on_page_up(&mut self) -> Result<(), String> {
|
||||
let (sheet, window_height) =
|
||||
if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
(view.sheet, view.window_height)
|
||||
} else {
|
||||
return Err("View not found".to_string());
|
||||
};
|
||||
let worksheet = match self.model.workbook.worksheet(sheet) {
|
||||
Ok(s) => s,
|
||||
Err(_) => return Err("Worksheet not found".to_string()),
|
||||
};
|
||||
let view = match worksheet.views.get(&self.model.view_id) {
|
||||
Some(s) => s,
|
||||
None => return Err("View not found".to_string()),
|
||||
};
|
||||
|
||||
let mut height = 0.0;
|
||||
let mut last_row = view.top_row;
|
||||
while height <= window_height as f64 && last_row > 1 {
|
||||
height += self.model.get_row_height(sheet, last_row)?;
|
||||
last_row -= 1;
|
||||
}
|
||||
let row_delta = view.row - view.top_row;
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
|
||||
if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
|
||||
view.top_row = last_row;
|
||||
view.row = view.top_row + row_delta;
|
||||
view.range = [view.row, view.column, view.row, view.column];
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// We extend the selection to cell (target_row, target_column)
|
||||
pub fn on_area_selecting(&mut self, target_row: i32, target_column: i32) -> Result<(), String> {
|
||||
let (sheet, window_width, window_height) =
|
||||
if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
|
||||
(
|
||||
view.sheet,
|
||||
view.window_width as f64,
|
||||
view.window_height as f64,
|
||||
)
|
||||
} else {
|
||||
return Ok(());
|
||||
};
|
||||
let (selected_row, selected_column, range, top_row, left_column) =
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
|
||||
if let Some(view) = worksheet.views.get(&self.model.view_id) {
|
||||
(
|
||||
view.row,
|
||||
view.column,
|
||||
view.range,
|
||||
view.top_row,
|
||||
view.left_column,
|
||||
)
|
||||
} else {
|
||||
return Ok(());
|
||||
}
|
||||
} else {
|
||||
return Ok(());
|
||||
};
|
||||
let [row_start, column_start, _row_end, _column_end] = range;
|
||||
|
||||
let mut new_left_column = left_column;
|
||||
if target_column >= selected_column {
|
||||
let mut width = 0.0;
|
||||
let mut column = left_column;
|
||||
while column <= target_column {
|
||||
width += self.model.get_column_width(sheet, column)?;
|
||||
column += 1;
|
||||
}
|
||||
|
||||
while width > window_width {
|
||||
width -= self.model.get_column_width(sheet, new_left_column)?;
|
||||
new_left_column += 1;
|
||||
}
|
||||
} else if target_column < new_left_column {
|
||||
new_left_column = target_column;
|
||||
}
|
||||
let mut new_top_row = top_row;
|
||||
if target_row >= selected_row {
|
||||
let mut height = 0.0;
|
||||
let mut row = top_row;
|
||||
while row <= target_row {
|
||||
height += self.model.get_row_height(sheet, row)?;
|
||||
row += 1;
|
||||
}
|
||||
while height > window_height {
|
||||
height -= self.model.get_row_height(sheet, new_top_row)?;
|
||||
new_top_row += 1;
|
||||
}
|
||||
} else if target_row < new_top_row {
|
||||
new_top_row = target_row;
|
||||
}
|
||||
|
||||
if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
|
||||
if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
|
||||
view.range = [row_start, column_start, target_row, target_column];
|
||||
if new_top_row != top_row {
|
||||
view.top_row = new_top_row;
|
||||
}
|
||||
if new_left_column != left_column {
|
||||
view.left_column = new_left_column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Ok(())
|
||||
}
|
||||
}
|
||||
@@ -63,97 +63,15 @@ style_types = r"""
|
||||
getCellStyle(sheet: number, row: number, column: number): CellStyle;
|
||||
""".strip()
|
||||
|
||||
view = r"""
|
||||
* @returns {any}
|
||||
*/
|
||||
getSelectedView(): any;
|
||||
""".strip()
|
||||
|
||||
view_types = r"""
|
||||
* @returns {CellStyle}
|
||||
*/
|
||||
getSelectedView(): SelectedView;
|
||||
""".strip()
|
||||
|
||||
autofill_rows = r"""
|
||||
/**
|
||||
* @param {any} source_area
|
||||
* @param {number} to_row
|
||||
*/
|
||||
autoFillRows(source_area: any, to_row: number): void;
|
||||
"""
|
||||
|
||||
autofill_rows_types = r"""
|
||||
/**
|
||||
* @param {Area} source_area
|
||||
* @param {number} to_row
|
||||
*/
|
||||
autoFillRows(source_area: Area, to_row: number): void;
|
||||
"""
|
||||
|
||||
autofill_columns = r"""
|
||||
/**
|
||||
* @param {any} source_area
|
||||
* @param {number} to_column
|
||||
*/
|
||||
autoFillColumns(source_area: any, to_column: number): void;
|
||||
"""
|
||||
|
||||
autofill_columns_types = r"""
|
||||
/**
|
||||
* @param {Area} source_area
|
||||
* @param {number} to_column
|
||||
*/
|
||||
autoFillColumns(source_area: Area, to_column: number): void;
|
||||
"""
|
||||
|
||||
set_cell_style = r"""
|
||||
/**
|
||||
* @param {any} styles
|
||||
*/
|
||||
onPasteStyles(styles: any): void;
|
||||
"""
|
||||
|
||||
set_cell_style_types = r"""
|
||||
/**
|
||||
* @param {CellStyle[][]} styles
|
||||
*/
|
||||
onPasteStyles(styles: CellStyle[][]): void;
|
||||
"""
|
||||
|
||||
set_area_border = r"""
|
||||
/**
|
||||
* @param {any} area
|
||||
* @param {any} border_area
|
||||
*/
|
||||
setAreaWithBorder(area: any, border_area: any): void;
|
||||
"""
|
||||
|
||||
set_area_border_types = r"""
|
||||
/**
|
||||
* @param {Area} area
|
||||
* @param {BorderArea} border_area
|
||||
*/
|
||||
setAreaWithBorder(area: Area, border_area: BorderArea): void;
|
||||
"""
|
||||
|
||||
def fix_types(text):
|
||||
text = text.replace(get_tokens_str, get_tokens_str_types)
|
||||
text = text.replace(update_style_str, update_style_str_types)
|
||||
text = text.replace(properties, properties_types)
|
||||
text = text.replace(style, style_types)
|
||||
text = text.replace(view, view_types)
|
||||
text = text.replace(autofill_rows, autofill_rows_types)
|
||||
text = text.replace(autofill_columns, autofill_columns_types)
|
||||
text = text.replace(set_cell_style, set_cell_style_types)
|
||||
text = text.replace(set_area_border, set_area_border_types)
|
||||
with open("types.ts") as f:
|
||||
types_str = f.read()
|
||||
header_types = "{}\n\n{}".format(header, types_str)
|
||||
text = text.replace(header, header_types)
|
||||
if text.find("any") != -1:
|
||||
print("There are 'unfixed' types. Please check.")
|
||||
exit(1)
|
||||
return text
|
||||
|
||||
|
||||
|
||||
@@ -5,8 +5,8 @@ use wasm_bindgen::{
|
||||
|
||||
use ironcalc_base::{
|
||||
expressions::{lexer::util::get_tokens as tokenizer, types::Area},
|
||||
types::{CellType, Style},
|
||||
BorderArea, UserModel as BaseModel,
|
||||
types::CellType,
|
||||
UserModel as BaseModel,
|
||||
};
|
||||
|
||||
fn to_js_error(error: String) -> JsError {
|
||||
@@ -102,13 +102,6 @@ impl Model {
|
||||
self.model.rename_sheet(sheet, name).map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "setSheetColor")]
|
||||
pub fn set_sheet_color(&mut self, sheet: u32, color: &str) -> Result<(), JsError> {
|
||||
self.model
|
||||
.set_sheet_color(sheet, color)
|
||||
.map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "rangeClearAll")]
|
||||
pub fn range_clear_all(
|
||||
&mut self,
|
||||
@@ -271,12 +264,6 @@ impl Model {
|
||||
.map(|x| serde_wasm_bindgen::to_value(&x).unwrap())
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "onPasteStyles")]
|
||||
pub fn on_paste_styles(&mut self, styles: JsValue) -> Result<(), JsError> {
|
||||
let styles: &Vec<Vec<Style>> = &serde_wasm_bindgen::from_value(styles).unwrap();
|
||||
self.model.on_paste_styles(styles).map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "getCellType")]
|
||||
pub fn get_cell_type(&self, sheet: u32, row: i32, column: i32) -> Result<i32, JsError> {
|
||||
Ok(
|
||||
@@ -351,126 +338,4 @@ impl Model {
|
||||
.set_top_left_visible_cell(top_row, top_column)
|
||||
.map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "setShowGridLines")]
|
||||
pub fn set_show_grid_lines(
|
||||
&mut self,
|
||||
sheet: u32,
|
||||
show_grid_lines: bool,
|
||||
) -> Result<(), JsError> {
|
||||
self.model
|
||||
.set_show_grid_lines(sheet, show_grid_lines)
|
||||
.map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "getShowGridLines")]
|
||||
pub fn get_show_grid_lines(&mut self, sheet: u32) -> Result<bool, JsError> {
|
||||
self.model.get_show_grid_lines(sheet).map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "autoFillRows")]
|
||||
pub fn auto_fill_rows(&mut self, source_area: JsValue, to_row: i32) -> Result<(), JsError> {
|
||||
let area: Area =
|
||||
serde_wasm_bindgen::from_value(source_area).map_err(|e| to_js_error(e.to_string()))?;
|
||||
self.model
|
||||
.auto_fill_rows(&area, to_row)
|
||||
.map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "autoFillColumns")]
|
||||
pub fn auto_fill_columns(
|
||||
&mut self,
|
||||
source_area: JsValue,
|
||||
to_column: i32,
|
||||
) -> Result<(), JsError> {
|
||||
let area: Area =
|
||||
serde_wasm_bindgen::from_value(source_area).map_err(|e| to_js_error(e.to_string()))?;
|
||||
self.model
|
||||
.auto_fill_columns(&area, to_column)
|
||||
.map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "onArrowRight")]
|
||||
pub fn on_arrow_right(&mut self) -> Result<(), JsError> {
|
||||
self.model.on_arrow_right().map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "onArrowLeft")]
|
||||
pub fn on_arrow_left(&mut self) -> Result<(), JsError> {
|
||||
self.model.on_arrow_left().map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "onArrowUp")]
|
||||
pub fn on_arrow_up(&mut self) -> Result<(), JsError> {
|
||||
self.model.on_arrow_up().map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "onArrowDown")]
|
||||
pub fn on_arrow_down(&mut self) -> Result<(), JsError> {
|
||||
self.model.on_arrow_down().map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "onPageDown")]
|
||||
pub fn on_page_down(&mut self) -> Result<(), JsError> {
|
||||
self.model.on_page_down().map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "onPageUp")]
|
||||
pub fn on_page_up(&mut self) -> Result<(), JsError> {
|
||||
self.model.on_page_up().map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "setWindowWidth")]
|
||||
pub fn set_window_width(&mut self, window_width: f64) {
|
||||
self.model.set_window_width(window_width);
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "setWindowHeight")]
|
||||
pub fn set_window_height(&mut self, window_height: f64) {
|
||||
self.model.set_window_height(window_height);
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "getScrollX")]
|
||||
pub fn get_scroll_x(&self) -> Result<f64, JsError> {
|
||||
self.model.get_scroll_x().map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "getScrollY")]
|
||||
pub fn get_scroll_y(&self) -> Result<f64, JsError> {
|
||||
self.model.get_scroll_y().map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "onExpandSelectedRange")]
|
||||
pub fn on_expand_selected_range(&mut self, key: &str) -> Result<(), JsError> {
|
||||
self.model
|
||||
.on_expand_selected_range(key)
|
||||
.map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "onAreaSelecting")]
|
||||
pub fn on_area_selecting(
|
||||
&mut self,
|
||||
target_row: i32,
|
||||
target_column: i32,
|
||||
) -> Result<(), JsError> {
|
||||
self.model
|
||||
.on_area_selecting(target_row, target_column)
|
||||
.map_err(to_js_error)
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = "setAreaWithBorder")]
|
||||
pub fn set_area_with_border(
|
||||
&mut self,
|
||||
area: JsValue,
|
||||
border_area: JsValue,
|
||||
) -> Result<(), JsError> {
|
||||
let range: Area =
|
||||
serde_wasm_bindgen::from_value(area).map_err(|e| to_js_error(e.to_string()))?;
|
||||
let border: BorderArea =
|
||||
serde_wasm_bindgen::from_value(border_area).map_err(|e| to_js_error(e.to_string()))?;
|
||||
self.model
|
||||
.set_area_with_border(&range, &border)
|
||||
.map_err(|e| to_js_error(e.to_string()))?;
|
||||
Ok(())
|
||||
}
|
||||
}
|
||||
|
||||
@@ -119,14 +119,5 @@ test("floating column numbers get truncated", () => {
|
||||
assert.strictEqual(model.getRowHeight(0, 5), 100.5);
|
||||
});
|
||||
|
||||
test("autofill", () => {
|
||||
const model = new Model('en', 'UTC');
|
||||
model.setUserInput(0, 1, 1, "23");
|
||||
model.autoFillRows({sheet: 0, row: 1, column: 1, width: 1, height: 1}, 2);
|
||||
|
||||
const result = model.getFormattedCellValue(0, 2, 1);
|
||||
assert.strictEqual(result, "23");
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -6,24 +6,6 @@ export interface Area {
|
||||
height: number;
|
||||
}
|
||||
|
||||
export enum BorderType {
|
||||
All = "All",
|
||||
Inner = "Inner",
|
||||
Outer = "Outer",
|
||||
Top = "Top",
|
||||
Right = "Right",
|
||||
Bottom = "Bottom",
|
||||
Left = "Left",
|
||||
CenterH = "CenterH",
|
||||
CenterV = "CenterV",
|
||||
None = "None",
|
||||
}
|
||||
|
||||
export interface BorderArea {
|
||||
item: BorderItem;
|
||||
type: BorderType;
|
||||
}
|
||||
|
||||
type ErrorType =
|
||||
| "REF"
|
||||
| "NAME"
|
||||
@@ -133,19 +115,19 @@ interface CellStyleFont {
|
||||
scheme: string;
|
||||
}
|
||||
|
||||
// export enum BorderType {
|
||||
// BorderAll,
|
||||
// BorderInner,
|
||||
// BorderCenterH,
|
||||
// BorderCenterV,
|
||||
// BorderOuter,
|
||||
// BorderNone,
|
||||
// BorderTop,
|
||||
// BorderRight,
|
||||
// BorderBottom,
|
||||
// BorderLeft,
|
||||
// None,
|
||||
// }
|
||||
export enum BorderType {
|
||||
BorderAll,
|
||||
BorderInner,
|
||||
BorderCenterH,
|
||||
BorderCenterV,
|
||||
BorderOuter,
|
||||
BorderNone,
|
||||
BorderTop,
|
||||
BorderRight,
|
||||
BorderBottom,
|
||||
BorderLeft,
|
||||
None,
|
||||
}
|
||||
|
||||
export interface BorderOptions {
|
||||
color: string;
|
||||
@@ -210,12 +192,3 @@ export interface CellStyle {
|
||||
num_fmt: string;
|
||||
alignment?: Alignment;
|
||||
}
|
||||
|
||||
export interface SelectedView {
|
||||
sheet: number;
|
||||
row: number;
|
||||
column: number;
|
||||
range: [number, number, number, number];
|
||||
top_row: number;
|
||||
left_column: number;
|
||||
}
|
||||
|
||||
1
webapp/.gitignore → solidjs_app/.gitignore
vendored
1
webapp/.gitignore → solidjs_app/.gitignore
vendored
@@ -1,3 +1,2 @@
|
||||
node_modules/*
|
||||
dist/*
|
||||
example.json
|
||||
19
solidjs_app/.storybook/main.ts
Normal file
19
solidjs_app/.storybook/main.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import type { StorybookConfig } from "storybook-solidjs-vite";
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
|
||||
addons: [
|
||||
"@storybook/addon-links",
|
||||
"@storybook/addon-essentials",
|
||||
"@chromatic-com/storybook",
|
||||
"@storybook/addon-interactions",
|
||||
],
|
||||
framework: {
|
||||
name: "storybook-solidjs-vite",
|
||||
options: {},
|
||||
},
|
||||
docs: {
|
||||
autodocs: "tag",
|
||||
},
|
||||
};
|
||||
export default config;
|
||||
12
solidjs_app/.storybook/preview.ts
Normal file
12
solidjs_app/.storybook/preview.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default preview;
|
||||
8
solidjs_app/Makefile
Normal file
8
solidjs_app/Makefile
Normal file
@@ -0,0 +1,8 @@
|
||||
|
||||
lint:
|
||||
pnpm biome lint *
|
||||
|
||||
format:
|
||||
pnpm biome format *
|
||||
build:
|
||||
pnpm run build
|
||||
70
solidjs_app/README.md
Normal file
70
solidjs_app/README.md
Normal file
@@ -0,0 +1,70 @@
|
||||
# Web IronCalc
|
||||
|
||||
## Widgets
|
||||
|
||||
Toolbar
|
||||
NavigationBar
|
||||
FormulaBar
|
||||
ColorPicker
|
||||
Number Formatter
|
||||
Border Picker
|
||||
|
||||
|
||||
## Stack
|
||||
|
||||
Vite
|
||||
TypeScript
|
||||
SolidJs
|
||||
Lucide Icons
|
||||
BiomeJs
|
||||
Storybook
|
||||
pnpm
|
||||
|
||||
## Recreate
|
||||
|
||||
Install nodejs
|
||||
Activate pnpm
|
||||
corepack enable pnpm
|
||||
Create app
|
||||
pnpm create vite
|
||||
pnpm install
|
||||
add biomejs
|
||||
pnpm add --save-dev --save-exact @biomejs/biome
|
||||
pnpm biome init
|
||||
add solidjs
|
||||
add storybook
|
||||
pnpm dlx storybook@latest init
|
||||
add i18n
|
||||
pnpm add @solid-primitives/i18n
|
||||
(https://github.com/jfgodoy/vite-plugin-solid-svg)
|
||||
add vite-plugin-solid-svg
|
||||
add script: "restore": "cp node_modules/@ironcalc/wasm/wasm_bg.wasm node_modules/.vite/deps/",
|
||||
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
$ pnpm install # or npm install or yarn install
|
||||
```
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `pnpm run dev`
|
||||
|
||||
Runs the app in the development mode.<br>
|
||||
Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
|
||||
|
||||
### `pnpm run build`
|
||||
|
||||
Builds the app for production to the `dist` folder.<br>
|
||||
It correctly bundles Solid in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.<br>
|
||||
Your app is ready to be deployed!
|
||||
|
||||
## Deployment
|
||||
|
||||
Learn more about deploying your application with the [documentations](https://vitejs.dev/guide/static-deploy.html)
|
||||
15
solidjs_app/biome.json
Normal file
15
solidjs_app/biome.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
|
||||
"organizeImports": {
|
||||
"enabled": true
|
||||
},
|
||||
"linter": {
|
||||
"enabled": true,
|
||||
"rules": {
|
||||
"recommended": true
|
||||
}
|
||||
},
|
||||
"formatter": {
|
||||
"indentStyle": "space"
|
||||
}
|
||||
}
|
||||
13
solidjs_app/index.html
Normal file
13
solidjs_app/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/ironcalc_icon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Solid + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
35
solidjs_app/package.json
Normal file
35
solidjs_app/package.json
Normal file
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "app",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"restore": "cp node_modules/@ironcalc/wasm/wasm_bg.wasm node_modules/.vite/deps/",
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ironcalc/wasm": "file:../bindings/wasm/pkg",
|
||||
"@solid-primitives/i18n": "^2.1.1",
|
||||
"lucide-solid": "^0.379.0",
|
||||
"solid-js": "^1.8.15"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "1.7.0",
|
||||
"@chromatic-com/storybook": "^1.3.3",
|
||||
"@storybook/addon-essentials": "^8.0.8",
|
||||
"@storybook/addon-interactions": "^8.0.8",
|
||||
"@storybook/addon-links": "^8.0.8",
|
||||
"@storybook/blocks": "^8.0.8",
|
||||
"storybook": "^8.0.8",
|
||||
"storybook-solidjs": "^1.0.0-beta.2",
|
||||
"storybook-solidjs-vite": "^1.0.0-beta.2",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.2.0",
|
||||
"vite-plugin-solid": "^2.10.2",
|
||||
"vite-plugin-solid-svg": "^0.8.1"
|
||||
}
|
||||
}
|
||||
6864
solidjs_app/pnpm-lock.yaml
generated
Normal file
6864
solidjs_app/pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
8
solidjs_app/public/ironcalc_icon.svg
Normal file
8
solidjs_app/public/ironcalc_icon.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="600" height="600" rx="20" fill="#F2994A"/>
|
||||
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M348.98 100C348.98 166.034 322.748 229.362 276.055 276.055C268.163 283.947 259.796 291.255 251.021 297.95L251.021 500L348.98 500H251.021C251.021 433.966 277.252 370.637 323.945 323.945C331.837 316.053 340.204 308.745 348.98 302.05L348.98 100Z" fill="white"/>
|
||||
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M251.021 100.068C251.003 140.096 235.094 178.481 206.788 206.787C178.466 235.109 140.053 251.02 100 251.02V348.979C154.873 348.979 207.877 330.866 251.021 297.95V100.068Z" fill="white"/>
|
||||
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M348.98 499.882C349.011 459.872 364.918 421.507 393.213 393.213C421.534 364.891 459.947 348.98 500 348.98V251.02C445.128 251.02 392.123 269.134 348.98 302.05V499.882Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M276.055 276.055C322.748 229.362 348.98 166.034 348.98 100H251.021V297.95C259.796 291.255 268.163 283.947 276.055 276.055Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M348.98 302.05V499.895C348.98 499.93 348.98 499.965 348.98 500L251.021 500C251.021 499.946 251.02 499.891 251.021 499.837C251.064 433.862 277.291 370.599 323.945 323.945C331.837 316.053 340.204 308.745 348.98 302.05Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
7
solidjs_app/src/App.css
Normal file
7
solidjs_app/src/App.css
Normal file
@@ -0,0 +1,7 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
29
solidjs_app/src/App.tsx
Normal file
29
solidjs_app/src/App.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import { Show, createResource } from "solid-js";
|
||||
// import "./App.css";
|
||||
// import solidLogo from "./assets/solid.svg";
|
||||
|
||||
import init, { Model } from "@ironcalc/wasm";
|
||||
import Workbook from "./components/Workbook";
|
||||
|
||||
const fetchModel = async () => {
|
||||
await init();
|
||||
// const model_bytes = new Uint8Array(
|
||||
// await (await fetch("./example.ic")).arrayBuffer(),
|
||||
// );
|
||||
// const _model = Model.from_bytes(model_bytes);*/
|
||||
const model = new Model("en", "UTC");
|
||||
model.setUserInput(0, 1, 1, "=1+1");
|
||||
return model;
|
||||
};
|
||||
|
||||
function App() {
|
||||
const [model] = createResource(fetchModel);
|
||||
|
||||
return (
|
||||
<Show when={model()} fallback={<div>Loading...</div>}>
|
||||
{(model) => <Workbook model={model()} />}
|
||||
</Show>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
BIN
solidjs_app/src/assets/android-chrome-192x192.png
Normal file
BIN
solidjs_app/src/assets/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
solidjs_app/src/assets/android-chrome-512x512.png
Normal file
BIN
solidjs_app/src/assets/android-chrome-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
solidjs_app/src/assets/apple-touch-icon.png
Normal file
BIN
solidjs_app/src/assets/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
solidjs_app/src/assets/favicon-16x16.png
Normal file
BIN
solidjs_app/src/assets/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 441 B |
BIN
solidjs_app/src/assets/favicon-32x32.png
Normal file
BIN
solidjs_app/src/assets/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 729 B |
BIN
solidjs_app/src/assets/favicon.ico
Normal file
BIN
solidjs_app/src/assets/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
solidjs_app/src/assets/ironcalc_icon.png
Normal file
BIN
solidjs_app/src/assets/ironcalc_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
8
solidjs_app/src/assets/ironcalc_icon.svg
Normal file
8
solidjs_app/src/assets/ironcalc_icon.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="600" height="600" rx="20" fill="#F2994A"/>
|
||||
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M348.98 100C348.98 166.034 322.748 229.362 276.055 276.055C268.163 283.947 259.796 291.255 251.021 297.95L251.021 500L348.98 500H251.021C251.021 433.966 277.252 370.637 323.945 323.945C331.837 316.053 340.204 308.745 348.98 302.05L348.98 100Z" fill="white"/>
|
||||
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M251.021 100.068C251.003 140.096 235.094 178.481 206.788 206.787C178.466 235.109 140.053 251.02 100 251.02V348.979C154.873 348.979 207.877 330.866 251.021 297.95V100.068Z" fill="white"/>
|
||||
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M348.98 499.882C349.011 459.872 364.918 421.507 393.213 393.213C421.534 364.891 459.947 348.98 500 348.98V251.02C445.128 251.02 392.123 269.134 348.98 302.05V499.882Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M276.055 276.055C322.748 229.362 348.98 166.034 348.98 100H251.021V297.95C259.796 291.255 268.163 283.947 276.055 276.055Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M348.98 302.05V499.895C348.98 499.93 348.98 499.965 348.98 500L251.021 500C251.021 499.946 251.02 499.891 251.021 499.837C251.064 433.862 277.291 370.599 323.945 323.945C331.837 316.053 340.204 308.745 348.98 302.05Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
BIN
solidjs_app/src/assets/logo.png
Normal file
BIN
solidjs_app/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
23
solidjs_app/src/components/Workbook.tsx
Normal file
23
solidjs_app/src/components/Workbook.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import type { Model } from "@ironcalc/wasm";
|
||||
import styles from "./workbook.module.css";
|
||||
import Toolbar from "./toolbar/Toolbar";
|
||||
import Navigation from "./navigation/Navigation";
|
||||
import FormulaBar from "./formulabar/FormulaBar";
|
||||
import Worksheet from "./Worksheet/Worksheet";
|
||||
|
||||
function Workbook(props: { model: Model }) {
|
||||
const onkeydown = (event: KeyboardEvent) => {
|
||||
console.log("key pressed: ", event);
|
||||
};
|
||||
return (
|
||||
<div class={styles.workbook} onkeydown={onkeydown} tabIndex={0}>
|
||||
<Toolbar></Toolbar>
|
||||
{/* {props.model.getFormattedCellValue(0, 1, 1)} */}
|
||||
<FormulaBar></FormulaBar>
|
||||
<Worksheet></Worksheet>
|
||||
<Navigation></Navigation>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Workbook;
|
||||
14
solidjs_app/src/components/Worksheet/Worksheet.tsx
Normal file
14
solidjs_app/src/components/Worksheet/Worksheet.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import styles from "./worksheet.module.css";
|
||||
|
||||
function Worksheet() {
|
||||
const onkeydown = (event: KeyboardEvent) => {
|
||||
console.log("key pressed: ", event);
|
||||
};
|
||||
return (
|
||||
<div class={styles.worksheet} onkeydown={onkeydown} tabIndex={0}>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Worksheet;
|
||||
14
solidjs_app/src/components/formulabar/FormulaBar.tsx
Normal file
14
solidjs_app/src/components/formulabar/FormulaBar.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import styles from "./formulabar.module.css";
|
||||
|
||||
function FormulaBar() {
|
||||
const onkeydown = (event: KeyboardEvent) => {
|
||||
console.log("key pressed: ", event);
|
||||
};
|
||||
return (
|
||||
<div class={styles.toolbar} onkeydown={onkeydown} tabIndex={0}>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FormulaBar;
|
||||
14
solidjs_app/src/components/navigation/Navigation.tsx
Normal file
14
solidjs_app/src/components/navigation/Navigation.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import styles from "./navigation.module.css";
|
||||
|
||||
function Navigation() {
|
||||
const onkeydown = (event: KeyboardEvent) => {
|
||||
console.log("key pressed: ", event);
|
||||
};
|
||||
return (
|
||||
<div class={styles.navigation} onkeydown={onkeydown} tabIndex={0}>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navigation;
|
||||
299
solidjs_app/src/components/toolbar/Toolbar.tsx
Normal file
299
solidjs_app/src/components/toolbar/Toolbar.tsx
Normal file
@@ -0,0 +1,299 @@
|
||||
import { JSX } from "solid-js/jsx-runtime";
|
||||
import styles from "./toolbar.module.css";
|
||||
import {
|
||||
AlignCenter,
|
||||
AlignLeft,
|
||||
AlignRight,
|
||||
ArrowDownToLine,
|
||||
ArrowUpToLine,
|
||||
Bold,
|
||||
ChevronDown,
|
||||
Euro,
|
||||
Grid2X2,
|
||||
Italic,
|
||||
Paintbrush2,
|
||||
PaintBucket,
|
||||
Percent,
|
||||
Redo2,
|
||||
Strikethrough,
|
||||
Type,
|
||||
Underline,
|
||||
Undo2,
|
||||
} from "lucide-solid";
|
||||
import { DecimalPlacesDecreaseIcon, DecimalPlacesIncreaseIcon, ArrowMiddleFromLine } from "../../icons";
|
||||
|
||||
function Toolbar() {
|
||||
const onkeydown = (event: KeyboardEvent) => {
|
||||
console.log("key pressed: ", event);
|
||||
};
|
||||
|
||||
const t = (s: string): string => s;
|
||||
|
||||
const properties = {
|
||||
onUndo: () => {},
|
||||
canUndo: true,
|
||||
onRedo: () => {},
|
||||
canRedo: true,
|
||||
onCopyStyles: () => {},
|
||||
canEdit: true,
|
||||
};
|
||||
|
||||
return (
|
||||
<div class={styles.toolbar} onkeydown={onkeydown} tabIndex={0}>
|
||||
<StyledButton
|
||||
pressed={false}
|
||||
onClick={properties.onUndo}
|
||||
disabled={!properties.canUndo}
|
||||
title={t("toolbar.undo")}
|
||||
>
|
||||
<Undo2 />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
pressed={false}
|
||||
onClick={properties.onRedo}
|
||||
disabled={!properties.canRedo}
|
||||
title={t("toolbar.redo")}
|
||||
>
|
||||
<Redo2 />
|
||||
</StyledButton>
|
||||
<div class={styles.divider} />
|
||||
<StyledButton
|
||||
pressed={false}
|
||||
onClick={properties.onCopyStyles}
|
||||
title={t("toolbar.copy_styles")}
|
||||
>
|
||||
<Paintbrush2 />
|
||||
</StyledButton>
|
||||
<div class={styles.divider} />
|
||||
<StyledButton
|
||||
pressed={false}
|
||||
// onClick={(): void => {
|
||||
// properties.onNumberFormatPicked(NumberFormats.CURRENCY_EUR);
|
||||
// }}
|
||||
title={t("toolbar.euro")}
|
||||
>
|
||||
<Euro />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
pressed={false}
|
||||
// onClick={(): void => {
|
||||
// properties.onNumberFormatPicked(NumberFormats.PERCENTAGE);
|
||||
// }}
|
||||
title={t("toolbar.percentage")}
|
||||
>
|
||||
<Percent />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
pressed={false}
|
||||
// onClick={(): void => {
|
||||
// properties.onNumberFormatPicked(
|
||||
// decreaseDecimalPlaces(properties.numFmt)
|
||||
// );
|
||||
// }}
|
||||
title={t("toolbar.decimal_places_decrease")}
|
||||
>
|
||||
<div><DecimalPlacesDecreaseIcon /></div>
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
pressed={false}
|
||||
// onClick={(): void => {
|
||||
// properties.onNumberFormatPicked(
|
||||
// increaseDecimalPlaces(properties.numFmt)
|
||||
// );
|
||||
// }}
|
||||
title={t("toolbar.decimal_places_increase")}
|
||||
>
|
||||
<DecimalPlacesIncreaseIcon />
|
||||
</StyledButton>
|
||||
{/* // <FormatMenu
|
||||
// numFmt={properties.numFmt}
|
||||
// onChange={(numberFmt): void => {
|
||||
// properties.onNumberFormatPicked(numberFmt);
|
||||
// }}
|
||||
// onExited={(): void => {}}
|
||||
// anchorOrigin={{
|
||||
// horizontal: 20, // Aligning the menu to the middle of FormatButton
|
||||
// vertical: "bottom",
|
||||
// }}
|
||||
// >*/
|
||||
<StyledButton
|
||||
|
||||
pressed={false}
|
||||
|
||||
title={t("toolbar.format_number")}
|
||||
>
|
||||
<div class={styles.format_menu}>{"123"}<ChevronDown /></div>
|
||||
|
||||
</StyledButton>
|
||||
/* </FormatMenu> */}
|
||||
<div class={styles.divider} />
|
||||
<StyledButton
|
||||
// pressed={properties.bold}
|
||||
// onClick={() => properties.onToggleBold(!properties.bold)}
|
||||
title={t("toolbar.bold")}
|
||||
>
|
||||
<Bold />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
// pressed={properties.italic}
|
||||
// onClick={() => properties.onToggleItalic(!properties.italic)}
|
||||
title={t("toolbar.italic")}
|
||||
>
|
||||
<Italic />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
// pressed={properties.underline}
|
||||
// onClick={() => properties.onToggleUnderline(!properties.underline)}
|
||||
title={t("toolbar.underline")}
|
||||
>
|
||||
<Underline />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
// pressed={properties.strike}
|
||||
// onClick={() => properties.onToggleStrike(!properties.strike)}
|
||||
title={t("toolbar.strike_trough")}
|
||||
>
|
||||
<Strikethrough />
|
||||
</StyledButton>
|
||||
<div class={styles.divider} />
|
||||
<StyledButton
|
||||
pressed={false}
|
||||
title={t("toolbar.font_color")}
|
||||
// ref={fontColorButton}
|
||||
// underlinedColor={properties.fontColor}
|
||||
// onClick={() => setFontColorPickerOpen(true)}
|
||||
>
|
||||
<Type />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
pressed={false}
|
||||
title={t("toolbar.fill_color")}
|
||||
// ref={fillColorButton}
|
||||
// underlinedColor={properties.fillColor}
|
||||
// onClick={() => setFillColorPickerOpen(true)}
|
||||
>
|
||||
<PaintBucket />
|
||||
</StyledButton>
|
||||
<div class={styles.divider} />
|
||||
<StyledButton
|
||||
// pressed={properties.horizontalAlign === "left"}
|
||||
// onClick={() =>
|
||||
// properties.onToggleHorizontalAlign(
|
||||
// properties.horizontalAlign === "left" ? "general" : "left"
|
||||
// )
|
||||
// }
|
||||
title={t("toolbar.align_left")}
|
||||
>
|
||||
<AlignLeft />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
// pressed={properties.horizontalAlign === "center"}
|
||||
// onClick={() =>
|
||||
// properties.onToggleHorizontalAlign(
|
||||
// properties.horizontalAlign === "center" ? "general" : "center"
|
||||
// )
|
||||
// }
|
||||
title={t("toolbar.align_center")}
|
||||
>
|
||||
<AlignCenter />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
// pressed={properties.horizontalAlign === "right"}
|
||||
// onClick={() =>
|
||||
// properties.onToggleHorizontalAlign(
|
||||
// properties.horizontalAlign === "right" ? "general" : "right"
|
||||
// )
|
||||
// }
|
||||
title={t("toolbar.align_right")}
|
||||
>
|
||||
<AlignRight />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
// pressed={properties.verticalAlign === "top"}
|
||||
// onClick={() =>
|
||||
// properties.onToggleVerticalAlign(
|
||||
// properties.verticalAlign === "top" ? "bottom" : "top"
|
||||
// )
|
||||
// }
|
||||
title={t("toolbar.vertical_align_top")}
|
||||
>
|
||||
<ArrowUpToLine />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
// pressed={properties.verticalAlign === "center"}
|
||||
// onClick={() =>
|
||||
// properties.onToggleVerticalAlign(
|
||||
// properties.verticalAlign === "center" ? "bottom" : "center"
|
||||
// )
|
||||
// }
|
||||
title={t("toolbar.vertical_align_center")}
|
||||
>
|
||||
<ArrowMiddleFromLine />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
// pressed={properties.verticalAlign === "bottom"}
|
||||
// onClick={() => properties.onToggleVerticalAlign("bottom")}
|
||||
title={t("toolbar.vertical_align_bottom")}
|
||||
>
|
||||
<ArrowDownToLine />
|
||||
</StyledButton>
|
||||
<div class={styles.divider} />
|
||||
<StyledButton
|
||||
pressed={false}
|
||||
// onClick={() => setBorderPickerOpen(true)}
|
||||
// ref={borderButton}
|
||||
title={t("toolbar.borders")}
|
||||
>
|
||||
<Grid2X2 />
|
||||
</StyledButton>
|
||||
{/* // <ColorPicker
|
||||
// color={properties.fontColor}
|
||||
// onChange={(color): void => {
|
||||
// properties.onTextColorPicked(color);
|
||||
// setFontColorPickerOpen(false);
|
||||
// }}
|
||||
// anchorEl={fontColorButton}
|
||||
// open={fontColorPickerOpen}
|
||||
// />
|
||||
// <ColorPicker
|
||||
// color={properties.fillColor}
|
||||
// onChange={(color): void => {
|
||||
// properties.onFillColorPicked(color);
|
||||
// setFillColorPickerOpen(false);
|
||||
// }}
|
||||
// anchorEl={fillColorButton}
|
||||
// open={fillColorPickerOpen}
|
||||
// />
|
||||
// <BorderPicker
|
||||
// onChange={(border): void => {
|
||||
// properties.onBorderChanged(border);
|
||||
// setBorderPickerOpen(false);
|
||||
// }}
|
||||
// anchorEl={borderButton}
|
||||
// open={borderPickerOpen}
|
||||
// /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StyledButton(props: {
|
||||
children: JSX.Element;
|
||||
title: string;
|
||||
onClick?: () => void;
|
||||
disabled?: boolean;
|
||||
pressed?: boolean;
|
||||
underlinedColor?: string;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
disabled={props.disabled || false}
|
||||
onClick={props.onClick}
|
||||
title={props.title}
|
||||
class={styles.button}
|
||||
>
|
||||
{props.children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default Toolbar;
|
||||
67
solidjs_app/src/components/toolbar/toolbar.module.css
Normal file
67
solidjs_app/src/components/toolbar/toolbar.module.css
Normal file
@@ -0,0 +1,67 @@
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
/* ${({ theme }) => theme.palette.background.paper}; */
|
||||
background: #fff;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
/* theme.palette.grey["600"] */
|
||||
border-bottom: 1px solid #757575;
|
||||
font-family: Inter;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26px;
|
||||
border: 0px solid #fff;
|
||||
border-radius: 2px;
|
||||
margin-right: 5px;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
background-color: white;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
color: grey;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.button:not(disabled) {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
color: #21243a;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #f1f2f8;
|
||||
border-top-color: #f1f2f8;
|
||||
}
|
||||
|
||||
.button svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 0px;
|
||||
height: 10px;
|
||||
border-left: 1px solid #d3d6e9;
|
||||
margin-left: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.format_menu {
|
||||
width: 40px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
}
|
||||
6
solidjs_app/src/components/workbook.module.css
Normal file
6
solidjs_app/src/components/workbook.module.css
Normal file
@@ -0,0 +1,6 @@
|
||||
/* @import './theme.css'; */
|
||||
|
||||
.workbook {
|
||||
/* background-color: var(--main-bg-color); */
|
||||
/* color: var(--other); */
|
||||
}
|
||||
|
Before Width: | Height: | Size: 869 B After Width: | Height: | Size: 869 B |
|
Before Width: | Height: | Size: 538 B After Width: | Height: | Size: 538 B |
|
Before Width: | Height: | Size: 498 B After Width: | Height: | Size: 498 B |
|
Before Width: | Height: | Size: 498 B After Width: | Height: | Size: 498 B |
|
Before Width: | Height: | Size: 586 B After Width: | Height: | Size: 586 B |
|
Before Width: | Height: | Size: 539 B After Width: | Height: | Size: 539 B |
|
Before Width: | Height: | Size: 513 B After Width: | Height: | Size: 513 B |
|
Before Width: | Height: | Size: 542 B After Width: | Height: | Size: 542 B |
|
Before Width: | Height: | Size: 538 B After Width: | Height: | Size: 538 B |
|
Before Width: | Height: | Size: 744 B After Width: | Height: | Size: 744 B |
|
Before Width: | Height: | Size: 539 B After Width: | Height: | Size: 539 B |
|
Before Width: | Height: | Size: 659 B After Width: | Height: | Size: 659 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1004 B After Width: | Height: | Size: 1004 B |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 929 B After Width: | Height: | Size: 929 B |
46
solidjs_app/src/icons/index.ts
Normal file
46
solidjs_app/src/icons/index.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import DecimalPlacesDecreaseIcon from "./decrease-decimal.svg";
|
||||
import DecimalPlacesIncreaseIcon from "./increase-decimal.svg";
|
||||
|
||||
import BorderBottomIcon from "./border-bottom.svg";
|
||||
import BorderCenterHIcon from "./border-center-h.svg";
|
||||
import BorderCenterVIcon from "./border-center-v.svg";
|
||||
import BorderInnerIcon from "./border-inner.svg";
|
||||
import BorderLeftIcon from "./border-left.svg";
|
||||
import BorderOuterIcon from "./border-outer.svg";
|
||||
import BorderRightIcon from "./border-right.svg";
|
||||
import BorderTopIcon from "./border-top.svg";
|
||||
import BorderNoneIcon from "./border-none.svg";
|
||||
import BorderStyleIcon from "./border-style.svg";
|
||||
|
||||
import DeleteColumnIcon from "./delete-column.svg";
|
||||
import DeleteRowIcon from "./delete-row.svg";
|
||||
import InsertColumnLeftIcon from "./insert-column-left.svg";
|
||||
import InsertColumnRightIcon from "./insert-column-right.svg";
|
||||
import InsertRowAboveIcon from "./insert-row-above.svg";
|
||||
import InsertRowBelow from "./insert-row-below.svg";
|
||||
import ArrowMiddleFromLine from "./arrow-middle-from-line.svg";
|
||||
|
||||
import Fx from "./fx.svg";
|
||||
|
||||
export {
|
||||
ArrowMiddleFromLine,
|
||||
DecimalPlacesDecreaseIcon,
|
||||
DecimalPlacesIncreaseIcon,
|
||||
BorderBottomIcon,
|
||||
BorderCenterHIcon,
|
||||
BorderCenterVIcon,
|
||||
BorderInnerIcon,
|
||||
BorderLeftIcon,
|
||||
BorderOuterIcon,
|
||||
BorderRightIcon,
|
||||
BorderTopIcon,
|
||||
BorderNoneIcon,
|
||||
BorderStyleIcon,
|
||||
DeleteColumnIcon,
|
||||
DeleteRowIcon,
|
||||
InsertColumnLeftIcon,
|
||||
InsertColumnRightIcon,
|
||||
InsertRowAboveIcon,
|
||||
InsertRowBelow,
|
||||
Fx,
|
||||
};
|
||||
|
Before Width: | Height: | Size: 726 B After Width: | Height: | Size: 726 B |
|
Before Width: | Height: | Size: 725 B After Width: | Height: | Size: 725 B |
|
Before Width: | Height: | Size: 706 B After Width: | Height: | Size: 706 B |
|
Before Width: | Height: | Size: 706 B After Width: | Height: | Size: 706 B |
68
solidjs_app/src/index.css
Normal file
68
solidjs_app/src/index.css
Normal file
@@ -0,0 +1,68 @@
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
12
solidjs_app/src/index.tsx
Normal file
12
solidjs_app/src/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
/* @refresh reload */
|
||||
import { render } from "solid-js/web";
|
||||
|
||||
import App from "./App";
|
||||
// import "./index.css";
|
||||
import "./theme.css";
|
||||
|
||||
const root = document.getElementById("root");
|
||||
|
||||
if (root) {
|
||||
render(() => <App />, root);
|
||||
}
|
||||
4
solidjs_app/src/theme.css
Normal file
4
solidjs_app/src/theme.css
Normal file
@@ -0,0 +1,4 @@
|
||||
:root {
|
||||
--main-bg-color: brown;
|
||||
--other: blue;
|
||||
}
|
||||
1
solidjs_app/src/typings.d.ts
vendored
Normal file
1
solidjs_app/src/typings.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
declare module "*.module.css";
|
||||
1
solidjs_app/src/vite-env.d.ts
vendored
Normal file
1
solidjs_app/src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -2,8 +2,8 @@
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
@@ -12,14 +12,18 @@
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"esModuleInterop": true
|
||||
"types": [
|
||||
"vite-plugin-solid-svg/types-component-solid",
|
||||
"vite/client"
|
||||
]
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
@@ -4,7 +4,8 @@
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
8
solidjs_app/vite.config.ts
Normal file
8
solidjs_app/vite.config.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { defineConfig } from "vite";
|
||||
import solid from "vite-plugin-solid";
|
||||
import solidPlugin from "vite-plugin-solid";
|
||||
import solidSvg from "vite-plugin-solid-svg";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [solid(), solidPlugin(), solidSvg()],
|
||||
});
|
||||
@@ -1,21 +0,0 @@
|
||||
import type { StorybookConfig } from '@storybook/react-vite';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-onboarding',
|
||||
'@storybook/addon-interactions',
|
||||
'@storybook/addon-mdx-gfm',
|
||||
'@chromatic-com/storybook'
|
||||
],
|
||||
framework: {
|
||||
name: '@storybook/react-vite',
|
||||
options: {},
|
||||
},
|
||||
docs: {
|
||||
autodocs: 'tag',
|
||||
},
|
||||
};
|
||||
export default config;
|
||||
@@ -1,29 +0,0 @@
|
||||
import type { Preview } from '@storybook/react';
|
||||
import i18n from '../src/i18n';
|
||||
import { I18nextProvider } from 'react-i18next';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
const withI18next = (Story: any) => {
|
||||
return (
|
||||
<I18nextProvider i18n={i18n}>
|
||||
<Story />
|
||||
</I18nextProvider>
|
||||
);
|
||||
};
|
||||
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
export const decorators = [withI18next];
|
||||
export default preview;
|
||||
@@ -1,21 +0,0 @@
|
||||
# IronCalc Web App
|
||||
|
||||
## Build
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
## Local development
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
# Deploy
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
Binary file not shown.
@@ -1,16 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<!-- <meta name="theme-color" content="#1bb566"> -->
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#F2994A" />
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
|
||||
<title>IronCalc Spreadsheet</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,15 +0,0 @@
|
||||
import type { Config } from "jest";
|
||||
// import {defaults} from 'jest-config';
|
||||
|
||||
const config: Config = {
|
||||
// testMatch:["**.jest.mjs"],
|
||||
moduleFileExtensions: ["js", "ts", "mts", "mjs"],
|
||||
transform: {
|
||||
"^.+\\.[jt]s?$": "ts-jest",
|
||||
},
|
||||
moduleNameMapper: {
|
||||
"^@ironcalc/wasm$": "<rootDir>/node_modules/@ironcalc/nodejs/"
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
16992
webapp/package-lock.json
generated
16992
webapp/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,57 +0,0 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.1.3",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"restore": "cp node_modules/@ironcalc/wasm/wasm_bg.wasm node_modules/.vite/deps/",
|
||||
"dev": "vite",
|
||||
"test": "jest",
|
||||
"build": "tsc && vite build",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.11.4",
|
||||
"@emotion/styled": "^11.11.5",
|
||||
"@ironcalc/wasm": "file:../bindings/wasm/pkg",
|
||||
"@mui/material": "^5.15.15",
|
||||
"@storybook/test": "^8.0.8",
|
||||
"i18next": "^23.11.1",
|
||||
"lucide-react": "^0.375.0",
|
||||
"react": "^18.2.0",
|
||||
"react-colorful": "^5.6.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-i18next": "^13.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@chromatic-com/storybook": "^1.3.2",
|
||||
"@storybook/addon-essentials": "^8.0.8",
|
||||
"@storybook/addon-interactions": "^8.0.8",
|
||||
"@storybook/addon-links": "^8.0.8",
|
||||
"@storybook/addon-mdx-gfm": "^8.0.8",
|
||||
"@storybook/addon-onboarding": "^8.0.8",
|
||||
"@storybook/blocks": "^8.0.8",
|
||||
"@storybook/react": "^8.0.8",
|
||||
"@storybook/react-vite": "^8.0.8",
|
||||
"@types/jest": "^29.5.12",
|
||||
"@types/react": "^18.2.75",
|
||||
"@types/react-dom": "^18.2.24",
|
||||
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
||||
"@typescript-eslint/parser": "^6.21.0",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.6",
|
||||
"eslint-plugin-storybook": "^0.6.15",
|
||||
"jest": "^29.7.0",
|
||||
"storybook": "^8.0.8",
|
||||
"ts-jest": "^29.1.2",
|
||||
"ts-node": "^10.9.2",
|
||||
"typescript": "^5.4.5",
|
||||
"vite": "^5.2.8",
|
||||
"vite-plugin-svgr": "^4.2.0"
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
#root {
|
||||
position: absolute;
|
||||
inset: 10px;
|
||||
border: 1px solid #AAA;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
import "./App.css";
|
||||
import Workbook from "./components/workbook";
|
||||
import "./i18n";
|
||||
import { useEffect, useState } from "react";
|
||||
import init, { Model } from "@ironcalc/wasm";
|
||||
import { WorkbookState } from "./components/workbookState";
|
||||
|
||||
function App() {
|
||||
const [model, setModel] = useState<Model | null>(null);
|
||||
const [workbookState, setWorkbookState] = useState<WorkbookState | null>(
|
||||
null
|
||||
);
|
||||
useEffect(() => {
|
||||
async function start() {
|
||||
await init();
|
||||
const model_bytes = new Uint8Array(await (await fetch("./example.ic")).arrayBuffer());
|
||||
const _model = Model.from_bytes(model_bytes);
|
||||
// const _model = new Model("en", "UTC");
|
||||
if (!model) setModel(_model);
|
||||
if (!workbookState) setWorkbookState(new WorkbookState());
|
||||
}
|
||||
start();
|
||||
}, []);
|
||||
|
||||
if (!model || !workbookState) {
|
||||
return <div>Loading</div>;
|
||||
}
|
||||
|
||||
// We could use context for model, but the problem is that it should initialized to null.
|
||||
// Passing the property down makes sure it is always defined.
|
||||
return (
|
||||
<Workbook model={model} workbookState={workbookState} />
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
# Keyboard and mouse events architecture
|
||||
|
||||
This document describes the architecture of the keyboard navigation and mouse events in IronCalc Web
|
||||
|
||||
There are two modes for mouse events:
|
||||
|
||||
* Normal mode: clicking a cell selects it, clicking on a sheet opens it
|
||||
* Browse mode: clicking on a cell updates the formula, etc
|
||||
|
||||
While in browse mode some mouse events might end the browse mode
|
||||
|
||||
We follow Excel's way of navigating a spreadsheet
|
||||
@@ -1,18 +0,0 @@
|
||||
export const headerCornerBackground = '#FFF';
|
||||
export const headerTextColor = '#333';
|
||||
export const headerBackground = '#FFF';
|
||||
export const headerGlobalSelectorColor = '#EAECF4';
|
||||
export const headerSelectedBackground = '#EEEEEE';
|
||||
export const headerFullSelectedBackground = '#D3D6E9';
|
||||
export const headerSelectedColor = '#333';
|
||||
export const headerBorderColor = '#DEE0EF';
|
||||
|
||||
export const gridColor = '#D3D6E9';
|
||||
export const gridSeparatorColor = '#D3D6E9';
|
||||
export const defaultTextColor = '#2E414D';
|
||||
|
||||
export const outlineColor = '#F2994A';
|
||||
export const outlineBackgroundColor = '#F2994A1A';
|
||||
|
||||
export const LAST_COLUMN = 16_384;
|
||||
export const LAST_ROW = 1_048_576;
|
||||
@@ -1,23 +0,0 @@
|
||||
export interface Cell {
|
||||
row: number;
|
||||
column: number;
|
||||
}
|
||||
|
||||
export interface Area {
|
||||
rowStart: number;
|
||||
rowEnd: number;
|
||||
columnStart: number;
|
||||
columnEnd: number;
|
||||
}
|
||||
|
||||
export interface SheetArea extends Area {
|
||||
sheet: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface AreaWithBorderInterface extends Area {
|
||||
border: "left" | "top" | "right" | "bottom";
|
||||
}
|
||||
|
||||
export type AreaWithBorder = AreaWithBorderInterface | null;
|
||||
|
||||
@@ -1,396 +0,0 @@
|
||||
const letters = [
|
||||
'A',
|
||||
'B',
|
||||
'C',
|
||||
'D',
|
||||
'E',
|
||||
'F',
|
||||
'G',
|
||||
'H',
|
||||
'I',
|
||||
'J',
|
||||
'K',
|
||||
'L',
|
||||
'M',
|
||||
'N',
|
||||
'O',
|
||||
'P',
|
||||
'Q',
|
||||
'R',
|
||||
'S',
|
||||
'T',
|
||||
'U',
|
||||
'V',
|
||||
'W',
|
||||
'X',
|
||||
'Y',
|
||||
'Z',
|
||||
];
|
||||
interface Reference {
|
||||
row: number;
|
||||
column: number;
|
||||
absoluteRow: boolean;
|
||||
absoluteColumn: boolean;
|
||||
}
|
||||
|
||||
export function referenceToString(rf: Reference): string {
|
||||
const absC = rf.absoluteColumn ? '$' : '';
|
||||
const absR = rf.absoluteRow ? '$' : '';
|
||||
return absC + columnNameFromNumber(rf.column) + absR + rf.row;
|
||||
}
|
||||
|
||||
export function columnNameFromNumber(column: number): string {
|
||||
let columnName = '';
|
||||
let index = column;
|
||||
while (index > 0) {
|
||||
columnName = `${letters[(index - 1) % 26]}${columnName}`;
|
||||
index = Math.floor((index - 1) / 26);
|
||||
}
|
||||
return columnName;
|
||||
}
|
||||
|
||||
export function columnNumberFromName(columnName: string): number {
|
||||
let column = 0;
|
||||
for (const character of columnName) {
|
||||
const index = (character.codePointAt(0) ?? 0) - 64;
|
||||
column = column * 26 + index;
|
||||
}
|
||||
return column;
|
||||
}
|
||||
|
||||
// EqualTo Color Palette
|
||||
export function getColor(index: number, alpha = 1): string {
|
||||
const colors = [
|
||||
{
|
||||
name: 'Cyan',
|
||||
rgba: [89, 185, 188, 1],
|
||||
hex: '#59B9BC',
|
||||
},
|
||||
{
|
||||
name: 'Flamingo',
|
||||
rgba: [236, 87, 83, 1],
|
||||
hex: '#EC5753',
|
||||
},
|
||||
{
|
||||
hex: '#3358B7',
|
||||
rgba: [51, 88, 183, 1],
|
||||
name: 'Blue',
|
||||
},
|
||||
{
|
||||
hex: '#F8CD3C',
|
||||
rgba: [248, 205, 60, 1],
|
||||
name: 'Yellow',
|
||||
},
|
||||
{
|
||||
hex: '#3BB68A',
|
||||
rgba: [59, 182, 138, 1],
|
||||
name: 'Emerald',
|
||||
},
|
||||
{
|
||||
hex: '#523E93',
|
||||
rgba: [82, 62, 147, 1],
|
||||
name: 'Violet',
|
||||
},
|
||||
{
|
||||
hex: '#A23C52',
|
||||
rgba: [162, 60, 82, 1],
|
||||
name: 'Burgundy',
|
||||
},
|
||||
{
|
||||
hex: '#8CB354',
|
||||
rgba: [162, 60, 82, 1],
|
||||
name: 'Wasabi',
|
||||
},
|
||||
{
|
||||
hex: '#D03627',
|
||||
rgba: [208, 54, 39, 1],
|
||||
name: 'Red',
|
||||
},
|
||||
{
|
||||
hex: '#1B717E',
|
||||
rgba: [27, 113, 126, 1],
|
||||
name: 'Teal',
|
||||
},
|
||||
];
|
||||
if (alpha === 1) {
|
||||
return colors[index % 10].hex;
|
||||
}
|
||||
const { rgba } = colors[index % 10];
|
||||
return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${alpha})`;
|
||||
}
|
||||
|
||||
export function mergedAreas(area1: Area, area2: Area): Area {
|
||||
return {
|
||||
rowStart: Math.min(area1.rowStart, area2.rowStart, area1.rowEnd, area2.rowEnd),
|
||||
rowEnd: Math.max(area1.rowStart, area2.rowStart, area1.rowEnd, area2.rowEnd),
|
||||
columnStart: Math.min(area1.columnStart, area2.columnStart, area1.columnEnd, area2.columnEnd),
|
||||
columnEnd: Math.max(area1.columnStart, area2.columnStart, area1.columnEnd, area2.columnEnd),
|
||||
};
|
||||
}
|
||||
|
||||
export function getExpandToArea(area: Area, cell: Cell): AreaWithBorder {
|
||||
let { rowStart, rowEnd, columnStart, columnEnd } = area;
|
||||
if (rowStart > rowEnd) {
|
||||
[rowStart, rowEnd] = [rowEnd, rowStart];
|
||||
}
|
||||
if (columnStart > columnEnd) {
|
||||
[columnStart, columnEnd] = [columnEnd, columnStart];
|
||||
}
|
||||
const { row, column } = cell;
|
||||
if (row <= rowEnd && row >= rowStart && column >= columnStart && column <= columnEnd) {
|
||||
return null;
|
||||
}
|
||||
// Two rules:
|
||||
// * The extendTo area must be larger than the selected area
|
||||
// * The extendTo area must be of the same width or the same height as the selected area
|
||||
if (row >= rowEnd && column >= columnStart) {
|
||||
// Normal case: we are expanding down and right
|
||||
if (row - rowEnd > column - columnEnd) {
|
||||
// Expanding by rows (down)
|
||||
return {
|
||||
rowStart: rowEnd + 1,
|
||||
rowEnd: row,
|
||||
columnStart,
|
||||
columnEnd,
|
||||
border: 'top',
|
||||
};
|
||||
}
|
||||
// expanding by columns (right)
|
||||
return {
|
||||
rowStart,
|
||||
rowEnd,
|
||||
columnStart: columnEnd + 1,
|
||||
columnEnd: column,
|
||||
border: 'left',
|
||||
};
|
||||
}
|
||||
if (row >= rowEnd && column <= columnStart) {
|
||||
// We are expanding down and left
|
||||
if (row - rowEnd > columnStart - column) {
|
||||
// Expanding by rows (down)
|
||||
return {
|
||||
rowStart: rowEnd + 1,
|
||||
rowEnd: row,
|
||||
columnStart,
|
||||
columnEnd,
|
||||
border: 'top',
|
||||
};
|
||||
}
|
||||
// Expanding by columns (left)
|
||||
return {
|
||||
rowStart,
|
||||
rowEnd,
|
||||
columnStart: column,
|
||||
columnEnd: columnStart - 1,
|
||||
border: 'right',
|
||||
};
|
||||
}
|
||||
if (row <= rowEnd && column >= columnEnd) {
|
||||
// We are expanding up and right
|
||||
if (rowStart - row > column - columnEnd) {
|
||||
// Expanding by rows (up)
|
||||
return {
|
||||
rowStart: row,
|
||||
rowEnd: rowStart - 1,
|
||||
columnStart,
|
||||
columnEnd,
|
||||
border: 'bottom',
|
||||
};
|
||||
}
|
||||
// Expanding by columns (right)
|
||||
return {
|
||||
rowStart,
|
||||
rowEnd,
|
||||
columnStart: columnEnd + 1,
|
||||
columnEnd: column,
|
||||
border: 'left',
|
||||
};
|
||||
}
|
||||
if (row <= rowEnd && column <= columnStart) {
|
||||
// We are expanding up and left
|
||||
if (rowStart - row > columnStart - column) {
|
||||
// Expanding by rows (up)
|
||||
return {
|
||||
rowStart: row,
|
||||
rowEnd: rowStart - 1,
|
||||
columnStart,
|
||||
columnEnd,
|
||||
border: 'bottom',
|
||||
};
|
||||
}
|
||||
// Expanding by columns (left)
|
||||
return {
|
||||
rowStart,
|
||||
rowEnd,
|
||||
columnStart: column,
|
||||
columnEnd: columnStart - 1,
|
||||
border: 'right',
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the keypress should start editing
|
||||
*/
|
||||
export function isEditingKey(key: string): boolean {
|
||||
if (key.length !== 1) {
|
||||
return false;
|
||||
}
|
||||
const code = key.codePointAt(0) ?? 0;
|
||||
if (code > 0 && code < 255) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// / Common types
|
||||
|
||||
export interface Area {
|
||||
rowStart: number;
|
||||
rowEnd: number;
|
||||
columnStart: number;
|
||||
columnEnd: number;
|
||||
}
|
||||
|
||||
interface AreaWithBorderInterface extends Area {
|
||||
border: 'left' | 'top' | 'right' | 'bottom';
|
||||
}
|
||||
|
||||
export type AreaWithBorder = AreaWithBorderInterface | null;
|
||||
|
||||
export interface Cell {
|
||||
row: number;
|
||||
column: number;
|
||||
}
|
||||
|
||||
export interface ScrollPosition {
|
||||
left: number;
|
||||
top: number;
|
||||
}
|
||||
|
||||
export interface StateSettings {
|
||||
selectedCell: Cell;
|
||||
selectedArea: Area;
|
||||
scrollPosition: ScrollPosition;
|
||||
extendToArea: AreaWithBorder;
|
||||
}
|
||||
|
||||
export type Dispatch<A> = (value: A) => void;
|
||||
export type SetStateAction<S> = S | ((prevState: S) => S);
|
||||
|
||||
export enum FocusType {
|
||||
Cell = 'cell',
|
||||
FormulaBar = 'formula-bar',
|
||||
}
|
||||
|
||||
/**
|
||||
* In Excel there are two "modes" of editing
|
||||
* * `init`: When you start typing in a cell. In this mode arrow keys will move away from the cell
|
||||
* * `edit`: If you double click on a cell or click in the cell while editing.
|
||||
* In this mode arrow keys will move within the cell.
|
||||
*
|
||||
* In a formula bar mode is always `edit`.
|
||||
*/
|
||||
export type CellEditMode = 'init' | 'edit';
|
||||
export interface CellEditingType {
|
||||
/**
|
||||
* ID of cell editing. Useful when one edit transforms into another and some code needs to run
|
||||
* when target changes.
|
||||
*
|
||||
* Due to problems with focus management (see #339) it's possible to start a new cell editing
|
||||
* without properly cleaning up previous one (lose focus in workbook, regain focus NOT in
|
||||
* the input and then use the keyboard.
|
||||
*/
|
||||
id: number;
|
||||
sheet: number;
|
||||
row: number;
|
||||
column: number;
|
||||
text: string;
|
||||
base: string;
|
||||
mode: CellEditMode;
|
||||
focus: FocusType;
|
||||
}
|
||||
|
||||
export type NavigationKey = 'ArrowRight' | 'ArrowLeft' | 'ArrowDown' | 'ArrowUp' | 'Home' | 'End';
|
||||
|
||||
export const isNavigationKey = (key: string): key is NavigationKey =>
|
||||
['ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp', 'Home', 'End'].includes(key);
|
||||
|
||||
function nameNeedsQuoting(name: string): boolean {
|
||||
const chars = [' ', '(', ')', "'", '$', ',', ';', '-', '+', '{', '}'];
|
||||
const l = chars.length;
|
||||
for (let index = 0; index < l; index += 1) {
|
||||
if (name.includes(chars[index])) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// FIXME: We should use the function of a similar name in the rust code.
|
||||
export const quoteSheetName = (name: string): string => {
|
||||
if (nameNeedsQuoting(name)) {
|
||||
return `'${name.replace("'", "''")}'`;
|
||||
}
|
||||
return name;
|
||||
};
|
||||
|
||||
export function cellReprToRowColumn(cellRepr: string): { row: number; column: number } {
|
||||
let row = 0;
|
||||
let column = 0;
|
||||
for (const character of cellRepr) {
|
||||
if (Number.isNaN(Number.parseInt(character, 10))) {
|
||||
column *= 26;
|
||||
const characterCode = character.codePointAt(0);
|
||||
const ACharacterCode = 'A'.codePointAt(0);
|
||||
if (typeof characterCode === 'undefined' || typeof ACharacterCode === 'undefined') {
|
||||
throw new TypeError('Failed to find character code');
|
||||
}
|
||||
const deltaCodes = characterCode - ACharacterCode;
|
||||
if (deltaCodes < 0) {
|
||||
throw new Error('Incorrect character');
|
||||
}
|
||||
column += deltaCodes + 1;
|
||||
} else {
|
||||
row *= 10;
|
||||
row += Number.parseInt(character, 10);
|
||||
}
|
||||
}
|
||||
return { row, column };
|
||||
}
|
||||
|
||||
export const getMessageCellText = (
|
||||
cell: string,
|
||||
getMessageSheetNumber: (sheet: string) => number | undefined,
|
||||
getCellText?: (sheet: number, row: number, column: number) => string | undefined,
|
||||
) => {
|
||||
const messageMatch = /^=?(?<sheet>\w+)!(?<cell>\w+)/.exec(cell);
|
||||
if (messageMatch && messageMatch.groups) {
|
||||
const messageSheet = getMessageSheetNumber(messageMatch.groups.sheet);
|
||||
const dynamicIconCell = cellReprToRowColumn(messageMatch.groups.cell);
|
||||
if (messageSheet !== undefined && getCellText) {
|
||||
return getCellText(messageSheet, dynamicIconCell.row, dynamicIconCell.column) || '';
|
||||
}
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
export const getCellAddress = (selectedArea: Area, selectedCell?: Cell) => {
|
||||
const isSingleCell =
|
||||
selectedArea.rowStart === selectedArea.rowEnd &&
|
||||
selectedArea.columnEnd === selectedArea.columnStart;
|
||||
|
||||
return isSingleCell && selectedCell
|
||||
? `${columnNameFromNumber(selectedCell.column)}${selectedCell.row}`
|
||||
: `${columnNameFromNumber(selectedArea.columnStart)}${
|
||||
selectedArea.rowStart
|
||||
}:${columnNameFromNumber(selectedArea.columnEnd)}${selectedArea.rowEnd}`;
|
||||
};
|
||||
|
||||
export enum Border {
|
||||
Top = 'top',
|
||||
Bottom = 'bottom',
|
||||
Right = 'right',
|
||||
Left = 'left',
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,566 +0,0 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
BorderBottomIcon,
|
||||
BorderCenterHIcon,
|
||||
BorderCenterVIcon,
|
||||
BorderInnerIcon,
|
||||
BorderLeftIcon,
|
||||
BorderOuterIcon,
|
||||
BorderRightIcon,
|
||||
BorderTopIcon,
|
||||
BorderNoneIcon,
|
||||
BorderStyleIcon,
|
||||
} from "../icons";
|
||||
import ColorPicker from "./colorPicker";
|
||||
import Popover, { PopoverOrigin } from "@mui/material/Popover";
|
||||
import {
|
||||
Check,
|
||||
ChevronDown,
|
||||
Grid2X2 as BorderAllIcon,
|
||||
PencilLine,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import { theme } from "../theme";
|
||||
import { BorderOptions, BorderStyle, BorderType } from "@ironcalc/wasm";
|
||||
|
||||
type BorderPickerProps = {
|
||||
className?: string;
|
||||
onChange: (border: BorderOptions) => void;
|
||||
anchorEl: React.RefObject<HTMLElement>;
|
||||
anchorOrigin?: PopoverOrigin;
|
||||
transformOrigin?: PopoverOrigin;
|
||||
open: boolean;
|
||||
};
|
||||
|
||||
const BorderPicker = (properties: BorderPickerProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [borderSelected, setBorderSelected] = useState(BorderType.None);
|
||||
const [borderColor, setBorderColor] = useState("#000000");
|
||||
const [borderStyle, setBorderStyle] = useState(BorderStyle.Thin);
|
||||
const [colorPickerOpen, setColorPickerOpen] = useState(false);
|
||||
const [stylePickerOpen, setStylePickerOpen] = useState(false);
|
||||
const closePicker = (): void => {
|
||||
properties.onChange({
|
||||
color: borderColor,
|
||||
style: borderStyle,
|
||||
border: borderSelected,
|
||||
});
|
||||
};
|
||||
const borderColorButton = useRef(null);
|
||||
const borderStyleButton = useRef(null);
|
||||
return (
|
||||
<>
|
||||
<StyledPopover
|
||||
open={properties.open}
|
||||
onClose={(): void => closePicker()}
|
||||
anchorEl={properties.anchorEl.current}
|
||||
anchorOrigin={
|
||||
properties.anchorOrigin || { vertical: "bottom", horizontal: "left" }
|
||||
}
|
||||
transformOrigin={
|
||||
properties.transformOrigin || { vertical: "top", horizontal: "left" }
|
||||
}
|
||||
>
|
||||
<BorderPickerDialog>
|
||||
<Borders>
|
||||
<Line>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.All}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.All) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.All);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderAllIcon />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.Inner}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.Inner) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.Inner);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderInnerIcon />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.CenterH}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.CenterH) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.CenterH);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderCenterHIcon />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.CenterV}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.CenterV) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.CenterV);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderCenterVIcon />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.Outer}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.Outer) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.Outer);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderOuterIcon />
|
||||
</Button>
|
||||
</Line>
|
||||
<Line>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.None}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.None) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.None);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderNoneIcon />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.Top}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.Top) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.Top);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderTopIcon />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.Right}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.Right) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.Right);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderRightIcon />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.Bottom}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.Bottom) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.Bottom);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderBottomIcon />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.Left}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.Left) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.Left);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderLeftIcon />
|
||||
</Button>
|
||||
</Line>
|
||||
</Borders>
|
||||
<Divider />
|
||||
<Styles>
|
||||
<ButtonWrapper onClick={() => setColorPickerOpen(true)}>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={false}
|
||||
disabled={false}
|
||||
ref={borderColorButton}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<PencilLine />
|
||||
</Button>
|
||||
<div style={{flexGrow:2}}>Border color</div>
|
||||
<ChevronRightStyled />
|
||||
</ButtonWrapper>
|
||||
<ButtonWrapper onClick={() => setStylePickerOpen(true)} ref={borderStyleButton}>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={false}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderStyleIcon />
|
||||
</Button>
|
||||
<div style={{flexGrow:2}}>Border style</div>
|
||||
<ChevronRightStyled />
|
||||
</ButtonWrapper>
|
||||
</Styles>
|
||||
</BorderPickerDialog>
|
||||
<ColorPicker
|
||||
color={borderColor}
|
||||
onChange={(color): void => {
|
||||
setBorderColor(color);
|
||||
setColorPickerOpen(false);
|
||||
}}
|
||||
anchorEl={borderColorButton}
|
||||
open={colorPickerOpen}
|
||||
/>
|
||||
<StyledPopover
|
||||
open={stylePickerOpen}
|
||||
onClose={(): void => {
|
||||
setStylePickerOpen(false);
|
||||
}}
|
||||
anchorEl={borderStyleButton.current}
|
||||
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
|
||||
transformOrigin={{ vertical: 38, horizontal: -6 }}
|
||||
>
|
||||
<BorderStyleDialog>
|
||||
<LineWrapper
|
||||
onClick={() => {
|
||||
setBorderStyle(BorderStyle.Dashed);
|
||||
setStylePickerOpen(false);
|
||||
}}
|
||||
$checked={borderStyle === BorderStyle.None}
|
||||
>
|
||||
<BorderDescription>None</BorderDescription>
|
||||
<NoneLine />
|
||||
</LineWrapper>
|
||||
<LineWrapper
|
||||
onClick={() => {
|
||||
setBorderStyle(BorderStyle.Thin);
|
||||
setStylePickerOpen(false);
|
||||
}}
|
||||
$checked={borderStyle === BorderStyle.Thin}
|
||||
>
|
||||
<BorderDescription>Thin</BorderDescription>
|
||||
<SolidLine />
|
||||
</LineWrapper>
|
||||
<LineWrapper
|
||||
onClick={() => {
|
||||
setBorderStyle(BorderStyle.Medium);
|
||||
setStylePickerOpen(false);
|
||||
}}
|
||||
$checked={borderStyle === BorderStyle.Medium}
|
||||
>
|
||||
<BorderDescription>Medium</BorderDescription>
|
||||
<MediumLine />
|
||||
</LineWrapper>
|
||||
<LineWrapper
|
||||
onClick={() => {
|
||||
setBorderStyle(BorderStyle.Thick);
|
||||
setStylePickerOpen(false);
|
||||
}}
|
||||
$checked={borderStyle === BorderStyle.Thick}
|
||||
>
|
||||
<BorderDescription>Thick</BorderDescription>
|
||||
<ThickLine />
|
||||
</LineWrapper>
|
||||
<LineWrapper
|
||||
onClick={() => {
|
||||
setBorderStyle(BorderStyle.Dotted);
|
||||
setStylePickerOpen(false);
|
||||
}}
|
||||
$checked={borderStyle === BorderStyle.Dotted}
|
||||
>
|
||||
<BorderDescription>Dotted</BorderDescription>
|
||||
<DottedLine />
|
||||
</LineWrapper>
|
||||
<LineWrapper
|
||||
onClick={() => {
|
||||
setBorderStyle(BorderStyle.Dashed);
|
||||
setStylePickerOpen(false);
|
||||
}}
|
||||
$checked={borderStyle === BorderStyle.Dashed}
|
||||
>
|
||||
<BorderDescription>Dashed</BorderDescription>
|
||||
<DashedLine />
|
||||
</LineWrapper>
|
||||
<LineWrapper
|
||||
onClick={() => {
|
||||
setBorderStyle(BorderStyle.Dashed);
|
||||
setStylePickerOpen(false);
|
||||
}}
|
||||
$checked={borderStyle === BorderStyle.Double}
|
||||
>
|
||||
<BorderDescription>Double</BorderDescription>
|
||||
<DoubleLine />
|
||||
</LineWrapper>
|
||||
</BorderStyleDialog>
|
||||
</StyledPopover>
|
||||
</StyledPopover>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
type LineWrapperProperties = { $checked: boolean };
|
||||
const LineWrapper = styled("div")<LineWrapperProperties>`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: ${({ $checked }): string => {
|
||||
if ($checked) {
|
||||
return '#EEEEEE;';
|
||||
} else {
|
||||
return 'inherit;';
|
||||
}
|
||||
}};
|
||||
&:hover {
|
||||
border: 1px solid #EEEEEE;
|
||||
}
|
||||
padding:8px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
border: 1px solid white;
|
||||
`;
|
||||
|
||||
const CheckIconWrapper = styled("div")`
|
||||
width: 12px;
|
||||
`;
|
||||
|
||||
type CheckIconProperties = { $checked: boolean };
|
||||
const CheckIcon = styled("div")<CheckIconProperties>`
|
||||
width: 2px;
|
||||
background-color: #EEE;
|
||||
height: 28px;
|
||||
visibility: ${({ $checked }): string => {
|
||||
if ($checked) {
|
||||
return "visible";
|
||||
}
|
||||
return "hidden";
|
||||
}};
|
||||
`;
|
||||
const NoneLine = styled("div")`
|
||||
width: 68px;
|
||||
border-top: 1px solid #E0E0E0;
|
||||
`;
|
||||
const SolidLine = styled("div")`
|
||||
width: 68px;
|
||||
border-top: 1px solid #333333;
|
||||
`;
|
||||
const MediumLine = styled("div")`
|
||||
width: 68px;
|
||||
border-top: 2px solid #333333;
|
||||
`;
|
||||
const ThickLine = styled("div")`
|
||||
width: 68px;
|
||||
border-top: 3px solid #333333;
|
||||
`;
|
||||
const DashedLine = styled("div")`
|
||||
width: 68px;
|
||||
border-top: 1px dashed #333333;
|
||||
`;
|
||||
const DottedLine = styled("div")`
|
||||
width: 68px;
|
||||
border-top: 1px dotted #333333;
|
||||
`;
|
||||
const DoubleLine = styled('div')`
|
||||
width: 68px;
|
||||
border-top: 3px double #333333;
|
||||
`;
|
||||
|
||||
const Divider = styled("div")`
|
||||
display: inline-flex;
|
||||
heigh: 1px;
|
||||
border-bottom: 1px solid #EEE;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
`;
|
||||
|
||||
const Borders = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 4px;
|
||||
`;
|
||||
|
||||
const Styles = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const Line = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const ButtonWrapper = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
background-color: #EEE;
|
||||
border-top-color: ${(): string => theme.palette.grey["400"]};
|
||||
}
|
||||
cursor: pointer;
|
||||
padding: 8px
|
||||
`;
|
||||
|
||||
const BorderStyleDialog = styled("div")`
|
||||
background: ${({ theme }): string => theme.palette.background.default};
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const StyledPopover = styled(Popover)`
|
||||
.MuiPopover-paper {
|
||||
border-radius: 10px;
|
||||
border: 0px solid ${({ theme }): string => theme.palette.background.default};
|
||||
box-shadow: 1px 2px 8px rgba(139, 143, 173, 0.5);
|
||||
}
|
||||
.MuiPopover-padding {
|
||||
padding: 0px;
|
||||
}
|
||||
.MuiList-padding {
|
||||
padding: 0px;
|
||||
}
|
||||
font-family: ${({ theme }) => theme.typography.fontFamily};
|
||||
font-size: 13px;
|
||||
`;
|
||||
|
||||
const BorderPickerDialog = styled("div")`
|
||||
background: ${({ theme }): string => theme.palette.background.default};
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const BorderDescription = styled("div")`
|
||||
width: 70px;
|
||||
`;
|
||||
|
||||
// type TypeButtonProperties = { $pressed: boolean; $underlinedColor?: string };
|
||||
// const Button = styled.button<TypeButtonProperties>`
|
||||
// width: 23px;
|
||||
// height: 23px;
|
||||
// display: inline-flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// font-size: 14px;
|
||||
// border-radius: 2px;
|
||||
// margin-right: 5px;
|
||||
// transition: all 0.2s;
|
||||
|
||||
// ${({ theme, disabled, $pressed, $underlinedColor }): string => {
|
||||
// if (disabled) {
|
||||
// return `
|
||||
// color: ${theme.palette.grey['600']};
|
||||
// cursor: default;
|
||||
// `;
|
||||
// }
|
||||
// return `
|
||||
// border-top: ${$underlinedColor ? '3px solid #FFF' : 'none'};
|
||||
// border-bottom: ${$underlinedColor ? `3px solid ${$underlinedColor}` : 'none'};
|
||||
// color: ${theme.palette.text.primary};
|
||||
// background-color: ${$pressed ? theme.palette.grey['600'] : '#FFF'};
|
||||
// &:hover {
|
||||
// background-color: ${theme.palette.grey['400']};
|
||||
// border-top-color: ${theme.palette.grey['400']};
|
||||
// }
|
||||
// `;
|
||||
// }}
|
||||
// `;
|
||||
|
||||
type TypeButtonProperties = { $pressed: boolean; $underlinedColor?: string };
|
||||
const Button = styled("button")<TypeButtonProperties>(
|
||||
({ disabled, $pressed, $underlinedColor }) => {
|
||||
let result: Record<string, any> = {
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
// fontSize: "26px",
|
||||
border: "0px solid #fff",
|
||||
borderRadius: "2px",
|
||||
marginRight: "5px",
|
||||
transition: "all 0.2s",
|
||||
cursor: "pointer",
|
||||
padding: "0px",
|
||||
};
|
||||
if (disabled) {
|
||||
result.color = theme.palette.grey["600"];
|
||||
result.cursor = "default";
|
||||
} else {
|
||||
result.borderTop = $underlinedColor ? "3px solid #FFF" : "none";
|
||||
result.borderBottom = $underlinedColor
|
||||
? `3px solid ${$underlinedColor}`
|
||||
: "none";
|
||||
(result.color = "#21243A"),
|
||||
(result.backgroundColor = $pressed
|
||||
? theme.palette.grey["600"]
|
||||
: "inherit");
|
||||
result["&:hover"] = {
|
||||
backgroundColor: "#F1F2F8",
|
||||
borderTopColor: "#F1F2F8",
|
||||
};
|
||||
result["svg"] = {
|
||||
width: "16px",
|
||||
height: "16px",
|
||||
};
|
||||
}
|
||||
return result;
|
||||
}
|
||||
);
|
||||
|
||||
const ChevronRightStyled = styled(ChevronRight)`
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
`;
|
||||
|
||||
export default BorderPicker;
|
||||
@@ -1,262 +0,0 @@
|
||||
import styled from "@emotion/styled";
|
||||
import Popover, { PopoverOrigin } from "@mui/material/Popover";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { HexColorInput, HexColorPicker } from "react-colorful";
|
||||
import { theme } from "../theme";
|
||||
|
||||
type ColorPickerProps = {
|
||||
className?: string;
|
||||
color: string;
|
||||
onChange: (color: string) => void;
|
||||
anchorEl: React.RefObject<HTMLElement>;
|
||||
anchorOrigin?: PopoverOrigin;
|
||||
transformOrigin?: PopoverOrigin;
|
||||
open: boolean;
|
||||
};
|
||||
|
||||
const colorPickerWidth = 240;
|
||||
const colorfulHeight = 185; // 150 + 15 + 20
|
||||
|
||||
const ColorPicker = (properties: ColorPickerProps) => {
|
||||
const [color, setColor] = useState<string>(properties.color);
|
||||
const recentColors = useRef<string[]>([]);
|
||||
|
||||
const closePicker = (newColor: string): void => {
|
||||
const maxRecentColors = 14;
|
||||
properties.onChange(newColor);
|
||||
const colors = recentColors.current.filter((c) => c !== newColor);
|
||||
recentColors.current = [newColor, ...colors].slice(0, maxRecentColors);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setColor(properties.color);
|
||||
}, [properties.color]);
|
||||
|
||||
const presetColors = [
|
||||
"#FFFFFF",
|
||||
"#1B717E",
|
||||
"#59B9BC",
|
||||
"#3BB68A",
|
||||
"#8CB354",
|
||||
"#F8CD3C",
|
||||
"#EC5753",
|
||||
"#A23C52",
|
||||
"#D03627",
|
||||
"#523E93",
|
||||
"#3358B7",
|
||||
];
|
||||
|
||||
return (
|
||||
<Popover
|
||||
open={properties.open}
|
||||
onClose={(): void => closePicker(color)}
|
||||
anchorEl={properties.anchorEl.current}
|
||||
anchorOrigin={
|
||||
properties.anchorOrigin || { vertical: "bottom", horizontal: "left" }
|
||||
}
|
||||
transformOrigin={
|
||||
properties.transformOrigin || { vertical: "top", horizontal: "left" }
|
||||
}
|
||||
>
|
||||
<ColorPickerDialog>
|
||||
<HexColorPicker
|
||||
color={color}
|
||||
onChange={(newColor): void => {
|
||||
setColor(newColor);
|
||||
}}
|
||||
/>
|
||||
<ColorPickerInput>
|
||||
<HexWrapper>
|
||||
<HexLabel>{"Hex"}</HexLabel>
|
||||
<HexColorInputBox>
|
||||
<HashLabel>{"#"}</HashLabel>
|
||||
<HexColorInput
|
||||
color={color}
|
||||
onChange={(newColor): void => {
|
||||
setColor(newColor);
|
||||
}}
|
||||
/>
|
||||
</HexColorInputBox>
|
||||
</HexWrapper>
|
||||
<Swatch $color={color} onClick={(): void => {
|
||||
closePicker(color);
|
||||
}} />
|
||||
</ColorPickerInput>
|
||||
<HorizontalDivider />
|
||||
<ColorList>
|
||||
{presetColors.map((presetColor) => (
|
||||
<Button
|
||||
key={presetColor}
|
||||
$color={presetColor}
|
||||
onClick={(): void => {
|
||||
closePicker(presetColor);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</ColorList>
|
||||
<HorizontalDivider />
|
||||
<RecentLabel>{"Recent"}</RecentLabel>
|
||||
<ColorList>
|
||||
{recentColors.current.map((recentColor) => (
|
||||
<Button
|
||||
key={recentColor}
|
||||
$color={recentColor}
|
||||
onClick={(): void => {
|
||||
closePicker(recentColor);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</ColorList>
|
||||
</ColorPickerDialog>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
const RecentLabel = styled.div`
|
||||
font-size: 12px;
|
||||
color: ${theme.palette.text.secondary};
|
||||
`;
|
||||
|
||||
const ColorList = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
`;
|
||||
|
||||
const Button = styled.button<{ $color: string }>`
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
${({ $color }): string => {
|
||||
if ($color.toUpperCase() === "#FFFFFF") {
|
||||
return `border: 1px solid ${theme.palette.grey["600"]};`;
|
||||
}
|
||||
return `border: 1px solid ${$color};`;
|
||||
}}
|
||||
background-color: ${({ $color }): string => {
|
||||
return $color;
|
||||
}};
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
border-radius: 2px;
|
||||
`;
|
||||
|
||||
const HorizontalDivider = styled.div`
|
||||
height: 0px;
|
||||
width: 100%;
|
||||
border-top: 1px solid ${theme.palette.grey["400"]};
|
||||
margin-top: 15px;
|
||||
margin-bottom: 5px;
|
||||
`;
|
||||
|
||||
// const StyledPopover = styled(Popover)`
|
||||
// .MuiPopover-paper {
|
||||
// border-radius: 10px;
|
||||
// border: 0px solid ${theme.palette.background.default};
|
||||
// box-shadow: 1px 2px 8px rgba(139, 143, 173, 0.5);
|
||||
// }
|
||||
// .MuiPopover-padding {
|
||||
// padding: 0px;
|
||||
// }
|
||||
// .MuiList-padding {
|
||||
// padding: 0px;
|
||||
// }
|
||||
// `;
|
||||
|
||||
const ColorPickerDialog = styled.div`
|
||||
background: ${theme.palette.background.default};
|
||||
width: ${colorPickerWidth}px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& .react-colorful {
|
||||
height: ${colorfulHeight}px;
|
||||
width: ${colorPickerWidth}px;
|
||||
}
|
||||
& .react-colorful__saturation {
|
||||
border-bottom: none;
|
||||
border-radius: 5px;
|
||||
}
|
||||
& .react-colorful__hue {
|
||||
height: 20px;
|
||||
margin-top: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
& .react-colorful__saturation-pointer {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
& .react-colorful__hue-pointer {
|
||||
width: 7px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
`;
|
||||
|
||||
const HashLabel = styled.div`
|
||||
margin: auto 0px auto 10px;
|
||||
font-size: 13px;
|
||||
color: #7d8ec2;
|
||||
font-family: ${theme.typography.button.fontFamily};
|
||||
`;
|
||||
|
||||
const HexLabel = styled.div`
|
||||
margin: auto 10px auto 0px;
|
||||
font-size: 12px;
|
||||
display: inline-flex;
|
||||
font-family: ${theme.typography.button.fontFamily};
|
||||
`;
|
||||
|
||||
const HexColorInputBox = styled.div`
|
||||
display: inline-flex;
|
||||
flex-grow: 1;
|
||||
margin-right: 10px;
|
||||
width: 140px;
|
||||
height: 28px;
|
||||
border: 1px solid ${theme.palette.grey["600"]};
|
||||
border-radius: 5px;
|
||||
`;
|
||||
|
||||
const HexWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
& input {
|
||||
min-width: 0px;
|
||||
border: 0px;
|
||||
background: ${theme.palette.background.default};
|
||||
outline: none;
|
||||
font-family: ${theme.typography.button.fontFamily};
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
& input:focus {
|
||||
border-color: #4298ef;
|
||||
}
|
||||
`;
|
||||
|
||||
const Swatch = styled.div<{ $color: string }>`
|
||||
display: inline-flex;
|
||||
${({ $color }): string => {
|
||||
if ($color.toUpperCase() === "#FFFFFF") {
|
||||
return `border: 1px solid ${theme.palette.grey["600"]};`;
|
||||
}
|
||||
return `border: 1px solid ${$color};`;
|
||||
}}
|
||||
background-color: ${({ $color }): string => $color};
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 5px;
|
||||
`;
|
||||
|
||||
const ColorPickerInput = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
`;
|
||||
|
||||
export default ColorPicker;
|
||||
@@ -1,420 +0,0 @@
|
||||
import {
|
||||
CSSProperties,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
KeyboardEvent,
|
||||
useContext,
|
||||
} from "react";
|
||||
import { useRef } from "react";
|
||||
import EditorContext, { Area } from "./editorContext";
|
||||
import { getStringRange } from "./util";
|
||||
|
||||
/**
|
||||
* This is the Cell Editor for IronCalc
|
||||
* I uses a transparent textarea and a styled mask. What you see is the HTML styled content of the mask
|
||||
* and the caret from the textarea. The alternative would be to have a 'contenteditable' div.
|
||||
* That turns out to be a much more difficult implementation.
|
||||
*
|
||||
* The editor grows horizontally with text if it fits in the screen.
|
||||
* If it doesn't fit, it wraps and grows vertically. If it doesn't fit vertically it scrolls.
|
||||
*
|
||||
* Many keyboard and mouse events are handled gracefully by the textarea in full or in part.
|
||||
* For example letter key strokes like 'q' or '1' are handled full by the textarea.
|
||||
* Some keyboard events like "RightArrow" might need to be handled separately and let them bubble up,
|
||||
* or might be handled by the textarea, depending on the "editor mode".
|
||||
* Some other like "Enter" we need to intercept and change the normal behaviour.
|
||||
*/
|
||||
|
||||
const commonCSS: CSSProperties = {
|
||||
fontWeight: "inherit",
|
||||
fontFamily: "inherit",
|
||||
fontSize: "inherit",
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
top: 0,
|
||||
whiteSpace: "pre",
|
||||
width: "100%",
|
||||
padding: 0,
|
||||
};
|
||||
|
||||
interface Cell {
|
||||
sheet: number;
|
||||
row: number;
|
||||
column: number;
|
||||
}
|
||||
|
||||
interface EditorOptions {
|
||||
minimalWidth: number;
|
||||
minimalHeight: number;
|
||||
textColor: string;
|
||||
originalText: string;
|
||||
getStyledText: (
|
||||
text: string,
|
||||
insertRangeText: string
|
||||
) => {
|
||||
html: JSX.Element[];
|
||||
isInReferenceMode: boolean;
|
||||
};
|
||||
onEditEnd: (text: string) => void;
|
||||
display: boolean;
|
||||
cell: Cell;
|
||||
sheetNames: string[];
|
||||
}
|
||||
|
||||
// You can either be editing a formula or content.
|
||||
// When editing content (behaviour is common to Excel and Google Sheets):
|
||||
// * If you start editing by typing you are in *accept* mode
|
||||
// * If you start editing by F2 you are in *cruise* mode
|
||||
// * If you start editing by double click you are in *cruise* mode
|
||||
// In Google Sheets "Enter" starts editing and puts you in *cruise* mode. We do not do that
|
||||
// Once you are in cruise mode it is not possible to switch to accept mode
|
||||
// The only way to go from accept mode to cruise mode is clicking in the content somewhere
|
||||
|
||||
// When editing a formula.
|
||||
// In Google Sheets you are either in insert mode or cruise mode.
|
||||
// You can get back to accept mode if you delete the whole formula
|
||||
// In Excel you can be either in insert or accept but if you click in the formula body
|
||||
// you switch to cruise mode. Once in cruise mode you can go to insert mode by selecting a range.
|
||||
// Then you are back in accept/insert modes
|
||||
|
||||
const Editor = (options: EditorOptions) => {
|
||||
const {
|
||||
minimalWidth,
|
||||
minimalHeight,
|
||||
textColor,
|
||||
onEditEnd,
|
||||
originalText,
|
||||
display,
|
||||
cell,
|
||||
sheetNames,
|
||||
} = options;
|
||||
|
||||
const [width, setWidth] = useState(minimalWidth);
|
||||
const [height, setHeight] = useState(minimalHeight);
|
||||
|
||||
const { editorContext, setEditorContext } = useContext(EditorContext);
|
||||
|
||||
const setBaseText = (newText: string) => {
|
||||
console.log('Calling setBaseText');
|
||||
setEditorContext((c) => {
|
||||
return {
|
||||
...c,
|
||||
baseText: newText,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const insertRangeText = editorContext.insertRange
|
||||
? getStringRange(editorContext.insertRange, sheetNames)
|
||||
: "";
|
||||
|
||||
const baseText = editorContext.baseText;
|
||||
const text = baseText + insertRangeText;
|
||||
// console.log('baseText', baseText, 'insertRange:', insertRangeText);
|
||||
|
||||
const formulaRef = useRef<HTMLDivElement>(null);
|
||||
const maskRef = useRef<HTMLDivElement>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
// useEffect(() => {
|
||||
// setBaseText(originalText);
|
||||
// }, [cell]);
|
||||
|
||||
const { html: styledFormula, isInReferenceMode } = options.getStyledText(
|
||||
baseText,
|
||||
insertRangeText
|
||||
);
|
||||
|
||||
if (display && textareaRef.current) {
|
||||
textareaRef.current.focus();
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (formulaRef.current) {
|
||||
const scrollWidth = formulaRef.current.scrollWidth;
|
||||
if (scrollWidth > width) {
|
||||
setWidth(scrollWidth);
|
||||
} else if (scrollWidth <= minimalWidth) {
|
||||
setWidth(minimalWidth);
|
||||
}
|
||||
const scrollHeight = formulaRef.current.scrollHeight;
|
||||
if (scrollHeight > height) {
|
||||
setHeight(scrollHeight);
|
||||
}
|
||||
}
|
||||
}, [text]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isInReferenceMode) {
|
||||
setEditorContext((c) => {
|
||||
return {
|
||||
...c,
|
||||
mode: "insert",
|
||||
};
|
||||
});
|
||||
} else {
|
||||
setEditorContext((c) => {
|
||||
return {
|
||||
...c,
|
||||
mode: "cruise",
|
||||
insertRange: null,
|
||||
};
|
||||
});
|
||||
}
|
||||
}, [isInReferenceMode]);
|
||||
|
||||
useEffect(() => {
|
||||
if (display && textareaRef.current) {
|
||||
textareaRef.current.focus();
|
||||
}
|
||||
}, [display]);
|
||||
|
||||
// console.log("Ok, this is running", text, editorContext.id);
|
||||
|
||||
const onKeyDown = useCallback(
|
||||
(event: KeyboardEvent) => {
|
||||
const { key, shiftKey, altKey } = event;
|
||||
const textarea = textareaRef.current;
|
||||
const mode = editorContext.mode;
|
||||
if (!textarea) {
|
||||
return;
|
||||
}
|
||||
switch (key) {
|
||||
case "Enter": {
|
||||
if (altKey) {
|
||||
// new line
|
||||
const start = textarea.selectionStart;
|
||||
const end = textarea.selectionEnd;
|
||||
const newText = text.slice(0, start) + "\n" + text.slice(end);
|
||||
setBaseText(newText);
|
||||
setTimeout(() => {
|
||||
textarea.setSelectionRange(start + 1, start + 1);
|
||||
}, 1);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
return;
|
||||
} else {
|
||||
// end edit
|
||||
onEditEnd(text);
|
||||
textarea.blur();
|
||||
// event bubbles up
|
||||
return;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "Escape": {
|
||||
setBaseText(originalText);
|
||||
textarea.blur();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
case "ArrowLeft": {
|
||||
if (mode === "accept") {
|
||||
onEditEnd(text);
|
||||
textarea.blur();
|
||||
// event bubbles up
|
||||
return;
|
||||
} else if (mode == "insert") {
|
||||
if (shiftKey) {
|
||||
// increase the inserted range to the left
|
||||
if (!editorContext.insertRange) {
|
||||
setEditorContext((c) => {
|
||||
return {
|
||||
...c,
|
||||
insertRange: {
|
||||
absoluteColumnEnd: false,
|
||||
absoluteColumnStart: false,
|
||||
absoluteRowEnd: false,
|
||||
absoluteRowStart: false,
|
||||
sheet: cell.sheet,
|
||||
rowStart: cell.row,
|
||||
rowEnd: cell.row,
|
||||
columnStart: cell.column,
|
||||
columnEnd: cell.column,
|
||||
},
|
||||
};
|
||||
});
|
||||
} else {
|
||||
// const r = insertRage;
|
||||
// r.columnStart = Math.max(r.columnStart - 1, 1);
|
||||
// setInsertRange(r);
|
||||
}
|
||||
} else {
|
||||
// move inserted cell to the left
|
||||
if (!editorContext.insertRange) {
|
||||
setEditorContext((c) => {
|
||||
return {
|
||||
...c,
|
||||
insertRange: {
|
||||
absoluteColumnEnd: false,
|
||||
absoluteColumnStart: false,
|
||||
absoluteRowEnd: false,
|
||||
absoluteRowStart: false,
|
||||
sheet: cell.sheet,
|
||||
rowStart: cell.row,
|
||||
rowEnd: cell.row,
|
||||
columnStart: cell.column,
|
||||
columnEnd: cell.column,
|
||||
},
|
||||
};
|
||||
});
|
||||
} else {
|
||||
setEditorContext((c) => {
|
||||
const range = c.insertRange as Area;
|
||||
const row = range.rowStart;
|
||||
let column = range.columnStart - 1;
|
||||
if (column < 1) {
|
||||
column = 1;
|
||||
}
|
||||
return {
|
||||
...c,
|
||||
insertRange: {
|
||||
absoluteColumnEnd: false,
|
||||
absoluteColumnStart: false,
|
||||
absoluteRowEnd: false,
|
||||
absoluteRowStart: false,
|
||||
sheet: range.sheet,
|
||||
rowStart: row,
|
||||
rowEnd: row,
|
||||
columnStart: column,
|
||||
columnEnd: column,
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
// We don't do anything in "cruise mode" and rely on the textarea default behaviour
|
||||
break;
|
||||
}
|
||||
case "ArrowDown": {
|
||||
if (mode === "accept") {
|
||||
onEditEnd(text);
|
||||
textarea.blur();
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "ArrowRight": {
|
||||
if (mode === "accept") {
|
||||
onEditEnd(text);
|
||||
textarea.blur();
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "ArrowUp": {
|
||||
if (mode === "accept") {
|
||||
onEditEnd(text);
|
||||
textarea.blur();
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "Tab": {
|
||||
onEditEnd(text);
|
||||
textarea.blur();
|
||||
// event bubbles up
|
||||
}
|
||||
}
|
||||
if (editorContext.mode === "insert") {
|
||||
setBaseText(text);
|
||||
setEditorContext((context) => {
|
||||
return {
|
||||
...context,
|
||||
mode: "cruise",
|
||||
insertRange: null,
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
[text, editorContext]
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
width,
|
||||
height,
|
||||
overflow: "hidden",
|
||||
background: "#FFF",
|
||||
display: display ? "block" : "none",
|
||||
}}
|
||||
onClick={(_event) => {
|
||||
console.log("Click on wrapper");
|
||||
}}
|
||||
onPointerDown={() => {
|
||||
console.log("On pointer down wrapper");
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={maskRef}
|
||||
style={{
|
||||
...commonCSS,
|
||||
textAlign: "left",
|
||||
pointerEvents: "none",
|
||||
height,
|
||||
}}
|
||||
onClick={(_event) => {
|
||||
console.log("Click on mask");
|
||||
}}
|
||||
onPointerDown={() => {
|
||||
console.log("On pointer down mask");
|
||||
}}
|
||||
>
|
||||
<div ref={formulaRef}>{styledFormula}</div>
|
||||
</div>
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
rows={1}
|
||||
style={{
|
||||
...commonCSS,
|
||||
color: "transparent",
|
||||
backgroundColor: "transparent",
|
||||
caretColor: textColor,
|
||||
outline: "none",
|
||||
resize: "none",
|
||||
border: "none",
|
||||
height,
|
||||
}}
|
||||
spellCheck="false"
|
||||
value={text}
|
||||
onChange={(event) => {
|
||||
console.log("onChange", event.target.value);
|
||||
setBaseText(event.target.value);
|
||||
}}
|
||||
onScroll={() => {
|
||||
if (maskRef.current && textareaRef.current) {
|
||||
maskRef.current.style.left = `-${textareaRef.current.scrollLeft}px`;
|
||||
maskRef.current.style.top = `-${textareaRef.current.scrollTop}px`;
|
||||
}
|
||||
}}
|
||||
onKeyDown={onKeyDown}
|
||||
onClick={(event) => {
|
||||
console.log("Setting mode");
|
||||
setEditorContext((c) => {
|
||||
return {
|
||||
...c,
|
||||
mode: "cruise",
|
||||
};
|
||||
});
|
||||
console.log("here");
|
||||
// if (display) {
|
||||
event.stopPropagation();
|
||||
// }
|
||||
}}
|
||||
onBlur={() => {
|
||||
// on blur
|
||||
}}
|
||||
onPointerDown={(event) => {
|
||||
event.stopPropagation();
|
||||
}}
|
||||
></textarea>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Editor;
|
||||
@@ -1,45 +0,0 @@
|
||||
import { Dispatch, SetStateAction, createContext } from "react";
|
||||
|
||||
export interface Area {
|
||||
sheet: number | null;
|
||||
rowStart: number;
|
||||
rowEnd: number;
|
||||
columnStart: number;
|
||||
columnEnd: number;
|
||||
absoluteRowStart: boolean;
|
||||
absoluteRowEnd: boolean;
|
||||
absoluteColumnStart: boolean;
|
||||
absoluteColumnEnd: boolean;
|
||||
}
|
||||
|
||||
// Arrow keys behave in different ways depending on the "edit mode":
|
||||
// * In _cruise_ mode arrowy keys navigate within the editor
|
||||
// * In _accept_ mode pressing an arrow key will end editing
|
||||
// * In _insert_ mode arrow keys will change the selected range
|
||||
export type EditorMode = "cruise" | "accept" | "insert";
|
||||
|
||||
export interface EditorState {
|
||||
mode: EditorMode;
|
||||
insertRange: null | Area;
|
||||
baseText: string;
|
||||
id: number;
|
||||
}
|
||||
|
||||
interface EditorContextType {
|
||||
editorContext: EditorState;
|
||||
setEditorContext: Dispatch<
|
||||
SetStateAction<{ mode: EditorMode; insertRange: null | Area }>
|
||||
>;
|
||||
}
|
||||
|
||||
const EditorContext = createContext<EditorContextType>({
|
||||
editorContext: {
|
||||
mode: "accept",
|
||||
insertRange: null,
|
||||
baseText: '',
|
||||
id: Math.floor(Math.random()*1000),
|
||||
},
|
||||
setEditorContext: () => {},
|
||||
});
|
||||
|
||||
export default EditorContext;
|
||||
@@ -1,3 +0,0 @@
|
||||
export { default } from './editor';
|
||||
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
type ErrorType =
|
||||
| 'REF'
|
||||
| 'NAME'
|
||||
| 'VALUE'
|
||||
| 'DIV'
|
||||
| 'NA'
|
||||
| 'NUM'
|
||||
| 'ERROR'
|
||||
| 'NIMPL'
|
||||
| 'SPILL'
|
||||
| 'CALC'
|
||||
| 'CIRC';
|
||||
|
||||
type OpCompareType =
|
||||
| 'LessThan'
|
||||
| 'GreaterThan'
|
||||
| 'Equal'
|
||||
| 'LessOrEqualThan'
|
||||
| 'GreaterOrEqualThan'
|
||||
| 'NonEqual';
|
||||
|
||||
type OpSumType = 'Add' | 'Minus';
|
||||
|
||||
type OpProductType = 'Times' | 'Divide';
|
||||
|
||||
interface ReferenceType {
|
||||
sheet: string | null;
|
||||
row: number;
|
||||
column: number;
|
||||
absolute_column: boolean;
|
||||
absolute_row: boolean;
|
||||
}
|
||||
|
||||
interface ParsedReferenceType {
|
||||
column: number;
|
||||
row: number;
|
||||
absolute_column: boolean;
|
||||
absolute_row: boolean;
|
||||
}
|
||||
|
||||
interface Reference {
|
||||
Reference: ReferenceType;
|
||||
}
|
||||
|
||||
interface Range {
|
||||
Range: {
|
||||
sheet: string | null;
|
||||
left: ParsedReferenceType;
|
||||
right: ParsedReferenceType;
|
||||
};
|
||||
}
|
||||
|
||||
export type TokenType =
|
||||
| 'Illegal'
|
||||
| 'Eof'
|
||||
| { Ident: string }
|
||||
| { String: string }
|
||||
| { Boolean: boolean }
|
||||
| { Number: number }
|
||||
| { ERROR: ErrorType }
|
||||
| { COMPARE: OpCompareType }
|
||||
| { SUM: OpSumType }
|
||||
| { PRODUCT: OpProductType }
|
||||
| 'POWER'
|
||||
| 'LPAREN'
|
||||
| 'RPAREN'
|
||||
| 'COLON'
|
||||
| 'SEMICOLON'
|
||||
| 'LBRACKET'
|
||||
| 'RBRACKET'
|
||||
| 'LBRACE'
|
||||
| 'RBRACE'
|
||||
| 'COMMA'
|
||||
| 'BANG'
|
||||
| 'PERCENT'
|
||||
| 'AND'
|
||||
| Reference
|
||||
| Range;
|
||||
|
||||
export interface MarkedToken {
|
||||
token: TokenType;
|
||||
start: number;
|
||||
end: number;
|
||||
}
|
||||
|
||||
export function tokenIsReferenceType(token: TokenType): token is Reference {
|
||||
return typeof token === 'object' && 'Reference' in token;
|
||||
}
|
||||
|
||||
export function tokenIsRangeType(token: TokenType): token is Range {
|
||||
return typeof token === 'object' && 'Range' in token;
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
import { useCallback, KeyboardEvent } from "react";
|
||||
import { WorkbookState } from "../workbookState";
|
||||
import { Model } from "@ironcalc/wasm";
|
||||
|
||||
interface Options {
|
||||
// onMoveCaretToStart: () => void;
|
||||
// onMoveCaretToEnd: () => void;
|
||||
// onEditEnd: (delta: { deltaRow: number; deltaColumn: number }) => void;
|
||||
// onEditEscape: () => void;
|
||||
// onReferenceCycle: () => void;
|
||||
// text: string;
|
||||
// setText: (text: string) => void;
|
||||
model: Model;
|
||||
state: WorkbookState;
|
||||
refresh: () => void;
|
||||
}
|
||||
|
||||
const useEditorKeydown = (
|
||||
options: Options
|
||||
): {
|
||||
onKeyDown: (event: KeyboardEvent) => void;
|
||||
} => {
|
||||
const { state, model } = options;
|
||||
const onKeyDown = useCallback((event: KeyboardEvent) => {
|
||||
const { key, shiftKey } = event;
|
||||
const { mode, text } = state.getEditor() ?? { mode: "init", text: "" };
|
||||
switch (key) {
|
||||
// case "Enter":
|
||||
// // options.onEditEnd({ deltaRow: 1, deltaColumn: 0 });
|
||||
// const { row, column } = state.getSelectedCell();
|
||||
// const sheet = state.getSelectedSheet();
|
||||
// model.setUserInput(sheet, row, column, text);
|
||||
// state.selectCell({ row: row + 1, column });
|
||||
// event.preventDefault();
|
||||
// event.stopPropagation();
|
||||
// options.refresh();
|
||||
// break;
|
||||
// case 'ArrowUp': {
|
||||
// if (mode === 'init') {
|
||||
// options.onEditEnd({ deltaRow: -1, deltaColumn: 0 });
|
||||
// } else {
|
||||
// options.onMoveCaretToStart();
|
||||
// }
|
||||
// event.preventDefault();
|
||||
// event.stopPropagation();
|
||||
// break;
|
||||
// }
|
||||
// case 'ArrowDown': {
|
||||
// if (mode === 'init') {
|
||||
// options.onEditEnd({ deltaRow: 1, deltaColumn: 0 });
|
||||
// } else {
|
||||
// options.onMoveCaretToEnd();
|
||||
// }
|
||||
// event.preventDefault();
|
||||
// event.stopPropagation();
|
||||
// break;
|
||||
// }
|
||||
// case 'Tab': {
|
||||
// if (event.shiftKey) {
|
||||
// options.onEditEnd({ deltaRow: 0, deltaColumn: -1 });
|
||||
// } else {
|
||||
// options.onEditEnd({ deltaRow: 0, deltaColumn: 1 });
|
||||
// }
|
||||
// event.preventDefault();
|
||||
// event.stopPropagation();
|
||||
|
||||
// break;
|
||||
// }
|
||||
// case 'Escape': {
|
||||
// options.onEditEscape();
|
||||
// event.preventDefault();
|
||||
// event.stopPropagation();
|
||||
|
||||
// break;
|
||||
// }
|
||||
// case 'ArrowLeft': {
|
||||
// if (mode === 'init') {
|
||||
// options.onEditEnd({ deltaRow: 0, deltaColumn: -1 });
|
||||
// event.preventDefault();
|
||||
// event.stopPropagation();
|
||||
// }
|
||||
|
||||
// break;
|
||||
// }
|
||||
// case 'ArrowRight': {
|
||||
// if (mode === 'init') {
|
||||
// options.onEditEnd({ deltaRow: 0, deltaColumn: 1 });
|
||||
// event.preventDefault();
|
||||
// event.stopPropagation();
|
||||
// }
|
||||
|
||||
// break;
|
||||
// }
|
||||
// case 'F4': {
|
||||
// options.onReferenceCycle();
|
||||
// event.preventDefault();
|
||||
// event.stopPropagation();
|
||||
|
||||
// break;
|
||||
// }
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}, [model, state]);
|
||||
return { onKeyDown };
|
||||
};
|
||||
|
||||
export default useEditorKeydown;
|
||||
@@ -1,334 +0,0 @@
|
||||
import { getTokens } from "@ironcalc/wasm";
|
||||
import { tokenIsRangeType, tokenIsReferenceType } from "./tokenTypes";
|
||||
import { Area } from "./editorContext";
|
||||
|
||||
const letters = [
|
||||
"A",
|
||||
"B",
|
||||
"C",
|
||||
"D",
|
||||
"E",
|
||||
"F",
|
||||
"G",
|
||||
"H",
|
||||
"I",
|
||||
"J",
|
||||
"K",
|
||||
"L",
|
||||
"M",
|
||||
"N",
|
||||
"O",
|
||||
"P",
|
||||
"Q",
|
||||
"R",
|
||||
"S",
|
||||
"T",
|
||||
"U",
|
||||
"V",
|
||||
"W",
|
||||
"X",
|
||||
"Y",
|
||||
"Z",
|
||||
];
|
||||
interface Reference {
|
||||
row: number;
|
||||
column: number;
|
||||
absoluteRow: boolean;
|
||||
absoluteColumn: boolean;
|
||||
}
|
||||
|
||||
export function referenceToString(rf: Reference): string {
|
||||
const absC = rf.absoluteColumn ? "$" : "";
|
||||
const absR = rf.absoluteRow ? "$" : "";
|
||||
return absC + columnNameFromNumber(rf.column) + absR + rf.row;
|
||||
}
|
||||
|
||||
export function columnNameFromNumber(column: number): string {
|
||||
let columnName = "";
|
||||
let index = column;
|
||||
while (index > 0) {
|
||||
columnName = `${letters[(index - 1) % 26]}${columnName}`;
|
||||
index = Math.floor((index - 1) / 26);
|
||||
}
|
||||
return columnName;
|
||||
}
|
||||
|
||||
export function columnNumberFromName(columnName: string): number {
|
||||
let column = 0;
|
||||
for (const character of columnName) {
|
||||
const index = (character.codePointAt(0) ?? 0) - 64;
|
||||
column = column * 26 + index;
|
||||
}
|
||||
return column;
|
||||
}
|
||||
interface Range {
|
||||
sheet: number | null;
|
||||
rowStart: number;
|
||||
rowEnd: number;
|
||||
columnStart: number;
|
||||
columnEnd: number;
|
||||
absoluteRowStart: boolean;
|
||||
absoluteRowEnd: boolean;
|
||||
absoluteColumnStart: boolean;
|
||||
absoluteColumnEnd: boolean;
|
||||
}
|
||||
|
||||
export function getStringRange(range: Range, sheetNames: string[]) {
|
||||
const name = range.sheet ? `${sheetNames[range.sheet]}!` : "";
|
||||
const left = referenceToString({
|
||||
row: range.rowStart,
|
||||
column: range.columnStart,
|
||||
absoluteRow: range.absoluteRowStart,
|
||||
absoluteColumn: range.absoluteColumnStart,
|
||||
});
|
||||
if (
|
||||
range.rowStart === range.rowEnd &&
|
||||
range.columnStart === range.columnEnd
|
||||
) {
|
||||
return `${name}${left}`;
|
||||
}
|
||||
const right = referenceToString({
|
||||
row: range.rowEnd,
|
||||
column: range.columnEnd,
|
||||
absoluteRow: range.absoluteRowEnd,
|
||||
absoluteColumn: range.absoluteColumnEnd,
|
||||
});
|
||||
return `${name}${left}:${right}`;
|
||||
}
|
||||
|
||||
interface ActiveRange {
|
||||
sheet: number;
|
||||
rowStart: number;
|
||||
rowEnd: number;
|
||||
columnStart: number;
|
||||
columnEnd: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
// IronCalc Color Palette
|
||||
export function getColor(index: number, alpha = 1): string {
|
||||
const colors = [
|
||||
{
|
||||
name: "Cyan",
|
||||
rgba: [89, 185, 188, 1],
|
||||
hex: "#59B9BC",
|
||||
},
|
||||
{
|
||||
name: "Flamingo",
|
||||
rgba: [236, 87, 83, 1],
|
||||
hex: "#EC5753",
|
||||
},
|
||||
{
|
||||
hex: "#3358B7",
|
||||
rgba: [51, 88, 183, 1],
|
||||
name: "Blue",
|
||||
},
|
||||
{
|
||||
hex: "#F8CD3C",
|
||||
rgba: [248, 205, 60, 1],
|
||||
name: "Yellow",
|
||||
},
|
||||
{
|
||||
hex: "#3BB68A",
|
||||
rgba: [59, 182, 138, 1],
|
||||
name: "Emerald",
|
||||
},
|
||||
{
|
||||
hex: "#523E93",
|
||||
rgba: [82, 62, 147, 1],
|
||||
name: "Violet",
|
||||
},
|
||||
{
|
||||
hex: "#A23C52",
|
||||
rgba: [162, 60, 82, 1],
|
||||
name: "Burgundy",
|
||||
},
|
||||
{
|
||||
hex: "#8CB354",
|
||||
rgba: [162, 60, 82, 1],
|
||||
name: "Wasabi",
|
||||
},
|
||||
{
|
||||
hex: "#D03627",
|
||||
rgba: [208, 54, 39, 1],
|
||||
name: "Red",
|
||||
},
|
||||
{
|
||||
hex: "#1B717E",
|
||||
rgba: [27, 113, 126, 1],
|
||||
name: "Teal",
|
||||
},
|
||||
];
|
||||
if (alpha === 1) {
|
||||
return colors[index % 10].hex;
|
||||
}
|
||||
const { rgba } = colors[index % 10];
|
||||
return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${alpha})`;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* This function get a formula like `=A1*SUM(B5:C6)` and transforms it to:
|
||||
*
|
||||
* `<span>=</span><span>A1</span><span>SUM</span><span>(</span><span>B5:C6</span><span>)</span>`
|
||||
*
|
||||
* While also returning the set of ranges [A1, B5:C6] with specific color assignments for each range
|
||||
*/
|
||||
export function getFormulaHTML(
|
||||
text: string,
|
||||
sheet: number,
|
||||
sheetList: string[],
|
||||
insertRage: Area | null,
|
||||
insertRangeText: string
|
||||
): {
|
||||
html: JSX.Element[];
|
||||
activeRanges: ActiveRange[];
|
||||
isInReferenceMode: boolean;
|
||||
} {
|
||||
let html = [];
|
||||
const activeRanges: ActiveRange[] = [];
|
||||
let colorCount = 0;
|
||||
if (text.startsWith("=")) {
|
||||
const formula = text.slice(1);
|
||||
|
||||
const tokens = getTokens(formula);
|
||||
const tokenCount = tokens.length;
|
||||
const usedColors: Record<string, string> = {};
|
||||
for (let index = 0; index < tokenCount; index += 1) {
|
||||
const { token, start, end } = tokens[index];
|
||||
if (tokenIsReferenceType(token)) {
|
||||
const { sheet: refSheet, row, column } = token.Reference;
|
||||
const sheetIndex = refSheet ? sheetList.indexOf(refSheet) : sheet;
|
||||
const key = `${sheetIndex}-${row}-${column}`;
|
||||
let color = usedColors[key];
|
||||
if (!color) {
|
||||
color = getColor(colorCount);
|
||||
usedColors[key] = color;
|
||||
colorCount += 1;
|
||||
}
|
||||
html.push(
|
||||
<span key={index} style={{ color }}>
|
||||
{formula.slice(start, end)}
|
||||
</span>
|
||||
);
|
||||
activeRanges.push({
|
||||
sheet: sheetIndex,
|
||||
rowStart: row,
|
||||
columnStart: column,
|
||||
rowEnd: row,
|
||||
columnEnd: column,
|
||||
color,
|
||||
});
|
||||
} else if (tokenIsRangeType(token)) {
|
||||
let {
|
||||
sheet: refSheet,
|
||||
left: { row: rowStart, column: columnStart },
|
||||
right: { row: rowEnd, column: columnEnd },
|
||||
} = token.Range;
|
||||
const sheetIndex = refSheet ? sheetList.indexOf(refSheet) : sheet;
|
||||
|
||||
const key = `${sheetIndex}-${rowStart}-${columnStart}:${rowEnd}-${columnEnd}`;
|
||||
let color = usedColors[key];
|
||||
if (!color) {
|
||||
color = getColor(colorCount);
|
||||
usedColors[key] = color;
|
||||
colorCount += 1;
|
||||
}
|
||||
|
||||
if (rowStart > rowEnd) {
|
||||
[rowStart, rowEnd] = [rowEnd, rowStart];
|
||||
}
|
||||
if (columnStart > columnEnd) {
|
||||
[columnStart, columnEnd] = [columnEnd, columnStart];
|
||||
}
|
||||
html.push(
|
||||
<span key={index} style={{ color }}>
|
||||
{formula.slice(start, end)}
|
||||
</span>
|
||||
);
|
||||
colorCount += 1;
|
||||
|
||||
activeRanges.push({
|
||||
sheet: sheetIndex,
|
||||
rowStart,
|
||||
columnStart,
|
||||
rowEnd,
|
||||
columnEnd,
|
||||
color,
|
||||
});
|
||||
} else {
|
||||
html.push(<span key={index}>{formula.slice(start, end)}</span>);
|
||||
}
|
||||
}
|
||||
if (tokenCount > 0) {
|
||||
const lastToken = tokens[tokens.length - 1];
|
||||
if (lastToken.end < text.length - 1) {
|
||||
html.push(
|
||||
<span key="rest">{text.slice(lastToken.end + 1, text.length)}</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
html = [<span key="equals">=</span>].concat(html);
|
||||
} else {
|
||||
html = [<span key="single">{text}</span>];
|
||||
}
|
||||
const isRefMode = isInReferenceMode(text, text.length);
|
||||
if (isRefMode) {
|
||||
if (insertRage) {
|
||||
const color = getColor(colorCount);
|
||||
activeRanges.push({
|
||||
sheet: insertRage.sheet || sheet,
|
||||
rowStart: insertRage.rowStart,
|
||||
rowEnd: insertRage.rowEnd,
|
||||
columnStart: insertRage.columnStart,
|
||||
columnEnd: insertRage.columnEnd,
|
||||
color,
|
||||
});
|
||||
colorCount += 1;
|
||||
html.push(
|
||||
<span key="insert-range" style={{ color, textDecoration: "underline" }}>
|
||||
{insertRangeText}
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
html.push(
|
||||
<span
|
||||
key="insert-cue"
|
||||
style={{
|
||||
border: "1px solid #d5d5d5",
|
||||
height: "2px",
|
||||
width: "7px",
|
||||
borderTop: 0,
|
||||
display: "inline-block",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
// We add a clickable element that spans the rest of the available space
|
||||
html.push(<span key="spacer" style={{ flexGrow: 1 }}></span>);
|
||||
return { html, activeRanges, isInReferenceMode: isRefMode };
|
||||
}
|
||||
|
||||
export function isInReferenceMode(text: string, cursor: number): boolean {
|
||||
// FIXME
|
||||
// This is a gross oversimplification
|
||||
// Returns true if both are true:
|
||||
// 1. Cursor is at the end
|
||||
// 2. Last char is one of [',', '(', '+', '*', '-', '/', '<', '>', '=', '&']
|
||||
// This has many false positives like '="1+' and also likely some false negatives
|
||||
// The right way of doing this is to have a partial parse of the formula tree
|
||||
// and check if the next token could be a reference
|
||||
if (!text.startsWith("=")) {
|
||||
return false;
|
||||
}
|
||||
if (text === "=") {
|
||||
return true;
|
||||
}
|
||||
const l = text.length;
|
||||
const chars = [",", "(", "+", "*", "-", "/", "<", ">", "=", "&"];
|
||||
if (cursor === l && chars.includes(text[l - 1])) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user