h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

Overhaul social card (again) #541

Merged
Irev-Dev merged 1 commits from kurt/overhaul-social-card into main 2021-10-11 21:09:56 +02:00
Conversation 20 Commits 1 Files Changed 13 +454 -324
Irev-Dev commented 2021-10-01 12:12:11 +02:00 (Migrated from github.com)
Copy Link

Puts social-card and thumbnail capture into an editor tab, as well as making them "live" (perspective can be changed in the card). It's not perfect and will probably needs some follow up work but does resolve #517 for now.

https://user-images.githubusercontent.com/29681384/136670871-d8b3b6d4-269c-42ee-978f-6d70f28e632e.mov

Outstanding issues and other thoughts:

  • The perspective resets once you actually save the image
  • The designs probably need a re think, I think some helper text saying something to the effect of"change the perspective before capturing" would be useful.
  • I would also like to capture the camera details of when the image is taken so that we can re-capture on the backend if the description or title changes.
  • I think some helper text to the effect of "oh looks like you don't have a description for the project yet, click here to add it." so that the card isn't empty, but I also might tweak the card so that the title is moved down if there isn't a description.
  • Would be good to zoom to fit when the cards are first loaded, but that's something we want to do for the viewer anyway.

@franknoirot don't feel obligated to look through it at great lengths, but I did make a change to the tab names

Puts social-card and thumbnail capture into an editor tab, as well as making them "live" (perspective can be changed in the card). It's not perfect and will probably needs some follow up work but does resolve #517 for now. https://user-images.githubusercontent.com/29681384/136670871-d8b3b6d4-269c-42ee-978f-6d70f28e632e.mov Outstanding issues and other thoughts: - The perspective resets once you actually save the image - The designs probably need a re think, I think some helper text saying something to the effect of"change the perspective before capturing" would be useful. - I would also like to capture the camera details of when the image is taken so that we can re-capture on the backend if the description or title changes. - I think some helper text to the effect of "oh looks like you don't have a description for the project yet, click here to add it." so that the card isn't empty, but I also might tweak the card so that the title is moved down if there isn't a description. - Would be good to zoom to fit when the cards are first loaded, but that's something we want to do for the viewer anyway. @franknoirot don't feel obligated to look through it at great lengths, but I did make a change to the tab names
hrgdavor commented 2021-10-01 12:26:06 +02:00 (Migrated from github.com)
Copy Link

looks smooth :) nice work

looks smooth :) nice work
❤️ 1
franknoirot commented 2021-10-04 03:35:46 +02:00 (Migrated from github.com)
Copy Link

This is so clever @Irev-Dev ! Makes me think a lot about the tabs as a great interface for other stuff in the future like sharing or configuring an embed.

One question: does the image get updated when the tab is closed? That might be a little unclear to the user, not sure but may be worth having a Save or Update Image button in that area.

This is so clever @Irev-Dev ! Makes me think a lot about the tabs as a great interface for other stuff in the future like sharing or configuring an embed. One question: does the image get updated when the tab is closed? That might be a little unclear to the user, not sure but may be worth having a Save or Update Image button in that area.
Irev-Dev commented 2021-10-04 03:40:15 +02:00 (Migrated from github.com)
Copy Link

does the image get updated when the tab is closed? That might be a little unclear to the user, not sure but may be worth having a Save or Update Image button in that area.

ofc, It's far from done.

I think I want there to be a say to save the thumbnail and the social-card separately

> does the image get updated when the tab is closed? That might be a little unclear to the user, not sure but may be worth having a Save or Update Image button in that area. ofc, It's far from done. I think I want there to be a say to save the thumbnail and the social-card separately
Irev-Dev (Migrated from github.com) reviewed 2021-10-09 20:25:57 +02:00
app/web/src/components/IdeViewer/IdeViewer.tsx
@@ -183,4 +189,4 @@
<div
className={`absolute inset-0 transition-opacity duration-500 ${
isDragging ? 'opacity-25' : 'opacity-100'
}`}
Irev-Dev (Migrated from github.com) commented 2021-10-09 20:25:56 +02:00
Copy Link

Changes the IDE view so that it doesn't rely on state/context so that multiple can be used together, it can than be wrapped in a component that provides it with state for the main IDE case.

Changes the IDE view so that it doesn't rely on state/context so that multiple can be used together, it can than be wrapped in a component that provides it with state for the main IDE case.
Irev-Dev (Migrated from github.com) reviewed 2021-10-09 20:26:38 +02:00
app/web/src/components/IdeViewer/IdeViewer.tsx
Irev-Dev (Migrated from github.com) commented 2021-10-09 20:26:38 +02:00
Copy Link

Got rid of the skybox, wasn't worth the perf hit, had to tweaking lighting for this.

Got rid of the skybox, wasn't worth the perf hit, had to tweaking lighting for this.
Irev-Dev (Migrated from github.com) reviewed 2021-10-09 20:27:08 +02:00
app/web/src/components/IdeViewer/IdeViewer.tsx
Irev-Dev (Migrated from github.com) commented 2021-10-09 20:27:08 +02:00
Copy Link

Removing gizmo for view when in the social card etc

Removing gizmo for view when in the social card etc
Irev-Dev (Migrated from github.com) reviewed 2021-10-09 20:27:26 +02:00
app/web/src/components/IdeViewer/IdeViewer.tsx
Irev-Dev (Migrated from github.com) commented 2021-10-09 20:27:26 +02:00
Copy Link

Removing Customizer for view when in the social card etc

Removing Customizer for view when in the social card etc
Irev-Dev (Migrated from github.com) reviewed 2021-10-09 20:27:54 +02:00
app/web/src/components/IdeViewer/IdeViewer.tsx
Irev-Dev (Migrated from github.com) commented 2021-10-09 20:27:54 +02:00
Copy Link

Provides PureIdeViewer with state

Provides PureIdeViewer with state
Irev-Dev (Migrated from github.com) reviewed 2021-10-09 20:29:18 +02:00
app/web/src/helpers/hooks/useIdeState.ts
@@ -41,3 +54,4 @@
editorTabs: EditorTab[]
currentModel: number
objectData: {
type: 'INIT' | ArtifactTypes
Irev-Dev (Migrated from github.com) commented 2021-10-09 20:29:18 +02:00
Copy Link

I thought models was too vague of a name

I thought models was too vague of a name
Irev-Dev (Migrated from github.com) reviewed 2021-10-09 20:29:43 +02:00
app/web/src/helpers/hooks/useIdeState.ts
@@ -34,0 +40,4 @@
interface ComponentTab {
type: 'component'
label: string
Component: React.FC
Irev-Dev (Migrated from github.com) commented 2021-10-09 20:29:42 +02:00
Copy Link

Added a tab type that will render a component.

Added a tab type that will render a component.
Irev-Dev (Migrated from github.com) reviewed 2021-10-09 20:32:28 +02:00
app/web/src/helpers/hooks/useIdeState.ts
@@ -354,0 +365,4 @@
} else {
dispatch({
type: 'healthyRender',
payload: {
Irev-Dev (Migrated from github.com) commented 2021-10-09 20:32:28 +02:00
Copy Link

Similar to PureIdeViewer, I needed a render function that didn't automatically update state so the the PureIdeViewer's could update they're model (mostly important for OpenSCAD since it needs a new image with perspective change)
It can than be wrapped to automatically update state so functionally is the same for the normal IDE viewer.

Similar to PureIdeViewer, I needed a render function that didn't automatically update state so the the PureIdeViewer's could update they're model (mostly important for OpenSCAD since it needs a new image with perspective change) It can than be wrapped to automatically update state so functionally is the same for the normal IDE viewer.
Irev-Dev (Migrated from github.com) reviewed 2021-10-09 20:32:55 +02:00
app/web/src/helpers/hooks/useIdeState.ts
Irev-Dev (Migrated from github.com) commented 2021-10-09 20:32:55 +02:00
Copy Link

Wraps RequestRenderArgsStateless to automatically update state.

Wraps RequestRenderArgsStateless to automatically update state.
Irev-Dev (Migrated from github.com) reviewed 2021-10-09 20:37:43 +02:00
app/web/src/components/CaptureButton/CaptureButton.tsx
@@ -194,0 +204,4 @@
resolve(capturedImage)
})
}
asyncHelper()
Irev-Dev (Migrated from github.com) commented 2021-10-09 20:37:42 +02:00
Copy Link

This might have been more effort than what it was worth. The social image need to be captured at a rather large size 1200x630, so the aim here is to scale ti down by half so that for the viewer so that it's not dominating the UI.
However the three canvas can gets confused and ends up halving again, which is why you'll see the canvasRatio sprinkled around to try and fix things.

This might have been more effort than what it was worth. The social image need to be captured at a rather large size 1200x630, so the aim here is to scale ti down by half so that for the viewer so that it's not dominating the UI. However the three canvas can gets confused and ends up halving again, which is why you'll see the `canvasRatio` sprinkled around to try and fix things.
Irev-Dev (Migrated from github.com) reviewed 2021-10-09 20:41:29 +02:00
app/web/src/components/CaptureButton/CaptureButton.tsx
@@ -194,0 +210,4 @@
loading: 'Saving Image',
success: (finalImg: string) => (
<div className="flex flex-col items-center">
<b className="py-2">Image saved!</b>
Irev-Dev (Migrated from github.com) commented 2021-10-09 20:41:29 +02:00
Copy Link

even though we're using the canvas directly (passed in through LiveProjectViewer), this doesn't work when capturing with import { toJpeg } from 'html-to-image' and so the canvas need to be captured, than the image inserted over the canvas via partSnapShot64 so that we can than use toJpeg

even though we're using the canvas directly (passed in through `LiveProjectViewer`), this doesn't work when capturing with `import { toJpeg } from 'html-to-image'` and so the canvas need to be captured, than the image inserted over the canvas via `partSnapShot64` so that we can than use `toJpeg`
Irev-Dev (Migrated from github.com) reviewed 2021-10-09 20:45:54 +02:00
app/web/src/components/CaptureButton/CaptureButton.tsx
Irev-Dev (Migrated from github.com) commented 2021-10-09 20:45:54 +02:00
Copy Link

setTimeout without delayed used to put this at the end of the event loop so that component can re-render after partSnapShot64Setter(useState) is called.

setTimeout without delayed used to put this at the end of the event loop so that component can re-render after `partSnapShot64Setter`(useState) is called.
Irev-Dev (Migrated from github.com) reviewed 2021-10-09 20:47:01 +02:00
app/web/src/components/CaptureButton/CaptureButton.tsx
Irev-Dev (Migrated from github.com) commented 2021-10-09 20:47:00 +02:00
Copy Link

Bundling a few steps in one promise so that we can use toast.promise

Bundling a few steps in one promise so that we can use `toast.promise`
Irev-Dev commented 2021-10-09 22:02:35 +02:00 (Migrated from github.com)
Copy Link

Ready for review now, I've updated the description.

Ready for review now, I've updated the description.
franknoirot (Migrated from github.com) approved these changes 2021-10-10 23:23:20 +02:00
app/web/src/components/CaptureButton/CaptureButton.tsx
@@ -194,0 +135,4 @@
<div
style={{ width: '500px', height: '375px' }}
className="rounded-md shadow-ch border border-gray-400 overflow-hidden my-4"
>
franknoirot (Migrated from github.com) commented 2021-10-10 23:04:25 +02:00
Copy Link

@Irev-Dev could this component be used for a /view endpoint?

@Irev-Dev could this component be used for a /view endpoint?
app/web/src/components/IdeViewer/IdeViewer.tsx
@@ -183,4 +189,4 @@
<div
className={`absolute inset-0 transition-opacity duration-500 ${
isDragging ? 'opacity-25' : 'opacity-100'
}`}
franknoirot (Migrated from github.com) commented 2021-10-10 23:14:15 +02:00
Copy Link

This is a great decoupling move!

This is a great decoupling move!
app/web/src/helpers/hooks/useIdeState.ts
@@ -41,3 +54,4 @@
editorTabs: EditorTab[]
currentModel: number
objectData: {
type: 'INIT' | ArtifactTypes
franknoirot (Migrated from github.com) commented 2021-10-10 23:20:12 +02:00
Copy Link

Totally hear that, it's what Monaco calls their different "tab"-like things but this is better especially since there are like 6 things that could be called models in the context of this app lol.

Totally hear that, it's what Monaco calls their different "tab"-like things but this is better especially since there are like 6 things that could be called models in the context of this app lol.
Irev-Dev (Migrated from github.com) reviewed 2021-10-11 21:07:19 +02:00
app/web/src/components/CaptureButton/CaptureButton.tsx
@@ -194,0 +135,4 @@
<div
style={{ width: '500px', height: '375px' }}
className="rounded-md shadow-ch border border-gray-400 overflow-hidden my-4"
>
Irev-Dev (Migrated from github.com) commented 2021-10-11 21:07:18 +02:00
Copy Link

Yeah I suppose so 👍

Yeah I suppose so 👍
Irev-Dev (Migrated from github.com) reviewed 2021-10-11 21:09:29 +02:00
app/web/src/helpers/hooks/useIdeState.ts
@@ -41,3 +54,4 @@
editorTabs: EditorTab[]
currentModel: number
objectData: {
type: 'INIT' | ArtifactTypes
Irev-Dev (Migrated from github.com) commented 2021-10-11 21:09:29 +02:00
Copy Link

Oh right, I didn't think about the monaco connection, I think tabs is okay.

Oh right, I didn't think about the monaco connection, I think tabs is okay.
Sign in to join this conversation.
Reviewers
No Reviewers
franknoirot
Irev-Dev
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
h3n3
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: h3n3/cadhub#541
Delete Branch "kurt/overhaul-social-card"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?