diff options
Diffstat (limited to 'src')
87 files changed, 1140 insertions, 738 deletions
diff --git a/src/client/ClientRecommender.scss b/src/client/ClientRecommender.scss index 3f9102f15..178c7fdab 100644 --- a/src/client/ClientRecommender.scss +++ b/src/client/ClientRecommender.scss @@ -1,4 +1,4 @@ -// @import "/views/globalCssVariables.scss"; +// @import "/views/global/globalCssVariables.scss"; .space{ border: 1px dashed blue; diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 040571b10..c2cdf7f72 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -30,7 +30,7 @@ import { CollectionDockingView } from "../views/collections/CollectionDockingVie import { CollectionView, CollectionViewType } from "../views/collections/CollectionView"; import { ContextMenu } from "../views/ContextMenu"; import { ContextMenuProps } from "../views/ContextMenuItem"; -import { DFLT_IMAGE_NATIVE_DIM } from "../views/globalCssVariables.scss"; +import { DFLT_IMAGE_NATIVE_DIM } from "../views/global/globalCssVariables.scss"; import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, InkingStroke } from "../views/InkingStroke"; import { AudioBox } from "../views/nodes/AudioBox"; import { ColorBox } from "../views/nodes/ColorBox"; diff --git a/src/client/util/CaptureManager.scss b/src/client/util/CaptureManager.scss index 71539ee1e..a5024247e 100644 --- a/src/client/util/CaptureManager.scss +++ b/src/client/util/CaptureManager.scss @@ -1,4 +1,4 @@ -@import "../views/globalCssVariables"; +@import "../views/global/globalCssVariables"; .capture-interface { //background-color: whitesmoke !important; diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 5bab827d5..22504f102 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -405,14 +405,18 @@ export class CurrentUserUtils { selection: { type: "text", anchor: 1, head: 1 }, storedMarks: [] }; - const headerTemplate = Docs.Create.RTFDocument(new RichTextField(JSON.stringify(json), ""), { title: "header", version: headerViewVersion, target: doc, _height: 70, _headerPointerEvents: "all", _headerHeight: 12, _headerFontSize: 9, _autoHeight: true, system: true, cloneFieldFilter: new List<string>(["system"]) }, "header"); // text needs to be a space to allow templateText to be created + const headerTemplate = Docs.Create.RTFDocument(new RichTextField(JSON.stringify(json), ""), { + title: "text", version: headerViewVersion, target: doc, _height: 70, _headerPointerEvents: "all", + _headerHeight: 12, _headerFontSize: 9, _autoHeight: true, system: true, _fitWidth: true, + cloneFieldFilter: new List<string>(["system"]) + }, "header"); const headerBtnHgt = 10; headerTemplate[DataSym].layout = - "<div style='height:100%'>" + - ` <FormattedTextBox {...props} fieldKey={'text'} height='calc(100% - ${headerBtnHgt}px - {this._headerHeight}px)'/>` + - " <FormattedTextBox {...props} fieldKey={'header'} dontSelectOnLoad='true' ignoreAutoHeight='true' fontSize='{this._headerFontSize}px' height='{this._headerHeight||1}px' background={this._headerColor ||this.target.mySharedDocs.userColor||'lightGray'} />" + - ` <HTMLdiv fontSize='${headerBtnHgt - 1}' onClick={‘(this._headerHeight=Math.min(Math.max(1,this._height-30),this._headerHeight===1?50:1)) && (this._autoHeightMargins=this._headerHeight+${headerBtnHgt})’} height='${headerBtnHgt}px' background='yellow' >Metadata</HTMLdiv>` + - "</div>"; + "<HTMLdiv transformOrigin='top left' width='{100/scale}%' height='{100/scale}%' transform='scale({scale})'>" + + ` <FormattedTextBox {...props} dontScale='true' fieldKey={'text'} height='calc(100% - ${headerBtnHgt}px - {this._headerHeight}px)'/>` + + " <FormattedTextBox {...props} dontScale='true' fieldKey={'header'} dontSelectOnLoad='true' ignoreAutoHeight='true' fontSize='{this._headerFontSize}px' height='{(this._headerHeight||1)}px' background='{this._headerColor ||this.target.mySharedDocs.userColor||`lightGray`}' />" + + ` <HTMLdiv fontSize='${headerBtnHgt - 1}px' height='${headerBtnHgt}px' background='yellow' onClick={‘(this._headerHeight=scale*Math.min(Math.max(1,this._height-30),this._headerHeight===1?50:1)) && (this._autoHeightMargins=this._headerHeight+${headerBtnHgt})’} >Metadata</HTMLdiv>` + + "</HTMLdiv>"; // "<div style={'height:100%'}>" + // " <FormattedTextBox {...props} fieldKey={'header'} dontSelectOnLoad={'true'} ignoreAutoHeight={'true'} pointerEvents='{this._headerPointerEvents||`none`}' fontSize='{this._headerFontSize}px' height='{this._headerHeight}px' background='{this._headerColor||this.target.mySharedDocs.userColor}' />" + diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 88bf6f36d..07b2b7dff 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -9,7 +9,7 @@ import { ScriptField } from "../../fields/ScriptField"; import { Cast, NumCast, ScriptCast, StrCast } from "../../fields/Types"; import { emptyFunction, returnTrue } from "../../Utils"; import { Docs, DocUtils } from "../documents/Documents"; -import * as globalCssVariables from "../views/globalCssVariables.scss"; +import * as globalCssVariables from "../views/global/globalCssVariables.scss"; import { UndoManager } from "./UndoManager"; import { SnappingManager } from "./SnappingManager"; import { DocumentView } from "../views/nodes/DocumentView"; diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 01d00db30..ba935e3bf 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -208,7 +208,7 @@ export namespace InteractionUtils { <polyline points={strpts} style={{ - filter: drawHalo ? "url(#inkSelectionHalo)" : undefined, + // filter: drawHalo ? "url(#inkSelectionHalo)" : undefined, fill: fill ? fill : "none", opacity: strokeWidth !== width ? 0.5 : undefined, pointerEvents: pevents as any, diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index d8342ea56..c9db94419 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -1,4 +1,4 @@ -@import "../views/globalCssVariables"; +@import "../views/global/globalCssVariables"; .settings-interface { //background-color: whitesmoke !important; @@ -264,7 +264,7 @@ //margin-top: 4px; &:hover { - background: $main-accent; + background: $medium-gray; } } diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index a275901be..2bac03af4 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -1,11 +1,11 @@ -@import "./globalCssVariables"; +@import "./global/globalCssVariables"; .antimodeMenu-cont { position: absolute; z-index: 10001; height: $antimodemenu-height; - background: #323232; + background: $dark-gray; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); // border-radius: 0px 6px 6px 6px; z-index: 1001; diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index b514de5f2..795529780 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -1,10 +1,10 @@ -@import "globalCssVariables"; +@import "global/globalCssVariables"; .contextMenu-cont { position: absolute; display: flex; z-index: $contextMenu-zindex; - box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw; + box-shadow: $medium-gray 0.2vw 0.2vw 0.4vw; flex-direction: column; background: whitesmoke; padding-top: 10px; @@ -14,17 +14,17 @@ } // .contextMenu-item:first-child { -// background: $intermediate-color; -// color: $light-color; +// background: $medium-gray; +// color: $white; // } // .contextMenu-item:first-child::placeholder { -// color: $light-color; +// color: $white; // } // .contextMenu-item:first-child:hover { -// background: $intermediate-color; -// color: $light-color; +// background: $medium-gray; +// color: $white; // } .contextMenu-subMenu-cont { @@ -94,7 +94,7 @@ .contextMenu-item:hover { border-width: .11px; border-style: none; - border-color: $intermediate-color; // rgb(187, 186, 186); + border-color: $medium-gray; // rgb(187, 186, 186); border-bottom-style: solid; border-top-style: solid; @@ -122,7 +122,7 @@ transition: all .1s; border-width: .11px; border-style: none; - border-color: $intermediate-color; // rgb(187, 186, 186); + border-color: $medium-gray; // rgb(187, 186, 186); // padding: 10px 0px 10px 0px; white-space: nowrap; font-size: 13px; @@ -137,7 +137,7 @@ .contextMenu-item:hover { transition: all 0.1s ease; - background: $lighter-alt-accent; + background: $light-blue; } .contextMenu-description { diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index da8af7cc0..0b70ce68d 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -119,7 +119,7 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps, T styleFromLayoutString = (scale: number) => { const style: { [key: string]: any } = {}; - const divKeys = ["width", "height", "fontSize", "left", "background", "left", "right", "top", "bottom", "pointerEvents", "position"]; + const divKeys = ["width", "height", "fontSize", "transform", "left", "background", "left", "right", "top", "bottom", "pointerEvents", "position"]; const replacer = (match: any, expr: string, offset: any, string: any) => { // bcz: this executes a script to convert a property expression string: { script } into a value return ScriptField.MakeFunction(expr, { self: Doc.name, this: Doc.name, scale: "number" })?.script.run({ self: this.rootDoc, this: this.layoutDoc, scale }).result as string || ""; }; diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index 09ae14016..2a0b494f5 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -1,4 +1,4 @@ -@import "globalCssVariables"; +@import "global/globalCssVariables"; $linkGap : 3px; @@ -7,13 +7,13 @@ $linkGap : 3px; } .documentButtonBar-linkButton-empty:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } .documentButtonBar-linkButton-nonempty:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } @@ -25,8 +25,8 @@ $linkGap : 3px; border-radius: 50%; opacity: 0.9; pointer-events: auto; - background-color: $dark-color; - color: $light-color; + background-color: $dark-gray; + color: $white; text-transform: uppercase; letter-spacing: 2px; font-size: 75%; @@ -37,7 +37,7 @@ $linkGap : 3px; align-items: center; &:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } @@ -64,12 +64,12 @@ $linkGap : 3px; text-align: center; border-radius: 50%; pointer-events: auto; - background-color: $dark-color; + background-color: $dark-gray; border: none; transition: 0.2s ease all; &:hover { - background-color: $main-accent; + background-color: $medium-gray; } } diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index db2d56aa8..1715f35e7 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -1,4 +1,4 @@ -@import "globalCssVariables"; +@import "global/globalCssVariables"; $linkGap : 3px; @@ -49,7 +49,7 @@ $linkGap : 3px; .documentDecorations-bottomResizer, .documentDecorations-rightResizer { pointer-events: auto; - background: $alt-accent; + background: $medium-gray; opacity: 0.1; &:hover { opacity: 1; @@ -251,13 +251,13 @@ $linkGap : 3px; } .linkButton-empty:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } .linkButton-nonempty:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } @@ -271,7 +271,7 @@ $linkGap : 3px; flex-direction: row; z-index: 998; position: absolute; - background: $alt-accent; + background: $medium-gray; } .linkButtonWrapper { @@ -286,8 +286,8 @@ $linkGap : 3px; text-align: center; border-radius: 50%; pointer-events: auto; - color: $dark-color; - border: $dark-color 1px solid; + color: $dark-gray; + border: $dark-gray 1px solid; } .linkButton-linker:hover { @@ -302,8 +302,8 @@ $linkGap : 3px; border-radius: 50%; opacity: 0.9; pointer-events: auto; - background-color: $dark-color; - color: $light-color; + background-color: $dark-gray; + color: $white; text-transform: uppercase; letter-spacing: 2px; font-size: 75%; @@ -314,7 +314,7 @@ $linkGap : 3px; align-items: center; &:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } @@ -343,13 +343,13 @@ $linkGap : 3px; border-radius: 50%; opacity: 0.9; font-size: 14; - background-color: $dark-color; - color: $light-color; + background-color: $dark-gray; + color: $white; text-align: center; cursor: pointer; &:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); } } @@ -365,7 +365,7 @@ $linkGap : 3px; width: max-content; font-family: $sans-serif; font-size: 12px; - background-color: $light-color-secondary; + background-color: $light-gray; padding: 2px 12px; list-style: none; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 65a97a49d..d24ab974c 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -201,7 +201,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b (e: PointerEvent, down: number[], delta: number[]) => { const movement = { X: delta[0], Y: e.clientY - down[1] }; const angle = Math.max(1, Math.abs(movement.Y / 10)); - InkStrokeProperties.Instance?.rotate(2 * movement.X / angle * (Math.PI / 180)); + InkStrokeProperties.Instance?.rotateInk(2 * movement.X / angle * (Math.PI / 180)); return false; }, () => this._rotateUndo?.end(), diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index c4162a6bb..76eb4c142 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -114,7 +114,7 @@ export class KeyManager { case "escape": DocumentLinksButton.StartLink = undefined; DocumentLinksButton.StartLinkView = undefined; - InkStrokeProperties.Instance && (InkStrokeProperties.Instance._controlBtn = false); + InkStrokeProperties.Instance && (InkStrokeProperties.Instance._controlButton = false); CurrentUserUtils.SelectedTool = InkTool.None; var doDeselect = true; if (SnappingManager.GetIsDragging()) { diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx new file mode 100644 index 000000000..23f22c774 --- /dev/null +++ b/src/client/views/InkControls.tsx @@ -0,0 +1,135 @@ +import React = require("react"); +import { observable, action } from "mobx"; +import { observer } from "mobx-react"; +import { InkStrokeProperties } from "./InkStrokeProperties"; +import { setupMoveUpEvents, emptyFunction } from "../../Utils"; +import { UndoManager } from "../util/UndoManager"; +import { ControlPoint, InkData, PointData } from "../../fields/InkField"; +import { Transform } from "../util/Transform"; + +export interface InkControlProps { + data: InkData; + addedPoints: PointData[]; + format: number[]; + ScreenToLocalTransform: () => Transform; +} + +@observer +export class InkControls extends React.Component<InkControlProps> { + @observable private _overControl = -1; + @observable private _overAddPoint = -1; + + /** + * Handles the movement of a selected control point when the user clicks and drags. + * @param controlIndex The index of the currently selected control point. + */ + @action + onControlDown = (e: React.PointerEvent, controlIndex: number): void => { + if (InkStrokeProperties.Instance) { + InkStrokeProperties.Instance.moveControl(0, 0, 1); + const controlUndo = UndoManager.StartBatch("DocDecs set radius"); + const screenScale = this.props.ScreenToLocalTransform().Scale; + const order = controlIndex % 4; + const handleIndexA = order === 2 ? controlIndex - 1 : controlIndex - 2; + const handleIndexB = order === 2 ? controlIndex + 2 : controlIndex + 1; + setupMoveUpEvents(this, e, + (e: PointerEvent, down: number[], delta: number[]) => { + InkStrokeProperties.Instance?.moveControl(-delta[0] * screenScale, -delta[1] * screenScale, controlIndex); + return false; + }, + () => controlUndo?.end(), + emptyFunction); + // action((e: PointerEvent, doubleTap: boolean | undefined) => + // { if (doubleTap && InkStrokeProperties.Instance?._brokenIndices.includes(controlIndex)) { + // InkStrokeProperties.Instance?.snapHandleTangent(controlIndex, handleIndexA, handleIndexB); + // }})); + } + } + + /** + * Deletes the currently selected point. + */ + @action + onDelete = (e: KeyboardEvent) => { + if (["-", "Backspace", "Delete"].includes(e.key)) { + if (InkStrokeProperties.Instance?.deletePoints()) e.stopPropagation(); + } + } + + /** + * Changes the current selected control point. + */ + @action + changeCurrPoint = (i: number) => { + if (InkStrokeProperties.Instance) { + InkStrokeProperties.Instance._currentPoint = i; + document.addEventListener("keydown", this.onDelete, true); + } + } + + /** + * Updates whether a user has hovered over a particular control point or point that could be added + * on click. + */ + @action onEnterControl = (i: number) => { this._overControl = i; }; + @action onLeaveControl = () => { this._overControl = -1; }; + @action onEnterAddPoint = (i: number) => { this._overAddPoint = i; }; + @action onLeaveAddPoint = () => { this._overAddPoint = -1; }; + + render() { + const formatInstance = InkStrokeProperties.Instance; + if (!formatInstance) return (null); + + // Accessing the current ink's data and extracting all control points. + const data = this.props.data; + const controlPoints: ControlPoint[] = []; + if (data.length >= 4) { + for (let i = 0; i <= data.length - 4; i += 4) { + controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i }); + controlPoints.push({ X: data[i + 3].X, Y: data[i + 3].Y, I: i + 3 }); + } + } + const addedPoints = this.props.addedPoints; + const [left, top, scaleX, scaleY, strokeWidth, dotsize] = this.props.format; + + return ( + <> + {addedPoints.map((pts, i) => + <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={strokeWidth / 2} + stroke={this._overAddPoint === i ? "#1F85DE" : "transparent"} + strokeWidth={dotsize / 4} fill={this._overAddPoint === i ? "#1F85DE" : "transparent"} + onPointerDown={() => { formatInstance?.addPoints(pts.X, pts.Y, addedPoints, i, controlPoints); }} + onMouseEnter={() => this.onEnterAddPoint(i)} + onMouseLeave={this.onLeaveAddPoint} + pointerEvents="all" + cursor="all-scroll" + /> + </svg> + )} + {controlPoints.map((control, i) => + <svg height="10" width="10" key={`ctrl${i}`}> + <rect + x={(control.X - left - strokeWidth / 2) * scaleX} + y={(control.Y - top - strokeWidth / 2) * scaleY} + height={this._overControl === i ? strokeWidth * 1.5 : strokeWidth} + width={this._overControl === i ? strokeWidth * 1.5 : strokeWidth} + strokeWidth={strokeWidth / 6} stroke="#1F85DE" + fill={formatInstance?._currentPoint === control.I ? "#1F85DE" : "white"} + onPointerDown={(e) => { + this.changeCurrPoint(control.I); + this.onControlDown(e, control.I); }} + onMouseEnter={() => this.onEnterControl(i)} + onMouseLeave={this.onLeaveControl} + pointerEvents="all" + cursor="default" + /> + </svg> + )} + </> + ); + } +}
\ No newline at end of file diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx new file mode 100644 index 000000000..28b6dd820 --- /dev/null +++ b/src/client/views/InkHandles.tsx @@ -0,0 +1,122 @@ +import React = require("react"); +import { observable, action } from "mobx"; +import { observer } from "mobx-react"; +import { InkStrokeProperties } from "./InkStrokeProperties"; +import { setupMoveUpEvents, emptyFunction } from "../../Utils"; +import { UndoManager } from "../util/UndoManager"; +import { InkData, HandlePoint, HandleLine } from "../../fields/InkField"; +import { Transform } from "../util/Transform"; +import { Doc } from "../../fields/Doc"; +import { listSpec } from "../../fields/Schema"; +import { List } from "../../fields/List"; +import { Cast } from "../../fields/Types"; + +export interface InkHandlesProps { + inkDoc: Doc; + data: InkData; + format: number[]; + ScreenToLocalTransform: () => Transform; +} + +@observer +export class InkHandles extends React.Component<InkHandlesProps> { + /** + * Handles the movement of a selected handle point when the user clicks and drags. + * @param handleNum The index of the currently selected handle point. + */ + onHandleDown = (e: React.PointerEvent, handleIndex: number): void => { + if (InkStrokeProperties.Instance) { + InkStrokeProperties.Instance.moveControl(0, 0, 1); + const controlUndo = UndoManager.StartBatch("DocDecs set radius"); + const screenScale = this.props.ScreenToLocalTransform().Scale; + const order = handleIndex % 4; + const oppositeHandleIndex = order === 1 ? handleIndex - 3 : handleIndex + 3; + const controlIndex = order === 1 ? handleIndex - 1 : handleIndex + 2; + document.addEventListener("keydown", (e: KeyboardEvent) => this.onBreakTangent(e, controlIndex), true); + setupMoveUpEvents(this, e, (e: PointerEvent, down: number[], delta: number[]) => { + InkStrokeProperties.Instance?.moveHandle(-delta[0] * screenScale, -delta[1] * screenScale, handleIndex, oppositeHandleIndex, controlIndex); + return false; + }, () => controlUndo?.end(), emptyFunction + ); + } + } + + /** + * Breaks tangent handle movement when ‘Alt’ key is held down. Adds the current handle index and + * its matching (opposite) handle to a list of broken handle indices. + * @param handleNum The index of the currently selected handle point. + */ + @action + onBreakTangent = (e: KeyboardEvent, controlIndex: number) => { + const doc: Doc = this.props.inkDoc; + if (["Alt"].includes(e.key)) { + if (doc) { + const brokenIndices = Cast(doc.brokenInkIndices, listSpec("number")) || new List; + if (brokenIndices && !brokenIndices.includes(controlIndex)) { + brokenIndices.push(controlIndex); + } + doc.brokenInkIndices = brokenIndices; + } + } + } + + render() { + const formatInstance = InkStrokeProperties.Instance; + if (!formatInstance) return (null); + + // Accessing the current ink's data and extracting all handle points and handle lines. + const data = this.props.data; + const handlePoints: HandlePoint[] = []; + const handleLines: HandleLine[] = []; + if (data.length >= 4) { + for (let i = 0; i <= data.length - 4; i += 4) { + handlePoints.push({ X: data[i + 1].X, Y: data[i + 1].Y, I: i + 1, dot1: i, dot2: i === 0 ? i : i - 1 }); + handlePoints.push({ X: data[i + 2].X, Y: data[i + 2].Y, I: i + 2, dot1: i + 3, dot2: i === data.length ? i + 3 : i + 4 }); + } + // Adding first and last (single) handle lines. + handleLines.push({ X1: data[0].X, Y1: data[0].Y, X2: data[0].X, Y2: data[0].Y, X3: data[1].X, Y3: data[1].Y, dot1: 0, dot2: 0 }); + handleLines.push({ X1: data[data.length - 2].X, Y1: data[data.length - 2].Y, X2: data[data.length - 1].X, Y2: data[data.length - 1].Y, X3: data[data.length - 1].X, Y3: data[data.length - 1].Y, dot1: data.length - 1, dot2: data.length - 1 }); + for (let i = 2; i < data.length - 4; i += 4) { + handleLines.push({ X1: data[i].X, Y1: data[i].Y, X2: data[i + 1].X, Y2: data[i + 1].Y, X3: data[i + 3].X, Y3: data[i + 3].Y, dot1: i + 1, dot2: i + 2 }); + } + } + const [left, top, scaleX, scaleY, strokeWidth, dotsize] = this.props.format; + + return ( + <> + {handlePoints.map((pts, i) => + <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={strokeWidth / 2} + strokeWidth={0} + fill="#1F85DE" + onPointerDown={(e) => this.onHandleDown(e, pts.I)} + pointerEvents="all" + cursor="default" + display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} /> + </svg>)} + {handleLines.map((pts, i) => + <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="#1F85DE" + strokeWidth={dotsize / 8} + display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "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="#1F85DE" + strokeWidth={dotsize / 8} + display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} /> + </svg>)} + </> + ); + } +}
\ No newline at end of file diff --git a/src/client/views/InkStroke.scss b/src/client/views/InkStroke.scss new file mode 100644 index 000000000..812a79bd5 --- /dev/null +++ b/src/client/views/InkStroke.scss @@ -0,0 +1,11 @@ +.inkStroke { + mix-blend-mode: multiply; + stroke-linejoin: round; + stroke-linecap: round; + overflow: visible !important; + transform-origin: top left; + + svg:not(:root) { + overflow: visible !important; + } +} diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts index b13b04f68..1a3585f3e 100644 --- a/src/client/views/InkStrokeProperties.ts +++ b/src/client/views/InkStrokeProperties.ts @@ -1,124 +1,44 @@ import { action, computed, observable } from "mobx"; -import { ColorState } from 'react-color'; -import { Doc, Field, Opt } from "../../fields/Doc"; +import { Doc, DocListCast, Field, Opt } from "../../fields/Doc"; import { Document } from "../../fields/documentSchemas"; -import { InkField, InkData } from "../../fields/InkField"; +import { InkField, InkData, PointData, ControlPoint } from "../../fields/InkField"; +import { List } from "../../fields/List"; +import { listSpec } from "../../fields/Schema"; import { Cast, NumCast } from "../../fields/Types"; import { DocumentType } from "../documents/DocumentTypes"; import { SelectionManager } from "../util/SelectionManager"; import { undoBatch } from "../util/UndoManager"; -import { bool } from "sharp"; export class InkStrokeProperties { static Instance: InkStrokeProperties | undefined; - private _lastFill = "#D0021B"; - private _lastLine = "#D0021B"; - private _lastDash = "2"; - private _inkDocs: { x: number, y: number, width: number, height: number }[] = []; - @observable _lock = false; - @observable _controlBtn = false; - @observable _currPoint = -1; + @observable _controlButton = false; + @observable _currentPoint = -1; - getField(key: string) { - return this.selectedInk?.reduce((p, i) => - (p === undefined || (p && p === i.rootDoc[key])) && i.rootDoc[key] !== "0" ? Field.toString(i.rootDoc[key] as Field) : "", undefined as Opt<string>); + constructor() { + InkStrokeProperties.Instance = this; } @computed get selectedInk() { const inks = SelectionManager.Views().filter(i => Document(i.rootDoc).type === DocumentType.INK); return inks.length ? inks : undefined; } - @computed get unFilled() { return this.selectedInk?.reduce((p, i) => p && !i.rootDoc.fillColor ? true : false, true) || false; } - @computed get unStrokd() { return this.selectedInk?.reduce((p, i) => p && !i.rootDoc.color ? true : false, true) || false; } - @computed get solidFil() { return this.selectedInk?.reduce((p, i) => p && i.rootDoc.fillColor ? true : false, true) || false; } - @computed get solidStk() { return this.selectedInk?.reduce((p, i) => p && i.rootDoc.color && (!i.rootDoc.strokeDash || i.rootDoc.strokeDash === "0") ? true : false, true) || false; } - @computed get dashdStk() { return !this.unStrokd && this.getField("strokeDash") || ""; } - @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; } - @computed get widthStk() { return this.getField("strokeWidth") || "1"; } - @computed get markHead() { return this.getField("strokeStartMarker") || ""; } - @computed get markTail() { return this.getField("strokeEndMarker") || ""; } - @computed get shapeHgt() { return this.getField("_height"); } - @computed get shapeWid() { return this.getField("_width"); } - @computed get shapeXps() { return this.getField("x"); } - @computed get shapeYps() { return this.getField("y"); } - @computed get shapeRot() { return this.getField("rotation"); } - set unFilled(value) { this.colorFil = value ? "" : this._lastFill; } - set solidFil(value) { this.unFilled = !value; } - set colorFil(value) { value && (this._lastFill = value); this.selectedInk?.forEach(i => i.rootDoc.fillColor = value ? value : undefined); } - set colorStk(value) { value && (this._lastLine = value); this.selectedInk?.forEach(i => i.rootDoc.color = value ? value : undefined); } - set markHead(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeStartMarker = value); } - set markTail(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeEndMarker = value); } - set unStrokd(value) { this.colorStk = value ? "" : this._lastLine; } - set solidStk(value) { this.dashdStk = ""; this.unStrokd = !value; } - set dashdStk(value) { - value && (this._lastDash = value) && (this.unStrokd = false); - this.selectedInk?.forEach(i => i.rootDoc.strokeDash = value ? this._lastDash : undefined); - } - set shapeXps(value) { this.selectedInk?.forEach(i => i.rootDoc.x = Number(value)); } - set shapeYps(value) { this.selectedInk?.forEach(i => i.rootDoc.y = Number(value)); } - set shapeRot(value) { this.selectedInk?.forEach(i => i.rootDoc.rotation = Number(value)); } - set widthStk(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeWidth = Number(value)); } - set shapeWid(value) { - this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { - const oldWidth = NumCast(i.rootDoc._width); - i.rootDoc._width = Number(value); - this._lock && (i.rootDoc._height = (i.rootDoc._width * NumCast(i.rootDoc._height)) / oldWidth); - }); - } - set shapeHgt(value) { - this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { - const oldHeight = NumCast(i.rootDoc._height); - i.rootDoc._height = Number(value); - this._lock && (i.rootDoc._width = (i.rootDoc._height * NumCast(i.rootDoc._width)) / oldHeight); - }); - } - - constructor() { - InkStrokeProperties.Instance = this; - } - - @undoBatch - @action - addPoints = (x: number, y: number, pts: { X: number, Y: number }[], index: number, control: { X: number, Y: number }[]) => { - this.selectedInk?.forEach(action(inkView => { - if (this.selectedInk?.length === 1) { - const doc = Document(inkView.rootDoc); - if (doc.type === DocumentType.INK) { - const ink = Cast(doc.data, InkField)?.inkData; - if (ink) { - const newPoints: { X: number, Y: number }[] = []; - var counter = 0; - for (var k = 0; k < index; k++) { - control.forEach(pt => (pts[k].X === pt.X && pts[k].Y === pt.Y) && counter++); - } - //decide where to put the new coordinate - const spNum = Math.floor(counter / 2) * 4 + 2; - - for (var i = 0; i < spNum; i++) { - 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 }); - } - for (var i = spNum; i < ink.length; i++) { - newPoints.push({ X: ink[i].X, Y: ink[i].Y }); - } - this._currPoint = -1; - Doc.GetProto(doc).data = new InkField(newPoints); - } - } - } - })); + getField(key: string) { + return this.selectedInk?.reduce((p, i) => + (p === undefined || (p && p === i.rootDoc[key])) && i.rootDoc[key] !== "0" ? Field.toString(i.rootDoc[key] as Field) : "", undefined as Opt<string>); } - applyFunction = (func: (doc: Doc, ink: InkData, ptsXscale: number, ptsYscale: number) => { X: number, Y: number }[] | undefined, requireCurrPoint: boolean = false) => { + /** + * Helper function that enables other functions to be applied to a particular ink instance. + * @param func The inputted function. + * @param requireCurrPoint Indicates whether the current selected point is needed. + */ + applyFunction = (func: (doc: Doc, ink: InkData, ptsXscale: number, ptsYscale: number) => { X: number, Y: number }[] | undefined, requireCurrPoint: boolean = false) => { var appliedFunc = false; this.selectedInk?.forEach(action(inkView => { - if (this.selectedInk?.length === 1 && (!requireCurrPoint || this._currPoint !== -1)) { + if (this.selectedInk?.length === 1 && (!requireCurrPoint || this._currentPoint !== -1)) { const doc = Document(inkView.rootDoc); if (doc.type === DocumentType.INK && doc.width && doc.height) { const ink = Cast(doc.data, InkField)?.inkData; @@ -145,17 +65,136 @@ export class InkStrokeProperties { return appliedFunc; } + /** + * Adds a new control point to the ink instance when editing its format. + * @param index The index of the new point. + * @param control The list of all control points of the ink. + */ + @undoBatch + @action + addPoints = (x: number, y: number, points: InkData, index: number, controls: { X: number, Y: number }[]) => { + this.applyFunction((doc: Doc, ink: InkData) => { + const newControl = { X: x, Y: y }; + const newPoints: InkData = []; + let [counter, start, end] = [0, 0, 0]; + for (let k = 0; k < points.length; k++) { + if (end === 0) { + controls.forEach((control) => { + if (control.X === points[k].X && control.Y === points[k].Y) { + if (k < index) { + counter++; + start = k; + } else if (k > index) { + end = k; + } + } + }); + } + } + if (end === 0) end = points.length-1; + // Index of new control point with regards to the ink data. + const newIndex = Math.floor(counter / 2) * 4 + 2; + // Creating new ink data with the new control point and handle points inputted. + for (let i = 0; i < ink.length; i++) { + if (i === newIndex) { + const [handleA, handleB] = this.getNewHandlePoints(points.slice(start, index+1), points.slice(index, end), newControl); + newPoints.push(handleA, newControl, newControl, handleB); + // Adjusting the magnitude of the left handle line of the right neighboring control point. + const [rightControl, rightHandle] = [points[end], ink[i]]; + const scaledVector = this.getScaledHandlePoint(false, start, end, index, rightControl, rightHandle); + rightHandle && newPoints.push({ X: rightControl.X - scaledVector.X, Y: rightControl.Y - scaledVector.Y }); + } else if (i === newIndex - 1) { + // Adjusting the magnitude of the right handle line of the left neighboring control point. + const [leftControl, leftHandle] = [points[start], ink[i]]; + const scaledVector = this.getScaledHandlePoint(true, start, end, index, leftControl, leftHandle); + leftHandle && newPoints.push({ X: leftControl.X - scaledVector.X, Y: leftControl.Y - scaledVector.Y }); + } else { + ink[i] && newPoints.push({ X: ink[i].X, Y: ink[i].Y }); + } + + } + let brokenIndices = Cast(doc.brokenInkIndices, listSpec("number")); + // Updating the indices of the control points whose handle tangency has been broken. + if (brokenIndices) { + brokenIndices = new List(brokenIndices.map((control) => { + if (control >= newIndex) { + return control + 4; + } else { + return control; + } + })); + } + doc.brokenInkIndices = brokenIndices; + this._currentPoint = -1; + return newPoints; + }); + } + + /** + * Scales a handle point of a control point that is adjacent to a newly added one. + * @param isLeft Determines if the current control point is on the left or right side of the newly added one. + * @param start Beginning index of curve from the left control point to the newly added one. + * @param end Final index of curve from the newly added control point to its right neighbor. + */ + getScaledHandlePoint(isLeft: boolean, start: number, end: number, index: number, control: PointData, handle: PointData) { + const prevSize = end - start; + const newSize = isLeft ? index - start : end - index; + const handleVector = { X: control.X - handle.X, Y: control.Y - handle.Y }; + const scaledVector = { X: handleVector.X * (newSize / prevSize), Y: handleVector.Y * (newSize / prevSize) }; + return scaledVector; + } + + /** + * Determines the position of the handle points of a newly added control point by finding the + * tangent vectors to the split curve at the new control. Given the properties of Bézier curves, + * the tangent vector to a control point is equivalent to the first/last (depending on the direction + * of the curve) leg of the Bézier curve's derivative. + * (Source: https://pages.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/Bezier/bezier-der.html) + * + * @param C The curve represented by all points from the previous control until the newly added point. + * @param D The curve represented by all points from the newly added point to the next control. + * @param newControl The newly added control point. + */ + getNewHandlePoints = (C: PointData[], D: PointData[], newControl: PointData) => { + const [m, n] = [C.length, D.length]; + let handleSizeA = Math.sqrt((Math.pow(newControl.X - C[0].X, 2)) + (Math.pow(newControl.Y - C[0].Y, 2))); + let handleSizeB = Math.sqrt((Math.pow(D[n-1].X - newControl.X, 2)) + (Math.pow(D[n-1].Y - newControl.Y, 2))); + // Scaling adjustments to improve the ratio between the magnitudes of the two handle lines. + // (Ensures that the new point added doesn't augment the inital shape of the curve much). + if (handleSizeA < 75 && handleSizeB < 75) { + handleSizeA *= 3; + handleSizeB *= 3; + } + if (Math.abs(handleSizeA - handleSizeB) < 50) { + handleSizeA *= 5; + handleSizeB *= 5; + } else if (Math.abs(handleSizeA - handleSizeB) < 150) { + handleSizeA *= 2; + handleSizeB *= 2; + } + // Finding the last leg of the derivative curve of C. + const dC = { X: (handleSizeA / n) * (C[m-1].X - C[m-2].X), Y: (handleSizeA / n) * (C[m-1].Y - C[m-2].Y) }; + // Finding the first leg of the derivative curve of D. + const dD = { X: (handleSizeB / m) * (D[1].X - D[0].X), Y: (handleSizeB / m) * (D[1].Y - D[0].Y) }; + const handleA = { X: newControl.X - dC.X, Y: newControl.Y - dC.Y }; + const handleB = { X: newControl.X + dD.X, Y: newControl.Y + dD.Y }; + return [handleA, handleB]; + } + + /** + * Deletes the current control point of the selected ink instance. + */ @undoBatch @action deletePoints = () => this.applyFunction((doc: Doc, ink: InkData) => { - var newPoints: { X: number, Y: number }[] = []; - const toRemove = Math.floor(((this._currPoint + 2) / 4)); - for (var i = 0; i < ink.length; i++) { + const newPoints: { X: number, Y: number }[] = []; + const toRemove = Math.floor(((this._currentPoint + 2) / 4)); + for (let i = 0; i < ink.length; i++) { if (Math.floor((i + 2) / 4) !== toRemove && (toRemove !== 0 || i > 3)) { newPoints.push({ X: ink[i].X, Y: ink[i].Y }); } } - this._currPoint = -1; + this._currentPoint = -1; if (newPoints.length < 4) return undefined; if (newPoints.length === 4) { const newerPoints: { X: number, Y: number }[] = []; @@ -166,12 +205,16 @@ export class InkStrokeProperties { return newerPoints; } return newPoints; - }, true); + }, true) + /** + * Rotates the entire selected ink instance. + * @param angle The angle at which to rotate the ink in radians. + */ @undoBatch @action - rotate = (angle: number) => { - this.applyFunction((doc: Doc, ink: InkData, ptsXscale: number, ptsYscale: number) => { + rotateInk = (angle: number) => { + this.applyFunction((doc: Doc, ink: InkData, xScale: number, yScale: number) => { const oldXrange = (xs => ({ coord: NumCast(doc.x), min: Math.min(...xs), max: Math.max(...xs) }))(ink.map(p => p.X)); const oldYrange = (ys => ({ coord: NumCast(doc.y), min: Math.min(...ys), max: Math.max(...ys) }))(ink.map(p => p.Y)); const centerPoint = { X: (oldXrange.min + oldXrange.max) / 2, Y: (oldYrange.min + oldYrange.max) / 2 }; @@ -186,42 +229,108 @@ export class InkStrokeProperties { }); } + /** + * Handles the movement/scaling of a control point. + */ @undoBatch @action - control = (xDiff: number, yDiff: number, controlNum: number) => - this.applyFunction((doc: Doc, ink: InkData, ptsXscale: number, ptsYscale: number) => { + moveControl = (deltaX: number, deltaY: number, controlIndex: number) => + this.applyFunction((doc: Doc, ink: InkData, xScale: number, yScale: number) => { const newPoints: { X: number, Y: number }[] = []; - const order = controlNum % 4; + const order = controlIndex % 4; for (var i = 0; i < ink.length; i++) { - newPoints.push( - (controlNum === i || - (order === 0 && i === controlNum + 1) || - (order === 0 && controlNum !== 0 && i === controlNum - 2) || - (order === 0 && controlNum !== 0 && i === controlNum - 1) || - (order === 3 && i === controlNum - 1) || - (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 1) || - (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 2) || - ((ink[0].X === ink[ink.length - 1].X) && (ink[0].Y === ink[ink.length - 1].Y) && (i === 0 || i === ink.length - 1) && (controlNum === 0 || controlNum === ink.length - 1)) - ) ? - { X: ink[i].X - xDiff / ptsXscale, Y: ink[i].Y - yDiff / ptsYscale } : - { X: ink[i].X, Y: ink[i].Y }); + const leftHandlePoint = order === 0 && i === controlIndex + 1; + const rightHandlePoint = order === 0 && controlIndex !== 0 && i === controlIndex - 2; + if (controlIndex === i || + leftHandlePoint || + rightHandlePoint || + (order === 0 && controlIndex !== 0 && i === controlIndex - 1) || + (order === 3 && i === controlIndex - 1) || + (order === 3 && controlIndex !== ink.length - 1 && i === controlIndex + 1) || + (order === 3 && controlIndex !== ink.length - 1 && i === controlIndex + 2) || + ((ink[0].X === ink[ink.length - 1].X) && (ink[0].Y === ink[ink.length - 1].Y) && (i === 0 || i === ink.length - 1) && (controlIndex === 0 || controlIndex === ink.length - 1))) { + newPoints.push({ X: ink[i].X - deltaX / xScale, Y: ink[i].Y - deltaY / yScale }); + } else { + newPoints.push({ X: ink[i].X, Y: ink[i].Y }); + } } return newPoints; + }) + + snapHandleTangent = (controlIndex: number, handleIndexA: number, handleIndexB: number) => { + this.applyFunction((doc: Doc, ink: InkData) => { + // doc.brokenIndices.splice(this._brokenIndices.indexOf(controlIndex), 1); + const [controlPoint, handleA, handleB] = [ink[controlIndex], ink[handleIndexA], ink[handleIndexB]]; + const oppositeHandleA = this.rotatePoint(handleA, controlPoint, Math.PI); + const angleDifference = this.angleChange(handleB, oppositeHandleA, controlPoint); + const newHandleB = this.rotatePoint(handleB, controlPoint, angleDifference); + ink[handleIndexB] = newHandleB; + return ink; }); + } - @undoBatch + /** + * Rotates the target point about the origin point for a given angle (radians). + */ @action - switchStk = (color: ColorState) => { - const val = String(color.hex); - this.colorStk = val; - return true; + rotatePoint = (target: PointData, origin: PointData, angle: number) => { + target.X -= origin.X; + target.Y -= origin.Y; + const newX = Math.cos(angle) * target.X - Math.sin(angle) * target.Y; + const newY = Math.sin(angle) * target.X + Math.cos(angle) * target.Y; + target.X = newX + origin.X; + target.Y = newY + origin.Y; + return target; + } + + /** + * Finds the angle (in radians) between two inputted vectors. + * + * α = arccos(a·b / |a|·|b|), where a and b are both vectors. + */ + angleBetweenTwoVectors = (vectorA: PointData, vectorB: PointData) => { + const magnitudeA = Math.sqrt(vectorA.X * vectorA.X + vectorA.Y * vectorA.Y); + const magnitudeB = Math.sqrt(vectorB.X * vectorB.X + vectorB.Y * vectorB.Y); + // Normalizing the vectors. + vectorA = { X: vectorA.X / magnitudeA, Y: vectorA.Y / magnitudeA }; + vectorB = { X: vectorB.X / magnitudeB, Y: vectorB.Y / magnitudeB }; + const dotProduct = vectorB.X * vectorA.X + vectorB.Y * vectorA.Y; + return Math.acos(dotProduct); } + /** + * Finds the angle difference (in radians) between two vectors relative to an arbitrary origin. + */ + angleChange = (a: PointData, b: PointData, origin: PointData) => { + // Finding vector representation of inputted points relative to new origin. + const vectorA = { X: a.X - origin.X, Y: a.Y - origin.Y }; + const vectorB = { X: b.X - origin.X, Y: b.Y - origin.Y }; + const crossProduct = vectorB.X * vectorA.Y - vectorB.Y * vectorA.X; + // Determining whether rotation is clockwise or counterclockwise. + const sign = crossProduct < 0 ? 1 : -1; + const theta = this.angleBetweenTwoVectors(vectorA, vectorB); + return sign * theta; + } + + /** + * Handles the movement/scaling of a handle point. + */ @undoBatch @action - switchFil = (color: ColorState) => { - const val = String(color.hex); - this.colorFil = val; - return true; - } + moveHandle = (deltaX: number, deltaY: number, handleIndex: number, oppositeHandleIndex: number, controlIndex: number) => + this.applyFunction((doc: Doc, ink: InkData, xScale: number, yScale: number) => { + const oldHandlePoint = ink[handleIndex]; + let oppositeHandlePoint = ink[oppositeHandleIndex]; + const controlPoint = ink[controlIndex]; + const newHandlePoint = { X: ink[handleIndex].X - deltaX / xScale, Y: ink[handleIndex].Y - deltaY / yScale }; + ink[handleIndex] = newHandlePoint; + const brokenIndices = Cast(doc.brokenInkIndices, listSpec("number")); + // Rotate opposite handle if user hasn't held 'Alt' key or not first/final control (which have only 1 handle). + if ((!brokenIndices || !brokenIndices?.includes(controlIndex)) && handleIndex !== 1 && handleIndex !== ink.length - 2) { + const angle = this.angleChange(oldHandlePoint, newHandlePoint, controlPoint); + oppositeHandlePoint = this.rotatePoint(oppositeHandlePoint, controlPoint, angle); + ink[oppositeHandleIndex] = oppositeHandlePoint; + } + return ink; + }) }
\ No newline at end of file diff --git a/src/client/views/InkingStroke.scss b/src/client/views/InkingStroke.scss deleted file mode 100644 index 30ab1967e..000000000 --- a/src/client/views/InkingStroke.scss +++ /dev/null @@ -1,11 +0,0 @@ -.inkingStroke { - mix-blend-mode: multiply; - stroke-linejoin: round; - stroke-linecap: round; - overflow: visible !important; - transform-origin: top left; - - svg:not(:root) { - overflow: visible !important; - } -}
\ No newline at end of file diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 449019ca8..bd71aaf19 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -1,4 +1,5 @@ -import { action } from "mobx"; +import React = require("react"); +import { action, observable } from "mobx"; import { observer } from "mobx-react"; import { Doc } from "../../fields/Doc"; import { documentSchema } from "../../fields/documentSchemas"; @@ -10,180 +11,110 @@ import { setupMoveUpEvents, emptyFunction, returnFalse } from "../../Utils"; import { CognitiveServices } from "../cognitive_services/CognitiveServices"; import { InteractionUtils } from "../util/InteractionUtils"; import { Scripting } from "../util/Scripting"; -import { UndoManager } from "../util/UndoManager"; import { ContextMenu } from "./ContextMenu"; import { ViewBoxBaseComponent } from "./DocComponent"; -import "./InkingStroke.scss"; +import "./InkStroke.scss"; import { FieldView, FieldViewProps } from "./nodes/FieldView"; -import React = require("react"); import { InkStrokeProperties } from "./InkStrokeProperties"; import { CurrentUserUtils } from "../util/CurrentUserUtils"; +import { InkControls } from "./InkControls"; +import { InkHandles } from "./InkHandles"; type InkDocument = makeInterface<[typeof documentSchema]>; const InkDocument = makeInterface(documentSchema); @observer export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocument>(InkDocument) { - private _controlUndo?: UndoManager.Batch; + static readonly MaskDim = 50000; + @observable private _properties?: InkStrokeProperties; - public static LayoutString(fieldStr: string) { return FieldView.LayoutString(InkingStroke, fieldStr); } + constructor(props: FieldViewProps & InkDocument) { + super(props); - private analyzeStrokes = () => { + this._properties = InkStrokeProperties.Instance; + } + + public static LayoutString(fieldStr: string) { + return FieldView.LayoutString(InkingStroke, fieldStr); + } + + analyzeStrokes() { const data: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? []; CognitiveServices.Inking.Appliers.ConcatenateHandwriting(this.dataDoc, ["inkAnalysis", "handwriting"], [data]); } - public static toggleMask = action((inkDoc: Doc) => { + @action + public static toggleMask = (inkDoc: Doc) => { inkDoc.isInkMask = !inkDoc.isInkMask; inkDoc._backgroundColor = inkDoc.isInkMask ? "rgba(0,0,0,0.7)" : undefined; inkDoc.mixBlendMode = inkDoc.isInkMask ? "hard-light" : undefined; inkDoc.color = "#9b9b9bff"; inkDoc._stayInCollection = inkDoc.isInkMask ? true : undefined; - }); - - @action - onControlDown = (e: React.PointerEvent, controlNum: number): void => { - if (InkStrokeProperties.Instance) { - InkStrokeProperties.Instance.control(0, 0, 1); - const controlUndo = UndoManager.StartBatch("DocDecs set radius"); - const screenScale = this.props.ScreenToLocalTransform().Scale; - setupMoveUpEvents(this, e, - (e: PointerEvent, down: number[], delta: number[]) => { - InkStrokeProperties.Instance?.control(-delta[0] * screenScale, -delta[1] * screenScale, controlNum); - return false; - }, - () => controlUndo?.end(), emptyFunction); - } - } - - @action - changeCurrPoint = (i: number) => { - if (InkStrokeProperties.Instance) { - InkStrokeProperties.Instance._currPoint = i; - document.addEventListener("keydown", this.delPts, true); - } - } - - @action - delPts = (e: KeyboardEvent) => { - if (["-", "Backspace", "Delete"].includes(e.key)) { - if (InkStrokeProperties.Instance?.deletePoints()) e.stopPropagation(); - } } + /** + * Handles the movement of the entire ink object when the user clicks and drags. + */ onPointerDown = (e: React.PointerEvent) => { if (this.props.isSelected(true)) { - setupMoveUpEvents(this, e, returnFalse, emptyFunction, action((e: PointerEvent, doubleTap: boolean | undefined) => - doubleTap && InkStrokeProperties.Instance && (InkStrokeProperties.Instance._controlBtn = true))); + setupMoveUpEvents(this, e, returnFalse, emptyFunction, + action((e: PointerEvent, doubleTap: boolean | undefined) => + doubleTap && this._properties && (this._properties._controlButton = true)) + ); } } - public static MaskDim = 50000; render() { TraceMobx(); - const formatInstance = InkStrokeProperties.Instance; - if (!formatInstance) return (null); + // Extracting the ink data and formatting information of the current ink stroke. const data: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? []; - // const strokeWidth = Number(StrCast(this.layoutDoc.strokeWidth, ActiveInkWidth())); + const inkDoc: Doc = this.layoutDoc; const strokeWidth = Number(this.layoutDoc.strokeWidth); - const xs = data.map(p => p.X); - const ys = data.map(p => p.Y); - const lineTop = Math.min(...ys); - const lineBot = Math.max(...ys); - const lineLft = Math.min(...xs); - const lineRgt = Math.max(...xs); - const left = lineLft - strokeWidth / 2; + const lineTop = Math.min(...data.map(p => p.Y)); + const lineBottom = Math.max(...data.map(p => p.Y)); + const lineLeft = Math.min(...data.map(p => p.X)); + const lineRight = Math.max(...data.map(p => p.X)); + const left = lineLeft - strokeWidth / 2; const top = lineTop - strokeWidth / 2; - const right = lineRgt + strokeWidth / 2; - const bottom = lineBot + strokeWidth / 2; + const right = lineRight + strokeWidth / 2; + const bottom = lineBottom + strokeWidth / 2; const width = Math.max(1, right - left); const height = Math.max(1, bottom - top); const scaleX = width === strokeWidth ? 1 : (this.props.PanelWidth() - strokeWidth) / (width - strokeWidth); const scaleY = height === strokeWidth ? 1 : (this.props.PanelHeight() - strokeWidth) / (height - strokeWidth); const strokeColor = StrCast(this.layoutDoc.color, ""); + const dotsize = Math.max(width * scaleX, height * scaleY) / 40; - const points = InteractionUtils.CreatePolyline(data, left, top, strokeColor, strokeWidth, strokeWidth, + // Visually renders the polygonal line made by the user. + const inkLine = InteractionUtils.CreatePolyline(data, left, top, strokeColor, strokeWidth, strokeWidth, StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker), - StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", this.props.isSelected() && strokeWidth <= 5 && lineBot - lineTop > 1 && lineRgt - lineLft > 1, false); - - const hpoints = InteractionUtils.CreatePolyline(data, left, top, - this.props.isSelected() && strokeWidth > 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15), - StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), - "none", "none", undefined, scaleX, scaleY, "", this.props.layerProvider?.(this.props.Document) === false ? "none" : "visiblepainted", false, true); - - //points for adding - const apoints = InteractionUtils.CreatePoints(data, left, top, strokeColor, strokeWidth, strokeWidth, + StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", + this.props.isSelected() && strokeWidth <= 5 && lineBottom - lineTop > 1 && lineRight - lineLeft > 1, + false); + // Thin blue line indicating that the current ink stroke is selected. + const selectedLine = InteractionUtils.CreatePolyline( + data, lineLeft - strokeWidth * 3, lineTop - strokeWidth * 3, "#1F85DE", strokeWidth / 6, + strokeWidth / 6, StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), + StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker), + StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", + this.props.isSelected() && strokeWidth <= 5 && lineBottom - lineTop > 1 && lineRight - lineLeft > 1, + false); + // Invisible polygonal line that enables the ink to be selected by the user. + const clickableLine = InteractionUtils.CreatePolyline(data, left, top, + this.props.isSelected() && strokeWidth > 5 ? strokeColor : "transparent", strokeWidth, + strokeWidth + 15, StrCast(this.layoutDoc.strokeBezier), + StrCast(this.layoutDoc.fillColor, "none"), "none", "none", undefined, scaleX, scaleY, "", + this.props.layerProvider?.(this.props.Document) === false ? "none" : "visiblepainted", false, true); + // Set of points rendered upon the ink that can be added if a user clicks on one. + const addedPoints = InteractionUtils.CreatePoints(data, left, top, strokeColor, strokeWidth, strokeWidth, StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker), - StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", this.props.isSelected() && strokeWidth <= 5, false); - - const controlPoints: { X: number, Y: number, I: number }[] = []; - const handlePoints: { X: number, Y: number, I: number, dot1: number, dot2: number }[] = []; - const handleLine: { X1: number, Y1: number, X2: number, Y2: number, X3: number, Y3: number, dot1: number, dot2: number }[] = []; - if (data.length >= 4) { - for (var i = 0; i <= data.length - 4; i += 4) { - controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i }); - controlPoints.push({ X: data[i + 3].X, Y: data[i + 3].Y, I: i + 3 }); - handlePoints.push({ X: data[i + 1].X, Y: data[i + 1].Y, I: i + 1, dot1: i, dot2: i === 0 ? i : i - 1 }); - handlePoints.push({ X: data[i + 2].X, Y: data[i + 2].Y, I: i + 2, dot1: i + 3, dot2: i === data.length ? i + 3 : i + 4 }); - } - - handleLine.push({ X1: data[0].X, Y1: data[0].Y, X2: data[0].X, Y2: data[0].Y, X3: data[1].X, Y3: data[1].Y, dot1: 0, dot2: 0 }); - for (var i = 2; i < data.length - 4; i += 4) { - - handleLine.push({ X1: data[i].X, Y1: data[i].Y, X2: data[i + 1].X, Y2: data[i + 1].Y, X3: data[i + 3].X, Y3: data[i + 3].Y, dot1: i + 1, dot2: i + 2 }); - - } - handleLine.push({ X1: data[data.length - 2].X, Y1: data[data.length - 2].Y, X2: data[data.length - 1].X, Y2: data[data.length - 1].Y, X3: data[data.length - 1].X, Y3: data[data.length - 1].Y, dot1: data.length - 1, dot2: data.length - 1 }); - - for (var i = 0; i <= data.length - 4; i += 4) { - handlePoints.push({ X: data[i + 1].X, Y: data[i + 1].Y, I: i + 1, dot1: i, dot2: i === 0 ? i : i - 1 }); - handlePoints.push({ X: data[i + 2].X, Y: data[i + 2].Y, I: i + 2, dot1: i + 3, dot2: i === data.length ? i + 3 : i + 4 }); - } - } - // if (data.length <= 4) { - // handlePoints = []; - // handleLine = []; - // controlPoints = []; - // for (var i = 0; i < data.length; i++) { - // controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i }); - // } - - // } - const dotsize = Math.max(width * scaleX, height * scaleY) / 40; - - const addpoints = apoints.map((pts, i) => - <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={strokeWidth / 2} stroke="invisible" strokeWidth={dotsize / 2} fill="invisible" - onPointerDown={(e) => { formatInstance.addPoints(pts.X, pts.Y, apoints, i, controlPoints); }} pointerEvents="all" cursor="all-scroll" - /> - </svg>); - const handles = handlePoints.map((pts, i) => - <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={strokeWidth} strokeWidth={0} fill="green" - onPointerDown={(e) => this.onControlDown(e, pts.I)} pointerEvents="all" cursor="default" display={(pts.dot1 === formatInstance._currPoint || pts.dot2 === formatInstance._currPoint) ? "inherit" : "none"} /> - </svg>); - - const controls = controlPoints.map((pts, i) => - <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={strokeWidth / 2} strokeWidth={0} fill="red" - onPointerDown={(e) => { this.changeCurrPoint(pts.I); this.onControlDown(e, pts.I); }} pointerEvents="all" cursor="default" - /> - </svg>); - const handleLines = handleLine.map((pts, i) => - <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" strokeWidth={dotsize / 6} - display={(pts.dot1 === formatInstance._currPoint || pts.dot2 === formatInstance._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" strokeWidth={dotsize / 6} - display={(pts.dot1 === formatInstance._currPoint || pts.dot2 === formatInstance._currPoint) ? "inherit" : "none"} /> - </svg>); - + StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", + this.props.isSelected() && strokeWidth <= 5, false); return ( - <svg className="inkingStroke" + <svg className="inkStroke" style={{ pointerEvents: this.props.Document.isInkMask && this.props.layerProvider?.(this.props.Document) !== false ? "all" : "none", transform: this.props.Document.isInkMask ? `translate(${InkingStroke.MaskDim / 2}px, ${InkingStroke.MaskDim / 2}px)` : undefined, @@ -196,19 +127,27 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume if (cm) { !Doc.UserDoc().noviceMode && cm.addItem({ description: "Recognize Writing", event: this.analyzeStrokes, icon: "paint-brush" }); cm.addItem({ description: "Toggle Mask", event: () => InkingStroke.toggleMask(this.rootDoc), icon: "paint-brush" }); - cm.addItem({ description: "Edit Points", event: action(() => formatInstance._controlBtn = !formatInstance._controlBtn), icon: "paint-brush" }); - //cm.addItem({ description: "Format Shape...", event: this.formatShape, icon: "paint-brush" }); + cm.addItem({ description: "Edit Points", event: action(() => { if (this._properties) { this._properties._controlButton = !this._properties._controlButton; } }), icon: "paint-brush" }); } }} - ><defs> - </defs> - {hpoints} - {points} - {formatInstance._controlBtn && this.props.isSelected() ? addpoints : ""} - {formatInstance._controlBtn && this.props.isSelected() ? handleLines : ""} - {formatInstance._controlBtn && this.props.isSelected() ? handles : ""} - {formatInstance._controlBtn && this.props.isSelected() ? controls : ""} - + > + + {clickableLine} + {inkLine} + {this.props.isSelected() ? selectedLine : ""} + {this.props.isSelected() && this._properties?._controlButton ? + <> + <InkControls + data={data} + addedPoints={addedPoints} + format={[left, top, scaleX, scaleY, strokeWidth, dotsize]} + ScreenToLocalTransform={this.props.ScreenToLocalTransform} /> + <InkHandles + inkDoc={inkDoc} + data={data} + format={[left, top, scaleX, scaleY, strokeWidth, dotsize]} + ScreenToLocalTransform={this.props.ScreenToLocalTransform} /> + </> : ""} </svg> ); } diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index b1ad4868c..c8e64b5c4 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -1,4 +1,4 @@ -@import "globalCssVariables"; +@import "global/globalCssVariables"; @import "nodeModuleOverrides"; :root { @@ -54,7 +54,7 @@ button { background: black; outline: none; border: 0px; - color: $light-color; + color: $white; text-transform: uppercase; letter-spacing: 2px; font-size: 75%; @@ -63,7 +63,7 @@ button { } button:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 3f04a0f3a..07ca0257c 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -1,4 +1,4 @@ -@import "globalCssVariables"; +@import "global/globalCssVariables"; @import "nodeModuleOverrides"; @@ -56,50 +56,50 @@ touch-action: none; .searchBox-container { - background: lightgray; + background: $light-gray; } } .mainView-container { - color: black; + color: $dark-gray; .lm_title { - background: #cacaca; - color: black; + background: $light-gray; + color: $dark-gray; } } .mainView-container-dark { - color: lightgray; + color: $light-gray; .lm_goldenlayout { - background: dimgray; + background: $medium-gray; } .lm_title { - background: black; + background: $dark-gray; color: unset; } .marquee { - border-color: white; + border-color: $white; } #search-input { - background: lightgray; + background: $light-gray; } .searchBox-container { - background: rgb(45, 45, 45); + background: $dark-gray; } .contextMenu-cont, .contextMenu-item { - background: dimGray; + background: $medium-gray; } .contextMenu-item:hover { - background: gray; + background: $medium-gray; } } @@ -113,7 +113,7 @@ .mainView-propertiesDragger { //background-color: rgb(140, 139, 139); - background-color: lightgrey; + background-color: $light-gray; height: 55px; width: 17px; position: absolute; @@ -163,10 +163,10 @@ flex-direction: column; position: relative; height: 100%; - background: dimgray; + background: $medium-gray; .documentView-node-topmost { - background: lightgrey; + background: $light-gray; } } @@ -174,32 +174,32 @@ right: 0; position: absolute; z-index: 2; - background-color: rgb(159, 159, 159); + background-color: $medium-gray; .editable-title { - background-color: lightgrey; + background-color: $light-gray; } } } .mainView-libraryHandle { - background-color: lightgrey; + background-color: $light-gray; } .mainView-innerContent-dark { .propertiesView { background-color: #252525; input { - background-color: dimgrey; + background-color: $medium-gray; } .propertiesView-sharingTable { - background-color: dimgrey; + background-color: $medium-gray; } .editable-title { - background-color: dimgrey; + background-color: $medium-gray; } .propertiesView-field { - background-color: dimgrey; + background-color: $medium-gray; } } .mainView-propertiesDragger, @@ -209,17 +209,17 @@ } .mainView-container-dark { .contextMenu-cont { - background: dimgrey; - color: white; + background: $medium-gray; + color: $white; input::placeholder { - color:white; + color:$white; } } } .mainView-menuPanel { min-width: var(--menuPanelWidth); - background-color: #121721; + background-color: $dark-gray; .collectionStackingView { scrollbar-width: none; @@ -233,13 +233,13 @@ padding: 7px; padding-left: 7px; width: 100%; - background: black; + background: $dark-gray; .mainView-menuPanel-button-wrap { width: 45px; /* padding: 5px; */ touch-action: none; - background: black; + background: $dark-gray; transform-origin: top left; /* margin-bottom: 5px; */ margin-top: 5px; @@ -247,7 +247,7 @@ border-radius: 8px; &:hover { - background: rgb(61, 61, 61); + background: $black; cursor: pointer; } } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 4eeb1fc95..f34851b00 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -40,7 +40,7 @@ import { ContextMenu } from './ContextMenu'; import { DictationOverlay } from './DictationOverlay'; import { DocumentDecorations } from './DocumentDecorations'; import { GestureOverlay } from './GestureOverlay'; -import { MENU_PANEL_WIDTH, SEARCH_PANEL_HEIGHT } from './globalCssVariables.scss'; +import { MENU_PANEL_WIDTH, SEARCH_PANEL_HEIGHT } from './global/globalCssVariables.scss'; import { KeyManager } from './GlobalKeyHandler'; import { InkStrokeProperties } from './InkStrokeProperties'; import { LightboxView } from './LightboxView'; @@ -180,8 +180,8 @@ export class MainView extends React.Component { const targClass = targets[0].className.toString(); if (SearchBox.Instance._searchbarOpen || SearchBox.Instance.open) { const check = targets.some((thing) => - (thing.className === "collectionSchemaView-searchContainer" || (thing as any)?.dataset.icon === "filter" || - thing.className === "collectionSchema-header-menuOptions")); + (thing.className === "collectionSchemaView-searchContainer" || (thing as any)?.dataset.icon === "filter" || + thing.className === "collectionSchema-header-menuOptions")); !check && SearchBox.Instance.resetSearch(true); } !targClass.includes("contextMenu") && ContextMenu.Instance.closeMenu(); diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index 29d2bfcb7..484522bc7 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -1,4 +1,4 @@ -@import "globalCssVariables"; +@import "global/globalCssVariables"; $linkGap : 3px; @@ -7,13 +7,13 @@ $linkGap : 3px; } .propertiesButtons-linkButton-empty:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } .propertiesButtons-linkButton-nonempty:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } @@ -24,7 +24,7 @@ $linkGap : 3px; width: 29px; border-radius: 6px; pointer-events: auto; - background-color: #121721; + background-color: $dark-gray; color: #fcfbf7; text-transform: uppercase; letter-spacing: 2px; @@ -38,18 +38,18 @@ $linkGap : 3px; margin-left: 4px; &:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } } .propertiesButtons-linkButton-empty.toggle-on { background-color: white; - color: black; + color: $dark-gray; } .propertiesButtons-linkButton-empty.toggle-hover { background-color: gray; - color: black; + color: $dark-gray; } .propertiesButtons-linkButton-empty.toggle-off { color: white; @@ -111,7 +111,7 @@ $linkGap : 3px; margin-left: 4px; &:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index d09d949ff..4df3e4f00 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -86,7 +86,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { @observable openSlideOptions: boolean = false; @observable inOptions: boolean = false; - @observable _controlBtn: boolean = false; + @observable _controlButton: boolean = false; @observable _lock: boolean = false; componentDidMount() { @@ -540,7 +540,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { const formatInstance = InkStrokeProperties.Instance; return !formatInstance ? (null) : <div className="inking-button"> <Tooltip title={<div className="dash-tooltip">{"Edit points"}</div>}> - <div className="inking-button-points" onPointerDown={action(() => formatInstance._controlBtn = !formatInstance._controlBtn)} style={{ backgroundColor: formatInstance._controlBtn ? "black" : "" }}> + <div className="inking-button-points" onPointerDown={action(() => formatInstance._controlButton = !formatInstance._controlButton)} style={{ backgroundColor: formatInstance._controlButton ? "black" : "" }}> <FontAwesomeIcon icon="bezier-curve" color="white" size="lg" /> </div> </Tooltip> diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 47a4a192c..55f6b8e3c 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -1,4 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Colors } from './global/globalEnums'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import 'golden-layout/src/css/goldenlayout-base.css'; import 'golden-layout/src/css/goldenlayout-dark-theme.css'; @@ -97,14 +98,14 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps case StyleProp.Color: const docColor: Opt<string> = StrCast(doc?.[fieldKey + "color"], StrCast(doc?._color)); if (docColor) return docColor; - const backColor = backgroundCol();// || (darkScheme() ? "black" : "white"); + const backColor = backgroundCol(); if (!backColor) return undefined; const nonAlphaColor = backColor.startsWith("#") ? (backColor as string).substring(0, 7) : backColor.startsWith("rgba") ? backColor.replace(/,.[^,]*\)/, ")").replace("rgba", "rgb") : backColor const col = Color(nonAlphaColor).rgb(); const colsum = (col.red() + col.green() + col.blue()); - if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return "black"; - return "white"; + if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return Colors.DARK_GRAY; + return Colors.WHITE; case StyleProp.Hidden: return BoolCast(doc?._hidden); case StyleProp.BorderRounding: return StrCast(doc?.[fieldKey + "borderRounding"]); case StyleProp.TitleHeight: return 15; @@ -114,30 +115,30 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps doc?.type === DocumentType.RTF) && showTitle() && !StrCast(doc?.showTitle).includes(":hover") ? 15 : 0; case StyleProp.BackgroundColor: { let docColor: Opt<string> = StrCast(doc?.[fieldKey + "backgroundColor"], StrCast(doc?._backgroundColor, isCaption ? "rgba(0,0,0,0.4)" : "")); - if (MainView.Instance.LastButton === doc) return darkScheme() ? "dimgrey" : "lightgrey"; + if (MainView.Instance.LastButton === doc) return darkScheme() ? Colors.MEDIUM_GRAY : Colors.LIGHT_GRAY; switch (doc?.type) { case DocumentType.PRESELEMENT: docColor = docColor || (darkScheme() ? "" : ""); break; - case DocumentType.PRES: docColor = docColor || (darkScheme() ? "#3e3e3e" : "white"); break; - case DocumentType.FONTICON: docColor = docColor || "black"; break; - case DocumentType.RTF: docColor = docColor || (darkScheme() ? "#2d2d2d" : "#f1efeb"); break; - case DocumentType.FILTER: docColor = docColor || (darkScheme() ? "#2d2d2d" : "rgba(105, 105, 105, 0.432)"); break; + case DocumentType.PRES: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.WHITE); break; + case DocumentType.FONTICON: docColor = docColor || Colors.DARK_GRAY; break; + case DocumentType.RTF: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break; + case DocumentType.FILTER: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : "rgba(105, 105, 105, 0.432)"); break; case DocumentType.INK: docColor = doc?.isInkMask ? "rgba(0,0,0,0.7)" : undefined; break; case DocumentType.SLIDER: break; case DocumentType.EQUATION: docColor = docColor || "transparent"; break; case DocumentType.LABEL: docColor = docColor || (doc.annotationOn !== undefined ? "rgba(128, 128, 128, 0.18)" : undefined); break; - case DocumentType.BUTTON: docColor = docColor || (darkScheme() ? "#2d2d2d" : "lightgray"); break; - case DocumentType.LINKANCHOR: docColor = isAnchor ? "lightblue" : "transparent"; break; + case DocumentType.BUTTON: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break; + case DocumentType.LINKANCHOR: docColor = isAnchor ? Colors.LIGHT_BLUE : "transparent"; break; case DocumentType.LINK: docColor = (isAnchor ? docColor : "") || "transparent"; break; case DocumentType.IMG: case DocumentType.WEB: case DocumentType.PDF: case DocumentType.SCREENSHOT: - case DocumentType.VID: docColor = docColor || (darkScheme() ? "#2d2d2d" : "lightgray"); break; + case DocumentType.VID: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break; case DocumentType.COL: if (StrCast(Doc.LayoutField(doc)).includes("SliderBox")) break; - docColor = docColor ? docColor : + docColor = docColor ? Colors.DARK_GRAY : doc?._isGroup ? "#00000004" : // very faint highlight to show bounds of group - (Doc.IsSystem(doc) ? (darkScheme() ? "rgb(62,62,62)" : "lightgrey") : // system docs (seen in treeView) get a grayish background + (Doc.IsSystem(doc) ? (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY) : // system docs (seen in treeView) get a grayish background isBackground() ? "cyan" : // ?? is there a good default for a background collection doc.annotationOn ? "#00000015" : // faint interior for collections on PDFs, images, etc StrCast((props?.renderDepth || 0) > 0 ? @@ -145,7 +146,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps Doc.UserDoc().activeCollectionBackground)); break; //if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "rgb(62,62,62)"; - default: docColor = docColor || (darkScheme() ? "black" : "white"); break; + default: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.WHITE); break; } if (docColor && (!doc || props?.layerProvider?.(doc) === false)) docColor = Color(docColor.toLowerCase()).fade(0.5).toString(); return docColor; @@ -159,7 +160,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps case DocumentType.COL: return StrCast(doc?.boxShadow, isBackground() || doc?._isGroup || docProps?.LayoutTemplateString ? undefined : // groups have no drop shadow -- they're supposed to be "invisible". LayoutString's imply collection is being rendered as something else (e.g., title of a Slide) - `${darkScheme() ? "rgb(30, 32, 31) " : "#9c9396 "} ${StrCast(doc.boxShadow, "0.2vw 0.2vw 0.8vw")}`); + `${darkScheme() ? Colors.DARK_GRAY : Colors.MEDIUM_GRAY} ${StrCast(doc.boxShadow, "0.2vw 0.2vw 0.8vw")}`); case DocumentType.LABEL: if (doc?.annotationOn !== undefined) return "black 2px 2px 1px"; diff --git a/src/client/views/TemplateMenu.scss b/src/client/views/TemplateMenu.scss index bbed8cd96..f81cbdaab 100644 --- a/src/client/views/TemplateMenu.scss +++ b/src/client/views/TemplateMenu.scss @@ -1,4 +1,4 @@ -@import "globalCssVariables"; +@import "global/globalCssVariables"; .templating-menu { position: absolute; pointer-events: auto; @@ -24,7 +24,7 @@ cursor: pointer; &:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); } } @@ -32,7 +32,7 @@ .template-list { font-family: $sans-serif; font-size: 12px; - background-color: $light-color-secondary; + background-color: $light-gray; padding: 2px 12px; list-style: none; position: relative; diff --git a/src/client/views/_nodeModuleOverrides.scss b/src/client/views/_nodeModuleOverrides.scss index b8a7db034..56346b68b 100644 --- a/src/client/views/_nodeModuleOverrides.scss +++ b/src/client/views/_nodeModuleOverrides.scss @@ -2,7 +2,7 @@ // goldenlayout stuff div .lm_header { - background: $dark-color; + background: $dark-gray; } .lm_tab { diff --git a/src/client/views/animationtimeline/Keyframe.scss b/src/client/views/animationtimeline/Keyframe.scss index 84c8de287..38eb103c6 100644 --- a/src/client/views/animationtimeline/Keyframe.scss +++ b/src/client/views/animationtimeline/Keyframe.scss @@ -1,4 +1,4 @@ -@import "./../globalCssVariables.scss"; +@import "./../global/globalCssVariables.scss"; $timelineColor: #9acedf; @@ -15,11 +15,11 @@ $timelineDark: #77a1aa; height: 200px; top: 50%; position: relative; - background-color: $light-color; + background-color: $white; .menutable { tr:nth-child(odd) { - background-color: $light-color-secondary; + background-color: $light-gray; } } } @@ -67,7 +67,7 @@ $timelineDark: #77a1aa; height: 100%; position: absolute; pointer-events: none; - background: linear-gradient(to left, $timelineColor 10%, $light-color); + background: linear-gradient(to left, $timelineColor 10%, $white); } .fadeRight { @@ -75,7 +75,7 @@ $timelineDark: #77a1aa; height: 100%; position: absolute; pointer-events: none; - background: linear-gradient(to right, $timelineColor 10%, $light-color); + background: linear-gradient(to right, $timelineColor 10%, $white); } .divider { diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx index e84022366..82b0218bf 100644 --- a/src/client/views/animationtimeline/Keyframe.tsx +++ b/src/client/views/animationtimeline/Keyframe.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import "./Keyframe.scss"; import "./Timeline.scss"; -import "../globalCssVariables.scss"; +import "../global/globalCssVariables.scss"; import { observer } from "mobx-react"; import { observable, reaction, action, IReactionDisposer, observe, computed, runInAction, trace } from "mobx"; import { Doc, DocListCast, DocListCastAsync, Opt } from "../../../fields/Doc"; diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss index f90249771..48422b789 100644 --- a/src/client/views/animationtimeline/Timeline.scss +++ b/src/client/views/animationtimeline/Timeline.scss @@ -1,4 +1,4 @@ -@import "./../globalCssVariables.scss"; +@import "./../global/globalCssVariables.scss"; $timelineColor: #9acedf; $timelineDark: #77a1aa; @@ -161,7 +161,7 @@ $timelineDark: #77a1aa; width: 100%; height: 300px; position: absolute; - background-color: $light-color-secondary; + background-color: $light-gray; border-bottom: 2px solid $timelineDark; transition: transform 500ms ease; @@ -251,7 +251,7 @@ $timelineDark: #77a1aa; top: 0px; width: 100px; height: 30%; - border: 1px solid $dark-color; + border: 1px solid $dark-gray; font-size: 12px; line-height: 11px; background-color: $timelineDark; diff --git a/src/client/views/animationtimeline/TimelineMenu.scss b/src/client/views/animationtimeline/TimelineMenu.scss index 7ee0a43d5..43a89419e 100644 --- a/src/client/views/animationtimeline/TimelineMenu.scss +++ b/src/client/views/animationtimeline/TimelineMenu.scss @@ -1,10 +1,10 @@ -@import "./../globalCssVariables.scss"; +@import "./../global/globalCssVariables.scss"; .timeline-menu-container{ position: absolute; display: flex; - box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw; + box-shadow: $medium-gray 0.2vw 0.2vw 0.4vw; flex-direction: column; background: whitesmoke; z-index: 10000; @@ -39,7 +39,7 @@ border-top-left-radius: 15px; border-top-right-radius: 15px; text-transform: uppercase; - background: $dark-color; + background: $dark-gray; letter-spacing: 2px; .timeline-menu-header-desc{ @@ -79,10 +79,10 @@ .timeline-menu-item:hover { border-width: .11px; border-style: none; - border-color: $intermediate-color; + border-color: $medium-gray; border-bottom-style: solid; border-top-style: solid; - background: $darker-alt-accent; + background: $medium-blue; } .timeline-menu-desc { diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss index 283163ea7..c8d96c399 100644 --- a/src/client/views/animationtimeline/TimelineOverview.scss +++ b/src/client/views/animationtimeline/TimelineOverview.scss @@ -1,4 +1,4 @@ -@import "./../globalCssVariables.scss"; +@import "./../global/globalCssVariables.scss"; $timelineColor: #9acedf; $timelineDark: #77a1aa; diff --git a/src/client/views/animationtimeline/Track.scss b/src/client/views/animationtimeline/Track.scss index aec587a79..f45e0556d 100644 --- a/src/client/views/animationtimeline/Track.scss +++ b/src/client/views/animationtimeline/Track.scss @@ -1,4 +1,4 @@ -@import "./../globalCssVariables.scss"; +@import "./../global/globalCssVariables.scss"; .track-container { @@ -6,8 +6,8 @@ .inner { top: 0px; width: calc(100%); - background-color: $light-color; - border: 1px solid $dark-color; + background-color: $white; + border: 1px solid $dark-gray; position: relative; z-index: 100; } diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index f4736eb29..a054f0ae1 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -1,4 +1,4 @@ -@import "../../views/globalCssVariables.scss"; +@import "../../views/global/globalCssVariables.scss"; .lm_title { @@ -110,7 +110,7 @@ } .flexlayout__splitter { - background-color: black; + background-color: $dark-gray; } .flexlayout__splitter:hover { @@ -179,7 +179,7 @@ position: absolute; box-sizing: border-box; background-color: #222; - color: black; + color: $dark-gray; } .flexlayout__tab_button { @@ -268,7 +268,7 @@ } .flexlayout__tab_header_outer { - background-color: black; + background-color: $dark-gray; position: absolute; left: 0; right: 0; @@ -332,28 +332,28 @@ } .flexlayout__border_top { - background-color: black; + background-color: $dark-gray; border-bottom: 1px solid #ddd; box-sizing: border-box; overflow: hidden; } .flexlayout__border_bottom { - background-color: black; + background-color: $dark-gray; border-top: 1px solid #333; box-sizing: border-box; overflow: hidden; } .flexlayout__border_left { - background-color: black; + background-color: $dark-gray; border-right: 1px solid #333; box-sizing: border-box; overflow: hidden; } .flexlayout__border_right { - background-color: black; + background-color: $dark-gray; border-left: 1px solid #333; box-sizing: border-box; overflow: hidden; diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss index ca72b98a5..ec8805907 100644 --- a/src/client/views/collections/CollectionLinearView.scss +++ b/src/client/views/collections/CollectionLinearView.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; @import "../_nodeModuleOverrides"; .collectionLinearView-outer { @@ -12,8 +12,8 @@ align-items: center; >span { - background: $dark-color; - color: $light-color; + background: $dark-gray; + color: $white; border-radius: 18px; margin-right: 6px; cursor: pointer; @@ -63,8 +63,8 @@ >label { margin-top: "auto"; margin-bottom: "auto"; - background: $dark-color; - color: $light-color; + background: $dark-gray; + color: $white; display: inline-block; border-radius: 18px; font-size: 12.5px; @@ -82,7 +82,7 @@ } label:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.15); } diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index dc5231a3a..c0fc774d3 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -1,5 +1,4 @@ -@import "../globalCssVariables"; - +@import "../global/globalCssVariables"; .collectionMenu-cont { position: relative; @@ -8,8 +7,8 @@ opacity: 0.9; z-index: 901; transition: top .5s; - background: #323232; - color: white; + background: $dark-gray; + color: $white; transform-origin: top left; top: 0; width: 100%; @@ -18,7 +17,7 @@ border-radius: 100%; width: 18px; height: 18px; - border: solid 1px #f5f5f5; + border: solid 1px $white; display: flex; align-items: center; justify-content: center; @@ -28,7 +27,7 @@ border-radius: 100%; width: 70%; height: 70%; - background: white; + background: $white; } .collectionMenu { @@ -43,7 +42,7 @@ margin-left: 3px; margin-right: 3px; width: 1.5px; - background-color: #656060; + background-color: $medium-gray; } .collectionViewBaseChrome { @@ -51,11 +50,11 @@ align-items: center; .collectionViewBaseChrome-viewPicker { - font-size: 75%; - outline-color: black; - color: white; + font-size: $small-text; + outline-color: $black; + color: $white; border: none; - background: #323232; + background: $dark-gray; } .collectionViewBaseChrome-viewPicker:focus { @@ -64,16 +63,16 @@ } .collectionViewBaseChrome-viewPicker:active { - outline-color: black; + outline-color: $black; } .collectionViewBaseChrome-button { - font-size: 75%; + font-size: $small-text; text-transform: uppercase; letter-spacing: 2px; - background: rgb(238, 238, 238); - color: purple; - outline-color: black; + background: $white; + color: $pink; + outline-color: $black; border: none; padding: 12px 10px 11px 10px; margin-left: 10px; @@ -82,11 +81,11 @@ .collectionViewBaseChrome-cmdPicker { margin-left: 3px; margin-right: 0px; - font-size: 75%; + font-size: $small-text; text-transform: capitalize; - color: white; + color: $white; border: none; - background: #323232; + background: $dark-gray; } .collectionViewBaseChrome-cmdPicker:focus { @@ -105,7 +104,7 @@ overflow: hidden; .commandEntry-drop { - color: white; + color: $white; width: 30px; margin-top: auto; margin-bottom: auto; @@ -113,11 +112,11 @@ } .commandEntry-outerDiv:hover{ - background-color: rgba(0,0,0,0.2); + background-color: $drop-shadow; .collectionViewBaseChrome-viewPicker, .collectionViewBaseChrome-cmdPicker{ - background: rgb(41,41,41); + background: $dark-gray; } } @@ -142,7 +141,7 @@ height: 100%; display: flex; background: transparent; - color: grey; + color: $medium-gray; justify-content: center; } @@ -150,31 +149,31 @@ margin-left: 5px; display: grid; border: none; - border-right: solid gray 1px; + border-right: solid $medium-gray 1px; .collectionViewBaseChrome-filterIcon { position: relative; display: flex; margin: auto; - background: #323232; - color: white; + background: $dark-gray; + color: $white; width: 30px; height: 30px; align-items: center; justify-content: center; border: none; - border-right: solid gray 1px; + border-right: solid $medium-gray 1px; } .collectionViewBaseChrome-viewSpecsInput { padding: 12px 10px 11px 10px; border: 0px; - color: grey; + color: $medium-gray; text-align: center; letter-spacing: 2px; - outline-color: black; - font-size: 75%; - background: rgb(238, 238, 238); + outline-color: $black; + font-size: $small-text; + background: $white; height: 100%; width: 75px; } @@ -187,8 +186,8 @@ z-index: 100; display: flex; flex-direction: column; - background: rgb(238, 238, 238); - box-shadow: grey 2px 2px 4px; + background: $white; + box-shadow: $medium-gray 2px 2px 4px; .qs-datepicker { left: unset; @@ -204,13 +203,13 @@ .collectionViewBaseChrome-viewSpecsMenu-rowLeft, .collectionViewBaseChrome-viewSpecsMenu-rowMiddle, .collectionViewBaseChrome-viewSpecsMenu-rowRight { - font-size: 75%; + font-size: $small-text; letter-spacing: 2px; - color: grey; + color: $medium-gray; margin-left: 10px; padding: 5px; border: none; - outline-color: black; + outline-color: $black; } } @@ -236,19 +235,19 @@ margin-left: 10; .collectionGridViewChrome-viewPicker { - font-size: 75%; + font-size: $small-text; //text-transform: uppercase; //letter-spacing: 2px; - background: #121721; - color: white; - outline-color: black; - color: white; + background: $dark-gray; + color: $white; + outline-color: $black; + color: $white; border: none; - border-right: solid gray 1px; + border-right: solid $medium-gray 1px; } .collectionGridViewChrome-viewPicker:active { - outline-color: black; + outline-color: $black; } .grid-control { @@ -268,11 +267,11 @@ .collectionGridViewChrome-entryBox { width: 50%; - color: black; + color: $black; } .collectionGridViewChrome-columnButton { - color: black; + color: $black; } } } @@ -302,7 +301,7 @@ align-items: center; display: flex; grid-auto-columns: auto; - font-size: 75%; + font-size: $small-text; letter-spacing: 2px; .collectionStackingViewChrome-pivotField-label, @@ -311,7 +310,7 @@ grid-column: 1; margin-right: 7px; user-select: none; - font-family: 'Roboto'; + font-family: $sans-serif; letter-spacing: normal; } @@ -329,13 +328,13 @@ } .collectionStackingViewChrome-sortIcon:hover { - background-color: rgba(0,0,0,0.2); + background-color: $drop-shadow; } .collectionStackingViewChrome-pivotField, .collectionTreeViewChrome-pivotField, .collection3DCarouselViewChrome-scrollSpeed { - color: white; + color: $white; grid-column: 2; grid-row: 1; width: 90%; @@ -344,7 +343,7 @@ height: 80%; border-radius: 7px; align-items: center; - background: #eeeeee; + background: $white; .editable-view-input, input, @@ -352,16 +351,16 @@ .editableView-container-editing { margin: auto; border: 0px; - color: grey !important; + color: $light-gray !important; text-align: center; letter-spacing: 2px; - outline-color: black; + outline-color: $black; height: 100%; } .react-autosuggest__container { margin: 0; - color: grey; + color: $medium-gray; padding: 0px; } } @@ -407,11 +406,11 @@ } .switchToText { - color: $main-accent; + color: $medium-gray; } .switchToText:hover { - color: $dark-color; + color: $dark-gray; } } @@ -424,11 +423,11 @@ .collectionMenu-urlInput { padding: 12px 10px 11px 10px; border: 0px; - color: black; - font-size: 10px; + color: $black; + font-size: $small-text; letter-spacing: 2px; - outline-color: black; - background: rgb(238, 238, 238); + outline-color: $black; + background: $white; width: 100%; min-width: 350px; margin-right: 10px; @@ -477,10 +476,10 @@ width: 20; height: 30; bottom: 0; - background: #323232; + background: $dark-gray; display: inline-flex; align-items: center; - color: white; + color: $white; } .backKeyframe { @@ -502,13 +501,13 @@ margin: auto; } - border-right: solid gray 1px; + border-right: solid $medium-gray 1px; } } .collectionSchemaViewChrome-cont { display: flex; - font-size: 10.5px; + font-size: $small-text; .collectionSchemaViewChrome-toggle { display: flex; @@ -527,19 +526,19 @@ .collectionSchemaViewChrome-toggler { width: 100px; height: 35px; - background-color: black; + background-color: $black; position: relative; } .collectionSchemaViewChrome-togglerButton { width: 47px; height: 30px; - background-color: $light-color-secondary; + background-color: $light-gray; // position: absolute; transition: all 0.5s ease; // top: 3px; margin-top: 3px; - color: gray; + color: $medium-gray; letter-spacing: 2px; text-transform: uppercase; display: flex; @@ -579,7 +578,7 @@ } .react-autosuggest__input { - border: 1px solid #aaa; + border: 1px solid $light-gray; border-radius: 4px; width: 100%; } @@ -603,11 +602,11 @@ overflow-y: auto; max-height: 400px; width: 180px; - border: 1px solid #aaa; - background-color: #fff; - font-family: Helvetica, sans-serif; + border: 1px solid $light-gray; + background-color: $white; + font-family: $sans-serif; font-weight: 300; - font-size: 16px; + font-size: $large-header; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; z-index: 2; @@ -625,5 +624,5 @@ } .react-autosuggest__suggestion--highlighted { - background-color: #ddd; + background-color: $light-gray; }
\ No newline at end of file diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 8f2847139..e1e04915a 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -11,12 +11,13 @@ import { listSpec } from "../../../fields/Schema"; import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField"; import { Cast, NumCast } from "../../../fields/Types"; import { TraceMobx } from "../../../fields/util"; -import { emptyFunction, emptyPath, returnFalse, setupMoveUpEvents, returnEmptyDoclist, returnTrue } from "../../../Utils"; +import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from "../../../Utils"; +import { DocUtils } from "../../documents/Documents"; import { SelectionManager } from "../../util/SelectionManager"; import { SnappingManager } from "../../util/SnappingManager"; import { Transform } from "../../util/Transform"; import { undoBatch } from "../../util/UndoManager"; -import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../views/globalCssVariables.scss'; +import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../views/global/globalCssVariables.scss'; import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from "../ContextMenuItem"; import '../DocumentDecorations.scss'; @@ -24,8 +25,7 @@ import { DocumentView } from "../nodes/DocumentView"; import { DefaultStyleProvider } from "../StyleProvider"; import "./CollectionSchemaView.scss"; import { CollectionSubView } from "./CollectionSubView"; -import { SchemaTable } from "./SchemaTable"; -import { DocUtils } from "../../documents/Documents"; +import { SchemaTable } from "../collections/collectionSchema/SchemaTable"; // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 export enum ColumnType { diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 9f56a0c0e..4b123c8b6 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .collectionMasonryView { display: inline; @@ -96,8 +96,8 @@ height: 2vw; width: 100%; font-family: $sans-serif; - background: $dark-color; - color: $light-color; + background: $dark-gray; + color: $white; } .collectionStackingView-columnDragger { @@ -128,7 +128,7 @@ margin-left: 2px; margin-right: 2px; margin-top: 2px; - background: $main-accent; + background: $medium-gray; height: 5px; &.active { @@ -180,11 +180,11 @@ .collectionStackingView-sectionHeader { text-align: center; margin: auto; - background: $main-accent; + background: $medium-gray; // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong .editableView-input { - color: black; + color: $dark-gray; } .editableView-input:hover, @@ -205,7 +205,7 @@ display: flex; align-items: center; justify-content: center; - color: black; + color: $dark-gray; .editableView-container-editing-oneLine, .editableView-container-editing { diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 30f8e0112..7aa8dfd56 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -480,7 +480,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument, if (value && this.columnHeaders) { const schemaHdrField = new SchemaHeaderField(value); this.columnHeaders.push(schemaHdrField); - DocUtils.addFieldEnumerations(undefined, this.pivotField, [{ title: value, _backgroundColor: schemaHdrField.color }]); + DocUtils.addFieldEnumerations(undefined, this.pivotField, [{ title: value, _backgroundColor: "schemaHdrField.color" }]); return true; } return false; diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 72ab51784..ec461ab94 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .collectionTreeView-dropTarget { border-width: $COLLECTION_BORDER_WIDTH; @@ -12,7 +12,7 @@ top: 0; padding-left: 10px; padding-right: 10px; - background: $light-color-secondary; + background: $light-gray; font-size: 13px; overflow: auto; user-select: none; @@ -40,7 +40,7 @@ } .delete-button { - color: $intermediate-color; + color: $medium-gray; // float: right; margin-left: 15px; // margin-top: 3px; @@ -71,7 +71,7 @@ .collectionTreeView-subtitle { font-style: italic; font-size: 8pt; - color: $intermediate-color; + color: $medium-gray; } .docContainer { diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss index a5aef86de..5db489c0a 100644 --- a/src/client/views/collections/CollectionView.scss +++ b/src/client/views/collections/CollectionView.scss @@ -1,8 +1,8 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .collectionView { border-width: 0; - border-color: $light-color-secondary; + border-color: $light-gray; border-style: solid; border-radius: 0 0 $border-radius $border-radius; box-sizing: border-box; diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index 3f6fc8b0c..1ebc5873e 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .treeView-label { max-height: 1.5em; @@ -14,7 +14,7 @@ .bullet-outline { position: relative; width: $TREE_BULLET_WIDTH; - color: $intermediate-color; + color: $medium-gray; transform: scale(0.5); display: inline-flex; align-items: center; @@ -45,7 +45,7 @@ .bullet { position: relative; width: $TREE_BULLET_WIDTH; - color: $intermediate-color; + color: $medium-gray; margin-top: 3px; transform: scale(1.3, 1.3); border: #80808030 1px solid; diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index c1125c233..401bdcb02 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -20,7 +20,7 @@ import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { undoBatch, UndoManager } from '../../util/UndoManager'; import { EditableView } from "../EditableView"; -import { TREE_BULLET_WIDTH } from '../globalCssVariables.scss'; +import { TREE_BULLET_WIDTH } from '../global/globalCssVariables.scss'; import { DocumentView, DocumentViewProps, StyleProviderFunc, DocumentViewInternal } from '../nodes/DocumentView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { RichTextMenu } from '../nodes/formattedText/RichTextMenu'; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss index c5b8fc5e8..5fa01b102 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss @@ -1,4 +1,4 @@ -@import "globalCssVariables"; +@import "global/globalCssVariables"; .collectionFreeFormRemoteCursors-cont { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index eb0538c41..79e063f7f 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -1,4 +1,4 @@ -@import "../../globalCssVariables"; +@import "../../global/globalCssVariables"; .collectionfreeformview-none { position: inherit; @@ -226,7 +226,7 @@ // linear-gradient(to bottom, $light-color-secondary 1px, transparent 1px); // background-size: 30px 30px; // } - border: 0px solid $light-color-secondary; + border: 0px solid $light-gray; border-radius: inherit; box-sizing: border-box; position: absolute; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index accb80c5a..a4e310e6c 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -28,7 +28,7 @@ import { SelectionManager } from "../../../util/SelectionManager"; import { SnappingManager } from "../../../util/SnappingManager"; import { Transform } from "../../../util/Transform"; import { undoBatch } from "../../../util/UndoManager"; -import { COLLECTION_BORDER_WIDTH } from "../../../views/globalCssVariables.scss"; +import { COLLECTION_BORDER_WIDTH } from "../../../views/global/globalCssVariables.scss"; import { Timeline } from "../../animationtimeline/Timeline"; import { ContextMenu } from "../../ContextMenu"; import { DocumentDecorations } from "../../DocumentDecorations"; @@ -834,10 +834,10 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P map(doc => ({ ...this.childDataProvider(doc, ""), ...this.childSizeProvider(doc, "") })); if (measuredDocs.length) { const ranges = measuredDocs.reduce(({ xrange, yrange }, { x, y, width, height }) => // computes range of content - ({ - xrange: { min: Math.min(xrange.min, x), max: Math.max(xrange.max, x + width) }, - yrange: { min: Math.min(yrange.min, y), max: Math.max(yrange.max, y + height) } - }) + ({ + xrange: { min: Math.min(xrange.min, x), max: Math.max(xrange.max, x + width) }, + yrange: { min: Math.min(yrange.min, y), max: Math.max(yrange.max, y + height) } + }) , { xrange: { min: Number.MAX_VALUE, max: -Number.MAX_VALUE }, yrange: { min: Number.MAX_VALUE, max: -Number.MAX_VALUE } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx index f75179cea..90f64f163 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx @@ -26,7 +26,7 @@ import { SnappingManager } from "../../../util/SnappingManager"; import { undoBatch } from "../../../util/UndoManager"; import '../../../views/DocumentDecorations.scss'; import { EditableView } from "../../EditableView"; -import { MAX_ROW_HEIGHT } from '../../globalCssVariables.scss'; +import { MAX_ROW_HEIGHT } from '../../global/globalCssVariables.scss'; import { DocumentIconContainer } from "../../nodes/DocumentIcon"; import { OverlayView } from "../../OverlayView"; import "./CollectionSchemaView.scss"; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index b57fee0e4..40cdcd14b 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -1,7 +1,7 @@ -@import "../../globalCssVariables"; +@import "../../global/globalCssVariables.scss"; .collectionSchemaView-container { border-width: $COLLECTION_BORDER_WIDTH; - border-color: $intermediate-color; + border-color: $medium-gray; border-style: solid; border-radius: $border-radius; box-sizing: border-box; @@ -33,13 +33,13 @@ cursor: col-resize; } // .documentView-node:first-child { - // background: $light-color; + // background: $white; // } } .collectionSchemaView-searchContainer { border-width: $COLLECTION_BORDER_WIDTH; - border-color: $intermediate-color; + border-color: $medium-gray; border-style: solid; border-radius: $border-radius; box-sizing: border-box; @@ -72,7 +72,7 @@ cursor: col-resize; } // .documentView-node:first-child { - // background: $light-color; + // background: $white; // } } @@ -245,7 +245,7 @@ button.add-column { } } label { - color: $main-accent; + color: $medium-gray; font-weight: normal; letter-spacing: 2px; text-transform: uppercase; @@ -260,11 +260,11 @@ button.add-column { background-color: white; transition: background-color 0.2s; &:hover { - background-color: $light-color-secondary; + background-color: $light-gray; } &.active { font-weight: bold; - border: 2px solid $light-color-secondary; + border: 2px solid $light-gray; } svg { color: gray; @@ -277,7 +277,7 @@ button.add-column { //width: 100%; background-color: white; input { - border: 2px solid $light-color-secondary; + border: 2px solid $light-gray; padding: 3px; height: 28px; font-weight: bold; @@ -303,7 +303,7 @@ button.add-column { border-top: 0; } &:hover { - background-color: $light-color-secondary; + background-color: $light-gray; } } } @@ -329,7 +329,7 @@ button.add-column { height: 100%; background-color: white; &.row-focused .rt-td { - background-color: #bfffc0; //$light-color-secondary; + background-color: #bfffc0; //$light-gray; } &.row-wrapped { .rt-td { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index ef28f75c8..585cda729 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -11,21 +11,21 @@ import { listSpec } from "../../../../fields/Schema"; import { PastelSchemaPalette, SchemaHeaderField } from "../../../../fields/SchemaHeaderField"; import { Cast, NumCast } from "../../../../fields/Types"; import { TraceMobx } from "../../../../fields/util"; -import { emptyFunction, emptyPath, returnFalse, setupMoveUpEvents, returnEmptyDoclist, returnTrue } from "../../../../Utils"; +import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from "../../../../Utils"; +import { DocUtils } from "../../../documents/Documents"; import { SelectionManager } from "../../../util/SelectionManager"; import { SnappingManager } from "../../../util/SnappingManager"; import { Transform } from "../../../util/Transform"; import { undoBatch } from "../../../util/UndoManager"; -import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../globalCssVariables.scss'; +import '../../../views/DocumentDecorations.scss'; import { ContextMenu } from "../../ContextMenu"; import { ContextMenuProps } from "../../ContextMenuItem"; -import '../../../views/DocumentDecorations.scss'; +import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../global/globalCssVariables.scss'; import { DocumentView } from "../../nodes/DocumentView"; import { DefaultStyleProvider } from "../../StyleProvider"; -import "./CollectionSchemaView.scss"; import { CollectionSubView } from "../CollectionSubView"; +import "./CollectionSchemaView.scss"; import { SchemaTable } from "./SchemaTable"; -import { DocUtils } from "../../../documents/Documents"; // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 export enum ColumnType { diff --git a/src/client/views/collections/collectionSchema/SchemaTable.tsx b/src/client/views/collections/collectionSchema/SchemaTable.tsx index 0d5c9e077..de08c327a 100644 --- a/src/client/views/collections/collectionSchema/SchemaTable.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTable.tsx @@ -21,7 +21,7 @@ import { DocumentType } from "../../../documents/DocumentTypes"; import { CompileScript, Transformer, ts } from "../../../util/Scripting"; import { Transform } from "../../../util/Transform"; import { undoBatch } from "../../../util/UndoManager"; -import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../globalCssVariables.scss'; +import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../global/globalCssVariables.scss'; import { ContextMenu } from "../../ContextMenu"; import '../../../views/DocumentDecorations.scss'; import { DocumentView } from "../../nodes/DocumentView"; diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss index ccc9306c4..ead5e166e 100644 --- a/src/client/views/globalCssVariables.scss +++ b/src/client/views/global/globalCssVariables.scss @@ -1,28 +1,37 @@ @import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700|Crimson+Text:400,400i,700"); // colors -$light-color: #fcfbf7; -$light-color-secondary:#f1efeb; -//$main-accent: #61aaa3; -$main-accent: #aaaaa3; -// $alt-accent: #cdd5ec; -// $alt-accent: #cdeceb; -//$alt-accent: #59dff7; -$alt-accent: #c2c2c5; -$lighter-alt-accent: rgb(207, 220, 240); -$darker-alt-accent: #b2cef8; -$intermediate-color: #9c9396; -$dark-color: #121721; -$link-color: #add8e6; -$antimodemenu-height: 35px; +$white: #ffffff; +$light-gray:#dfdfdf; +$medium-gray: #9F9F9F; +$dark-gray: #323232; +$black: #000000; + +$light-blue: #BDDDF5; +$medium-blue: #4476F7; +$pink: #E0217D; +$yellow: #F5D747; + +$drop-shadow: "#32323215"; + +//padding +$minimum-padding: 4px; +$medium-padding: 16px; +$large-padding: 32px; + +//icon sizes +$icon-size: 28px; + +$antimodemenu-height: 36px; + // fonts -$sans-serif: "Noto Sans", -sans-serif; +$sans-serif: "Noto Sans", sans-serif; +$large-header: 16px; +$body-text: 12px; +$small-text: 9px; // $sans-serif: "Roboto Slab", sans-serif; -$serif: "Crimson Text", -serif; + // misc values $border-radius: 0.3em; -// $search-thumnail-size: 130; // dragged items @@ -35,7 +44,7 @@ $docDecorations-zindex: 998; // then doc decorations appear over everything else $remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right? $COLLECTION_BORDER_WIDTH: 0; $SCHEMA_DIVIDER_WIDTH: 4; -$MINIMIZED_ICON_SIZE:25; +$MINIMIZED_ICON_SIZE:24; $MAX_ROW_HEIGHT: 44px; $DFLT_IMAGE_NATIVE_DIM: 900px; $MENU_PANEL_WIDTH: 60px; diff --git a/src/client/views/globalCssVariables.scss.d.ts b/src/client/views/global/globalCssVariables.scss.d.ts index 11e62e1eb..11e62e1eb 100644 --- a/src/client/views/globalCssVariables.scss.d.ts +++ b/src/client/views/global/globalCssVariables.scss.d.ts diff --git a/src/client/views/global/globalEnums.tsx b/src/client/views/global/globalEnums.tsx new file mode 100644 index 000000000..1e0381c33 --- /dev/null +++ b/src/client/views/global/globalEnums.tsx @@ -0,0 +1,34 @@ +export enum Colors { + BLACK = "#000000", + DARK_GRAY = "#323232", + MEDIUM_GRAY = "#9F9F9F", + LIGHT_GRAY = "#DFDFDF", + WHITE = "#FFFFFF", + MEDIUM_BLUE = "#4476F7", + LIGHT_BLUE = "#BDDDF5", + PINK = "#E0217D", + YELLOW = "#F5D747", + DROP_SHADOW = "#32323215", +} + +export enum FontSizes { + //Bolded + LARGE_HEADER = "16px", + + //Bolded or unbolded + BODY_TEXT = "12px", + + //Bolded + SMALL_TEXT = "9px", +} + +export enum Padding { + MINIMUM_PADDING = "4px", + SMALL_PADDING = "8px", + MEDIUM_PADDING = "16px", + LARGE_PADDING = "32px", +} + +export enum IconSizes { + ICON_SIZE = "28px", +}
\ No newline at end of file diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss index 7e6999cdc..839ebf894 100644 --- a/src/client/views/linking/LinkEditor.scss +++ b/src/client/views/linking/LinkEditor.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .linkEditor { width: 100%; @@ -20,7 +20,7 @@ } .linkEditor-info { - //border-bottom: 0.5px solid $light-color-secondary; + //border-bottom: 0.5px solid $light-gray; //padding-bottom: 1px; padding-top: 5px; padding-left: 5px; @@ -195,7 +195,7 @@ } .linkEditor-group { - background-color: $light-color-secondary; + background-color: $light-gray; padding: 6px; margin: 3px 0; border-radius: 3px; @@ -254,8 +254,8 @@ } .linkEditor-option { - background-color: $light-color-secondary; - border: 1px solid $intermediate-color; + background-color: $light-gray; + border: 1px solid $medium-gray; border-top: 0; padding: 3px; cursor: pointer; @@ -272,7 +272,7 @@ .linkEditor-typeButton { background-color: transparent; - color: $dark-color; + color: $dark-gray; height: 20px; padding: 0 3px; padding-bottom: 2px; @@ -285,7 +285,7 @@ width: calc(100% - 40px); &:hover { - background-color: $light-color; + background-color: $white; } } diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss index a90bf8b0a..a2ea42999 100644 --- a/src/client/views/linking/LinkMenu.scss +++ b/src/client/views/linking/LinkMenu.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .linkMenu { width: auto; diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index 4e13ef8c8..4f9881565 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -1,7 +1,7 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .linkMenu-item { - // border-top: 0.5px solid $main-accent; + // border-top: 0.5px solid $medium-gray; position: relative; display: flex; border-bottom: 0.5px solid black; @@ -102,7 +102,7 @@ .link-metadata { padding: 0 10px 0 16px; margin-bottom: 4px; - color: $main-accent; + color: $medium-gray; font-style: italic; font-size: 10.5px; } @@ -143,8 +143,8 @@ padding-right: 6px; border-radius: 50%; pointer-events: auto; - background-color: $dark-color; - color: $light-color; + background-color: $dark-gray; + color: $white; font-size: 65%; transition: transform 0.2s; text-align: center; @@ -162,7 +162,7 @@ } &:hover { - background: $main-accent; + background: $medium-gray; cursor: pointer; } } diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index a0a40becb..9b75cd8f9 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -64,6 +64,7 @@ interface HTMLtagProps { htmltag: string; onClick?: ScriptField; onInput?: ScriptField; + scaling: number; } //"<HTMLdiv borderRadius='100px' onClick={this.bannerColor=this.bannerColor==='red'?'green':'red'} overflow='hidden' position='absolute' width='100%' height='100%' transform='rotate({2*this.x+this.y}deg)'> <ImageBox {...props} fieldKey={'data'}/> <HTMLspan width='200px' top='0' height='35px' textAlign='center' paddingTop='10px' transform='translate(-40px, 45px) rotate(-45deg)' position='absolute' color='{this.bannerColor===`green`?`light`:`dark`}blue' backgroundColor='{this.bannerColor===`green`?`dark`:`light`}blue'> {this.title}</HTMLspan></HTMLdiv>" @@ -82,7 +83,7 @@ interface HTMLtagProps { export class HTMLtag extends React.Component<HTMLtagProps> { click = (e: React.MouseEvent) => { const clickScript = (this.props as any).onClick as Opt<ScriptField>; - clickScript?.script.run({ this: this.props.Document, self: this.props.RootDoc }); + clickScript?.script.run({ this: this.props.Document, self: this.props.RootDoc, scale: this.props.scaling }); } onInput = (e: React.FormEvent<HTMLDivElement>) => { const onInputScript = (this.props as any).onInput as Opt<ScriptField>; @@ -90,9 +91,9 @@ export class HTMLtag extends React.Component<HTMLtagProps> { } render() { const style: { [key: string]: any } = {}; - const divKeys = OmitKeys(this.props, ["children", "htmltag", "RootDoc", "Document", "key", "onInput", "onClick", "__proto__"]).omit; + const divKeys = OmitKeys(this.props, ["children", "htmltag", "RootDoc", "scaling", "Document", "key", "onInput", "onClick", "__proto__"]).omit; const replacer = (match: any, expr: string, offset: any, string: any) => { // bcz: this executes a script to convert a propery expression string: { script } into a value - return ScriptField.MakeFunction(expr, { self: Doc.name, this: Doc.name })?.script.run({ self: this.props.RootDoc, this: this.props.Document }).result as string || ""; + return ScriptField.MakeFunction(expr, { self: Doc.name, this: Doc.name, scale: "number" })?.script.run({ self: this.props.RootDoc, this: this.props.Document, scale: this.props.scaling }).result as string || ""; }; Object.keys(divKeys).map((prop: string) => { const p = (this.props as any)[prop] as string; @@ -184,7 +185,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo // replace HTML<tag> with corresponding HTML tag as in: <HTMLdiv> becomes <HTMLtag Document={props.Document} htmltag='div'> const replacer2 = (match: any, p1: string, offset: any, string: any) => { - return `<HTMLtag RootDoc={props.RootDoc} Document={props.Document} htmltag='${p1}'`; + return `<HTMLtag RootDoc={props.RootDoc} Document={props.Document} scaling='${this.props.scaling?.() || 1}' htmltag='${p1}'`; }; layoutFrame = layoutFrame.replace(/<HTML([a-zA-Z0-9_-]+)/g, replacer2); @@ -200,7 +201,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo if (splits.length > 1) { const code = XRegExp.matchRecursive(splits[1], "{", "}", "", { valueNames: ["between", "left", "match", "right", "between"] }); layoutFrame = splits[0] + ` ${func}={props.${func}} ` + splits[1].substring(code[1].end + 1); - return ScriptField.MakeScript(code[1].value, { this: Doc.name, self: Doc.name, value: "string" }); + return ScriptField.MakeScript(code[1].value, { this: Doc.name, self: Doc.name, scale: "number", value: "string" }); } return undefined; // add input function to props diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index 735aa669f..daffaf9e7 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables.scss"; +@import "../global/globalCssVariables.scss"; .documentLinksButton-cont { @@ -37,7 +37,7 @@ font-weight: bold; &:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index bdbece621..8f86417d6 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .documentView-effectsWrapper { border-radius: inherit; @@ -22,7 +22,7 @@ transition: outline .3s linear; cursor: grab; - // background: $light-color; //overflow: hidden; + // background: $white; //overflow: hidden; transform-origin: left top; &.minimized { @@ -218,6 +218,6 @@ .documentView-node:first-child { position: relative; - background: "#B59B66"; //$light-color; + background: "#B59B66"; //$white; } }
\ No newline at end of file diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss index 33ac85a0e..718af2c16 100644 --- a/src/client/views/nodes/FontIconBox.scss +++ b/src/client/views/nodes/FontIconBox.scss @@ -1,5 +1,7 @@ +@import "../global/globalCssVariables"; + .fontIconBox-label { - color: white; + color: $white; margin-right: 4px; margin-top: 1px; position: relative; @@ -22,8 +24,8 @@ position: absolute; top: -10px; right: -10px; - color: white; - background: #f44b42; + color: $white; + background: $pink; font-weight: 300; border-radius: 100%; width: 25px; @@ -37,7 +39,7 @@ .menuButton-circle, .menuButton-round { border-radius: 100%; - background-color: black; + background-color: $dark-gray; padding: 0; .fontIconBox-label { @@ -47,13 +49,14 @@ } &:hover { - background-color: #aaaaa3; + background-color: $light-gray; } } .menuButton-square { padding-top: 3px; padding-bottom: 3px; + background-color: $dark-gray; .fontIconBox-label { border-radius: 0px; diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss index eb7c2f32b..ffcba4981 100644 --- a/src/client/views/nodes/KeyValueBox.scss +++ b/src/client/views/nodes/KeyValueBox.scss @@ -1,10 +1,10 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .keyValueBox-cont { overflow-y: scroll; width:100%; height: 100%; - background-color: $light-color; - border: 1px solid $intermediate-color; + background-color: $white; + border: 1px solid $medium-gray; border-radius: $border-radius; box-sizing: border-box; display: inline-block; @@ -56,8 +56,8 @@ $header-height: 30px; width:100%; position: relative; display: inline-block; - background: $intermediate-color; - color: $light-color; + background: $medium-gray; + color: $white; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; @@ -66,7 +66,7 @@ $header-height: 30px; th { font-weight: normal; &:first-child { - border-right: 1px solid $light-color; + border-right: 1px solid $white; } } } @@ -76,9 +76,9 @@ $header-height: 30px; display: flex; width:100%; height:$header-height; - background: $light-color; + background: $white; .formattedTextBox-cont { - background: $light-color; + background: $white; } } .keyValueBox-cont { @@ -116,8 +116,8 @@ $header-height: 30px; display: flex; width:100%; height:30px; - background: $light-color-secondary; + background: $light-gray; .formattedTextBox-cont { - background: $light-color-secondary; + background: $light-gray; } }
\ No newline at end of file diff --git a/src/client/views/nodes/KeyValuePair.scss b/src/client/views/nodes/KeyValuePair.scss index f78767234..5b660e582 100644 --- a/src/client/views/nodes/KeyValuePair.scss +++ b/src/client/views/nodes/KeyValuePair.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .keyValuePair-td-key { diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 0f46da294..72dec6e4c 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -7,7 +7,7 @@ overflow: hidden; cursor: auto; transform-origin: top left; - z-index: 0; + //z-index: 0; .pdfBox-ui { position: absolute; @@ -30,6 +30,7 @@ justify-content: center; border-radius: 3px; pointer-events: all; + z-index: 1; // so it appears on top of the document's title, if shown } .pdfBox-pageNums { @@ -223,7 +224,7 @@ .pdfBox { width: 100%; height: 100%; - pointer-events: none; + //pointer-events: none; .pdfViewerDash-text { .textLayer { display: none; diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 1ba86232b..5d1c5f4eb 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -1,7 +1,4 @@ -$light-blue: #AEDDF8; -$dark-blue: #5B9FDD; -$light-background: #ececec; -$dark-grey: #656565; +@import "../global/globalCssVariables"; .presBox-cont { cursor: auto; @@ -10,7 +7,6 @@ $dark-grey: #656565; pointer-events: inherit; z-index: 2; font-family: Roboto; - box-shadow: #AAAAAA .2vw .2vw .4vw; width: 100%; min-width: 20px; height: 100%; @@ -47,8 +43,8 @@ $dark-grey: #656565; align-items: center; height: 30px; width: 100%; - color: white; - background-color: #323232; + color: $white; + background-color: $dark-gray; .toolbar-button { cursor: pointer; @@ -110,7 +106,7 @@ $dark-grey: #656565; } .toolbar-divider { - border-left: solid #ffffff70 0.5px; + border-left: solid $medium-gray 0.5px; height: 20px; } } @@ -118,7 +114,7 @@ $dark-grey: #656565; .dropdown { font-size: 10; margin-left: 5px; - color: darkgrey; + color: $medium-gray; transition: 0.5s ease; } @@ -174,7 +170,7 @@ $dark-grey: #656565; .ribbon-colorBox { cursor: pointer; - border: solid 1px black; + border: solid 1px $black; display: flex; margin-left: 5px; margin-top: 5px; @@ -191,9 +187,9 @@ $dark-grey: #656565; font-size: 11; font-weight: 200; height: 20; - background-color: #ececec; - color: black; - border: solid 1px black; + background-color: $white; + color: $black; + border: solid 1px $black; display: flex; margin-left: 5px; margin-top: 5px; @@ -220,11 +216,11 @@ $dark-grey: #656565; align-items: center; height: 100%; width: 100%; - background: black; + background: $black; } .ribbon-propertyUpDownItem:hover { - background: darkgrey; + background: $medium-gray; transform: scale(1.05); } } @@ -239,7 +235,7 @@ $dark-grey: #656565; .multiThumb-slider { display: grid; - background-color: $light-background; + background-color: $white; height: 10px; border-radius: 10px; overflow: hidden; @@ -257,8 +253,8 @@ $dark-grey: #656565; -webkit-appearance: none; height: 10px; cursor: ew-resize; - background: $dark-blue; - box-shadow: -100vw 0 0 100vw $light-background; + background: $medium-blue; + box-shadow: -100vw 0 0 100vw $white; } .toolbar-slider.end::-webkit-slider-thumb { @@ -267,7 +263,7 @@ $dark-grey: #656565; -webkit-appearance: none; height: 10px; cursor: ew-resize; - background: $dark-blue; + background: $medium-blue; box-shadow: -100vw 0 0 100vw $light-blue; } } @@ -282,7 +278,7 @@ $dark-grey: #656565; height: 10px; border-radius: 10px; -webkit-appearance: none; - background-color: $light-background; + background-color: $white; } .toolbar-slider:focus { @@ -301,7 +297,7 @@ $dark-grey: #656565; -webkit-appearance: none; height: 10px; cursor: ew-resize; - background: $dark-blue; + background: $medium-blue; box-shadow: -100vw 0 0 100vw $light-blue; } @@ -318,7 +314,7 @@ $dark-grey: #656565; width: 15px; min-width: 15px; cursor: pointer; - background: $light-background; + background: $white; } .presBox-checkbox:focus { @@ -326,7 +322,7 @@ $dark-grey: #656565; } .presBox-checkbox:hover { - background: #c0c0c0; + background: $light-gray; } .presBox-checkbox:checked { @@ -381,9 +377,9 @@ $dark-grey: #656565; text-align: center; font-size: 16; width: 90%; - color: black; + color: $black; transform: translate(5%, 0px); - border-bottom: solid 2px darkgrey; + border-bottom: solid 2px $medium-gray; } @@ -396,8 +392,8 @@ $dark-grey: #656565; justify-self: left; margin-top: 5px; padding-left: 10px; - background-color: $light-background; - border: solid 1px black; + background-color: $white; + border: solid 1px $black; min-width: 80px; max-width: 200px; width: 100%; @@ -416,7 +412,7 @@ $dark-grey: #656565; } .ribbon-frameSelector { - border: black solid 1px; + border: $black solid 1px; width: 60px; height: 20px; margin-top: 5px; @@ -433,12 +429,12 @@ $dark-grey: #656565; cursor: pointer; position: relative; height: 100%; - background: $light-background; + background: $white; display: flex; align-items: center; justify-content: center; text-align: center; - color: black; + color: $black; } .numKeyframe { @@ -446,7 +442,7 @@ $dark-grey: #656565; font-size: 10; font-weight: 600; position: relative; - color: black; + color: $black; display: flex; width: 100%; height: 100%; @@ -489,7 +485,7 @@ $dark-grey: #656565; padding-left: 10; padding-right: 10; border-radius: 10px; - background-color: #979797; + background-color: $medium-gray; } .ribbon-final-button:hover { @@ -508,13 +504,13 @@ $dark-grey: #656565; align-items: center; margin-bottom: 5px; height: 25px; - color: lightgrey; + color: $light-gray; width: 100%; max-width: 120; padding-left: 10; padding-right: 10; border-radius: 10px; - background-color: black; + background-color: $black; } .ribbon-final-button-hidden:hover { @@ -525,15 +521,15 @@ $dark-grey: #656565; .ribbon-frameList { width: calc(100% - 5px); height: 50px; - background-color: #ececec; - border: 1px solid #9f9f9f; + background-color: $white; + border: 1px solid $medium-gray; grid-template-rows: max-content; .frameList-header { display: grid; width: 100%; height: 20px; - background-color: #9f9f9f; + background-color: $medium-gray; .frameList-headerButtons { display: flex; @@ -588,7 +584,7 @@ $dark-grey: #656565; font-size: 10.5; font-weight: 300; height: 20; - background-color: #979797; + background-color: $medium-gray; color: white; display: flex; margin-top: 5px; @@ -607,8 +603,8 @@ $dark-grey: #656565; transition: all 0.4s; font-weight: 400; opacity: 1; - color: white; - background-color: black; + color: $white; + background-color: $black; } .ribbon-toggle { @@ -616,10 +612,10 @@ $dark-grey: #656565; font-size: 10.5; font-weight: 200; height: 20; - background-color: $light-background; + background-color: $white; border: solid 1px rgba(0, 0, 0, 0.5); display: flex; - color: black; + color: $black; margin-top: 5px; margin-bottom: 5px; border-radius: 5px; @@ -660,13 +656,13 @@ $dark-grey: #656565; position: relative; font-size: 13; padding-bottom: 10px; - border-bottom: solid 1px $dark-grey; + border-bottom: solid 1px $dark-gray; .presBox-dropdown:hover { - border: solid 1px $dark-blue; + border: solid 1px $medium-blue; .presBox-dropdownIcon { - color: $dark-blue; + color: $medium-blue; } } @@ -675,12 +671,12 @@ $dark-grey: #656565; display: grid; grid-template-columns: auto 20%; position: relative; - border: solid 1px black; - background-color: $light-background; + border: solid 1px $black; + background-color: $light-gray; border-radius: 5px; font-size: 10; height: 25; - color: black; + color: $black; padding-left: 5px; align-items: center; margin-top: 5px; @@ -744,7 +740,7 @@ $dark-grey: #656565; height: 100px; padding-top: 5px; padding-bottom: 5px; - border: solid 1px black; + border: solid 1px $black; // overflow: auto; ::-webkit-scrollbar { @@ -794,7 +790,7 @@ $dark-grey: #656565; cursor: pointer; position: relative; text-align: center; - border-left: solid 1px darkgrey; + border-left: solid 1px $medium-gray; width: 20%; height: 100%; display: flex; @@ -825,7 +821,7 @@ $dark-grey: #656565; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8); z-index: 200; background-color: white; - color: black; + color: $black; position: absolute; overflow: hidden; } @@ -841,12 +837,12 @@ $dark-grey: #656565; align-items: center; justify-content: center; transform: translate(0px, -1px); - background-color: $light-background; + background-color: $white; width: 40px; height: 15px; align-self: center; justify-self: center; - border: solid 1px black; + border: solid 1px $black; border-top: 0px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; @@ -855,15 +851,15 @@ $dark-grey: #656565; .layout-container { padding: 5px; display: grid; - background-color: $light-background; + background-color: $white; grid-template-columns: repeat(auto-fit, minmax(90px, 100px)); width: 100%; - border: solid 1px black; + border: solid 1px $black; min-width: 100px; overflow: hidden; .layout:hover { - border: solid 2px #5c9edd; + border: solid 2px $medium-blue; } .layout { @@ -878,7 +874,7 @@ $dark-grey: #656565; width: 90px; overflow: hidden; background-color: white; - border: solid darkgrey 1px; + border: solid $medium-gray 1px; display: grid; grid-template-rows: auto; align-items: center; @@ -893,7 +889,7 @@ $dark-grey: #656565; height: 13; font-size: 12; display: flex; - background-color: #f1efec; + background-color: #white; } .subtitle { @@ -906,7 +902,7 @@ $dark-grey: #656565; height: 13; font-size: 9; display: flex; - background-color: #f1efec; + background-color: $white; } .content { @@ -919,7 +915,7 @@ $dark-grey: #656565; height: 13; font-size: 10; display: flex; - background-color: #f1efec; + background-color: $white; height: 33; text-align: left; font-size: 8px; @@ -960,8 +956,8 @@ $dark-grey: #656565; select { - background: #323232; - color: white; + background: $dark-gray; + color: $white; } .presBox-button { @@ -975,8 +971,8 @@ $dark-grey: #656565; text-align: center; letter-spacing: normal; width: inherit; - background: #323232; - color: white; + background: $dark-gray; + color: $white; } .presBox-button.active { @@ -984,7 +980,7 @@ $dark-grey: #656565; } .presBox-button.active:hover { - background-color: #233163; + background-color: $medium-blue; } .presBox-button.edit { @@ -1053,8 +1049,8 @@ $dark-grey: #656565; font-size: 100; display: flex; align-items: center; - background: #323232; - color: white; + background: $dark-gray; + color: $white; } .presBox-viewPicker { @@ -1086,7 +1082,7 @@ $dark-grey: #656565; top: 10; opacity: 0.1; transition: all 0.4s; - color: white; + color: $white; } .miniPres:hover { @@ -1094,8 +1090,8 @@ $dark-grey: #656565; } .presPanelOverlay { - background-color: #323232; - color: white; + background-color: $dark-gray; + color: $white; border-radius: 5px; grid-template-rows: 100%; height: 25; @@ -1129,7 +1125,7 @@ $dark-grey: #656565; .presPanel-divider { width: 0.5px; height: 80%; - border-right: solid 1px #5a5a5a; + border-right: solid 1px $medium-gray; } .presPanel-button-frame { @@ -1161,12 +1157,12 @@ $dark-grey: #656565; } .presPanel-button:hover { - background-color: #5a5a5a; + background-color: $medium-gray; transform: scale(1.2); } .presPanel-button-text:hover { - background-color: #5a5a5a; + background-color: $medium-gray; } diff --git a/src/client/views/nodes/RadialMenu.scss b/src/client/views/nodes/RadialMenu.scss index daa620d12..312b51013 100644 --- a/src/client/views/nodes/RadialMenu.scss +++ b/src/client/views/nodes/RadialMenu.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .radialMenu-cont { position: absolute; @@ -53,7 +53,7 @@ s transition: all .1s; border-width: .11px; border-style: none; - border-color: $intermediate-color; // rgb(187, 186, 186); + border-color: $medium-gray; // rgb(187, 186, 186); // padding: 10px 0px 10px 0px; white-space: nowrap; font-size: 13px; diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index ca82c049c..19b69ff5a 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables.scss"; +@import "../global/globalCssVariables.scss"; .webBox { @@ -17,6 +17,7 @@ justify-content: center; border-radius: 3px; pointer-events: all; + z-index: 1; // so it appears on top of the document's title, if shown } .pdfViewerDash-dragAnnotationBox { diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss index 53aceb533..3cedab1a4 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss @@ -1,4 +1,4 @@ -@import "../../globalCssVariables"; +@import "../../global/globalCssVariables"; .ProseMirror { width: 100%; @@ -31,7 +31,7 @@ audiotag:hover { padding: 0; border-width: 0px; border-radius: inherit; - border-color: $intermediate-color; + border-color: $medium-gray; box-sizing: border-box; background-color: inherit; border-style: solid; @@ -363,7 +363,7 @@ footnote::after { @media only screen and (max-width: 1000px) { - @import "../../globalCssVariables"; + @import "../../global/globalCssVariables"; .ProseMirror { width: 100%; @@ -381,7 +381,7 @@ footnote::after { padding: 0; border-width: 0px; border-radius: inherit; - border-color: $intermediate-color; + border-color: $medium-gray; box-sizing: border-box; background-color: inherit; border-style: solid; diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 95d8f555c..6dd63fb47 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -71,6 +71,7 @@ export interface FormattedTextBoxProps { xPadding?: number; // used to override document's settings for xMargin --- see CollectionCarouselView yPadding?: number; noSidebar?: boolean; + dontScale?: boolean; dontSelectOnLoad?: boolean; // suppress selecting the text box when loaded (and mark as not being associated with scrollTop document field) } export const GoogleRef = "googleDocId"; @@ -126,7 +127,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp @computed get scrollHeight() { return NumCast(this.rootDoc[this.fieldKey + "-scrollHeight"]); } @computed get sidebarHeight() { return !this.sidebarWidth() ? 0 : NumCast(this.rootDoc[this.SidebarKey + "-height"]); } @computed get titleHeight() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin) || 0; } - @computed get autoHeightMargins() { return this.titleHeight + (this.layoutDoc._autoHeightMargins && !this.props.dontSelectOnLoad ? NumCast(this.layoutDoc._autoHeightMargins) : 0); } + @computed get autoHeightMargins() { return this.titleHeight + NumCast(this.layoutDoc._autoHeightMargins); } @computed get _recording() { return this.dataDoc?.mediaState === "recording"; } set _recording(value) { !this.dataDoc.recordingSource && (this.dataDoc.mediaState = value ? "recording" : undefined); @@ -1524,10 +1525,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp <div className="formattedTextBox-cont" onWheel={e => this.isContentActive() && e.stopPropagation()} style={{ - transform: `scale(${scale})`, - transformOrigin: "top left", - width: `${100 / scale}%`, - height: `${100 / scale}%`, + transform: this.props.dontScale ? undefined : `scale(${scale})`, + transformOrigin: this.props.dontScale ? undefined : "top left", + width: this.props.dontScale ? undefined : `${100 / scale}%`, + height: this.props.dontScale ? undefined : `${100 / scale}%`, // overflowY: this.layoutDoc._autoHeight ? "hidden" : undefined, ...this.styleFromLayoutString(scale) // this converts any expressions in the format string to style props. e.g., <FormattedTextBox height='{this._headerHeight}px' > }}> diff --git a/src/client/views/nodes/formattedText/RichTextMenu.scss b/src/client/views/nodes/formattedText/RichTextMenu.scss index 1d24d6833..c94e93541 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.scss +++ b/src/client/views/nodes/formattedText/RichTextMenu.scss @@ -1,4 +1,4 @@ -@import "../../globalCssVariables"; +@import "../../global/globalCssVariables"; .button-dropdown-wrapper { position: relative; @@ -24,7 +24,7 @@ top: 35px; left: 0; background-color: #323232; - color: $light-color-secondary; + color: $light-gray; border: 1px solid #4d4d4d; border-radius: 0 6px 6px 6px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); diff --git a/src/client/views/nodes/formattedText/TooltipTextMenu.scss b/src/client/views/nodes/formattedText/TooltipTextMenu.scss index 0e4b752ac..8c4d77da9 100644 --- a/src/client/views/nodes/formattedText/TooltipTextMenu.scss +++ b/src/client/views/nodes/formattedText/TooltipTextMenu.scss @@ -1,4 +1,4 @@ -@import "../views/globalCssVariables"; +@import "../views/global/globalCssVariables"; .ProseMirror-menu-dropdown-wrap { display: inline-block; position: relative; @@ -50,7 +50,7 @@ padding: 3px; &:hover { - background-color: $light-color-secondary; + background-color: $light-gray; } } } @@ -294,9 +294,9 @@ top: 31px; background-color: #323232; border: 1px solid #4d4d4d; - color: $light-color-secondary; + color: $light-gray; // border: none; - // border: 1px solid $light-color-secondary; + // border: 1px solid $light-gray; border-radius: 0 6px 6px 6px; padding: 3px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); @@ -323,7 +323,7 @@ } .separated-button { - border-top: 1px solid $light-color-secondary; + border-top: 1px solid $light-gray; padding-top: 6px; } diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss index cc858bec6..2a0085ade 100644 --- a/src/client/views/search/CheckBox.scss +++ b/src/client/views/search/CheckBox.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .checkboxfilter { display: flex; @@ -13,7 +13,7 @@ margin-top: 0px; .check-container:hover~.check-box { - background-color: $darker-alt-accent; + background-color: $medium-blue; } .check-container { @@ -40,7 +40,7 @@ overflow: visible; background-color: transparent; border-style: solid; - border-color: $alt-accent; + border-color: $medium-gray; border-width: 2px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; diff --git a/src/client/views/search/CollectionFilters.scss b/src/client/views/search/CollectionFilters.scss index b54cdcbd1..845b16f67 100644 --- a/src/client/views/search/CollectionFilters.scss +++ b/src/client/views/search/CollectionFilters.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .collection-filters { display: flex; diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss index 013dcd57e..6aaf7918d 100644 --- a/src/client/views/search/IconBar.scss +++ b/src/client/views/search/IconBar.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .icon-bar { display: flex; diff --git a/src/client/views/search/IconButton.scss b/src/client/views/search/IconButton.scss index 4ec03c7c9..3cb08d756 100644 --- a/src/client/views/search/IconButton.scss +++ b/src/client/views/search/IconButton.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .type-outer { display: flex; @@ -9,7 +9,7 @@ .type-icon { height: 30px; width: 30px; - color: $light-color; + color: $white; // background-color: rgb(194, 194, 197); background-color: gray; border-radius: 50%; @@ -43,7 +43,7 @@ .type-icon:hover { transform: scale(1.1); - background-color: $darker-alt-accent; + background-color: $medium-blue; opacity: 1; +.filter-description { diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx index 349690b20..2dd6b1b79 100644 --- a/src/client/views/search/IconButton.tsx +++ b/src/client/views/search/IconButton.tsx @@ -4,7 +4,7 @@ import { action, IReactionDisposer, observable, reaction, runInAction } from 'mo import { observer } from 'mobx-react'; import * as React from 'react'; import { DocumentType } from "../../documents/DocumentTypes"; -import '../globalCssVariables.scss'; +import '../global/globalCssVariables.scss'; import { IconBar } from './IconBar'; import "./IconButton.scss"; import "./SearchBox.scss"; @@ -104,7 +104,7 @@ export class IconButton extends React.Component<IconButtonProps>{ hoverStyle = { opacity: 1, backgroundColor: "rgb(128, 128, 128)" - //backgroundColor: "rgb(178, 206, 248)" //$darker-alt-accent + //backgroundColor: "rgb(178, 206, 248)" //$medium-blue }; render() { diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss index c23bab461..8a70b29de 100644 --- a/src/client/views/search/NaviconButton.scss +++ b/src/client/views/search/NaviconButton.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; $height-icon: 15px; $width-line: 30px; @@ -20,7 +20,7 @@ $translateX: 0; .line { display: block; - background: $alt-accent; + background: $medium-gray; width: $width-line; height: $height-line; position: absolute; diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 4f5b7e41a..6a2fe6f19 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; @import "./NaviconButton.scss"; .searchBox-container { @@ -20,7 +20,7 @@ display: flex; justify-content: center; align-items: center; - background-color: black; + background-color: $dark-gray; .searchBox-lozenges { position: absolute; @@ -86,7 +86,7 @@ &.searchBox-input { margin:5px; border-radius:20px; - border:black; + border:$dark-gray; display: block; width: 130px; -webkit-transition: width 0.4s; @@ -114,7 +114,7 @@ } &.searchBox-close { - color: $light-color; + color: $white; max-height: $searchpanel-height; } } @@ -132,7 +132,7 @@ .no-result { width: 500px; - background: $light-color-secondary; + background: $light-gray; padding: 10px; height: 50px; text-transform: uppercase; diff --git a/src/client/views/search/SelectorContextMenu.scss b/src/client/views/search/SelectorContextMenu.scss index 48cacc608..a114f679c 100644 --- a/src/client/views/search/SelectorContextMenu.scss +++ b/src/client/views/search/SelectorContextMenu.scss @@ -1,7 +1,7 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .parents { - background: $lighter-alt-accent; + background: $light-blue; padding: 10px; // width: 300px; @@ -10,7 +10,7 @@ } .collection { - border-color: $darker-alt-accent; + border-color: $medium-blue; border-bottom-style: solid; } }
\ No newline at end of file diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss index 79f866acb..3a164f133 100644 --- a/src/client/views/search/ToggleBar.scss +++ b/src/client/views/search/ToggleBar.scss @@ -1,9 +1,9 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .toggle-title { display: flex; align-items: center; - color: $light-color; + color: $white; text-transform: uppercase; flex-direction: row; justify-content: space-around; @@ -25,7 +25,7 @@ // height: 50px; height: 30px; width: 100px; - background-color: $alt-accent; + background-color: $medium-gray; border-radius: 10px; padding: 5px; display: flex; @@ -36,6 +36,6 @@ width: 40px; height: 100%; border-radius: 10px; - background-color: $light-color; + background-color: $white; } }
\ No newline at end of file diff --git a/src/client/views/webcam/DashWebRTCVideo.scss b/src/client/views/webcam/DashWebRTCVideo.scss index 41307a808..249aee9d6 100644 --- a/src/client/views/webcam/DashWebRTCVideo.scss +++ b/src/client/views/webcam/DashWebRTCVideo.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .webcam-cont { background: whitesmoke; diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index bd0ba3ad7..464a8ad05 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -803,6 +803,27 @@ export namespace Doc { return undefined; } + // Makes a delegate of a document by first creating a delegate where data should be stored + // (ie, the 'data' doc), and then creates another delegate of that (ie, the 'layout' doc). + // This is appropriate if you're trying to create a document that behaves like all + // regularly created documents (e.g, text docs, pdfs, etc which all have data/layout docs) + export function MakeDelegateWithProto(doc: Doc, id?: string, title?: string): Doc { + const delegateProto = new Doc(); + delegateProto[Initializing] = true; + delegateProto.proto = doc; + delegateProto.author = Doc.CurrentUserEmail; + delegateProto.isPrototype = true; + title && (delegateProto.title = title); + const delegate = new Doc(id, true); + delegate[Initializing] = true; + delegate.proto = delegateProto; + delegate.author = Doc.CurrentUserEmail; + Doc.AddDocToList(delegateProto[DataSym], "aliases", delegate); + delegate[Initializing] = false; + delegateProto[Initializing] = false; + return delegate; + } + let _applyCount: number = 0; export function ApplyTemplate(templateDoc: Doc) { if (templateDoc) { @@ -1150,8 +1171,7 @@ export namespace Doc { return ndoc; } export function delegateDragFactory(dragFactory: Doc) { - const ndoc = Doc.MakeDelegate(dragFactory); - ndoc.isPrototype = true; + const ndoc = Doc.MakeDelegateWithProto(dragFactory); if (ndoc && dragFactory["dragFactory-count"] !== undefined) { dragFactory["dragFactory-count"] = NumCast(dragFactory["dragFactory-count"]) + 1; Doc.GetProto(ndoc).title = ndoc.title + " " + NumCast(dragFactory["dragFactory-count"]).toString(); diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts index dbe51b24a..1270a2dab 100644 --- a/src/fields/InkField.ts +++ b/src/fields/InkField.ts @@ -4,6 +4,7 @@ import { ObjectField } from "./ObjectField"; import { Copy, ToScriptString, ToString, Update } from "./FieldSymbols"; import { Scripting } from "../client/util/Scripting"; +// Helps keep track of the current ink tool in use. export enum InkTool { None = "none", Pen = "pen", @@ -12,13 +13,41 @@ export enum InkTool { Stamp = "stamp" } + +// Defines a point in an ink as a pair of x- and y-coordinates. export interface PointData { X: number; Y: number; } +// Defines an ink as an array of points. export type InkData = Array<PointData>; +export interface ControlPoint { + X: number; + Y: number; + I: number; +} + +export interface HandlePoint { + X: number; + Y: number; + I: number; + dot1: number; + dot2: number; +} + +export interface HandleLine { + X1: number; + Y1: number; + X2: number; + Y2: number; + X3: number; + Y3: number; + dot1: number; + dot2: number; +} + const pointSchema = createSimpleSchema({ X: true, Y: true }); @@ -32,8 +61,6 @@ const strokeDataSchema = createSimpleSchema({ export class InkField extends ObjectField { @serializable(list(object(strokeDataSchema))) readonly inkData: InkData; - // inkData: InkData; - constructor(data: InkData) { super(); diff --git a/src/mobile/AudioUpload.scss b/src/mobile/AudioUpload.scss index 6e64d9e2e..dce0c724f 100644 --- a/src/mobile/AudioUpload.scss +++ b/src/mobile/AudioUpload.scss @@ -1,4 +1,4 @@ -@import "../client/views/globalCssVariables.scss"; +@import "../client/views/global/globalCssVariables.scss"; .audioUpload_cont { display: flex; diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index 890258918..6669a3d21 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -1,4 +1,4 @@ -@import "../client/views/globalCssVariables.scss"; +@import "../client/views/global/globalCssVariables.scss"; .imgupload_cont { display: flex; diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 2183d2172..98696496f 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -5,7 +5,7 @@ import * as rp from 'request-promise'; import { DocServer } from '../client/DocServer'; import { Docs } from '../client/documents/Documents'; import { Networking } from '../client/Network'; -import { DFLT_IMAGE_NATIVE_DIM } from '../client/views/globalCssVariables.scss'; +import { DFLT_IMAGE_NATIVE_DIM } from '../client/views/global/globalCssVariables.scss'; import { MainViewModal } from '../client/views/MainViewModal'; import { Doc, Opt } from '../fields/Doc'; import { List } from '../fields/List'; diff --git a/src/server/DashSession/Session/agents/server_worker.ts b/src/server/DashSession/Session/agents/server_worker.ts index 6a19bfa5d..60fc181c7 100644 --- a/src/server/DashSession/Session/agents/server_worker.ts +++ b/src/server/DashSession/Session/agents/server_worker.ts @@ -1,10 +1,10 @@ -import { ExitHandler } from "./applied_session_agent"; import { isMaster } from "cluster"; -import { manage, ErrorLike } from "./promisified_ipc_manager"; -import IPCMessageReceiver from "./process_message_router"; -import { red, green, white, yellow } from "colors"; +import { green, red, white, yellow } from "colors"; import { get } from "request-promise"; +import { ExitHandler } from "./applied_session_agent"; import { Monitor } from "./monitor"; +import IPCMessageReceiver from "./process_message_router"; +import { ErrorLike, manage } from "./promisified_ipc_manager"; /** * Effectively, each worker repairs the connection to the server by reintroducing a consistent state |