Skip to content

Add parametric functionality #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
brookshsmith wants to merge 13 commits into
base: master
Choose a base branch
from
Open

Add parametric functionality #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7b11e7d
MVP of parametric SVG system - vibe coded
brookshsmith Jul 22, 2025
8b95845
Fix syntax error
brookshsmith Jul 23, 2025
724cd56
Add Parametric Clone Grids, for repeating elements
brookshsmith Jul 23, 2025
3458d21
Add equation parameter type
brookshsmith Jul 23, 2025
e63f58f
Make the output compatible with our existing custom diagram widget!
brookshsmith Jul 23, 2025
cadbc55
Update package-lock.json
brookshsmith Jul 23, 2025
f4aee56
Fix parameters list being empty after refresh
brookshsmith Jul 23, 2025
168b76f
Change parametric clone inputs to objects, improve behaviour
brookshsmith Jul 24, 2025
93a5cba
Add ability to create a new parameter directly from autocomplete menu
brookshsmith Jul 24, 2025
65b8e8d
Fix bug where keyboard actions lost focus
brookshsmith Jul 24, 2025
59f6b2c
Block literal 'width' and 'height' parameter names.
brookshsmith Jul 24, 2025
d5cc625
Add ability to save/restore our parameters (in enhanced SVG format)
brookshsmith Jul 24, 2025
2252b32
Bug - clear parameters when creating a new doc
brookshsmith Jul 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3,502 changes: 2,155 additions & 1,347 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

193 changes: 193 additions & 0 deletions src/css/property-validation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
/* Property Input Validation Styles */

/* Valid parameter reference (e.g., @width) */
.draginput .param-reference {
background-color: #e7f3ff !important;
border-color: #007cba !important;
color: #005a8b !important;
font-weight: 500;
font-size: 10px !important;
/* Maintain proper draginput layout - preserve original padding */
padding: 30px 0 16px !important;
text-align: center !important;
/* Ensure text doesn't overflow into label area */
overflow: hidden !important;
text-overflow: ellipsis !important;
/* Preserve draginput positioning */
position: relative !important;
z-index: 2 !important;
width: 100% !important;
height: 24px !important;
}

/* Make labels visible on parameter reference fields - use class-based approach */
.draginput.has-parameter span,
.draginput.has-parameter span.icon_label,
.draginput .param-reference + span,
.draginput .param-reference + span.icon_label,
.draginput .param-reference ~ span,
.draginput .param-reference ~ span.icon_label {
color: #333 !important;
font-weight: 600 !important;
/* Ensure label stays in correct position */
position: absolute !important;
top: 5px !important;
left: 5px !important;
z-index: 10 !important;
white-space: nowrap !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 12px !important;
background: none !important;
border: none !important;
pointer-events: none !important;
}

/* Valid value (number or valid parameter reference) */
.draginput .param-valid {
border-color: #28a745 !important;
}

/* Invalid value */
.draginput .param-invalid {
background-color: #fff5f5 !important;
border-color: #dc3545 !important;
color: #dc3545 !important;
font-size: 11px !important;
/* Maintain proper draginput layout */
padding: 30px 0 16px !important;
text-align: center !important;
position: relative !important;
z-index: 2 !important;
width: 100% !important;
height: 24px !important;
}

/* Make labels visible on invalid fields too */
.draginput .param-invalid + span,
.draginput .param-invalid + span.icon_label,
.draginput .param-invalid ~ span,
.draginput .param-invalid ~ span.icon_label {
color: #333 !important;
font-weight: 600 !important;
/* Ensure label stays in correct position */
position: absolute !important;
top: 5px !important;
left: 5px !important;
z-index: 10 !important;
white-space: nowrap !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 12px !important;
background: none !important;
border: none !important;
pointer-events: none !important;
}

/* Parameter autocomplete suggestions */
datalist option {
background: #f8f9fa;
color: #007cba;
font-family: monospace;
}

/* Custom parameter autocomplete dropdown */
.parameter-autocomplete-dropdown {
position: absolute;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
max-height: 200px;
overflow-y: auto;
z-index: 1000;
min-width: 150px;
font-family: monospace;
font-size: 12px;
display: none;
}

/* Force hide any lingering dropdown elements */
.parameter-autocomplete-dropdown[style*="display: none"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}

#parameter-autocomplete-dropdown[style*="display: none"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}

.parameter-autocomplete-item {
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
color: #007cba;
background: #f8f9fa;
}

.parameter-autocomplete-item:hover,
.parameter-autocomplete-item.highlighted {
background: #007cba;
color: white;
}

.parameter-autocomplete-item:last-child {
border-bottom: none;
}

.parameter-autocomplete-create {
padding: 8px 12px;
cursor: pointer;
color: #28a745;
background: #f8fff9;
border-top: 1px solid #ddd;
font-style: italic;
}

.parameter-autocomplete-create:hover,
.parameter-autocomplete-create.highlighted {
background: #28a745;
color: white;
}

/* Focus states for parameter inputs */
input.param-reference:focus {
box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.25);
}

input.param-invalid:focus {
box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}

/* Placeholder styling for parameter hints */
input[data-attr]::placeholder {
color: #666;
font-style: italic;
}

/* Tooltip for invalid parameter references */
input.param-invalid {
position: relative;
}

input.param-invalid:hover::after {
content: "Invalid parameter reference or number format";
position: absolute;
top: 100%;
left: 0;
background: #dc3545;
color: white;
padding: 4px 8px;
border-radius: 3px;
font-size: 12px;
white-space: nowrap;
z-index: 1000;
margin-top: 2px;
}
14 changes: 11 additions & 3 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@
<link rel="stylesheet" href="css/panel.css" type="text/css"/>
<link rel="stylesheet" href="css/align_buttons.css" type="text/css"/>
<link rel="stylesheet" href="css/text.css" type="text/css"/>
<link rel="stylesheet" href="css/sponsors.css" type="text/css"/>
<link rel="stylesheet" href="css/property-validation.css" type="text/css"/>
<link rel="stylesheet" href="css/sponsors.css" type="text/css"/>
<link rel="stylesheet" href="css/zoom-dropdown.css" type="text/css"/>
<link rel="stylesheet" href="css/loading.css" type="text/css"/>
<!-- endbuild -->
Expand Down Expand Up @@ -87,6 +88,7 @@
</div>
<div data-action="save" id="tool_save" class="menu_item">Save Image... <span class="shortcut">⌘S</span></div>
<div data-action="export" id="tool_export" class="menu_item">Export as PNG</div>
<div data-action="exportJS" id="tool_export_js" class="menu_item">Save JS</div>
</div>
</div>

Expand All @@ -96,6 +98,8 @@
<div data-action="undo" class="menu_item" id="tool_undo">Undo <span class="shortcut">⌘Z</span></div>
<div data-action="redo" class="menu_item" id="tool_redo">Redo <span class="shortcut">⌘Y</span></div>
<div class="separator"></div>
<div data-action="parameters" class="menu_item" id="tool_parameters">Parameters...</div>
<div class="separator"></div>
<div data-action="cutSelected" class="menu_item action_selected disabled" id="tool_cut">Cut <span class="shortcut">⌘X</span></div>
<div data-action="copySelected" class="menu_item action_selected disabled" id="tool_copy">Copy <span class="shortcut">⌘C</span></div>
<div data-action="pasteSelected" class="menu_item action_selected disabled" id="tool_paste">Paste <span class="shortcut">⌘V</span></div>
Expand All @@ -114,6 +118,7 @@
<div class="separator"></div>
<div class="menu_item action_multi_selected disabled" id="tool_group">Group Elements <span class="shortcut">⌘G</span></div>
<div class="menu_item action_group_selected disabled" id="tool_ungroup">Ungroup Elements <span class="shortcut">⌘⇧G</span></div>
<div class="menu_item action_selected disabled" id="tool_parametric_clone">Define Parametric Clone...</div>
<div class="separator"></div>
<div class="menu_item action_path_convert_selected disabled" id="tool_topath">Convert to Path</div>
<div class="menu_item action_path_selected disabled" id="tool_reorient">Reorient path</div>
Expand Down Expand Up @@ -152,12 +157,12 @@ <h4>Canvas</h4>


<label data-title="Change canvas width" class="draginput">
<input id="canvas_width" type="text" pattern="[0-9]*" value="800" />
<input id="canvas_width" type="text" pattern="([0-9]+(\.[0-9]+)?|@[a-zA-Z_][a-zA-Z0-9_]*)" value="800" />
<span class="icon_label">Width</span>
</label>

<label data-title="Change canvas height" class="draginput">
<input id="canvas_height" type="text" pattern="[0-9]*" value="600" />
<input id="canvas_height" type="text" pattern="([0-9]+(\.[0-9]+)?|@[a-zA-Z_][a-zA-Z0-9_]*)" value="600" />
<span class="icon_label">Height</span>
</label>

Expand Down Expand Up @@ -736,6 +741,7 @@ <h4>Stroke</h4>
<li class="separator"><a href="#delete">Delete<span class="shortcut">⌫</span></a></li>
<li class="separator"><a href="#group">Group<span class="shortcut">⌘G</span></a></li>
<li><a href="#ungroup">Ungroup<span class="shortcut">⌘⇧G</span></a></li>
<li><a href="#parametric_clone">Define Parametric Clone...</a></li>
<li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">⌘⇧↑</span></a></li>
<li><a href="#move_up">Bring Forward<span class="shortcut">⌘↑</span></a></li>
<li><a href="#move_down">Send Backward<span class="shortcut">⌘↓</span></a></li>
Expand Down Expand Up @@ -802,6 +808,8 @@ <h4>Stroke</h4>
<script type="text/javascript" src="js/lib/taphold.js"></script>
<script type="text/javascript" src="js/lib/filesaver.js"></script>
<script type="text/javascript" src="js/paste.js"></script>
<script type="text/javascript" src="js/Parameters.js"></script>
<script type="text/javascript" src="js/PropertyValidation.js"></script>
<script type="text/javascript" src="js/modals.js"></script>
<script type="text/javascript" src="js/start.js"></script>
<!-- endbuild -->
Expand Down
Loading