aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/util/InteractionUtils.tsx3
-rw-r--r--src/client/views/DocumentDecorations.scss1
-rw-r--r--src/client/views/DocumentDecorations.tsx4
-rw-r--r--src/client/views/GlobalKeyHandler.ts2
-rw-r--r--src/client/views/InkingStroke.tsx28
-rw-r--r--src/client/views/collections/collectionFreeForm/FormatShapePane.tsx39
-rw-r--r--src/client/views/nodes/DocumentView.tsx23
-rw-r--r--src/fields/Doc.ts2
8 files changed, 43 insertions, 59 deletions
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index d1e656e3f..4a203d41f 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -132,7 +132,6 @@ export namespace InteractionUtils {
if (isNaN(scaley)) {
scaley = 1;
}
- console.log(pts.length);
return pts;
}
@@ -188,7 +187,7 @@ export namespace InteractionUtils {
const addables = pts.map((pts, i) =>
<svg height="10" width="10">
- <circle cx={(pts.X - left - width / 2) * scalex + width / 2} cy={(pts.Y - top - width / 2) * scaley + width / 2} r={strokeWidth / 2} stroke="black" stroke-width={1} fill="blue"
+ <circle cx={(pts.X - left - width / 2) * scalex + width / 2} cy={(pts.Y - top - width / 2) * scaley + width / 2} r={strokeWidth / 2} stroke="black" strokeWidth={1} fill="blue"
onDoubleClick={(e) => { console.log(i); }} pointerEvents="all" cursor="all-scroll"
/>
</svg>);
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 1e8cfdff4..b5c32ca1d 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -79,6 +79,7 @@ $linkGap : 3px;
top: 12;
position: relative;
pointer-events: all;
+ cursor: grab;
.borderRadiusTooltip {
width: 10px;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 19b9f20d9..3d6301ae9 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -283,7 +283,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
const newY = Math.sin(angle) * (ink.X - this._centerPoints[index].X) + Math.cos(angle) * (ink.Y - this._centerPoints[index].Y) + this._centerPoints[index].Y;
newPoints.push({ X: newX, Y: newY });
}
- doc.data = new InkField(newPoints);
+ Doc.GetProto(doc).data = new InkField(newPoints);
const xs = newPoints.map(p => p.X);
const ys = newPoints.map(p => p.Y);
const left = Math.min(...xs);
@@ -531,7 +531,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
const newY = ((doc.y || 0) - this._inkDocs[index].y) + (i.Y * (doc._height || 0)) / this._inkDocs[index].height;
newPoints.push({ X: newX, Y: newY });
});
- doc.data = new InkField(newPoints);
+ Doc.GetProto(doc).data = new InkField(newPoints);
}
doc._nativeWidth = 0;
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index b29a04ea7..84b3d64fd 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -23,6 +23,7 @@ import { PDFMenu } from "./pdf/PDFMenu";
import { ContextMenu } from "./ContextMenu";
import { GroupManager } from "../util/GroupManager";
import { CollectionFreeFormViewChrome } from "./collections/CollectionMenu";
+import { FormatShapePane } from "./collections/collectionFreeForm/FormatShapePane";
const modifiers = ["control", "meta", "shift", "alt"];
type KeyHandler = (keycode: string, e: KeyboardEvent) => KeyControlInfo | Promise<KeyControlInfo>;
@@ -90,6 +91,7 @@ export class KeyManager {
// }
DocumentLinksButton.StartLink = undefined;
DocumentLinksButton.StartLinkView = undefined;
+ FormatShapePane.Instance._controlBtn = false;
const main = MainView.Instance;
Doc.SetSelectedTool(InkTool.None);
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index d47d0d90c..18ecc225c 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -42,11 +42,6 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
this.props.Document.isInkMask = true;
}
- @action
- private formatShape = () => {
- FormatShapePane.Instance.Pinned = true;
- }
-
public _prevX = 0;
public _prevY = 0;
private _controlNum = 0;
@@ -160,36 +155,31 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
const dotsize = String(Math.max(width * scaleX, height * scaleY) / 40);
const addpoints = apoints.map((pts, i) =>
-
- <svg height="10" width="10">
- <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={dotsize} stroke="invisible" stroke-width={String(Number(dotsize) / 2)} fill="invisible"
+ <svg height="10" width="10" key={`add${i}`}>
+ <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={dotsize} stroke="invisible" strokeWidth={String(Number(dotsize) / 2)} fill="invisible"
onPointerDown={(e) => { FormatShapePane.Instance.addPoints(pts.X, pts.Y, apoints, i, controlPoints); }} pointerEvents="all" cursor="all-scroll"
/>
</svg>);
const controls = controlPoints.map((pts, i) =>
-
- <svg height="10" width="10">
- <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={dotsize} stroke="black" stroke-width={String(Number(dotsize) / 2)} fill="red"
+ <svg height="10" width="10" key={`ctrl${i}`}>
+ <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={dotsize} stroke="black" strokeWidth={String(Number(dotsize) / 2)} fill="red"
onPointerDown={(e) => { this.changeCurrPoint(pts.I); this.onControlDown(e, pts.I); }} pointerEvents="all" cursor="all-scroll"
/>
</svg>);
const handles = handlePoints.map((pts, i) =>
-
- <svg height="10" width="10">
- <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={dotsize} stroke="black" stroke-width={String(Number(dotsize) / 2)} fill="green"
+ <svg height="10" width="10" key={`hdl${i}`}>
+ <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={dotsize} stroke="black" strokeWidth={String(Number(dotsize) / 2)} fill="green"
onPointerDown={(e) => this.onControlDown(e, pts.I)} pointerEvents="all" cursor="all-scroll" display={(pts.dot1 === FormatShapePane.Instance._currPoint || pts.dot2 === FormatShapePane.Instance._currPoint) ? "inherit" : "none"} />
</svg>);
const handleLines = handleLine.map((pts, i) =>
-
- <svg height="100" width="100">
+ <svg height="100" width="100" key={`line${i}`}>
<line x1={(pts.X1 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y1={(pts.Y1 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
- x2={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y2={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} stroke="green" stroke-width={String(Number(dotsize) / 2)}
+ x2={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y2={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} stroke="green" strokeWidth={String(Number(dotsize) / 2)}
display={(pts.dot1 === FormatShapePane.Instance._currPoint || pts.dot2 === FormatShapePane.Instance._currPoint) ? "inherit" : "none"} />
<line x1={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y1={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
- x2={(pts.X3 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y2={(pts.Y3 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} stroke="green" stroke-width={String(Number(dotsize) / 2)}
+ x2={(pts.X3 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y2={(pts.Y3 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} stroke="green" strokeWidth={String(Number(dotsize) / 2)}
display={(pts.dot1 === FormatShapePane.Instance._currPoint || pts.dot2 === FormatShapePane.Instance._currPoint) ? "inherit" : "none"} />
-
</svg>);
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
index 1d3604d7f..91efe139e 100644
--- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
@@ -118,9 +118,7 @@ export class FormatShapePane extends AntimodeMenu<AntimodeMenuProps> {
this._lock && (i.rootDoc._height = (i.rootDoc._width / oldWidth * NumCast(i.rootDoc._height)));
const doc = Document(i.rootDoc);
if (doc.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) {
- console.log(doc.x, doc.y, doc._height, doc._width);
const ink = Cast(doc.data, InkField)?.inkData;
- console.log(ink);
if (ink) {
const newPoints: { X: number, Y: number }[] = [];
ink.forEach(i => {
@@ -129,7 +127,7 @@ export class FormatShapePane extends AntimodeMenu<AntimodeMenuProps> {
const newY = ((doc.y || 0) - oldY) + (i.Y * (doc._height || 0)) / oldHeight;
newPoints.push({ X: newX, Y: newY });
});
- doc.data = new InkField(newPoints);
+ Doc.GetProto(doc).data = new InkField(newPoints);
}
}
});
@@ -142,9 +140,7 @@ export class FormatShapePane extends AntimodeMenu<AntimodeMenuProps> {
this._lock && (i.rootDoc._width = (i.rootDoc._height / oldHeight * NumCast(i.rootDoc._width)));
const doc = Document(i.rootDoc);
if (doc.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) {
- console.log(doc.x, doc.y, doc._height, doc._width);
const ink = Cast(doc.data, InkField)?.inkData;
- console.log(ink);
if (ink) {
const newPoints: { X: number, Y: number }[] = [];
ink.forEach(i => {
@@ -153,7 +149,7 @@ export class FormatShapePane extends AntimodeMenu<AntimodeMenuProps> {
const newY = ((doc.y || 0) - oldY) + (i.Y * (doc._height || 0)) / oldHeight;
newPoints.push({ X: newX, Y: newY });
});
- doc.data = new InkField(newPoints);
+ Doc.GetProto(doc).data = new InkField(newPoints);
}
}
});
@@ -179,7 +175,7 @@ export class FormatShapePane extends AntimodeMenu<AntimodeMenuProps> {
const spNum = Math.floor(counter / 2) * 4 + 2;
for (var i = 0; i < spNum; i++) {
- newPoints.push({ X: ink[i].X, Y: ink[i].Y });
+ ink[i] && newPoints.push({ X: ink[i].X, Y: ink[i].Y });
}
for (var j = 0; j < 4; j++) {
newPoints.push({ X: x, Y: y });
@@ -189,7 +185,7 @@ export class FormatShapePane extends AntimodeMenu<AntimodeMenuProps> {
newPoints.push({ X: ink[i].X, Y: ink[i].Y });
}
this._currPoint = -1;
- doc.data = new InkField(newPoints);
+ Doc.GetProto(doc).data = new InkField(newPoints);
}
}
}
@@ -206,25 +202,21 @@ export class FormatShapePane extends AntimodeMenu<AntimodeMenuProps> {
const ink = Cast(doc.data, InkField)?.inkData;
if (ink && ink.length > 4) {
const newPoints: { X: number, Y: number }[] = [];
-
- console.log(ink.length, this._currPoint, Math.floor((this._currPoint + 2) / 4));
-
const toRemove = Math.floor(((this._currPoint + 2) / 4));
for (var i = 0; i < ink.length; i++) {
if (Math.floor((i + 2) / 4) !== toRemove) {
- console.log(i, toRemove);
newPoints.push({ X: ink[i].X, Y: ink[i].Y });
}
}
this._currPoint = -1;
- doc.data = new InkField(newPoints);
+ Doc.GetProto(doc).data = new InkField(newPoints);
if (newPoints.length === 4) {
const newerPoints: { X: number, Y: number }[] = [];
newerPoints.push({ X: newPoints[0].X, Y: newPoints[0].Y });
newerPoints.push({ X: newPoints[0].X, Y: newPoints[0].Y });
newerPoints.push({ X: newPoints[3].X, Y: newPoints[3].Y });
newerPoints.push({ X: newPoints[3].X, Y: newPoints[3].Y });
- doc.data = new InkField(newerPoints);
+ Doc.GetProto(doc).data = new InkField(newerPoints);
}
}
@@ -267,7 +259,7 @@ export class FormatShapePane extends AntimodeMenu<AntimodeMenuProps> {
const newY = Math.sin(angle) * (i.X - _centerPoints[index].X) + Math.cos(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].Y;
newPoints.push({ X: newX, Y: newY });
});
- doc.data = new InkField(newPoints);
+ Doc.GetProto(doc).data = new InkField(newPoints);
const xs = newPoints.map(p => p.X);
const ys = newPoints.map(p => p.Y);
const left = Math.min(...xs);
@@ -317,7 +309,7 @@ export class FormatShapePane extends AntimodeMenu<AntimodeMenuProps> {
const ys = ink.map(p => p.Y);
const left = Math.min(...xs);
const top = Math.min(...ys);
- doc.data = new InkField(newPoints);
+ Doc.GetProto(doc).data = new InkField(newPoints);
const xs2 = newPoints.map(p => p.X);
const ys2 = newPoints.map(p => p.Y);
const left2 = Math.min(...xs2);
@@ -363,7 +355,7 @@ export class FormatShapePane extends AntimodeMenu<AntimodeMenuProps> {
inputBox = (key: string, value: any, setter: (val: string) => {}) => {
return <>
<input style={{ color: "black", width: 40, position: "absolute", right: 20 }}
- type="text" value={value}
+ type="text" defaultValue={value}
onChange={undoBatch(action((e) => setter(e.target.value)))}
autoFocus />
<button className="antiMenu-Buttonup" key="up1" onPointerDown={undoBatch(action(() => this.upDownButtons("up", key)))}>
@@ -382,7 +374,7 @@ export class FormatShapePane extends AntimodeMenu<AntimodeMenuProps> {
<p style={{ marginTop: -20, right: 70, position: "absolute" }}>{title2}</p>
<input style={{ color: "black", width: 40, position: "absolute", right: 130 }}
- type="text" value={value}
+ type="text" defaultValue={value}
onChange={e => setter(e.target.value)}
autoFocus />
<button className="antiMenu-Buttonup" key="up2" onPointerDown={undoBatch(action(() => this.upDownButtons("up", key)))} style={{ right: 110 }}>
@@ -393,7 +385,7 @@ export class FormatShapePane extends AntimodeMenu<AntimodeMenuProps> {
</button>
{title2 === "" ? "" : <>
<input style={{ color: "black", width: 40, position: "absolute", right: 20 }}
- type="text" value={value2}
+ type="text" defaultValue={value2}
onChange={e => setter2(e.target.value)}
autoFocus />
<button className="antiMenu-Buttonup" key="up3" onPointerDown={undoBatch(action(() => this.upDownButtons("up", key2)))}>
@@ -448,7 +440,6 @@ export class FormatShapePane extends AntimodeMenu<AntimodeMenuProps> {
<button className="antimodeMenu-button" key="rot" onPointerDown={action(() => this.rotate(Math.PI / 2))} style={{ position: "absolute", right: 80, }}>
{/* <FontAwesomeIcon icon="bezier-curve" size="lg" /> */}
-
</button>
<br /> <br />
</>;
@@ -488,8 +479,6 @@ export class FormatShapePane extends AntimodeMenu<AntimodeMenuProps> {
{this._fillBtn || this._lineBtn ? "" : <br />}
{(this.solidStk || this.dashdStk) ? "Width" : ""}
{(this.solidStk || this.dashdStk) ? this.stkInput : ""}
-
-
{(this.solidStk || this.dashdStk) ? <input type="range" defaultValue={Number(this.widthStk)} min={1} max={100} onChange={undoBatch(action((e) => this.widthStk = e.target.value))} /> : (null)}
<br />
{(this.solidStk || this.dashdStk) ? <>
@@ -499,10 +488,8 @@ export class FormatShapePane extends AntimodeMenu<AntimodeMenuProps> {
<input key="markTail" className="formatShapePane-inputBtn" type="checkbox" checked={this.markTail !== ""} onChange={undoBatch(action(() => this.markTail = this.markTail ? "" : "arrow"))} style={{ position: "absolute", right: 0, width: 20 }} />
<br />
</> : ""}
- Dash: <input key="markHead" className="formatShapePane-inputBtn" type="checkbox" checked={this.dashdStk === "2"} onChange={undoBatch(action(() => this.dashdStk = this.dashdStk === "2" ? "0" : "2"))} style={{ position: "absolute", right: 110, width: 20 }} />
-
-
-
+ Dash:
+ <input key="markHead" className="formatShapePane-inputBtn" type="checkbox" checked={this.dashdStk === "2"} onChange={undoBatch(action(() => this.dashdStk = this.dashdStk === "2" ? "0" : "2"))} style={{ position: "absolute", right: 110, width: 20 }} />
</div>;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 56791fc81..171b33d42 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -38,6 +38,7 @@ import { LinkDescriptionPopup } from './LinkDescriptionPopup';
import { RadialMenu } from './RadialMenu';
import { TaskCompletionBox } from './TaskCompletedBox';
import React = require("react");
+import { FormatShapePane } from '../collections/collectionFreeForm/FormatShapePane';
export type DocFocusFunc = () => boolean;
@@ -307,15 +308,19 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
}, console.log);
func();
} else if (!Doc.IsSystem(this.props.Document)) {
- UndoManager.RunInBatch(() => {
- let fullScreenDoc = this.props.Document;
- if (StrCast(this.props.Document.layoutKey) !== "layout_fullScreen" && this.props.Document.layout_fullScreen) {
- fullScreenDoc = Doc.MakeAlias(this.props.Document);
- fullScreenDoc.layoutKey = "layout_fullScreen";
- }
- this.props.addDocTab(fullScreenDoc, "inTab");
- }, "double tap");
- SelectionManager.DeselectAll();
+ if (this.props.Document.type === DocumentType.INK) {
+ FormatShapePane.Instance._controlBtn = true;
+ } else {
+ UndoManager.RunInBatch(() => {
+ let fullScreenDoc = this.props.Document;
+ if (StrCast(this.props.Document.layoutKey) !== "layout_fullScreen" && this.props.Document.layout_fullScreen) {
+ fullScreenDoc = Doc.MakeAlias(this.props.Document);
+ fullScreenDoc.layoutKey = "layout_fullScreen";
+ }
+ this.props.addDocTab(fullScreenDoc, "inTab");
+ }, "double tap");
+ SelectionManager.DeselectAll();
+ }
Doc.UnBrushDoc(this.props.Document);
}
}
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 6218fda26..e569dabc1 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -501,7 +501,7 @@ export namespace Doc {
}
export function MakeAlias(doc: Doc, id?: string) {
- const alias = !GetT(doc, "isPrototype", "boolean", true) ? Doc.MakeCopy(doc, undefined, id) : Doc.MakeDelegate(doc, id);
+ const alias = !GetT(doc, "isPrototype", "boolean", true) && doc.proto ? Doc.MakeCopy(doc, undefined, id) : Doc.MakeDelegate(doc, id);
const layout = Doc.LayoutField(alias);
if (layout instanceof Doc && layout !== alias && layout === Doc.Layout(alias)) {
Doc.SetLayout(alias, Doc.MakeAlias(layout));