aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/InteractionUtils.tsx240
-rw-r--r--src/client/views/InkStroke.scss25
-rw-r--r--src/client/views/InkStrokeProperties.ts12
-rw-r--r--src/client/views/InkingStroke.tsx6
-rw-r--r--src/client/views/MainView.tsx1
-rw-r--r--src/client/views/nodes/DocumentView.scss1
6 files changed, 154 insertions, 131 deletions
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index 289c5bc51..4af51b9a0 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -1,12 +1,12 @@
-import React = require("react");
-import { Utils } from "../../Utils";
-import "./InteractionUtils.scss";
+import React = require('react');
+import { Utils } from '../../Utils';
+import './InteractionUtils.scss';
export namespace InteractionUtils {
- export const MOUSETYPE = "mouse";
- export const TOUCHTYPE = "touch";
- export const PENTYPE = "pen";
- export const ERASERTYPE = "eraser";
+ export const MOUSETYPE = 'mouse';
+ export const TOUCHTYPE = 'touch';
+ export const PENTYPE = 'pen';
+ export const ERASERTYPE = 'eraser';
const POINTER_PEN_BUTTON = -1;
const REACT_POINTER_PEN_BUTTON = 0;
@@ -19,24 +19,23 @@ export namespace InteractionUtils {
readonly touches: T extends React.TouchEvent ? React.Touch[] : Touch[],
readonly changedTouches: T extends React.TouchEvent ? React.Touch[] : Touch[],
readonly touchEvent: T extends React.TouchEvent ? React.TouchEvent : TouchEvent
- ) { }
+ ) {}
}
- export interface MultiTouchEventDisposer { (): void; }
+ export interface MultiTouchEventDisposer {
+ (): void;
+ }
/**
*
* @param element - element to turn into a touch target
* @param startFunc - event handler, typically Touchable.onTouchStart (classes that inherit touchable can pass in this.onTouchStart)
*/
- export function MakeMultiTouchTarget(
- element: HTMLElement,
- startFunc: (e: Event, me: MultiTouchEvent<React.TouchEvent>) => void
- ): MultiTouchEventDisposer {
+ export function MakeMultiTouchTarget(element: HTMLElement, startFunc: (e: Event, me: MultiTouchEvent<React.TouchEvent>) => void): MultiTouchEventDisposer {
const onMultiTouchStartHandler = (e: Event) => startFunc(e, (e as CustomEvent<MultiTouchEvent<React.TouchEvent>>).detail);
// const onMultiTouchMoveHandler = moveFunc ? (e: Event) => moveFunc(e, (e as CustomEvent<MultiTouchEvent<TouchEvent>>).detail) : undefined;
// const onMultiTouchEndHandler = endFunc ? (e: Event) => endFunc(e, (e as CustomEvent<MultiTouchEvent<TouchEvent>>).detail) : undefined;
- element.addEventListener("dashOnTouchStart", onMultiTouchStartHandler);
+ element.addEventListener('dashOnTouchStart', onMultiTouchStartHandler);
// if (onMultiTouchMoveHandler) {
// element.addEventListener("dashOnTouchMove", onMultiTouchMoveHandler);
// }
@@ -44,7 +43,7 @@ export namespace InteractionUtils {
// element.addEventListener("dashOnTouchEnd", onMultiTouchEndHandler);
// }
return () => {
- element.removeEventListener("dashOnTouchStart", onMultiTouchStartHandler);
+ element.removeEventListener('dashOnTouchStart', onMultiTouchStartHandler);
// if (onMultiTouchMoveHandler) {
// element.removeEventListener("dashOnTouchMove", onMultiTouchMoveHandler);
// }
@@ -59,14 +58,11 @@ export namespace InteractionUtils {
* @param element - element to add events to
* @param func - function to add to the event
*/
- export function MakeHoldTouchTarget(
- element: HTMLElement,
- func: (e: Event, me: MultiTouchEvent<React.TouchEvent>) => void
- ): MultiTouchEventDisposer {
+ export function MakeHoldTouchTarget(element: HTMLElement, func: (e: Event, me: MultiTouchEvent<React.TouchEvent>) => void): MultiTouchEventDisposer {
const handler = (e: Event) => func(e, (e as CustomEvent<MultiTouchEvent<React.TouchEvent>>).detail);
- element.addEventListener("dashOnTouchHoldStart", handler);
+ element.addEventListener('dashOnTouchHoldStart', handler);
return () => {
- element.removeEventListener("dashOnTouchHoldStart", handler);
+ element.removeEventListener('dashOnTouchHoldStart', handler);
};
}
@@ -89,71 +85,108 @@ export namespace InteractionUtils {
return myTouches;
}
- export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number,
- color: string, width: number, strokeWidth: number, lineJoin: string, lineCap: string, bezier: string, fill: string, arrowStart: string, arrowEnd: string,
- markerScale: number, dash: string | undefined, scalex: number, scaley: number, shape: string, pevents: string, opacity: number, nodefs: boolean,
- downHdlr?: ((e: React.PointerEvent) => void)) {
+ export function CreatePolyline(
+ points: { X: number; Y: number }[],
+ left: number,
+ top: number,
+ color: string,
+ width: number,
+ strokeWidth: number,
+ lineJoin: string,
+ lineCap: string,
+ bezier: string,
+ fill: string,
+ arrowStart: string,
+ arrowEnd: string,
+ markerScale: number,
+ dash: string | undefined,
+ scalex: number,
+ scaley: number,
+ shape: string,
+ pevents: string,
+ opacity: number,
+ nodefs: boolean,
+ downHdlr?: (e: React.PointerEvent) => void
+ ) {
const pts = shape ? makePolygon(shape, points) : points;
if (isNaN(scalex)) scalex = 1;
if (isNaN(scaley)) scaley = 1;
- const toScr = (p: { X: number, Y: number }) => ` ${!p ? 0 : (p.X - left - width / 2) * scalex + width / 2}, ${!p ? 0 : (p.Y - top - width / 2) * scaley + width / 2} `;
- const strpts = bezier ?
- pts.reduce((acc: string, pt, i) => acc + (i % 4 !== 0 ? "" : (i === 0 ? "M" + toScr(pt) : "") + "C" + toScr(pts[i + 1]) + toScr(pts[i + 2]) + toScr(pts[i + 3])), "") :
- pts.reduce((acc: string, pt) => acc + `${toScr(pt)} `, "");
+ const toScr = (p: { X: number; Y: number }) => ` ${!p ? 0 : (p.X - left - width / 2) * scalex + width / 2}, ${!p ? 0 : (p.Y - top - width / 2) * scaley + width / 2} `;
+ const strpts = bezier
+ ? pts.reduce((acc: string, pt, i) => acc + (i % 4 !== 0 ? '' : (i === 0 ? 'M' + toScr(pt) : '') + 'C' + toScr(pts[i + 1]) + toScr(pts[i + 2]) + toScr(pts[i + 3])), '')
+ : pts.reduce((acc: string, pt) => acc + `${toScr(pt)} `, '');
const dashArray = dash && Number(dash) ? String(Number(width) * Number(dash)) : undefined;
const defGuid = Utils.GenerateGuid();
- const Tag = (bezier ? "path" : "polyline") as keyof JSX.IntrinsicElements;
+ const Tag = (bezier ? 'path' : 'polyline') as keyof JSX.IntrinsicElements;
const markerStrokeWidth = strokeWidth / 2;
- const arrowWidthFactor = 3 * (markerScale || 0.5);// used to be 1.5
+ const arrowWidthFactor = 3 * (markerScale || 0.5); // used to be 1.5
const arrowLengthFactor = 5 * (markerScale || 0.5);
const arrowNotchFactor = 2 * (markerScale || 0.5);
- return (<svg fill={color} onPointerDown={downHdlr}> {/* setting the svg fill sets the arrowStart fill */}
- {nodefs ? (null) : <defs>
- {arrowStart !== "dot" && arrowEnd !== "dot" ? (null) :
- <marker id={`dot${defGuid}`} orient="auto" markerUnits="userSpaceOnUse" refX={0} refY="0" overflow="visible">
- <circle r={strokeWidth * arrowWidthFactor} fill="context-stroke" />
- </marker>}
- {arrowStart !== "arrow" ? (null) :
- <marker id={`arrowStart${defGuid}`} markerUnits="userSpaceOnUse" orient="auto" overflow="visible" refX={markerStrokeWidth * (arrowLengthFactor - arrowNotchFactor)} refY={0} markerWidth="10" markerHeight="7">
- <polygon style={{ stroke: color }} strokeLinejoin={lineJoin as any} strokeWidth={markerStrokeWidth * 2 / 3}
- points={`${arrowLengthFactor * markerStrokeWidth} ${-markerStrokeWidth * arrowWidthFactor}, ${markerStrokeWidth * (arrowLengthFactor - arrowNotchFactor)} 0, ${arrowLengthFactor * markerStrokeWidth} ${markerStrokeWidth * arrowWidthFactor}, 0 0`} />
- </marker>}
- {arrowEnd !== "arrow" ? (null) :
- <marker id={`arrowEnd${defGuid}`} markerUnits="userSpaceOnUse" orient="auto" overflow="visible" refX={markerStrokeWidth * arrowNotchFactor} refY={0} markerWidth="10" markerHeight="7">
- <polygon style={{ stroke: color }} strokeLinejoin={lineJoin as any} strokeWidth={markerStrokeWidth * 2 / 3}
- points={`0 ${-markerStrokeWidth * arrowWidthFactor}, ${markerStrokeWidth * arrowNotchFactor} 0, 0 ${markerStrokeWidth * arrowWidthFactor}, ${arrowLengthFactor * markerStrokeWidth} 0`} />
- </marker>}
- </defs>}
-
- <Tag
- d={bezier ? strpts : undefined}
- points={bezier ? undefined : strpts}
- style={{
- // filter: drawHalo ? "url(#inkSelectionHalo)" : undefined,
- fill: fill && fill !== "transparent" ? fill : "none",
- opacity: 1.0,
- // opacity: strokeWidth !== width ? 0.5 : undefined,
- pointerEvents: pevents as any,
- stroke: color ?? "rgb(0, 0, 0)",
- strokeWidth: strokeWidth,
- strokeLinecap: lineCap as any,
- strokeDasharray: dashArray
- }}
- markerStart={`url(#${arrowStart === "dot" ? arrowStart + defGuid : arrowStart + "Start" + defGuid})`}
- markerEnd={`url(#${arrowEnd === "dot" ? arrowEnd + defGuid : arrowEnd + "End" + defGuid})`}
- />
-
- </svg>);
+ return (
+ <svg fill={color} style={{ transition: 'inherit' }} onPointerDown={downHdlr}>
+ {' '}
+ {/* setting the svg fill sets the arrowStart fill */}
+ {nodefs ? null : (
+ <defs>
+ {arrowStart !== 'dot' && arrowEnd !== 'dot' ? null : (
+ <marker id={`dot${defGuid}`} orient="auto" markerUnits="userSpaceOnUse" refX={0} refY="0" overflow="visible">
+ <circle r={strokeWidth * arrowWidthFactor} fill="context-stroke" />
+ </marker>
+ )}
+ {arrowStart !== 'arrow' ? null : (
+ <marker id={`arrowStart${defGuid}`} markerUnits="userSpaceOnUse" orient="auto" overflow="visible" refX={markerStrokeWidth * (arrowLengthFactor - arrowNotchFactor)} refY={0} markerWidth="10" markerHeight="7">
+ <polygon
+ style={{ stroke: color }}
+ strokeLinejoin={lineJoin as any}
+ strokeWidth={(markerStrokeWidth * 2) / 3}
+ points={`${arrowLengthFactor * markerStrokeWidth} ${-markerStrokeWidth * arrowWidthFactor}, ${markerStrokeWidth * (arrowLengthFactor - arrowNotchFactor)} 0, ${arrowLengthFactor * markerStrokeWidth} ${
+ markerStrokeWidth * arrowWidthFactor
+ }, 0 0`}
+ />
+ </marker>
+ )}
+ {arrowEnd !== 'arrow' ? null : (
+ <marker id={`arrowEnd${defGuid}`} markerUnits="userSpaceOnUse" orient="auto" overflow="visible" refX={markerStrokeWidth * arrowNotchFactor} refY={0} markerWidth="10" markerHeight="7">
+ <polygon
+ style={{ stroke: color }}
+ strokeLinejoin={lineJoin as any}
+ strokeWidth={(markerStrokeWidth * 2) / 3}
+ points={`0 ${-markerStrokeWidth * arrowWidthFactor}, ${markerStrokeWidth * arrowNotchFactor} 0, 0 ${markerStrokeWidth * arrowWidthFactor}, ${arrowLengthFactor * markerStrokeWidth} 0`}
+ />
+ </marker>
+ )}
+ </defs>
+ )}
+ <Tag
+ d={bezier ? strpts : undefined}
+ points={bezier ? undefined : strpts}
+ style={{
+ // filter: drawHalo ? "url(#inkSelectionHalo)" : undefined,
+ fill: fill && fill !== 'transparent' ? fill : 'none',
+ opacity: 1.0,
+ // opacity: strokeWidth !== width ? 0.5 : undefined,
+ pointerEvents: pevents as any,
+ stroke: color ?? 'rgb(0, 0, 0)',
+ strokeWidth: strokeWidth,
+ strokeLinecap: lineCap as any,
+ strokeDasharray: dashArray,
+ transition: 'inherit',
+ }}
+ markerStart={`url(#${arrowStart === 'dot' ? arrowStart + defGuid : arrowStart + 'Start' + defGuid})`}
+ markerEnd={`url(#${arrowEnd === 'dot' ? arrowEnd + defGuid : arrowEnd + 'End' + defGuid})`}
+ />
+ </svg>
+ );
}
- export function makePolygon(shape: string, points: { X: number, Y: number }[]) {
+ export function makePolygon(shape: string, points: { X: number; Y: number }[]) {
if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y + 1 === points[0].Y) {
//pointer is up (first and last points are the same)
- if (shape === "arrow" || shape === "line" || shape === "circle") {
+ if (shape === 'arrow' || shape === 'line' || shape === 'circle') {
//if arrow or line, the two end points should be the starting and the ending point
var left = points[0].X;
var top = points[0].Y;
@@ -175,7 +208,7 @@ export namespace InteractionUtils {
left = points[0].X;
bottom = points[points.length - 1].Y;
top = points[0].Y;
- if (shape !== "arrow" && shape !== "line" && shape !== "circle") {
+ if (shape !== 'arrow' && shape !== 'line' && shape !== 'circle') {
//switch left/right and top/bottom if needed
if (left > right) {
const temp = right;
@@ -191,14 +224,13 @@ export namespace InteractionUtils {
}
points = [];
switch (shape) {
- case "rectangle":
+ case 'rectangle':
points.push({ X: left, Y: top });
points.push({ X: right, Y: top });
points.push({ X: right, Y: bottom });
points.push({ X: left, Y: bottom });
points.push({ X: left, Y: top });
- return points;
- case "triangle":
+ case 'triangle':
// points.push({ X: left, Y: bottom });
// points.push({ X: right, Y: bottom });
// points.push({ X: (right + left) / 2, Y: top });
@@ -219,62 +251,39 @@ export namespace InteractionUtils {
points.push({ X: left, Y: bottom });
points.push({ X: left, Y: bottom });
-
-
- return points;
- case "circle":
+ case 'circle':
const centerX = (Math.max(left, right) + Math.min(left, right)) / 2;
const centerY = (Math.max(top, bottom) + Math.min(top, bottom)) / 2;
const radius = Math.max(centerX - Math.min(left, right), centerY - Math.min(top, bottom));
if (centerX - Math.min(left, right) < centerY - Math.min(top, bottom)) {
for (var y = Math.min(top, bottom); y < Math.max(top, bottom); y++) {
- const x = Math.sqrt(Math.pow(radius, 2) - (Math.pow((y - centerY), 2))) + centerX;
+ const x = Math.sqrt(Math.pow(radius, 2) - Math.pow(y - centerY, 2)) + centerX;
points.push({ X: x, Y: y });
}
for (var y = Math.max(top, bottom); y > Math.min(top, bottom); y--) {
- const x = Math.sqrt(Math.pow(radius, 2) - (Math.pow((y - centerY), 2))) + centerX;
+ const x = Math.sqrt(Math.pow(radius, 2) - Math.pow(y - centerY, 2)) + centerX;
const newX = centerX - (x - centerX);
points.push({ X: newX, Y: y });
}
- points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((Math.min(top, bottom) - centerY), 2))) + centerX, Y: Math.min(top, bottom) });
+ points.push({ X: Math.sqrt(Math.pow(radius, 2) - Math.pow(Math.min(top, bottom) - centerY, 2)) + centerX, Y: Math.min(top, bottom) });
} else {
for (var x = Math.min(left, right); x < Math.max(left, right); x++) {
- const y = Math.sqrt(Math.pow(radius, 2) - (Math.pow((x - centerX), 2))) + centerY;
+ const y = Math.sqrt(Math.pow(radius, 2) - Math.pow(x - centerX, 2)) + centerY;
points.push({ X: x, Y: y });
}
for (var x = Math.max(left, right); x > Math.min(left, right); x--) {
- const y = Math.sqrt(Math.pow(radius, 2) - (Math.pow((x - centerX), 2))) + centerY;
+ const y = Math.sqrt(Math.pow(radius, 2) - Math.pow(x - centerX, 2)) + centerY;
const newY = centerY - (y - centerY);
points.push({ X: x, Y: newY });
}
- points.push({ X: Math.min(left, right), Y: Math.sqrt(Math.pow(radius, 2) - (Math.pow((Math.min(left, right) - centerX), 2))) + centerY });
+ points.push({ X: Math.min(left, right), Y: Math.sqrt(Math.pow(radius, 2) - Math.pow(Math.min(left, right) - centerX, 2)) + centerY });
}
- return points;
- // case "arrow":
- // const x1 = left;
- // const y1 = top;
- // const x2 = right;
- // const y2 = bottom;
- // const L1 = Math.sqrt(Math.pow(Math.abs(x1 - x2), 2) + (Math.pow(Math.abs(y1 - y2), 2)));
- // const L2 = L1 / 5;
- // const angle = 0.785398;
- // const x3 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) + (y1 - y2) * Math.sin(angle));
- // const y3 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) - (x1 - x2) * Math.sin(angle));
- // const x4 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle));
- // const y4 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) + (x1 - x2) * Math.sin(angle));
- // points.push({ X: x1, Y: y1 });
- // points.push({ X: x2, Y: y2 });
- // points.push({ X: x3, Y: y3 });
- // points.push({ X: x4, Y: y4 });
- // points.push({ X: x2, Y: y2 });
- // return points;
- case "line":
+ case 'line':
points.push({ X: left, Y: top });
points.push({ X: right, Y: bottom });
return points;
- default:
- return points;
}
+ return points;
}
/**
* Returns whether or not the pointer event passed in is of the type passed in
@@ -284,11 +293,14 @@ export namespace InteractionUtils {
export function IsType(e: PointerEvent | React.PointerEvent, type: string): boolean {
switch (type) {
// pen and eraser are both pointer type 'pen', but pen is button 0 and eraser is button 5. -syip2
- case PENTYPE: return e.pointerType === PENTYPE && (e.button === -1 || e.button === 0);
- case ERASERTYPE: return e.pointerType === PENTYPE && e.button === (e instanceof PointerEvent ? ERASER_BUTTON : ERASER_BUTTON);
+ case PENTYPE:
+ return e.pointerType === PENTYPE && (e.button === -1 || e.button === 0);
+ case ERASERTYPE:
+ return e.pointerType === PENTYPE && e.button === (e instanceof PointerEvent ? ERASER_BUTTON : ERASER_BUTTON);
case TOUCHTYPE:
return e.pointerType === TOUCHTYPE;
- default: return e.pointerType === type;
+ default:
+ return e.pointerType === type;
}
}
@@ -305,7 +317,7 @@ export namespace InteractionUtils {
* Returns the centroid of an n-arbitrary long list of points (takes the average the x and y components of each point)
* @param pts - n-arbitrary long list of points
*/
- export function CenterPoint(pts: React.Touch[]): { X: number, Y: number } {
+ export function CenterPoint(pts: React.Touch[]): { X: number; Y: number } {
const centerX = pts.map(pt => pt.clientX).reduce((a, b) => a + b, 0) / pts.length;
const centerY = pts.map(pt => pt.clientY).reduce((a, b) => a + b, 0) / pts.length;
return { X: centerX, Y: centerY };
@@ -324,9 +336,9 @@ export namespace InteractionUtils {
const newDist = TwoPointEuclidist(pt1, pt2);
/** if they have the same sign, then we are either pinching in or out.
- * threshold it by 10 (it has to be pinching by at least threshold to be a valid pinch)
- * so that it can still pan without freaking out
- */
+ * threshold it by 10 (it has to be pinching by at least threshold to be a valid pinch)
+ * so that it can still pan without freaking out
+ */
if (Math.sign(oldDist) === Math.sign(newDist) && Math.abs(oldDist - newDist) > threshold) {
return Math.sign(oldDist - newDist);
}
@@ -372,8 +384,6 @@ export namespace InteractionUtils {
// These might not be very useful anymore, but I'll leave them here for now -syip2
{
-
-
/**
* Returns the type of Touch Interaction from a list of points.
* Also returns any data that is associated with a Touch Interaction
diff --git a/src/client/views/InkStroke.scss b/src/client/views/InkStroke.scss
index 664f2448b..bed7caf7f 100644
--- a/src/client/views/InkStroke.scss
+++ b/src/client/views/InkStroke.scss
@@ -1,22 +1,23 @@
.inkstroke-UI {
- // transform-origin: top left;
- position: absolute;
- overflow: visible;
- pointer-events: none;
- z-index: 2001; // 1 higher than documentdecorations
-
- svg:not(:root) {
- overflow: visible !important;
+ // transform-origin: top left;
position: absolute;
- left:0;
- top:0;
- }
+ overflow: visible;
+ pointer-events: none;
+ z-index: 2001; // 1 higher than documentdecorations
+
+ svg:not(:root) {
+ overflow: visible !important;
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
}
.inkStroke-wrapper {
display: flex;
align-items: center;
height: 100%;
+ transition: inherit;
.inkStroke {
mix-blend-mode: multiply;
stroke-linejoin: round;
@@ -26,8 +27,10 @@
width: 100%;
height: 100%;
pointer-events: none;
+ transition: inherit;
svg:not(:root) {
overflow: visible !important;
+ transition: inherit;
}
}
diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts
index 821e2f739..b32c9d54c 100644
--- a/src/client/views/InkStrokeProperties.ts
+++ b/src/client/views/InkStrokeProperties.ts
@@ -4,6 +4,7 @@ import { Doc, NumListCast, Opt } from '../../fields/Doc';
import { InkData, InkField, InkTool, PointData } from '../../fields/InkField';
import { List } from '../../fields/List';
import { listSpec } from '../../fields/Schema';
+import { ComputedField } from '../../fields/ScriptField';
import { Cast, NumCast } from '../../fields/Types';
import { Point } from '../../pen-gestures/ndollar';
import { DocumentType } from '../documents/DocumentTypes';
@@ -11,6 +12,7 @@ import { FitOneCurve } from '../util/bezierFit';
import { DocumentManager } from '../util/DocumentManager';
import { undoBatch } from '../util/UndoManager';
import { InkingStroke } from './InkingStroke';
+import { CollectionFreeFormDocumentView } from './nodes/CollectionFreeFormDocumentView';
import { DocumentView } from './nodes/DocumentView';
export class InkStrokeProperties {
@@ -65,7 +67,14 @@ export class InkStrokeProperties {
doc._height = (newYrange.max - newYrange.min) * ptsYscale + NumCast(doc.strokeWidth);
doc.x = oldXrange.coord + (newXrange.min - oldXrange.min) * ptsXscale;
doc.y = oldYrange.coord + (newYrange.min - oldYrange.min) * ptsYscale;
- Doc.GetProto(doc).data = new InkField(newPoints);
+ if (doc.activeFrame !== undefined) {
+ doc.data = ComputedField.MakeInterpolated('data', 'activeFrame', doc, NumCast(doc.activeFrame));
+ const findexed = Cast(doc[`data-indexed`], listSpec(InkField), []).slice();
+ findexed[NumCast(doc.activeFrame)] = new InkField(newPoints);
+ doc[`data-indexed`] = new List<InkField>(findexed);
+ } else {
+ Doc.GetProto(doc).data = new InkField(newPoints);
+ }
appliedFunc = true;
}
}
@@ -347,7 +356,6 @@ export class InkStrokeProperties {
const deltaX = snapData.nearestPt.X - ink[controlIndex].X;
const deltaY = snapData.nearestPt.Y - ink[controlIndex].Y;
const res = this.moveControlPtHandle(inkView, deltaX, deltaY, controlIndex, ink.slice());
- console.log('X = ' + snapData.nearestPt.X + ' ' + snapData.nearestPt.Y);
return res;
}
}
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 2671aea56..52efbdfd7 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -401,13 +401,13 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() {
inkTop,
highlightColor,
inkStrokeWidth,
- fillColor && closed && highlightIndex ? highlightIndex / 2 : inkStrokeWidth + (fillColor ? (closed ? 0 : highlightIndex + 2) : 0),
+ Math.max(5, fillColor && closed && highlightIndex ? highlightIndex / 2 : inkStrokeWidth + (fillColor ? (closed ? 0 : highlightIndex + 2) : 0)),
StrCast(this.layoutDoc.strokeLineJoin),
StrCast(this.layoutDoc.strokeLineCap),
StrCast(this.layoutDoc.strokeBezier),
!closed ? 'none' : fillColor === 'transparent' || suppressFill ? 'none' : fillColor,
- startMarker,
- endMarker,
+ '',
+ '',
markerScale,
undefined,
inkScaleX,
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 490e9e025..d2b0e10c1 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -172,6 +172,7 @@ export class MainView extends React.Component {
'curPage',
'viewType',
'chromeHidden',
+ 'currentFrame',
'width',
'nativeWidth',
]); // can play with these fields on someone else's
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 6ea697a2f..9aaaf1e68 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -99,6 +99,7 @@
border-radius: inherit;
width: 100%;
height: 100%;
+ transition: inherit;
.sharingIndicator {
height: 30px;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 19:44:12 +0000