diff options
Diffstat (limited to 'src/client/views/DocumentDecorations.tsx')
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 51 |
1 files changed, 21 insertions, 30 deletions
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index a615d8b26..ce33f488a 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -3,33 +3,33 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Tooltip } from '@material-ui/core'; import { action, computed, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; +import { DateField } from '../../fields/DateField'; import { AclAdmin, AclEdit, DataSym, Doc, Field, HeightSym, WidthSym } from "../../fields/Doc"; import { Document } from '../../fields/documentSchemas'; -import { HtmlField } from '../../fields/HtmlField'; import { InkField } from "../../fields/InkField"; import { ScriptField } from '../../fields/ScriptField'; import { Cast, NumCast, StrCast } from "../../fields/Types"; import { GetEffectiveAcl } from '../../fields/util'; -import { setupMoveUpEvents, emptyFunction, returnFalse } from "../../Utils"; -import { Docs, DocUtils } from "../documents/Documents"; +import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../Utils"; +import { Docs } from "../documents/Documents"; import { DocumentType } from '../documents/DocumentTypes'; import { CurrentUserUtils } from '../util/CurrentUserUtils'; import { DragManager } from "../util/DragManager"; +import { InteractionUtils } from '../util/InteractionUtils'; import { SelectionManager } from "../util/SelectionManager"; import { SnappingManager } from '../util/SnappingManager'; import { undoBatch, UndoManager } from "../util/UndoManager"; import { CollectionDockingView } from './collections/CollectionDockingView'; import { DocumentButtonBar } from './DocumentButtonBar'; import './DocumentDecorations.scss'; +import { Colors } from './global/globalEnums'; import { KeyManager } from './GlobalKeyHandler'; +import { InkingStroke } from './InkingStroke'; import { InkStrokeProperties } from './InkStrokeProperties'; import { LightboxView } from './LightboxView'; import { DocumentView } from "./nodes/DocumentView"; -import React = require("react"); import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; -import { DateField } from '../../fields/DateField'; -import { InteractionUtils } from '../util/InteractionUtils'; -import { Colors } from './global/globalEnums'; +import React = require("react"); @observer export class DocumentDecorations extends React.Component<{ PanelWidth: number, PanelHeight: number, boundsLeft: number, boundsTop: number }, { value: string }> { @@ -457,32 +457,23 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number, P bounds.b = Math.max(bounds.y, Math.max(topBounds, Math.min(window.innerHeight, bounds.b + this._resizeBorderWidth / 2 + this._linkBoxHeight) - this._resizeBorderWidth / 2 - this._linkBoxHeight)); const useRotation = seldoc.rootDoc.type === DocumentType.INK; - const docView = SelectionManager.Views().lastElement().docView; + const docView = seldoc.docView; let selectedLine = null; if (useRotation && docView) { - const inkData = Cast(SelectionManager.Views().lastElement().rootDoc.data, InkField)?.inkData ?? [{ X: 0, Y: 0 }]; - const inkDoc = SelectionManager.Views().lastElement().layoutDoc; - const swidth = docView.screenToLocal().inverse().transformDirection(NumCast(seldoc.props.Document.strokeWidth, 1), NumCast(seldoc.props.Document.strokeWidth, 1)); - - const points = inkData.map((point) => docView.screenToLocal().inverse().transformPoint(point.X, point.Y)).map(p => ({ X: p[0], Y: p[1] })); - - const strokeWidth = 1; - const lineTop = Math.min(...points.map(p => p.Y)) - swidth[0] / 2; - const lineBottom = Math.max(...points.map(p => p.Y)) + swidth[0] / 2; - const lineLeft = Math.min(...points.map(p => p.X)) - swidth[0] / 2; - const lineRight = Math.max(...points.map(p => p.X)) + swidth[0] / 2; - const left = lineLeft; - const top = lineTop; - const right = lineRight; - const bottom = lineBottom; - const width = Math.max(1, right - left); - const height = Math.max(1, bottom - top); - const scaleX = width === strokeWidth ? 1 : (bounds.r - bounds.x) / (width - strokeWidth); - const scaleY = height === strokeWidth ? 1 : (bounds.b - bounds.y) / (height - strokeWidth); - - selectedLine = InteractionUtils.CreatePolyline(points, left, top, Colors.MEDIUM_BLUE, strokeWidth, strokeWidth, StrCast(inkDoc.strokeBezier), StrCast(inkDoc.fillColor, "none"), - StrCast(inkDoc.strokeStartMarker), StrCast(inkDoc.strokeEndMarker), StrCast(inkDoc.strokeDash), scaleX, scaleY, "", "none", 1.0, false); + const inkData = Cast(seldoc.rootDoc.data, InkField)?.inkData ?? [{ X: 0, Y: 0 }]; + const inkDoc = seldoc.layoutDoc; + const overlayInkWidth = 10; + + const { inkScaleX, inkScaleY, inkStrokeWidth } = InkingStroke.inkScaling(inkDoc, inkData, docView.props.PanelWidth(), docView.props.PanelHeight()); + + const screenInkWidth = docView.screenToLocal().inverse().transformDirection(inkStrokeWidth, inkStrokeWidth); + const screenPts = inkData.map(point => docView.screenToLocal().inverse().transformPoint(point.X * inkScaleX, point.Y * inkScaleY)).map(p => ({ X: p[0], Y: p[1] })); + const screenTop = Math.min(...screenPts.map(p => p.Y)) - screenInkWidth[0] / 2; + const screenLeft = Math.min(...screenPts.map(p => p.X)) - screenInkWidth[0] / 2; + + selectedLine = InteractionUtils.CreatePolyline(screenPts, screenLeft, screenTop, Colors.MEDIUM_BLUE, overlayInkWidth, overlayInkWidth, StrCast(inkDoc.strokeBezier), StrCast(inkDoc.fillColor, "none"), + StrCast(inkDoc.strokeStartMarker), StrCast(inkDoc.strokeEndMarker), StrCast(inkDoc.strokeDash), 1, 1, "", "none", 1.0, false); } return (<div className="documentDecorations" style={{ background: CurrentUserUtils.ActiveDashboard?.darkScheme ? "dimgray" : "" }} > |