mcnLeandro commented 3 years ago

Considerations

[x] How to resize with dragging handle rectangles? Do not only think about Bounds Object but think about Line Object too.

https://user-images.githubusercontent.com/72016706/127174887-9da52a68-1cfa-4921-a12d-453d6621f5f3.mov

[x] Need to create Resizable interface, Think about View, Model,Controller,Listener
[x] complete focuView(the image, etc...)

https://github.com/mcnLeandro/UML_App/issues/9#issuecomment-894030444

[x] In "setShape" and "setStyle" of View, call updatable setters. For example...

//before

static setShape(_class){

        _class.rect.bounds = new Rectangle([100,100],[240,70]);
        _class.nameText.bounds.point = new Point(_class.rect.bounds.center.x, _class.rect.bounds.center.y + 10);

} 

//after

static setShape(_class, rectangle = new Rectangle([100,100],[240,70])){

        _class.rect.bounds = rectangle;
        _class.nameText.bounds.point = new Point(_class.rect.bounds.center.x, _class.rect.bounds.center.y + 10);

}

[x] Create setShape method in Controller
[x] Call setShape from View
[ ] Listener will call the method , so Test expand of width with event listener at first.

mcnLeandro commented 3 years ago

[ ] Need to create Resizable interface, Think about View, Model,Controller,Listener
[ ] complete focuView(the image, etc...)

mcnLeandro commented 3 years ago

I wrote code

let class1 = ClassesController.create()
class1.bounds = new Rectangle(100,100,100,100)

And here is the result

Can expand group, but expand all children in the group too. So, have to separate expand targets. To specify them, need to add frags to them and create a original method to expand UMLObject.

mcnLeandro commented 3 years ago

I wrote program with expand method but didn't work, so create issue in paper.js repository https://github.com/paperjs/paper.js/issues/1942

mcnLeandro commented 3 years ago

I wrote a program

let class1 = ClassesController.create()
class1.statusGroup.children[0].bounds = new Rectangle(100,100,300,300)

And here is the result

mcnLeandro commented 3 years ago

I wanted to expand width, so...

let class1 = ClassesController.create()
class1.statusGroup.children[0].bounds.width = 300

Here is the result. It worked !!

mcnLeandro commented 3 years ago

with Columns

let class1 = ClassesController.create()
let column1 = ColumnsController.createInto(class1)
let column2 = ColumnsController.createInto(class1)

let expandWidthOfColumn = (column, width) => {

    let pp = column.parent.parent; // i know the names are bad
    let bounds = pp.bounds;
    let l = bounds.left;
    let r = bounds.right;

    column.outerRect.bounds.width = width
    column.innerRect.bounds = new Rectangle(

        new Point(l + column.space, column.outerRect.bounds.top + column.space),
        new Point(r - column.space, column.outerRect.bounds.bottom - column.space)

    );

}
let expandWidthOfClass = (_class,width) => {

    _class.statusGroup.children[0].bounds.width = width
    _class.contentsGroup.children.forEach(child => {
        expandWidthOfColumn(child, width)//this case there's only column model
    })

}

expandWidthOfClass(class1, 400)

mcnLeandro commented 3 years ago

Also with Divider

let class1   = ClassesController.create()
let column1  = ColumnsController.createInto(class1)
let divider1 = DividersController.createInto(class1)
let column2  = ColumnsController.createInto(class1)

let expandWidthOfColumn = (column, width) => {

    let pp = column.parent.parent; // i know the names are bad
    let bounds = pp.bounds;
    let l = bounds.left;
    let r = bounds.right;

    column.outerRect.bounds.width = width
    column.innerRect.bounds = new Rectangle(

        new Point(l + column.space, column.outerRect.bounds.top + column.space),
        new Point(r - column.space, column.outerRect.bounds.bottom - column.space)

    );

}
let expandWidthOfDivider = (divider, width) => {

    let pp = divider.parent.parent;
    let bounds = pp.bounds;
    let l = bounds.left;
    let r = bounds.right;

    divider.outerRect.bounds.width = width;

    divider.bar.removeSegments()
    divider.bar.addSegments([

        new Point(l , divider.outerRect.bounds.center.y),
        new Point(r, divider.outerRect.bounds.center.y)

    ]);

}
let expandWidthOfClass = (_class,width) => {

    _class.statusGroup.children[0].bounds.width = width
    _class.contentsGroup.children.forEach(child => {
        switch(child.constructor.name){

            case "Column" : expandWidthOfColumn(child, width);break;
            case "Divider": expandWidthOfDivider(child,width);break;
            default : break;

        }
    })

}

expandWidthOfClass(class1, 400)

mcnLeandro commented 3 years ago

Replace Class's Text to center

let class1   = ClassesController.create()

let expandWidthOfClass = (_class,width) => {

    _class.statusGroup.children[0].bounds.width = width
    _class.nameText.bounds.center = new Point(_class.rect.bounds.center.x, _class.rect.bounds.center.y + 10);

    // _class.contentsGroup.children.forEach(child => {
    //     switch(child.constructor.name){

    //         case "Column" : expandWidthOfColumn(child, width);break;
    //         case "Divider": expandWidthOfDivider(child,width);break;
    //         default : break;

    //     }
    // })

}

expandWidthOfClass(class1, 400)

mcnLeandro commented 3 years ago

expand with clicking button

let class1   = ClassesController.create()
let column1  = ColumnsController.createInto(class1)
let divider1 = DividersController.createInto(class1)
let column2  = ColumnsController.createInto(class1)

let expandWidthOfColumn = (column, width) => {

    let pp = column.parent.parent; // i know the names are bad
    let bounds = pp.bounds;
    let l = bounds.left;
    let r = bounds.right;

    column.outerRect.bounds.width = width
    column.innerRect.bounds = new Rectangle(

        new Point(l + column.space, column.outerRect.bounds.top + column.space),
        new Point(r - column.space, column.outerRect.bounds.bottom - column.space)

    );

}
let expandWidthOfDivider = (divider, width) => {

    let pp = divider.parent.parent;
    let bounds = pp.bounds;
    let l = bounds.left;
    let r = bounds.right;

    divider.outerRect.bounds.width = width;

    divider.bar.removeSegments()
    divider.bar.addSegments([

        new Point(l , divider.outerRect.bounds.center.y),
        new Point(r, divider.outerRect.bounds.center.y)

    ]);

}
let expandWidthOfClass = (_class,width) => {

    _class.statusGroup.children[0].bounds.width = width
    _class.nameText.bounds.center = new Point(_class.rect.bounds.center.x, _class.rect.bounds.center.y + 10);

    _class.contentsGroup.children.forEach(child => {
        switch(child.constructor.name){

            case "Column" : expandWidthOfColumn(child, width);break;
            case "Divider": expandWidthOfDivider(child,width);break;
            default : break;

        }
    })

}

config.expandBtn.addEventListener("click", ()=>{
    expandWidthOfClass(class1, class1.bounds.width + 10)
    FociController.focus()
})

https://user-images.githubusercontent.com/72016706/128517082-b2735524-789f-40fc-9e15-0707ce5b4813.mov

mcnLeandro commented 3 years ago

Memo

Will be able to set Listeners of each handles foci_listener


export class FociHandleListener {
    //Focus.rightMiddle.isDown = false
    static set(){

        FociHandleListener.setRightHandleListener()

    }

    static setRightHandleListener(){

        document.querySelector('.rightMiddle').addEventListener('mousedown',()=>{
            Focus.handle.rightMiddle.isMouseDown = true
        })
        document.querySelector('.rightMiddle').addEventListener('mousemove',()=>{
            if(Focus.handle.rightMiddle.isMouseDown){
                //do some thing
            }
        })
        document.querySelector('.rightMiddle').addEventListener('mouseup',()=>{
            Focus.handle.rightMiddle.isMouseDown = false
        })

    }
}

foci_controller

static focus(){

        // if(!Focus.umlObj.isFocused){
            import('js/utils/index.js').then(module => {

                const MVCL = module.getMVCLFromUMLObject(Focus.umlObj)

                Focus.umlObj.isFocused = true;
                MVCL.CONSTROLLER.focus()
                FociHandleListener.set()

            });
        // }

    }

mcnLeandro commented 3 years ago

[x] To resize with focus handles, have to solve this https://github.com/mcnLeandro/UML_App/issues/17#issuecomment-898184044

mcnLeandro / UML_App

Focus Considerations about resizing #9

Considerations

Memo