aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/StyleProvider.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/StyleProvider.tsx')
-rw-r--r--src/client/views/StyleProvider.tsx52
1 files changed, 7 insertions, 45 deletions
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 5056dedaf..334415b38 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -26,10 +26,6 @@ import React = require("react");
import { InkingStroke } from './InkingStroke';
import { TreeSort } from './collections/TreeView';
-export enum StyleLayers {
- Background = "background"
-}
-
export enum StyleProp {
TreeViewIcon = "treeViewIcon",
TreeViewSortings = "treeViewSortings",// options for how to sort tree view items
@@ -56,14 +52,9 @@ export enum StyleProp {
function darkScheme() { return CurrentUserUtils.ActiveDashboard?.colorScheme === ColorScheme.Dark; }
-function toggleBackground(doc: Doc) {
+function toggleLockedPosition(doc: Doc) {
UndoManager.RunInBatch(() => runInAction(() => {
- const layers = StrListCast(doc._layerTags);
- if (!layers.includes(StyleLayers.Background)) {
- if (!layers.length) doc._layerTags = new List<string>([StyleLayers.Background]);
- else layers.push(StyleLayers.Background);
- }
- else layers.splice(layers.indexOf(StyleLayers.Background), 1);
+ doc._lockedPosition = !doc._lockedPosition;
}), "toggleBackground");
}
@@ -86,7 +77,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
const isOpen = property.includes(":open");
const fieldKey = props?.fieldKey ? props.fieldKey + "-" : isCaption ? "caption-" : "";
const comicStyle = () => doc && !Doc.IsSystem(doc) && Doc.UserDoc().renderStyle === "comic";
- const isBackground = () => StrListCast(doc?._layerTags).includes(StyleLayers.Background);
+ const isBackground = () => doc && BoolCast(doc._lockedPosition);
const backgroundCol = () => props?.styleProvider?.(doc, props, StyleProp.BackgroundColor);
const opacity = () => props?.styleProvider?.(doc, props, StyleProp.Opacity);
const showTitle = () => props?.styleProvider?.(doc, props, StyleProp.ShowTitle);
@@ -177,7 +168,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
//if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "rgb(62,62,62)";
default: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.WHITE); break;
}
- if (docColor && (!doc || props?.layerProvider?.(doc) === false)) docColor = DashColor(docColor).fade(0.5).toString();
+ if (docColor && !doc) docColor = DashColor(docColor).fade(0.5).toString();
return docColor;
}
case StyleProp.BoxShadow: {
@@ -205,17 +196,15 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
case StyleProp.PointerEvents:
if (doc?.type === DocumentType.MARKER) return "none";
if (props?.pointerEvents?.() === "none") return "none";
- const layer = doc && props?.layerProvider?.(doc);
const isInk = doc && StrCast(Doc.Layout(doc).layout).includes(InkingStroke.name);
- if (opacity() === 0 || (isInk && !docProps?.treeViewDoc) || doc?.isInkMask) return "none";
- if (layer === false && !selected && !SnappingManager.GetIsDragging()) return "none";
- if (!isInk && layer === true) return "all";
+ if (doc?._lockedPosition || opacity() === 0 || (isInk && !docProps?.treeViewDoc) || doc?.isInkMask) return "none";
+ if (!isInk) return "all";
return undefined;
case StyleProp.Decorations:
if (props?.ContainingCollectionDoc?._viewType === CollectionViewType.Freeform || doc?.x !== undefined || doc?.y !== undefined) {
return doc && (isBackground() || 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)}>
+ <div className="styleProvider-lock" onClick={() => toggleLockedPosition(doc)}>
<FontAwesomeIcon icon={isBackground() ? "lock" : "unlock"} style={{ color: isBackground() ? "red" : undefined }} size="lg" />
</div>
: (null);
@@ -251,30 +240,3 @@ export function DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps
}
return DefaultStyleProvider(doc, props, property);
}
-
-//
-// 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._layerTags, listSpec("string"), []);
- if (layers.length && !layers.includes(activeLayer)) layers.push(activeLayer);
- else if (!layers.length) doc._layerTags = 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 = StrListCast(doc._layerTags);
- if (!layers.length && !thisDoc?.activeLayer) return true;
- if (layers.includes(StrCast(thisDoc?.activeLayer))) return true;
- return false;
- }
- };
-} \ No newline at end of file