ychart/test-expand-collapse.html at main · mieweb/ychart · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YChart Editor - Expand/Collapse Feature Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #app {
            width: 100%;
            height: 100%;
        }

        .instructions {
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 0.95);
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 1000;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            max-width: 600px;
        }

        .instructions h3 {
            color: #667eea;
            margin-bottom: 10px;
            font-size: 16px;
        }

        .instructions ul {
            font-size: 13px;
            line-height: 1.6;
            color: #333;
            list-style-position: inside;
        }

        .instructions li {
            margin-bottom: 5px;
        }

        .instructions strong {
            color: #667eea;
        }
    </style>
</head>
<body>
    <div class="instructions">
        <h3>🎯 Expand/Collapse & Column Adjustment Features</h3>
        <ul>
            <li><strong>Expand All:</strong> Click the expand all button (⤢) to expand all nodes</li>
            <li><strong>Collapse All:</strong> Click the collapse all button (⤡) to collapse all nodes</li>
            <li><strong>Multi-Select Mode:</strong> Click the expand selected button (⊞) to enter selection mode</li>
            <li><strong>Select Nodes:</strong> In selection mode, click multiple nodes (blue outline)</li>
            <li><strong>Expand Selected:</strong> Press <strong>E</strong> key to expand selected nodes</li>
            <li><strong>Collapse Selected:</strong> Press <strong>C</strong> key to collapse selected nodes</li>
            <li><strong>Column Adjustment:</strong> Click the column button (⫴) to enter adjustment mode</li>
            <li><strong>Adjust Layout:</strong> Click a parent node to adjust its children's column layout (2-N columns)</li>
        </ul>
    </div>
    <div id="app"></div>

    <script type="module">
        import { YChartEditor } from './dist/ychart-editor.js';

        const yamlContent = `---
layout:
  nodeHeight: 120
  nodeWidth: 250
  childrenMargin: 50
  compactMarginBetween: 30
  compactMarginPair: 50
  neighbourMargin: 30
cardTemplate: |
  <div style="padding:15px;font-family:Arial,sans-serif;">
    <div style="font-weight:bold;font-size:16px;margin-bottom:8px;color:#667eea;">
      $name$
    </div>
    <div style="color:#666;font-size:13px;margin-bottom:6px;">
      $title$
    </div>
    <div style="color:#999;font-size:12px;">
      $department$
    </div>
  </div>
---
- id: "1"
  name: "Sarah Chen"
  title: "CEO & Founder"
  department: "Executive"
  _children:
    - id: "2"
      name: "Michael Park"
      title: "CTO"
      department: "Technology"
      _children:
        - id: "5"
          name: "Alex Kumar"
          title: "Lead Engineer"
          department: "Engineering"
          _children:
            - id: "8"
              name: "Emma Wilson"
              title: "Senior Developer"
              department: "Engineering"
            - id: "9"
              name: "James Lee"
              title: "Senior Developer"
              department: "Engineering"
        - id: "6"
          name: "Sofia Rodriguez"
          title: "DevOps Manager"
          department: "Operations"
          _children:
            - id: "10"
              name: "Ryan Martinez"
              title: "DevOps Engineer"
              department: "Operations"
    - id: "3"
      name: "Jennifer Wu"
      title: "COO"
      department: "Operations"
      _children:
        - id: "7"
          name: "David Thompson"
          title: "Operations Manager"
          department: "Operations"
          _children:
            - id: "11"
              name: "Lisa Anderson"
              title: "Operations Specialist"
              department: "Operations"
            - id: "12"
              name: "Tom Brown"
              title: "Operations Specialist"
              department: "Operations"
    - id: "4"
      name: "Robert Johnson"
      title: "CFO"
      department: "Finance"
      _children:
        - id: "13"
          name: "Maria Garcia"
          title: "Accounting Manager"
          department: "Finance"
          _children:
            - id: "14"
              name: "Chris Davis"
              title: "Senior Accountant"
              department: "Finance"
        - id: "15"
          name: "Patricia Miller"
          title: "Finance Analyst"
          department: "Finance"
`;

        const editor = new YChartEditor('#app', {
            initialYaml: yamlContent,
            toolbarPosition: 'topcenter',
            toolbarOrientation: 'horizontal',
            bgPatternStyle: 'dotted'
        });

        console.log('YChart Editor initialized with expand/collapse features');
        console.log('Try the new buttons: Expand All, Collapse All, and Expand Selected');
    </script>
</body>
</html>