Multiple pages

[SebastianStehle]

Multiple pages

[JIVIN0902]

Sounds good! I'll get working and I pls bear with my questions :)

[JIVIN0902]

Ohh ok. I understand that. I Do know redux but I am still unfamiliar with the project structure.

[SebastianStehle]

One the left sidebar where we have Shapes and Icons I would add another Tab called "Pages".

This tab shows a list of pages. On top a button to add new page. When you click on a page, the selectDiagram() action is invoked.

[JIVIN0902]

Sorry. Silly me!

[JIVIN0902]

Hi. Had a fever so took some time off. Working on it now.

[SebastianStehle]

Yes, exactly.

[JIVIN0902]

If this is a beginner friendly issue, I am willing to work on it.

[SebastianStehle]

I think it is an easy task. The most stuff is already prepared for it.

e.g. the editor state already has a diagrams state which should be used for pages: https://github.com/mydraft-cc/ui/blob/master/src/wireframes/model/editor-state.ts#L19

[JIVIN0902]

Sounds good. Any other files that might be helpful? Pls share. I'll start working on it.

[SebastianStehle]

No, I don't think so. Just ask if you have any questions.

[JIVIN0902]

     <Editor
        diagram={getDiagram(state)}
        rendererService={renderer}
        onChangeItemsAppearance={doChangeItemsAppearance}
        onSelectItems={doSelectItems}
        onTransformItems={doTransformItems}
        selectedItems={getSelectedItems(state)}
        selectedItemsWithLocked={getSelectedItemsWithLocked(state)}
        viewSize={editor.size}
        zoom={zoom}
        zoomedSize={zoomedSize}
    />

From What I have observed through trial and error, I think we need to supply different props to this edtor in order to create new pages? For example if I just copy and paste this and create a new page like that. When I drag and drop the icons they get replicated to both the pages. So what I think is that we need to supply new instances of some of these props to create a new page? Pls Correct me wherever I am wrong

[SebastianStehle]

It depends how you want to implement it. There are 2 alternatives:

1. Like powerpoint or Moqup where you see always one page only
2. Like Word where you see all the pages in a list.

I thought you want to implement option 1, but I guess you want to implement option 2. I recommend to go with a one page approach because it is faster and easier to implement. The current code is designed for that, as it sends the current diagram to the Editor component.

[JIVIN0902]

Alright. So u mean like slides in powerpoint? For example we can switch pages? So it would work like layers on top of each other and changing their visibility or something?

[SebastianStehle]

Kind of. It would destroy the SVG for one page and then render the SVG for the other page. If you have too many DOM elements in your browser it will become really slow.

[JIVIN0902]

So maybe we can limit the number of pages for that? I'll try some stuff and get familiar with the workings of this.

[SebastianStehle]

If we use option one 1 it is not necessary. We just need a page management like moqup:

Folders are not needed, but perhaps:

1. Add Page
2. Delete Page
3. Select page
4. Reorder Pages (https://github.com/atlassian/react-beautiful-dnd)
5. Rename and Name a page.

A page is just he same as a diagram in this context. As you can see the editor state already has methods for the most parts [0], so we just need the reducer actions for that and trigger the actions in the UI.

For feature 1. to 3. we don't need any changes in the model at all I think.

[0] https://github.com/mydraft-cc/ui/blob/master/src/wireframes/model/editor-state.ts
[1] https://github.com/mydraft-cc/ui/blob/master/src/wireframes/model/actions/diagrams.ts

[JIVIN0902]

Hi

export const addDiagram =
    createAction('diagram/add', (diagramId?: string) => {
        return { payload: createDiagramAction(diagramId || MathHelper.guid()) };
    });

So I am trying to use this method in the editor state to create a new instance of a diagram and its giving me a circular dependency detected error. Am I doing something wrong or is there another way?

[SebastianStehle]

How do you import that? have a look to the import statements. e.g. if you have something like this

import { addDiagram } from '@app/wireframes';

you get the problem, because @app/wireframes is the parent of the component.

Therefore you have to import it from

import { addDiagram } from '@app/wireframes/model';

[SebastianStehle]

e.g. https://github.com/mydraft-cc/ui/blob/master/src/wireframes/components/properties/VisualProperties.tsx#L10

[JIVIN0902]

import { addDiagram } from '@app/wireframes/model'; calling this inside the editor-state.ts still gives the same error.

[SebastianStehle]

Why do you want to use it in the editor-state?

addDiagram calls editor-state, you have to invoke addDiagram in your component.

This project uses redux: https://redux.js.org/tutorials/fundamentals/part-1-overview

So basically

• EditorState is the state, implemented as classes.
• addDiagram is a reducer action.
• Recucer + addDiagram is invoking the EditorState methods.

[SebastianStehle]

No problem. Nothing is documented :D

[JIVIN0902]

So what I am thinking is to add a + button add the top that will add a page. On clicking that button it will create a new page and replace the current page with that new blank one

[JIVIN0902]

When I am invoking the addDiagram function on the editor component and try to log the new state its showing 1 diagram only. Maybe i need to pass some dependencies in the useEffect?

    React.useEffect(() => {

        addDiagram();
        console.log(state.editor.present);
        console.log(state.editor.present.diagrams)
    }, [])

[SebastianStehle]

You have to use dispatch method

React.useEffect(() => {

    dispatch(addDiagram());
    console.log(state.editor.present);
    console.log(state.editor.present.diagrams)
}, [])

[JIVIN0902]

Hey. Could you briefly explain how the editor state is structured. Some of the variables nested inside the object are the same . Getting a little bit confused. Thanks

[SebastianStehle]

The state in the redux toolkit can be a little bit confusing, because of the custom Record class we use to represent states. But the structure is described with types:

https://github.com/mydraft-cc/ui/blob/master/src/wireframes/model/editor-state.ts#L14

type EditorProps = {
    // The id of the selected diagram.
    selectedDiagramId: string | null;

    // The actual diagrams.
    diagrams: DiagramMap; equivalent to a list of objects

    // The size of all diagrams.
    size: Vec2;

    // The color for all diagrams.
    color?: Color;
};

I guess we need to change the diagrams property to an ImmutableList to support changing the order.

The actual editor is wrapped in an undo-redo state:

The undoable state has a present state, a list previous states (to go back aka UNDO) and future states (to go forward aka REDO). Each state is stored with the action that belongs to the state because when a diagram is saved all actions are saved to keep the history.

[JIVIN0902]

The thing is.. on dispatching addDiagram() function when I log the editor.present.diagrams, its showing 1 diagram only. Is the new diagram a part of the future state or something else?

[SebastianStehle]

Make a PR so i can have a look to the code and install redux debugging tools for chrome

[JIVIN0902]

I have redux tools for chrome. And over there it shows 2 I guess. I'll be sending a screenshot shortly

[SebastianStehle]

Okay.

[SebastianStehle]

Hi, how is it going?

[JIVIN0902]

The addDigram() is working and I guess the state also has 2 diagrams by looking at it in redux devtools, but when I log the same it shows only 1 diagram

[SebastianStehle]

Hard to tell without seeing the code. Perhaps you just have a dependency wrong in a useEffect, e.g. If you log just after a dispatch you would not see the change immediately.

[JIVIN0902]

But It is being created right by looking from the state?

[JIVIN0902]

 React.useEffect(() => {
        dispatch(addDiagram());
    }, [dispatch]);

In the editor I have added this button to check the new state. but here too it shows only 1 diagram.

<span style={{color: "black", cursor: "pointer"}} onClick={() => console.log(getDiagrams(state))}>Show List</span>
            <Editor
                diagram={getDiagram(state)}
                rendererService={renderer}
                onChangeItemsAppearance={doChangeItemsAppearance}
                onSelectItems={doSelectItems}
                onTransformItems={doTransformItems}
                selectedItems={getSelectedItems(state)}
                selectedItemsWithLocked={getSelectedItemsWithLocked(state)}
                viewSize={editor.size}
                zoom={zoom}
                zoomedSize={zoomedSize}
            />

[SebastianStehle]

I would just start building the list of pages. Then you see immediately whether it works or not.

[JIVIN0902]

Ok. The list on the left side? Like right now it has 2 existing tabs and add another tab for pages? I'll work on it

[JIVIN0902]

Hey. Trying to render the pages using previously built Grid component but unable to display

  const pages = useStore((s) => s.editor.present.diagrams);
<Grid
        className="asset-shapes-list"
        renderer={cellRenderer}
        columns={1}
        items={pages.values}
        keyBuilder={keyBuilder}
      />

The error

ShapeImage.tsx:49 Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')

[SebastianStehle]

Hi, the grid renderer was built to be able to render a list of thousands of elements. In this case it is not needed (and also not a list), so I would just use a normal list of elements.

Ant design has a ready to use list: https://ant.design/components/list/

If you want to use the Grid you also have to define your own cell renderer. The cell renderer is a function that returns the component to be rendered for each cell and is then invoked while you scroll down or up.

But in the long term, a component like the Tree makes more sense: https://ant.design/components/tree/

[JIVIN0902]

Yeah makes sense.

[SebastianStehle]

The tree does not support ordering I guess :( ...

[SebastianStehle]

We need:

• Add
• Rename
• Remove
• Ordering

[SebastianStehle]

Do you have an estimation how long it takes to implement that? I have some other features that are dependent on that.

[JIVIN0902]

I am using the ant design list to show the pages. I think it should be done shortly.

[SebastianStehle]

I am sorry, but I would really like to get this done.