feat: xyflow upgrade (#7803)
* wip * fix: reset the sizes * fix: update zustand * fix: update * fix: add additional width * wip * fix: remove hacky code * wip * wip * wip * wip * wip * fix: try pre-commit * fix: add check pre-commit * fix: remove xyflow * fix: remove unnecessary files * fix: update packages * Update scripts/generate-renderer.sh --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>pull/8455/head
Arik Chakma
2 weeks ago
committed by
GitHub
parent
dc2142dde0
commit
2485b716dd
28 changed files with 1619 additions and 1757 deletions
@ -1,14 +0,0 @@ |
||||
export function ReadonlyEditor(props: any) { |
||||
return ( |
||||
<div className="fixed bottom-0 left-0 right-0 top-0 z-[9999] border bg-white p-5 text-black"> |
||||
<h2 className="mb-2 text-xl font-semibold">Private Component</h2> |
||||
<p className="mb-4"> |
||||
Renderer is a private component. If you are a collaborator and have |
||||
access to it. Run the following command: |
||||
</p> |
||||
<code className="mt-5 rounded-md bg-gray-800 p-2 text-white"> |
||||
npm run generate-renderer |
||||
</code> |
||||
</div> |
||||
); |
||||
} |
||||
@ -1,14 +0,0 @@ |
||||
export function Renderer(props: any) { |
||||
return ( |
||||
<div className="fixed bottom-0 left-0 right-0 top-0 z-[9999] border bg-white p-5 text-black"> |
||||
<h2 className="mb-2 text-xl font-semibold">Private Component</h2> |
||||
<p className="mb-4"> |
||||
Renderer is a private component. If you are a collaborator and have |
||||
access to it. Run the following command: |
||||
</p> |
||||
<code className="mt-5 rounded-md bg-gray-800 p-2 text-white"> |
||||
npm run generate-renderer |
||||
</code> |
||||
</div> |
||||
); |
||||
} |
||||
@ -1,5 +0,0 @@ |
||||
export function renderFlowJSON(data: any, options?: any) { |
||||
console.warn("renderFlowJSON is not implemented"); |
||||
console.warn("run the following command to generate the renderer:"); |
||||
console.warn("> npm run generate-renderer"); |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -1,14 +0,0 @@ |
||||
export function Renderer(props: any) { |
||||
return ( |
||||
<div className="fixed bottom-0 left-0 right-0 top-0 z-[9999] border bg-white p-5 text-black"> |
||||
<h2 className="mb-2 text-xl font-semibold">Private Component</h2> |
||||
<p className="mb-4"> |
||||
Renderer is a private component. If you are a collaborator and have |
||||
access to it. Run the following command: |
||||
</p> |
||||
<code className="mt-5 rounded-md bg-gray-800 p-2 text-white"> |
||||
npm run generate-renderer |
||||
</code> |
||||
</div> |
||||
); |
||||
} |
||||
@ -1,5 +0,0 @@ |
||||
export function renderFlowJSON(data: any, options?: any) { |
||||
console.warn("renderFlowJSON is not implemented"); |
||||
console.warn("run the following command to generate the renderer:"); |
||||
console.warn("> npm run generate-renderer"); |
||||
} |
||||
@ -0,0 +1,76 @@ |
||||
import fs from 'node:fs/promises'; |
||||
import path from 'node:path'; |
||||
import { fileURLToPath } from 'node:url'; |
||||
import type { Node } from '@roadmapsh/editor'; |
||||
import matter from 'gray-matter'; |
||||
import type { RoadmapFrontmatter } from '../src/lib/roadmap'; |
||||
|
||||
const __filename = fileURLToPath(import.meta.url); |
||||
const __dirname = path.dirname(__filename); |
||||
|
||||
// Directory containing the roadmaps
|
||||
const ROADMAP_CONTENT_DIR = path.join(__dirname, '../src/data/roadmaps'); |
||||
const allRoadmaps = await fs.readdir(ROADMAP_CONTENT_DIR); |
||||
|
||||
const editorRoadmapIds = new Set<string>(); |
||||
for (const roadmapId of allRoadmaps) { |
||||
const roadmapFrontmatterDir = path.join( |
||||
ROADMAP_CONTENT_DIR, |
||||
roadmapId, |
||||
`${roadmapId}.md`, |
||||
); |
||||
const roadmapFrontmatterRaw = await fs.readFile( |
||||
roadmapFrontmatterDir, |
||||
'utf-8', |
||||
); |
||||
const { data } = matter(roadmapFrontmatterRaw); |
||||
|
||||
const roadmapFrontmatter = data as RoadmapFrontmatter; |
||||
if (roadmapFrontmatter.renderer === 'editor') { |
||||
editorRoadmapIds.add(roadmapId); |
||||
} |
||||
} |
||||
|
||||
for (const roadmapId of editorRoadmapIds) { |
||||
const roadmapJSONDir = path.join( |
||||
ROADMAP_CONTENT_DIR, |
||||
roadmapId, |
||||
`${roadmapId}.json`, |
||||
); |
||||
|
||||
const roadmapJSONRaw = await fs.readFile(roadmapJSONDir, 'utf-8'); |
||||
const roadmapJSON = JSON.parse(roadmapJSONRaw); |
||||
|
||||
const roadmapNodes = roadmapJSON.nodes as Node[]; |
||||
const updatedNodes = roadmapNodes.map((node) => { |
||||
const width = +(node?.width || node?.style?.width || 0); |
||||
const height = +(node?.height || node?.style?.height || 0); |
||||
|
||||
const ADDITIONAL_WIDTH = 1; |
||||
// adding one `1px` in width to avoid the node to be cut in half
|
||||
// this is a quick fix to avoid the issue
|
||||
if (node?.style?.width) { |
||||
node.style.width = width + ADDITIONAL_WIDTH; |
||||
} |
||||
|
||||
if (node?.width) { |
||||
node.width = width + ADDITIONAL_WIDTH; |
||||
} |
||||
|
||||
return { |
||||
...node, |
||||
measured: { |
||||
width: width + ADDITIONAL_WIDTH, |
||||
height, |
||||
}, |
||||
}; |
||||
}); |
||||
|
||||
const updatedRoadmapJSON = { |
||||
...roadmapJSON, |
||||
nodes: updatedNodes, |
||||
}; |
||||
|
||||
const updatedRoadmapJSONString = JSON.stringify(updatedRoadmapJSON, null, 2); |
||||
await fs.writeFile(roadmapJSONDir, updatedRoadmapJSONString, 'utf-8'); |
||||
} |
||||
Loading…
Reference in new issue