@@ -88,7 +88,7 @@ import {
88
88
} from "./math" ;
89
89
import { throttle } from "lodash" ;
90
90
import Draggable from "react-draggable" ;
91
- import { clearCanvas , drawCurve } from "./elements/pen" ;
91
+ import { clearCanvas , drawCurve , getMaxCanvasSizeScale } from "./elements/pen" ;
92
92
93
93
import { getParams } from "./tools/tool-panel" ;
94
94
@@ -98,7 +98,9 @@ import { aspectRatioToNumber } from "./tools/frame";
98
98
99
99
import Cursors from "./cursors" ;
100
100
101
- const penDPIFactor = 1 ; // I can't get this to work! :-(
101
+ // I can't get this to work! :-(
102
+ // When I can, this should be window.devicePixelRatio
103
+ const penDPIFactor = 1 ;
102
104
103
105
const MIDDLE_MOUSE_BUTTON = 1 ;
104
106
@@ -145,10 +147,20 @@ export default function Canvas({
145
147
146
148
const navDrag = useRef < null | { x0 : number ; y0 : number } > ( null ) ;
147
149
const innerCanvasRef = useRef < any > ( null ) ;
148
- const transforms = useMemo (
149
- ( ) => getTransforms ( elements , margin , canvasScale ) ,
150
- [ elements , margin , canvasScale ]
151
- ) ;
150
+
151
+ const canvasScaleRef = useRef < number > ( 1 ) ;
152
+ const transforms = useMemo ( ( ) => {
153
+ const t = getTransforms ( elements , margin , canvasScale ) ;
154
+ // also update the canvas scale, which is needed to keep
155
+ // the canvas preview layer (for the pen) from getting too big
156
+ // and wasting memory.
157
+ canvasScaleRef . current = getMaxCanvasSizeScale (
158
+ penDPIFactor * t . width ,
159
+ penDPIFactor * t . height
160
+ ) ;
161
+ return t ;
162
+ } , [ elements , margin , canvasScale ] ) ;
163
+
152
164
const mousePath = useRef < { x : number ; y : number } [ ] | null > ( null ) ;
153
165
const handRef = useRef < {
154
166
scrollLeft : number ;
@@ -852,10 +864,22 @@ export default function Canvas({
852
864
if ( canvas == null ) return ;
853
865
const ctx = canvas . getContext ( "2d" ) ;
854
866
if ( ctx == null ) return ;
867
+ const path : Point [ ] = [ ] ;
868
+ for ( const point of mousePath . current . slice (
869
+ mousePath . current . length - 3
870
+ ) ) {
871
+ path . push ( {
872
+ x : point . x * canvasScaleRef . current ,
873
+ y : point . y * canvasScaleRef . current ,
874
+ } ) ;
875
+ }
876
+ const { color, radius, opacity } = getToolParams ( "pen" ) ;
855
877
drawCurve ( {
856
878
ctx,
857
- path : mousePath . current . slice ( mousePath . current . length - 2 ) ,
858
- ...getToolParams ( "pen" ) ,
879
+ path,
880
+ color,
881
+ radius : canvasScaleRef . current * radius ,
882
+ opacity,
859
883
} ) ;
860
884
return ;
861
885
}
@@ -978,8 +1002,8 @@ export default function Canvas({
978
1002
{ ! isNavigator && selectedTool == "pen" && (
979
1003
< canvas
980
1004
ref = { penCanvasRef }
981
- width = { penDPIFactor * transforms . width }
982
- height = { penDPIFactor * transforms . height }
1005
+ width = { canvasScaleRef . current * penDPIFactor * transforms . width }
1006
+ height = { canvasScaleRef . current * penDPIFactor * transforms . height }
983
1007
style = { {
984
1008
width : `${ transforms . width } px` ,
985
1009
height : `${ transforms . height } px` ,
0 commit comments