feat: draggable template card

[shawnyama]

Description

Test here: http://localhost:8080/model-template-test

• Wrote tera-canvas-item.vue to wrap around tera-model-template-card and tera-operator as they both share similar drag/drop behaviour.
• resize and interactionStatus (bitmasking) are still exclusively done in tera-operator. I don't think tera-model-template-card need those - we can move them into tera-canvas-item later if needed.
• Side note: got rid of h7 rule as that's not even a valid tag

Screen.Recording.2023-12-15.at.7.00.17.PM.mov

[shawnyama]

I don't know why specifically the document node expands as I move it left. It's as if the left css attribute is effecting things (from tera-canvas-item). My main changes around this area are moving the minWidth style into tera-canvas-item and removing the main {width: 15rem} from tera-operator. Note that this happens with a document with a long title though I still can't narrow down where its coming from.

Screen.Recording.2024-01-02.at.1.53.28.PM.mov

[mwdchang]

I don't know why specifically the document node expands as I move it left. It's as if the left css attribute is effecting things (from tera-canvas-item). My main changes around this area are moving the minWidth style into tera-canvas-item and removing the main {width: 15rem} from tera-operator. Note that this happens with a document with a long title though I still can't narrow down where its coming from.

Screen.Recording.2024-01-02.at.1.53.28.PM.mov

@shawnyama is this still an issue? I can't reproduce.