1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import 'golden-layout/src/css/goldenlayout-base.css';
import 'golden-layout/src/css/goldenlayout-dark-theme.css';
import { runInAction } from 'mobx';
import { Doc, Opt, StrListCast } from "../../fields/Doc";
import { List } from '../../fields/List';
import { BoolCast, Cast, StrCast, NumCast } from "../../fields/Types";
import { DocumentType } from '../documents/DocumentTypes';
import { CurrentUserUtils } from '../util/CurrentUserUtils';
import { SnappingManager } from '../util/SnappingManager';
import { UndoManager } from '../util/UndoManager';
import { CollectionViewType } from './collections/CollectionView';
import { DocumentViewProps } from "./nodes/DocumentView";
import "./StyleProvider.scss";
import React = require("react");
import Color = require('color');
import { listSpec } from '../../fields/Schema';
import { MainView } from './MainView';
export enum StyleLayers {
Background = "background"
}
export enum StyleProp {
DocContents = "docContents", // when specified, the JSX returned will replace the normal rendering of the document view
Opacity = "opacity", // opacity of the document view
Hidden = "hidden", // whether the document view should not be isplayed
BoxShadow = "boxShadow", // box shadow - used for making collections standout and for showing clusters in free form views
BorderRounding = "borderRounding", // border radius of the document view
Color = "color", // foreground color of Document view items
BackgroundColor = "backgroundColor", // background color of a document view
ItemBackgroundColor = "itemBackgroundColor", // background color for <item>Box inside DocumentView
WidgetColor = "widgetColor", // color to display UI widgets on a document view -- used for the sidebar divider dragger on a text note
HideLinkButton = "hideLinkButton", // hides the blue-dot link button. used when a document acts like a button
LinkSource = "linkSource", // source document of a link -- used by LinkAnchorBox
PointerEvents = "pointerEvents",// pointer events for DocumentView -- inherits pointer events if not specified
Decorations = "decorations", // additional decoration to display above a DocumentView -- currently only used to display a Lock for making things background
HeaderMargin = "headerMargin", // margin at top of documentview, typically for displaying a title -- doc contents will start below that
}
function darkScheme() { return BoolCast(CurrentUserUtils.ActiveDashboard?.darkScheme); }
function toggleBackground(doc: Doc) {
UndoManager.RunInBatch(() => runInAction(() => {
const layers = StrListCast(doc.layers);
if (!layers.includes(StyleLayers.Background)) {
if (!layers.length) doc.layers = new List<string>([StyleLayers.Background]);
else layers.push(StyleLayers.Background);
}
else layers.splice(layers.indexOf(StyleLayers.Background), 1);
doc._overflow = !layers.includes(StyleLayers.Background) ? "visible" : undefined;
if (!layers.includes(StyleLayers.Background)) {
//this.props.bringToFront(doc, true);
// const wid = this.Document[WidthSym](); // change the nativewidth and height if the background is to be a collection that aggregates stuff that is added to it.
// const hgt = this.Document[HeightSym]();
// Doc.SetNativeWidth(this.props.Document[DataSym], wid);
// Doc.SetNativeHeight(this.props.Document[DataSym], hgt);
}
}), "toggleBackground");
}
//
// a preliminary implementation of a dash style sheet for setting rendering properties of documents nested within a Tab
//
export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string): any {
switch (property.split(":")[0]) {
case StyleProp.DocContents: return undefined;
case StyleProp.WidgetColor: return darkScheme() ? "lightgrey" : "dimgrey";
case StyleProp.Opacity: return Cast(doc?._opacity, "number", Cast(doc?.opacity, "number", null));
case StyleProp.Color:
const backColor = props?.styleProvider?.(doc, props, StyleProp.ItemBackgroundColor) || "black";
const col = Color(backColor).rgb();
const colsum = (col.red() + col.green() + col.blue());
if (colsum / col.alpha() > 600 || col.alpha() < 0.25) return "black";
return "white";
case StyleProp.Hidden: return BoolCast(doc?._hidden, BoolCast(doc?.hidden));
case StyleProp.BorderRounding: return !doc ? undefined : StrCast(doc._borderRounding, StrCast(doc.borderRounding));
case StyleProp.HeaderMargin: return ([CollectionViewType.Stacking, CollectionViewType.Masonry].includes(doc?._viewType as any) || doc?.type === DocumentType.RTF) && doc?._showTitle && !doc?._showTitleHover ? 15 : 0;
case StyleProp.ItemBackgroundColor:
const docColor: Opt<string> = StrCast(doc?._backgroundColor, StrCast(doc?.backgroundColor));
if (docColor) return docColor;
if (MainView.Instance.LastButton === doc) return darkScheme() ? "dimgrey" : "lightgrey";
switch (doc?.type) {
case DocumentType.FONTICON: return "black";
case DocumentType.LINK: return "lightblue";
}
case StyleProp.BackgroundColor: {
if (Doc.UserDoc().renderStyle === "comic") return "transparent";
let docColor: Opt<string> = StrCast(doc?._backgroundColor, StrCast(doc?.backgroundColor));
switch (doc?.type) {
case DocumentType.PRESELEMENT: docColor = docColor || (darkScheme() ? "" : ""); break;
case DocumentType.PRES: docColor = docColor || (darkScheme() ? "#3e3e3e" : "white"); break;
case DocumentType.FONTICON: docColor = undefined; break;
case DocumentType.RTF: docColor = docColor || (darkScheme() ? "#2d2d2d" : "#f1efeb"); break;
case DocumentType.LABEL:
case DocumentType.BUTTON: docColor = docColor || (darkScheme() ? "#2d2d2d" : "lightgray"); break;
case DocumentType.LINK:
case DocumentType.COL:
docColor = docColor ||
(Doc.IsSystem(doc) ? (darkScheme() ? "rgb(62,62,62)" : "lightgrey") :
StrListCast(doc.layers).includes(StyleLayers.Background) ? "cyan" :
doc.annotationOn ? "#00000015" :
StrCast((props?.renderDepth || 0) > 0 ?
Doc.UserDoc().activeCollectionNestedBackground :
Doc.UserDoc().activeCollectionBackground));
break;
//if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "rgb(62,62,62)";
default: docColor = darkScheme() ? "black" : "white"; break;
}
if (docColor && (!doc || props?.layerProvider?.(doc) === false)) docColor = Color(docColor.toLowerCase()).fade(0.5).toString();
return docColor;
}
case StyleProp.BoxShadow: {
if (!doc || props?.styleProvider?.(doc, props, StyleProp.Opacity) === 0) return undefined; // if it's not visible, then no shadow)
const isBackground = () => StrListCast(doc.layers).includes(StyleLayers.Background);
const backgroundHalo = (doc: Doc) => props?.ContainingCollectionDoc?._useClusters || NumCast(doc.group, -1) !== -1;
switch (doc?.type) {
case DocumentType.COL: return isBackground() ? undefined :
`${darkScheme() ? "rgb(30, 32, 31) " : "#9c9396 "} ${StrCast(doc.boxShadow, "0.2vw 0.2vw 0.8vw")}`;
default:
return doc.z ? `#9c9396 ${StrCast(doc?.boxShadow, "10px 10px 0.9vw")}` : // if it's a floating doc, give it a big shadow
backgroundHalo(doc) && doc.type !== DocumentType.INK ? (`${props?.styleProvider?.(doc, props, StyleProp.BackgroundColor)} ${StrCast(doc.boxShadow, `0vw 0vw ${(isBackground() ? 100 : 50) / (props?.ContentScaling() || 1)}px`)}`) : // if it's just in a cluster, make the shadown roughly match the cluster border extent
isBackground() ? undefined : // if it's a background & has a cluster color, make the shadow spread really big
StrCast(doc.boxShadow, "");
}
}
case StyleProp.PointerEvents:
const layer = doc && props?.layerProvider?.(doc);
if (props?.styleProvider?.(doc, props, StyleProp.Opacity) === 0 || doc?.type === DocumentType.INK || doc?.isInkMask) return "none";
if (layer === false && !property.includes(":selected") && !SnappingManager.GetIsDragging()) return "none";
if (doc?.type !== DocumentType.INK && layer === true) return "all";
return undefined;
case StyleProp.Decorations:
if (props?.ContainingCollectionDoc?._viewType === CollectionViewType.Freeform) {
const isBackground = StrListCast(doc?.layers).includes(StyleLayers.Background);
return doc && (isBackground || property.includes(":selected")) && (props?.renderDepth || 0) > 0 &&
((doc.type === DocumentType.COL && doc._viewType !== CollectionViewType.Pile) || [DocumentType.RTF, DocumentType.IMG, DocumentType.INK].includes(doc.type as DocumentType)) ?
<div className="styleProvider-lock" onClick={() => toggleBackground(doc)}>
<FontAwesomeIcon icon={isBackground ? "unlock" : "lock"} style={{ color: isBackground ? "red" : undefined }} size="lg" />
</div>
: (null);
}
}
}
//
// a preliminary semantic-"layering/grouping" mechanism for determining interactive properties of documents
// currently, the provider tests whether the docuemnt's layer field matches the activeLayer field of the tab.
// if it matches, then the document gets pointer events, otherwise it does not.
//
export function DefaultLayerProvider(thisDoc: Doc) {
return (doc: Doc, assign?: boolean) => {
if (doc.z) return true;
if (assign) {
const activeLayer = StrCast(thisDoc?.activeLayer);
if (activeLayer) {
const layers = Cast(doc.layers, listSpec("string"), []);
if (layers.length && !layers.includes(activeLayer)) layers.push(activeLayer);
else if (!layers.length) doc.layers = new List<string>([activeLayer]);
if (activeLayer === "red" || activeLayer === "green" || activeLayer === "blue") doc._backgroundColor = activeLayer;
}
return true;
} else {
if (Doc.AreProtosEqual(doc, thisDoc)) return true;
const layers = Cast(doc.layers, listSpec("string"), []);
if (!layers.length && !thisDoc?.activeLayer) return true;
if (layers.includes(StrCast(thisDoc?.activeLayer))) return true;
return false;
}
};
}
|
