mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-21 09:38:01 +02:00
303 lines
8.9 KiB
TypeScript
303 lines
8.9 KiB
TypeScript
const React = require('react');
|
|
import { _ } from '@joplin/lib/locale';
|
|
import Logger from '@joplin/utils/Logger';
|
|
import Setting from '@joplin/lib/models/Setting';
|
|
import shim from '@joplin/lib/shim';
|
|
import { themeStyle } from '@joplin/lib/theme';
|
|
import { Theme } from '@joplin/lib/themes/type';
|
|
import { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { Alert, BackHandler } from 'react-native';
|
|
import { WebViewMessageEvent } from 'react-native-webview';
|
|
import ExtendedWebView, { WebViewControl } from '../../ExtendedWebView';
|
|
import { clearAutosave, writeAutosave } from './autosave';
|
|
import { LocalizedStrings } from './js-draw/types';
|
|
|
|
const logger = Logger.create('ImageEditor');
|
|
|
|
type OnSaveCallback = (svgData: string)=> void;
|
|
type OnCancelCallback = ()=> void;
|
|
type LoadInitialSVGCallback = ()=> Promise<string>;
|
|
|
|
interface Props {
|
|
themeId: number;
|
|
loadInitialSVGData: LoadInitialSVGCallback|null;
|
|
onSave: OnSaveCallback;
|
|
onExit: OnCancelCallback;
|
|
}
|
|
|
|
const useCss = (editorTheme: Theme) => {
|
|
return useMemo(() => {
|
|
// Ensure we have contrast between the background and selection. Some themes
|
|
// have the same backgroundColor and selectionColor2. (E.g. Aritim Dark)
|
|
let selectionBackgroundColor = editorTheme.selectedColor2;
|
|
if (selectionBackgroundColor === editorTheme.backgroundColor) {
|
|
selectionBackgroundColor = editorTheme.selectedColor;
|
|
}
|
|
|
|
return `
|
|
:root .imageEditorContainer {
|
|
--background-color-1: ${editorTheme.backgroundColor};
|
|
--foreground-color-1: ${editorTheme.color};
|
|
--background-color-2: ${editorTheme.backgroundColor3};
|
|
--foreground-color-2: ${editorTheme.color3};
|
|
--background-color-3: ${editorTheme.raisedBackgroundColor};
|
|
--foreground-color-3: ${editorTheme.raisedColor};
|
|
|
|
--selection-background-color: ${editorTheme.backgroundColorHover3};
|
|
--selection-foreground-color: ${editorTheme.color3};
|
|
--primary-action-foreground-color: ${editorTheme.color4};
|
|
|
|
--primary-shadow-color: ${editorTheme.colorFaded};
|
|
|
|
width: 100vw;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body, html {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Hide the scrollbar. See scrollbar accessibility concerns
|
|
(https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width#accessibility_concerns)
|
|
for why this isn't done in js-draw itself. */
|
|
.toolbar-tool-row::-webkit-scrollbar {
|
|
display: none;
|
|
height: 0;
|
|
}
|
|
|
|
/* Hide the save/close icons on small screens. This isn't done in the upstream
|
|
js-draw repository partially beause it isn't as well localized as Joplin
|
|
(icons can be used to suggest the meaning of a button when a translation is
|
|
unavailable). */
|
|
.toolbar-edge-toolbar:not(.one-row) .toolwidget-tag--save .toolbar-icon,
|
|
.toolbar-edge-toolbar:not(.one-row) .toolwidget-tag--exit .toolbar-icon {
|
|
display: none;
|
|
}
|
|
`;
|
|
}, [editorTheme]);
|
|
};
|
|
|
|
const ImageEditor = (props: Props) => {
|
|
const editorTheme: Theme = themeStyle(props.themeId);
|
|
const webviewRef: MutableRefObject<WebViewControl>|null = useRef(null);
|
|
const [imageChanged, setImageChanged] = useState(false);
|
|
|
|
const onRequestCloseEditor = useCallback((promptIfUnsaved: boolean) => {
|
|
const discardChangesAndClose = async () => {
|
|
await clearAutosave();
|
|
props.onExit();
|
|
};
|
|
|
|
if (!imageChanged || !promptIfUnsaved) {
|
|
void discardChangesAndClose();
|
|
return true;
|
|
}
|
|
|
|
Alert.alert(
|
|
_('Save changes?'), _('This drawing may have unsaved changes.'), [
|
|
{
|
|
text: _('Discard changes'),
|
|
onPress: discardChangesAndClose,
|
|
style: 'destructive',
|
|
},
|
|
{
|
|
text: _('Save changes'),
|
|
onPress: () => {
|
|
// saveDrawing calls props.onSave(...) which may close the
|
|
// editor.
|
|
webviewRef.current.injectJS('window.editorControl.saveThenExit()');
|
|
},
|
|
},
|
|
],
|
|
);
|
|
return true;
|
|
}, [webviewRef, props.onExit, imageChanged]);
|
|
|
|
useEffect(() => {
|
|
const hardwareBackPressListener = () => {
|
|
onRequestCloseEditor(true);
|
|
return true;
|
|
};
|
|
BackHandler.addEventListener('hardwareBackPress', hardwareBackPressListener);
|
|
|
|
return () => {
|
|
BackHandler.removeEventListener('hardwareBackPress', hardwareBackPressListener);
|
|
};
|
|
}, [onRequestCloseEditor]);
|
|
|
|
const css = useCss(editorTheme);
|
|
const html = useMemo(() => `
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
|
|
|
|
<style>
|
|
${css}
|
|
</style>
|
|
</head>
|
|
<body></body>
|
|
</html>
|
|
`, [css]);
|
|
|
|
// A set of localization overrides (Joplin is better localized than js-draw).
|
|
// All localizable strings (some unused?) can be found at
|
|
// https://github.com/personalizedrefrigerator/js-draw/blob/main/.github/ISSUE_TEMPLATE/translation-js-draw-new.yml
|
|
const localizedStrings: LocalizedStrings = useMemo(() => ({
|
|
save: _('Save'),
|
|
close: _('Close'),
|
|
undo: _('Undo'),
|
|
redo: _('Redo'),
|
|
}), []);
|
|
|
|
const injectedJavaScript = useMemo(() => `
|
|
window.onerror = (message, source, lineno) => {
|
|
window.ReactNativeWebView.postMessage(
|
|
"error: " + message + " in file://" + source + ", line " + lineno
|
|
);
|
|
};
|
|
|
|
const setImageHasChanges = (hasChanges) => {
|
|
window.ReactNativeWebView.postMessage(
|
|
JSON.stringify({
|
|
action: 'set-image-has-changes',
|
|
data: hasChanges,
|
|
}),
|
|
);
|
|
};
|
|
|
|
window.updateEditorTemplate = (templateData) => {
|
|
window.ReactNativeWebView.postMessage(
|
|
JSON.stringify({
|
|
action: 'set-image-template-data',
|
|
data: templateData,
|
|
}),
|
|
);
|
|
};
|
|
|
|
const notifyReadyToLoadSVG = () => {
|
|
window.ReactNativeWebView.postMessage(
|
|
JSON.stringify({
|
|
action: 'ready-to-load-data',
|
|
})
|
|
);
|
|
};
|
|
|
|
const saveDrawing = async (drawing, isAutosave) => {
|
|
window.ReactNativeWebView.postMessage(
|
|
JSON.stringify({
|
|
action: isAutosave ? 'autosave' : 'save',
|
|
data: drawing.outerHTML,
|
|
}),
|
|
);
|
|
};
|
|
|
|
const closeEditor = (promptIfUnsaved) => {
|
|
window.ReactNativeWebView.postMessage(JSON.stringify({
|
|
action: 'close',
|
|
promptIfUnsaved,
|
|
}));
|
|
};
|
|
|
|
try {
|
|
if (window.editorControl === undefined) {
|
|
${shim.injectedJs('svgEditorBundle')}
|
|
|
|
window.editorControl = svgEditorBundle.createJsDrawEditor(
|
|
{
|
|
saveDrawing,
|
|
closeEditor,
|
|
updateEditorTemplate,
|
|
setImageHasChanges,
|
|
},
|
|
${JSON.stringify(Setting.value('imageeditor.jsdrawToolbar'))},
|
|
${JSON.stringify(Setting.value('locale'))},
|
|
${JSON.stringify(localizedStrings)},
|
|
);
|
|
|
|
// Start loading the SVG file (if present) after loading the editor.
|
|
// This shows the user that progress is being made (loading large SVGs
|
|
// from disk into memory can take several seconds).
|
|
notifyReadyToLoadSVG();
|
|
}
|
|
} catch(e) {
|
|
window.ReactNativeWebView.postMessage(
|
|
'error: ' + e.message + ': ' + JSON.stringify(e)
|
|
);
|
|
}
|
|
true;
|
|
`, [localizedStrings]);
|
|
|
|
useEffect(() => {
|
|
webviewRef.current?.injectJS(`
|
|
if (window.editorControl) {
|
|
window.editorControl.onThemeUpdate();
|
|
}
|
|
`);
|
|
}, [editorTheme]);
|
|
|
|
const onReadyToLoadData = useCallback(async () => {
|
|
const initialSVGData = await props.loadInitialSVGData?.() ?? '';
|
|
|
|
// It can take some time for initialSVGData to be transferred to the WebView.
|
|
// Thus, do so after the main content has been loaded.
|
|
webviewRef.current.injectJS(`(async () => {
|
|
if (window.editorControl) {
|
|
const initialSVGData = ${JSON.stringify(initialSVGData)};
|
|
const initialTemplateData = ${JSON.stringify(Setting.value('imageeditor.imageTemplate'))};
|
|
|
|
editorControl.loadImageOrTemplate(initialSVGData, initialTemplateData);
|
|
}
|
|
})();`);
|
|
}, [webviewRef, props.loadInitialSVGData]);
|
|
|
|
const onMessage = useCallback(async (event: WebViewMessageEvent) => {
|
|
const data = event.nativeEvent.data;
|
|
if (data.startsWith('error:')) {
|
|
logger.error('ImageEditor:', data);
|
|
return;
|
|
}
|
|
|
|
const json = JSON.parse(data);
|
|
if (json.action === 'save') {
|
|
await clearAutosave();
|
|
props.onSave(json.data);
|
|
} else if (json.action === 'autosave') {
|
|
await writeAutosave(json.data);
|
|
} else if (json.action === 'save-toolbar') {
|
|
Setting.setValue('imageeditor.jsdrawToolbar', json.data);
|
|
} else if (json.action === 'close') {
|
|
onRequestCloseEditor(json.promptIfUnsaved);
|
|
} else if (json.action === 'ready-to-load-data') {
|
|
void onReadyToLoadData();
|
|
} else if (json.action === 'set-image-has-changes') {
|
|
setImageChanged(json.data);
|
|
} else if (json.action === 'set-image-template-data') {
|
|
Setting.setValue('imageeditor.imageTemplate', json.data);
|
|
} else {
|
|
logger.error('Unknown action,', json.action);
|
|
}
|
|
}, [props.onSave, onRequestCloseEditor, onReadyToLoadData]);
|
|
|
|
const onError = useCallback((event: any) => {
|
|
logger.error('ImageEditor: WebView error: ', event);
|
|
}, []);
|
|
|
|
return (
|
|
<ExtendedWebView
|
|
themeId={props.themeId}
|
|
html={html}
|
|
injectedJavaScript={injectedJavaScript}
|
|
onMessage={onMessage}
|
|
onError={onError}
|
|
ref={webviewRef}
|
|
webviewInstanceId={'image-editor-js-draw'}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default ImageEditor;
|