From f1095f44b9343242136635d0e015a44ead6ebe66 Mon Sep 17 00:00:00 2001 From: Alexandr Date: Thu, 20 Apr 2023 19:48:47 +0500 Subject: [PATCH 1/2] feat: switch visible contain --- imports/cyto/elements.tsx | 25 +++++++++++++++++++++++-- imports/cyto/menu.tsx | 9 ++++++++- imports/hooks.tsx | 3 +++ 3 files changed, 34 insertions(+), 3 deletions(-) diff --git a/imports/cyto/elements.tsx b/imports/cyto/elements.tsx index a6d08fd2..12f67733 100644 --- a/imports/cyto/elements.tsx +++ b/imports/cyto/elements.tsx @@ -1,11 +1,12 @@ import { useDeep } from '@deep-foundation/deeplinks/imports/client'; import json5 from 'json5'; import { useMemo } from 'react'; -import { useInsertingCytoStore, useShowFocus, useShowTypes } from '../hooks'; +import { useInsertingCytoStore, useShowFocus, useShowTypes, useShowContain } from '../hooks'; export function useCytoElements(ml, _links, cy, spaceId) { const [showTypes, setShowTypes] = useShowTypes(); const [showFocus, setShowFocus] = useShowFocus(); + const [showContain, setShowContain] = useShowContain(); const [insertingCyto, setInsertingCyto] = useInsertingCytoStore(); const deep = useDeep(); @@ -46,6 +47,8 @@ export function useCytoElements(ml, _links, cy, spaceId) { _symbol = ml.byTo[link?.type_id]?.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Symbol'))?.value?.value; } + const isNotShowContainLinks = !showContain && _type === 'type:Contain'; + // const parent = link?._applies?.find(q => q.includes('query-')); const element = { @@ -64,7 +67,7 @@ export function useCytoElements(ml, _links, cy, spaceId) { }, selectable: false, classes: [ - 'link-node', + isNotShowContainLinks ? 'link-disabled' : 'link-node', ...(focus ? ['focused'] : ['unfocused']), ].join(' '), @@ -137,8 +140,26 @@ export function useCytoElements(ml, _links, cy, spaceId) { if (link?.type?.inByType?.[deep.idLocal('@deep-foundation/core', 'Symbol')]?.[0]?.value?.value) { _symbol = link?.type?.inByType?.[deep.idLocal('@deep-foundation/core', 'Symbol')]?.[0]?.value?.value; } + + const isNotShowContainLinks = !showContain && _type === 'type:Contain'; + if (!!cy) { if ((isFocusSpace && showFocus) || !isFocusSpace) { + if(isNotShowContainLinks) { + if (link.to_id) { + if (ml?.byId?.[link.to_id] && _elements[link.to_id] && ml?.byId?.[link.from_id] && _elements[link.from_id]) { + elements.push({ + data: { id: `${link.id}-to`, source: `${link.from_id}`, target: `${link.to_id}`, link }, + selectable: false, + classes: [ + 'link-to', + ...(focus ? ['focused'] : ['unfocused']) + ].join(' '), + }); + } + } + continue + }; if (link.from_id) { if (ml?.byId?.[link.from_id] && _elements[link.from_id]) { elements.push({ diff --git a/imports/cyto/menu.tsx b/imports/cyto/menu.tsx index 92554948..103bc6a6 100644 --- a/imports/cyto/menu.tsx +++ b/imports/cyto/menu.tsx @@ -4,7 +4,7 @@ import { useDeep } from "@deep-foundation/deeplinks/imports/client"; import copy from "copy-to-clipboard"; import { useState, useEffect, useMemo } from "react"; import { useHotkeys } from "react-hotkeys-hook"; -import { useSpaceId, useShowTypes, useLayout, useContainer, useShowExtra, useShowFocus, usePromiseLoader, useTraveler, useMediaQuery, useAutoFocusOnInsert, useBreadcrumbs, useReserved } from "../hooks"; +import { useSpaceId, useShowTypes, useLayout, useContainer, useShowExtra, useShowFocus, usePromiseLoader, useTraveler, useMediaQuery, useAutoFocusOnInsert, useBreadcrumbs, useReserved, useShowContain } from "../hooks"; import { useCytoEditor } from "./hooks"; import { IoExitOutline } from 'react-icons/io5'; import { PackagerInterface } from "../packager-interface/packager-interface"; @@ -34,6 +34,7 @@ export function CytoMenu({ const [extra, setExtra] = useShowExtra(); const [focus, setFocus] = useShowFocus(); const [traveler, setTraveler] = useTraveler(); + const [showContain, setShowContain] = useShowContain(); const [reserved, setReserved] = useReserved(); const [breadcrumbs, setBreadcrumbs] = useBreadcrumbs(); const deep = useDeep(); @@ -146,6 +147,12 @@ export function CytoMenu({ setBreadcrumbs(!breadcrumbs)}/> + + + show contain + + setShowContain(!showContain)}/> + {/* reserved diff --git a/imports/hooks.tsx b/imports/hooks.tsx index 04514a82..9a9a2902 100644 --- a/imports/hooks.tsx +++ b/imports/hooks.tsx @@ -85,6 +85,9 @@ export function useCytoViewport('show-focus', false); }; +export function useShowContain() { + return useQueryStore('show-contain', true); +}; export function useBreadcrumbs() { return useQueryStore('breadcrumbs', false); }; From 404ffb0103b89be75c29797c3b13fb5d2e610bef Mon Sep 17 00:00:00 2001 From: Alexandr Date: Thu, 20 Apr 2023 20:10:52 +0500 Subject: [PATCH 2/2] feat: new style link-from-to-not-contain --- imports/cyto/elements.tsx | 4 ++-- imports/cyto/stylesheets.tsx | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/imports/cyto/elements.tsx b/imports/cyto/elements.tsx index 12f67733..f6bdfd0a 100644 --- a/imports/cyto/elements.tsx +++ b/imports/cyto/elements.tsx @@ -149,10 +149,10 @@ export function useCytoElements(ml, _links, cy, spaceId) { if (link.to_id) { if (ml?.byId?.[link.to_id] && _elements[link.to_id] && ml?.byId?.[link.from_id] && _elements[link.from_id]) { elements.push({ - data: { id: `${link.id}-to`, source: `${link.from_id}`, target: `${link.to_id}`, link }, + data: { id: `${link.id}-from-to-not-contain`, source: `${link.from_id}`, target: `${link.to_id}`, link }, selectable: false, classes: [ - 'link-to', + 'link-from-to-not-contain', ...(focus ? ['focused'] : ['unfocused']) ].join(' '), }); diff --git a/imports/cyto/stylesheets.tsx b/imports/cyto/stylesheets.tsx index c18bb60d..16eaaa96 100644 --- a/imports/cyto/stylesheets.tsx +++ b/imports/cyto/stylesheets.tsx @@ -75,6 +75,12 @@ export function useCytoStylesheets(): any { 'underlay-shape': 'ellipse', } }, + { + selector: '.link-from-to-not-contain', + style: { + 'target-arrow-shape': 'triangle-tee', + } + }, { selector: '.link-to', style: {