Class: SchemaErd::Page

Inherits:
Object
  • Object
show all
Defined in:
lib/schema_erd.rb

Constant Summary collapse

RAILS_INTERNAL_PREFIXES = 
%w[active_storage_ sessions ar_internal_metadata schema_migrations].freeze

Instance Method Summary collapse

Constructor Details

#initialize(schema:, schema_path:) ⇒ Page

Returns a new instance of Page.



188
189
190
191
 
# File 'lib/schema_erd.rb', line 188

def initialize(schema:, schema_path:)
  @schema = schema
  @schema_path = schema_path
end

Instance Method Details

#render ⇒ Object 



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
 
# File 'lib/schema_erd.rb', line 193

def render
  <<~HTML
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Rails database ERD</title>
        <style>#{styles}</style>
      </head>
      <body class="hide-attributes">
        <aside class="controls-card">
          <header>
            <div>
              <p class="eyebrow">Development tool</p>
              <h1>Database ERD</h1>
            </div>
            <a class="refresh" href="" title="Reload schema" aria-label="Reload schema">↻</a>
          </header>
          <p class="subtitle" title="#{escape(schema_path.to_s)}">Schema #{escape(schema.version || "unknown")}</p>
          <section class="toolbar" aria-label="Diagram controls">
            <label class="search">
              <span>Search</span>
              <input id="search" type="search" placeholder="Tables or columns…" autofocus>
            </label>
            <div class="toggle-grid">
              <label><input id="relationships" type="checkbox" checked> Relationships</label>
              <label><input id="internals" type="checkbox" checked> Rails internals</label>
              <label><input id="attributes" type="checkbox"> Attributes</label>
              <label><input id="details" type="checkbox" checked> Constraints</label>
            </div>
            <div class="control-row">
              <div class="zoom-controls" aria-label="Zoom controls">
                <button id="zoom-out" type="button" title="Zoom out (−)" aria-label="Zoom out">−</button>
                <button id="zoom-reset" type="button" title="Reset zoom (0)">100%</button>
                <button id="zoom-in" type="button" title="Zoom in (+)" aria-label="Zoom in">+</button>
                <button id="zoom-fit" type="button" title="Fit the complete diagram (F)">Fit</button>
              </div>
              <button id="reset-layout" class="secondary-control" type="button">Reset</button>
            </div>
            <button id="clear-focus" class="clear-focus" type="button" hidden>Show all tables</button>
            <div class="stats"><strong id="visible-count">#{schema.tables.size}</strong> tables · #{schema.relationships.size} foreign keys</div>
          </section>
          <details class="help">
            <summary>Canvas controls</summary>
            <p>Drag the canvas to pan and table headers to move them. Click a header to arrange direct relationships. Use Ctrl/⌘ + wheel to zoom.</p>
          </details>
        </aside>
        <main id="viewport">
          <div id="surface">
            <div id="canvas">
              <svg id="lines" aria-hidden="true">
                <defs>
                  <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" markerUnits="userSpaceOnUse" orient="auto-start-reverse">
                    <path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke"></path>
                  </marker>
                </defs>
              </svg>
              <div id="tables">#{table_cards}</div>
            </div>
          </div>
        </main>
        <script>#{javascript}</script>
      </body>
    </html>
  HTML
end