diff --git a/src/App.scss b/src/App.scss index d744b00a0..432b30a20 100644 --- a/src/App.scss +++ b/src/App.scss @@ -27,6 +27,9 @@ &.selected-by-me, &:has(.selected-by-me), // for some reason focus does not work?? so this is a fallback but needs to be properly fixed &:hover, &:active, &:focus-within{ overflow: visible; } } +[data-nodetype]{ + overflow: visible !important; // todo: remove, it's just for debug to count renders +} .GraphVertex[data-nodetype="GraphVertex"], .Vertex[data-nodetype="Vertex"], @@ -183,3 +186,27 @@ svg.hoverable { .console-output-container div{ display: inline-block; } + +[data-countrenders]{ + &::before{ + content: attr(data-countrenders); + display: inline-block; + position: absolute; + z-index: 999; + bottom: calc(-35% + 15px); + right: -20px; + width: min-content; + height: min-content; + } +} +.animate-on-update-even{ + animation: fade 1s forwards; +} +.animate-on-update-odd{ + animation: fade 1s forwards; +} + +@keyframes fade { + 0% { opacity:0; } + 100% { opacity:1; } +} diff --git a/src/common/UX.tsx b/src/common/UX.tsx index 32ad4cb97..59bb50e3f 100644 --- a/src/common/UX.tsx +++ b/src/common/UX.tsx @@ -34,7 +34,8 @@ export class UX{ if (!Array.isArray(children)) return innermap(children as ReactNode, 0, [...depthIndices, 0]) as T; return React.Children.map(children, (c: T, i3: number)=>innermap(c, i3, [...depthIndices,i3])) as T; } - static injectProp(parentComponent: GraphElementComponent, e: ReactNode, gvidmap_useless: Dictionary, boolean>, parentnodeid: string, index: number, indices: number[]): ReactNode { + static injectProp(parentComponent: GraphElementComponent, e: ReactNode, gvidmap_useless: Dictionary, boolean>, + parentnodeid: string, index: number, indices: number[]): ReactNode { const re: ReactElement | null = UX.ReactNodeAsElement(e); if (!re) return e; // @ts-ignore this diff --git a/src/components/collaborative/CollaborativeAttacher.tsx b/src/components/collaborative/CollaborativeAttacher.tsx index 0061a2baf..50c5dfd7a 100644 --- a/src/components/collaborative/CollaborativeAttacher.tsx +++ b/src/components/collaborative/CollaborativeAttacher.tsx @@ -1,7 +1,7 @@ import React from 'react'; import Collaborative from './Collaborative'; import App from '../../App'; -import {Action, SetRootFieldAction} from '../../joiner'; +import {Action, CompositeAction, GObject, SetRootFieldAction} from '../../joiner'; import {useParams} from 'react-router-dom'; import {useEffectOnce} from 'usehooks-ts'; @@ -25,9 +25,9 @@ function CollaborativeAttacher(props: Props) { }) }); - Collaborative.client.on('pullAction', (action) => { - if(action.type === 'COMPOSITE_ACTION') for(let subAction of action.actions) delete subAction['_id']; - delete action['_id']; + Collaborative.client.on('pullAction', (action: GObject) => { + if(action.type === 'COMPOSITE_ACTION') for(let subAction of action.actions) delete (subAction as GObject)['_id']; + delete action['_id']; // is it really needed to remove id? const receivedAction = Action.fromJson(action); receivedAction.hasFired = receivedAction.hasFired - 1; receivedAction.fire(); diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index 69ac9ece3..d540703a0 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -1,6 +1,6 @@ import React, {Dispatch, ReactElement} from 'react'; import {connect} from 'react-redux'; -import {DState} from '../../joiner'; +import {DState, LState, SetRootFieldAction} from '../../joiner'; import File from './tabs/File'; import Edit from './tabs/Edit'; import Share from './tabs/Share'; @@ -9,6 +9,9 @@ import Logo from '../../static/img/logo.png'; import Debug from '../../static/img/debug.png'; import './style.scss'; +let clickTimestamps: number[] = []; +const clicksRequired = 2; +const timeframe = 2000; function NavbarComponent(props: AllProps) { const debug = props.debug; @@ -19,12 +22,16 @@ function NavbarComponent(props: AllProps) { {debug &&
  • - + {"debug
    • }
    • - + {"jjodel { + let now = Date.now(); + if (now - clickTimestamps[clickTimestamps.length - clicksRequired] < timeframe) { SetRootFieldAction.new('debug', !debug); clickTimestamps = []; } + clickTimestamps.push(now); + }}/>
    diff --git a/src/graph/graphElement/graphElement.tsx b/src/graph/graphElement/graphElement.tsx index e046d91ab..9432e33b6 100644 --- a/src/graph/graphElement/graphElement.tsx +++ b/src/graph/graphElement/graphElement.tsx @@ -118,6 +118,7 @@ let debugcount = 0; let maxRenderCounter = Number.POSITIVE_INFINITY; export const lightModeAllowedElements = [DModel.cname, DPackage.cname, DClass.cname, DEnumerator.cname, DObject.cname]; +const countRenders = true; @RuntimeAccessible export class GraphElementComponent extends PureComponent{ @@ -276,6 +277,7 @@ export class GraphElementComponent; lastViewChanges: {t: number, vid: Pointer, v: LViewElement, key?: string}[]; @@ -341,6 +343,7 @@ export class GraphElementComponent] = this; @@ -357,51 +360,9 @@ export class GraphElementComponent { colors = colors.map(c=>c.toLowerCase())}', - '
    GraphElement colors:{colors.map( (c, i) =>
  • {c}
    • )}
    ', true);*/ - // this.onMountBindID(); - } -/* - onMountBindID() { - /*if (!this.props.view.storeSize) { - // get position from view itself - nodeid = 'nodeof_' + this.props.data.id; - if (!store.getState().idlookup[nodeid]){ - new CreateElementAction(this.createDataNode(nodeid)); - } // view-indipendent fallback, i do not add view.id to node.id - } else {* / - if (this.getId()) return; - let dnode: DGraphElement = this.createDataNode(this.generateId()); - new CreateElementAction(dnode); - // let nodeid: Pointer = dnode.id; - // this.setState({nodeid} ); - } - - getId(): string | undefined { - return this.props.nodeid; - } - - generateId(): Pointer { - // if (this.state.nodeid) return this.state.nodeid; - let ret: string = 'nodeof_' + this.props.data.id + (this.props.view.storeSize ? '^' + this.props.view.id : '') + '^1'; - const idlookup = store.getState().idlookup; - ret = U.increaseEndingNumber(ret, false, false, id => !idlookup[id]); - return ret; + this.state = {classes: [] as string[]}; } - // to override - - createDataNode(id?: string): DGraphElement { - return new DGraphElement(id || this.generateId(), this); - } - */ - // constants: evalutate solo durante il primo render, può essere una funzione con effetti collaterali sul componente, // in tal caso la si esegue e si prende il valore di ritorno. // preRenderFunc: funzione evalutata ed eseguita sempre prima del render, ha senso solo per generare effetti collaterali sulle "costanti". @@ -715,8 +676,14 @@ export class GraphElementComponent{[ + rawRElement || rnode, +
    + ]}/*/ return rawRElement || rnode; }