grabowski
19f4c83ae8
Deploy web Studio / deploy (push) Successful in 1m27s
Selection: S.sel stays the object picked last; S.selIds holds everything selected. - In the object list, Ctrl+click adds or removes an object and Shift+click selects a range. - On the map, Ctrl/Shift+click toggles an object and Shift+drag draws a box that selects what lies wholly inside it (locked and hidden objects are left out). - Ctrl+A selects everything that is not locked; Esc selects nothing. - Clicking a wall or fence a second time selects every piece of the same type joined to it; another click goes back to that one piece. - Dragging one selected object moves them all, together with the windows and doors on them, as one undo step. Arrow keys, R (turns the group about its middle), Ctrl+D, Delete, Lock and Hide all work on the whole selection. - When all selected objects share a type, the property form edits them all; fields where they differ show "mixed". - The agent's system prompt lists the selected objects. The viewer outlines several objects with selectObj([ids]) and passes the click event to onPick. A batch op now answers `ids`, one per operation, so the copies from a group duplicate get selected. Pond (Nature): natural, round or square, with a stone or grass edge, fish, lily pads, spreading ripples and reed clumps. The fish come from a new Swim primitive (script: s.swim). One matrix maps the object's frame to the screen. Each fish turns round its ellipse with a CSS rotation, so off-screen pausing and reduced motion apply as for the other animations. The house demo gets a koi pond in the back garden. Tests: ponds in every shape and rotation have the right number of fish, no NaN and no depth-sort cycles, and stay inside their rectangle. check_studio covers list and map multi-select, a group drag undone in one step, joined-fence selection, a mixed-value form applied to all, box select, delete and undo, Ctrl+A, Esc, and a new pond's fish.
169 lines
11 KiB
CSS
169 lines
11 KiB
CSS
/* isokit-view.css: structure of the isokit viewer (stage, toolbar, tooltip,
|
|
faces, tags, selection, animation, full screen). Colours come from the
|
|
theme (palette variables --iso-*); this file holds no scene colours.
|
|
Ported from the CNX Vinyl / CNX Scuba / Mooban views. */
|
|
|
|
.iso-wrap { position: relative; color: var(--iso-tipfg); }
|
|
|
|
/* stage, toolbar, tooltip, note */
|
|
.iso-stage {
|
|
position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 340px; max-height: 86vh;
|
|
overflow: hidden; border-radius: 8px; border: 1px solid var(--iso-btnline);
|
|
background:
|
|
radial-gradient(1px 1px at 12% 18%, var(--iso-star) 50%, transparent 51%),
|
|
radial-gradient(1px 1px at 33% 9%, var(--iso-star) 50%, transparent 51%),
|
|
radial-gradient(1px 1px at 58% 14%, var(--iso-star) 50%, transparent 51%),
|
|
radial-gradient(1.2px 1.2px at 81% 7%, var(--iso-star) 50%, transparent 51%),
|
|
radial-gradient(1px 1px at 91% 22%, var(--iso-star) 50%, transparent 51%),
|
|
linear-gradient(180deg, var(--iso-sky1), var(--iso-sky2));
|
|
}
|
|
.iso-svg { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; outline: none; }
|
|
.iso-dragging .iso-svg { cursor: grabbing; }
|
|
.iso-svg:focus-visible { outline: 2px solid var(--iso-accent); outline-offset: -2px; }
|
|
.iso-bar {
|
|
position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
|
|
pointer-events: none; font: 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
.iso-bar > *, .iso-bar button { pointer-events: auto; }
|
|
.iso-bar button, .iso-compass {
|
|
background: var(--iso-btn); color: var(--iso-btnfg); border: 1px solid var(--iso-btnline); border-radius: 5px;
|
|
padding: 5px 10px; font: inherit; cursor: pointer; min-width: 32px; min-height: 30px;
|
|
}
|
|
.iso-bar button:hover { border-color: var(--iso-accent); }
|
|
.iso-bar button:focus-visible { outline: 2px solid var(--iso-accent); outline-offset: 1px; }
|
|
.iso-seg { display: inline-flex; }
|
|
.iso-seg button { border-radius: 0; }
|
|
.iso-seg button:first-child { border-radius: 5px 0 0 5px; }
|
|
.iso-seg button:last-child { border-radius: 0 5px 5px 0; }
|
|
.iso-seg button + button { border-left: 0; }
|
|
.iso-seg button[aria-pressed=true] { background: var(--iso-btnon); border-color: var(--iso-accent); color: var(--iso-btnfg); font-weight: 600; }
|
|
.iso-compass { display: inline-flex; align-items: center; gap: 2px; padding: 3px 7px; cursor: default; }
|
|
.iso-compass svg { width: 20px; height: 20px; }
|
|
.iso-compass path { fill: var(--iso-accent); }
|
|
.iso-compass b { font-size: 11px; }
|
|
.iso-tip {
|
|
position: absolute; z-index: 3; max-width: min(330px, calc(100% - 12px)); padding: 8px 10px; pointer-events: none;
|
|
background: var(--iso-tipbg); color: var(--iso-tipfg); border: 1px solid var(--iso-tipline); border-radius: 6px;
|
|
font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
|
|
}
|
|
.iso-tip b { display: block; font-weight: 600; margin-bottom: 2px; }
|
|
.iso-tip span { display: block; color: var(--iso-tipmute); font-size: 12px; }
|
|
.iso-tip table { margin-top: 4px; border-collapse: collapse; font-size: 12px; }
|
|
.iso-tip th { text-align: left; font-weight: 400; color: var(--iso-tipmute); padding: 1px 10px 1px 0; }
|
|
.iso-tip td { text-align: right; font-variant-numeric: tabular-nums; }
|
|
.iso-tip[hidden], .iso-wrap [hidden] { display: none !important; }
|
|
.iso-note { margin: 6px 2px 0; font: 12px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--iso-mute); }
|
|
.iso-err {
|
|
position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; padding: 8px 10px; border-radius: 6px;
|
|
background: var(--iso-warnbg); color: var(--iso-warnfg); border: 1px solid var(--iso-warnline);
|
|
font: 13px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace;
|
|
}
|
|
.iso-err b { display: block; font: 600 13px/1.4 system-ui, sans-serif; }
|
|
.iso-err small { display: block; opacity: .8; margin-top: 3px; }
|
|
.iso-loading .iso-svg { opacity: .92; }
|
|
|
|
/* faces: material colour --b mixed towards the shade per face direction */
|
|
.iso-svg .iso-t { fill: var(--b, #888); }
|
|
.iso-svg .iso-l { fill: color-mix(in srgb, var(--b, #888) var(--iso-kl), var(--iso-shade)); }
|
|
.iso-svg .iso-c { fill: color-mix(in srgb, var(--b, #888) var(--iso-kc), var(--iso-shade)); }
|
|
.iso-svg .iso-r { fill: color-mix(in srgb, var(--b, #888) var(--iso-kr), var(--iso-shade)); }
|
|
.iso-sprites path, .iso-sprites ellipse, .iso-sprites circle { stroke: var(--iso-edge); stroke-width: var(--iso-edgew); stroke-linejoin: round; }
|
|
.iso-ground path, .iso-ground ellipse { stroke: none; }
|
|
@supports not (color: color-mix(in srgb, red 50%, blue)) {
|
|
.iso-svg .iso-l, .iso-svg .iso-c, .iso-svg .iso-r { fill: var(--b, #888); }
|
|
.iso-svg .iso-r { fill-opacity: .82; }
|
|
}
|
|
|
|
/* ghosting (levels above a building) */
|
|
.iso-svg .iso-dim { opacity: .4; }
|
|
html[data-theme=light] .iso-svg .iso-dim { opacity: .5; }
|
|
.iso-svg .iso-dim .iso-a { animation: none !important; }
|
|
|
|
/* tags (counter-scaled by --iso-k so they keep their screen size) */
|
|
.iso-tag path { fill: var(--iso-tagbg); stroke: var(--iso-tagline); stroke-width: 1; }
|
|
.iso-tag text { fill: var(--iso-tagfg); font: 600 10.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-anchor: middle; }
|
|
.iso-signtag path { fill: var(--iso-signbg); stroke: var(--iso-signline); }
|
|
.iso-signtag text { fill: var(--iso-signfg); }
|
|
.iso-warntag path { fill: var(--iso-warnbg); stroke: var(--iso-warnline); }
|
|
.iso-warntag text { fill: var(--iso-warnfg); }
|
|
.iso-tag { cursor: default; }
|
|
.iso-svg .iso-hide { display: none; }
|
|
.iso-svg .iso-ghost { opacity: .38; }
|
|
|
|
/* hover and selection; .iso-osel marks the object selected in the Studio */
|
|
.iso-svg .iso-hov > path, .iso-svg .iso-hov > ellipse, .iso-svg path.iso-hov { stroke: var(--iso-hov); stroke-width: .8; }
|
|
.iso-svg .iso-sel > path, .iso-svg .iso-sel > ellipse, .iso-svg .iso-sel > g > path, .iso-svg path.iso-sel { stroke: var(--iso-sel); stroke-width: 1.1; }
|
|
.iso-svg .iso-osel path, .iso-svg .iso-osel ellipse, .iso-svg .iso-osel circle { stroke: var(--iso-sel); stroke-width: 1.2; }
|
|
.iso-svg .iso-moving { opacity: .75; }
|
|
|
|
/* animation: CSS only; paused off-screen (iso-off), when stopped (iso-still) and for reduced motion */
|
|
.iso-svg .iso-fan { transform-box: fill-box; transform-origin: center; animation: iso-spin 1.1s linear infinite; }
|
|
.iso-svg .iso-puff, .iso-svg .iso-puff2, .iso-svg .iso-smoke { transform-box: fill-box; transform-origin: center; animation: iso-puff 3.2s ease-out infinite; opacity: 0; pointer-events: none; stroke: none; }
|
|
.iso-svg .iso-puff, .iso-svg .iso-puff2 { fill: var(--iso-steam); }
|
|
.iso-svg .iso-smoke { fill: var(--iso-smoke); }
|
|
.iso-svg .iso-glint { animation: iso-glint 7s ease-in-out infinite; display: none; }
|
|
html[data-theme=light] .iso-svg .iso-glint { display: inline; }
|
|
.iso-svg .iso-disc { animation: iso-move 16s linear infinite; }
|
|
.iso-svg .iso-walk { animation: iso-shuttle 70s ease-in-out infinite; }
|
|
.iso-svg .iso-shuttle { animation: iso-shuttle 48s ease-in-out infinite; }
|
|
.iso-svg .iso-drive { animation: iso-drive 16s linear infinite; }
|
|
.iso-svg .iso-ledr, .iso-svg .iso-ledo { animation: iso-blink 2.4s ease-in-out infinite; }
|
|
/* fish: each turns round its pond's middle (the box is centred there), at its own speed */
|
|
.iso-svg .iso-swim { transform-box: fill-box; transform-origin: center; animation: iso-spin 20s linear infinite; }
|
|
.iso-svg .iso-rip { transform-box: fill-box; transform-origin: center; animation: iso-rip 5.1s ease-out infinite; }
|
|
.iso-svg .iso-park { display: none; }
|
|
.iso-off .iso-a, .iso-still .iso-a, .iso-off .iso-drive, .iso-still .iso-drive { animation-play-state: paused !important; }
|
|
.iso-still .iso-park { display: inline; }
|
|
@keyframes iso-spin { to { transform: rotate(360deg); } }
|
|
@keyframes iso-puff {
|
|
0% { transform: translate(0, 0) scale(.35); opacity: 0; }
|
|
12% { opacity: .75; }
|
|
100% { transform: translate(5px, -28px) scale(2); opacity: 0; }
|
|
}
|
|
@keyframes iso-rip { 0% { transform: scale(.2); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
|
|
@keyframes iso-glint { 0%, 84%, 100% { opacity: 0; } 91% { opacity: .9; } }
|
|
@keyframes iso-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
|
|
@keyframes iso-move { from { transform: translate(0, 0); } to { transform: translate(var(--dx), var(--dy)); } }
|
|
@keyframes iso-shuttle {
|
|
0%, 8% { transform: translate(0, 0); }
|
|
46%, 56% { transform: translate(var(--dx), var(--dy)); }
|
|
94%, 100% { transform: translate(0, 0); }
|
|
}
|
|
@keyframes iso-drive {
|
|
0% { transform: translate(0, 0); opacity: 0; }
|
|
5% { opacity: 1; }
|
|
92% { transform: translate(var(--dx), var(--dy)); opacity: 1; }
|
|
96%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.iso-svg .iso-a { animation: none !important; }
|
|
.iso-svg .iso-puff, .iso-svg .iso-puff2, .iso-svg .iso-smoke, .iso-svg .iso-disc, .iso-svg .iso-glint, .iso-svg .iso-rip { display: none; }
|
|
.iso-svg .iso-park { display: inline; }
|
|
}
|
|
@media (max-width: 640px) {
|
|
.iso-stage { aspect-ratio: 1 / 1; min-height: 320px; }
|
|
.iso-bar { gap: 3px; top: 6px; left: 6px; right: 6px; }
|
|
.iso-bar button { padding: 4px 6px; min-width: 26px; min-height: 30px; }
|
|
.iso-compass { padding: 3px; min-height: 30px; }
|
|
.iso-compass b { display: none; }
|
|
}
|
|
@media (max-width: 370px) { .iso-compass { display: none; } }
|
|
|
|
/* full screen: native (:fullscreen) or pinned over the page where the Fullscreen API is missing (iPhone) */
|
|
.iso-fs { display: flex !important; flex-direction: column; box-sizing: border-box; overflow: hidden; }
|
|
.iso-fs-fake { position: fixed !important; inset: 0; z-index: 2147483000; margin: 0 !important; border-radius: 0 !important;
|
|
width: auto !important; height: auto !important; max-width: none !important; }
|
|
.iso-wrap.iso-fs { background: var(--iso-fsbg, #0e1117); padding: 0; }
|
|
html[data-theme=light] .iso-wrap.iso-fs { --iso-fsbg: #eef3f9; }
|
|
html.iso-fs-lock, html.iso-fs-lock body { overflow: hidden !important; }
|
|
.iso-fs .iso-fs-grow, .iso-fs .iso-wrap, .iso-wrap.iso-fs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; }
|
|
.iso-fs .iso-stage { flex: 1 1 auto; aspect-ratio: auto; max-height: none; min-height: 0; height: auto; }
|
|
.iso-fs .iso-note { display: none; }
|
|
.iso-fullbtn svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
|
|
.iso-fullbtn .iso-fs-out, .iso-fs .iso-fullbtn .iso-fs-in { display: none; }
|
|
.iso-fs .iso-fullbtn .iso-fs-out { display: inline; }
|
|
|
|
/* fill a sized container instead of the 16:10 card (Studio) */
|
|
.iso-fill, .iso-fill > .iso-wrap { height: 100%; display: flex; flex-direction: column; }
|
|
.iso-fill .iso-stage { flex: 1 1 auto; aspect-ratio: auto; max-height: none; min-height: 0; border-radius: 0; border: 0; }
|