From 6ad4422b6bbfc7ea47ff52366717422a64c3ce13 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Mon, 3 Feb 2025 09:20:57 +0100 Subject: [PATCH 1/3] checkDetails refactoring --- src/ts/app.tsx | 2 -- src/ts/component/page/elements/head/editor.tsx | 4 ++-- src/ts/component/page/main/history/left.tsx | 4 ++-- src/ts/component/page/main/set.tsx | 4 ++-- src/ts/component/page/main/type.tsx | 4 ++-- src/ts/component/sidebar/page/object.tsx | 8 +++++++- src/ts/lib/util/data.ts | 6 ++++-- 7 files changed, 19 insertions(+), 13 deletions(-) diff --git a/src/ts/app.tsx b/src/ts/app.tsx index a88cc904e0..91c6180c52 100644 --- a/src/ts/app.tsx +++ b/src/ts/app.tsx @@ -93,7 +93,6 @@ if (!isPackaged) { }; }; -/* spy(event => { if (event.type == 'action') { console.log('[Mobx].event', event.name, event.arguments); @@ -106,7 +105,6 @@ enableLogging({ transaction: true, compute: true, }); -*/ Sentry.init({ release: electron.version.app, diff --git a/src/ts/component/page/elements/head/editor.tsx b/src/ts/component/page/elements/head/editor.tsx index 4c1f276ac9..d23e940248 100644 --- a/src/ts/component/page/elements/head/editor.tsx +++ b/src/ts/component/page/elements/head/editor.tsx @@ -30,8 +30,8 @@ const PageHeadEditor = observer(class PageHeadEditor extends React.Component { const { rootId, onCopy } = this.props; const root = S.Block.getLeaf(rootId, rootId); const childrenIds = S.Block.getChildrenIds(rootId, rootId); - const check = U.Data.checkDetails(rootId); - const object = S.Detail.get(rootId, rootId, [ 'layoutAlign' ]); + const check = U.Data.checkDetails(rootId, rootId, [ 'layout', 'layoutAlign' ]); + const object = check.object; const icon = new M.Block({ id: `${rootId}-icon`, type: I.BlockType.IconPage, hAlign: object.layoutAlign, childrenIds: [], fields: {}, content: {} }); const cover = new M.Block({ id: `${rootId}-cover`, type: I.BlockType.Cover, hAlign: object.layoutAlign, childrenIds: [], fields: {}, content: {} }); const cn = [ 'editorWrapper', check.className ]; diff --git a/src/ts/component/page/main/set.tsx b/src/ts/component/page/main/set.tsx index ef02051b5c..82c7f37dca 100644 --- a/src/ts/component/page/main/set.tsx +++ b/src/ts/component/page/main/set.tsx @@ -36,7 +36,7 @@ const PageMainSet = observer(class PageMainSet extends React.Component; } else { - const object = S.Detail.get(rootId, rootId, [ 'layout' ], true); + const object = check.object; const isCollection = U.Object.isCollectionLayout(object.layout); const children = S.Block.getChildren(rootId, rootId, it => it.isDataview()); const cover = new M.Block({ id: rootId + '-cover', type: I.BlockType.Cover, childrenIds: [], fields: {}, content: {} }); diff --git a/src/ts/component/page/main/type.tsx b/src/ts/component/page/main/type.tsx index c9ce590d89..c4ae609994 100644 --- a/src/ts/component/page/main/type.tsx +++ b/src/ts/component/page/main/type.tsx @@ -44,8 +44,8 @@ const PageMainType = observer(class PageMainType extends React.Component { + keyboard.pageCreate(details, analytics.route.allObjects, flags, (message: any) => { cb(message.targetId); }); }; diff --git a/src/ts/lib/util/data.ts b/src/ts/lib/util/data.ts index 91ec5c5dd5..5ee93fe326 100644 --- a/src/ts/lib/util/data.ts +++ b/src/ts/lib/util/data.ts @@ -582,16 +582,18 @@ class UtilData { }, callBack); }; - checkDetails (rootId: string, blockId?: string) { + checkDetails (rootId: string, blockId?: string, keys?: string[]) { blockId = blockId || rootId; + keys = keys || []; - const object = S.Detail.get(rootId, blockId, [ 'layout', 'layoutAlign', 'iconImage', 'iconEmoji', 'templateIsBundled' ].concat(J.Relation.cover), true); + const object = S.Detail.get(rootId, blockId, [ 'layout', 'layoutAlign', 'iconImage', 'iconEmoji', 'templateIsBundled' ].concat(J.Relation.cover).concat(keys), true); const checkType = S.Block.checkBlockTypeExists(rootId); const { iconEmoji, iconImage, coverType, coverId } = object; const ret = { withCover: false, withIcon: false, className: '', + object, }; let className = []; From 1d9bc00a79525cab59e29870aef02470062fad30 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Mon, 3 Feb 2025 10:48:35 +0100 Subject: [PATCH 2/3] refactoring --- src/ts/app.tsx | 2 ++ .../component/page/elements/head/simple.tsx | 4 ++-- src/ts/component/sidebar/page/object.tsx | 19 ++++++------------- src/ts/store/detail.ts | 4 ++-- 4 files changed, 12 insertions(+), 17 deletions(-) diff --git a/src/ts/app.tsx b/src/ts/app.tsx index 91c6180c52..a88cc904e0 100644 --- a/src/ts/app.tsx +++ b/src/ts/app.tsx @@ -93,6 +93,7 @@ if (!isPackaged) { }; }; +/* spy(event => { if (event.type == 'action') { console.log('[Mobx].event', event.name, event.arguments); @@ -105,6 +106,7 @@ enableLogging({ transaction: true, compute: true, }); +*/ Sentry.init({ release: electron.version.app, diff --git a/src/ts/component/page/elements/head/simple.tsx b/src/ts/component/page/elements/head/simple.tsx index 95d9bd5580..804df8172d 100644 --- a/src/ts/component/page/elements/head/simple.tsx +++ b/src/ts/component/page/elements/head/simple.tsx @@ -178,7 +178,7 @@ const HeadSimple = observer(class Controls extends React.Component { init () { const { focused } = focus.state; const { rootId } = this.props; - const object = S.Detail.get(rootId, rootId); + const object = S.Detail.get(rootId, rootId, [ 'name' ], true); this.setValue(); @@ -237,7 +237,7 @@ const HeadSimple = observer(class Controls extends React.Component { setValue () { const { dateFormat } = S.Common; const { rootId } = this.props; - const object = S.Detail.get(rootId, rootId); + const object = S.Detail.get(rootId, rootId, []); for (const item of EDITORS) { if (!this.refEditable[item.blockId]) { diff --git a/src/ts/component/sidebar/page/object.tsx b/src/ts/component/sidebar/page/object.tsx index df2440b9ec..7c424d5acb 100644 --- a/src/ts/component/sidebar/page/object.tsx +++ b/src/ts/component/sidebar/page/object.tsx @@ -89,7 +89,7 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S compact={this.compact} onClick={e => this.onClick(e, item)} onContext={() => this.onContext(item)} - onMouseEnter={() => this.onOver(item)} + onMouseEnter={() => this.onOver(item, param.index)} onMouseLeave={() => this.onOut()} /> ); @@ -249,7 +249,7 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S keyMapper: i => (items[i] || {}).id, }); - this.setActive(); + this.setActive(items[this.n]); this.checkTabButtons(); }; @@ -707,8 +707,9 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S }); }; - onOver (item: any) { + onOver (item: any, index: number) { if (!keyboard.isMouseDisabled) { + this.n = index; this.setActive(item); }; }; @@ -852,7 +853,7 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S scrollTo = this.currentIndex; } else { - this.setActive(); + this.setActive(items[this.n]); scrollTo = this.n; }; @@ -940,17 +941,9 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S this.renderSelection(); }; - setActive (item?: any) { + setActive (item: any) { this.unsetActive(); - const items = this.getItems(); - - if (!item) { - item = items[this.n]; - } else { - this.n = items.findIndex(it => it.id == item.id); - }; - if (item) { $(this.node).find(`#item-${item.id}`).addClass('active'); }; diff --git a/src/ts/store/detail.ts b/src/ts/store/detail.ts index cc4e4ebc10..b412faeb72 100644 --- a/src/ts/store/detail.ts +++ b/src/ts/store/detail.ts @@ -41,7 +41,7 @@ class DetailStore { makeObservable(el, { value: observable }); intercept(el as any, (change: any) => { - return (change.newValue === el[change.name] ? null : change); + return (change.newValue === el[change.name] ? null : change); }); list.push(el); @@ -95,7 +95,7 @@ class DetailStore { list.push(el); - intercept(el as any, (change: any) => { + intercept(el as any, (change: any) => { return (change.newValue === el[change.name] ? null : change); }); }; From 6e2e2014d58d54eb1020ae6831c89a6b94e26172 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Mon, 3 Feb 2025 11:22:00 +0100 Subject: [PATCH 3/3] remove observable map from details --- src/ts/component/page/main/type.tsx | 2 ++ src/ts/store/detail.ts | 41 ++++++++++++++--------------- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/ts/component/page/main/type.tsx b/src/ts/component/page/main/type.tsx index c4ae609994..a6fecf5d53 100644 --- a/src/ts/component/page/main/type.tsx +++ b/src/ts/component/page/main/type.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import $ from 'jquery'; +import { trace } from 'mobx'; import { observer } from 'mobx-react'; import { Icon, Header, Footer, Loader, ListPreviewObject, ListObject, Select, Deleted, HeadSimple, EditorControls } from 'Component'; import { I, C, S, U, J, focus, Action, analytics, Relation, translate } from 'Lib'; @@ -131,6 +132,7 @@ const PageMainType = observer(class PageMainType extends React.Component this.refControls = ref} key="editorControls" {...this.props} rootId={rootId} resize={() => {}} /> this.refHead = ref} placeholder={translate('defaultNameType')} rootId={rootId} diff --git a/src/ts/store/detail.ts b/src/ts/store/detail.ts index b412faeb72..66876c9902 100644 --- a/src/ts/store/detail.ts +++ b/src/ts/store/detail.ts @@ -23,6 +23,16 @@ class DetailStore { }); }; + private createListItem (k: string, v: any): Detail { + const el = { relationKey: k, value: v }; + + makeObservable(el, { value: observable }); + intercept(el as any, (change: any) => { + return (change.newValue === el[change.name] ? null : change); + }); + return el; + }; + /** Idempotent. adds details to the detail store. */ public set (rootId: string, items: Item[]) { if (!rootId) { @@ -30,21 +40,13 @@ class DetailStore { return; }; - const map = observable.map(new Map()); + const map = new Map(); for (const item of items) { const list: Detail[] = []; for (const k in item.details) { - const el = { relationKey: k, value: item.details[k] }; - - makeObservable(el, { value: observable }); - - intercept(el as any, (change: any) => { - return (change.newValue === el[change.name] ? null : change); - }); - - list.push(el); + list.push(this.createListItem(k, item.details[k])); }; map.set(item.id, list); @@ -85,19 +87,16 @@ class DetailStore { }; for (const k in item.details) { - let el = list.find(it => it.relationKey == k); + if (clear) { + list.push(this.createListItem(k, item.details[k])); + continue; + }; + + const el = list.find(it => it.relationKey == k); if (el) { - set(el, { value: item.details[k] }); + el.value = item.details[k]; } else { - el = { relationKey: k, value: item.details[k] }; - - makeObservable(el, { value: observable }); - - list.push(el); - - intercept(el as any, (change: any) => { - return (change.newValue === el[change.name] ? null : change); - }); + list.push(this.createListItem(k, item.details[k])); }; };