Composite Pattern

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216

// ============================================
// Component: Abstract file system entry
// ============================================
 
interface FileSystemEntry {
    getName(): string;
    getPath(): string;
    getSize(): number;
    getCreatedAt(): Date;
    getModifiedAt(): Date;
    
    // Tree operations
    find(name: string): FileSystemEntry | null;
    findAll(predicate: (entry: FileSystemEntry) => boolean): FileSystemEntry[];
    forEach(callback: (entry: FileSystemEntry) => void): void;
    
    // Child management
    add(entry: FileSystemEntry): void;
    remove(entry: FileSystemEntry): void;
    getChildren(): FileSystemEntry[];
    isDirectory(): boolean;
    
    // Navigation
    getParent(): FileSystemEntry | null;
    setParent(parent: FileSystemEntry | null): void;
}
 
// ============================================
// Leaf: File
// ============================================
 
class File implements FileSystemEntry {
    private parent: FileSystemEntry | null = null;
    private createdAt: Date = new Date();
    private modifiedAt: Date = new Date();
    
    constructor(
        private name: string,
        private content: string,
        private size: number
    ) {}
    
    getName(): string { return this.name; }
    
    getPath(): string {
        if (this.parent) {
            return `${this.parent.getPath()}/${this.name}`;
        }
        return this.name;
    }
    
    getSize(): number { return this.size; }
    getCreatedAt(): Date { return this.createdAt; }
    getModifiedAt(): Date { return this.modifiedAt; }
    
    find(name: string): FileSystemEntry | null {
        return this.name === name ? this : null;
    }
    
    findAll(predicate: (entry: FileSystemEntry) => boolean): FileSystemEntry[] {
        return predicate(this) ? [this] : [];
    }
    
    forEach(callback: (entry: FileSystemEntry) => void): void {
        callback(this);
    }
    
    // Leaf doesn't support children
    add(entry: FileSystemEntry): void {
        throw new Error(`Cannot add to file: ${this.name}`);
    }
    
    remove(entry: FileSystemEntry): void {
        throw new Error(`Cannot remove from file: ${this.name}`);
    }
    
    getChildren(): FileSystemEntry[] { return []; }
    isDirectory(): boolean { return false; }
    
    getParent(): FileSystemEntry | null { return this.parent; }
    setParent(parent: FileSystemEntry | null): void { this.parent = parent; }
    
    // File-specific methods
    getContent(): string { return this.content; }
    
    setContent(content: string): void {
        this.content = content;
        this.size = content.length;
        this.modifiedAt = new Date();
    }
}
 
// ============================================
// Composite: Directory
// ============================================
 
class Directory implements FileSystemEntry {
    private children: FileSystemEntry[] = [];
    private parent: FileSystemEntry | null = null;
    private createdAt: Date = new Date();
    private modifiedAt: Date = new Date();
    
    constructor(private name: string) {}
    
    getName(): string { return this.name; }
    
    getPath(): string {
        if (this.parent) {
            return `${this.parent.getPath()}/${this.name}`;
        }
        return this.name;
    }
    
    getSize(): number {
        // Directory size = sum of all children (recursive)
        return this.children.reduce((sum, child) => sum + child.getSize(), 0);
    }
    
    getCreatedAt(): Date { return this.createdAt; }
    getModifiedAt(): Date { return this.modifiedAt; }
    
    find(name: string): FileSystemEntry | null {
        if (this.name === name) return this;
        
        for (const child of this.children) {
            const found = child.find(name);
            if (found) return found;
        }
        return null;
    }
    
    findAll(predicate: (entry: FileSystemEntry) => boolean): FileSystemEntry[] {
        const results: FileSystemEntry[] = predicate(this) ? [this] : [];
        for (const child of this.children) {
            results.push(...child.findAll(predicate));
        }
        return results;
    }
    
    forEach(callback: (entry: FileSystemEntry) => void): void {
        callback(this);
        for (const child of this.children) {
            child.forEach(callback);
        }
    }
    
    add(entry: FileSystemEntry): void {
        // Check for duplicate name
        if (this.children.some(c => c.getName() === entry.getName())) {
            throw new Error(`Entry named "${entry.getName()}" already exists`);
        }
        
        // Remove from old parent if any
        const oldParent = entry.getParent();
        if (oldParent) {
            oldParent.remove(entry);
        }
        
        entry.setParent(this);
        this.children.push(entry);
        this.modifiedAt = new Date();
    }
    
    remove(entry: FileSystemEntry): void {
        const index = this.children.indexOf(entry);
        if (index !== -1) {
            entry.setParent(null);
            this.children.splice(index, 1);
            this.modifiedAt = new Date();
        }
    }
    
    getChildren(): FileSystemEntry[] { return [...this.children]; }
    isDirectory(): boolean { return true; }
    
    getParent(): FileSystemEntry | null { return this.parent; }
    setParent(parent: FileSystemEntry | null): void { this.parent = parent; }
    
    // Directory-specific methods
    getFileCount(): number {
        return this.findAll(e => !e.isDirectory()).length;
    }
    
    getDirectoryCount(): number {
        return this.findAll(e => e.isDirectory()).length - 1; // Exclude self
    }
}
 
// ============================================
// Usage Example
// ============================================
 
const root = new Directory("project");
const src = new Directory("src");
const tests = new Directory("tests");
const readme = new File("README.md", "# Project\n...", 256);
const index = new File("index.ts", "export * from './app';", 48);
const app = new File("app.ts", "// main app code", 1024);
const test1 = new File("app.test.ts", "describe('App'...", 512);
 
root.add(src);
root.add(tests);
root.add(readme);
src.add(index);
src.add(app);
tests.add(test1);
 
// Uniform operations
console.log(`Total size: ${root.getSize()} bytes`);  // 1840
console.log(`Files: ${root.getFileCount()}`);         // 4
console.log(`Subdirs: ${root.getDirectoryCount()}`);  // 2
 
// Find all TypeScript files
const tsFiles = root.findAll(e => e.getName().endsWith(".ts"));
console.log(`TS files: ${tsFiles.map(f => f.getName()).join(", ")}`);
// Output: index.ts, app.ts, app.test.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238

// ============================================
// Component: Abstract UI Widget
// ============================================
 
interface UIComponent {
    render(): string;
    getBounds(): { x: number; y: number; width: number; height: number };
    setPosition(x: number, y: number): void;
    setSize(width: number, height: number): void;
    
    // Event handling
    handleEvent(event: UIEvent): boolean;
    
    // Tree structure
    add(component: UIComponent): void;
    remove(component: UIComponent): void;
    getChildren(): UIComponent[];
}
 
interface UIEvent {
    type: 'click' | 'keydown' | 'focus' | 'blur';
    target: UIComponent;
}
 
// ============================================
// Base class for common functionality
// ============================================
 
abstract class BaseUIComponent implements UIComponent {
    protected x: number = 0;
    protected y: number = 0;
    protected width: number = 100;
    protected height: number = 50;
    
    abstract render(): string;
    
    getBounds() {
        return { x: this.x, y: this.y, width: this.width, height: this.height };
    }
    
    setPosition(x: number, y: number): void {
        this.x = x;
        this.y = y;
    }
    
    setSize(width: number, height: number): void {
        this.width = width;
        this.height = height;
    }
    
    handleEvent(event: UIEvent): boolean {
        // Default: event not handled
        return false;
    }
    
    // Default: no children (leaves)
    add(component: UIComponent): void {
        throw new Error("Cannot add children to this component");
    }
    
    remove(component: UIComponent): void {
        throw new Error("Cannot remove children from this component");
    }
    
    getChildren(): UIComponent[] {
        return [];
    }
}
 
// ============================================
// Leaf Components
// ============================================
 
class Button extends BaseUIComponent {
    constructor(
        private label: string,
        private onClick: () => void
    ) {
        super();
    }
    
    render(): string {
        return `<button style="position:absolute;left:${this.x}px;top:${this.y}px;width:${this.width}px;height:${this.height}px">${this.label}</button>`;
    }
    
    handleEvent(event: UIEvent): boolean {
        if (event.type === 'click' && event.target === this) {
            this.onClick();
            return true; // Event handled
        }
        return false;
    }
}
 
class Label extends BaseUIComponent {
    constructor(private text: string) {
        super();
    }
    
    render(): string {
        return `<span style="position:absolute;left:${this.x}px;top:${this.y}px">${this.text}</span>`;
    }
}
 
class TextInput extends BaseUIComponent {
    private value: string = "";
    
    constructor(private placeholder: string) {
        super();
    }
    
    render(): string {
        return `<input type="text" placeholder="${this.placeholder}" value="${this.value}" style="position:absolute;left:${this.x}px;top:${this.y}px;width:${this.width}px" />`;
    }
    
    getValue(): string { return this.value; }
    setValue(value: string): void { this.value = value; }
}
 
// ============================================
// Composite: Panel (Container)
// ============================================
 
class Panel extends BaseUIComponent {
    private children: UIComponent[] = [];
    private title: string;
    
    constructor(title: string = "") {
        super();
        this.title = title;
    }
    
    render(): string {
        // Render self and all children
        const childrenHtml = this.children.map(c => c.render()).join("\n");
        return `
<div class="panel" style="position:absolute;left:${this.x}px;top:${this.y}px;width:${this.width}px;height:${this.height}px;border:1px solid #ccc;">
    ${this.title ? `<div class="panel-title">${this.title}</div>` : ""}
    <div class="panel-content">
        ${childrenHtml}
    </div>
</div>`;
    }
    
    handleEvent(event: UIEvent): boolean {
        // First, try to handle in children (event bubbling)
        for (const child of this.children) {
            if (child.handleEvent(event)) {
                return true;
            }
        }
        // Then, handle ourselves if needed
        return false;
    }
    
    add(component: UIComponent): void {
        this.children.push(component);
    }
    
    remove(component: UIComponent): void {
        const index = this.children.indexOf(component);
        if (index !== -1) {
            this.children.splice(index, 1);
        }
    }
    
    getChildren(): UIComponent[] {
        return [...this.children];
    }
}
 
// ============================================
// Composite: Window (Top-level container)
// ============================================
 
class Window extends Panel {
    private isVisible: boolean = true;
    
    constructor(title: string) {
        super(title);
        this.setSize(400, 300);
    }
    
    render(): string {
        if (!this.isVisible) return "";
        return `
<div class="window" style="position:absolute;left:${this.x}px;top:${this.y}px;width:${this.width}px;height:${this.height}px;border:2px solid #333;background:white;">
    <div class="window-titlebar">${this.title}</div>
    <div class="window-content">
        ${this.getChildren().map(c => c.render()).join("\n")}
    </div>
</div>`;
    }
    
    show(): void { this.isVisible = true; }
    hide(): void { this.isVisible = false; }
}
 
// ============================================
// Usage: Build a login form
// ============================================
 
const loginWindow = new Window("Login");
loginWindow.setPosition(100, 100);
 
const formPanel = new Panel();
formPanel.setSize(350, 200);
 
const usernameLabel = new Label("Username:");
usernameLabel.setPosition(20, 20);
 
const usernameInput = new TextInput("Enter username");
usernameInput.setPosition(100, 20);
usernameInput.setSize(200, 30);
 
const passwordLabel = new Label("Password:");
passwordLabel.setPosition(20, 60);
 
const passwordInput = new TextInput("Enter password");
passwordInput.setPosition(100, 60);
passwordInput.setSize(200, 30);
 
const loginButton = new Button("Login", () => {
    console.log("Login clicked!");
});
loginButton.setPosition(100, 100);
loginButton.setSize(100, 35);
 
// Compose the tree
formPanel.add(usernameLabel);
formPanel.add(usernameInput);
formPanel.add(passwordLabel);
formPanel.add(passwordInput);
formPanel.add(loginButton);
loginWindow.add(formPanel);
 
// Single call renders entire tree
console.log(loginWindow.render());

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286

interface Graphic {
    draw(context: CanvasRenderingContext2D): void;
    move(dx: number, dy: number): void;
    scale(factor: number): void;
    rotate(degrees: number): void;
    getBoundingBox(): { x: number; y: number; width: number; height: number };
    clone(): Graphic;
    
    // Group operations
    add(graphic: Graphic): void;
    remove(graphic: Graphic): void;
    getChildren(): Graphic[];
}
 
abstract class Shape implements Graphic {
    protected x: number = 0;
    protected y: number = 0;
    protected rotation: number = 0;
    protected scaleX: number = 1;
    protected scaleY: number = 1;
    protected fillColor: string = "black";
    protected strokeColor: string = "none";
    
    abstract draw(context: CanvasRenderingContext2D): void;
    abstract getBoundingBox(): { x: number; y: number; width: number; height: number };
    abstract clone(): Graphic;
    
    move(dx: number, dy: number): void {
        this.x += dx;
        this.y += dy;
    }
    
    scale(factor: number): void {
        this.scaleX *= factor;
        this.scaleY *= factor;
    }
    
    rotate(degrees: number): void {
        this.rotation = (this.rotation + degrees) % 360;
    }
    
    // Leaves can't have children
    add(graphic: Graphic): void { throw new Error("Cannot add to shape"); }
    remove(graphic: Graphic): void { throw new Error("Cannot remove from shape"); }
    getChildren(): Graphic[] { return []; }
    
    protected setFill(color: string): this {
        this.fillColor = color;
        return this;
    }
}
 
// ============================================
// Leaf: Circle
// ============================================
 
class Circle extends Shape {
    constructor(x: number, y: number, private radius: number) {
        super();
        this.x = x;
        this.y = y;
    }
    
    draw(ctx: CanvasRenderingContext2D): void {
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.rotation * Math.PI / 180);
        ctx.scale(this.scaleX, this.scaleY);
        
        ctx.beginPath();
        ctx.arc(0, 0, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.fillColor;
        ctx.fill();
        
        ctx.restore();
    }
    
    getBoundingBox() {
        const r = this.radius * Math.max(this.scaleX, this.scaleY);
        return {
            x: this.x - r,
            y: this.y - r,
            width: r * 2,
            height: r * 2
        };
    }
    
    clone(): Graphic {
        const c = new Circle(this.x, this.y, this.radius);
        c.fillColor = this.fillColor;
        c.rotation = this.rotation;
        c.scaleX = this.scaleX;
        c.scaleY = this.scaleY;
        return c;
    }
}
 
// ============================================
// Leaf: Rectangle
// ============================================
 
class Rectangle extends Shape {
    constructor(
        x: number, y: number,
        private width: number,
        private height: number
    ) {
        super();
        this.x = x;
        this.y = y;
    }
    
    draw(ctx: CanvasRenderingContext2D): void {
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.rotation * Math.PI / 180);
        ctx.scale(this.scaleX, this.scaleY);
        
        ctx.fillStyle = this.fillColor;
        ctx.fillRect(-this.width/2, -this.height/2, this.width, this.height);
        
        ctx.restore();
    }
    
    getBoundingBox() {
        const w = this.width * this.scaleX;
        const h = this.height * this.scaleY;
        return {
            x: this.x - w/2,
            y: this.y - h/2,
            width: w,
            height: h
        };
    }
    
    clone(): Graphic {
        const r = new Rectangle(this.x, this.y, this.width, this.height);
        r.fillColor = this.fillColor;
        r.rotation = this.rotation;
        r.scaleX = this.scaleX;
        r.scaleY = this.scaleY;
        return r;
    }
}
 
// ============================================
// Composite: Group
// ============================================
 
class Group implements Graphic {
    private children: Graphic[] = [];
    
    draw(ctx: CanvasRenderingContext2D): void {
        // Draw all children - order matters (back to front)
        for (const child of this.children) {
            child.draw(ctx);
        }
    }
    
    move(dx: number, dy: number): void {
        // Moving a group moves all its children
        for (const child of this.children) {
            child.move(dx, dy);
        }
    }
    
    scale(factor: number): void {
        // Scaling a group scales all children
        for (const child of this.children) {
            child.scale(factor);
        }
    }
    
    rotate(degrees: number): void {
        // Rotating a group rotates all children
        // Note: For true group rotation, you'd need more complex transformation
        for (const child of this.children) {
            child.rotate(degrees);
        }
    }
    
    getBoundingBox() {
        if (this.children.length === 0) {
            return { x: 0, y: 0, width: 0, height: 0 };
        }
        
        // Compute bounding box that contains all children
        let minX = Infinity, minY = Infinity;
        let maxX = -Infinity, maxY = -Infinity;
        
        for (const child of this.children) {
            const box = child.getBoundingBox();
            minX = Math.min(minX, box.x);
            minY = Math.min(minY, box.y);
            maxX = Math.max(maxX, box.x + box.width);
            maxY = Math.max(maxY, box.y + box.height);
        }
        
        return {
            x: minX,
            y: minY,
            width: maxX - minX,
            height: maxY - minY
        };
    }
    
    clone(): Graphic {
        const group = new Group();
        for (const child of this.children) {
            group.add(child.clone());
        }
        return group;
    }
    
    add(graphic: Graphic): void {
        this.children.push(graphic);
    }
    
    remove(graphic: Graphic): void {
        const index = this.children.indexOf(graphic);
        if (index !== -1) {
            this.children.splice(index, 1);
        }
    }
    
    getChildren(): Graphic[] {
        return [...this.children];
    }
    
    // Bring child to front (top of drawing order)
    bringToFront(graphic: Graphic): void {
        this.remove(graphic);
        this.children.push(graphic);
    }
    
    // Send child to back (bottom of drawing order)
    sendToBack(graphic: Graphic): void {
        this.remove(graphic);
        this.children.unshift(graphic);
    }
}
 
// ============================================
// Usage: Create a scene
// ============================================
 
const scene = new Group();
 
// Create a smiley face as a group
const face = new Group();
const head = new Circle(100, 100, 50);
head.setFill("#FFDD00");
 
const leftEye = new Circle(85, 90, 8);
leftEye.setFill("black");
 
const rightEye = new Circle(115, 90, 8);
rightEye.setFill("black");
 
face.add(head);
face.add(leftEye);
face.add(rightEye);
 
// Create a house as a group
const house = new Group();
const body = new Rectangle(300, 150, 80, 60);
body.setFill("brown");
 
const roof = new Triangle(300, 100, 50);  // Assuming Triangle exists
roof.setFill("red");
 
house.add(body);
// house.add(roof);
 
// Add both groups to scene
scene.add(face);
scene.add(house);
 
// Single call to draw everything
// scene.draw(canvasContext);
 
// Move entire face group
face.move(50, 0);
 
// Scale entire scene
scene.scale(1.5);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176

interface OrganizationalUnit {
    getName(): string;
    getHeadCount(): number;
    getSalaryCost(): number;
    getBudget(): number;
    
    // Reporting
    generateReport(): string;
    findByName(name: string): OrganizationalUnit | null;
    
    // Structure
    add(unit: OrganizationalUnit): void;
    remove(unit: OrganizationalUnit): void;
    getSubUnits(): OrganizationalUnit[];
}
 
// ============================================
// Leaf: Employee
// ============================================
 
class Employee implements OrganizationalUnit {
    constructor(
        private name: string,
        private role: string,
        private salary: number
    ) {}
    
    getName(): string { return this.name; }
    
    getHeadCount(): number { return 1; }
    
    getSalaryCost(): number { return this.salary; }
    
    getBudget(): number { return 0; } // Employees don't have budgets
    
    generateReport(): string {
        return `  - ${this.name} (${this.role}): $${this.salary.toLocaleString()}`;
    }
    
    findByName(name: string): OrganizationalUnit | null {
        return this.name.toLowerCase().includes(name.toLowerCase()) ? this : null;
    }
    
    // Employees can't have subordinates
    add(unit: OrganizationalUnit): void {
        throw new Error("Employees cannot have subordinates");
    }
    
    remove(unit: OrganizationalUnit): void {
        throw new Error("Employees cannot have subordinates");
    }
    
    getSubUnits(): OrganizationalUnit[] { return []; }
}
 
// ============================================
// Composite: Department / Team
// ============================================
 
class Department implements OrganizationalUnit {
    private subUnits: OrganizationalUnit[] = [];
    private departmentBudget: number = 0;
    
    constructor(private name: string) {}
    
    getName(): string { return this.name; }
    
    getHeadCount(): number {
        return this.subUnits.reduce((sum, unit) => sum + unit.getHeadCount(), 0);
    }
    
    getSalaryCost(): number {
        return this.subUnits.reduce((sum, unit) => sum + unit.getSalaryCost(), 0);
    }
    
    getBudget(): number {
        // Total budget = own budget + all sub-unit budgets
        const subBudgets = this.subUnits.reduce(
            (sum, unit) => sum + unit.getBudget(), 0
        );
        return this.departmentBudget + subBudgets;
    }
    
    setDepartmentBudget(budget: number): void {
        this.departmentBudget = budget;
    }
    
    generateReport(): string {
        const lines: string[] = [
            `\n📁 ${this.name}`,
            `   Headcount: ${this.getHeadCount()}`,
            `   Salary Cost: $${this.getSalaryCost().toLocaleString()}`,
            `   Total Budget: $${this.getBudget().toLocaleString()}`,
            `   Members:`
        ];
        
        for (const unit of this.subUnits) {
            lines.push(unit.generateReport());
        }
        
        return lines.join("\n");
    }
    
    findByName(name: string): OrganizationalUnit | null {
        if (this.name.toLowerCase().includes(name.toLowerCase())) {
            return this;
        }
        
        for (const unit of this.subUnits) {
            const found = unit.findByName(name);
            if (found) return found;
        }
        
        return null;
    }
    
    add(unit: OrganizationalUnit): void {
        this.subUnits.push(unit);
    }
    
    remove(unit: OrganizationalUnit): void {
        const index = this.subUnits.indexOf(unit);
        if (index !== -1) {
            this.subUnits.splice(index, 1);
        }
    }
    
    getSubUnits(): OrganizationalUnit[] {
        return [...this.subUnits];
    }
}
 
// ============================================
// Usage
// ============================================
 
// Build organization structure
const company = new Department("TechCorp Inc.");
company.setDepartmentBudget(5000000);
 
const engineering = new Department("Engineering");
engineering.setDepartmentBudget(2000000);
 
const frontend = new Department("Frontend Team");
const backend = new Department("Backend Team");
 
frontend.add(new Employee("Alice Chen", "Senior Engineer", 150000));
frontend.add(new Employee("Bob Smith", "Engineer", 120000));
frontend.add(new Employee("Carol White", "Junior Engineer", 85000));
 
backend.add(new Employee("David Lee", "Tech Lead", 180000));
backend.add(new Employee("Eve Johnson", "Senior Engineer", 155000));
backend.add(new Employee("Frank Brown", "Engineer", 125000));
 
engineering.add(frontend);
engineering.add(backend);
 
const sales = new Department("Sales");
sales.setDepartmentBudget(1000000);
sales.add(new Employee("Grace Miller", "Sales Director", 200000));
sales.add(new Employee("Henry Wilson", "Account Executive", 95000));
 
company.add(engineering);
company.add(sales);
 
// Uniform operations on entire hierarchy
console.log(`Total headcount: ${company.getHeadCount()}`);  // 8
console.log(`Total salary cost: $${company.getSalaryCost().toLocaleString()}`);
console.log(`Total budget: $${company.getBudget().toLocaleString()}`);
console.log(company.generateReport());
 
// Find specific unit
const foundUnit = company.findByName("Frontend");
if (foundUnit) {
    console.log(`\nFrontend team headcount: ${foundUnit.getHeadCount()}`);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210

interface MenuComponent {
    getName(): string;
    render(depth: number): string;
    
    // Keyboard navigation
    getShortcut(): string | null;
    isEnabled(): boolean;
    
    // Action
    execute(): void;
    
    // Structure
    add(component: MenuComponent): void;
    remove(component: MenuComponent): void;
    getChildren(): MenuComponent[];
}
 
// ============================================
// Leaf: Menu Item (executable action)
// ============================================
 
class MenuItem implements MenuComponent {
    private enabled: boolean = true;
    
    constructor(
        private name: string,
        private shortcut: string | null,
        private action: () => void
    ) {}
    
    getName(): string { return this.name; }
    
    render(depth: number = 0): string {
        const indent = "  ".repeat(depth);
        const shortcutStr = this.shortcut ? `  (${this.shortcut})` : "";
        const disabledStr = this.enabled ? "" : " [disabled]";
        return `${indent}▸ ${this.name}${shortcutStr}${disabledStr}`;
    }
    
    getShortcut(): string | null { return this.shortcut; }
    isEnabled(): boolean { return this.enabled; }
    setEnabled(enabled: boolean): void { this.enabled = enabled; }
    
    execute(): void {
        if (this.enabled) {
            this.action();
        }
    }
    
    // Menu items can't have children
    add(component: MenuComponent): void {
        throw new Error("Cannot add to menu item");
    }
    
    remove(component: MenuComponent): void {
        throw new Error("Cannot remove from menu item");
    }
    
    getChildren(): MenuComponent[] { return []; }
}
 
// ============================================
// Leaf: Separator
// ============================================
 
class MenuSeparator implements MenuComponent {
    getName(): string { return "---"; }
    
    render(depth: number = 0): string {
        const indent = "  ".repeat(depth);
        return `${indent}────────────────────`;
    }
    
    getShortcut(): string | null { return null; }
    isEnabled(): boolean { return false; }
    execute(): void { /* separators do nothing */ }
    
    add(component: MenuComponent): void {
        throw new Error("Cannot add to separator");
    }
    
    remove(component: MenuComponent): void {
        throw new Error("Cannot remove from separator");
    }
    
    getChildren(): MenuComponent[] { return []; }
}
 
// ============================================
// Composite: Menu (contains items and submenus)
// ============================================
 
class Menu implements MenuComponent {
    private children: MenuComponent[] = [];
    
    constructor(private name: string) {}
    
    getName(): string { return this.name; }
    
    render(depth: number = 0): string {
        const indent = "  ".repeat(depth);
        const lines = [`${indent}📂 ${this.name}`];
        
        for (const child of this.children) {
            lines.push(child.render(depth + 1));
        }
        
        return lines.join("\n");
    }
    
    getShortcut(): string | null { return null; }
    isEnabled(): boolean { return true; }
    
    execute(): void {
        // Executing a menu opens it (in a real UI)
        console.log(`Opening menu: ${this.name}`);
    }
    
    add(component: MenuComponent): void {
        this.children.push(component);
    }
    
    remove(component: MenuComponent): void {
        const index = this.children.indexOf(component);
        if (index !== -1) {
            this.children.splice(index, 1);
        }
    }
    
    getChildren(): MenuComponent[] {
        return [...this.children];
    }
    
    // Find item by shortcut (recursive)
    findByShortcut(shortcut: string): MenuComponent | null {
        for (const child of this.children) {
            if (child.getShortcut() === shortcut) {
                return child;
            }
            // Recurse into submenus
            const childChildren = child.getChildren();
            if (childChildren.length > 0) {
                const found = (child as Menu).findByShortcut(shortcut);
                if (found) return found;
            }
        }
        return null;
    }
}
 
// ============================================
// Usage: Build an application menu bar
// ============================================
 
const menuBar = new Menu("Menu Bar");
 
// File menu
const fileMenu = new Menu("File");
fileMenu.add(new MenuItem("New", "Ctrl+N", () => console.log("New file")));
fileMenu.add(new MenuItem("Open...", "Ctrl+O", () => console.log("Open dialog")));
fileMenu.add(new MenuItem("Save", "Ctrl+S", () => console.log("Saving...")));
fileMenu.add(new MenuItem("Save As...", "Ctrl+Shift+S", () => console.log("Save as dialog")));
fileMenu.add(new MenuSeparator());
 
// Recent files submenu
const recentMenu = new Menu("Recent Files");
recentMenu.add(new MenuItem("document.txt", null, () => console.log("Open document.txt")));
recentMenu.add(new MenuItem("notes.md", null, () => console.log("Open notes.md")));
fileMenu.add(recentMenu);
 
fileMenu.add(new MenuSeparator());
fileMenu.add(new MenuItem("Exit", "Alt+F4", () => console.log("Exiting...")));
 
// Edit menu
const editMenu = new Menu("Edit");
editMenu.add(new MenuItem("Undo", "Ctrl+Z", () => console.log("Undo")));
editMenu.add(new MenuItem("Redo", "Ctrl+Y", () => console.log("Redo")));
editMenu.add(new MenuSeparator());
editMenu.add(new MenuItem("Cut", "Ctrl+X", () => console.log("Cut")));
editMenu.add(new MenuItem("Copy", "Ctrl+C", () => console.log("Copy")));
editMenu.add(new MenuItem("Paste", "Ctrl+V", () => console.log("Paste")));
 
menuBar.add(fileMenu);
menuBar.add(editMenu);
 
// Render entire menu structure
console.log(menuBar.render());
 
// Output:
// 📂 Menu Bar
//   📂 File
//     ▸ New  (Ctrl+N)
//     ▸ Open...  (Ctrl+O)
//     ▸ Save  (Ctrl+S)
//     ▸ Save As...  (Ctrl+Shift+S)
//     ────────────────────
//     📂 Recent Files
//       ▸ document.txt
//       ▸ notes.md
//     ────────────────────
//     ▸ Exit  (Alt+F4)
//   📂 Edit
//     ▸ Undo  (Ctrl+Z)
//     ...
 
// Handle keyboard shortcut
const item = menuBar.findByShortcut("Ctrl+S");
if (item && item.isEnabled()) {
    item.execute(); // Outputs: "Saving..."
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

interface Expression {
    evaluate(): number;
    toString(): string;
    simplify(): Expression;
    
    // For composite operations
    getOperands(): Expression[];
}
 
// ============================================
// Leaf: Number Literal
// ============================================
 
class NumberLiteral implements Expression {
    constructor(private value: number) {}
    
    evaluate(): number {
        return this.value;
    }
    
    toString(): string {
        return String(this.value);
    }
    
    simplify(): Expression {
        return this; // Already simplified
    }
    
    getOperands(): Expression[] {
        return []; // Literals have no operands
    }
}
 
// ============================================
// Composite: Binary Operations
// ============================================
 
class Addition implements Expression {
    constructor(
        private left: Expression,
        private right: Expression
    ) {}
    
    evaluate(): number {
        return this.left.evaluate() + this.right.evaluate();
    }
    
    toString(): string {
        return `(${this.left.toString()} + ${this.right.toString()})`;
    }
    
    simplify(): Expression {
        const leftSimp = this.left.simplify();
        const rightSimp = this.right.simplify();
        
        // If both are literals, compute result
        if (leftSimp instanceof NumberLiteral && rightSimp instanceof NumberLiteral) {
            return new NumberLiteral(leftSimp.evaluate() + rightSimp.evaluate());
        }
        
        // x + 0 = x
        if (rightSimp instanceof NumberLiteral && rightSimp.evaluate() === 0) {
            return leftSimp;
        }
        
        // 0 + x = x
        if (leftSimp instanceof NumberLiteral && leftSimp.evaluate() === 0) {
            return rightSimp;
        }
        
        return new Addition(leftSimp, rightSimp);
    }
    
    getOperands(): Expression[] {
        return [this.left, this.right];
    }
}
 
class Multiplication implements Expression {
    constructor(
        private left: Expression,
        private right: Expression
    ) {}
    
    evaluate(): number {
        return this.left.evaluate() * this.right.evaluate();
    }
    
    toString(): string {
        return `(${this.left.toString()} * ${this.right.toString()})`;
    }
    
    simplify(): Expression {
        const leftSimp = this.left.simplify();
        const rightSimp = this.right.simplify();
        
        // If both are literals, compute result
        if (leftSimp instanceof NumberLiteral && rightSimp instanceof NumberLiteral) {
            return new NumberLiteral(leftSimp.evaluate() * rightSimp.evaluate());
        }
        
        // x * 0 = 0
        if ((rightSimp instanceof NumberLiteral && rightSimp.evaluate() === 0) ||
            (leftSimp instanceof NumberLiteral && leftSimp.evaluate() === 0)) {
            return new NumberLiteral(0);
        }
        
        // x * 1 = x
        if (rightSimp instanceof NumberLiteral && rightSimp.evaluate() === 1) {
            return leftSimp;
        }
        
        // 1 * x = x
        if (leftSimp instanceof NumberLiteral && leftSimp.evaluate() === 1) {
            return rightSimp;
        }
        
        return new Multiplication(leftSimp, rightSimp);
    }
    
    getOperands(): Expression[] {
        return [this.left, this.right];
    }
}
 
class Division implements Expression {
    constructor(
        private left: Expression,
        private right: Expression
    ) {}
    
    evaluate(): number {
        const rightVal = this.right.evaluate();
        if (rightVal === 0) {
            throw new Error("Division by zero");
        }
        return this.left.evaluate() / rightVal;
    }
    
    toString(): string {
        return `(${this.left.toString()} / ${this.right.toString()})`;
    }
    
    simplify(): Expression {
        const leftSimp = this.left.simplify();
        const rightSimp = this.right.simplify();
        
        if (leftSimp instanceof NumberLiteral && rightSimp instanceof NumberLiteral) {
            return new NumberLiteral(leftSimp.evaluate() / rightSimp.evaluate());
        }
        
        // x / 1 = x
        if (rightSimp instanceof NumberLiteral && rightSimp.evaluate() === 1) {
            return leftSimp;
        }
        
        return new Division(leftSimp, rightSimp);
    }
    
    getOperands(): Expression[] {
        return [this.left, this.right];
    }
}
 
// ============================================
// Usage: Build and evaluate expressions
// ============================================
 
// Expression: (3 + 5) * (10 - 2)
const expr = new Multiplication(
    new Addition(new NumberLiteral(3), new NumberLiteral(5)),
    new Addition(new NumberLiteral(10), new Multiplication(new NumberLiteral(-1), new NumberLiteral(2)))
);
 
console.log(`Expression: ${expr.toString()}`);
console.log(`Result: ${expr.evaluate()}`);
 
// Simplification example
const withZero = new Addition(
    new Multiplication(new NumberLiteral(5), new NumberLiteral(0)),
    new NumberLiteral(7)
);
console.log(`Before simplify: ${withZero.toString()}`);
console.log(`After simplify: ${withZero.simplify().toString()}`); // Just "7"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

// Visitor pattern adds operations to composite without modifying it
 
interface FileSystemVisitor {
    visitFile(file: File): void;
    visitDirectory(dir: Directory): void;
}
 
interface FileSystemEntry {
    accept(visitor: FileSystemVisitor): void;
    // ... other methods
}
 
class File implements FileSystemEntry {
    accept(visitor: FileSystemVisitor): void {
        visitor.visitFile(this);
    }
}
 
class Directory implements FileSystemEntry {
    private children: FileSystemEntry[] = [];
    
    accept(visitor: FileSystemVisitor): void {
        visitor.visitDirectory(this);
        for (const child of this.children) {
            child.accept(visitor); // Recurse through tree
        }
    }
}
 
// Now add operation without touching File/Directory
class SizeCalculatorVisitor implements FileSystemVisitor {
    totalSize = 0;
    
    visitFile(file: File): void {
        this.totalSize += file.getSize();
    }
    
    visitDirectory(dir: Directory): void {
        // Directories don't have inherent size; children are visited automatically
    }
}
 
// Usage
const root = new Directory("root");
// ... add files and folders ...
 
const sizeVisitor = new SizeCalculatorVisitor();
root.accept(sizeVisitor);
console.log(`Total size: ${sizeVisitor.totalSize}`);