Skip to content
Snippets Groups Projects
Commit 44e896a0 authored by Samuel Jugnet's avatar Samuel Jugnet
Browse files

Update mirador, package.json, and 2 more files...

parent cd9b05b3
No related branches found
No related tags found
1 merge request!10Draft: MigratingAnnotationCreation to MUI5.
Pipeline #1691 failed
mirador @ 1a9ef869
Subproject commit 2a11c195b2274ae892e01df86c60e1903fd266a1 Subproject commit 1a9ef869f8868c6983ba5e465da63598b14d2d8e
...@@ -31,6 +31,7 @@ ...@@ -31,6 +31,7 @@
"draft-js-import-html": "^1.4.1", "draft-js-import-html": "^1.4.1",
"paper": "^0.12.11", "paper": "^0.12.11",
"react-color": "^2.18.1", "react-color": "^2.18.1",
"react-konva": ">=17.0.1-3 <18.0.0",
"react-resize-observer": "^1.1.1" "react-resize-observer": "^1.1.1"
}, },
"peerDependencies": { "peerDependencies": {
......
...@@ -13,6 +13,10 @@ import ...@@ -13,6 +13,10 @@ import
FreeformPathTool, FreeformPathTool,
} }
from '@psychobolt/react-paperjs-editor'; from '@psychobolt/react-paperjs-editor';
import { Stage, Layer, Star, Text } from 'react-konva';
import { Point } from 'paper'; import { Point } from 'paper';
import flatten from 'lodash/flatten'; import flatten from 'lodash/flatten';
import EditTool from './EditTool'; import EditTool from './EditTool';
...@@ -25,6 +29,7 @@ class AnnotationDrawing extends Component { ...@@ -25,6 +29,7 @@ class AnnotationDrawing extends Component {
super(props); super(props);
this.paper = null; this.paper = null;
this.konvas = null;
this.getDisplayProps = this.getDisplayProps.bind(this); this.getDisplayProps = this.getDisplayProps.bind(this);
this.onPaperResize = this.onPaperResize.bind(this); this.onPaperResize = this.onPaperResize.bind(this);
this.paperDidMount = this.paperDidMount.bind(this); this.paperDidMount = this.paperDidMount.bind(this);
...@@ -159,42 +164,65 @@ class AnnotationDrawing extends Component { ...@@ -159,42 +164,65 @@ class AnnotationDrawing extends Component {
break; break;
} }
console.log('rendering konva');
// replace with konva
return ( return (
<div <Stage width={1920} height={1080}
style={{ style={{
height: '100%', left: 0, position: 'absolute', top: 0, width: '100%', height: '100%', left: 0, position: 'absolute', top: 0, width: '100%',
}} }}
> >
<PaperContainer <Layer>
canvasProps={canvasProps}
viewProps={viewProps}
onMount={this.paperDidMount} </Layer>
> </Stage>
{renderWithPaperScope((paper) => {
const paths = flatten(paper.project.layers.map((layer) => (
flatten(mapChildren(layer)).map((aPath) => aPath)
)));
if (svg && paths.length === 0) {
paper.project.importSVG(svg);
}
paper.settings.handleSize = 10; // eslint-disable-line no-param-reassign
paper.settings.hitTolerance = 10; // eslint-disable-line no-param-reassign
return (
<ActiveTool
onPathAdd={this.addPath}
pathProps={{
fillColor,
strokeColor,
strokeWidth: strokeWidth / paper.view.zoom,
}}
paper={paper}
/>
);
})}
</PaperContainer>
<ResizeObserver onResize={this.onPaperResize} />
</div>
); );
// return (
// <div
// style={{
// height: '100%', left: 0, position: 'absolute', top: 0, width: '100%',
// }}
// >
// <PaperContainer
// canvasProps={canvasProps}
// viewProps={viewProps}
// onMount={this.paperDidMount}
// >
// {renderWithPaperScope((paper) => {
// const paths = flatten(paper.project.layers.map((layer) => (
// flatten(mapChildren(layer)).map((aPath) => aPath)
// )));
// if (svg && paths.length === 0) {
// paper.project.importSVG(svg);
// }
// paper.settings.handleSize = 10; // eslint-disable-line no-param-reassign
// paper.settings.hitTolerance = 10; // eslint-disable-line no-param-reassign
// return (
// <ActiveTool
// onPathAdd={this.addPath}
// pathProps={{
// fillColor,
// strokeColor,
// strokeWidth: strokeWidth / paper.view.zoom,
// }}
// paper={paper}
// />
// );
// })}
// </PaperContainer>
// <ResizeObserver onResize={this.onPaperResize} />
//</div>
//);
} }
/** */ /** */
......
...@@ -132,6 +132,9 @@ class EditTool extends Component { ...@@ -132,6 +132,9 @@ class EditTool extends Component {
/** */ /** */
render() { render() {
console.log('rendering edit tool');
return ( return (
<Tool <Tool
onMouseDown={this.onMouseDown} onMouseDown={this.onMouseDown}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment