This commit is contained in:
2025-11-14 14:47:26 +00:00
parent 69ecf2c7c1
commit 3b4876793e
104 changed files with 231517 additions and 1029 deletions
@@ -32,19 +32,19 @@ export class CCSchoolNodeShapeUtil extends CCBaseShapeUtil<CCSchoolNodeShape> {
<div style={styles.container}>
<NodeProperty
label="School Name"
value={shape.props.school_name}
value={shape.props.name}
labelStyle={styles.property.label}
valueStyle={styles.property.value}
/>
<NodeProperty
label="School Website"
value={shape.props.school_website}
value={shape.props.website}
labelStyle={styles.property.label}
valueStyle={styles.property.value}
/>
<NodeProperty
label="School UUID"
value={shape.props.school_uuid}
value={shape.props.uuid_string}
labelStyle={styles.property.label}
valueStyle={styles.property.value}
/>
@@ -51,12 +51,12 @@ export class CCTeacherNodeShapeUtil extends CCBaseShapeUtil<CCTeacherNodeShape>
{ label: 'Teacher Name', value: props.teacher_name_formal },
{ label: 'Teacher Code', value: props.teacher_code },
{ label: 'Email', value: props.teacher_email },
{ label: 'Node Snapshot', value: props.tldraw_snapshot }
{ label: 'Node Snapshot', value: props.node_storage_path }
]
return (
<div style={styles.container}>
{defaultComponent && <DefaultNodeComponent tldraw_snapshot={props.tldraw_snapshot} />}
{defaultComponent && <DefaultNodeComponent node_storage_path={props.node_storage_path} />}
{properties.map((prop, index) => (
<div key={index} style={styles.property.wrapper}>
<span style={styles.property.label}>{prop.label}:</span>
@@ -51,7 +51,7 @@ export class CCUserNodeShapeUtil extends CCBaseShapeUtil<CCUserNodeShape> {
{ label: 'User Email', value: props.user_email },
{ label: 'User Type', value: props.user_type },
{ label: 'User ID', value: props.user_id },
{ label: 'Node Snapshot', value: props.tldraw_snapshot },
{ label: 'Node Snapshot', value: props.node_storage_path },
{ label: 'Worker Node Data', value: props.worker_node_data }
] : [
{ label: 'User Name', value: props.user_name },
@@ -60,7 +60,7 @@ export class CCUserNodeShapeUtil extends CCBaseShapeUtil<CCUserNodeShape> {
return (
<div style={styles.container}>
{defaultComponent && <DefaultNodeComponent tldraw_snapshot={props.tldraw_snapshot} />}
{defaultComponent && <DefaultNodeComponent node_storage_path={props.node_storage_path} />}
{properties.map((prop, index) => (
<div key={index} style={styles.property.wrapper}>
<span style={styles.property.label}>{prop.label}:</span>
@@ -1,23 +1,23 @@
import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
import { CCBaseShape } from '../cc-types'
import { NodeProperty, formatDate } from './cc-graph-shared'
import { ccGraphShapeProps, getDefaultCCUserTimetableLessonNodeProps } from './cc-graph-props'
import { ccGraphShapeProps, getDefaultCCTimetableLessonNodeProps } from './cc-graph-props'
import { getNodeStyles } from './cc-graph-styles'
import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
import { CCUserTimetableLessonNodeProps } from './cc-graph-types'
import { CCTimetableLessonNodeProps } from './cc-graph-types'
export interface CCUserTimetableLessonNodeShape extends CCBaseShape {
export interface CCTimetableLessonNodeShape extends CCBaseShape {
type: 'cc-user-timetable-lesson-node'
props: CCUserTimetableLessonNodeProps
props: CCTimetableLessonNodeProps
}
export class CCUserTimetableLessonNodeShapeUtil extends CCBaseShapeUtil<CCUserTimetableLessonNodeShape> {
export class CCTimetableLessonNodeShapeUtil extends CCBaseShapeUtil<CCTimetableLessonNodeShape> {
static type = 'cc-user-timetable-lesson-node' as const
static props = ccGraphShapeProps['cc-user-timetable-lesson-node']
getDefaultProps(): CCUserTimetableLessonNodeShape['props'] {
const defaultProps = getDefaultCCUserTimetableLessonNodeProps() as CCUserTimetableLessonNodeShape['props']
const theme = NODE_THEMES[NODE_TYPE_THEMES[CCUserTimetableLessonNodeShapeUtil.type]]
getDefaultProps(): CCTimetableLessonNodeShape['props'] {
const defaultProps = getDefaultCCTimetableLessonNodeProps() as CCTimetableLessonNodeShape['props']
const theme = NODE_THEMES[NODE_TYPE_THEMES[CCTimetableLessonNodeShapeUtil.type]]
return {
...defaultProps,
headerColor: theme.headerColor,
@@ -27,7 +27,7 @@ export class CCUserTimetableLessonNodeShapeUtil extends CCBaseShapeUtil<CCUserTi
// Override to nullify the default node component
DefaultComponent = () => null
renderContent = (shape: CCUserTimetableLessonNodeShape) => {
renderContent = (shape: CCTimetableLessonNodeShape) => {
const styles = getNodeStyles(shape.type)
return (
@@ -14,8 +14,8 @@ const stateProps = T.object({
const graphBaseProps = {
...baseShapeProps,
__primarylabel__: T.string,
unique_id: T.string,
tldraw_snapshot: T.string,
uuid_string: T.string,
node_storage_path: T.string,
created: T.string,
merged: T.string,
state: T.optional(stateProps.nullable()),
@@ -84,9 +84,8 @@ export const ccGraphShapeProps = {
},
'cc-school-node': {
...graphBaseProps,
school_uuid: T.string,
school_name: T.string,
school_website: T.string,
name: T.string,
website: T.string,
},
'cc-department-node': {
...graphBaseProps,
@@ -283,8 +282,8 @@ export const getDefaultBaseProps = () => ({
backgroundColor: '#f0f0f0' as string,
title: 'Untitled' as string,
isLocked: false as boolean,
unique_id: '' as string,
tldraw_snapshot: '' as string,
uuid_string: '' as string,
node_storage_path: '' as string,
created: '' as string,
merged: '' as string,
state: {
@@ -383,9 +382,8 @@ export const getDefaultCCSchoolNodeProps = () => ({
...getDefaultBaseProps(),
title: 'School',
__primarylabel__: 'School',
school_uuid: '',
school_name: '',
school_website: '',
name: '',
website: '',
})
export const getDefaultCCDepartmentNodeProps = () => ({
@@ -642,16 +640,3 @@ export const getDefaultCCUserTeacherTimetableNodeProps = () => ({
school_db_name: '',
school_timetable_id: '',
})
export const getDefaultCCUserTimetableLessonNodeProps = () => ({
...getDefaultBaseProps(),
title: 'User Timetable Lesson',
__primarylabel__: 'UserTimetableLesson',
subject_class: '',
date: '',
start_time: '',
end_time: '',
period_code: '',
school_db_name: '',
school_period_id: '',
})
@@ -35,7 +35,7 @@ import { CCTimetableLessonNodeShape, CCTimetableLessonNodeShapeUtil } from './CC
import { CCPlannedLessonNodeShape, CCPlannedLessonNodeShapeUtil } from './CCPlannedLessonNodeShapeUtil'
import { CCDepartmentStructureNodeShape, CCDepartmentStructureNodeShapeUtil } from './CCDepartmentStructureNodeShapeUtil'
import { CCUserTeacherTimetableNodeShape, CCUserTeacherTimetableNodeShapeUtil } from './CCUserTeacherTimetableNodeShapeUtil'
import { CCUserTimetableLessonNodeShape, CCUserTimetableLessonNodeShapeUtil } from './CCUserTimetableLessonNodeShapeUtil'
import { CCTimetableLessonNodeShape, CCTimetableLessonNodeShapeUtil } from './CCTimetableLessonNodeShapeUtil'
// Create a const object with all node types
export const NODE_SHAPE_TYPES = {
@@ -75,7 +75,7 @@ export const NODE_SHAPE_TYPES = {
PLANNED_LESSON: CCPlannedLessonNodeShapeUtil.type,
DEPARTMENT_STRUCTURE: CCDepartmentStructureNodeShapeUtil.type,
USER_TEACHER_TIMETABLE: CCUserTeacherTimetableNodeShapeUtil.type,
USER_TIMETABLE_LESSON: CCUserTimetableLessonNodeShapeUtil.type,
USER_TIMETABLE_LESSON: CCTimetableLessonNodeShapeUtil.type,
} as const;
// Create the type from the const object's values
@@ -119,7 +119,7 @@ export type AllNodeShapes =
| CCPlannedLessonNodeShape
| CCDepartmentStructureNodeShape
| CCUserTeacherTimetableNodeShape
| CCUserTimetableLessonNodeShape;
| CCTimetableLessonNodeShape;
// Export all shape utils in an object for easy access
export const ShapeUtils = {
@@ -159,7 +159,7 @@ export const ShapeUtils = {
[CCPlannedLessonNodeShapeUtil.type]: CCPlannedLessonNodeShapeUtil,
[CCDepartmentStructureNodeShapeUtil.type]: CCDepartmentStructureNodeShapeUtil,
[CCUserTeacherTimetableNodeShapeUtil.type]: CCUserTeacherTimetableNodeShapeUtil,
[CCUserTimetableLessonNodeShapeUtil.type]: CCUserTimetableLessonNodeShapeUtil,
[CCTimetableLessonNodeShapeUtil.type]: CCTimetableLessonNodeShapeUtil,
} as const;
// Add a type guard to check if a shape is a valid node shape
@@ -177,8 +177,8 @@ export const checkDefaultComponent = (defaultComponent: boolean | { action: { la
// Base component for all graph nodes
interface DefaultNodeComponentProps {
tldraw_snapshot: string
onInspect?: (tldraw_snapshot: string) => void
node_storage_path: string
onInspect?: (node_storage_path: string) => void
customAction?: {
label: string
handler: () => void
@@ -186,13 +186,13 @@ interface DefaultNodeComponentProps {
}
export const DefaultNodeComponent: React.FC<DefaultNodeComponentProps> = ({
tldraw_snapshot,
onInspect = () => console.log(`Inspecting node at path: ${tldraw_snapshot}`),
node_storage_path,
onInspect = () => console.log(`Inspecting node at path: ${node_storage_path}`),
customAction
}) => {
return (
<div style={SHARED_NODE_STYLES.defaultComponent.container}>
<button style={SHARED_NODE_STYLES.defaultComponent.button} onClick={() => onInspect(tldraw_snapshot)}>
<button style={SHARED_NODE_STYLES.defaultComponent.button} onClick={() => onInspect(node_storage_path)}>
Inspect
</button>
{customAction && (
@@ -15,8 +15,8 @@ export interface ShapeState {
export type CCGraphShapeProps = CCBaseProps & {
__primarylabel__: string
unique_id: string
tldraw_snapshot: string
uuid_string: string
node_storage_path: string
created: string
merged: string
state: ShapeState | null | undefined
@@ -26,8 +26,8 @@ export type CCGraphShapeProps = CCBaseProps & {
// Define the base shape type for graph shapes
export type CCGraphShape = CCBaseShape & TLBaseShape<GraphShapeType, {
__primarylabel__: CCGraphShapeProps['__primarylabel__']
unique_id: CCGraphShapeProps['unique_id']
tldraw_snapshot: CCGraphShapeProps['tldraw_snapshot']
uuid_string: CCGraphShapeProps['uuid_string']
node_storage_path: CCGraphShapeProps['node_storage_path']
created: CCGraphShapeProps['created']
merged: CCGraphShapeProps['merged']
state: CCGraphShapeProps['state']
@@ -95,9 +95,8 @@ export type CCCalendarTimeChunkNodeProps = CCGraphShapeProps & {
}
export type CCSchoolNodeProps = CCGraphShapeProps & {
school_uuid: string
school_name: string
school_website: string
name: string
website: string
}
export type CCDepartmentNodeProps = CCGraphShapeProps & {
@@ -195,14 +194,6 @@ export type CCTeacherTimetableNodeProps = CCGraphShapeProps & {
end_date: string
}
export type CCTimetableLessonNodeProps = CCGraphShapeProps & {
subject_class: string
date: string
start_time: string
end_time: string
period_code: string
}
export type CCPlannedLessonNodeProps = CCGraphShapeProps & {
date: string
start_time: string
@@ -277,7 +268,7 @@ export type CCUserTeacherTimetableNodeProps = CCGraphShapeProps & {
school_timetable_id: string
}
export type CCUserTimetableLessonNodeProps = CCGraphShapeProps & {
export type CCTimetableLessonNodeProps = CCGraphShapeProps & {
subject_class: string
date: string
start_time: string
@@ -324,7 +315,7 @@ export type CCNodeTypes = {
SubjectClass: { props: CCSubjectClassNodeProps }
DepartmentStructure: { props: CCDepartmentStructureNodeProps }
UserTeacherTimetable: { props: CCUserTeacherTimetableNodeProps }
UserTimetableLesson: { props: CCUserTimetableLessonNodeProps }
UserTimetableLesson: { props: CCTimetableLessonNodeProps }
}
// Helper function to get shape type from node type
@@ -334,7 +325,7 @@ export const getShapeType = (nodeType: keyof CCNodeTypes): string => {
// Helper function to get allowed props from node type
export const getAllowedProps = (): string[] => {
return ['__primarylabel__', 'unique_id'];
return ['__primarylabel__', 'uuid_string'];
}
// Helper function to get node configuration
@@ -52,7 +52,7 @@ export const graphState = {
const updatedShapeIds: string[] = [];
nodes.forEach((node, index) => {
if (!node.props?.unique_id) return;
if (!node.props?.uuid_string) return;
const row = Math.floor(index / gridColumns);
const col = index % gridColumns;
@@ -60,13 +60,13 @@ export const graphState = {
const x = startX + (col * (GRID_CELL_SIZE + GRID_PADDING));
const y = startY + (row * (GRID_CELL_SIZE + GRID_PADDING));
const shapeId = createShapeId(node.props.unique_id);
const shapeId = createShapeId(node.props.uuid_string);
updatedShapeIds.push(shapeId.toString());
// Update both our internal state and the editor
node.x = x;
node.y = y;
graphState.nodeData.set(node.props.unique_id, node);
graphState.nodeData.set(node.props.uuid_string, node);
// Only create if the shape doesn't exist in our tracking
if (!graphState.shapeIds.has(shapeId.toString())) {
@@ -123,12 +123,12 @@ export const graphState = {
addNode: (shape: AllNodeShapes) => {
logger.debug('graphStateUtil', '🔍 Adding shape to graphState:', { shape });
if (!shape.props?.unique_id || !shape.type) {
if (!shape.props?.uuid_string || !shape.type) {
logger.error('graphStateUtil', '❌ Invalid shape data', { shape });
return;
}
const id = shape.props.unique_id;
const id = shape.props.uuid_string;
const shapeId = createShapeId(id).toString();
// Track the shape ID
@@ -208,7 +208,7 @@ export const graphState = {
getShapeByUniqueId: (uniqueId: string) => {
return Array.from(graphState.nodeData.values()).find(
shape => shape.props?.unique_id === uniqueId
shape => shape.props?.uuid_string === uniqueId
);
},