diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/StyleProvider.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/collections/TabDocView.tsx | 5 | ||||
| -rw-r--r-- | src/client/views/nodes/CollectionFreeFormDocumentView.scss | 6 | ||||
| -rw-r--r-- | src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 33 |
4 files changed, 30 insertions, 15 deletions
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index bde741959..0702f0d6b 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -101,7 +101,6 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps case StyleProp.HeaderMargin: return ([CollectionViewType.Stacking, CollectionViewType.Masonry].includes(doc?._viewType as any) || doc?.type === DocumentType.RTF) && showTitle() && !StrCast(doc?.showTitle).includes(":hover") ? 15 : 0; case StyleProp.BackgroundColor: { - if (Doc.UserDoc().renderStyle === "comic") return "transparent"; let docColor: Opt<string> = StrCast(doc?.[fieldKey + "backgroundColor"], StrCast(doc?._backgroundColor, isCaption ? "rbga(0,0,0,0.4)" : "")); if (MainView.Instance.LastButton === doc) return darkScheme() ? "dimgrey" : "lightgrey"; switch (doc?.type) { diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 983c3732f..7e2f7811e 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -350,7 +350,10 @@ export class TabDocView extends React.Component<TabDocViewProps> { render() { this.tab && CollectionDockingView.Instance.tabMap.delete(this.tab); return ( - <div className="collectionDockingView-content" style={{ height: "100%", width: "100%" }} ref={ref => { + <div className="collectionDockingView-content" style={{ + fontFamily: Doc.UserDoc().renderStyle === "comic" ? "Comic Sans MS" : undefined, + height: "100%", width: "100%" + }} ref={ref => { if (this._mainCont = ref) { (this._mainCont as any).InitTab = (tab: any) => this.init(tab, this._document); DocServer.GetRefField(this.props.documentId).then(action(doc => doc instanceof Doc && (this._document = doc) && this.tab && this.init(this.tab, this._document))); diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.scss b/src/client/views/nodes/CollectionFreeFormDocumentView.scss index 724394025..98208c2a6 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.scss +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.scss @@ -6,4 +6,10 @@ top: 0; left: 0; pointer-events: none; + .collectionFreeFormDocumentView-comic { + width:100%; + height: 100%; + position: absolute; + top: 0; + } }
\ No newline at end of file diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 1fda4cc5e..807a61094 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -37,10 +37,14 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF public static animFields = ["_height", "_width", "x", "y", "_scrollTop", "opacity"]; // fields that are configured to be animatable using animation frames @observable _animPos: number[] | undefined = undefined; @observable _contentView: DocumentView | undefined | null; + @computed get jitterRotation() { + const rot = this.random(-1, 1) * this.props.jitterRotation * (this.props.PanelWidth() > this.props.PanelHeight() ? 0.5 : 1); + return rot; + } random(min: number, max: number) { /* min should not be equal to max */ return min + ((Math.abs(this.X * this.Y) * 9301 + 49297) % 233280 / 233280) * (max - min); } get displayName() { return "CollectionFreeFormDocumentView(" + this.rootDoc.title + ")"; } // this makes mobx trace() statements more descriptive get maskCentering() { return this.props.Document.isInkMask ? InkingStroke.MaskDim / 2 : 0; } - get transform() { return `translate(${this.X - this.maskCentering}px, ${this.Y - this.maskCentering}px) rotate(${this.random(-1, 1) * this.props.jitterRotation}deg)`; } + get transform() { return `translate(${this.X - this.maskCentering}px, ${this.Y - this.maskCentering}px) rotate(${this.jitterRotation}deg)`; } get X() { return this.dataProvider ? this.dataProvider.x : (this.Document.x || 0); } get Y() { return this.dataProvider ? this.dataProvider.y : (this.Document.y || 0); } get ZInd() { return this.dataProvider ? this.dataProvider.zIndex : (this.Document.zIndex || 0); } @@ -156,7 +160,9 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF returnThis = () => this; render() { TraceMobx(); - const backgroundColor = () => this.props.styleProvider?.(this.Document, this.props, StyleProp.BackgroundColor); + const pw = this.panelWidth(); + const ph = this.panelHeight(); + const path = `M ${pw * .5} ${ph * .05} C ${pw * .6} ${ph * .05} ${pw * .9} 0 ${pw * .95} ${ph * .05} C ${pw} ${ph * .1} ${pw * .95} ${ph * .2} ${pw * .95} ${ph * .25} C ${pw * .95} ${ph * .35} ${pw} ${ph * .9} ${pw * .95} ${ph * .95} C ${pw * .9} ${ph} ${pw * .6} ${ph * .95} ${pw * .5} ${ph * .95} C ${pw * .3} ${ph * .95} ${pw * .1} ${ph} ${pw * .05} ${ph * .95} C 0 ${ph * .9} ${pw * .05} ${ph * .85} ${pw * .05} ${ph * .8} C ${pw * .05} ${ph * .75} 0 ${ph * .1} ${pw * .05} ${ph * .05} C ${pw * .1} 0 ${pw * .25} ${ph * .05} ${pw * .5} ${ph * .05}`; const divProps: DocumentViewProps = { ...this.props, CollectionFreeFormDocumentView: this.returnThis, @@ -175,18 +181,19 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF transition: this.props.dataTransition ? this.props.dataTransition : this.dataProvider ? this.dataProvider.transition : StrCast(this.layoutDoc.dataTransition), zIndex: this.ZInd, mixBlendMode: StrCast(this.layoutDoc.mixBlendMode) as any, - display: this.ZInd === -99 ? "none" : undefined, + display: this.ZInd === -99 ? "none" : undefined }} > - - {Doc.UserDoc().renderStyle !== "comic" ? (null) : - <div style={{ width: "100%", height: "100%", position: "absolute" }}> - <svg style={{ transform: `scale(1,${this.props.PanelHeight() / this.props.PanelWidth()})`, transformOrigin: "top left", overflow: "visible" }} viewBox="0 0 12 14"> - <path d="M 7 0 C 9 -1 13 1 12 4 C 11 10 13 12 10 12 C 6 12 7 13 2 12 Q -1 11 0 8 C 1 4 0 4 0 2 C 0 0 1 0 1 0 C 3 0 3 1 7 0" - style={{ stroke: "black", fill: backgroundColor(), strokeWidth: 0.2 }} /> - </svg> - </div>} - - <DocumentView {...divProps} ref={action((r: DocumentView | null) => this._contentView = r)} /> + {Doc.UserDoc().renderStyle !== "comic" ? <DocumentView {...divProps} ref={action((r: DocumentView | null) => this._contentView = r)} /> : + <> + <div key="doc" style={{ clipPath: `path('${path}')` }}> + <DocumentView {...divProps} ref={action((r: DocumentView | null) => this._contentView = r)} /> + </div> + <div key="border" className="collectionFreeFormDocumentView-comic" > + <svg style={{ overflow: "visible" }} viewBox={`0 0 ${pw} ${ph}`}> + <path d={path} style={{ stroke: "black", fill: "transparent", strokeWidth: 3 }} /> + </svg> + </div> + </>} </div>; } } |