path: root/src/client/views/StyleProvider.tsx

import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@material-ui/core';
import { Shadows } from 'browndash-components';
import { action, runInAction } from 'mobx';
import { extname } from 'path';
import { Doc, Opt, StrListCast } from '../../fields/Doc';
import { BoolCast, Cast, DocCast, ImageCast, NumCast, StrCast } from '../../fields/Types';
import { DashColor, lightOrDark, Utils } from '../../Utils';
import { CollectionViewType, DocumentType } from '../documents/DocumentTypes';
import { DocFocusOrOpen, DocumentManager } from '../util/DocumentManager';
import { IsFollowLinkScript } from '../util/LinkFollower';
import { LinkManager } from '../util/LinkManager';
import { SelectionManager } from '../util/SelectionManager';
import { ColorScheme, SettingsManager } from '../util/SettingsManager';
import { undoBatch, UndoManager } from '../util/UndoManager';
import { TreeSort } from './collections/TreeView';
import { Colors } from './global/globalEnums';
import { InkingStroke } from './InkingStroke';
import { MainView } from './MainView';
import { DocumentViewProps, OpenWhere } from './nodes/DocumentView';
import { FieldViewProps } from './nodes/FieldView';
import { KeyValueBox } from './nodes/KeyValueBox';
import { SliderBox } from './nodes/SliderBox';
import './StyleProvider.scss';
import React = require('react');
import { SchemaRowBox } from './collections/collectionSchema/SchemaRowBox';

export enum StyleProp {
    TreeViewIcon = 'treeViewIcon',
    TreeViewSortings = 'treeViewSortings', // options for how to sort tree view items
    DocContents = 'docContents', // when specified, the JSX returned will replace the normal rendering of the document view
    Opacity = 'opacity', // opacity of the document view
    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
    FillColor = 'fillColor', // fill color of an ink stroke or shape
    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
    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
    showCaption = 'layout_showCaption',
    TitleHeight = 'titleHeight', // Height of Title area
    layout_showTitle = 'layout_showTitle', // whether to display a title on a Document (optional :hover suffix)
    JitterRotation = 'jitterRotation', // whether documents should be randomly rotated
    BorderPath = 'customBorder', // border path for document view
    FontSize = 'fontSize', // size of text font
    FontFamily = 'fontFamily', // font family of text
    FontWeight = 'fontWeight', // font weight of text
    Highlighting = 'highlighting', // border highlighting
}

function darkScheme() {
    return Doc.ActiveDashboard?.colorScheme === ColorScheme.Dark;
}

function toggleLockedPosition(doc: Doc) {
    UndoManager.RunInBatch(
        () =>
            runInAction(() => {
                doc._lockedPosition = !doc._lockedPosition;
                doc._pointerEvents = doc._lockedPosition ? 'none' : undefined;
            }),
        'toggleBackground'
    );
}

export function testDocProps(toBeDetermined: any): toBeDetermined is DocumentViewProps {
    return toBeDetermined?.isContentActive ? toBeDetermined : undefined;
}

export function wavyBorderPath(pw: number, ph: number, inset: number = 0.05) {
    return `M ${pw * 0.5} ${ph * inset}   C ${pw * 0.6} ${ph * inset} ${pw * (1 - 2 * inset)} 0 ${pw * (1 - inset)} ${ph * inset}   C ${pw} ${ph * (2 * inset)} ${pw * (1 - inset)} ${ph * 0.25} ${pw * (1 - inset)} ${ph * 0.3}   C ${
        pw * (1 - inset)
    } ${ph * 0.4} ${pw} ${ph * (1 - 2 * inset)} ${pw * (1 - inset)} ${ph * (1 - inset)}  C ${pw * (1 - 2 * inset)} ${ph} ${pw * 0.6} ${ph * (1 - inset)} ${pw * 0.5} ${ph * (1 - inset)}   C ${pw * 0.3} ${ph * (1 - inset)} ${pw * (2 * inset)} ${ph} ${
        pw * inset
    } ${ph * (1 - inset)}  C 0 ${ph * (1 - 2 * inset)} ${pw * inset} ${ph * 0.8} ${pw * inset} ${ph * 0.75}   C ${pw * inset} ${ph * 0.7} 0 ${ph * (2 * inset)} ${pw * inset} ${ph * inset}   C ${pw * (2 * inset)} 0 ${pw * 0.25} ${ph * inset} ${
        pw * 0.5
    } ${ph * inset}`;
}

// 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 {
    const remoteDocHeader = 'author;author_date;noMargin';
    const docProps = testDocProps(props) ? props : undefined;
    const selected = property.includes(':selected');
    const isCaption = property.includes(':caption');
    const isAnchor = property.includes(':anchor');
    const isAnnotated = property.includes(':annotated');
    const isOpen = property.includes(':open');
    const boxBackground = property.includes(':box');
    const fieldKey = props?.fieldKey ? props.fieldKey + '_' : isCaption ? 'caption_' : '';
    const lockedPosition = () => doc && BoolCast(doc._lockedPosition);
    const backgroundCol = () => props?.styleProvider?.(doc, props, StyleProp.BackgroundColor);
    const opacity = () => props?.styleProvider?.(doc, props, StyleProp.Opacity);
    const layout_showTitle = () => props?.styleProvider?.(doc, props, StyleProp.layout_showTitle);
    const random = (min: number, max: number, x: number, y: number) => /* min should not be equal to max */ min + (((Math.abs(x * y) * 9301 + 49297) % 233280) / 233280) * (max - min);
    switch (property.split(':')[0]) {
        case StyleProp.TreeViewIcon:
            const img = ImageCast(doc?.icon, ImageCast(doc?.data));
            if (img) {
                const ext = extname(img.url.href);
                const url = doc?.icon ? img.url.href : img.url.href.replace(ext, '_s' + ext);
                return <img src={url} width={20} height={15} style={{ margin: 'auto', display: 'block', objectFit: 'contain' }} />;
            }
            return Doc.toIcon(doc, isOpen);

        case StyleProp.TreeViewSortings:
            const allSorts: { [key: string]: { color: string; label: string } | undefined } = {};
            allSorts[TreeSort.Down] = { color: 'blue', label: '↓' };
            allSorts[TreeSort.Up] = { color: 'crimson', label: '↑' };
            if (doc?._type_collection === CollectionViewType.Freeform) allSorts[TreeSort.Zindex] = { color: 'green', label: 'z' };
            allSorts[TreeSort.None] = { color: 'darkgray', label: '\u00A0\u00A0\u00A0' };
            return allSorts;
        case StyleProp.Highlighting:
            if (doc && !doc.disableDocBrushing && !props?.disableDocBrushing) {
                const selected = SelectionManager.Views().some(dv => dv.rootDoc === doc);
                const highlightIndex = Doc.isBrushedHighlightedDegree(doc) || (selected ? Doc.DocBrushStatus.selfBrushed : 0);
                const highlightColor = ['transparent', 'rgb(68, 118, 247)', selected ? 'black' : 'rgb(68, 118, 247)', 'orange', 'lightBlue'][highlightIndex];
                const highlightStyle = ['solid', 'dashed', 'solid', 'solid', 'solid'][highlightIndex];
                if (highlightIndex) {
                    return {
                        highlightStyle,
                        highlightColor,
                        highlightIndex,
                        highlightStroke: doc.type === DocumentType.INK,
                    };
                }
            }
            return undefined;
        case StyleProp.DocContents:
            return undefined;
        case StyleProp.WidgetColor:
            return isAnnotated ? Colors.LIGHT_BLUE : darkScheme() ? 'lightgrey' : 'dimgrey';
        case StyleProp.Opacity:
            return props?.LayoutTemplateString?.includes(KeyValueBox.name) ? 1 : Cast(doc?._opacity, 'number', Cast(doc?.opacity, 'number', null));
        case StyleProp.HideLinkButton:
            return props?.hideLinkButton || (!selected && doc?.layout_hideLinkButton);
        case StyleProp.FontSize:
            return StrCast(doc?.[fieldKey + 'fontSize'], StrCast(doc?._fontSize, StrCast(Doc.UserDoc().fontSize)));
        case StyleProp.FontFamily:
            return StrCast(doc?.[fieldKey + 'fontFamily'], StrCast(doc?._fontFamily, StrCast(Doc.UserDoc().fontFamily)));
        case StyleProp.FontWeight:
            return StrCast(doc?.[fieldKey + 'fontWeight'], StrCast(doc?._fontWeight, StrCast(Doc.UserDoc().fontWeight)));
        case StyleProp.layout_showTitle:
            return (
                (doc &&
                    !doc.presentationTargetDoc &&
                    !props?.LayoutTemplateString?.includes(KeyValueBox.name) &&
                    props?.layout_showTitle?.() !== '' &&
                    StrCast(
                        doc._layout_showTitle,
                        props?.layout_showTitle?.() ||
                            (!Doc.IsSystem(doc) && [DocumentType.COL, DocumentType.FUNCPLOT, DocumentType.LABEL, DocumentType.RTF, DocumentType.IMG, DocumentType.VID].includes(doc.type as any)
                                ? doc.author === Doc.CurrentUserEmail
                                    ? StrCast(Doc.UserDoc().layout_showTitle)
                                    : remoteDocHeader
                                : '')
                    )) ||
                ''
            );
        case StyleProp.FillColor:
            return Cast(doc?._fillColor, 'string', Cast(doc?.fillColor, 'string', 'transparent'));
        case StyleProp.Color:
            if (MainView.Instance.LastButton === doc) return Colors.DARK_GRAY;
            const docColor: Opt<string> = StrCast(doc?.[fieldKey + 'color'], StrCast(doc?._color));
            if (docColor) return docColor;
            const docView = props?.DocumentView?.();
            const backColor = backgroundCol() || docView?.props.styleProvider?.(docView.props.treeViewDoc, docView.props, StyleProp.BackgroundColor);
            if (!backColor) return undefined;
            return lightOrDark(backColor);
        case StyleProp.BorderRounding:
            return StrCast(doc?.[fieldKey + 'borderRounding'], StrCast(doc?.borderRounding, doc?._type_collection === CollectionViewType.Pile ? '50%' : ''));
        case StyleProp.TitleHeight:
            return 15;
        case StyleProp.BorderPath:
            const borderPath = Doc.IsComicStyle(doc) &&
                props?.renderDepth &&
                doc?.type !== DocumentType.INK && { path: wavyBorderPath(props?.PanelWidth?.() || 0, props?.PanelHeight?.() || 0), fill: wavyBorderPath(props?.PanelWidth?.() || 0, props?.PanelHeight?.() || 0, 0.08), width: 3 };
            return !borderPath
                ? null
                : {
                      clipPath: `path('${borderPath.path}')`,
                      jsx: (
                          <div key="border2" className="documentView-customBorder" style={{ pointerEvents: 'none' }}>
                              <svg style={{ overflow: 'visible', height: '100%' }} viewBox={`0 0 ${props.PanelWidth()} ${props.PanelHeight()}`}>
                                  <path d={borderPath.path} style={{ stroke: 'black', fill: 'transparent', strokeWidth: borderPath.width }} />
                              </svg>
                          </div>
                      ),
                  };
        case StyleProp.JitterRotation:
            return Doc.IsComicStyle(doc) ? random(-1, 1, NumCast(doc?.x), NumCast(doc?.y)) * ((props?.PanelWidth() || 0) > (props?.PanelHeight() || 0) ? 5 : 10) : 0;
        case StyleProp.showCaption:
            return doc?._type_collection === CollectionViewType.Carousel || props?.hideCaptions ? undefined : StrCast(doc?._layout_showCaption);
        case StyleProp.HeaderMargin:
            return ([CollectionViewType.Stacking, CollectionViewType.NoteTaking, CollectionViewType.Masonry, CollectionViewType.Tree].includes(doc?._type_collection as any) ||
                (doc?.type === DocumentType.RTF && !layout_showTitle()?.includes('noMargin')) ||
                doc?.type === DocumentType.LABEL) &&
                layout_showTitle() &&
                !StrCast(doc?.layout_showTitle).includes(':hover')
                ? 15
                : 0;
        case StyleProp.BackgroundColor: {
            if (MainView.Instance.LastButton === doc) return Colors.LIGHT_GRAY;
            let docColor: Opt<string> = StrCast(doc?.[fieldKey + '_backgroundColor'], StrCast(doc?._backgroundColor, isCaption ? 'rgba(0,0,0,0.4)' : ''));
            switch (doc?.type) {
                case DocumentType.PRESELEMENT:
                    docColor = docColor || (darkScheme() ? '' : '');
                    break;
                case DocumentType.PRES:
                    docColor = docColor || (darkScheme() ? 'transparent' : 'transparent');
                    break;
                case DocumentType.FONTICON:
                    docColor = boxBackground ? undefined : 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?.stroke_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 || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY);
                    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.MAP:
                case DocumentType.SCREENSHOT:
                case DocumentType.VID:
                    docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY);
                    break;
                case DocumentType.COL:
                    if (StrCast(Doc.LayoutField(doc)).includes(SliderBox.name)) break;
                    docColor =
                        docColor ||
                        (Doc.IsSystem(doc)
                            ? darkScheme()
                                ? Colors.DARK_GRAY
                                : Colors.LIGHT_GRAY // system docs (seen in treeView) get a grayish background
                            : doc.annotationOn
                            ? '#00000010' // faint interior for collections on PDFs, images, etc
                            : doc?._isGroup
                            ? undefined
                            : Cast((props?.renderDepth || 0) > 0 ? Doc.UserDoc().activeCollectionNestedBackground : Doc.UserDoc().activeCollectionBackground, 'string') ?? (darkScheme() ? Colors.BLACK : 'linear-gradient(#065fff, #85c1f9)'));
                    break;
                //if (doc._type_collection !== CollectionViewType.Freeform && doc._type_collection !== CollectionViewType.Time) return "rgb(62,62,62)";
                default:
                    docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.WHITE);
                    break;
            }
            if (docColor && !doc) docColor = DashColor(docColor).fade(0.5).toString();
            return docColor;
        }
        case StyleProp.BoxShadow: {
            if (!doc || opacity() === 0 || doc.noShadow) return undefined; // if it's not visible, then no shadow)
            if (doc.boxShadow === 'standard') return Shadows.STANDARD_SHADOW;
            if (IsFollowLinkScript(doc?.onClick) && LinkManager.Links(doc).length && ![DocumentType.LINK, DocumentType.INK].includes(doc.type as any)) return StrCast(doc?._linkButtonShadow, 'lightblue 0em 0em 1em');
            switch (doc?.type) {
                case DocumentType.COL:
                    return StrCast(
                        doc?.boxShadow,
                        doc?._type_collection === CollectionViewType.Pile
                            ? '4px 4px 10px 2px'
                            : lockedPosition() || 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() ? 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';
                default:
                    return doc.z
                        ? `#9c9396  ${StrCast(doc?.boxShadow, '10px 10px 0.9vw')}` // if it's a floating doc, give it a big shadow
                        : props?.docViewPath().lastElement()?.rootDoc._freeform_useClusters
                        ? `${backgroundCol()} ${StrCast(doc.boxShadow, `0vw 0vw ${(lockedPosition() ? 100 : 50) / (docProps?.NativeDimScaling?.() || 1)}px`)}` // if it's just in a cluster, make the shadown roughly match the cluster border extent
                        : NumCast(doc.group, -1) !== -1
                        ? `gray ${StrCast(doc.boxShadow, `0vw 0vw ${(lockedPosition() ? 100 : 50) / (docProps?.NativeDimScaling?.() || 1)}px`)}` // if it's just in a cluster, make the shadown roughly match the cluster border extent
                        : lockedPosition()
                        ? undefined // if it's a background & has a cluster color, make the shadow spread really big
                        : StrCast(doc.boxShadow, '');
            }
        }
        case StyleProp.PointerEvents:
            const isInk = doc && StrCast(Doc.Layout(doc).layout).includes(InkingStroke.name) && !props?.LayoutTemplateString;
            if (docProps?.DocumentView?.().ComponentView?.overridePointerEvents?.() !== undefined) return docProps?.DocumentView?.().ComponentView?.overridePointerEvents?.();
            if (MainView.Instance._exploreMode || doc?.layout_unrendered) return isInk ? 'visiblePainted' : 'all';
            if (doc?.pointerEvents) return StrCast(doc.pointerEvents);
            if (props?.contentPointerEvents) return StrCast(props.contentPointerEvents);
            if (props?.pointerEvents?.() === 'none') return 'none';
            if (opacity() === 0) return 'none';
            if (props?.isDocumentActive?.()) return isInk ? 'visiblePainted' : 'all';
            return undefined; // fixes problem with tree view elements getting pointer events when the tree view is not active
        case StyleProp.Decorations:
            const lock = () => {
                if (props?.docViewPath().lastElement()?.rootDoc?._type_collection === CollectionViewType.Freeform) {
                    return doc?.pointerEvents !== 'none' ? null : (
                        <div className="styleProvider-lock" onClick={() => toggleLockedPosition(doc)}>
                            <FontAwesomeIcon icon={'lock'} style={{ color: 'red' }} size="lg" />
                        </div>
                    );
                }
            };
            const filter = () => {
                const showFilterIcon =
                    StrListCast(doc?._docFilters).length || StrListCast(doc?._docRangeFilters).length
                        ? '#18c718bd' //'hasFilter'
                        : docProps?.docFilters?.().filter(f => Utils.IsRecursiveFilter(f) && f !== Utils.noDragsDocFilter).length || docProps?.docRangeFilters().length
                        ? 'orange' //'inheritsFilter'
                        : undefined;
                return !showFilterIcon ? null : (
                    <div className="styleProvider-filter" onClick={action(() => (SettingsManager.propertiesWidth = 250))}>
                        <FontAwesomeIcon icon={'filter'} size="lg" style={{ position: 'absolute', top: '1%', right: '1%', cursor: 'pointer', padding: 1, color: showFilterIcon, zIndex: 1 }} />
                    </div>
                );
            };
            const audio = () => {
                const audioAnnoState = (doc: Doc) => StrCast(doc.audioAnnoState, 'stopped');
                const audioAnnosCount = (doc: Doc) => StrListCast(doc[Doc.LayoutFieldKey(doc) + '-audioAnnotations']).length;
                if (!doc || props?.renderDepth === -1 || (!audioAnnosCount(doc) && audioAnnoState(doc) === 'stopped')) return null;
                const audioIconColors: { [key: string]: string } = { recording: 'red', playing: 'green', stopped: 'blue' };
                return (
                    <Tooltip title={<div>{StrListCast(doc[Doc.LayoutFieldKey(doc) + '-audioAnnotations-text']).lastElement()}</div>}>
                        <div className="styleProvider-audio" onPointerDown={() => DocumentManager.Instance.getFirstDocumentView(doc)?.docView?.playAnnotation()}>
                            <FontAwesomeIcon className="documentView-audioFont" style={{ color: audioIconColors[audioAnnoState(doc)] }} icon={'file-audio'} size="sm" />
                        </div>
                    </Tooltip>
                );
            };
            return (
                <>
                    {lock()}
                    {filter()}
                    {audio()}
                </>
            );
    }
}

export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp, offIcon: IconProp, clickFunc?: () => void) {
    return (
        <div
            title={field}
            className={`styleProvider-treeView-icon${doc[field] ? '-active' : ''}`}
            onClick={undoBatch(
                action((e: React.MouseEvent) => {
                    e.stopPropagation();
                    clickFunc ? clickFunc() : (doc[field] = doc[field] ? undefined : true);
                })
            )}>
            <FontAwesomeIcon icon={(doc[field] ? (onIcon as any) : offIcon) as IconProp} size="sm" />
        </div>
    );
}
/**
 * add lock and hide button decorations for the "Dashboards" flyout TreeView
 */
export function DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string) {
    if (doc && property.split(':')[0] === StyleProp.Decorations) {
        return doc._type_collection === CollectionViewType.Docking ? null : (
            <>
                {DashboardToggleButton(doc, 'hidden', 'eye-slash', 'eye', () => {
                    DocFocusOrOpen(doc, { toggleTarget: true, willZoomCentered: true, zoomScale: 0 }, DocCast(doc?.embedContainer ?? doc?.annotationOn));
                })}
            </>
        );
    }
    return DefaultStyleProvider(doc, props, property);
}