@tsdraw/core 0.8.2 → 0.8.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +17 -52
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -6
- package/dist/index.d.ts +1 -6
- package/dist/index.js +18 -52
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -225,34 +225,25 @@ var StateNode = class {
|
|
|
225
225
|
|
|
226
226
|
// src/canvas/viewport.ts
|
|
227
227
|
function createViewport() {
|
|
228
|
-
return { x: 0, y: 0, zoom: 1
|
|
228
|
+
return { x: 0, y: 0, zoom: 1 };
|
|
229
229
|
}
|
|
230
230
|
function screenToPage(viewport, screenX, screenY) {
|
|
231
|
-
const tx = screenX - viewport.x;
|
|
232
|
-
const ty = screenY - viewport.y;
|
|
233
|
-
const cos = Math.cos(viewport.rotation);
|
|
234
|
-
const sin = Math.sin(viewport.rotation);
|
|
235
231
|
return {
|
|
236
|
-
x: (
|
|
237
|
-
y: (-
|
|
232
|
+
x: (screenX - viewport.x) / viewport.zoom,
|
|
233
|
+
y: (screenY - viewport.y) / viewport.zoom
|
|
238
234
|
};
|
|
239
235
|
}
|
|
240
236
|
function pageToScreen(viewport, pageX, pageY) {
|
|
241
|
-
const scaledX = pageX * viewport.zoom;
|
|
242
|
-
const scaledY = pageY * viewport.zoom;
|
|
243
|
-
const cos = Math.cos(viewport.rotation);
|
|
244
|
-
const sin = Math.sin(viewport.rotation);
|
|
245
237
|
return {
|
|
246
|
-
x:
|
|
247
|
-
y:
|
|
238
|
+
x: pageX * viewport.zoom + viewport.x,
|
|
239
|
+
y: pageY * viewport.zoom + viewport.y
|
|
248
240
|
};
|
|
249
241
|
}
|
|
250
242
|
function setViewport(viewport, updater) {
|
|
251
243
|
return {
|
|
252
244
|
x: updater.x ?? viewport.x,
|
|
253
245
|
y: updater.y ?? viewport.y,
|
|
254
|
-
zoom: updater.zoom ?? viewport.zoom
|
|
255
|
-
rotation: updater.rotation ?? viewport.rotation
|
|
246
|
+
zoom: updater.zoom ?? viewport.zoom
|
|
256
247
|
};
|
|
257
248
|
}
|
|
258
249
|
function panViewport(viewport, dx, dy) {
|
|
@@ -264,23 +255,9 @@ function zoomViewport(viewport, factor, centerX, centerY) {
|
|
|
264
255
|
return { ...viewport, zoom };
|
|
265
256
|
}
|
|
266
257
|
const pageBefore = screenToPage(viewport, centerX, centerY);
|
|
267
|
-
const
|
|
268
|
-
const
|
|
269
|
-
|
|
270
|
-
const y = centerY - (pageBefore.x * zoom * sin + pageBefore.y * zoom * cos);
|
|
271
|
-
return { x, y, zoom, rotation: viewport.rotation };
|
|
272
|
-
}
|
|
273
|
-
function rotateViewport(viewport, delta, centerX, centerY) {
|
|
274
|
-
const rotation = viewport.rotation + delta;
|
|
275
|
-
if (centerX == null || centerY == null) {
|
|
276
|
-
return { ...viewport, rotation };
|
|
277
|
-
}
|
|
278
|
-
const pageBefore = screenToPage(viewport, centerX, centerY);
|
|
279
|
-
const cos = Math.cos(rotation);
|
|
280
|
-
const sin = Math.sin(rotation);
|
|
281
|
-
const x = centerX - (pageBefore.x * viewport.zoom * cos - pageBefore.y * viewport.zoom * sin);
|
|
282
|
-
const y = centerY - (pageBefore.x * viewport.zoom * sin + pageBefore.y * viewport.zoom * cos);
|
|
283
|
-
return { x, y, zoom: viewport.zoom, rotation };
|
|
258
|
+
const x = centerX - pageBefore.x * zoom;
|
|
259
|
+
const y = centerY - pageBefore.y * zoom;
|
|
260
|
+
return { x, y, zoom };
|
|
284
261
|
}
|
|
285
262
|
|
|
286
263
|
// src/utils/colors.ts
|
|
@@ -313,7 +290,6 @@ var CanvasRenderer = class {
|
|
|
313
290
|
render(ctx, viewport, shapes) {
|
|
314
291
|
ctx.save();
|
|
315
292
|
ctx.translate(viewport.x, viewport.y);
|
|
316
|
-
ctx.rotate(viewport.rotation);
|
|
317
293
|
ctx.scale(viewport.zoom, viewport.zoom);
|
|
318
294
|
for (const shape of shapes) {
|
|
319
295
|
if (shape.type === "draw") {
|
|
@@ -806,7 +782,7 @@ var PenDrawingState = class extends StateNode {
|
|
|
806
782
|
const z = this._startInfo?.point?.z ?? 0.5;
|
|
807
783
|
this._isPenDevice = penActive;
|
|
808
784
|
this._hasPressure = penActive || z !== 0.5;
|
|
809
|
-
const pressure = this._hasPressure ? toFixed(z) : 0.5;
|
|
785
|
+
const pressure = this._hasPressure ? toFixed(z * 1.25) : 0.5;
|
|
810
786
|
this._phase = inputs.getShiftKey() ? "straight" : "free";
|
|
811
787
|
this._extending = false;
|
|
812
788
|
this._lastSample = { ...origin };
|
|
@@ -903,13 +879,12 @@ var PenDrawingState = class extends StateNode {
|
|
|
903
879
|
const curPt = inputs.getCurrentPagePoint();
|
|
904
880
|
if (!this._hasPressure) {
|
|
905
881
|
const liveZ = curPt.z ?? 0.5;
|
|
906
|
-
if (liveZ !== 0.5 || inputs.getIsPen()) {
|
|
882
|
+
if (liveZ > 0 && liveZ !== 0.5 || inputs.getIsPen()) {
|
|
907
883
|
this._hasPressure = true;
|
|
908
|
-
this.editor.updateShapes([{ id, type: "draw", props: { isPen: true } }]);
|
|
909
884
|
}
|
|
910
885
|
}
|
|
911
886
|
const local = this.editor.getPointInShapeSpace(shape, curPt);
|
|
912
|
-
const pressure = this._hasPressure ? toFixed(curPt.z ?? 0.5) : 0.5;
|
|
887
|
+
const pressure = this._hasPressure ? toFixed((curPt.z ?? 0.5) * 1.25) : 0.5;
|
|
913
888
|
const pt = { x: toFixed(local.x), y: toFixed(local.y), z: pressure };
|
|
914
889
|
switch (this._phase) {
|
|
915
890
|
case "starting_straight": {
|
|
@@ -1055,7 +1030,7 @@ var PenDrawingState = class extends StateNode {
|
|
|
1055
1030
|
const firstPt = {
|
|
1056
1031
|
x: 0,
|
|
1057
1032
|
y: 0,
|
|
1058
|
-
z: this._hasPressure ? toFixed(curPage.z ?? 0.5) : 0.5
|
|
1033
|
+
z: this._hasPressure ? toFixed((curPage.z ?? 0.5) * 1.25) : 0.5
|
|
1059
1034
|
};
|
|
1060
1035
|
this._activePts = [firstPt];
|
|
1061
1036
|
this.editor.createShape({
|
|
@@ -1087,7 +1062,7 @@ var PenDrawingState = class extends StateNode {
|
|
|
1087
1062
|
endStroke() {
|
|
1088
1063
|
if (!this._target) return;
|
|
1089
1064
|
this.editor.updateShapes([
|
|
1090
|
-
{ id: this._target.id, type: "draw", props: { isComplete: true } }
|
|
1065
|
+
{ id: this._target.id, type: "draw", props: { isComplete: true, isPen: this._hasPressure } }
|
|
1091
1066
|
]);
|
|
1092
1067
|
this.ctx.transition("pen_idle");
|
|
1093
1068
|
}
|
|
@@ -1754,8 +1729,7 @@ var Editor = class {
|
|
|
1754
1729
|
this.viewport = {
|
|
1755
1730
|
x: partial.x ?? this.viewport.x,
|
|
1756
1731
|
y: partial.y ?? this.viewport.y,
|
|
1757
|
-
zoom: Math.max(0.1, Math.min(4, rawZoom))
|
|
1758
|
-
rotation: partial.rotation ?? this.viewport.rotation
|
|
1732
|
+
zoom: Math.max(0.1, Math.min(4, rawZoom))
|
|
1759
1733
|
};
|
|
1760
1734
|
this.emitChange();
|
|
1761
1735
|
}
|
|
@@ -1769,10 +1743,6 @@ var Editor = class {
|
|
|
1769
1743
|
this.viewport = zoomViewport(this.viewport, factor, screenX, screenY);
|
|
1770
1744
|
this.emitChange();
|
|
1771
1745
|
}
|
|
1772
|
-
rotateAt(delta, screenX, screenY) {
|
|
1773
|
-
this.viewport = rotateViewport(this.viewport, delta, screenX, screenY);
|
|
1774
|
-
this.emitChange();
|
|
1775
|
-
}
|
|
1776
1746
|
deleteShapes(ids) {
|
|
1777
1747
|
if (ids.length === 0) return;
|
|
1778
1748
|
this.store.deleteShapes(ids);
|
|
@@ -1795,8 +1765,7 @@ var Editor = class {
|
|
|
1795
1765
|
viewport: {
|
|
1796
1766
|
x: this.viewport.x,
|
|
1797
1767
|
y: this.viewport.y,
|
|
1798
|
-
zoom: this.viewport.zoom
|
|
1799
|
-
rotation: this.viewport.rotation
|
|
1768
|
+
zoom: this.viewport.zoom
|
|
1800
1769
|
},
|
|
1801
1770
|
currentToolId: this.getCurrentToolId(),
|
|
1802
1771
|
drawStyle: this.getCurrentDrawStyle(),
|
|
@@ -1804,10 +1773,7 @@ var Editor = class {
|
|
|
1804
1773
|
};
|
|
1805
1774
|
}
|
|
1806
1775
|
loadSessionStateSnapshot(snapshot) {
|
|
1807
|
-
this.setViewport(
|
|
1808
|
-
...snapshot.viewport,
|
|
1809
|
-
rotation: snapshot.viewport.rotation ?? 0
|
|
1810
|
-
});
|
|
1776
|
+
this.setViewport(snapshot.viewport);
|
|
1811
1777
|
this.setCurrentDrawStyle({
|
|
1812
1778
|
color: snapshot.drawStyle.color,
|
|
1813
1779
|
dash: snapshot.drawStyle.dash,
|
|
@@ -2248,7 +2214,6 @@ exports.pointHitsShape = pointHitsShape;
|
|
|
2248
2214
|
exports.recordsToDocumentSnapshot = recordsToDocumentSnapshot;
|
|
2249
2215
|
exports.resolveThemeColor = resolveThemeColor;
|
|
2250
2216
|
exports.rotatePoint = rotatePoint;
|
|
2251
|
-
exports.rotateViewport = rotateViewport;
|
|
2252
2217
|
exports.screenToPage = screenToPage;
|
|
2253
2218
|
exports.segmentHitsShape = segmentHitsShape;
|
|
2254
2219
|
exports.segmentTouchesPolyline = segmentTouchesPolyline;
|