aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/MainView.tsx4
-rw-r--r--src/client/views/PropertiesButtons.scss12
-rw-r--r--src/client/views/collections/CollectionMenu.tsx11
-rw-r--r--src/client/views/collections/collectionFreeForm/PropertiesView.scss90
-rw-r--r--src/client/views/collections/collectionFreeForm/PropertiesView.tsx88
5 files changed, 153 insertions, 52 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 74be36bda..993c6f4b6 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -378,7 +378,7 @@ export class MainView extends React.Component {
setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
this._propertiesWidth = this._panelWidth - e.clientX;
return false;
- }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 200) : 0), false);
+ }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false);
}
@action
@@ -464,7 +464,7 @@ export class MainView extends React.Component {
onClick={undefined}
ScreenToLocalTransform={this.mainContainerXf}
ContentScaling={returnOne}
- PanelWidth={() => 60}
+ PanelWidth={() => 70}
PanelHeight={this.getContentsHeight}
renderDepth={0}
focus={emptyFunction}
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index 11265b413..e099122c4 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -20,8 +20,8 @@ $linkGap : 3px;
.propertiesButtons-linkButton-empty,
.propertiesButtons-linkButton-nonempty {
- height: 25px;
- width: 25px;
+ height: 30px;
+ width: 30px;
border-radius: 5px;
opacity: 0.9;
pointer-events: auto;
@@ -35,7 +35,7 @@ $linkGap : 3px;
display: flex;
justify-content: center;
align-items: center;
- margin-right: 5px;
+ margin-right: 10px;
&:hover {
background: $main-accent;
@@ -68,12 +68,12 @@ $linkGap : 3px;
padding-right: 5px;
width: 25px;
border-radius: 5px;
- margin-right: 8px;
+ margin-right: 18px;
}
.propertiesButtons-linker {
- height: 25px;
- width: 25px;
+ height: 30px;
+ width: 30px;
text-align: center;
border-radius: 5px;
pointer-events: auto;
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 01374cfbb..498030b71 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -554,11 +554,12 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
}
@computed get formatPane() {
- return <button className="antimodeMenu-button" key="format" title="toggle foramatting pane"
- onPointerDown={action(e => FormatShapePane.Instance.Pinned = !FormatShapePane.Instance.Pinned)}
- style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
- <FontAwesomeIcon icon="angle-double-right" size="lg" />
- </button>;
+ // return <button className="antimodeMenu-button" key="format" title="toggle foramatting pane"
+ // onPointerDown={action(e => FormatShapePane.Instance.Pinned = !FormatShapePane.Instance.Pinned)}
+ // style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
+ // <FontAwesomeIcon icon="angle-double-right" size="lg" />
+ // </button>;
+ return null;
}
render() {
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 0b23d2325..8847fe89d 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -221,7 +221,8 @@
border: 1px solid black;
padding: 5px;
border-radius: 6px;
- width: 170px;
+ /* width: 170px; */
+ margin-right: 10px;
background-color: #ececec;
max-height: 130px;
overflow-y: scroll;
@@ -250,6 +251,9 @@
.propertiesView-sharingTable-item-permission {
display: flex;
+ right: 34;
+ float: right;
+ position: absolute;
.permissions-select {
z-index: 1;
@@ -392,7 +396,7 @@
width: 32;
height: 32;
padding-top: 9px;
- margin-left: 5px;
+ margin-left: 18px;
&:hover {
background: rgb(131, 131, 131);
@@ -505,14 +509,14 @@
}
.strokeAndFill {
-
display: flex;
+ margin-top: 10px;
.fill {
- margin-right: 30px;
+ margin-right: 40px;
display: flex;
padding-bottom: 7px;
- margin-left: 20px;
+ margin-left: 35px;
.fill-title {
font-size: 12px;
@@ -538,4 +542,80 @@
margin-top: -1px;
}
}
+}
+
+.widthAndDash {
+
+ .width {
+ .width-top {
+ display: flex;
+
+ .width-title {
+ font-size: 12;
+ margin-right: 20px;
+ margin-left: 35px;
+ text-align: center;
+ }
+
+ .width-input {
+ margin-right: 30px;
+ margin-top: -10px;
+ }
+ }
+
+ .width-range {
+ margin-right: 1px;
+ margin-bottom: 6;
+ }
+ }
+
+ .arrows {
+
+ display: flex;
+ margin-bottom: 3px;
+
+ .arrows-head {
+
+ display: flex;
+ margin-right: 35px;
+
+ .arrows-head-title {
+ font-size: 12;
+ }
+
+ .arrows-head-input {
+ margin-left: 6px;
+ margin-top: 2px;
+ }
+ }
+
+ .arrows-tail {
+ display: flex;
+
+ .arrows-tail-title {
+ font-size: 12;
+ }
+
+ .arrows-tail-input {
+ margin-left: 6px;
+ margin-top: 2px;
+ }
+ }
+ }
+
+ .dashed {
+
+ display: flex;
+ margin-left: 74px;
+ margin-bottom: 6px;
+
+ .dashed-title {
+ font-size: 12;
+ }
+
+ .dashed-input {
+ margin-left: 6px;
+ margin-top: 2px;
+ }
+ }
} \ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index ca81bf131..f39a75b81 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -26,6 +26,7 @@ import { undoBatch } from "../../../util/UndoManager";
import { ColorState, SketchPicker } from "react-color";
import AntimodeMenu from "../../AntimodeMenu";
import "./FormatShapePane.scss";
+import { discovery_v1 } from "googleapis";
interface PropertiesViewProps {
@@ -295,7 +296,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
}
sharingItem(name: string, effectiveAcl: symbol, permission?: string) {
- return <div className="propertiesView-sharingTable-item" key="name">
+ return <div className="propertiesView-sharingTable-item">
<div className="propertiesView-sharingTable-item-name" style={{ width: name !== "Me" ? "70px" : "80px" }}> {name} </div>
{name !== "Me" ? this.notifyIcon : null}
<div className="propertiesView-sharingTable-item-permission">
@@ -399,11 +400,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
if (ink) {
const newPoints: { X: number, Y: number }[] = [];
- ink.forEach(i => {
- const newX = Math.cos(angle) * (i.X - _centerPoints[index].X) - Math.sin(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].X;
- const newY = Math.sin(angle) * (i.X - _centerPoints[index].X) + Math.cos(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].Y;
+ for (var i = 0; i < ink.length; i++) {
+ const newX = Math.cos(angle) * (ink[i].X - _centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].X;
+ const newY = Math.sin(angle) * (ink[i].X - _centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].Y;
newPoints.push({ X: newX, Y: newY });
- });
+ }
doc.data = new InkField(newPoints);
const xs = newPoints.map(p => p.X);
const ys = newPoints.map(p => p.Y);
@@ -534,7 +535,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
}
getField(key: string) {
- return Field.toString(this.selectedDoc?.[key] as Field);
+ //if (this.selectedDoc) {
+ return Field.toString(this.selectedDoc[key] as Field);
+ // } else {
+ // return undefined as Opt<string>;
+ // }
}
@computed get shapeXps() { return this.getField("x"); }
@@ -565,7 +570,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
private _lastFill = "#D0021B";
private _lastLine = "#D0021B";
- private _lastDash = "2";
+ private _lastDash: any = "2";
@computed get colorFil() { const ccol = this.getField("fillColor") || ""; ccol && (this._lastFill = ccol); return ccol; }
@computed get colorStk() { const ccol = this.getField("color") || ""; ccol && (this._lastLine = ccol); return ccol; }
@@ -629,7 +634,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
}
@computed get solidStk() { return this.selectedDoc?.color && (!this.selectedDoc?.strokeDash || this.selectedDoc?.strokeDash === "0") ? true : false; }
- @computed get dashdStk() { return !this.unStrokd && this.getField("strokeDash") || ""; }
+ @computed get dashdStk() { return this.selectedDoc?.strokeDash || ""; }
@computed get unStrokd() { return this.selectedDoc?.color ? true : false; }
@computed get widthStk() { return this.getField("strokeWidth") || "1"; }
@computed get markHead() { return this.getField("strokeStartMarker") || ""; }
@@ -667,35 +672,50 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
}
@computed get widthAndDash() {
- return <div>{(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) ? <>
- <p style={{ position: "absolute", fontSize: 12 }}>Arrow Head</p>
- <input key="markHead" className="formatShapePane-inputBtn" type="checkbox"
- checked={this.markHead !== ""}
- onChange={undoBatch(action(() => this.markHead = this.markHead ? "" : "arrow"))}
- style={{ position: "absolute", right: 110, width: 20 }} />
- <p style={{ position: "absolute", fontSize: 12, right: 30 }}>Arrow End</p>
- <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 }} />
+ return <div className="widthAndDash">
+ <div className="width">
+ <div className="width-top">
+ <div className="width-title">Width:</div>
+ <div className="width-input">{this.stkInput}</div>
+ </div>
+ <input className="width-range" type="range"
+ defaultValue={Number(this.widthStk)} min={1} max={100}
+ onChange={undoBatch(action((e) => this.widthStk = e.target.value))} />
+ </div>
+
+ <div className="arrows">
+ <div className="arrows-head">
+ <div className="arrows-head-title" >Arrow Head: </div>
+ <input key="markHead" className="arrows-head-input" type="checkbox"
+ checked={this.markHead !== ""}
+ onChange={undoBatch(action(() => this.markHead = this.markHead ? "" : "arrow"))} />
+ </div>
+ <div className="arrows-tail">
+ <div className="arrows-tail-title" >Arrow End: </div>
+ <input key="markTail" className="arrows-tail-input" type="checkbox"
+ checked={this.markTail !== ""}
+ onChange={undoBatch(action(() => this.markTail = this.markTail ? "" : "arrow"))} />
+ </div>
+ </div>
+ <div className="dashed">
+ <div className="dashed-title">Dash:</div>
+ <input key="markHead" className="dashed-input"
+ type="checkbox" checked={this.dashdStk === "2"}
+ onChange={this.changeDash} />
+ </div>
</div>;
}
+ @undoBatch @action
+ changeDash = () => {
+ const dash = this.dashdStk;
+ if (dash === "2") {
+ this.dashdStk = "0";
+ } else {
+ this.dashdStk = "2";
+ }
+ }
+
@computed get appearanceEditor() {
return <div className="appearance-editor">
{this.widthAndDash}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 16:10:51 +0000