From 9f8653ab3d7f82a5d82b925bf339bef8d6723f5c Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 11 Feb 2019 17:37:03 -0500 Subject: added framework for annotation overlays -- see ImageBox --- src/fields/Key.ts | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src/fields/Key.ts') diff --git a/src/fields/Key.ts b/src/fields/Key.ts index 993102613..67a5f86fb 100644 --- a/src/fields/Key.ts +++ b/src/fields/Key.ts @@ -42,11 +42,14 @@ export namespace KeyStore { export const PanX = new Key("PanX"); export const PanY = new Key("PanY"); export const Scale = new Key("Scale"); + export const NativeWidth = new Key("NativeWidth"); export const Width = new Key("Width"); export const Height = new Key("Height"); export const ZIndex = new Key("ZIndex"); export const Data = new Key("Data"); + export const Annotations = new Key("Annotations"); export const Layout = new Key("Layout"); + export const AnnotatedLayout = new Key("AnnotatedLayout"); export const LayoutKeys = new Key("LayoutKeys"); export const LayoutFields = new Key("LayoutFields"); export const ColumnsKey = new Key("SchemaColumns"); -- cgit v1.2.3-70-g09d2 From 793cc99ab134bc5aa4667c95def851ce08d35146 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 11 Feb 2019 21:17:24 -0500 Subject: added aspect resizing. fixed pinch zoom for macs --- src/client/documents/Documents.ts | 15 ++++++++++++--- src/client/views/DocumentDecorations.tsx | 6 ++++-- src/client/views/Main.tsx | 4 ++-- .../views/collections/CollectionFreeFormView.tsx | 17 +++++++++++------ .../views/nodes/CollectionFreeFormDocumentView.tsx | 21 ++++++++++++++++++--- src/fields/Key.ts | 1 + 6 files changed, 48 insertions(+), 16 deletions(-) (limited to 'src/fields/Key.ts') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 12eddaec9..84aaaa78f 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -17,6 +17,8 @@ interface DocumentOptions { y?: number; width?: number; height?: number; + nativeWidth?: number; + nativeHeight?: number; title?: string; } @@ -34,6 +36,12 @@ export namespace Documents { if (options.height) { doc.SetData(KeyStore.Height, options.height, NumberField); } + if (options.nativeWidth) { + doc.SetData(KeyStore.NativeWidth, options.nativeWidth, NumberField); + } + if (options.nativeHeight) { + doc.SetData(KeyStore.NativeHeight, options.nativeHeight, NumberField); + } if (options.title) { doc.SetData(KeyStore.Title, options.title, TextField); } @@ -115,9 +123,10 @@ export namespace Documents { imageProto.Set(KeyStore.Title, new TextField("IMAGE PROTO")); imageProto.Set(KeyStore.X, new NumberField(0)); imageProto.Set(KeyStore.Y, new NumberField(0)); - imageProto.Set(KeyStore.NativeWidth, new NumberField(606)); - imageProto.Set(KeyStore.Width, new NumberField(606)); - imageProto.Set(KeyStore.Height, new NumberField(446)); + imageProto.Set(KeyStore.NativeWidth, new NumberField(300)); + imageProto.Set(KeyStore.NativeHeight, new NumberField(300)); + imageProto.Set(KeyStore.Width, new NumberField(300)); + imageProto.Set(KeyStore.Height, new NumberField(300)); imageProto.Set(KeyStore.Layout, new TextField("")); imageProto.Set(KeyStore.AnnotatedLayout, new TextField(ImageBox.LayoutString())); // imageProto.SetField(KeyStore.Layout, new TextField('
')); diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 8a94bff36..7efaa5533 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -111,8 +111,10 @@ export class DocumentDecorations extends React.Component { let actualdH = Math.max(element.height + (dH * scale), 20); element.x += dX * (actualdW - element.width); element.y += dY * (actualdH - element.height); - element.width = actualdW; - element.height = actualdH; + if (Math.abs(dW) > Math.abs(dH)) + element.width = actualdW; + else + element.height = actualdH; } }) } diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 31a709744..8d474698f 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -44,11 +44,11 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { doc2.Set(KS.X, new NumberField(150)); doc2.Set(KS.Y, new NumberField(20)); let doc3 = Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", { - x: 450, y: 100, title: "cat 1" + x: 450, y: 100, title: "cat 1", width: 606, height: 386, nativeWidth: 606, nativeHeight: 386 }); //doc3.Set(KeyStore.Data, new ImageField); const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", { - x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v + x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v, nativeWidth: 606, nativeHeight: 386 })); schemaDocs[0].SetData(KS.Author, "Tyler", TextField); schemaDocs[4].SetData(KS.Author, "Bob", TextField); diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 9cf8f2e35..bf24965dc 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -34,6 +34,8 @@ export class CollectionFreeFormView extends CollectionViewBase { @computed get nativeWidth() { return this.props.DocumentForCollection.GetNumber(KeyStore.NativeWidth, 0); } + @computed + get nativeHeight() { return this.props.DocumentForCollection.GetNumber(KeyStore.NativeHeight, 0); } @computed get zoomScaling() { return this.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1); } @@ -56,10 +58,8 @@ export class CollectionFreeFormView extends CollectionViewBase { const currScale = this.resizeScaling * this.zoomScaling * this.props.ContainingDocumentView!.ScalingToScreenSpace; const screenX = de.x - xOffset; const screenY = de.y - yOffset; - const docX = (screenX - translateX) / currScale; - const docY = (screenY - translateY) / currScale; - doc.x = docX; - doc.y = docY; + doc.x = (screenX - translateX) / currScale; + doc.y = (screenY - translateY) / currScale; this.bringToFront(doc); } e.stopPropagation(); @@ -118,10 +118,15 @@ export class CollectionFreeFormView extends CollectionViewBase { @action onPointerWheel = (e: React.WheelEvent): void => { e.stopPropagation(); + e.preventDefault(); + let modes = ['pixels', 'lines', 'page']; + let coefficient = 1000; + if (modes[e.deltaMode] == 'pixels') coefficient = 50; + else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height?? let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY); - var deltaScale = (1 - (e.deltaY / 1000)) * Ss; + var deltaScale = (1 - (e.deltaY / coefficient)) * Ss; var newDeltaScale = this.isAnnotationOverlay ? Math.max(1, deltaScale) : deltaScale; this.props.DocumentForCollection.SetNumber(KeyStore.Scale, newDeltaScale); @@ -131,7 +136,7 @@ export class CollectionFreeFormView extends CollectionViewBase { @action private SetPan(panX: number, panY: number) { const newPanX = Math.max(-(this.resizeScaling * this.zoomScaling - this.resizeScaling) * this.nativeWidth, Math.min(0, panX)); - const newPanY = Math.min(0, panY); + const newPanY = Math.max(-(this.resizeScaling * this.zoomScaling - this.resizeScaling) * this.nativeHeight, Math.min(0, panY)); this.props.DocumentForCollection.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX); this.props.DocumentForCollection.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY); } diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index a183db828..fafb470f9 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -53,20 +53,35 @@ export class CollectionFreeFormDocumentView extends DocumentView { @computed get width(): number { - return this.props.Document.GetData(KeyStore.Width, NumberField, Number(0)); + return this.props.Document.GetNumber(KeyStore.Width, 0); + } + + @computed + get nativeWidth(): number { + return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); } set width(w: number) { this.props.Document.SetData(KeyStore.Width, w, NumberField) + if (this.nativeWidth > 0 && this.nativeHeight > 0) { + this.props.Document.SetNumber(KeyStore.Height, this.nativeHeight / this.nativeWidth * w) + } } @computed get height(): number { - return this.props.Document.GetData(KeyStore.Height, NumberField, Number(0)); + return this.props.Document.GetNumber(KeyStore.Height, 0); + } + @computed + get nativeHeight(): number { + return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); } set height(h: number) { - this.props.Document.SetData(KeyStore.Height, h, NumberField) + this.props.Document.SetData(KeyStore.Height, h, NumberField); + if (this.nativeWidth > 0 && this.nativeHeight > 0) { + this.props.Document.SetNumber(KeyStore.Width, this.nativeWidth / this.nativeHeight * h) + } } @computed diff --git a/src/fields/Key.ts b/src/fields/Key.ts index 67a5f86fb..13bdd01d4 100644 --- a/src/fields/Key.ts +++ b/src/fields/Key.ts @@ -43,6 +43,7 @@ export namespace KeyStore { export const PanY = new Key("PanY"); export const Scale = new Key("Scale"); export const NativeWidth = new Key("NativeWidth"); + export const NativeHeight = new Key("NativeHeight"); export const Width = new Key("Width"); export const Height = new Key("Height"); export const ZIndex = new Key("ZIndex"); -- cgit v1.2.3-70-g09d2 From f3359bd32f8c4ecb612d3c95f198d5e248ab6450 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 11 Feb 2019 21:28:09 -0500 Subject: renamed AnnotatedLaout to BackgroundLayout --- src/client/documents/Documents.ts | 2 +- src/client/views/nodes/DocumentView.tsx | 8 ++++---- src/fields/Key.ts | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) (limited to 'src/fields/Key.ts') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 84aaaa78f..8fbf99da6 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -128,7 +128,7 @@ export namespace Documents { imageProto.Set(KeyStore.Width, new NumberField(300)); imageProto.Set(KeyStore.Height, new NumberField(300)); imageProto.Set(KeyStore.Layout, new TextField("")); - imageProto.Set(KeyStore.AnnotatedLayout, new TextField(ImageBox.LayoutString())); + imageProto.Set(KeyStore.BackgroundLayout, new TextField(ImageBox.LayoutString())); // imageProto.SetField(KeyStore.Layout, new TextField('
')); imageProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data, KeyStore.Annotations])); Server.AddDocument(imageProto); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index bba5becc3..a2f8ceebe 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -36,8 +36,8 @@ export class DocumentView extends React.Component { } @computed - get annotatedlayout(): string { - return this.props.Document.GetData(KeyStore.AnnotatedLayout, TextField, String("

Error loading layout data

")); + get backgroundLayout(): string { + return this.props.Document.GetData(KeyStore.BackgroundLayout, TextField, String("

Error loading layout data

")); } @computed @@ -147,11 +147,11 @@ export class DocumentView extends React.Component { var annotated = { console.log(test) }} />; - bindings["BackgroundView"] = this.annotatedlayout ? annotated : null; + bindings["BackgroundView"] = this.backgroundLayout ? annotated : null; return (