16 |
27 | );
28 | }
29 | }
30 |
31 | Modal.propTypes = {
32 | title: PropTypes.string,
33 | actions: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
34 | size: PropTypes.oneOf(['small', 'medium']),
35 | open: PropTypes.bool,
36 | onClose: PropTypes.func,
37 | };
38 |
39 | Modal.defaultProps = {
40 | size: 'small',
41 | open: false,
42 | onClose: () => {},
43 | };
44 |
45 | export default Modal;
46 |
--------------------------------------------------------------------------------
/src/components/Sortable/styles.module.css:
--------------------------------------------------------------------------------
1 | .sortable-item__arrow {
2 | position: relative;
3 | width: 10px;
4 | height: 10px;
5 | display: inline-block;
6 | }
7 |
8 | .sortable-item__arrow:hover {
9 | cursor: pointer;
10 | }
11 |
12 | .sortable-item__arrow:before {
13 | position: absolute;
14 | top: 50%;
15 | left: 50%;
16 | transform: translate(-50%, -50%);
17 | content: '';
18 | width: 0;
19 | height: 0;
20 | border-left: 5px solid rgba(0, 0, 0, 0);
21 | border-right: 5px solid rgba(0, 0, 0, 0);
22 | }
23 |
24 | .sortable-item__sort-desc {
25 | margin-left: 1rem;
26 | }
27 |
28 | .sortable-item__sort-asc {
29 | margin-left: 4px;
30 | }
31 |
32 | .sortable-item__sort-desc:before {
33 | border-top: 8px solid;
34 | }
35 |
36 | .sortable-item__sort-asc:before {
37 | border-bottom: 8px solid;
38 | }
39 |
40 | .sortable-item__sort-desc.active:before,
41 | .sortable-item__sort-desc:hover:before {
42 | border-top-color: #ffb417;
43 | }
44 |
45 | .sortable-item__sort-asc.active:before,
46 | .sortable-item__sort-asc:hover:before {
47 | border-bottom-color: #ffb417;
48 | }
49 |
50 | @media (prefers-color-scheme: dark) {
51 | .sortable-item__sort-desc:before {
52 | border-top-color: #454545;
53 | }
54 |
55 | .sortable-item__sort-asc:before {
56 | border-bottom-color: #454545;
57 | }
58 | }
59 |
60 | @media (prefers-color-scheme: light) {
61 | .sortable-item__sort-desc:before {
62 | border-top-color: #c8c8c8;
63 | }
64 |
65 | .sortable-item__sort-asc:before {
66 | border-bottom-color: #c8c8c8;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/src/components/Library/components/FolderListItem/styles.module.css:
--------------------------------------------------------------------------------
1 | .folder-list-item__container {
2 | padding: 1.5rem 4.5rem 1.5rem 1.5rem;
3 | display: flex;
4 | align-items: center;
5 | border-style: solid;
6 | border-width: 1px 0 1px;
7 | position: relative;
8 | }
9 |
10 | .folder-list-item__container + .folder-list-item__container {
11 | margin-top: -1px;
12 | }
13 |
14 | .folder-list-item__container:hover {
15 | cursor: pointer;
16 | }
17 |
18 | .folder-list-item__container:hover .folder-list-item__delete-btn {
19 | opacity: 1;
20 | }
21 |
22 | .folder-list-item__name {
23 | display: flex;
24 | flex-grow: 1;
25 | overflow: hidden;
26 | margin-left: 1rem;
27 | }
28 |
29 | .folder-list-item__delete-btn {
30 | opacity: 0;
31 | position: absolute;
32 | top: 50%;
33 | right: 1rem;
34 | transform: translateY(-55%);
35 | }
36 |
37 | .folder-list-item__delete-btn svg path {
38 | fill: #fd5865;
39 | }
40 |
41 | .folder-list-item__container__icon {
42 | min-width: 1.8rem;
43 | max-width: 1.8rem;
44 | height: auto;
45 | }
46 |
47 | @media (prefers-color-scheme: dark) {
48 | .folder-list-item__container {
49 | background: #353535;
50 | border-color: #454545;
51 | }
52 |
53 | .folder-list-item__container > svg path {
54 | fill: #fff;
55 | }
56 |
57 | .folder-list-item__active {
58 | background-color: #404040;
59 | }
60 | }
61 |
62 | @media (prefers-color-scheme: light) {
63 | .folder-list-item__container {
64 | background: #fff;
65 | border-color: #eaeaea;
66 | }
67 |
68 | .folder-list-item__active {
69 | background-color: #eaeaea;
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/components/ToggleDarkMode/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import { connect } from 'react-redux';
4 | import { ReactComponent as LightModeIcon } from './../../assets/icons/light-mode.svg';
5 | import { ReactComponent as DarkModeIcon } from './../../assets/icons/dark-mode.svg';
6 | import styles from './styles.module.css';
7 | import { setDarkMode } from './../../reducers/settings/settingsSlice';
8 |
9 | class ToggleDarkMode extends React.PureComponent {
10 | async componentDidMount() {
11 | // const isDarkMode = emit('dark-mode:enabled');
12 | // this.props.dispatch(setDarkMode(isDarkMode));
13 | }
14 |
15 | toggleDarkMode = async () => {
16 | const isDarkMode = !this.props.isDarkMode;
17 | await window.darkMode.set(isDarkMode);
18 | this.props.dispatch(setDarkMode(isDarkMode));
19 | };
20 |
21 | render() {
22 | return (
23 |
17 |
26 |
18 | {this.props.title}
19 |
21 | {this.props.children}
22 | {this.props.actions && (
23 | {this.props.actions}
24 | )}
25 |
29 |
36 | );
37 | }
38 | }
39 |
40 | function mapStateToProps(state) {
41 | return {
42 | isDarkMode: state.settings.isDarkMode,
43 | };
44 | }
45 |
46 | export default connect(mapStateToProps)(ToggleDarkMode);
47 |
--------------------------------------------------------------------------------
/src/components/Modal/styles.module.css:
--------------------------------------------------------------------------------
1 | .modal__container {
2 | position: fixed;
3 | top: 0;
4 | left: 0;
5 | right: 0;
6 | bottom: 0;
7 | display: flex;
8 | padding: 2rem;
9 | align-items: center;
10 | justify-content: center;
11 | background-color: rgba(0, 0, 0, 0.7);
12 | opacity: 0;
13 | pointer-events: none;
14 | cursor: default;
15 | z-index: 10;
16 | color: #000;
17 | transition-property: opacity;
18 | transition-duration: 0.3s;
19 | transition-timing-function: ease-in-out;
20 | }
21 |
22 | .open {
23 | opacity: 1;
24 | pointer-events: all;
25 | }
26 |
27 | .open .modal__content {
28 | transform: translateY(0);
29 | }
30 |
31 | .modal__content {
32 | max-width: 100%;
33 | width: 40rem;
34 | max-height: 100%;
35 | overflow-x: hidden;
36 | overflow-y: auto;
37 | background-color: #fff;
38 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
39 | border-radius: 4px;
40 | transform: translateY(-40%);
41 | transition-property: transform;
42 | transition-duration: 0.3s;
43 | transition-timing-function: ease-in-out;
44 | }
45 |
46 | .modal__header {
47 | display: flex;
48 | align-items: center;
49 | font-weight: bold;
50 | padding: 1.5rem;
51 | }
52 |
53 | .modal__header span {
54 | flex-grow: 1;
55 | }
56 |
57 | .modal__body {
58 | border-top: 1px solid #eaeaea;
59 | padding: 1.5rem;
60 | line-height: 1.5;
61 | }
62 |
63 | .size-medium .modal__content {
64 | width: 60rem;
65 | }
66 |
67 | .modal__close-icon {
68 | width: 1.5rem;
69 | height: 1.5rem;
70 | }
71 |
72 | .modal__close-icon:hover {
73 | cursor: pointer;
74 | }
75 |
76 | .modal__close-icon:focus,
77 | .modal__close-icon:active {
78 | opacity: 0.5;
79 | }
80 |
81 | .modal__actions {
82 | padding: 1.5rem;
83 | display: flex;
84 | justify-content: flex-end;
85 | border-top: 1px solid #eaeaea;
86 | }
87 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 |
30 |
32 |
33 |
35 |
52 |
63 | );
64 | }
65 |
66 | FolderListItem.propTypes = {
67 | folder: PropTypes.object,
68 | onClick: PropTypes.func,
69 | onDelete: PropTypes.func,
70 | isActive: PropTypes.bool,
71 | };
72 |
73 | FolderListItem.defaultProps = {
74 | onClick: () => {},
75 | onDelete: () => {},
76 | isActive: false,
77 | };
78 |
79 | export default FolderListItem;
80 |
--------------------------------------------------------------------------------
/src/reducers/settings/settingsSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 | import { LINEWIDTH } from '../../components/Paper/constants';
3 | import { SORT_BY, VIEW_MODE } from '../../constants';
4 | import { invoke } from '@tauri-apps/api';
5 |
6 | const initialState = {
7 | isDarkMode: window.matchMedia('(prefers-color-scheme: dark)'),
8 | platform: null,
9 | appVersion: null,
10 | libararysortPapersBy: SORT_BY.NAME_AZ,
11 | viewMode: VIEW_MODE.GRID,
12 | canvasPreferredLinewidth: LINEWIDTH.SMALL,
13 | };
14 |
15 | const settingsSlice = createSlice({
16 | name: 'settings',
17 | initialState,
18 | reducers: {
19 | setDarkMode: (state, action) => {
20 | state.isDarkMode = action.payload;
21 | },
22 | setPlatform: (state, action) => {
23 | state.platform = action.payload;
24 | },
25 | setAppVersion: (state, action) => {
26 | state.appVersion = action.payload;
27 | },
28 | setPreferredLinewidth: (state, action) => {
29 | state.canvasPreferredLinewidth = action.payload;
30 | },
31 | setSortPapersBy: (state, action) => {
32 | state.sortPapersBy = action.payload;
33 | },
34 | setViewMode: (state, action) => {
35 | state.viewMode = action.payload;
36 | },
37 | loadSettings: (state, action) => {
38 | if (action.payload && typeof action.payload === 'object') {
39 | if (Object.values(SORT_BY).includes(action.payload.sortPapersBy)) {
40 | state.sortPapersBy = action.payload.sortPapersBy;
41 | }
42 |
43 | if (Object.values(VIEW_MODE).includes(action.payload.viewMode)) {
44 | state.viewMode = action.payload.viewMode;
45 | }
46 |
47 | if (Object.values(LINEWIDTH).includes(action.payload.canvasPreferredLinewidth)) {
48 | state.canvasPreferredLinewidth = action.payload.canvasPreferredLinewidth;
49 | }
50 | }
51 | },
52 | },
53 | });
54 |
55 | export const saveSettings = () => async (dispatch, getState) => {
56 | const { sortPapersBy, viewMode, canvasPreferredLinewidth } = getState().settings;
57 | const settings = {
58 | sortPapersBy,
59 | viewMode,
60 | canvasPreferredLinewidth,
61 | };
62 |
63 | await invoke('save_settings', { settings: JSON.stringify(settings) });
64 | };
65 |
66 | export const {
67 | setDarkMode,
68 | setPlatform,
69 | setAppVersion,
70 | loadSettings,
71 | setSortPapersBy,
72 | setViewMode,
73 | setPreferredLinewidth,
74 | } = settingsSlice.actions;
75 |
76 | export default settingsSlice.reducer;
77 |
--------------------------------------------------------------------------------
/src/helpers.js:
--------------------------------------------------------------------------------
1 | import dayjs from 'dayjs';
2 |
3 | export function formatDate(date, options) {
4 | const opts = {
5 | format: 'YYYY-MM-DD HH:mm',
6 | relative: true,
7 | ...options,
8 | };
9 |
10 | return opts.relative ? dayjs(date).fromNow() : dayjs(date).format(opts.format);
11 | }
12 |
13 | export function removeDuplicates(arr) {
14 | return [...new Set(arr)];
15 | }
16 |
17 | export function sanitizeFilename(filename) {
18 | // Remove the following characters that are not allowed by filesystems:
19 | // - < (less than)
20 | // - > (greater than)
21 | // - : (colon)
22 | // - " (double quote)
23 | // - / (forward slash)
24 | // - \ (backslash)
25 | // - | (vertical bar or pipe)
26 | // - ? (question mark)
27 | // - * (asterisk)
28 | return filename.replace(/[<>:"/\\|?*]/g, '').replace(/\s+/g, '_');
29 | }
30 |
31 | export function ctrlOrMetaChar(platform) {
32 | const metaKey = String.fromCharCode(8984);
33 | return platform === 'darwin' ? metaKey : 'CTRL';
34 | }
35 |
36 | /**
37 | * Check if two objects are recursively the same.
38 | *
39 | * @param {object} obj1 - The first object to compare.
40 | * @param {object} obj2 - The second object to compare.
41 | * @returns {boolean} True if both object are exactly the same in key-values.
42 | */
43 | export function isEqual(obj1, obj2) {
44 | if (obj1 === undefined && obj2 === undefined) {
45 | return true;
46 | }
47 |
48 | // Check if either object is undefined or null.
49 | if (obj1 === undefined || obj1 === null || obj2 === undefined || obj2 === null) {
50 | return false;
51 | }
52 |
53 | if (Object.keys(obj1).length !== Object.keys(obj2).length) {
54 | return false;
55 | }
56 |
57 | // Cecursively check each key-value pair in the objects.
58 | for (let key in obj1) {
59 | if (obj1.hasOwnProperty(key) !== obj2.hasOwnProperty(key)) {
60 | return false;
61 | } else if (typeof obj1[key] !== typeof obj2[key]) {
62 | return false;
63 | }
64 |
65 | if (typeof obj1[key] === 'object') {
66 | if (!isEqual(obj1[key], obj2[key])) {
67 | return false;
68 | }
69 | } else if (obj1[key] !== obj2[key]) {
70 | return false;
71 | }
72 | }
73 |
74 | return true;
75 | }
76 |
77 | /**
78 | * Check if a color is dark or light.
79 | *
80 | * @param {string} hex - The hex code to check.
81 | * @returns {boolean} True when the color is considered a dark color.
82 | */
83 | export function isDarkColor(hex) {
84 | if (hex.length === 4) {
85 | hex = hex.replace(/#(.)(.)(.)/, '#$1$1$2$2$3$3');
86 | }
87 |
88 | // Convert hex to RGB.
89 | let r = parseInt(hex.substring(1, 3), 16);
90 | let g = parseInt(hex.substring(3, 5), 16);
91 | let b = parseInt(hex.substring(5, 7), 16);
92 |
93 | let luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
94 |
95 | // Check if the color is dark.
96 | return luminance < 0.5;
97 | }
98 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 | 
3 |
4 |
5 | 
9 |
10 |
50 |
55 | Name
51 |
52 |
54 |
56 |
64 | Folder
57 |
58 |
63 |
65 |
70 | {formatDate(this.props.paper.updatedAt)}
71 |
72 |
73 | Last modified
66 |
74 |
79 | {formatDate(this.props.paper.createdAt)}
80 |
81 |
82 | Created
75 |
79 | {props.viewMode === VIEW_MODE.GRID &&
90 | );
91 | }
92 |
93 | PaperListItem.propTypes = {
94 | paper: PropTypes.object.isRequired,
95 | viewMode: PropTypes.number,
96 | index: PropTypes.number,
97 | onClick: PropTypes.func,
98 | };
99 |
100 | PaperListItem.defaultProps = {
101 | onClick: () => {},
102 | };
103 |
104 | export default PaperListItem;
105 |
--------------------------------------------------------------------------------
/src/components/Paper/components/Toolbar/styles.module.css:
--------------------------------------------------------------------------------
1 | .toolbar__container {
2 | cursor: default;
3 | position: fixed;
4 | padding: 5px;
5 | border-radius: 7px;
6 | bottom: 2rem;
7 | left: 50%;
8 | transform: translateX(-50%);
9 | display: flex;
10 | align-items: center;
11 | justify-content: center;
12 | box-shadow: 0 0 15px 0 rgba(0, 0, 0, .2);
13 | }
14 |
15 | .toolbar__item-disabled {
16 | pointer-events: none !important;
17 | opacity: 0.3 !important;
18 | }
19 |
20 | .toolbar__item {
21 | color: #fff;
22 | width: 3rem;
23 | height: 3rem;
24 | margin: 5px;
25 | display: flex;
26 | align-items: center;
27 | justify-content: center;
28 | }
29 |
30 | .toolbar__item:hover {
31 | cursor: pointer;
32 | }
33 |
34 | .toolbar__item:active {
35 | opacity: 0.5;
36 | }
37 |
38 | .toolbar-right__button {
39 | width: 4rem;
40 | height: 4rem;
41 | }
42 |
43 | .toolbar-right__button img,
44 | .toolbar-right__button svg,
45 | .toolbar__item img,
46 | .toolbar__item svg {
47 | pointer-events: none;
48 | max-width: 2.5rem;
49 | max-height: 2.5rem;
50 | }
51 |
52 | .toolbar__item-separator {
53 | min-height: 2.5rem;
54 | width: 1px;
55 | margin: 0 5px;
56 | }
57 |
58 | .toolbar__item-active.toolbar__item__linewidth {
59 | border-color: #f9bd3f;
60 | }
61 |
62 | .toolbar__item__linewidth {
63 | border-radius: 50%;
64 | border: 2px solid transparent;
65 | }
66 |
67 | .toolbar__item__linewidth:before {
68 | content: '';
69 | border-radius: 50%;
70 | }
71 |
72 | .toolbar__item__linewidth-small:before {
73 | width: 7px;
74 | height: 7px;
75 | }
76 |
77 | .toolbar__item__linewidth-medium:before {
78 | width: 1.2rem;
79 | height: 1.2rem;
80 | }
81 |
82 | .toolbar__item__linewidth-large:before {
83 | width: 1.7rem;
84 | height: 1.7rem;
85 | }
86 |
87 | .toolbar__item-active {
88 | pointer-events: all;
89 | opacity: 1;
90 | }
91 |
92 | .toolbar__item.toolbar__item-active path {
93 | fill: #f9bd3f;
94 | }
95 |
96 | .toolbar-right__container {
97 | position: fixed;
98 | right: 2rem;
99 | bottom: 2rem;
100 | width: 5rem;
101 | }
102 |
103 | .toolbar-right__button {
104 | border-radius: 50%;
105 | display: flex;
106 | justify-content: center;
107 | align-items: center;
108 | padding: 1rem;
109 | box-shadow: 0 0 15px 0 rgba(0, 0, 0, .2);
110 | }
111 |
112 | .toolbar-right__button-delete svg path {
113 | fill: #fd5865;
114 | }
115 |
116 | .toolbar-right__button:active {
117 | opacity: 0.5;
118 | }
119 |
120 | .toolbar-right__button:hover {
121 | cursor: pointer;
122 | }
123 |
124 | .toolbar-right__button img {
125 | pointer-events: none;
126 | }
127 |
128 | .toolbar-right__button + .toolbar-right__button {
129 | margin-top: 1.5rem;
130 | }
131 |
132 | @media (prefers-color-scheme: dark) {
133 | .toolbar__item-separator {
134 | background-color: #707070;
135 | }
136 |
137 | .toolbar-right__button path,
138 | .toolbar__item path {
139 | fill: #fff;
140 | }
141 |
142 | .toolbar__item__linewidth:before {
143 | background-color: #fff;
144 | }
145 |
146 | .toolbar-right__button,
147 | .toolbar__container {
148 | background: #323232;
149 | }
150 | }
151 |
152 | @media (prefers-color-scheme: light) {
153 | .toolbar__item-separator {
154 | background-color: #d1d1d1;
155 | }
156 |
157 | .toolbar-right__button path,
158 | .toolbar__item path {
159 | fill: #000;
160 | }
161 |
162 | .toolbar__item__linewidth:before {
163 | background-color: #000;
164 | }
165 |
166 | .toolbar-right__button,
167 | .toolbar__container {
168 | background: #fff;
169 | border: 1px solid #d1d1d1;
170 | }
171 | }
172 |
--------------------------------------------------------------------------------
/src/components/InlineEdit/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import Tooltip from 'rc-tooltip';
4 | import { KEY } from '../../constants';
5 | import styles from './styles.module.css';
6 | import classNames from 'classnames';
7 |
8 | class InlineEdit extends React.Component {
9 | input = React.createRef();
10 | state = {
11 | editable: false,
12 | value: null,
13 | pressedEnter: false,
14 | };
15 |
16 | toggleEdit = (byEnterKey) => {
17 | const newState = {
18 | editable: !this.state.editable,
19 | pressedEnter: byEnterKey,
20 | };
21 |
22 | const value = this.state.value !== null ? this.state.value.trim() : null;
23 | if (!newState.editable && value) {
24 | this.props.onEditDone(value);
25 | }
26 |
27 | if (!newState.editable) {
28 | newState.value = null;
29 | }
30 |
31 | this.setState(newState);
32 | };
33 |
34 | onInputKeyPress = (e) => {
35 | if (e.which === KEY.ENTER) {
36 | this.input.current.blur();
37 | this.toggleEdit(true);
38 | }
39 | };
40 |
41 | onChange = (e) => {
42 | this.setState({ value: e.target.value });
43 | };
44 |
45 | onBlur = () => {
46 | if (!this.state.pressedEnter) {
47 | this.toggleEdit();
48 | }
49 | };
50 |
51 | componentDidUpdate(_, prevState) {
52 | if (!prevState.editable && this.state.editable) {
53 | this.input.current.focus();
54 | this.input.current.select();
55 | }
56 |
57 | if (prevState.editable && !this.state.editable && prevState.pressedEnter) {
58 | this.setState({ pressedEnter: false });
59 | }
60 | }
61 |
62 | /**
63 | * Calculate the width for the input element by putting the current value
64 | * inside a temporariry span element and then use that width as the width
65 | * for the input element.
66 | */
67 | getInputWidth = () => {
68 | var span = document.createElement('span');
69 |
70 | if (this.input.current) {
71 | span.style.fontSize = window.getComputedStyle(this.input.current).fontSize;
72 | }
73 |
74 | span.classList.add(styles['inline-edit__tmp-element']);
75 | const value = this.state.value !== null ? this.state.value : this.props.defaultValue;
76 | span.innerHTML = value.replaceAll(' ', ' ');
77 | document.body.appendChild(span);
78 | const width = Math.round(span.getBoundingClientRect().width) + 2;
79 | document.body.removeChild(span);
80 | return `${width}px`;
81 | };
82 |
83 | render() {
84 | if (this.state.editable) {
85 | return (
86 |
97 | );
98 | }
99 |
100 | return (
101 |
81 |
83 |
89 |
81 | > {
11 | let library_dir_path = config::get_library_dir_path(handle);
12 | let folder_path = format!("{}/{}", &library_dir_path, folder_id);
13 |
14 | if Path::new(&folder_path).exists() {
15 | let mut papers: Vec = vec![];
16 | let paper_ids = read_directory_contents(&folder_path);
17 | for paper_id in paper_ids {
18 | if paper_id == "folder_info.dat" {
19 | continue;
20 | }
21 | let paper_path = format!("{}/{}", &folder_path, paper_id);
22 | let err_msg = format!("Failed to decompress \"{}/{}\"", &folder_path, &paper_id);
23 | let contents = decompress(&paper_path).expect(&err_msg);
24 | let json: serde_json::Value = serde_json::from_str(&contents).expect("Unable to parse paper");
25 | papers.push(json);
26 | }
27 | return Some(papers);
28 | }
29 |
30 | None
31 | }
32 |
33 | #[tauri::command]
34 | async fn load_library_folders(handle: AppHandle) -> Option> {
35 | let library_dir_path = config::get_library_dir_path(handle);
36 |
37 | if Path::new(&library_dir_path).exists() {
38 | let mut folders: Vec = vec![];
39 |
40 | let folder_ids = read_directory_contents(&library_dir_path);
41 | for folder_id in folder_ids {
42 | let folder_info_filepath = format!("{}/{}/folder_info.dat", &library_dir_path, folder_id);
43 | let contents = decompress(&folder_info_filepath).unwrap();
44 | let json: serde_json::Value = serde_json::from_str(&contents).expect("Unable to parse folder info file");
45 | folders.push(json);
46 | }
47 | return Some(folders);
48 | }
49 |
50 | None
51 | }
52 |
53 | #[tauri::command]
54 | async fn delete_library_folder(handle: AppHandle, folder_id: String) {
55 | let library_dir_path = config::get_library_dir_path(handle);
56 | let folder_path = format!("{}/{}", &library_dir_path, folder_id);
57 |
58 | let folder_path_buf = PathBuf::from(&folder_path);
59 |
60 | if folder_path_buf.exists() && folder_path_buf.is_dir() {
61 | match fs::remove_dir_all(&folder_path_buf) {
62 | Ok(_) => {},
63 | Err(e) => eprintln!("Error removing folder {}: {:?}", folder_id, e),
64 | }
65 | }
66 | }
67 |
68 | #[tauri::command]
69 | async fn delete_library_paper(handle: AppHandle, folder_id: String, paper_id: String) {
70 | let library_dir_path = config::get_library_dir_path(handle);
71 | let paper_filepath = format!("{}/{}/{}.dat", &library_dir_path, folder_id, paper_id);
72 |
73 | let paper_filepath_buf = PathBuf::from(&paper_filepath);
74 |
75 | if paper_filepath_buf.exists() && paper_filepath_buf.is_file() {
76 | match fs::remove_file(&paper_filepath_buf) {
77 | Ok(_) => {},
78 | Err(e) => eprintln!("Error removing folder {}: {:?}", folder_id, e),
79 | }
80 | }
81 | }
82 |
83 | #[tauri::command]
84 | async fn save_library(handle: AppHandle, library_state: String) {
85 | let json: Value = serde_json::from_str(&library_state).expect("Unable to parse paper");
86 | let library_dir_path = config::get_library_dir_path(handle);
87 |
88 |
89 | // Loop through folders and create each one if it doesn't exist.
90 | if let Some(folders) = json.get("folders").and_then(|f| f.as_array()) {
91 | for folder in folders {
92 | if let Some(folder_id) = folder.get("id").and_then(|id| id.as_str()) {
93 | let folder_path = format!("{}/{}", &library_dir_path, folder_id);
94 | if !Path::new(&folder_path).exists() {
95 | fs::create_dir_all(&folder_path).expect("Unable to create folder");
96 | }
97 |
98 | let folder_info_filepath = format!("{}/folder_info.dat", &folder_path);
99 | compress(&folder_info_filepath, &folder.to_string());
100 | }
101 | }
102 | }
103 |
104 | // Loop through papers and save each one inside its corresponding folder.
105 | if let Some(papers) = json.get("papers").and_then(|p| p.as_array()) {
106 | for paper in papers {
107 | let folder_id = paper.get("folderId").and_then(|id| id.as_str()).unwrap();
108 | let folder_path = format!("{}/{}", &library_dir_path, folder_id);
109 | let paper_id = paper.get("id").and_then(|id| id.as_str()).unwrap();
110 | let paper_filepath = format!("{}/{}.dat", &folder_path, paper_id);
111 | compress(&paper_filepath, &paper.to_string());
112 | }
113 | }
114 | }
115 |
116 | #[tauri::command]
117 | async fn save_settings(handle: AppHandle, settings: String) {
118 | let settings_filepath = config::get_settings_filepath(handle);
119 | compress(&settings_filepath, &settings);
120 | }
121 |
122 | #[tauri::command]
123 | async fn load_settings(handle: AppHandle) -> Option {
124 | let settings_filepath = config::get_settings_filepath(handle);
125 |
126 | if Path::new(&settings_filepath).exists() {
127 | let contents = decompress(&settings_filepath).unwrap();
128 | let json: serde_json::Value = serde_json::from_str(&contents).expect("Unable to load settings");
129 | return Some(json);
130 | }
131 |
132 | None
133 | }
134 |
135 | pub fn get_handlers() -> Box) + Send + Sync> {
136 | Box::new(tauri::generate_handler![
137 | load_library_folders,
138 | load_library_folder_papers,
139 | delete_library_folder,
140 | delete_library_paper,
141 | save_library,
142 | load_settings,
143 | save_settings
144 | ])
145 | }
146 |
--------------------------------------------------------------------------------
/src/components/Paper/components/ExportButton/index.js:
--------------------------------------------------------------------------------
1 | import { downloadDir } from '@tauri-apps/api/path';
2 | import React, { memo } from 'react';
3 | import { connect } from 'react-redux';
4 | import { exportPaper } from '../../../../reducers/library/librarySlice';
5 | import { store } from '../../../../store';
6 | import { FormCheckbox } from '../../../FormCheckbox';
7 | import { FormSelect } from '../../../FormSelect';
8 | import Modal from '../../../Modal';
9 | import { ReactComponent as ExportIcon } from './../../../../assets/icons/export.svg';
10 | import { sanitizeFilename } from './../../../../helpers';
11 | import styles from './styles.module.css';
12 | import classNames from 'classnames';
13 | import InlineEdit from '../../../InlineEdit';
14 |
15 | const ALLOWED_TYPES = ['jpeg', 'png', 'svg'];
16 |
17 | class ExportButton extends React.Component {
18 | constructor(props) {
19 | super();
20 |
21 | this.initialState = {
22 | open: false,
23 | theme: props.isDarkMode ? 'dark' : 'light',
24 | exportType: ALLOWED_TYPES[0],
25 | transparent: false,
26 | location: 'unknown',
27 | filename: props.paper.name,
28 | };
29 |
30 | this.state = this.initialState;
31 |
32 | downloadDir().then((location) => {
33 | this.setState({ location });
34 | });
35 | }
36 |
37 | componentDidUpdate(prevProps) {
38 | if (prevProps.paper.name !== this.props.paper.name) {
39 | this.setState({ filename: this.props.paper.name });
40 | }
41 | }
42 |
43 | toggleOpen = () => {
44 | this.setState({ open: !this.state.open });
45 | };
46 |
47 | export = () => {
48 | store.dispatch(
49 | exportPaper({
50 | id: this.props.paper.id,
51 | theme: this.state.theme,
52 | filename: this.getFilename(),
53 | exportType: this.state.exportType,
54 | transparent: this.state.transparent,
55 | }),
56 | );
57 |
58 | this.setState({ open: false });
59 | };
60 |
61 | updateType = (event) => {
62 | const exportType = event.target.value;
63 |
64 | if (!ALLOWED_TYPES.includes(exportType)) {
65 | return false;
66 | }
67 |
68 | this.setState({ exportType });
69 | };
70 |
71 | setTransparentBackgroundValue = (transparent) => {
72 | this.setState({ transparent });
73 | };
74 |
75 | updateTheme = (event) => {
76 | this.setState({
77 | theme: event.target.value,
78 | });
79 | };
80 |
81 | updateFilename = (filename) => {
82 | this.setState({
83 | filename: filename.replace(new RegExp(`(.(${ALLOWED_TYPES.join('|')}))+`, 'g'), ''),
84 | });
85 | };
86 |
87 | revertFilenameBackToOriginal = () => {
88 | this.setState({ filename: this.props.paper.name });
89 | };
90 |
91 | getFilename = () => {
92 | return `${sanitizeFilename(this.state.filename)}.${this.state.exportType}`;
93 | };
94 |
95 | getFilenameLabel = () => {
96 | if (sanitizeFilename(this.state.filename) === sanitizeFilename(this.props.paper.name)) {
97 | return 'Filename';
98 | }
99 |
100 | return (
101 | <>
102 | Filename (edited)
103 |
107 | revert
108 |
109 |
110 | );
111 | };
112 |
113 | render() {
114 | return (
115 | <>
116 |
130 | Export
131 |
132 | }
133 | >
134 |
174 |
175 | );
176 | }
177 | }
178 |
179 | function mapStateToProps(state) {
180 | const { paperId } = state.paper;
181 | const paper = state.library.papers.find((paper) => paper.id === paperId);
182 | return {
183 | paper,
184 | isDarkMode: state.settings.isDarkMode,
185 | };
186 | }
187 |
188 | export default connect(mapStateToProps)(memo(ExportButton));
189 |
--------------------------------------------------------------------------------
/src/components/Paper/components/HelpButton/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import Modal from '../../../Modal';
3 | import { ReactComponent as HelpIcon } from './../../../../assets/icons/help.svg';
4 | import styles from './styles.module.css';
5 | import { ctrlOrMetaChar } from '../../../../helpers';
6 | import { useSelector } from 'react-redux';
7 |
8 | export default function HelpButton() {
9 | const platform = useSelector((state) => state.settings.platform);
10 | const ctrlOrMeta = ctrlOrMetaChar(platform);
11 |
12 | const [open, setOpen] = useState(false);
13 |
14 | const toggleOpen = () => {
15 | setOpen(!open);
16 | };
17 |
18 | return (
19 | <>
20 |
22 |
23 |
24 |
184 |
185 |
186 | );
187 | }
188 |
--------------------------------------------------------------------------------
/src/components/Paper/helpers.js:
--------------------------------------------------------------------------------
1 | import * as d3 from 'd3-shape';
2 | import { removeDuplicates } from '../../helpers';
3 |
4 | /**
5 | * Rotate a point around another point in 2D.
6 | *
7 | * @param {number} cx - The x value of the pivot point.
8 | * @param {number} cy - The y value of the pivot point.
9 | * @param {number} x - The x value of the point that rotates.
10 | * @param {number} y - The y value of the point that rotates.
11 | * @param {number} angle - The angle between (x,y) and (cx, cy).
12 | * @returns {number[]} The new x and y coordinates.
13 | *
14 | * @see https://stackoverflow.com/a/17411276
15 | */
16 | export function rotateAroundPoint(cx, cy, x, y, angle) {
17 | const radians = (Math.PI / 180) * angle;
18 | const cos = Math.cos(radians);
19 | const sin = Math.sin(radians);
20 | const nx = cos * (x - cx) + sin * (y - cy) + cx;
21 | const ny = cos * (y - cy) - sin * (x - cx) + cy;
22 | return [nx, ny];
23 | }
24 |
25 | /**
26 | * Generate a line of points based on two given points.
27 | *
28 | * @param {array} p1 - The [x,y] coordinates of point 1
29 | * @param {array} p2 - The [x,y] coordinates of point 2
30 | * @returns {array} The array of points representing the line from p1 to p2.
31 | */
32 | export function createLine(p1, p2, scale = 1) {
33 | const [x1, y1] = p1;
34 | const [x2, y2] = p2;
35 |
36 | // If it's just a single dot being drawn, then return a single dot point.
37 | if (x1 === x2 && y1 === y2) {
38 | return [{ x: x1, y: y1 }];
39 | }
40 |
41 | const dx = x2 - x1;
42 | const dy = y2 - y1;
43 | const numPoints = Math.max(Math.abs(dx), Math.abs(dy)) * scale;
44 | const stepX = dx / numPoints;
45 | const stepY = dy / numPoints;
46 | const linePoints = [];
47 | for (let i = 0; i <= numPoints; i++) {
48 | const x = x1 + i * stepX;
49 | const y = y1 + i * stepY;
50 | linePoints.push({ x, y });
51 | }
52 | return linePoints;
53 | }
54 |
55 | /**
56 | * Generate an SVG d-string with smooth curves for a given shape.
57 | *
58 | * @param {object} shape - The shape object.
59 | * @returns {string} An SVG d-string of points.
60 | */
61 | export function getSmoothPath(shape, simplifyPointsTolerance) {
62 | simplifyPointsTolerance = simplifyPointsTolerance || 1.0;
63 | const points =
64 | shape.type === 'freehand'
65 | ? simplifyPoints(shape.points, simplifyPointsTolerance)
66 | : shape.points;
67 |
68 | let line = d3
69 | .line()
70 | .x((d) => d.x)
71 | .y((d) => d.y);
72 |
73 | if (shape.type === 'freehand' && shape.points.length > 1) {
74 | line = line.curve(d3.curveCatmullRom.alpha(0.5));
75 | }
76 |
77 | return line(points);
78 | }
79 |
80 | function simplifyPoints(points, tolerance = 1.0) {
81 | if (points.length <= 2) {
82 | return points;
83 | }
84 |
85 | const line = [points[0], points[points.length - 1]];
86 | let maxDistance = 0;
87 | let maxIndex = 0;
88 |
89 | for (let i = 1; i < points.length - 1; i++) {
90 | const distance = perpendicularDistance(points[i], line);
91 | if (distance > maxDistance) {
92 | maxDistance = distance;
93 | maxIndex = i;
94 | }
95 | }
96 |
97 | if (maxDistance > tolerance) {
98 | const left = points.slice(0, maxIndex + 1);
99 | const right = points.slice(maxIndex);
100 |
101 | const simplifiedLeft = simplifyPoints(left, tolerance);
102 | const simplifiedRight = simplifyPoints(right, tolerance);
103 |
104 | return [...simplifiedLeft.slice(0, -1), ...simplifiedRight];
105 | } else {
106 | return [points[0], points[points.length - 1]];
107 | }
108 | }
109 |
110 | function perpendicularDistance(point, line) {
111 | const [p1, p2] = line;
112 | const dx = p2.x - p1.x;
113 | const dy = p2.y - p1.y;
114 | const numerator = Math.abs(dy * point.x - dx * point.y + p2.x * p1.y - p2.y * p1.x);
115 | const denominator = Math.sqrt(dy ** 2 + dx ** 2);
116 | return numerator / denominator;
117 | }
118 |
119 | /**
120 | * Use the ray-casting algorithm to check if a point is within the boundaries of
121 | * a given list of points.
122 | *
123 | * @param {array} points - The list of points representing a certain shape.
124 | * @param {array} point - The point to check if it is inside.
125 | * @returns {boolean} true if the point is within the boundaries of points.
126 | */
127 | export function isPointInsideShape(points, point) {
128 | let intersections = 0;
129 |
130 | // Iterate over each edge of the shape
131 | for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
132 | const xi = points[i].x;
133 | const yi = points[i].y;
134 | const xj = points[j].x;
135 | const yj = points[j].y;
136 |
137 | // Check if the edge intersects with a horizontal ray from the point
138 | if (
139 | yi > point[1] !== yj > point[1] &&
140 | point[0] < ((xj - xi) * (point[1] - yi)) / (yj - yi) + xi
141 | ) {
142 | intersections++;
143 | }
144 | }
145 |
146 | // If the number of intersections is odd, the point is inside the shape
147 | return intersections % 2 === 1;
148 | }
149 |
150 | /**
151 | * Shift all the points by a certain value.
152 | *
153 | * @param {object[]} points - List of points.
154 | * @param {number} xOffset - The offset that will be added to each x value.
155 | * @param {number} [yOffset] - The offset that will be added to each y value.
156 | * @returns {object[]} New list of points.
157 | */
158 | export function shiftPoints(points, xOffset, yOffset = null) {
159 | if (yOffset === null) {
160 | yOffset = xOffset;
161 | }
162 |
163 | return points.map((point) => ({
164 | x: point.x + xOffset,
165 | y: point.y + yOffset,
166 | }));
167 | }
168 |
169 | /**
170 | * Shift all the points by a certain value inside a shape object.
171 | *
172 | * @param {object} shape - The shape object that contains the points.
173 | * @param {number} xOffset - The offset that will be added to each x value.
174 | * @param {number} [yOffset] - The offset that will be added to each y value.
175 | * @returns {object} New shape object.
176 | */
177 | export function shiftShapePoints(shape, xOffset, yOffset = null) {
178 | if (yOffset === null) {
179 | yOffset = xOffset;
180 | }
181 |
182 | return {
183 | ...shape,
184 | points: shiftPoints(shape.points, xOffset, yOffset),
185 | };
186 | }
187 |
188 | /**
189 | * Create a list of points representing a rectangle given its coordinates.
190 | *
191 | * @param {number} x1 - The top-left x-coordinate.
192 | * @param {number} y2 - The top-left y-coorindate.
193 | * @param {number} x2 - The bottom-right x-coordinate.
194 | * @param {number} y2 - The bottom-right y-coordinate.
195 | * @param {boolean} preserveAspectRatio - Whether it should always be a square.
196 | * @returns {object[]} List of points
197 | */
198 | export function createRectangularShapePoints(x1, y1, x2, y2, preserveAspectRatio = false) {
199 | let height = Math.ceil(Math.abs(y2 - y1));
200 | let width = Math.ceil(Math.abs(x2 - x1));
201 |
202 | if (preserveAspectRatio) {
203 | const maxVal = Math.max(height, width);
204 | height = width = maxVal;
205 | x2 = x2 > x1 ? x1 + width : x1 - width;
206 | y2 = y2 > y1 ? y1 + height : y1 - height;
207 | }
208 |
209 | // convert the 4 sides to shapes
210 | let topBar, rightBar, bottomBar, leftBar;
211 |
212 | // top left to top right
213 | topBar = Array(width)
214 | .fill(Math.min(x1, x2))
215 | .map((value, index) => ({ x: value + index, y: Math.min(y1, y2) }));
216 |
217 | // top right to right bottom
218 | rightBar = Array(height)
219 | .fill(Math.min(y1, y2))
220 | .map((value, index) => ({ x: Math.max(x1, x2), y: value + index }));
221 |
222 | // right bottom to left bottom
223 | bottomBar = Array(width)
224 | .fill(Math.max(x1, x2))
225 | .map((value, index) => ({ x: value - index, y: Math.max(y1, y2) }));
226 |
227 | // left bottom to left top
228 | leftBar = Array(height)
229 | .fill(Math.max(y1, y2))
230 | .map((value, index) => ({ x: Math.min(x1, x2), y: value - index }));
231 |
232 | if (preserveAspectRatio) {
233 | }
234 |
235 | return removeDuplicates([...topBar, ...rightBar, ...bottomBar, ...leftBar]);
236 | }
237 |
238 | /**
239 | * Create a new rectangular selection area shape based on a list of shapes.
240 | *
241 | * @param {object[]} shapes - List of shapes.
242 | * @returns {object} Rectangular selection area shape object.
243 | */
244 | export function createSelectionAreaAroundShapes(shapes) {
245 | let x1 = Infinity;
246 | let y1 = Infinity;
247 | let x2 = -Infinity;
248 | let y2 = -Infinity;
249 | let offset = 20;
250 |
251 | shapes.forEach((shape) => {
252 | shape.points.forEach((point) => {
253 | if (point.x < x1) x1 = point.x;
254 | if (point.x > x2) x2 = point.x;
255 | if (point.y < y1) y1 = point.y;
256 | if (point.y > y2) y2 = point.y;
257 | });
258 | });
259 |
260 | x1 -= offset;
261 | y1 -= offset;
262 | x2 += offset;
263 | y2 += offset;
264 |
265 | return createRectangularShapePoints(x1, y1, x2, y2);
266 | }
267 |
--------------------------------------------------------------------------------
/src/components/Library/index.js:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import dayjs from 'dayjs';
3 | import React from 'react';
4 | import { connect } from 'react-redux';
5 | import { newFolder, newPaperInFolder } from './../../reducers/library/librarySlice';
6 | import { setCurrentPaper } from './../../reducers/paper/paperSlice';
7 | import { to } from './../../reducers/router/routerSlice';
8 | import FolderListItem from './components/FolderListItem';
9 | import PaperListItem from './components/PaperListItem';
10 | import styles from './styles.module.css';
11 | import { SORT_BY, VIEW_MODE } from '../../constants';
12 | import { setSortPapersBy, setViewMode } from '../../reducers/settings/settingsSlice';
13 | import Sortable from '../Sortable';
14 |
15 | class Library extends React.Component {
16 | constructor(props) {
17 | super();
18 |
19 | this.state = {
20 | currentFolderId: props.activeFolderId,
21 | sortBy: props.preferredSortBy,
22 | viewMode: props.preferredViewMode,
23 | };
24 | }
25 |
26 | newFolder = () => {
27 | this.props.dispatch(newFolder());
28 | };
29 |
30 | setCurrentFolder = (folderId) => {
31 | this.setState({
32 | currentFolderId: folderId,
33 | });
34 | };
35 |
36 | sortFolders = (objA, objB) => {
37 | if (objA.name < objB.name) {
38 | return -1;
39 | }
40 |
41 | if (objA.name > objB.name) {
42 | return 1;
43 | }
44 |
45 | return 0;
46 | };
47 |
48 | renderFolders = () => {
49 | const { folders } = this.props.library;
50 | if (folders.length === 0) return null;
51 |
52 | return [...folders]
53 | .sort(this.sortFolders)
54 | .map((folder) => (
55 | this.setCurrentFolder(folder.id)}
60 | onDelete={() => this.setCurrentFolder(null)}
61 | />
62 | ));
63 | };
64 |
65 | openPaper = (paperId) => {
66 | this.props.dispatch(setCurrentPaper(paperId));
67 | this.props.dispatch(
68 | to({
69 | name: 'paper',
70 | args: { paperId },
71 | }),
72 | );
73 | };
74 |
75 | newPaperInFolder = () => {
76 | this.props.dispatch(newPaperInFolder(this.state.currentFolderId));
77 | };
78 |
79 | onSort = (sortBy) => {
80 | this.setState({ sortBy });
81 | this.props.dispatch(setSortPapersBy(sortBy));
82 | };
83 |
84 | onChangeViewMode = (e) => {
85 | const viewMode = parseInt(e.target.value);
86 |
87 | this.setState({ viewMode });
88 | this.props.dispatch(setViewMode(viewMode));
89 |
90 | // We display less options in grid mode for the 'sort by' filter, so
91 | // map the missing values to existing ones.
92 | if (viewMode === VIEW_MODE.GRID) {
93 | if (this.state.sortBy === SORT_BY.CREATED_ASC) {
94 | this.onSort(SORT_BY.CREATED_DESC);
95 | } else if (this.state.sortBy === SORT_BY.LAST_MODIFIED_ASC) {
96 | this.onSort(SORT_BY.LAST_MODIFIED_DESC);
97 | }
98 | }
99 | };
100 |
101 | renderPaperView = (papers) => {
102 | if (this.state.viewMode === VIEW_MODE.LIST) {
103 | return (
104 |
105 |
106 |
157 | );
158 | }
159 |
160 | // Render by default the grid view.
161 | return (
162 |
82 | {palette.map((color) => (
83 |
114 |
130 | )}
131 |
132 | );
133 | }
134 |
135 | Palette.propTypes = {
136 | paperId: PropTypes.string,
137 | onSelectColor: PropTypes.func,
138 | selectedColor: PropTypes.string,
139 | selectedShapes: PropTypes.array,
140 | };
141 |
142 | Palette.defaultProps = {
143 | onSelectColor: () => {},
144 | selectedShapeIndexes: [],
145 | };
146 |
147 | export default memo(Palette);
148 |
--------------------------------------------------------------------------------
/src/utils/paper-export.js:
--------------------------------------------------------------------------------
1 | // Helpers function for the paper exports, called by the libraryReducer.
2 |
3 | import { writeBinaryFile, writeTextFile } from '@tauri-apps/api/fs';
4 | import {
5 | CANVAS_BACKGROUND_COLOR_DARKMODE,
6 | CANVAS_BACKGROUND_COLOR_LIGHTMODE,
7 | DEFAULT_STROKE_COLOR_DARKMODE,
8 | DEFAULT_STROKE_COLOR_LIGHTMODE,
9 | } from '../components/Paper/constants';
10 | import { getSmoothPath } from '../components/Paper/helpers';
11 | import { EXPORTS_DIR } from '../constants';
12 |
13 | // Space around each side inside the exports.
14 | const PADDING = 25;
15 |
16 | // =============================================================================
17 | // Helper functions
18 | // =============================================================================
19 |
20 | function getShapesBBox(shapes) {
21 | // Calculate the bounding box of all the shapes
22 | const bbox = shapes.reduce(
23 | (acc, shape) => {
24 | shape.points.forEach(({ x, y }) => {
25 | acc.x1 = Math.min(acc.x1, x);
26 | acc.y1 = Math.min(acc.y1, y);
27 | acc.x2 = Math.max(acc.x2, x);
28 | acc.y2 = Math.max(acc.y2, y);
29 | });
30 | return acc;
31 | },
32 | { x1: Infinity, y1: Infinity, x2: -Infinity, y2: -Infinity },
33 | );
34 | bbox.width = bbox.x2 - bbox.x1;
35 | bbox.height = bbox.y2 - bbox.y1;
36 | return bbox;
37 | }
38 |
39 | function normalizeShapePoints(points, bbox) {
40 | // Move the origin to (0,0) by adjusting the coordinates of each point based
41 | // on the bounding box.
42 | return points.map(({ x, y }) => ({
43 | x: x - bbox.x1 + PADDING,
44 | y: y - bbox.y1 + PADDING,
45 | }));
46 | }
47 |
48 | // =============================================================================
49 | // Main export functions
50 | // =============================================================================
51 | export async function svgExport(paper, filename, payload) {
52 | const bbox = getShapesBBox(paper.shapes);
53 |
54 | const svg = document.createElement('svg');
55 | const g = document.createElement('g');
56 |
57 | svg.setAttribute('version', '1.0');
58 | svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
59 | svg.setAttribute('width', bbox.width + PADDING * 2);
60 | svg.setAttribute('height', bbox.height + PADDING * 2);
61 | svg.appendChild(g);
62 |
63 | paper.shapes.forEach((shape) => {
64 | let shapeColor = shape.color;
65 |
66 | // Always use a black stroke color.
67 | if ([DEFAULT_STROKE_COLOR_DARKMODE, DEFAULT_STROKE_COLOR_LIGHTMODE].includes(shapeColor)) {
68 | shapeColor = DEFAULT_STROKE_COLOR_LIGHTMODE;
69 | }
70 |
71 | const shapePoints = normalizeShapePoints(shape.points, bbox);
72 |
73 | const path = document.createElement('path');
74 | path.setAttribute('d', getSmoothPath({ ...shape, points: shapePoints }));
75 | path.setAttribute('fill', 'transparent');
76 | path.setAttribute('stroke-linecap', 'round');
77 | path.setAttribute('stroke-linejoin', 'round');
78 | path.setAttribute('stroke', shapeColor);
79 | path.setAttribute('stroke-width', shape.linewidth);
80 |
81 | g.appendChild(path);
82 | });
83 |
84 | await writeTextFile(filename, svg.outerHTML, { dir: EXPORTS_DIR });
85 | }
86 |
87 | export function imageExport(paper, filename, payload) {
88 | return new Promise((resolve) => {
89 | const { theme, exportType, transparent } = payload;
90 | const exportDarkMode = theme === 'dark';
91 | const isTransparentPNG = exportType === 'png' && transparent;
92 | const bbox = getShapesBBox(paper.shapes);
93 |
94 | var canvas = document.createElement('canvas');
95 | var ctx = canvas.getContext('2d');
96 |
97 | canvas.width = bbox.width + PADDING * 2;
98 | canvas.height = bbox.height + PADDING * 2;
99 | ctx.clearRect(0, 0, canvas.width, canvas.height);
100 |
101 | // Always add a background, unless its transparent PNG or SVG.
102 | if (!isTransparentPNG && exportType !== 'svg') {
103 | ctx.fillStyle = exportDarkMode
104 | ? CANVAS_BACKGROUND_COLOR_DARKMODE
105 | : CANVAS_BACKGROUND_COLOR_LIGHTMODE;
106 | ctx.fillRect(0, 0, canvas.width, canvas.height);
107 | }
108 |
109 | // Draw the shapes on the canvas.
110 | paper.shapes.forEach((shape) => {
111 | let shapeColor = shape.color;
112 | if ([DEFAULT_STROKE_COLOR_DARKMODE, DEFAULT_STROKE_COLOR_LIGHTMODE].includes(shapeColor)) {
113 | if (isTransparentPNG) {
114 | shapeColor = DEFAULT_STROKE_COLOR_LIGHTMODE;
115 | } else {
116 | shapeColor = exportDarkMode
117 | ? DEFAULT_STROKE_COLOR_DARKMODE
118 | : DEFAULT_STROKE_COLOR_LIGHTMODE;
119 | }
120 | }
121 |
122 | const shapePoints = normalizeShapePoints(shape.points, bbox);
123 |
124 | if (shapePoints.length === 1) {
125 | // draw a single dot
126 | const { x, y } = shapePoints[0];
127 | const radius = shape.linewidth / 2;
128 | ctx.beginPath();
129 | ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
130 | ctx.fillStyle = shapeColor;
131 | ctx.fill();
132 | } else {
133 | // draw a whole shape
134 | ctx.lineWidth = shape.linewidth;
135 | ctx.strokeStyle = shapeColor;
136 | ctx.lineCap = 'round';
137 | ctx.lineJoin = 'round';
138 |
139 | const adjustedPath = getSmoothPath({ ...shape, points: shapePoints });
140 | ctx.stroke(new Path2D(adjustedPath));
141 | }
142 | });
143 |
144 | const mimeType = `image/${exportType}`;
145 | canvas.toBlob((blob) => {
146 | const fileReader = new FileReader();
147 | fileReader.readAsArrayBuffer(blob);
148 | fileReader.onload = async () => {
149 | const fileContents = new Uint8Array(fileReader.result);
150 | await writeBinaryFile(filename, fileContents, { dir: EXPORTS_DIR });
151 | resolve();
152 | };
153 | }, mimeType);
154 | });
155 | }
156 |
--------------------------------------------------------------------------------
/src-tauri/src/commands.rs:
--------------------------------------------------------------------------------
1 | use tauri::AppHandle;
2 | use std::path::{Path, PathBuf};
3 | use crate::config;
4 | use crate::file::{compress, decompress, read_directory_contents};
5 | use std::fs;
6 | use serde_json::Value;
7 |
8 |
9 | #[tauri::command]
10 | async fn load_library_folder_papers(handle: AppHandle, folder_id: String) -> Option handleSelectColor(color)}
86 | className={classNames(styles['color-palette__color'], {
87 | [styles['color-palette__color-active']]: color === selectedColor && !customColor,
88 | })}
89 | style={{ backgroundColor: color }}
90 | />
91 | ))}
92 |
93 |
94 |
111 |
112 | {colorSelectorToolVisible && (
113 |
108 |
110 |
115 |
129 |
116 |
123 | enableColorSelectorTool(false)}
119 | >
120 |
122 |
135 |
138 | Location
136 | {this.state.location}
137 |
139 |
144 | {this.state.exportType !== 'svg' && (
145 | {this.getFilenameLabel()}
140 |
141 |
143 |
146 |
154 | )}
155 | Theme
147 |
148 |
149 |
150 |
151 |
152 |
153 |
156 |
165 | {this.state.exportType === 'png' && (
166 | Type
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
167 |
172 | )}
173 | | Key sequence | 26 |Description | 27 |
|---|---|
|
32 |
33 | f
34 |
35 | |
36 | Freehand drawing | 37 |
|
40 |
41 | e
42 |
43 | |
44 | Draw ellipse | 45 |
|
48 |
49 | r
50 |
51 | |
52 | Draw rectangle | 53 |
|
56 |
57 | a
58 |
59 | |
60 | Draw arrow | 61 |
|
64 |
65 | Spacebar
66 |
67 | |
68 | Pan around (hold spacebar) | 69 |
|
72 |
73 | {ctrlOrMeta} + e
74 |
75 | |
76 | Eraser | 77 |
|
80 |
81 | {ctrlOrMeta} + x
82 |
83 | |
84 | Clear canvas | 85 |
|
88 |
89 | {ctrlOrMeta} + z
90 |
91 | |
92 | Undo | 93 |
|
96 |
97 | {ctrlOrMeta} + shift + z
98 |
99 | |
100 | Redo | 101 |
|
104 |
105 | {ctrlOrMeta} + +
106 |
107 | |
108 | Zoom in | 109 |
|
112 |
113 | {ctrlOrMeta} + -
114 |
115 | |
116 | Zoom out | 117 |
|
120 |
121 | {ctrlOrMeta} + 0
122 |
123 | |
124 | Reset zoom level | 125 |
|
128 |
129 | ]
130 |
131 | |
132 | Increase eraser size | 133 |
|
136 |
137 | [
138 |
139 | |
140 | Decrease eraser size | 141 |
|
144 |
145 | {ctrlOrMeta} + c
146 |
147 | |
148 | Copy selected shape | 149 |
|
152 |
153 | {ctrlOrMeta} + v
154 |
155 | |
156 | Paste selected shape | 157 |
|
160 |
161 | Delete or Backspace
162 |
163 | |
164 | Delete selected shape | 165 |
|
168 |
169 | Shift
170 |
171 | |
172 | Preserve aspect ratio while drawing shapes | 173 |
|
176 |
177 | {ctrlOrMeta} + q
178 |
179 | |
180 | Quit application | 181 |
| # | 108 |
109 | |
118 |
119 | |
128 |
129 | |
138 | 139 | 142 | | 143 |
|---|
163 |
184 | );
185 | };
186 |
187 | renderPapers = () => {
188 | const folder = this.props.library.folders.find(
189 | (folder) => folder.id === this.state.currentFolderId,
190 | );
191 | if (!folder) return null;
192 |
193 | let papers = this.props.library.papers.filter(
194 | (paper) => paper.folderId === this.state.currentFolderId,
195 | );
196 |
197 | switch (this.state.sortBy) {
198 | case SORT_BY.NAME_AZ:
199 | papers = papers.sort((a, b) => {
200 | const nameA = a.name.toLowerCase();
201 | const nameB = b.name.toLowerCase();
202 | if (nameA < nameB) {
203 | return -1;
204 | } else if (nameA > nameB) {
205 | return 1;
206 | } else {
207 | return 0;
208 | }
209 | });
210 | break;
211 |
212 | case SORT_BY.NAME_ZA:
213 | papers = papers.sort((a, b) => {
214 | const nameA = a.name.toLowerCase();
215 | const nameB = b.name.toLowerCase();
216 | if (nameA < nameB) {
217 | return 1;
218 | } else if (nameA > nameB) {
219 | return -1;
220 | }
221 |
222 | return 0;
223 | });
224 | break;
225 |
226 | case SORT_BY.CREATED_ASC:
227 | papers = papers.sort((a, b) => {
228 | if (dayjs(a.createdAt).isBefore(dayjs(b.createdAt))) {
229 | return -1;
230 | } else if (dayjs(a.createdAt).isAfter(dayjs(b.createdAt))) {
231 | return 1;
232 | }
233 |
234 | return 0;
235 | });
236 | break;
237 |
238 | case SORT_BY.CREATED_DESC:
239 | papers = papers.sort((a, b) => {
240 | if (dayjs(a.createdAt).isBefore(dayjs(b.createdAt))) {
241 | return 1;
242 | } else if (dayjs(a.createdAt).isAfter(dayjs(b.createdAt))) {
243 | return -1;
244 | }
245 |
246 | return 0;
247 | });
248 | break;
249 |
250 | case SORT_BY.LAST_MODIFIED_ASC:
251 | papers = papers.sort((a, b) => {
252 | if (dayjs(a.updatedAt).isBefore(dayjs(b.updatedAt))) {
253 | return -1;
254 | } else if (dayjs(a.updatedAt).isAfter(dayjs(b.updatedAt))) {
255 | return 1;
256 | }
257 |
258 | return 0;
259 | });
260 | break;
261 |
262 | case SORT_BY.LAST_MODIFIED_DESC:
263 | default:
264 | papers = papers.sort((a, b) => {
265 | if (dayjs(a.updatedAt).isBefore(dayjs(b.updatedAt))) {
266 | return 1;
267 | } else if (dayjs(a.updatedAt).isAfter(dayjs(b.updatedAt))) {
268 | return -1;
269 | }
270 |
271 | return 0;
272 | });
273 | break;
274 | }
275 |
276 | return (
277 |
164 |
173 |
174 | {papers.map((paper) => (
175 |
165 |
172 |
169 | new paper
170 |
171 |
176 | this.openPaper(paper.id)}
179 | viewMode={this.state.viewMode}
180 | />
181 |
182 | ))}
183 |
278 |
316 | );
317 | };
318 |
319 | renderVersion = () => {
320 | if (!this.props.appVersion) return null;
321 |
322 | return
279 |
314 | {this.renderPaperView(papers)}
315 | 280 | {folder.name} 281 |
282 |
283 | {this.state.viewMode === VIEW_MODE.GRID && (
284 |
313 |
285 |
286 |
297 |
298 | )}
299 |
300 |
301 |
302 |
311 |
312 | Pointless v{this.props.appVersion}
;
323 | };
324 |
325 | render() {
326 | return (
327 |
328 |
354 | );
355 | }
356 | }
357 |
358 | function mapStateToProps(state) {
359 | return {
360 | library: state.library,
361 | activeFolderId: state.router.current.args.activeFolderId,
362 | appVersion: state.settings.appVersion,
363 | preferredSortBy: state.settings.sortPapersBy,
364 | preferredViewMode: state.settings.viewMode,
365 | };
366 | }
367 |
368 | export default connect(mapStateToProps)(Library);
369 |
--------------------------------------------------------------------------------
/src/components/Paper/components/Toolbar/index.js:
--------------------------------------------------------------------------------
1 | import styles from './styles.module.css';
2 | import classNames from 'classnames';
3 | import { LINEWIDTH, MODE } from './../../constants';
4 |
5 | import { ReactComponent as PanIcon } from './../../../../assets/icons/move.svg';
6 | import { ReactComponent as EraserIcon } from './../../../../assets/icons/eraser.svg';
7 | import { ReactComponent as SelectIcon } from './../../../../assets/icons/select.svg';
8 | import { ReactComponent as MaximizeIcon } from './../../../../assets/icons/maximize.svg';
9 | import { ReactComponent as ZoomInIcon } from './../../../../assets/icons/zoom-in.svg';
10 | import { ReactComponent as ZoomOutIcon } from './../../../../assets/icons/zoom-out.svg';
11 | import { ReactComponent as UndoIcon } from './../../../../assets/icons/undo.svg';
12 | import { ReactComponent as RedoIcon } from './../../../../assets/icons/redo.svg';
13 | import { ReactComponent as HomeIcon } from './../../../../assets/icons/home.svg';
14 | import { ReactComponent as TrashcanIcon } from './../../../../assets/icons/trashcan.svg';
15 | import { ReactComponent as FreehandToolIcon } from './../../../../assets/icons/tool-freehand.svg';
16 | import { ReactComponent as EllipseToolIcon } from './../../../../assets/icons/tool-ellipse.svg';
17 | import { ReactComponent as RectangleToolIcon } from './../../../../assets/icons/tool-rectangle.svg';
18 | import { ReactComponent as ArrowToolIcon } from './../../../../assets/icons/tool-arrow.svg';
19 | import Tooltip from 'rc-tooltip';
20 | import { useSelector } from 'react-redux';
21 | import { memo } from 'react';
22 | import { ctrlOrMetaChar } from '../../../../helpers';
23 |
24 | function Toolbar(props) {
25 | const platform = useSelector((state) => state.settings.platform);
26 | const ctrlOrMeta = ctrlOrMetaChar(platform);
27 |
28 | return (
29 | <>
30 |
329 |
338 |
339 |
330 |
335 | My folders
331 | 334 |{this.renderFolders()}
336 | {this.renderVersion()}
337 |
344 | {this.state.currentFolderId ? (
345 | this.renderPapers()
346 | ) : (
347 | <>
348 |
353 | Nothing to see here
349 | Create or select a folder on the left side 350 | 351 | )} 352 |
31 |
32 |
props.onLinewidthChange(LINEWIDTH.SMALL)}
34 | className={classNames(
35 | styles['toolbar__item'],
36 | styles['toolbar__item__linewidth'],
37 | styles['toolbar__item__linewidth-small'],
38 | {
39 | [styles['toolbar__item-disabled']]: !props.isDrawMode,
40 | [styles['toolbar__item-active']]: props.linewidth === LINEWIDTH.SMALL,
41 | },
42 | )}
43 | />
44 |
45 |
46 |
props.onLinewidthChange(LINEWIDTH.MEDIUM)}
48 | className={classNames(
49 | styles['toolbar__item'],
50 | styles['toolbar__item__linewidth'],
51 | styles['toolbar__item__linewidth-medium'],
52 | {
53 | [styles['toolbar__item-disabled']]: !props.isDrawMode,
54 | [styles['toolbar__item-active']]: props.linewidth === LINEWIDTH.MEDIUM,
55 | },
56 | )}
57 | />
58 |
59 |
60 | .
675 |
--------------------------------------------------------------------------------
props.onLinewidthChange(LINEWIDTH.LARGE)}
62 | className={classNames(
63 | styles['toolbar__item'],
64 | styles['toolbar__item__linewidth'],
65 | styles['toolbar__item__linewidth-large'],
66 | {
67 | [styles['toolbar__item-disabled']]: !props.isDrawMode,
68 | [styles['toolbar__item-active']]: props.linewidth === LINEWIDTH.LARGE,
69 | },
70 | )}
71 | />
72 |
73 |
74 |
78 | freehand
79 |
94 |
98 | ellipse
99 |
114 |
118 | rectangle
119 |
134 |
138 | arrow
139 |
154 |
155 |
159 | eraser
160 |
175 |
179 | selection
180 |
195 |
199 | toggle pan mode
200 |
216 |
217 |
226 |
227 |
231 | undo
232 |
247 |
251 | redo
252 |
267 |
268 |
80 | f
81 |
82 |
83 | }
84 | >
85 |
91 |
93 |
100 | e
101 |
102 |
103 | }
104 | >
105 |
111 |
113 |
120 | r
121 |
122 |
123 | }
124 | >
125 |
131 |
133 |
140 | a
141 |
142 |
143 | }
144 | >
145 |
151 |
153 |
161 | {ctrlOrMeta} + e
162 |
163 |
164 | }
165 | >
166 |
172 |
174 |
181 | {ctrlOrMeta} + s
182 |
183 |
184 | }
185 | >
186 |
192 |
194 |
201 | space
202 |
203 |
204 | }
205 | >
206 |
213 |
215 |
223 |
225 |
233 | {ctrlOrMeta} + z
234 |
235 |
236 | }
237 | >
238 |
244 |
246 |
253 | {ctrlOrMeta} + shift + z
254 |
255 |
256 | }
257 | >
258 |
264 |
266 |
269 |
273 | reset zoom level
274 |
290 |
294 | zoom in
295 |
310 |
314 | zoom out
315 |
330 |
334 | clear canvas
335 |
354 |
355 |
356 | );
357 | }
358 |
359 | export default memo(Toolbar);
360 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | GNU GENERAL PUBLIC LICENSE
2 | Version 3, 29 June 2007
3 |
4 | Copyright (C) 2007 Free Software Foundation, Inc.
275 | {ctrlOrMeta} + 0
276 |
277 |
278 | }
279 | >
280 |
287 |
289 |
296 | +
297 |
298 |
299 | }
300 | >
301 |
307 |
309 |
316 | -
317 |
318 |
319 | }
320 | >
321 |
327 |
329 |
336 | {ctrlOrMeta} + x
337 |
338 |
339 | }
340 | >
341 |
351 |
353 |