aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/ContextMenu.tsx19
-rw-r--r--src/client/views/DocumentDecorations.tsx6
-rw-r--r--src/client/views/EditableView.tsx6
-rw-r--r--src/client/views/InkingControl.tsx11
-rw-r--r--src/client/views/MainView.tsx6
-rw-r--r--src/client/views/nodes/DocumentView.tsx4
-rw-r--r--src/client/views/nodes/KeyValueBox.tsx2
-rw-r--r--src/client/views/nodes/KeyValuePair.tsx3
8 files changed, 38 insertions, 19 deletions
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index fd2f970da..69692dbb8 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -167,17 +167,22 @@ export class ContextMenu extends React.Component {
console.log(this.pageX);
console.log();
+ const contents = (
+ <>
+ <span>
+ <span className="icon-background">
+ <FontAwesomeIcon icon="search" size="lg" />
+ </span>
+ <input className="contextMenu-item contextMenu-description" type="text" placeholder="Search . . ." value={this._searchString} onKeyDown={this.onKeyDown} onChange={this.onChange} autoFocus />
+ </span>
+ {this.menuItems}
+ </>
+ );
return (
<Measure offset onResize={action((r: any) => { this._width = r.offset.width; this._height = r.offset.height; })}>
{({ measureRef }) => (
<div className="contextMenu-cont" style={style} ref={measureRef}>
- <span>
- <span className="icon-background">
- <FontAwesomeIcon icon="search" size="lg" />
- </span>
- <input className="contextMenu-item contextMenu-description" type="text" placeholder="Search . . ." value={this._searchString} onKeyDown={this.onKeyDown} onChange={this.onChange} autoFocus />
- </span>
- {this.menuItems}
+ {contents}
</div>
)
}
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index d8642d675..2c0e18bbb 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -464,16 +464,14 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
runInAction(() => FormattedTextBox.InputBoxOverlay = undefined);
SelectionManager.SelectedDocuments().forEach(element => {
- const rect = element.ContentDiv ? element.ContentDiv.getBoundingClientRect() : new DOMRect();
-
- if (rect.width !== 0 && (dX !== 0 || dY !== 0 || dW !== 0 || dH !== 0)) {
+ if (dX !== 0 || dY !== 0 || dW !== 0 || dH !== 0) {
let doc = PositionDocument(element.props.Document);
let nwidth = doc.nativeWidth || 0;
let nheight = doc.nativeHeight || 0;
let zoomBasis = NumCast(doc.zoomBasis, 1);
let width = (doc.width || 0) / zoomBasis;
let height = (doc.height || (nheight / nwidth * width)) / zoomBasis;
- let scale = width / rect.width;
+ let scale = element.props.ScreenToLocalTransform().Scale;
let actualdW = Math.max(width + (dW * scale), 20);
let actualdH = Math.max(height + (dH * scale), 20);
doc.x = (doc.x || 0) + dX * (actualdW - width);
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 0f6281b5c..97a2d19dd 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -72,10 +72,14 @@ export class EditableView extends React.Component<EditableProps> {
e.stopPropagation();
}
+ stopPropagation(e: React.SyntheticEvent) {
+ e.stopPropagation();
+ }
+
render() {
if (this._editing) {
return <input className="editableView-input" defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus
- onBlur={action(() => this._editing = false)}
+ onBlur={action(() => this._editing = false)} onPointerDown={this.stopPropagation} onClick={this.stopPropagation} onPointerUp={this.stopPropagation}
style={{ display: this.props.display }} />;
} else {
return (
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index b98132c23..0837e07a9 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -28,11 +28,18 @@ export class InkingControl extends React.Component {
switchTool = (tool: InkTool): void => {
this._selectedTool = tool;
}
+ decimalToHexString(number: number) {
+ if (number < 0) {
+ number = 0xFFFFFFFF + number + 1;
+ }
+
+ return number.toString(16).toUpperCase();
+ }
@action
switchColor = (color: ColorResult): void => {
- this._selectedColor = color.hex;
- SelectionManager.SelectedDocuments().forEach(doc => Doc.GetProto(doc.props.Document).backgroundColor = color.hex);
+ this._selectedColor = color.hex + (color.rgb.a !== undefined ? this.decimalToHexString(Math.round(color.rgb.a * 255)) : "ff");
+ SelectionManager.SelectedDocuments().forEach(doc => Doc.GetProto(doc.props.Document).backgroundColor = this._selectedColor);
}
@action
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index e3d4ff8b5..51630c29b 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -3,7 +3,7 @@ import { faFilePdf, faFilm, faFont, faGlobeAsia, faImage, faMusic, faObjectGroup
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, configure, observable, runInAction, trace } from 'mobx';
import { observer } from 'mobx-react';
-import { CirclePicker, SliderPicker, BlockPicker, TwitterPicker } from 'react-color';
+import { CirclePicker, SliderPicker, BlockPicker, TwitterPicker, SketchPicker } from 'react-color';
import "normalize.css";
import * as React from 'react';
import Measure from 'react-measure';
@@ -272,8 +272,8 @@ export class MainView extends React.Component {
<li key="redo"><button className="add-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button></li>
<li key="color"><button className="add-button round-button" title="Redo" onClick={() => this.toggleColorPicker()}><div className="toolbar-color-button" style={{ backgroundColor: InkingControl.Instance.selectedColor }} >
- <div className="toolbar-color-picker" onClick={this.onColorClick} style={this._colorPickerDisplay ? { display: "block" } : { display: "none" }}>
- <TwitterPicker color={InkingControl.Instance.selectedColor} onChange={InkingControl.Instance.switchColor} />
+ <div className="toolbar-color-picker" onClick={this.onColorClick} style={this._colorPickerDisplay ? { color: "black", display: "block" } : { color: "black", display: "none" }}>
+ <SketchPicker color={InkingControl.Instance.selectedColor} onChange={InkingControl.Instance.switchColor} />
</div>
</div></button></li>
{btns.map(btn =>
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index acd5e4cf2..280804630 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -89,6 +89,7 @@ const schema = createSchema({
nativeWidth: "number",
nativeHeight: "number",
backgroundColor: "string",
+ hidden: "boolean"
});
export const positionSchema = createSchema({
@@ -538,6 +539,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
}
render() {
+ if (this.Document.hidden) {
+ return null;
+ }
var scaling = this.props.ContentScaling();
var nativeWidth = this.nativeWidth > 0 ? `${this.nativeWidth}px` : "100%";
var nativeHeight = BoolCast(this.props.Document.ignoreAspect) ? this.props.PanelHeight() / this.props.ContentScaling() : this.nativeHeight > 0 ? `${this.nativeHeight}px` : "100%";
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index 917be734d..3d626eef0 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -54,7 +54,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
field = res.result;
}
if (Field.IsField(field, true)) {
- let target = !eq ? doc : Doc.GetProto(doc);
+ let target = eq ? doc : Doc.GetProto(doc);
target[key] = field;
return true;
}
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index dd1bca7f6..420a1ad94 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -61,10 +61,11 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
</td>
<td className="keyValuePair-td-value" style={{ width: `${100 - this.props.keyWidth}%` }}>
<EditableView contents={contents} height={36} GetValue={() => {
+ const onDelegate = Object.keys(props.Document).includes(props.fieldKey);
let field = FieldValue(props.Document[props.fieldKey]);
if (Field.IsField(field)) {
- return Field.toScriptString(field);
+ return (onDelegate ? "=" : "") + Field.toScriptString(field);
}
return "";
}}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-22 15:27:52 +0000