| 44 | private readonly _collab?: IElemCollab; |
| 45 | |
| 46 | constructor(input: { |
| 47 | page: Page; |
| 48 | id: string; |
| 49 | index: number; |
| 50 | collab?: IElemCollab; |
| 51 | }) { |
| 52 | this.page = input.page; |
| 53 | |
| 54 | this.id = input.id; |
| 55 | |
| 56 | this._collab = input.collab; |
| 57 | |
| 58 | this.react = reactive({ |
| 59 | collab: computed(() => { |
| 60 | if (this._collab != null) { |
| 61 | return this._collab; |
| 62 | } |
| 63 | |
| 64 | const collab = this.page[`${this.type}s`].react.collab[this.id]; |
| 65 | |
| 66 | if (collab == null) { |
| 67 | return undefined as any; |
| 68 | } |
| 69 | |
| 70 | if (this.type === 'note') { |
| 71 | return wrapSlim(collab, INoteCollabDefault()); |
| 72 | } else { |
| 73 | return wrapSlim(collab, IArrowCollabDefault()); |
| 74 | } |
| 75 | }), |
| 76 | |
| 77 | region: computed( |
| 78 | () => this.page.regions.fromId(this.react.collab?.regionId!)!, |
| 79 | ), |
| 80 | |
| 81 | visible: computed(() => { |
| 82 | if (this.react.region.type === 'page') { |
| 83 | return true; |
| 84 | } |
| 85 | |
| 86 | if (!this.react.region.react.container.visible) { |
| 87 | return false; |
| 88 | } |
| 89 | |
| 90 | return this.react.region.react.visible; |
| 91 | }), |
| 92 | |
| 93 | index: input.index, |
| 94 | |
| 95 | active: this.page.activeElem.is(this.id), |
| 96 | selected: this.page.selection.has(this), |
| 97 | editing: this.page.editing.react.elemId === this.id, |
| 98 | }); |
| 99 | } |
| 100 | }, |
| 101 | ); |
| 102 | export type PageElem = InstanceType<ReturnType<typeof PageElem>>; |