src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx


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

import { computed } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Id } from '../../../../fields/FieldSymbols';
import { DocumentManager } from '../../../util/DocumentManager';
import { LightboxView } from '../../LightboxView';
import { CollectionFreeFormLinkView } from './CollectionFreeFormLinkView';
import './CollectionFreeFormLinksView.scss';

@observer
export class CollectionFreeFormLinksView extends React.Component {
    @computed get uniqueConnections() {
        return Array.from(new Set(DocumentManager.Instance.LinkedDocumentViews))
            .filter(c => !LightboxView.LightboxDoc || (LightboxView.Contains(c.a) && LightboxView.Contains(c.b)))
            .map(c => <CollectionFreeFormLinkView key={c.l[Id]} A={c.a} B={c.b} LinkDocs={[c.l]} />);
    }

    render() {
        return (
            <div className="collectionfreeformlinksview-container">
                <svg className="collectionfreeformlinksview-svgCanvas">{this.uniqueConnections}</svg>
            </div>
        );
    }
}