feat: add path_geometry data
All checks were successful
Deploy to GitHub Pages / build_site (push) Successful in 2m21s
All checks were successful
Deploy to GitHub Pages / build_site (push) Successful in 2m21s
This commit is contained in:
parent
1df62e25e7
commit
4db1cc7d4f
14
Cargo.lock
generated
14
Cargo.lock
generated
@ -367,6 +367,20 @@ dependencies = [
|
|||||||
"unicode-ident",
|
"unicode-ident",
|
||||||
]
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "template"
|
||||||
|
version = "0.1.0"
|
||||||
|
dependencies = [
|
||||||
|
"console_error_panic_hook",
|
||||||
|
"macros",
|
||||||
|
"serde",
|
||||||
|
"serde-wasm-bindgen",
|
||||||
|
"utils",
|
||||||
|
"wasm-bindgen",
|
||||||
|
"wasm-bindgen-test",
|
||||||
|
"web-sys",
|
||||||
|
]
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "types"
|
name = "types"
|
||||||
version = "0.1.0"
|
version = "0.1.0"
|
||||||
|
|||||||
@ -7,18 +7,12 @@
|
|||||||
"dev": "vite dev",
|
"dev": "vite dev",
|
||||||
"build": "svelte-kit sync && vite build",
|
"build": "svelte-kit sync && vite build",
|
||||||
"test": "vitest",
|
"test": "vitest",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview"
|
||||||
"tauri:dev": "tauri dev",
|
|
||||||
"story:dev": "histoire dev",
|
|
||||||
"story:build": "histoire build",
|
|
||||||
"story:preview": "histoire preview"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nodes/ui": "link:../packages/ui",
|
"@nodes/ui": "link:../packages/ui",
|
||||||
"@nodes/utils": "link:../packages/utils",
|
"@nodes/utils": "link:../packages/utils",
|
||||||
"@sveltejs/kit": "^2.5.6",
|
"@sveltejs/kit": "^2.5.7",
|
||||||
"@tauri-apps/api": "2.0.0-beta.2",
|
|
||||||
"@tauri-apps/plugin-shell": "2.0.0-beta.2",
|
|
||||||
"@threlte/core": "^7.3.0",
|
"@threlte/core": "^7.3.0",
|
||||||
"@threlte/extras": "^8.11.2",
|
"@threlte/extras": "^8.11.2",
|
||||||
"@threlte/flex": "^1.0.2",
|
"@threlte/flex": "^1.0.2",
|
||||||
@ -29,16 +23,13 @@
|
|||||||
"three": "^0.163.0"
|
"three": "^0.163.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@histoire/plugin-svelte": "^0.17.17",
|
|
||||||
"@iconify-json/tabler": "^1.1.110",
|
"@iconify-json/tabler": "^1.1.110",
|
||||||
"@nodes/types": "link:../packages/types",
|
"@nodes/types": "link:../packages/types",
|
||||||
"@sveltejs/adapter-static": "^3.0.1",
|
"@sveltejs/adapter-static": "^3.0.1",
|
||||||
"@sveltejs/vite-plugin-svelte": "^3.1.0",
|
"@sveltejs/vite-plugin-svelte": "^3.1.0",
|
||||||
"@tauri-apps/cli": "2.0.0-beta.3",
|
|
||||||
"@tsconfig/svelte": "^5.0.4",
|
"@tsconfig/svelte": "^5.0.4",
|
||||||
"@unocss/preset-icons": "^0.59.4",
|
"@unocss/preset-icons": "^0.59.4",
|
||||||
"@zerodevx/svelte-json-view": "^1.0.9",
|
"@zerodevx/svelte-json-view": "^1.0.9",
|
||||||
"histoire": "^0.17.17",
|
|
||||||
"internal-ip": "^8.0.0",
|
"internal-ip": "^8.0.0",
|
||||||
"svelte": "^4.2.15",
|
"svelte": "^4.2.15",
|
||||||
"svelte-check": "^3.6.9",
|
"svelte-check": "^3.6.9",
|
||||||
@ -46,10 +37,10 @@
|
|||||||
"tslib": "^2.6.2",
|
"tslib": "^2.6.2",
|
||||||
"typescript": "^5.4.5",
|
"typescript": "^5.4.5",
|
||||||
"unocss": "^0.59.4",
|
"unocss": "^0.59.4",
|
||||||
"vite": "^5.2.9",
|
"vite": "^5.2.10",
|
||||||
"vite-plugin-comlink": "^4.0.3",
|
"vite-plugin-comlink": "^4.0.3",
|
||||||
"vite-plugin-glsl": "^1.3.0",
|
"vite-plugin-glsl": "^1.3.0",
|
||||||
"vite-plugin-wasm": "^3.3.0",
|
"vite-plugin-wasm": "^3.3.0",
|
||||||
"vitest": "^1.5.0"
|
"vitest": "^1.5.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
|
|
||||||
const keys = Object.keys(settings).filter((key) => key !== "__title");
|
const keys = Object.keys(settings).filter((key) => key !== "__title");
|
||||||
function isNodeInput(v: NodeInput | Nested): v is NodeInput {
|
function isNodeInput(v: NodeInput | Nested): v is NodeInput {
|
||||||
return "type" in v;
|
return v && "type" in v;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { Node, NodeInput } from "@nodes/types";
|
import type { Node, NodeInput } from "@nodes/types";
|
||||||
import NestedSettings from "./NestedSettings.svelte";
|
import NestedSettings from "../NestedSettings.svelte";
|
||||||
import { writable } from "svelte/store";
|
import { writable } from "svelte/store";
|
||||||
import type { GraphManager } from "$lib/graph-interface/graph-manager";
|
import type { GraphManager } from "$lib/graph-interface/graph-manager";
|
||||||
|
|
||||||
@ -35,6 +35,7 @@
|
|||||||
: undefined;
|
: undefined;
|
||||||
$: store = node ? createStore(node.props, nodeDefinition) : undefined;
|
$: store = node ? createStore(node.props, nodeDefinition) : undefined;
|
||||||
|
|
||||||
|
let lastPropsHash = "";
|
||||||
function updateNode() {
|
function updateNode() {
|
||||||
if (!node || !$store) return;
|
if (!node || !$store) return;
|
||||||
let needsUpdate = false;
|
let needsUpdate = false;
|
||||||
@ -46,6 +47,11 @@
|
|||||||
node.props[key] = $store[key];
|
node.props[key] = $store[key];
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
let propsHash = JSON.stringify(node.props);
|
||||||
|
if (propsHash === lastPropsHash) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
lastPropsHash = propsHash;
|
||||||
// console.log(needsUpdate, node.props, $store);
|
// console.log(needsUpdate, node.props, $store);
|
||||||
if (needsUpdate) {
|
if (needsUpdate) {
|
||||||
manager.execute();
|
manager.execute();
|
||||||
@ -1,5 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { createKeyMap } from "$lib/helpers/createKeyMap";
|
import type { createKeyMap } from "$lib/helpers/createKeyMap";
|
||||||
|
import { ShortCut } from "@nodes/ui";
|
||||||
|
|
||||||
export let keymap: ReturnType<typeof createKeyMap>;
|
export let keymap: ReturnType<typeof createKeyMap>;
|
||||||
const keys = keymap.keys;
|
const keys = keymap.keys;
|
||||||
@ -12,18 +13,7 @@
|
|||||||
{#each $keys as key}
|
{#each $keys as key}
|
||||||
{#if key.description}
|
{#if key.description}
|
||||||
<div class="command-wrapper">
|
<div class="command-wrapper">
|
||||||
<div class="command">
|
<ShortCut {...key} />
|
||||||
{#if key.ctrl}
|
|
||||||
<span>Ctrl</span>
|
|
||||||
{/if}
|
|
||||||
{#if key.shift}
|
|
||||||
<span>Shift</span>
|
|
||||||
{/if}
|
|
||||||
{#if key.alt}
|
|
||||||
<span>Alt</span>
|
|
||||||
{/if}
|
|
||||||
{key.key}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<p>{key.description}</p>
|
<p>{key.description}</p>
|
||||||
{/if}
|
{/if}
|
||||||
@ -55,23 +45,10 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.command {
|
|
||||||
background: var(--outline);
|
|
||||||
padding: 0.4em;
|
|
||||||
font-size: 0.8em;
|
|
||||||
border-radius: 0.3em;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
span::after {
|
|
||||||
content: " +";
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@ -8,8 +8,8 @@
|
|||||||
import Viewer from "$lib/result-viewer/Viewer.svelte";
|
import Viewer from "$lib/result-viewer/Viewer.svelte";
|
||||||
import Settings from "$lib/settings/Settings.svelte";
|
import Settings from "$lib/settings/Settings.svelte";
|
||||||
import { AppSettings, AppSettingTypes } from "$lib/settings/app-settings";
|
import { AppSettings, AppSettingTypes } from "$lib/settings/app-settings";
|
||||||
import { get, writable, type Readable, type Writable } from "svelte/store";
|
import { get, writable, type Writable } from "svelte/store";
|
||||||
import Keymap from "$lib/settings/Keymap.svelte";
|
import Keymap from "$lib/settings/panels/Keymap.svelte";
|
||||||
import type { createKeyMap } from "$lib/helpers/createKeyMap";
|
import type { createKeyMap } from "$lib/helpers/createKeyMap";
|
||||||
import NodeStore from "$lib/node-store/NodeStore.svelte";
|
import NodeStore from "$lib/node-store/NodeStore.svelte";
|
||||||
import type { GraphManager } from "$lib/graph-interface/graph-manager";
|
import type { GraphManager } from "$lib/graph-interface/graph-manager";
|
||||||
@ -21,7 +21,7 @@
|
|||||||
} from "@nodes/utils";
|
} from "@nodes/utils";
|
||||||
import type { PerspectiveCamera, Vector3 } from "three";
|
import type { PerspectiveCamera, Vector3 } from "three";
|
||||||
import type { OrbitControls } from "three/examples/jsm/Addons.js";
|
import type { OrbitControls } from "three/examples/jsm/Addons.js";
|
||||||
import ActiveNode from "$lib/settings/ActiveNode.svelte";
|
import ActiveNode from "$lib/settings/panels/ActiveNode.svelte";
|
||||||
|
|
||||||
const nodeRegistry = new RemoteNodeRegistry("");
|
const nodeRegistry = new RemoteNodeRegistry("");
|
||||||
const runtimeExecutor = new MemoryRuntimeExecutor(nodeRegistry);
|
const runtimeExecutor = new MemoryRuntimeExecutor(nodeRegistry);
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"id": "max/plantarium/box",
|
"id": "max/plantarium/box",
|
||||||
"outputs": [
|
"outputs": [
|
||||||
"model"
|
"geometry"
|
||||||
],
|
],
|
||||||
"inputs": {
|
"inputs": {
|
||||||
"size": {
|
"size": {
|
||||||
|
|||||||
6
nodes/max/plantarium/branches/.gitignore
vendored
Normal file
6
nodes/max/plantarium/branches/.gitignore
vendored
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
/target
|
||||||
|
**/*.rs.bk
|
||||||
|
Cargo.lock
|
||||||
|
bin/
|
||||||
|
pkg/
|
||||||
|
wasm-pack.log
|
||||||
28
nodes/max/plantarium/branches/Cargo.toml
Normal file
28
nodes/max/plantarium/branches/Cargo.toml
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
[package]
|
||||||
|
name = "template"
|
||||||
|
version = "0.1.0"
|
||||||
|
authors = ["Max Richter <jim-x@web.de>"]
|
||||||
|
edition = "2018"
|
||||||
|
|
||||||
|
[lib]
|
||||||
|
crate-type = ["cdylib", "rlib"]
|
||||||
|
|
||||||
|
[features]
|
||||||
|
default = ["console_error_panic_hook"]
|
||||||
|
|
||||||
|
[dependencies]
|
||||||
|
wasm-bindgen = "0.2.84"
|
||||||
|
|
||||||
|
# The `console_error_panic_hook` crate provides better debugging of panics by
|
||||||
|
# logging them with `console.error`. This is great for development, but requires
|
||||||
|
# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
|
||||||
|
# code size when deploying.
|
||||||
|
utils = { version = "0.1.0", path = "../../../../packages/utils" }
|
||||||
|
macros = { version = "0.1.0", path = "../../../../packages/macros" }
|
||||||
|
serde = { version = "1.0", features = ["derive"] }
|
||||||
|
serde-wasm-bindgen = "0.4"
|
||||||
|
console_error_panic_hook = { version = "0.1.7", optional = true }
|
||||||
|
web-sys = { version = "0.3.69", features = ["console"] }
|
||||||
|
|
||||||
|
[dev-dependencies]
|
||||||
|
wasm-bindgen-test = "0.3.34"
|
||||||
6
nodes/max/plantarium/branches/package.json
Normal file
6
nodes/max/plantarium/branches/package.json
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"scripts": {
|
||||||
|
"build": "wasm-pack build --release --out-name index --no-default-features",
|
||||||
|
"dev": "cargo watch -s 'wasm-pack build --dev --out-name index --no-default-features'"
|
||||||
|
}
|
||||||
|
}
|
||||||
70
nodes/max/plantarium/branches/src/input.json
Normal file
70
nodes/max/plantarium/branches/src/input.json
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
{
|
||||||
|
"id": "max/plantarium/branches",
|
||||||
|
"outputs": [
|
||||||
|
"path"
|
||||||
|
],
|
||||||
|
"inputs": {
|
||||||
|
"plant": {
|
||||||
|
"type": "path",
|
||||||
|
"external": true
|
||||||
|
},
|
||||||
|
"length": {
|
||||||
|
"type": "float",
|
||||||
|
"min": 0,
|
||||||
|
"max": 3,
|
||||||
|
"step": 0.05,
|
||||||
|
"value": 0.8
|
||||||
|
},
|
||||||
|
"thiccness": {
|
||||||
|
"type": "float",
|
||||||
|
"min": 0,
|
||||||
|
"max": 1,
|
||||||
|
"step": 0.01,
|
||||||
|
"value": 0.8
|
||||||
|
},
|
||||||
|
"offsetSingle": {
|
||||||
|
"type": "float",
|
||||||
|
"min": 0,
|
||||||
|
"hidden": true,
|
||||||
|
"max": 1,
|
||||||
|
"step": 0.01,
|
||||||
|
"value": 0.5
|
||||||
|
},
|
||||||
|
"lowestBranch": {
|
||||||
|
"type": "float",
|
||||||
|
"hidden": true,
|
||||||
|
"min": 0,
|
||||||
|
"max": 1,
|
||||||
|
"step": 0.01,
|
||||||
|
"value": 0.2
|
||||||
|
},
|
||||||
|
"highestBranch": {
|
||||||
|
"type": "float",
|
||||||
|
"hidden": true,
|
||||||
|
"min": 0,
|
||||||
|
"max": 1,
|
||||||
|
"step": 0.01,
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
"depth": {
|
||||||
|
"type": "float",
|
||||||
|
"hidden": true,
|
||||||
|
"min": 1,
|
||||||
|
"value": 1,
|
||||||
|
"description": "On how many layern of branches should we place branches."
|
||||||
|
},
|
||||||
|
"amount": {
|
||||||
|
"type": "integer",
|
||||||
|
"min": 0,
|
||||||
|
"max": 64,
|
||||||
|
"value": 10
|
||||||
|
},
|
||||||
|
"resolution_curve": {
|
||||||
|
"type": "integer",
|
||||||
|
"value": 32,
|
||||||
|
"min": 3,
|
||||||
|
"max": 64,
|
||||||
|
"setting": "resolution.curve"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
18
nodes/max/plantarium/branches/src/lib.rs
Normal file
18
nodes/max/plantarium/branches/src/lib.rs
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
use macros::include_definition_file;
|
||||||
|
use utils::{concat_args, decode_float, encode_float, get_args, set_panic_hook, wrap_arg};
|
||||||
|
use wasm_bindgen::prelude::*;
|
||||||
|
|
||||||
|
include_definition_file!("src/input.json");
|
||||||
|
|
||||||
|
#[rustfmt::skip]
|
||||||
|
#[wasm_bindgen]
|
||||||
|
pub fn execute(input: &[i32]) -> Vec<i32> {
|
||||||
|
|
||||||
|
set_panic_hook();
|
||||||
|
|
||||||
|
let args = get_args(input);
|
||||||
|
|
||||||
|
let paths = get_args(args[0]);
|
||||||
|
|
||||||
|
concat_args(paths)
|
||||||
|
}
|
||||||
13
nodes/max/plantarium/branches/tests/web.rs
Normal file
13
nodes/max/plantarium/branches/tests/web.rs
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
//! Test suite for the Web and headless browsers.
|
||||||
|
|
||||||
|
#![cfg(target_arch = "wasm32")]
|
||||||
|
|
||||||
|
extern crate wasm_bindgen_test;
|
||||||
|
use wasm_bindgen_test::*;
|
||||||
|
|
||||||
|
wasm_bindgen_test_configure!(run_in_browser);
|
||||||
|
|
||||||
|
#[wasm_bindgen_test]
|
||||||
|
fn pass() {
|
||||||
|
assert_eq!(1 + 1, 2);
|
||||||
|
}
|
||||||
@ -1,11 +1,11 @@
|
|||||||
{
|
{
|
||||||
"id": "max/plantarium/noise",
|
"id": "max/plantarium/noise",
|
||||||
"outputs": [
|
"outputs": [
|
||||||
"plant"
|
"path"
|
||||||
],
|
],
|
||||||
"inputs": {
|
"inputs": {
|
||||||
"plant": {
|
"plant": {
|
||||||
"type": "plant"
|
"type": "path"
|
||||||
},
|
},
|
||||||
"scale": {
|
"scale": {
|
||||||
"type": "float",
|
"type": "float",
|
||||||
|
|||||||
@ -2,7 +2,7 @@ use glam::Vec3;
|
|||||||
use macros::include_definition_file;
|
use macros::include_definition_file;
|
||||||
use noise::{core::open_simplex::open_simplex_2d, permutationtable::PermutationTable, Vector2};
|
use noise::{core::open_simplex::open_simplex_2d, permutationtable::PermutationTable, Vector2};
|
||||||
use utils::{
|
use utils::{
|
||||||
concat_args, decode_float, encode_float, evaluate_float, evaluate_vec3, get_args, log,
|
concat_args, evaluate_float, evaluate_vec3, geometry::wrap_path, get_args, reset_call_count,
|
||||||
set_panic_hook,
|
set_panic_hook,
|
||||||
};
|
};
|
||||||
use wasm_bindgen::prelude::*;
|
use wasm_bindgen::prelude::*;
|
||||||
@ -17,62 +17,46 @@ fn lerp(a: f32, b: f32, t: f32) -> f32 {
|
|||||||
pub fn execute(input: &[i32]) -> Vec<i32> {
|
pub fn execute(input: &[i32]) -> Vec<i32> {
|
||||||
set_panic_hook();
|
set_panic_hook();
|
||||||
|
|
||||||
|
reset_call_count();
|
||||||
|
|
||||||
let args = get_args(input);
|
let args = get_args(input);
|
||||||
|
|
||||||
let plants = get_args(args[0]);
|
let plants = get_args(args[0]);
|
||||||
let scale = (evaluate_float(args[1]) * 0.1) as f64;
|
let scale = (evaluate_float(args[1]) * 0.1) as f64;
|
||||||
let strength = evaluate_float(args[2]);
|
let strength = evaluate_float(args[2]);
|
||||||
let _fix_bottom = evaluate_float(args[3]);
|
let fix_bottom = evaluate_float(args[3]);
|
||||||
let fix_bottom = if _fix_bottom.is_finite() {
|
|
||||||
_fix_bottom
|
|
||||||
} else {
|
|
||||||
0.0
|
|
||||||
};
|
|
||||||
|
|
||||||
let seed = args[4][0];
|
let seed = args[4][0];
|
||||||
|
|
||||||
let directional_strength = evaluate_vec3(args[5]);
|
let directional_strength = evaluate_vec3(args[5]);
|
||||||
|
|
||||||
let hasher = PermutationTable::new(seed as u32);
|
let hasher = PermutationTable::new(seed as u32);
|
||||||
log!(
|
|
||||||
"scale: {}, strength: {}, fix_bottom: {}, seed: {}, directional: {:?}",
|
|
||||||
scale,
|
|
||||||
strength,
|
|
||||||
fix_bottom,
|
|
||||||
seed,
|
|
||||||
directional_strength
|
|
||||||
);
|
|
||||||
|
|
||||||
let output: Vec<Vec<i32>> = plants
|
let output: Vec<Vec<i32>> = plants
|
||||||
.iter()
|
.iter()
|
||||||
.enumerate()
|
.enumerate()
|
||||||
.map(|(j, p)| {
|
.map(|(j, _path_data)| {
|
||||||
let mut plant = p.to_vec();
|
let mut path_data = _path_data.to_vec();
|
||||||
|
|
||||||
log!("plant: {:?}", plant);
|
// if this is not a path don't modify it
|
||||||
|
if path_data[2] != 0 {
|
||||||
|
return path_data;
|
||||||
|
}
|
||||||
|
|
||||||
let points = (plant.len() - 5) / 4;
|
let path = wrap_path(&mut path_data);
|
||||||
|
|
||||||
let p0 = Vec3::new(
|
let p0 = Vec3::new(path.points[0], path.points[1], path.points[2]);
|
||||||
decode_float(plant[3]),
|
|
||||||
decode_float(plant[4]),
|
|
||||||
decode_float(plant[5]),
|
|
||||||
);
|
|
||||||
|
|
||||||
let p2 = Vec3::new(
|
let p2 = Vec3::new(
|
||||||
decode_float(plant[plant.len() - 6]),
|
path.points[path.length * 4 - 3],
|
||||||
decode_float(plant[plant.len() - 5]),
|
path.points[path.length * 4 - 2],
|
||||||
decode_float(plant[plant.len() - 4]),
|
path.points[path.length * 4 - 1],
|
||||||
);
|
);
|
||||||
// .... x, y, z, w, 1, 1
|
|
||||||
// -4 -3 -2 -1
|
|
||||||
|
|
||||||
let length = (p2 - p0).length() as f64;
|
let length = (p2 - p0).length() as f64;
|
||||||
|
|
||||||
log!("p0: {:?} p1: {:?} length: {}", p0, p2, length);
|
for i in 0..path.length {
|
||||||
|
let a = i as f64 / (path.length - 1) as f64;
|
||||||
for i in 0..points {
|
|
||||||
let a = i as f64 / (points - 1) as f64;
|
|
||||||
|
|
||||||
let px = Vector2::new(1000.0 + j as f64 + a * length * scale, a * scale as f64);
|
let px = Vector2::new(1000.0 + j as f64 + a * length * scale, a * scale as f64);
|
||||||
let py = Vector2::new(2000.0 + j as f64 + a * length * scale, a * scale as f64);
|
let py = Vector2::new(2000.0 + j as f64 + a * length * scale, a * scale as f64);
|
||||||
@ -96,14 +80,13 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
|
|||||||
* directional_strength[2]
|
* directional_strength[2]
|
||||||
* lerp(1.0, a as f32, fix_bottom);
|
* lerp(1.0, a as f32, fix_bottom);
|
||||||
|
|
||||||
plant[3 + i * 4] = encode_float(decode_float(plant[3 + i * 4]) + nx);
|
path.points[i * 4] += nx;
|
||||||
plant[4 + i * 4] = encode_float(decode_float(plant[4 + i * 4]) + ny);
|
path.points[i * 4 + 1] += ny;
|
||||||
plant[5 + i * 4] = encode_float(decode_float(plant[5 + i * 4]) + nz);
|
path.points[i * 4 + 2] += nz;
|
||||||
}
|
}
|
||||||
|
path_data
|
||||||
plant
|
|
||||||
})
|
})
|
||||||
.collect();
|
.collect();
|
||||||
|
|
||||||
concat_args(output.iter().map(|v| v.as_slice()).collect())
|
concat_args(output.iter().map(|x| x.as_slice()).collect())
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,7 +3,10 @@
|
|||||||
"outputs": [],
|
"outputs": [],
|
||||||
"inputs": {
|
"inputs": {
|
||||||
"input": {
|
"input": {
|
||||||
"type": "plant",
|
"type": "path",
|
||||||
|
"accepts": [
|
||||||
|
"geometry"
|
||||||
|
],
|
||||||
"external": true
|
"external": true
|
||||||
},
|
},
|
||||||
"resolution_circle": {
|
"resolution_circle": {
|
||||||
|
|||||||
@ -1,5 +1,9 @@
|
|||||||
use macros::include_definition_file;
|
use macros::include_definition_file;
|
||||||
use utils::{concat_args, evaluate_int, geometry::extrude_path, get_args, log};
|
use utils::{
|
||||||
|
concat_args, evaluate_int,
|
||||||
|
geometry::{extrude_path, wrap_path},
|
||||||
|
get_args, log,
|
||||||
|
};
|
||||||
use wasm_bindgen::prelude::*;
|
use wasm_bindgen::prelude::*;
|
||||||
|
|
||||||
include_definition_file!("src/inputs.json");
|
include_definition_file!("src/inputs.json");
|
||||||
@ -10,30 +14,25 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
|
|||||||
|
|
||||||
let args = get_args(input);
|
let args = get_args(input);
|
||||||
|
|
||||||
log!("output args: {:?}", args);
|
|
||||||
|
|
||||||
let inputs = get_args(args[0]);
|
let inputs = get_args(args[0]);
|
||||||
|
|
||||||
log!("output inputs: {:?}", inputs);
|
|
||||||
|
|
||||||
let resolution = evaluate_int(args[1]) as usize;
|
let resolution = evaluate_int(args[1]) as usize;
|
||||||
|
|
||||||
|
log!("output inputs: {:?}", inputs);
|
||||||
log!("inputs: {}, resolution: {}", inputs.len(), resolution);
|
log!("inputs: {}, resolution: {}", inputs.len(), resolution);
|
||||||
|
|
||||||
let mut output: Vec<Vec<i32>> = Vec::new();
|
let mut output: Vec<Vec<i32>> = Vec::new();
|
||||||
for arg in inputs {
|
for arg in inputs {
|
||||||
if arg.len() < 3 {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
let arg_type = arg[2];
|
let arg_type = arg[2];
|
||||||
|
log!("arg_type: {}, \n {:?}", arg_type, arg,);
|
||||||
|
|
||||||
if arg_type == 0 {
|
if arg_type == 0 {
|
||||||
// this is stem
|
// this is path
|
||||||
let stem = &arg[3..arg.len() - 2];
|
let mut vec = arg.to_vec();
|
||||||
output.push(arg.to_vec());
|
output.push(vec.clone());
|
||||||
log!("stem: {:?}", stem);
|
let path_data = wrap_path(&mut vec);
|
||||||
let geometry = extrude_path(stem, resolution);
|
log!("{:?}", path_data);
|
||||||
|
let geometry = extrude_path(path_data, resolution);
|
||||||
output.push(geometry);
|
output.push(geometry);
|
||||||
} else if arg_type == 1 {
|
} else if arg_type == 1 {
|
||||||
// this is geometry
|
// this is geometry
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"id": "max/plantarium/stem",
|
"id": "max/plantarium/stem",
|
||||||
"outputs": [
|
"outputs": [
|
||||||
"plant"
|
"path"
|
||||||
],
|
],
|
||||||
"inputs": {
|
"inputs": {
|
||||||
"origin": {
|
"origin": {
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
use macros::include_definition_file;
|
use macros::include_definition_file;
|
||||||
use utils::{
|
use utils::{
|
||||||
evaluate_float, evaluate_int, evaluate_vec3, get_args, log, reset_call_count, set_panic_hook,
|
evaluate_float, evaluate_int, evaluate_vec3,
|
||||||
|
geometry::{create_multiple_paths, wrap_multiple_paths},
|
||||||
|
get_args, log, reset_call_count, set_panic_hook,
|
||||||
};
|
};
|
||||||
use wasm_bindgen::prelude::*;
|
use wasm_bindgen::prelude::*;
|
||||||
|
|
||||||
@ -14,60 +16,31 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
|
|||||||
|
|
||||||
let args = get_args(input);
|
let args = get_args(input);
|
||||||
|
|
||||||
|
let amount = evaluate_int(args[1]) as usize;
|
||||||
|
let path_resolution = evaluate_int(args[4]) as usize;
|
||||||
|
|
||||||
log!("stem args: {:?}", args);
|
log!("stem args: {:?}", args);
|
||||||
|
|
||||||
let amount = evaluate_int(args[1]) as usize;
|
let mut stem_data = create_multiple_paths(amount, path_resolution, 1);
|
||||||
let res_curve = evaluate_int(args[4]) as usize;
|
|
||||||
|
|
||||||
log!("STEM: amount: {} res_curve: {}", amount, res_curve);
|
let mut stems = wrap_multiple_paths(&mut stem_data);
|
||||||
|
|
||||||
// 4 extra for opening and closing brackets
|
|
||||||
// and each stem has 5 extra for opening and closing brackets and node-type
|
|
||||||
let output_size = 4 + amount * (res_curve * 4 + 5);
|
|
||||||
|
|
||||||
let mut path: Vec<i32> = vec![0; output_size];
|
|
||||||
path[0] = 0; // encode opening bracket
|
|
||||||
path[1] = 1; // encode opening bracket
|
|
||||||
path[output_size - 2] = 1; // encode closing bracket
|
|
||||||
path[output_size - 1] = 1; // encode closing bracket
|
|
||||||
|
|
||||||
for i in 0..amount {
|
|
||||||
let start_index = 2 + i * (res_curve * 4 + 5);
|
|
||||||
let end_index = 2 + (i + 1) * (res_curve * 4 + 5);
|
|
||||||
|
|
||||||
|
for stem in stems.iter_mut() {
|
||||||
let origin = evaluate_vec3(args[0]);
|
let origin = evaluate_vec3(args[0]);
|
||||||
let length = evaluate_float(args[2]);
|
let length = evaluate_float(args[2]);
|
||||||
let thickness = evaluate_float(args[3]);
|
let thickness = evaluate_float(args[3]);
|
||||||
|
let amount_points = stem.points.len() / 4;
|
||||||
|
|
||||||
log!(
|
for i in 0..amount_points {
|
||||||
"STEM {i}: origin: {:?} length: {} thickness: {}",
|
let a = i as f32 / (path_resolution - 1) as f32;
|
||||||
origin,
|
stem.points[i * 4] = origin[0];
|
||||||
length,
|
stem.points[i * 4 + 1] = origin[1] + a * length;
|
||||||
thickness
|
stem.points[i * 4 + 2] = origin[2];
|
||||||
);
|
stem.points[i * 4 + 3] = thickness * (1.0 - a);
|
||||||
|
|
||||||
path[start_index] = 0; // encode opening bracket
|
|
||||||
path[start_index + 1] = res_curve as i32 * 4 + 2; // encode opening bracket
|
|
||||||
path[start_index + 2] = 0; // encode node-type, stem: 0
|
|
||||||
|
|
||||||
path[end_index - 2] = 1; // encode closing bracket
|
|
||||||
path[end_index - 1] = 1; // encode closing bracket
|
|
||||||
|
|
||||||
let path_slice = &mut path[3 + start_index..end_index - 2];
|
|
||||||
|
|
||||||
let path_p: &mut [f32] = unsafe {
|
|
||||||
assert_eq!(path_slice.len() % 4, 0);
|
|
||||||
std::slice::from_raw_parts_mut(path_slice.as_ptr() as *mut f32, path_slice.len())
|
|
||||||
};
|
|
||||||
|
|
||||||
for i in 0..res_curve {
|
|
||||||
let a = i as f32 / (res_curve - 1) as f32;
|
|
||||||
path_p[i * 4] = origin[0];
|
|
||||||
path_p[i * 4 + 1] = origin[1] + a * length;
|
|
||||||
path_p[i * 4 + 2] = origin[2];
|
|
||||||
path_p[i * 4 + 3] = thickness * (1.0 - a);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
path
|
log!("stem_data: {:?}", stem_data);
|
||||||
|
|
||||||
|
stem_data
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"id": "max/plantarium/triangle",
|
"id": "max/plantarium/triangle",
|
||||||
"outputs": [
|
"outputs": [
|
||||||
"model"
|
"geometry"
|
||||||
],
|
],
|
||||||
"inputs": {
|
"inputs": {
|
||||||
"size": {
|
"size": {
|
||||||
|
|||||||
@ -3,7 +3,9 @@
|
|||||||
"build": "pnpm build:nodes && pnpm build:app",
|
"build": "pnpm build:nodes && pnpm build:app",
|
||||||
"build:app": "pnpm -r --filter 'ui' build && pnpm -r --filter 'app' build",
|
"build:app": "pnpm -r --filter 'ui' build && pnpm -r --filter 'app' build",
|
||||||
"build:nodes": "pnpm -r --filter './nodes/**' build",
|
"build:nodes": "pnpm -r --filter './nodes/**' build",
|
||||||
|
"build:stories": "pnpm -r --filter 'ui' story:build",
|
||||||
"dev:nodes": "pnpm -r --parallel --filter './nodes/**' dev",
|
"dev:nodes": "pnpm -r --parallel --filter './nodes/**' dev",
|
||||||
|
"build:deploy": "pnpm build && pnpm build:stories && cp -r ./packages/ui/.histoire/dist ./app/build/ui",
|
||||||
"dev": "pnpm -r --filter 'app' --filter './packages/node-registry' dev"
|
"dev": "pnpm -r --filter 'app' --filter './packages/node-registry' dev"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,6 +7,6 @@
|
|||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"zod": "^3.22.5"
|
"zod": "^3.23.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -55,14 +55,14 @@ export const NodeInputVec3Schema = z.object({
|
|||||||
value: z.array(z.number()).optional(),
|
value: z.array(z.number()).optional(),
|
||||||
});
|
});
|
||||||
|
|
||||||
export const NodeInputModelSchema = z.object({
|
export const NodeInputGeometrySchema = z.object({
|
||||||
...DefaultOptionsSchema.shape,
|
...DefaultOptionsSchema.shape,
|
||||||
type: z.literal("model"),
|
type: z.literal("geometry"),
|
||||||
});
|
});
|
||||||
|
|
||||||
export const NodeInputPlantSchema = z.object({
|
export const NodeInputPathSchema = z.object({
|
||||||
...DefaultOptionsSchema.shape,
|
...DefaultOptionsSchema.shape,
|
||||||
type: z.literal("plant"),
|
type: z.literal("path"),
|
||||||
});
|
});
|
||||||
|
|
||||||
export const NodeInputSchema = z.union([
|
export const NodeInputSchema = z.union([
|
||||||
@ -73,8 +73,8 @@ export const NodeInputSchema = z.union([
|
|||||||
NodeInputSelectSchema,
|
NodeInputSelectSchema,
|
||||||
NodeInputSeedSchema,
|
NodeInputSeedSchema,
|
||||||
NodeInputVec3Schema,
|
NodeInputVec3Schema,
|
||||||
NodeInputModelSchema,
|
NodeInputGeometrySchema,
|
||||||
NodeInputPlantSchema
|
NodeInputPathSchema
|
||||||
]);
|
]);
|
||||||
|
|
||||||
export type NodeInput = z.infer<typeof NodeInputSchema>;
|
export type NodeInput = z.infer<typeof NodeInputSchema>;
|
||||||
|
|||||||
@ -104,13 +104,13 @@ pub struct NodeInputVec3 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#[derive(Serialize, Deserialize)]
|
#[derive(Serialize, Deserialize)]
|
||||||
pub struct NodeInputModel {
|
pub struct NodeInputGeometry {
|
||||||
#[serde(flatten)]
|
#[serde(flatten)]
|
||||||
pub default_options: DefaultOptions,
|
pub default_options: DefaultOptions,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(Serialize, Deserialize)]
|
#[derive(Serialize, Deserialize)]
|
||||||
pub struct NodeInputPlant {
|
pub struct NodeInputPath {
|
||||||
#[serde(flatten)]
|
#[serde(flatten)]
|
||||||
pub default_options: DefaultOptions,
|
pub default_options: DefaultOptions,
|
||||||
}
|
}
|
||||||
@ -125,8 +125,8 @@ pub enum NodeInput {
|
|||||||
select(NodeInputSelect),
|
select(NodeInputSelect),
|
||||||
seed(NodeInputSeed),
|
seed(NodeInputSeed),
|
||||||
vec3(NodeInputVec3),
|
vec3(NodeInputVec3),
|
||||||
model(NodeInputModel),
|
geometry(NodeInputGeometry),
|
||||||
plant(NodeInputPlant),
|
path(NodeInputPath),
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(Serialize, Deserialize)]
|
#[derive(Serialize, Deserialize)]
|
||||||
|
|||||||
16
packages/ui/.histoire/dist/__sandbox.html
vendored
Normal file
16
packages/ui/.histoire/dist/__sandbox.html
vendored
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Histoire</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<link rel="stylesheet" href="/assets/style-D55TbI9c.css">
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/assets/bundle-sandbox-CSn-Rucl.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
13
packages/ui/.histoire/dist/assets/BaseEmpty.vue-C0i8tRal.js
vendored
Normal file
13
packages/ui/.histoire/dist/assets/BaseEmpty.vue-C0i8tRal.js
vendored
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { _ as _export_sfc } from "./MobileOverlay.vue2-BRmV4xb2.js";
|
||||||
|
import { o as openBlock, b as createElementBlock, aF as renderSlot } from "./vendor-BCKkA27H.js";
|
||||||
|
const _sfc_main = {};
|
||||||
|
const _hoisted_1 = { class: "histoire-base-empty htw-base-empty htw-flex htw-flex-col htw-items-center htw-justify-center htw-space-y-4 htw-py-12 htw-h-full htw-text-center htw-text-gray-400 htw-text-lg" };
|
||||||
|
function _sfc_render(_ctx, _cache) {
|
||||||
|
return openBlock(), createElementBlock("div", _hoisted_1, [
|
||||||
|
renderSlot(_ctx.$slots, "default", {}, void 0, true)
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
const BaseEmpty = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c5ecfead"]]);
|
||||||
|
export {
|
||||||
|
BaseEmpty as B
|
||||||
|
};
|
||||||
2580
packages/ui/.histoire/dist/assets/GenericMountStory.vue2-BX48YWx2.js
vendored
Normal file
2580
packages/ui/.histoire/dist/assets/GenericMountStory.vue2-BX48YWx2.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
102
packages/ui/.histoire/dist/assets/HomeView.vue-CcWnFK65.js
vendored
Normal file
102
packages/ui/.histoire/dist/assets/HomeView.vue-CcWnFK65.js
vendored
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
import { h as histoireConfig, c as customLogos } from "./GenericMountStory.vue2-BX48YWx2.js";
|
||||||
|
import { u as useStoryStore } from "./story--eZPzd9h.js";
|
||||||
|
import { d as defineComponent, o as openBlock, b as createElementBlock, e as createVNode, g as unref, I as Icon, f as createBaseVNode, t as toDisplayString, c as computed } from "./vendor-BCKkA27H.js";
|
||||||
|
const HistoireLogo = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!--%20Created%20with%20Inkscape%20(http://www.inkscape.org/)%20--%3e%3csvg%20width='512'%20height='512'%20viewBox='0%200%20512%20512'%20version='1.1'%20id='svg5'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:svg='http://www.w3.org/2000/svg'%3e%3cdefs%20id='defs2'%20/%3e%3cg%20id='layer1'%3e%3crect%20style='opacity:0.5;fill:%2334d399;fill-opacity:1;stroke-width:1.00375'%20id='rect1372'%20width='314.30923'%20height='406.60901'%20x='-26.565063'%20y='134.75079'%20transform='rotate(-23.821262)'%20ry='8'%20/%3e%3crect%20style='fill:%2334d399;fill-opacity:1;stroke-width:1.00375'%20id='rect850'%20width='314.30923'%20height='406.60901'%20x='77.571838'%20y='72.808708'%20ry='8'%20transform='rotate(-4.5744534)'%20/%3e%3c/g%3e%3cg%20id='layer3'%3e%3cpath%20id='path1657-3'%20style='display:inline;fill:%23b4fae2;fill-opacity:1;stroke:%23b4fae2;stroke-width:8.34923;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1'%20d='M%20359.38947,355.95134%20320.72935,176.52942%20238.34613,238.94118%20Z%20M%20273.64124,273.06608%20152.59788,156.05591%20191.25804,335.47786%20Z'%20/%3e%3c/g%3e%3cg%20id='layer2'%20style='display:none'%3e%3cpath%20id='path1657'%20style='fill:%23b4fae2;fill-opacity:1;stroke:%23b4fae2;stroke-width:8;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1'%20d='m%20296,103.98242%20-135.53125,177.9668%20h%2088.70117%20z%20M%20262.83008,230.05078%20216,408.01758%20351.53125,230.05078%20Z'%20transform='rotate(-4.156553,256,256.00691)'%20/%3e%3c/g%3e%3c/svg%3e";
|
||||||
|
const _hoisted_1$1 = { class: "htw-p-2 htw-flex htw-items-center htw-gap-x-2" };
|
||||||
|
const _hoisted_2$1 = { class: "htw-flex htw-flex-col htw-leading-none" };
|
||||||
|
const _hoisted_3$1 = { class: "htw-text-primary-500 htw-min-w-[80px] htw-font-bold" };
|
||||||
|
const _hoisted_4 = { class: "htw-text-sm htw-text-gray-900 dark:htw-text-gray-100" };
|
||||||
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
||||||
|
__name: "HomeCounter",
|
||||||
|
props: {
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: "carbon:cube"
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ""
|
||||||
|
},
|
||||||
|
count: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup(__props) {
|
||||||
|
const props = __props;
|
||||||
|
return (_ctx, _cache) => {
|
||||||
|
return openBlock(), createElementBlock("div", _hoisted_1$1, [
|
||||||
|
createVNode(unref(Icon), {
|
||||||
|
icon: props.icon,
|
||||||
|
class: "htw-text-2xl htw-text-gray-700 dark:htw-text-gray-300 htw-flex-none"
|
||||||
|
}, null, 8, ["icon"]),
|
||||||
|
createBaseVNode("div", _hoisted_2$1, [
|
||||||
|
createBaseVNode("span", _hoisted_3$1, toDisplayString(__props.count), 1),
|
||||||
|
createBaseVNode("span", _hoisted_4, toDisplayString(__props.title), 1)
|
||||||
|
])
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const _hoisted_1 = { class: "histoire-home-view htw-flex md:htw-flex-col htw-gap-12 htw-items-center htw-justify-center htw-h-full" };
|
||||||
|
const _hoisted_2 = ["src"];
|
||||||
|
const _hoisted_3 = { class: "htw-flex !md:htw-flex-col htw-flex-wrap htw-justify-evenly htw-gap-2 htw-px-4 htw-py-2 htw-bg-gray-100 dark:htw-bg-gray-750 htw-rounded htw-border htw-border-gray-500/30" };
|
||||||
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||||
|
__name: "HomeView",
|
||||||
|
setup(__props) {
|
||||||
|
const logoUrl = computed(() => {
|
||||||
|
var _a, _b;
|
||||||
|
return ((_b = (_a = histoireConfig.theme) == null ? void 0 : _a.logo) == null ? void 0 : _b.square) ? customLogos.square : HistoireLogo;
|
||||||
|
});
|
||||||
|
const storyStore = useStoryStore();
|
||||||
|
const stats = computed(() => {
|
||||||
|
let storyCount = 0;
|
||||||
|
let variantCount = 0;
|
||||||
|
let docsCount = 0;
|
||||||
|
(storyStore.stories || []).forEach((story) => {
|
||||||
|
if (story.docsOnly) {
|
||||||
|
docsCount++;
|
||||||
|
} else {
|
||||||
|
storyCount++;
|
||||||
|
if (story.variants) {
|
||||||
|
variantCount += story.variants.length;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
storyCount,
|
||||||
|
variantCount,
|
||||||
|
docsCount
|
||||||
|
};
|
||||||
|
});
|
||||||
|
return (_ctx, _cache) => {
|
||||||
|
return openBlock(), createElementBlock("div", _hoisted_1, [
|
||||||
|
createBaseVNode("img", {
|
||||||
|
src: logoUrl.value,
|
||||||
|
alt: "Logo",
|
||||||
|
class: "htw-w-64 htw-h-64 htw-opacity-25 htw-mb-8 htw-hidden md:htw-block"
|
||||||
|
}, null, 8, _hoisted_2),
|
||||||
|
createBaseVNode("div", _hoisted_3, [
|
||||||
|
createVNode(_sfc_main$1, {
|
||||||
|
title: "Stories",
|
||||||
|
icon: "carbon:cube",
|
||||||
|
count: stats.value.storyCount
|
||||||
|
}, null, 8, ["count"]),
|
||||||
|
createVNode(_sfc_main$1, {
|
||||||
|
title: "Variants",
|
||||||
|
icon: "carbon:cube-view",
|
||||||
|
count: stats.value.variantCount
|
||||||
|
}, null, 8, ["count"]),
|
||||||
|
createVNode(_sfc_main$1, {
|
||||||
|
title: "Documents",
|
||||||
|
icon: "carbon:document-blank",
|
||||||
|
count: stats.value.docsCount
|
||||||
|
}, null, 8, ["count"])
|
||||||
|
])
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
export {
|
||||||
|
_sfc_main as default
|
||||||
|
};
|
||||||
308
packages/ui/.histoire/dist/assets/MobileOverlay.vue2-BRmV4xb2.js
vendored
Normal file
308
packages/ui/.histoire/dist/assets/MobileOverlay.vue2-BRmV4xb2.js
vendored
Normal file
@ -0,0 +1,308 @@
|
|||||||
|
import { d as defineComponent, l as resolveComponent, o as openBlock, q as createBlock, w as withCtx, f as createBaseVNode, n as normalizeClass, m as withKeys, aF as renderSlot, aD as mergeProps, k as watch, b2 as scrollIntoView, J as onMounted, r as ref, c as computed, a_ as onUnmounted, b as createElementBlock, aL as withModifiers, G as normalizeStyle, b3 as useMediaQuery, t as toDisplayString, e as createVNode, g as unref, I as Icon, h as createCommentVNode, T as Transition } from "./vendor-BCKkA27H.js";
|
||||||
|
const _sfc_main$2 = defineComponent({
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
isActive: {
|
||||||
|
type: Boolean,
|
||||||
|
default: void 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
navigate: () => true
|
||||||
|
},
|
||||||
|
setup(props, { emit }) {
|
||||||
|
function handleNavigate(event, navigate) {
|
||||||
|
emit("navigate");
|
||||||
|
navigate(event);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
handleNavigate
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const _export_sfc = (sfc, props) => {
|
||||||
|
const target = sfc.__vccOpts || sfc;
|
||||||
|
for (const [key, val] of props) {
|
||||||
|
target[key] = val;
|
||||||
|
}
|
||||||
|
return target;
|
||||||
|
};
|
||||||
|
const _hoisted_1$2 = ["href", "onClick", "onKeyup"];
|
||||||
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||||
|
const _component_RouterLink = resolveComponent("RouterLink");
|
||||||
|
return openBlock(), createBlock(_component_RouterLink, mergeProps({ class: "histoire-base-list-item-link" }, _ctx.$attrs, { custom: "" }), {
|
||||||
|
default: withCtx(({ isActive: linkIsActive, href, navigate }) => [
|
||||||
|
createBaseVNode("a", {
|
||||||
|
href,
|
||||||
|
class: normalizeClass(["htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100", [
|
||||||
|
_ctx.$attrs.class,
|
||||||
|
(_ctx.isActive != null ? _ctx.isActive : linkIsActive) ? "active htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black" : "hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900"
|
||||||
|
]]),
|
||||||
|
onClick: ($event) => _ctx.handleNavigate($event, navigate),
|
||||||
|
onKeyup: [
|
||||||
|
withKeys(($event) => _ctx.handleNavigate($event, navigate), ["enter"]),
|
||||||
|
withKeys(($event) => _ctx.handleNavigate($event, navigate), ["space"])
|
||||||
|
]
|
||||||
|
}, [
|
||||||
|
renderSlot(_ctx.$slots, "default", {
|
||||||
|
active: _ctx.isActive != null ? _ctx.isActive : linkIsActive
|
||||||
|
})
|
||||||
|
], 42, _hoisted_1$2)
|
||||||
|
]),
|
||||||
|
_: 3
|
||||||
|
}, 16);
|
||||||
|
}
|
||||||
|
const BaseListItemLink = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
|
||||||
|
function useScrollOnActive(active, el) {
|
||||||
|
watch(active, (value) => {
|
||||||
|
if (value) {
|
||||||
|
autoScroll();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
function autoScroll() {
|
||||||
|
if (el.value) {
|
||||||
|
scrollIntoView(el.value, {
|
||||||
|
scrollMode: "if-needed",
|
||||||
|
block: "center",
|
||||||
|
inline: "nearest",
|
||||||
|
behavior: "smooth"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
if (active.value) {
|
||||||
|
autoScroll();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
autoScroll
|
||||||
|
};
|
||||||
|
}
|
||||||
|
const _hoisted_1$1 = ["onMousedown"];
|
||||||
|
const SAVE_PREFIX = "__histoire";
|
||||||
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
||||||
|
__name: "BaseSplitPane",
|
||||||
|
props: {
|
||||||
|
orientation: {
|
||||||
|
type: String,
|
||||||
|
default: "landscape",
|
||||||
|
validator: (value) => ["landscape", "portrait"].includes(value)
|
||||||
|
},
|
||||||
|
defaultSplit: {
|
||||||
|
type: Number,
|
||||||
|
default: 50
|
||||||
|
},
|
||||||
|
split: {
|
||||||
|
type: Number,
|
||||||
|
default: void 0
|
||||||
|
},
|
||||||
|
min: {
|
||||||
|
type: Number,
|
||||||
|
default: 20
|
||||||
|
},
|
||||||
|
max: {
|
||||||
|
type: Number,
|
||||||
|
default: 80
|
||||||
|
},
|
||||||
|
draggerOffset: {
|
||||||
|
type: String,
|
||||||
|
default: "center",
|
||||||
|
validator: (value) => ["before", "center", "after"].includes(value)
|
||||||
|
},
|
||||||
|
saveId: {
|
||||||
|
type: String,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
fixed: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
"update:split": (_value) => true
|
||||||
|
},
|
||||||
|
setup(__props, { emit: __emit }) {
|
||||||
|
const props = __props;
|
||||||
|
const emit = __emit;
|
||||||
|
const currentSplit = ref(props.defaultSplit);
|
||||||
|
watch(() => props.split, (value) => {
|
||||||
|
if (value !== void 0) {
|
||||||
|
currentSplit.value = value;
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
immediate: true
|
||||||
|
});
|
||||||
|
if (props.saveId) {
|
||||||
|
const storageKey = `${SAVE_PREFIX}-split-pane-${props.saveId}`;
|
||||||
|
const savedValue = localStorage.getItem(storageKey);
|
||||||
|
if (savedValue != null) {
|
||||||
|
let parsedValue;
|
||||||
|
try {
|
||||||
|
parsedValue = JSON.parse(savedValue);
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
if (typeof parsedValue === "number") {
|
||||||
|
currentSplit.value = parsedValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
watch(currentSplit, (value) => {
|
||||||
|
localStorage.setItem(storageKey, JSON.stringify(value));
|
||||||
|
});
|
||||||
|
watch(currentSplit, (value) => {
|
||||||
|
if (value !== props.split) {
|
||||||
|
emit("update:split", value);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
immediate: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const boundSplit = computed(() => {
|
||||||
|
if (currentSplit.value < props.min) {
|
||||||
|
return props.min;
|
||||||
|
} else if (currentSplit.value > props.max) {
|
||||||
|
return props.max;
|
||||||
|
} else {
|
||||||
|
return currentSplit.value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const leftStyle = computed(() => ({
|
||||||
|
[props.orientation === "landscape" ? "width" : "height"]: props.fixed ? `${boundSplit.value}px` : `${boundSplit.value}%`
|
||||||
|
}));
|
||||||
|
const rightStyle = computed(() => ({
|
||||||
|
[props.orientation === "landscape" ? "width" : "height"]: props.fixed ? null : `${100 - boundSplit.value}%`
|
||||||
|
}));
|
||||||
|
const dragging = ref(false);
|
||||||
|
let startPosition = 0;
|
||||||
|
let startSplit = 0;
|
||||||
|
const el = ref(null);
|
||||||
|
function dragStart(e) {
|
||||||
|
dragging.value = true;
|
||||||
|
startPosition = props.orientation === "landscape" ? e.pageX : e.pageY;
|
||||||
|
startSplit = boundSplit.value;
|
||||||
|
window.addEventListener("mousemove", dragMove);
|
||||||
|
window.addEventListener("mouseup", dragEnd);
|
||||||
|
}
|
||||||
|
function dragMove(e) {
|
||||||
|
if (dragging.value) {
|
||||||
|
let position;
|
||||||
|
let totalSize;
|
||||||
|
if (props.orientation === "landscape") {
|
||||||
|
position = e.pageX;
|
||||||
|
totalSize = el.value.offsetWidth;
|
||||||
|
} else {
|
||||||
|
position = e.pageY;
|
||||||
|
totalSize = el.value.offsetHeight;
|
||||||
|
}
|
||||||
|
const dPosition = position - startPosition;
|
||||||
|
if (props.fixed) {
|
||||||
|
currentSplit.value = startSplit + dPosition;
|
||||||
|
} else {
|
||||||
|
currentSplit.value = startSplit + ~~(dPosition / totalSize * 200) / 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function dragEnd() {
|
||||||
|
dragging.value = false;
|
||||||
|
removeDragListeners();
|
||||||
|
}
|
||||||
|
function removeDragListeners() {
|
||||||
|
window.removeEventListener("mousemove", dragMove);
|
||||||
|
window.removeEventListener("mouseup", dragEnd);
|
||||||
|
}
|
||||||
|
onUnmounted(() => {
|
||||||
|
removeDragListeners();
|
||||||
|
});
|
||||||
|
return (_ctx, _cache) => {
|
||||||
|
return openBlock(), createElementBlock("div", {
|
||||||
|
ref_key: "el",
|
||||||
|
ref: el,
|
||||||
|
class: normalizeClass(["histoire-base-split-pane htw-flex htw-h-full htw-isolate htw-overflow-auto", {
|
||||||
|
"htw-flex-col": __props.orientation === "portrait",
|
||||||
|
"htw-cursor-ew-resize": dragging.value && __props.orientation === "landscape",
|
||||||
|
"htw-cursor-ns-resize": dragging.value && __props.orientation === "portrait",
|
||||||
|
[__props.orientation]: true
|
||||||
|
}])
|
||||||
|
}, [
|
||||||
|
createBaseVNode("div", {
|
||||||
|
class: normalizeClass(["htw-relative htw-top-0 htw-left-0 htw-z-20", {
|
||||||
|
"htw-pointer-events-none": dragging.value,
|
||||||
|
"htw-border-r htw-border-gray-300/30 dark:htw-border-gray-800": __props.orientation === "landscape",
|
||||||
|
"htw-flex-none": __props.fixed
|
||||||
|
}]),
|
||||||
|
style: normalizeStyle(leftStyle.value)
|
||||||
|
}, [
|
||||||
|
renderSlot(_ctx.$slots, "first", {}, void 0, true),
|
||||||
|
createBaseVNode("div", {
|
||||||
|
class: normalizeClass(["dragger htw-absolute htw-z-100 hover:htw-bg-primary-500/50 htw-transition-colors htw-duration-150 htw-delay-150", {
|
||||||
|
"htw-top-0 htw-bottom-0 htw-cursor-ew-resize": __props.orientation === "landscape",
|
||||||
|
"htw-left-0 htw-right-0 htw-cursor-ns-resize": __props.orientation === "portrait",
|
||||||
|
[`dragger-offset-${__props.draggerOffset}`]: true,
|
||||||
|
"htw-bg-primary-500/25": dragging.value
|
||||||
|
}]),
|
||||||
|
onMousedown: withModifiers(dragStart, ["prevent"])
|
||||||
|
}, null, 42, _hoisted_1$1)
|
||||||
|
], 6),
|
||||||
|
createBaseVNode("div", {
|
||||||
|
class: normalizeClass(["htw-relative htw-bottom-0 htw-right-0", {
|
||||||
|
"htw-pointer-events-none": dragging.value,
|
||||||
|
"htw-border-t htw-border-gray-300/30 dark:htw-border-gray-800": __props.orientation === "portrait",
|
||||||
|
"htw-flex-1": __props.fixed
|
||||||
|
}]),
|
||||||
|
style: normalizeStyle(rightStyle.value)
|
||||||
|
}, [
|
||||||
|
renderSlot(_ctx.$slots, "last", {}, void 0, true)
|
||||||
|
], 6)
|
||||||
|
], 2);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const BaseSplitPane = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4f40a1bb"]]);
|
||||||
|
const isMobile = useMediaQuery("(max-width: 640px)");
|
||||||
|
const _hoisted_1 = {
|
||||||
|
key: 0,
|
||||||
|
class: "histoire-mobile-overlay htw-absolute htw-z-10 htw-bg-white dark:htw-bg-gray-700 htw-w-screen htw-h-screen htw-inset-0 htw-overflow-hidden htw-flex htw-flex-col"
|
||||||
|
};
|
||||||
|
const _hoisted_2 = { class: "htw-p-4 htw-h-16 htw-flex htw-border-b htw-border-gray-100 dark:htw-border-gray-800 htw-items-center htw-place-content-between" };
|
||||||
|
const _hoisted_3 = { class: "htw-text-gray-500" };
|
||||||
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||||
|
__name: "MobileOverlay",
|
||||||
|
props: {
|
||||||
|
title: {},
|
||||||
|
opened: { type: Boolean }
|
||||||
|
},
|
||||||
|
emits: ["close"],
|
||||||
|
setup(__props, { emit: __emit }) {
|
||||||
|
const emit = __emit;
|
||||||
|
return (_ctx, _cache) => {
|
||||||
|
return openBlock(), createBlock(Transition, { name: "__histoire-fade-bottom" }, {
|
||||||
|
default: withCtx(() => [
|
||||||
|
_ctx.opened ? (openBlock(), createElementBlock("div", _hoisted_1, [
|
||||||
|
createBaseVNode("div", _hoisted_2, [
|
||||||
|
createBaseVNode("span", _hoisted_3, toDisplayString(_ctx.title), 1),
|
||||||
|
createBaseVNode("a", {
|
||||||
|
class: "htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer",
|
||||||
|
onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
|
||||||
|
}, [
|
||||||
|
createVNode(unref(Icon), {
|
||||||
|
icon: "carbon:close",
|
||||||
|
class: "htw-w-8 htw-h-8 htw-shrink-0"
|
||||||
|
})
|
||||||
|
])
|
||||||
|
]),
|
||||||
|
renderSlot(_ctx.$slots, "default")
|
||||||
|
])) : createCommentVNode("", true)
|
||||||
|
]),
|
||||||
|
_: 3
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
export {
|
||||||
|
BaseListItemLink as B,
|
||||||
|
_export_sfc as _,
|
||||||
|
_sfc_main as a,
|
||||||
|
BaseSplitPane as b,
|
||||||
|
isMobile as i,
|
||||||
|
useScrollOnActive as u
|
||||||
|
};
|
||||||
549
packages/ui/.histoire/dist/assets/SearchPane.vue-DX57eXRB.js
vendored
Normal file
549
packages/ui/.histoire/dist/assets/SearchPane.vue-DX57eXRB.js
vendored
Normal file
@ -0,0 +1,549 @@
|
|||||||
|
const __vite__fileDeps=["assets/search-docs-data-JLe790su.js","assets/vendor-BCKkA27H.js"],__vite__mapDeps=i=>i.map(i=>__vite__fileDeps[i]);
|
||||||
|
import { _ as __vitePreload } from "./GenericMountStory.vue2-BX48YWx2.js";
|
||||||
|
import { r as ref, k as watch, c as computed, d as defineComponent, o as openBlock, b as createElementBlock, aF as renderSlot, n as normalizeClass, m as withKeys, q as createBlock, g as unref, I as Icon, e as createVNode, f as createBaseVNode, z as createTextVNode, t as toDisplayString, F as Fragment, p as renderList, h as createCommentVNode, u as useCssVars, aS as toRefs, aT as useRouter, w as withCtx, aB as markRaw, b4 as useFocus, b5 as refDebounced, y as withDirectives, aM as vModelText, aL as withModifiers, b6 as flexsearch_bundleExports } from "./vendor-BCKkA27H.js";
|
||||||
|
import { u as useStoryStore } from "./story--eZPzd9h.js";
|
||||||
|
import { B as BaseEmpty } from "./BaseEmpty.vue-C0i8tRal.js";
|
||||||
|
import { o as onKeyboardShortcut, u as useCommandStore } from "./bundle-main-BYW_JKZH.js";
|
||||||
|
import { _ as _export_sfc, u as useScrollOnActive, B as BaseListItemLink } from "./MobileOverlay.vue2-BRmV4xb2.js";
|
||||||
|
function pipeline(a, b, c, d) {
|
||||||
|
if (a && (b && (a = replace(a, b)), this.matcher && (a = replace(a, this.matcher)), this.stemmer && 1 < a.length && (a = replace(a, this.stemmer)), d && 1 < a.length && (a = collapse(a)), c || "" === c)) {
|
||||||
|
const b2 = a.split(c);
|
||||||
|
return this.filter ? filter$1(b2, this.filter) : b2;
|
||||||
|
}
|
||||||
|
return a;
|
||||||
|
}
|
||||||
|
const regex_whitespace = /[\p{Z}\p{S}\p{P}\p{C}]+/u;
|
||||||
|
const regex_normalize = /[\u0300-\u036f]/g;
|
||||||
|
function normalize(a) {
|
||||||
|
return a.normalize && (a = a.normalize("NFD").replace(regex_normalize, "")), a;
|
||||||
|
}
|
||||||
|
function replace(a, b) {
|
||||||
|
for (let c = 0, d = b.length; c < d && (a = a.replace(b[c], b[c + 1]), !!a); c += 2)
|
||||||
|
;
|
||||||
|
return a;
|
||||||
|
}
|
||||||
|
function regex(a) {
|
||||||
|
return new RegExp(a, "g");
|
||||||
|
}
|
||||||
|
function collapse(a) {
|
||||||
|
let b = "", c = "";
|
||||||
|
for (let d, e = 0, f = a.length; e < f; e++)
|
||||||
|
(d = a[e]) !== c && (b += c = d);
|
||||||
|
return b;
|
||||||
|
}
|
||||||
|
function filter$1(a, b) {
|
||||||
|
const c = a.length, d = [];
|
||||||
|
for (let e = 0, f = 0; e < c; e++) {
|
||||||
|
const c2 = a[e];
|
||||||
|
c2 && !b[c2] && (d[f++] = c2);
|
||||||
|
}
|
||||||
|
return d;
|
||||||
|
}
|
||||||
|
const regex_a = regex("[àáâãäå]"), regex_e = regex("[èéêë]"), regex_i = regex("[ìíîï]"), regex_o = regex("[òóôõöő]"), regex_u = regex("[ùúûüű]"), regex_y = regex("[ýŷÿ]"), regex_n = regex("ñ"), regex_c = regex("[çc]"), regex_s = regex("ß"), regex_and = regex(" & "), pairs$1 = [regex_a, "a", regex_e, "e", regex_i, "i", regex_o, "o", regex_u, "u", regex_y, "y", regex_n, "n", regex_c, "k", regex_s, "s", regex_and, " and "];
|
||||||
|
function encode$2(a) {
|
||||||
|
return a = "" + a, pipeline.call(this, normalize(a).toLowerCase(), !a.normalize && pairs$1, regex_whitespace, false);
|
||||||
|
}
|
||||||
|
const regex_strip = /[^a-z0-9]+/, soundex = { b: "p", v: "f", w: "f", z: "s", x: "s", ß: "s", d: "t", n: "m", c: "k", g: "k", j: "k", q: "k", i: "e", y: "e", u: "o" };
|
||||||
|
function encode$1(a) {
|
||||||
|
a = encode$2.call(this, a).join(" ");
|
||||||
|
const b = [];
|
||||||
|
if (a) {
|
||||||
|
const c = a.split(regex_strip), d = c.length;
|
||||||
|
for (let e, f = 0, g = 0; f < d; f++)
|
||||||
|
if ((a = c[f]) && (!this.filter || !this.filter[a])) {
|
||||||
|
e = a[0];
|
||||||
|
let c2 = soundex[e] || e, d2 = c2;
|
||||||
|
for (let b2 = 1; b2 < a.length; b2++) {
|
||||||
|
e = a[b2];
|
||||||
|
const f2 = soundex[e] || e;
|
||||||
|
f2 && f2 !== d2 && (c2 += f2, d2 = f2);
|
||||||
|
}
|
||||||
|
b[g++] = c2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return b;
|
||||||
|
}
|
||||||
|
const charset = { encode, rtl: false, tokenize: "" };
|
||||||
|
const regex_ae = regex("ae"), regex_oe = regex("oe"), regex_sh = regex("sh"), regex_th = regex("th"), regex_ph = regex("ph"), regex_pf = regex("pf"), pairs = [regex_ae, "a", regex_oe, "o", regex_sh, "s", regex_th, "t", regex_ph, "f", regex_pf, "f", regex("(?![aeo])h(?![aeo])"), "", regex("(?!^[aeo])h(?!^[aeo])"), ""];
|
||||||
|
function encode(a, b) {
|
||||||
|
return a && (a = encode$1.call(this, a).join(" "), 2 < a.length && (a = replace(a, pairs)), !b && (1 < a.length && (a = collapse(a)), a && (a = a.split(" ")))), a;
|
||||||
|
}
|
||||||
|
const filter = ["a", "about", "above", "after", "again", "against", "all", "also", "am", "an", "and", "any", "are", "aren't", "as", "at", "be", "because", "been", "before", "being", "below", "both", "but", "by", "can", "cannot", "can't", "come", "could", "couldn't", "did", "didn't", "do", "does", "doesn't", "doing", "dont", "down", "during", "each", "even", "few", "first", "for", "from", "further", "get", "go", "had", "hadn't", "has", "hasn't", "have", "haven't", "having", "he", "hed", "her", "here", "here's", "hers", "herself", "hes", "him", "himself", "his", "how", "how's", "i", "id", "if", "ill", "im", "in", "into", "is", "isn't", "it", "it's", "itself", "i've", "just", "know", "let's", "like", "make", "me", "more", "most", "mustn't", "my", "myself", "new", "no", "nor", "not", "now", "of", "off", "on", "once", "only", "or", "other", "ought", "our", "our's", "ourselves", "out", "over", "own", "same", "say", "see", "shan't", "she", "she'd", "shell", "shes", "should", "shouldn't", "so", "some", "such", "than", "that", "that's", "the", "their", "theirs", "them", "themselves", "then", "there", "there's", "these", "they", "they'd", "they'll", "they're", "they've", "this", "those", "through", "time", "to", "too", "until", "up", "us", "very", "want", "was", "wasn't", "way", "we", "wed", "well", "were", "weren't", "we've", "what", "what's", "when", "when's", "where", "where's", "which", "while", "who", "whom", "who's", "why", "why's", "will", "with", "won't", "would", "wouldn't", "you", "you'd", "you'll", "your", "you're", "your's", "yourself", "yourselves", "you've"];
|
||||||
|
const stemmer = { ational: "ate", iveness: "ive", fulness: "ful", ousness: "ous", ization: "ize", tional: "tion", biliti: "ble", icate: "ic", ative: "", alize: "al", iciti: "ic", entli: "ent", ousli: "ous", alism: "al", ation: "ate", aliti: "al", iviti: "ive", ement: "", enci: "ence", anci: "ance", izer: "ize", alli: "al", ator: "ate", logi: "log", ical: "ic", ance: "", ence: "", ness: "", able: "", ible: "", ment: "", eli: "e", bli: "ble", ful: "", ant: "", ent: "", ism: "", ate: "", iti: "", ous: "", ive: "", ize: "", al: "", ou: "", er: "", ic: "" };
|
||||||
|
const matcher = {};
|
||||||
|
const language = { filter, stemmer, matcher };
|
||||||
|
function useSelection(list) {
|
||||||
|
const selectedIndex = ref(0);
|
||||||
|
watch(list, () => {
|
||||||
|
selectedIndex.value = 0;
|
||||||
|
});
|
||||||
|
function selectNext() {
|
||||||
|
selectedIndex.value++;
|
||||||
|
if (selectedIndex.value > list.value.length - 1) {
|
||||||
|
selectedIndex.value = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function selectPrevious() {
|
||||||
|
selectedIndex.value--;
|
||||||
|
if (selectedIndex.value < 0) {
|
||||||
|
selectedIndex.value = list.value.length - 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
selectedIndex: computed(() => selectedIndex.value),
|
||||||
|
selectNext,
|
||||||
|
selectPrevious
|
||||||
|
};
|
||||||
|
}
|
||||||
|
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
||||||
|
__name: "BaseListItem",
|
||||||
|
props: {
|
||||||
|
isActive: { type: Boolean }
|
||||||
|
},
|
||||||
|
emits: ["navigate"],
|
||||||
|
setup(__props, { emit: __emit }) {
|
||||||
|
const emit = __emit;
|
||||||
|
function handleNavigate() {
|
||||||
|
emit("navigate");
|
||||||
|
}
|
||||||
|
return (_ctx, _cache) => {
|
||||||
|
return openBlock(), createElementBlock("a", {
|
||||||
|
class: normalizeClass(["istoire-base-list-ite htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100", [
|
||||||
|
_ctx.$attrs.class,
|
||||||
|
_ctx.isActive ? "active htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black" : "hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900"
|
||||||
|
]]),
|
||||||
|
onClick: _cache[0] || (_cache[0] = ($event) => handleNavigate()),
|
||||||
|
onKeyup: [
|
||||||
|
_cache[1] || (_cache[1] = withKeys(($event) => handleNavigate(), ["enter"])),
|
||||||
|
_cache[2] || (_cache[2] = withKeys(($event) => handleNavigate(), ["space"]))
|
||||||
|
]
|
||||||
|
}, [
|
||||||
|
renderSlot(_ctx.$slots, "default")
|
||||||
|
], 34);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const _hoisted_1$3 = ["src", "alt"];
|
||||||
|
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
||||||
|
__name: "BaseIcon",
|
||||||
|
props: {
|
||||||
|
icon: {}
|
||||||
|
},
|
||||||
|
setup(__props) {
|
||||||
|
const props = __props;
|
||||||
|
const isUrl = computed(() => props.icon.startsWith("http") || props.icon.startsWith("data:image") || props.icon.startsWith(".") || props.icon.startsWith("/"));
|
||||||
|
return (_ctx, _cache) => {
|
||||||
|
return isUrl.value ? (openBlock(), createElementBlock("img", {
|
||||||
|
key: 0,
|
||||||
|
src: _ctx.icon,
|
||||||
|
alt: _ctx.icon,
|
||||||
|
class: "histoire-base-icon"
|
||||||
|
}, null, 8, _hoisted_1$3)) : (openBlock(), createBlock(unref(Icon), {
|
||||||
|
key: 1,
|
||||||
|
icon: _ctx.icon,
|
||||||
|
class: "histoire-base-icon"
|
||||||
|
}, null, 8, ["icon"]));
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const BaseIcon = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-2114f510"]]);
|
||||||
|
const _hoisted_1$2 = { class: "htw-flex-1" };
|
||||||
|
const _hoisted_2 = { class: "htw-flex" };
|
||||||
|
const _hoisted_3 = { class: "htw-ml-auto htw-opacity-40" };
|
||||||
|
const _hoisted_4 = {
|
||||||
|
key: 0,
|
||||||
|
class: "htw-flex htw-items-center htw-gap-0.5 htw-opacity-60"
|
||||||
|
};
|
||||||
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
||||||
|
__name: "SearchItemContent",
|
||||||
|
props: {
|
||||||
|
result: {},
|
||||||
|
selected: { type: Boolean }
|
||||||
|
},
|
||||||
|
setup(__props) {
|
||||||
|
const defaultIcons = {
|
||||||
|
story: "carbon:cube",
|
||||||
|
variant: "carbon:cube"
|
||||||
|
};
|
||||||
|
const kindLabels = {
|
||||||
|
story: "Story",
|
||||||
|
variant: "Variant",
|
||||||
|
command: "Command"
|
||||||
|
};
|
||||||
|
return (_ctx, _cache) => {
|
||||||
|
var _a;
|
||||||
|
return openBlock(), createElementBlock(Fragment, null, [
|
||||||
|
createVNode(BaseIcon, {
|
||||||
|
icon: _ctx.result.icon ?? defaultIcons[_ctx.result.kind],
|
||||||
|
class: normalizeClass(["htw-w-4 htw-h-4", [
|
||||||
|
!_ctx.selected ? [
|
||||||
|
_ctx.result.iconColor ? "bind-icon-color" : {
|
||||||
|
"htw-text-primary-500": _ctx.result.kind === "story",
|
||||||
|
"htw-text-gray-500": _ctx.result.kind === "variant"
|
||||||
|
}
|
||||||
|
] : [],
|
||||||
|
{
|
||||||
|
"colorize-black": _ctx.selected
|
||||||
|
}
|
||||||
|
]])
|
||||||
|
}, null, 8, ["icon", "class"]),
|
||||||
|
createBaseVNode("div", _hoisted_1$2, [
|
||||||
|
createBaseVNode("div", _hoisted_2, [
|
||||||
|
createTextVNode(toDisplayString(_ctx.result.title) + " ", 1),
|
||||||
|
createBaseVNode("span", _hoisted_3, toDisplayString(kindLabels[_ctx.result.kind]), 1)
|
||||||
|
]),
|
||||||
|
((_a = _ctx.result.path) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock("div", _hoisted_4, [
|
||||||
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.result.path, (p, index) => {
|
||||||
|
return openBlock(), createElementBlock("div", {
|
||||||
|
key: index,
|
||||||
|
class: "htw-flex htw-items-center htw-gap-0.5"
|
||||||
|
}, [
|
||||||
|
index > 0 ? (openBlock(), createBlock(unref(Icon), {
|
||||||
|
key: 0,
|
||||||
|
icon: "carbon:chevron-right",
|
||||||
|
class: "htw-w-4 htw-h-4 htw-mt-0.5 htw-opacity-50"
|
||||||
|
})) : createCommentVNode("", true),
|
||||||
|
createBaseVNode("span", null, toDisplayString(p), 1)
|
||||||
|
]);
|
||||||
|
}), 128))
|
||||||
|
])) : createCommentVNode("", true)
|
||||||
|
])
|
||||||
|
], 64);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const _hoisted_1$1 = ["data-selected"];
|
||||||
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
||||||
|
__name: "SearchItem",
|
||||||
|
props: {
|
||||||
|
result: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
close: () => true
|
||||||
|
},
|
||||||
|
setup(__props, { emit: __emit }) {
|
||||||
|
useCssVars((_ctx) => ({
|
||||||
|
"ddaae392": __props.result.iconColor
|
||||||
|
}));
|
||||||
|
const props = __props;
|
||||||
|
const emit = __emit;
|
||||||
|
const el = ref();
|
||||||
|
const { selected } = toRefs(props);
|
||||||
|
useScrollOnActive(selected, el);
|
||||||
|
const router = useRouter();
|
||||||
|
onKeyboardShortcut(["enter"], () => {
|
||||||
|
if (!props.selected)
|
||||||
|
return;
|
||||||
|
action();
|
||||||
|
});
|
||||||
|
function action(fromClick = false) {
|
||||||
|
if ("route" in props.result && !fromClick) {
|
||||||
|
router.push(props.result.route);
|
||||||
|
}
|
||||||
|
if ("onActivate" in props.result) {
|
||||||
|
props.result.onActivate();
|
||||||
|
}
|
||||||
|
emit("close");
|
||||||
|
}
|
||||||
|
return (_ctx, _cache) => {
|
||||||
|
return openBlock(), createElementBlock("div", {
|
||||||
|
ref_key: "el",
|
||||||
|
ref: el,
|
||||||
|
class: "histoire-search-item",
|
||||||
|
"data-test-id": "search-item",
|
||||||
|
"data-selected": unref(selected) ? "" : void 0
|
||||||
|
}, [
|
||||||
|
"route" in __props.result ? (openBlock(), createBlock(BaseListItemLink, {
|
||||||
|
key: 0,
|
||||||
|
to: __props.result.route,
|
||||||
|
"is-active": unref(selected),
|
||||||
|
class: "htw-px-6 htw-py-4 htw-gap-4",
|
||||||
|
onNavigate: _cache[0] || (_cache[0] = ($event) => action(true))
|
||||||
|
}, {
|
||||||
|
default: withCtx(() => [
|
||||||
|
createVNode(_sfc_main$2, {
|
||||||
|
result: __props.result,
|
||||||
|
selected: unref(selected)
|
||||||
|
}, null, 8, ["result", "selected"])
|
||||||
|
]),
|
||||||
|
_: 1
|
||||||
|
}, 8, ["to", "is-active"])) : createCommentVNode("", true),
|
||||||
|
"onActivate" in __props.result ? (openBlock(), createBlock(_sfc_main$4, {
|
||||||
|
key: 1,
|
||||||
|
"is-active": unref(selected),
|
||||||
|
class: "htw-px-6 htw-py-4 htw-gap-4",
|
||||||
|
onNavigate: _cache[1] || (_cache[1] = ($event) => action(true))
|
||||||
|
}, {
|
||||||
|
default: withCtx(() => [
|
||||||
|
createVNode(_sfc_main$2, {
|
||||||
|
result: __props.result,
|
||||||
|
selected: unref(selected)
|
||||||
|
}, null, 8, ["result", "selected"])
|
||||||
|
]),
|
||||||
|
_: 1
|
||||||
|
}, 8, ["is-active"])) : createCommentVNode("", true)
|
||||||
|
], 8, _hoisted_1$1);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const SearchItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-d75a2748"]]);
|
||||||
|
let searchData$1 = { "index": { "reg": '{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1}', "text.cfg": '{"doc":0,"opt":1}', "text.map": '[{"k":[0,1],"ke":[0,1],"kek":[0,1],"kekp":[0,1],"kekpo":[0,1],"kekpos":[0,1],"f":[2,3],"fl":[2,3],"flo":[2,3],"floa":[2,3],"float":[2,3],"e":[4,5],"em":[4,5],"emt":[4,5],"emte":[4,5],"emtek":[4,5],"emteke":[4,5],"emteker":[4,5],"s":[6,7],"se":[6,7],"sel":[6,7],"sele":[6,7],"selek":[6,7],"selekt":[6,7]},{"t":[1,3,5,7],"te":[1,3,5,7],"tef":[1,3,5,7],"tefa":[1,3,5,7],"tefao":[1,3,5,7],"tefaol":[1,3,5,7],"tefaolt":[1,3,5,7]},{},{},{},{},{},{},{}]', "text.ctx": "[{}]" }, "idMap": { "0": { "id": "src-lib-elements-checkbox-story-svelte", "kind": "story" }, "1": { "id": "src-lib-elements-checkbox-story-svelte:_default", "kind": "variant" }, "2": { "id": "src-lib-elements-float-story-svelte", "kind": "story" }, "3": { "id": "src-lib-elements-float-story-svelte:_default", "kind": "variant" }, "4": { "id": "src-lib-elements-integer-story-svelte", "kind": "story" }, "5": { "id": "src-lib-elements-integer-story-svelte:_default", "kind": "variant" }, "6": { "id": "src-lib-elements-select-story-svelte", "kind": "story" }, "7": { "id": "src-lib-elements-select-story-svelte:_default", "kind": "variant" } } };
|
||||||
|
const searchData = markRaw(searchData$1);
|
||||||
|
const _hoisted_1 = {
|
||||||
|
key: 1,
|
||||||
|
class: "htw-max-h-[400px] htw-overflow-y-auto htw-rounded-b-lg"
|
||||||
|
};
|
||||||
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||||
|
__name: "SearchPane",
|
||||||
|
props: {
|
||||||
|
shown: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
close: () => true
|
||||||
|
},
|
||||||
|
setup(__props, { emit: __emit }) {
|
||||||
|
const DocSearchData = () => __vitePreload(() => import("./search-docs-data-JLe790su.js"), true ? __vite__mapDeps([0,1]) : void 0);
|
||||||
|
const props = __props;
|
||||||
|
const emit = __emit;
|
||||||
|
function close() {
|
||||||
|
emit("close");
|
||||||
|
}
|
||||||
|
const input = ref();
|
||||||
|
const { focused } = useFocus(input, {
|
||||||
|
initialValue: true
|
||||||
|
});
|
||||||
|
watch(() => props.shown, (value) => {
|
||||||
|
if (value) {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
focused.value = true;
|
||||||
|
input.value.select();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const searchInputText = ref("");
|
||||||
|
const rateLimitedSearch = refDebounced(searchInputText, 50);
|
||||||
|
const storyStore = useStoryStore();
|
||||||
|
let titleSearchIndex;
|
||||||
|
let titleIdMap;
|
||||||
|
function createIndex() {
|
||||||
|
return new flexsearch_bundleExports.Document({
|
||||||
|
preset: "match",
|
||||||
|
document: {
|
||||||
|
id: "id",
|
||||||
|
index: [
|
||||||
|
"text"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
worker: true,
|
||||||
|
charset,
|
||||||
|
language,
|
||||||
|
tokenize: "forward"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
async function loadSearchIndex(data) {
|
||||||
|
titleSearchIndex = createIndex();
|
||||||
|
for (const key of Object.keys(data.index)) {
|
||||||
|
await titleSearchIndex.import(key, data.index[key]);
|
||||||
|
}
|
||||||
|
titleIdMap = data.idMap;
|
||||||
|
}
|
||||||
|
loadSearchIndex(searchData);
|
||||||
|
let docSearchIndex;
|
||||||
|
let docIdMap;
|
||||||
|
async function loadDocSearchIndex() {
|
||||||
|
async function load(data) {
|
||||||
|
docSearchIndex = createIndex();
|
||||||
|
for (const key of Object.keys(data.index)) {
|
||||||
|
await docSearchIndex.import(key, data.index[key]);
|
||||||
|
}
|
||||||
|
docIdMap = data.idMap;
|
||||||
|
if (rateLimitedSearch.value) {
|
||||||
|
searchOnDocField(rateLimitedSearch.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const searchDataModule = await DocSearchData();
|
||||||
|
load(searchDataModule.searchData);
|
||||||
|
searchDataModule.onUpdate((searchData2) => {
|
||||||
|
load(searchData2);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
loadDocSearchIndex();
|
||||||
|
const titleResults = ref([]);
|
||||||
|
watch(rateLimitedSearch, async (value) => {
|
||||||
|
const list = [];
|
||||||
|
const raw = await titleSearchIndex.search(value);
|
||||||
|
let rank = 0;
|
||||||
|
for (const field of raw) {
|
||||||
|
for (const id of field.result) {
|
||||||
|
const idMapData = titleIdMap[id];
|
||||||
|
if (!idMapData)
|
||||||
|
continue;
|
||||||
|
switch (idMapData.kind) {
|
||||||
|
case "story": {
|
||||||
|
list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank));
|
||||||
|
rank++;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "variant": {
|
||||||
|
const [storyId] = idMapData.id.split(":");
|
||||||
|
const story = storyStore.getStoryById(storyId);
|
||||||
|
const variant = storyStore.getVariantById(idMapData.id);
|
||||||
|
list.push(variantResultFactory(story, variant, rank));
|
||||||
|
rank++;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
titleResults.value = list;
|
||||||
|
});
|
||||||
|
const docsResults = ref([]);
|
||||||
|
async function searchOnDocField(query) {
|
||||||
|
if (docSearchIndex) {
|
||||||
|
const list = [];
|
||||||
|
const raw = await docSearchIndex.search(query);
|
||||||
|
let rank = 0;
|
||||||
|
for (const field of raw) {
|
||||||
|
for (const id of field.result) {
|
||||||
|
const idMapData = docIdMap[id];
|
||||||
|
if (!idMapData)
|
||||||
|
continue;
|
||||||
|
switch (idMapData.kind) {
|
||||||
|
case "story": {
|
||||||
|
list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank, "docs"));
|
||||||
|
rank++;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
docsResults.value = list;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
watch(rateLimitedSearch, searchOnDocField);
|
||||||
|
function storyResultFactory(story, rank, type = "title") {
|
||||||
|
return {
|
||||||
|
kind: "story",
|
||||||
|
rank,
|
||||||
|
id: `story:${story.id}`,
|
||||||
|
title: story.title,
|
||||||
|
route: {
|
||||||
|
name: "story",
|
||||||
|
params: {
|
||||||
|
storyId: story.id
|
||||||
|
},
|
||||||
|
query: {
|
||||||
|
...type === "docs" ? { tab: "docs" } : {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
path: story.file.path.slice(0, -1),
|
||||||
|
icon: story.icon,
|
||||||
|
iconColor: story.iconColor
|
||||||
|
};
|
||||||
|
}
|
||||||
|
function variantResultFactory(story, variant, rank, type = "title") {
|
||||||
|
return {
|
||||||
|
kind: "variant",
|
||||||
|
rank,
|
||||||
|
id: `variant:${story.id}:${variant.id}`,
|
||||||
|
title: variant.title,
|
||||||
|
route: {
|
||||||
|
name: "story",
|
||||||
|
params: {
|
||||||
|
storyId: story.id
|
||||||
|
},
|
||||||
|
query: {
|
||||||
|
variantId: variant.id,
|
||||||
|
...type === "docs" ? { tab: "docs" } : {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
path: [...story.file.path ?? [], story.title],
|
||||||
|
icon: variant.icon,
|
||||||
|
iconColor: variant.iconColor
|
||||||
|
};
|
||||||
|
}
|
||||||
|
const commandResults = computed(() => {
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
useCommandStore();
|
||||||
|
const results = computed(() => {
|
||||||
|
const list = [
|
||||||
|
...commandResults.value,
|
||||||
|
...titleResults.value
|
||||||
|
];
|
||||||
|
const seen = {};
|
||||||
|
for (const r of titleResults.value) {
|
||||||
|
seen[r.id] = true;
|
||||||
|
}
|
||||||
|
for (const r of docsResults.value) {
|
||||||
|
if (!seen[r.id]) {
|
||||||
|
list.push(r);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return list;
|
||||||
|
});
|
||||||
|
const {
|
||||||
|
selectedIndex,
|
||||||
|
selectNext,
|
||||||
|
selectPrevious
|
||||||
|
} = useSelection(results);
|
||||||
|
return (_ctx, _cache) => {
|
||||||
|
return openBlock(), createElementBlock(Fragment, null, [
|
||||||
|
createBaseVNode("div", {
|
||||||
|
class: "histoire-search-pane htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500",
|
||||||
|
onClick: _cache[4] || (_cache[4] = ($event) => focused.value = true)
|
||||||
|
}, [
|
||||||
|
createVNode(unref(Icon), {
|
||||||
|
icon: "carbon:search",
|
||||||
|
class: "flex-none htw-w-4 htw-h-4"
|
||||||
|
}),
|
||||||
|
withDirectives(createBaseVNode("input", {
|
||||||
|
ref_key: "input",
|
||||||
|
ref: input,
|
||||||
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchInputText.value = $event),
|
||||||
|
placeholder: "Search for stories, variants...",
|
||||||
|
class: "htw-bg-transparent htw-w-full htw-flex-1 htw-pl-0 htw-pr-6 htw-py-4 htw-outline-none",
|
||||||
|
onKeydown: [
|
||||||
|
_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => unref(selectNext)(), ["prevent"]), ["down"])),
|
||||||
|
_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => unref(selectPrevious)(), ["prevent"]), ["up"])),
|
||||||
|
_cache[3] || (_cache[3] = withKeys(($event) => close(), ["escape"]))
|
||||||
|
]
|
||||||
|
}, null, 544), [
|
||||||
|
[vModelText, searchInputText.value]
|
||||||
|
])
|
||||||
|
]),
|
||||||
|
unref(rateLimitedSearch) && !results.value.length ? (openBlock(), createBlock(BaseEmpty, {
|
||||||
|
key: 0,
|
||||||
|
class: "no-animation"
|
||||||
|
}, {
|
||||||
|
default: withCtx(() => [
|
||||||
|
createTextVNode(" No results ")
|
||||||
|
]),
|
||||||
|
_: 1
|
||||||
|
})) : results.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
|
||||||
|
(openBlock(true), createElementBlock(Fragment, null, renderList(results.value, (result, index) => {
|
||||||
|
return openBlock(), createBlock(SearchItem, {
|
||||||
|
key: result.id,
|
||||||
|
result,
|
||||||
|
selected: index === unref(selectedIndex),
|
||||||
|
onClose: _cache[5] || (_cache[5] = ($event) => close())
|
||||||
|
}, null, 8, ["result", "selected"]);
|
||||||
|
}), 128))
|
||||||
|
])) : createCommentVNode("", true)
|
||||||
|
], 64);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
export {
|
||||||
|
_sfc_main as default
|
||||||
|
};
|
||||||
2763
packages/ui/.histoire/dist/assets/StoryView.vue-BFx-CBXY.js
vendored
Normal file
2763
packages/ui/.histoire/dist/assets/StoryView.vue-BFx-CBXY.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,4 @@
|
|||||||
|
const __resolved__virtual_storySource_srcLibElementsCheckboxStorySvelte = '<script lang="ts">\n import type { Hst } from "@histoire/plugin-svelte";\n export let Hst: Hst;\n import Checkbox from "./Checkbox.svelte";\n<\/script>\n\n<Hst.Story>\n <div>\n <Checkbox checked={false} />\n </div>\n</Hst.Story>\n\n<style>\n div {\n padding: 1em;\n }\n</style>\n';
|
||||||
|
export {
|
||||||
|
__resolved__virtual_storySource_srcLibElementsCheckboxStorySvelte as default
|
||||||
|
};
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
const __resolved__virtual_storySource_srcLibElementsFloatStorySvelte = '<script lang="ts">\n import type { Hst } from "@histoire/plugin-svelte";\n export let Hst: Hst;\n import Float from "./Float.svelte";\n<\/script>\n\n<Hst.Story>\n <div>\n <Float value={0} min={0} max={6.9} />\n </div>\n</Hst.Story>\n\n<style>\n div {\n padding: 1em;\n }\n</style>\n';
|
||||||
|
export {
|
||||||
|
__resolved__virtual_storySource_srcLibElementsFloatStorySvelte as default
|
||||||
|
};
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
const __resolved__virtual_storySource_srcLibElementsIntegerStorySvelte = '<script lang="ts">\n import type { Hst } from "@histoire/plugin-svelte";\n export let Hst: Hst;\n import Integer from "./Integer.svelte";\n import StorySettings from "../helpers/StorySettings.svelte";\n<\/script>\n\n<Hst.Story>\n <div>\n <Integer value={5} min={0} max={42} />\n </div>\n <svelte:fragment slot="controls">\n <StorySettings/>\n </svelte:fragment>\n</Hst.Story>\n\n<style>\n div {\n padding: 1em;\n }\n</style>\n';
|
||||||
|
export {
|
||||||
|
__resolved__virtual_storySource_srcLibElementsIntegerStorySvelte as default
|
||||||
|
};
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
const __resolved__virtual_storySource_srcLibElementsSelectStorySvelte = '<script lang="ts">\n import type { Hst } from "@histoire/plugin-svelte";\n export let Hst: Hst;\n import Select from "./Select.svelte";\n<\/script>\n\n<Hst.Story>\n <div>\n <Select value={"banana"} options={["strawberry", "apple", "banana"]} />\n </div>\n</Hst.Story>\n\n<style>\n div {\n padding: 1em;\n }\n</style>\n';
|
||||||
|
export {
|
||||||
|
__resolved__virtual_storySource_srcLibElementsSelectStorySvelte as default
|
||||||
|
};
|
||||||
823
packages/ui/.histoire/dist/assets/bundle-main-BYW_JKZH.js
vendored
Normal file
823
packages/ui/.histoire/dist/assets/bundle-main-BYW_JKZH.js
vendored
Normal file
File diff suppressed because one or more lines are too long
81
packages/ui/.histoire/dist/assets/bundle-sandbox-CSn-Rucl.js
vendored
Normal file
81
packages/ui/.histoire/dist/assets/bundle-sandbox-CSn-Rucl.js
vendored
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
import { N as parseQuery, r as ref, K as createApp, L as createPinia, k as watch, c as computed, J as onMounted, O as h, P as applyState } from "./vendor-BCKkA27H.js";
|
||||||
|
import { m as mapFile, f as files, b as _sfc_main, h as histoireConfig, i as isDark } from "./GenericMountStory.vue2-BX48YWx2.js";
|
||||||
|
import { S as STATE_SYNC, P as PREVIEW_SETTINGS_SYNC, a as applyPreviewSettings, b as SANDBOX_READY, _ as _sfc_main$1, t as toRawDeep } from "./state-BFrY_pEm.js";
|
||||||
|
const query = parseQuery(window.location.search);
|
||||||
|
const file = ref(mapFile(files.find((f) => f.id === query.storyId)));
|
||||||
|
const app = createApp({
|
||||||
|
name: "SandboxApp",
|
||||||
|
setup() {
|
||||||
|
const story = computed(() => file.value.story);
|
||||||
|
const variant = computed(() => {
|
||||||
|
var _a;
|
||||||
|
return (_a = story.value) == null ? void 0 : _a.variants.find((v) => v.id === query.variantId);
|
||||||
|
});
|
||||||
|
let synced = false;
|
||||||
|
let mounted = false;
|
||||||
|
window.addEventListener("message", (event) => {
|
||||||
|
var _a, _b;
|
||||||
|
if (((_a = event.data) == null ? void 0 : _a.type) === STATE_SYNC) {
|
||||||
|
if (!mounted)
|
||||||
|
return;
|
||||||
|
synced = true;
|
||||||
|
applyState(variant.value.state, event.data.state);
|
||||||
|
} else if (((_b = event.data) == null ? void 0 : _b.type) === PREVIEW_SETTINGS_SYNC) {
|
||||||
|
applyPreviewSettings(event.data.settings);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
watch(() => variant.value.state, (value) => {
|
||||||
|
var _a;
|
||||||
|
if (synced && mounted) {
|
||||||
|
synced = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
(_a = window.parent) == null ? void 0 : _a.postMessage({
|
||||||
|
type: STATE_SYNC,
|
||||||
|
state: toRawDeep(value, true)
|
||||||
|
});
|
||||||
|
}, {
|
||||||
|
deep: true
|
||||||
|
});
|
||||||
|
onMounted(() => {
|
||||||
|
mounted = true;
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
story,
|
||||||
|
variant
|
||||||
|
};
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
return [
|
||||||
|
h("div", { class: "htw-sandbox-hidden" }, [
|
||||||
|
h(_sfc_main, {
|
||||||
|
key: file.value.story.id,
|
||||||
|
story: file.value.story
|
||||||
|
})
|
||||||
|
]),
|
||||||
|
this.story && this.variant ? h(_sfc_main$1, {
|
||||||
|
story: this.story,
|
||||||
|
variant: this.variant,
|
||||||
|
onReady: () => {
|
||||||
|
var _a;
|
||||||
|
(_a = window.parent) == null ? void 0 : _a.postMessage({
|
||||||
|
type: SANDBOX_READY
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}) : null
|
||||||
|
];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
app.use(createPinia());
|
||||||
|
app.mount("#app");
|
||||||
|
watch(isDark, (value) => {
|
||||||
|
if (value) {
|
||||||
|
document.documentElement.classList.add(histoireConfig.sandboxDarkClass);
|
||||||
|
document.documentElement.classList.add(histoireConfig.theme.darkClass);
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove(histoireConfig.sandboxDarkClass);
|
||||||
|
document.documentElement.classList.remove(histoireConfig.theme.darkClass);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
immediate: true
|
||||||
|
});
|
||||||
89
packages/ui/.histoire/dist/assets/histoire-svelte-text-DosH-Q74.svg
vendored
Normal file
89
packages/ui/.histoire/dist/assets/histoire-svelte-text-DosH-Q74.svg
vendored
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="1536"
|
||||||
|
height="512"
|
||||||
|
viewBox="0 0 1536 512"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<g
|
||||||
|
id="layer1">
|
||||||
|
<rect
|
||||||
|
style="opacity:0.5;fill:#ff3e00;fill-opacity:1;stroke-width:1.00375"
|
||||||
|
id="rect1372"
|
||||||
|
width="314.30923"
|
||||||
|
height="406.60901"
|
||||||
|
x="-26.565063"
|
||||||
|
y="134.75079"
|
||||||
|
transform="rotate(-23.821262)"
|
||||||
|
ry="8" />
|
||||||
|
<rect
|
||||||
|
style="fill:#ff3e00;fill-opacity:1;stroke-width:1.00375"
|
||||||
|
id="rect850"
|
||||||
|
width="314.30923"
|
||||||
|
height="406.60901"
|
||||||
|
x="77.571838"
|
||||||
|
y="72.808708"
|
||||||
|
ry="8"
|
||||||
|
transform="rotate(-4.5744534)" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="layer3">
|
||||||
|
<path
|
||||||
|
id="path1657-3"
|
||||||
|
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:8.34923;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 359.38947,355.95134 320.72935,176.52942 238.34613,238.94118 Z M 273.64124,273.06608 152.59788,156.05591 191.25804,335.47786 Z" />
|
||||||
|
<g
|
||||||
|
aria-label="Histoire"
|
||||||
|
id="text1821"
|
||||||
|
style="font-size:231.926px;line-height:1.25;font-family:Sen;-inkscape-font-specification:Sen;fill:#ff3e00;stroke-width:5.79813;fill-opacity:1"
|
||||||
|
transform="matrix(1.1500556,0,0,1.1500556,-105.40156,-38.414233)">
|
||||||
|
<path
|
||||||
|
d="M 693.87591,344.24783 V 181.89964 h 25.04801 v 162.34819 z m -105.99018,0 V 181.89964 h 25.04801 v 162.34819 z m 10.90052,-68.88202 v -24.1203 h 106.22211 v 24.1203 z"
|
||||||
|
style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#ff3e00;fill-opacity:1"
|
||||||
|
id="path16857" />
|
||||||
|
<path
|
||||||
|
d="M 762.294,344.24783 V 222.48669 h 23.88838 v 121.76114 z m 11.5963,-148.66456 q -7.65356,0 -11.82822,-3.94274 -4.17467,-3.94274 -4.17467,-11.13245 0,-6.72585 4.17467,-10.90052 4.40659,-4.17467 11.82822,-4.17467 7.65356,0 11.82823,3.94274 4.17466,3.94275 4.17466,11.13245 0,6.72585 -4.40659,10.90052 -4.17467,4.17467 -11.5963,4.17467 z"
|
||||||
|
style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#ff3e00;fill-opacity:1"
|
||||||
|
id="path16859" />
|
||||||
|
<path
|
||||||
|
d="m 863.41371,346.56709 q -15.30711,0 -27.59919,-5.33429 -12.29208,-5.3343 -20.40949,-15.77097 l 16.23482,-13.91556 q 6.95778,8.11741 15.07519,11.82822 8.34934,3.47889 18.78601,3.47889 4.17466,0 7.65355,-0.9277 3.71082,-1.15963 6.26201,-3.24696 2.78311,-2.08734 4.17466,-4.87045 1.39156,-3.01504 1.39156,-6.49393 0,-6.03007 -4.40659,-9.74089 -2.31926,-1.62348 -7.42164,-3.47889 -4.87044,-2.08733 -12.75593,-4.17467 -13.4517,-3.47889 -22.03297,-7.88548 -8.58126,-4.4066 -13.21978,-9.97282 -3.47889,-4.40659 -5.10237,-9.50897 -1.62348,-5.33429 -1.62348,-11.59629 0,-7.65356 3.24696,-13.91556 3.47889,-6.49393 9.27704,-11.13245 6.03008,-4.87045 13.91556,-7.42163 8.11741,-2.55119 17.16253,-2.55119 8.58126,0 16.93059,2.31926 8.58126,2.31926 15.77097,6.72585 7.18971,4.4066 12.06015,10.43667 l -13.68363,15.07519 q -4.4066,-4.40659 -9.74089,-7.65355 -5.10237,-3.47889 -10.43667,-5.3343 -5.3343,-1.85541 -9.74089,-1.85541 -4.87045,0 -8.81319,0.9277 -3.94274,0.92771 -6.72586,2.78312 -2.55118,1.8554 -3.94274,4.63852 -1.39155,2.78311 -1.39155,6.262 0.23192,3.01504 1.39155,5.79815 1.39156,2.55118 3.71082,4.40659 2.55118,1.85541 7.65356,3.94274 5.10237,2.08734 12.98785,3.94274 11.5963,3.01504 19.01793,6.72586 7.65356,3.47889 12.06015,8.11741 4.63852,4.40659 6.49393,10.20474 1.85541,5.79815 1.85541,12.98786 0,10.43667 -6.03008,18.786 -5.79815,8.11741 -15.77096,12.75593 -9.97282,4.63852 -22.2649,4.63852 z"
|
||||||
|
style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#ff3e00;fill-opacity:1"
|
||||||
|
id="path16861" />
|
||||||
|
<path
|
||||||
|
d="M 948.99398,344.24783 V 191.4086 h 23.88838 v 152.83923 z m -25.27993,-98.56854 v -23.1926 h 77.46325 v 23.1926 z"
|
||||||
|
style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#ff3e00;fill-opacity:1"
|
||||||
|
id="path16863" />
|
||||||
|
<path
|
||||||
|
d="m 1076.5528,346.56709 q -17.8583,0 -32.0058,-8.11741 -13.9156,-8.34933 -22.033,-22.49682 -8.1174,-14.37941 -8.1174,-32.70156 0,-18.32216 8.1174,-32.46964 8.1174,-14.37941 22.033,-22.49682 14.1475,-8.34934 32.0058,-8.34934 17.6263,0 31.5419,8.34934 14.1475,8.11741 22.2649,22.49682 8.1174,14.14748 8.1174,32.46964 0,18.32215 -8.1174,32.70156 -8.1174,14.14749 -22.2649,22.49682 -13.9156,8.11741 -31.5419,8.11741 z m 0,-21.80104 q 10.9005,0 19.4818,-5.3343 8.5812,-5.56622 13.4517,-14.84326 4.8704,-9.50897 4.6385,-21.33719 0.2319,-12.06016 -4.6385,-21.33719 -4.8705,-9.50897 -13.4517,-14.84327 -8.5813,-5.3343 -19.4818,-5.3343 -10.9005,0 -19.7137,5.56623 -8.5813,5.3343 -13.4517,14.84326 -4.8705,9.27704 -4.6386,21.10527 -0.2319,11.82822 4.6386,21.33719 4.8704,9.27704 13.4517,14.84326 8.8132,5.3343 19.7137,5.3343 z"
|
||||||
|
style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#ff3e00;fill-opacity:1"
|
||||||
|
id="path16865" />
|
||||||
|
<path
|
||||||
|
d="M 1168.3954,344.24783 V 222.48669 h 23.8884 v 121.76114 z m 11.5963,-148.66456 q -7.6536,0 -11.8282,-3.94274 -4.1747,-3.94274 -4.1747,-11.13245 0,-6.72585 4.1747,-10.90052 4.4065,-4.17467 11.8282,-4.17467 7.6535,0 11.8282,3.94274 4.1747,3.94275 4.1747,11.13245 0,6.72585 -4.4066,10.90052 -4.1747,4.17467 -11.5963,4.17467 z"
|
||||||
|
style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#ff3e00;fill-opacity:1"
|
||||||
|
id="path16867" />
|
||||||
|
<path
|
||||||
|
d="M 1228.928,344.24783 V 222.48669 h 24.1203 v 38.26779 l -2.3192,-9.27704 q 2.5512,-8.81319 8.5812,-16.0029 6.262,-7.1897 14.1475,-11.36437 8.1174,-4.17467 16.6987,-4.17467 3.9427,0 7.4216,0.69578 3.7109,0.69578 5.7982,1.62348 l -6.262,25.97571 q -2.7831,-1.15963 -6.262,-1.85541 -3.247,-0.9277 -6.4939,-0.9277 -6.262,0 -12.0602,2.55119 -5.5662,2.31926 -9.9728,6.72585 -4.1747,4.17467 -6.7259,9.97282 -2.5512,5.56622 -2.5512,12.29207 v 67.25854 z"
|
||||||
|
style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#ff3e00;fill-opacity:1"
|
||||||
|
id="path16869" />
|
||||||
|
<path
|
||||||
|
d="m 1374.1134,346.56709 q -18.786,0 -33.3973,-7.88548 -14.3794,-8.11741 -22.7288,-22.03297 -8.1174,-13.91556 -8.1174,-32.00579 0,-14.37941 4.6386,-26.20763 4.6385,-11.82823 12.7559,-20.40949 8.3493,-8.81319 19.7137,-13.45171 11.5963,-4.87045 25.048,-4.87045 11.8282,0 22.033,4.63852 10.2047,4.4066 17.6263,12.29208 7.6536,7.88549 11.5963,18.78601 4.1747,10.66859 3.9428,23.42452 l -0.2319,10.20475 h -99.4963 l -5.3343,-19.01794 h 84.1891 l -3.4788,3.94275 v -5.56623 q -0.6958,-7.65355 -5.1024,-13.68363 -4.4066,-6.03008 -11.1325,-9.50897 -6.7258,-3.47889 -14.6113,-3.47889 -12.524,0 -21.1053,4.87045 -8.5812,4.63852 -12.9878,13.91556 -4.4066,9.04511 -4.4066,22.49682 0,12.75593 5.3343,22.2649 5.3343,9.27704 15.0752,14.37941 9.7409,5.10237 22.4968,5.10237 9.0451,0 16.6987,-3.01504 7.8855,-3.01504 16.9306,-10.90052 l 12.0601,16.9306 q -5.5662,5.56622 -13.6836,9.74089 -7.8855,4.17467 -16.9306,6.72585 -8.8132,2.31926 -17.3945,2.31926 z"
|
||||||
|
style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#ff3e00;fill-opacity:1"
|
||||||
|
id="path16871" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="layer2"
|
||||||
|
style="display:none">
|
||||||
|
<path
|
||||||
|
id="path1657"
|
||||||
|
style="fill:#b4fae2;fill-opacity:1;stroke:#b4fae2;stroke-width:8;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 296,103.98242 -135.53125,177.9668 h 88.70117 z M 262.83008,230.05078 216,408.01758 351.53125,230.05078 Z"
|
||||||
|
transform="rotate(-4.156553,256,256.00691)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 7.7 KiB |
9
packages/ui/.histoire/dist/assets/search-docs-data-JLe790su.js
vendored
Normal file
9
packages/ui/.histoire/dist/assets/search-docs-data-JLe790su.js
vendored
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { aB as markRaw } from "./vendor-BCKkA27H.js";
|
||||||
|
let searchData$1 = { "index": { "reg": "{}", "text.cfg": '{"doc":0,"opt":1}', "text.map": "[{},{},{},{},{},{},{},{},{}]", "text.ctx": "[{}]" }, "idMap": {} };
|
||||||
|
const searchData = markRaw(searchData$1);
|
||||||
|
function onUpdate(cb) {
|
||||||
|
}
|
||||||
|
export {
|
||||||
|
onUpdate,
|
||||||
|
searchData
|
||||||
|
};
|
||||||
100
packages/ui/.histoire/dist/assets/state-BFrY_pEm.js
vendored
Normal file
100
packages/ui/.histoire/dist/assets/state-BFrY_pEm.js
vendored
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
import { d as clientSupportPlugins, h as histoireConfig } from "./GenericMountStory.vue2-BX48YWx2.js";
|
||||||
|
import { d as defineComponent, r as ref, aC as watchEffect, aB as markRaw, o as openBlock, q as createBlock, aD as mergeProps, aE as resolveDynamicComponent, h as createCommentVNode, E as reactive, v as isRef, g as unref } from "./vendor-BCKkA27H.js";
|
||||||
|
const __default__ = {
|
||||||
|
inheritAttrs: false
|
||||||
|
};
|
||||||
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||||
|
...__default__,
|
||||||
|
__name: "GenericRenderStory",
|
||||||
|
props: {
|
||||||
|
story: {}
|
||||||
|
},
|
||||||
|
setup(__props) {
|
||||||
|
const props = __props;
|
||||||
|
const mountComponent = ref(null);
|
||||||
|
watchEffect(async () => {
|
||||||
|
var _a;
|
||||||
|
const clientPlugin = clientSupportPlugins[(_a = props.story.file) == null ? void 0 : _a.supportPluginId];
|
||||||
|
if (clientPlugin) {
|
||||||
|
try {
|
||||||
|
const pluginModule = await clientPlugin();
|
||||||
|
mountComponent.value = markRaw(pluginModule.RenderStory);
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return (_ctx, _cache) => {
|
||||||
|
return mountComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(mountComponent.value), mergeProps({
|
||||||
|
key: 0,
|
||||||
|
class: "histoire-generic-render-story __histoire-render-story",
|
||||||
|
story: _ctx.story
|
||||||
|
}, _ctx.$attrs), null, 16, ["story"])) : createCommentVNode("", true);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const STATE_SYNC = "__histoire:state-sync";
|
||||||
|
const SANDBOX_READY = "__histoire:sandbox-ready";
|
||||||
|
const EVENT_SEND = "__histoire:event";
|
||||||
|
const PREVIEW_SETTINGS_SYNC = "__histoire:preview-settings-sync";
|
||||||
|
const receivedSettings = reactive({});
|
||||||
|
function applyPreviewSettings(settings) {
|
||||||
|
Object.assign(receivedSettings, settings);
|
||||||
|
document.documentElement.setAttribute("dir", settings.textDirection);
|
||||||
|
const contrastColor = getContrastColor(settings);
|
||||||
|
document.documentElement.style.setProperty("--histoire-contrast-color", contrastColor);
|
||||||
|
if (histoireConfig.autoApplyContrastColor) {
|
||||||
|
document.documentElement.style.color = contrastColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function getContrastColor(setting) {
|
||||||
|
var _a;
|
||||||
|
return ((_a = histoireConfig.backgroundPresets.find((preset) => preset.color === setting.backgroundColor)) == null ? void 0 : _a.contrastColor) ?? "unset";
|
||||||
|
}
|
||||||
|
const isObject = (val) => val !== null && typeof val === "object";
|
||||||
|
function toRawDeep(val, clean = false, seen = /* @__PURE__ */ new WeakMap()) {
|
||||||
|
const unwrappedValue = isRef(val) ? unref(val) : val;
|
||||||
|
if (typeof unwrappedValue === "symbol") {
|
||||||
|
return unwrappedValue.toString();
|
||||||
|
}
|
||||||
|
if (!isObject(unwrappedValue)) {
|
||||||
|
return unwrappedValue;
|
||||||
|
}
|
||||||
|
if (seen.has(unwrappedValue)) {
|
||||||
|
return seen.get(unwrappedValue);
|
||||||
|
}
|
||||||
|
if (Array.isArray(unwrappedValue)) {
|
||||||
|
const result = [];
|
||||||
|
seen.set(unwrappedValue, result);
|
||||||
|
let list = unwrappedValue.map((value) => toRawDeep(value, clean, seen));
|
||||||
|
if (clean) {
|
||||||
|
list = list.filter((value) => typeof value !== "function");
|
||||||
|
}
|
||||||
|
result.push(...list);
|
||||||
|
return result;
|
||||||
|
} else {
|
||||||
|
const result = {};
|
||||||
|
seen.set(unwrappedValue, result);
|
||||||
|
toRawObject(unwrappedValue, result, clean, seen);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function toRawObject(obj, target, clean = false, seen = /* @__PURE__ */ new WeakMap()) {
|
||||||
|
Object.keys(obj).forEach((key) => {
|
||||||
|
if (clean && typeof obj[key] === "function") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
target[key] = toRawDeep(obj[key], clean, seen);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
export {
|
||||||
|
EVENT_SEND as E,
|
||||||
|
PREVIEW_SETTINGS_SYNC as P,
|
||||||
|
STATE_SYNC as S,
|
||||||
|
_sfc_main as _,
|
||||||
|
applyPreviewSettings as a,
|
||||||
|
SANDBOX_READY as b,
|
||||||
|
getContrastColor as g,
|
||||||
|
toRawDeep as t
|
||||||
|
};
|
||||||
44
packages/ui/.histoire/dist/assets/story--eZPzd9h.js
vendored
Normal file
44
packages/ui/.histoire/dist/assets/story--eZPzd9h.js
vendored
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import { i as defineStore, r as ref, c as computed } from "./vendor-BCKkA27H.js";
|
||||||
|
import { r as router } from "./GenericMountStory.vue2-BX48YWx2.js";
|
||||||
|
const useStoryStore = defineStore("story", () => {
|
||||||
|
const stories = ref([]);
|
||||||
|
function setStories(value) {
|
||||||
|
stories.value = value;
|
||||||
|
}
|
||||||
|
const currentStory = computed(() => stories.value.find((s) => s.id === router.currentRoute.value.params.storyId));
|
||||||
|
const currentVariant = computed(() => {
|
||||||
|
var _a;
|
||||||
|
return (_a = currentStory.value) == null ? void 0 : _a.variants.find((v) => v.id === router.currentRoute.value.query.variantId);
|
||||||
|
});
|
||||||
|
const maps = computed(() => {
|
||||||
|
const storyMap = /* @__PURE__ */ new Map();
|
||||||
|
const variantMap = /* @__PURE__ */ new Map();
|
||||||
|
for (const story of stories.value) {
|
||||||
|
storyMap.set(story.id, story);
|
||||||
|
for (const variant of story.variants) {
|
||||||
|
variantMap.set(`${story.id}:${variant.id}`, variant);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
stories: storyMap,
|
||||||
|
variants: variantMap
|
||||||
|
};
|
||||||
|
});
|
||||||
|
function getStoryById(id) {
|
||||||
|
return maps.value.stories.get(id);
|
||||||
|
}
|
||||||
|
function getVariantById(idWithStoryId) {
|
||||||
|
return maps.value.variants.get(idWithStoryId);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
stories,
|
||||||
|
setStories,
|
||||||
|
currentStory,
|
||||||
|
currentVariant,
|
||||||
|
getStoryById,
|
||||||
|
getVariantById
|
||||||
|
};
|
||||||
|
});
|
||||||
|
export {
|
||||||
|
useStoryStore as u
|
||||||
|
};
|
||||||
3127
packages/ui/.histoire/dist/assets/style-D55TbI9c.css
vendored
Normal file
3127
packages/ui/.histoire/dist/assets/style-D55TbI9c.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
40964
packages/ui/.histoire/dist/assets/vendor-BCKkA27H.js
vendored
Normal file
40964
packages/ui/.histoire/dist/assets/vendor-BCKkA27H.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
105
packages/ui/.histoire/dist/histoire.json
vendored
Normal file
105
packages/ui/.histoire/dist/histoire.json
vendored
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
{
|
||||||
|
"stories": [
|
||||||
|
{
|
||||||
|
"id": "src-lib-elements-checkbox-story-svelte",
|
||||||
|
"title": "Checkbox",
|
||||||
|
"group": null,
|
||||||
|
"layout": {
|
||||||
|
"type": "single",
|
||||||
|
"iframe": true
|
||||||
|
},
|
||||||
|
"icon": null,
|
||||||
|
"iconColor": null,
|
||||||
|
"docsOnly": false,
|
||||||
|
"variants": [
|
||||||
|
{
|
||||||
|
"id": "_default",
|
||||||
|
"title": "default"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"relativePath": "src/lib/elements/Checkbox.story.svelte",
|
||||||
|
"supportPluginId": "svelte4",
|
||||||
|
"treePath": [
|
||||||
|
"Checkbox"
|
||||||
|
],
|
||||||
|
"virtual": false,
|
||||||
|
"markdownFile": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "src-lib-elements-float-story-svelte",
|
||||||
|
"title": "Float",
|
||||||
|
"group": null,
|
||||||
|
"layout": {
|
||||||
|
"type": "single",
|
||||||
|
"iframe": true
|
||||||
|
},
|
||||||
|
"icon": null,
|
||||||
|
"iconColor": null,
|
||||||
|
"docsOnly": false,
|
||||||
|
"variants": [
|
||||||
|
{
|
||||||
|
"id": "_default",
|
||||||
|
"title": "default"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"relativePath": "src/lib/elements/Float.story.svelte",
|
||||||
|
"supportPluginId": "svelte4",
|
||||||
|
"treePath": [
|
||||||
|
"Float"
|
||||||
|
],
|
||||||
|
"virtual": false,
|
||||||
|
"markdownFile": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "src-lib-elements-integer-story-svelte",
|
||||||
|
"title": "Integer",
|
||||||
|
"group": null,
|
||||||
|
"layout": {
|
||||||
|
"type": "single",
|
||||||
|
"iframe": true
|
||||||
|
},
|
||||||
|
"icon": null,
|
||||||
|
"iconColor": null,
|
||||||
|
"docsOnly": false,
|
||||||
|
"variants": [
|
||||||
|
{
|
||||||
|
"id": "_default",
|
||||||
|
"title": "default"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"relativePath": "src/lib/elements/Integer.story.svelte",
|
||||||
|
"supportPluginId": "svelte4",
|
||||||
|
"treePath": [
|
||||||
|
"Integer"
|
||||||
|
],
|
||||||
|
"virtual": false,
|
||||||
|
"markdownFile": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "src-lib-elements-select-story-svelte",
|
||||||
|
"title": "Select",
|
||||||
|
"group": null,
|
||||||
|
"layout": {
|
||||||
|
"type": "single",
|
||||||
|
"iframe": true
|
||||||
|
},
|
||||||
|
"icon": null,
|
||||||
|
"iconColor": null,
|
||||||
|
"docsOnly": false,
|
||||||
|
"variants": [
|
||||||
|
{
|
||||||
|
"id": "_default",
|
||||||
|
"title": "default"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"relativePath": "src/lib/elements/Select.story.svelte",
|
||||||
|
"supportPluginId": "svelte4",
|
||||||
|
"treePath": [
|
||||||
|
"Select"
|
||||||
|
],
|
||||||
|
"virtual": false,
|
||||||
|
"markdownFile": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"markdownFiles": []
|
||||||
|
}
|
||||||
16
packages/ui/.histoire/dist/index.html
vendored
Normal file
16
packages/ui/.histoire/dist/index.html
vendored
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Histoire</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<link rel="stylesheet" href="/assets/style-D55TbI9c.css">
|
||||||
|
|
||||||
|
<link rel="preload" href="/assets/vendor-BCKkA27H.js" as="script" crossOrigin="anonymous">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/assets/bundle-main-BYW_JKZH.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -2,6 +2,10 @@ import { defineConfig } from 'histoire'
|
|||||||
import { HstSvelte } from '@histoire/plugin-svelte'
|
import { HstSvelte } from '@histoire/plugin-svelte'
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
|
setupFile: '/src/histoire.setup.ts',
|
||||||
|
storyMatch: [
|
||||||
|
'./src/lib/**/*.story.svelte',
|
||||||
|
],
|
||||||
plugins: [
|
plugins: [
|
||||||
HstSvelte(),
|
HstSvelte(),
|
||||||
],
|
],
|
||||||
@ -10,7 +10,10 @@
|
|||||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||||
"test": "vitest",
|
"test": "vitest",
|
||||||
"lint": "eslint ."
|
"lint": "eslint .",
|
||||||
|
"story:dev": "histoire dev",
|
||||||
|
"story:build": "histoire build",
|
||||||
|
"story:preview": "histoire preview"
|
||||||
},
|
},
|
||||||
"exports": {
|
"exports": {
|
||||||
".": {
|
".": {
|
||||||
@ -28,22 +31,25 @@
|
|||||||
"svelte": "^4.0.0"
|
"svelte": "^4.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@histoire/plugin-svelte": "^0.17.17",
|
||||||
"@sveltejs/adapter-auto": "^3.2.0",
|
"@sveltejs/adapter-auto": "^3.2.0",
|
||||||
"@sveltejs/kit": "^2.5.6",
|
"@sveltejs/adapter-static": "^3.0.1",
|
||||||
|
"@sveltejs/kit": "^2.5.7",
|
||||||
"@sveltejs/package": "^2.3.1",
|
"@sveltejs/package": "^2.3.1",
|
||||||
"@sveltejs/vite-plugin-svelte": "^3.1.0",
|
"@sveltejs/vite-plugin-svelte": "^3.1.0",
|
||||||
"@types/eslint": "^8.56.9",
|
"@types/eslint": "^8.56.10",
|
||||||
"@typescript-eslint/eslint-plugin": "^7.7.0",
|
"@typescript-eslint/eslint-plugin": "^7.7.1",
|
||||||
"@typescript-eslint/parser": "^7.7.0",
|
"@typescript-eslint/parser": "^7.7.1",
|
||||||
"eslint": "^9.0.0",
|
"eslint": "^9.1.1",
|
||||||
"eslint-plugin-svelte": "^2.37.0",
|
"eslint-plugin-svelte": "^2.38.0",
|
||||||
|
"histoire": "^0.17.17",
|
||||||
"publint": "^0.2.7",
|
"publint": "^0.2.7",
|
||||||
"svelte": "^4.2.15",
|
"svelte": "^4.2.15",
|
||||||
"svelte-check": "^3.6.9",
|
"svelte-check": "^3.6.9",
|
||||||
"tslib": "^2.6.2",
|
"tslib": "^2.6.2",
|
||||||
"typescript": "^5.4.5",
|
"typescript": "^5.4.5",
|
||||||
"vite": "^5.2.9",
|
"vite": "^5.2.10",
|
||||||
"vitest": "^1.5.0"
|
"vitest": "^1.5.1"
|
||||||
},
|
},
|
||||||
"svelte": "./dist/index.js",
|
"svelte": "./dist/index.js",
|
||||||
"types": "./dist/index.d.ts",
|
"types": "./dist/index.d.ts",
|
||||||
|
|||||||
1
packages/ui/src/histoire.setup.ts
Normal file
1
packages/ui/src/histoire.setup.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
import "./lib/app.css"
|
||||||
17
packages/ui/src/lib/ShortCut.story.svelte
Normal file
17
packages/ui/src/lib/ShortCut.story.svelte
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Hst } from "@histoire/plugin-svelte";
|
||||||
|
export let Hst: Hst;
|
||||||
|
import Checkbox from "./ShortCut.svelte";
|
||||||
|
import StoryContent from "$lib/helpers/StoryContent.svelte";
|
||||||
|
import StorySettings from "$lib/helpers/StorySettings.svelte";
|
||||||
|
let theme = "dark";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Hst.Story>
|
||||||
|
<StoryContent {theme}>
|
||||||
|
<Checkbox ctrl alt key={"del"} />
|
||||||
|
</StoryContent>
|
||||||
|
<svelte:fragment slot="controls">
|
||||||
|
<StorySettings bind:theme />
|
||||||
|
</svelte:fragment>
|
||||||
|
</Hst.Story>
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let ctrl = false;
|
||||||
|
export let shift = false;
|
||||||
|
export let alt = false;
|
||||||
|
export let key: string;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="command">
|
||||||
|
{#if ctrl}
|
||||||
|
<span>Ctrl</span>
|
||||||
|
{/if}
|
||||||
|
{#if shift}
|
||||||
|
<span>Shift</span>
|
||||||
|
{/if}
|
||||||
|
{#if alt}
|
||||||
|
<span>Alt</span>
|
||||||
|
{/if}
|
||||||
|
{key}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.command {
|
||||||
|
background: var(--layer-2);
|
||||||
|
padding: 0.4em;
|
||||||
|
font-size: 0.8em;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
span::after {
|
||||||
|
content: " +";
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -42,7 +42,7 @@ body {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
--neutral-100: #E7E7E7;
|
--neutral-100: #E7E7E7;
|
||||||
--neutral-200: #A6A6A6;
|
--neutral-200: #CECECE;
|
||||||
--neutral-300: #7C7C7C;
|
--neutral-300: #7C7C7C;
|
||||||
--neutral-400: #2D2D2D;
|
--neutral-400: #2D2D2D;
|
||||||
--neutral-500: #171717;
|
--neutral-500: #171717;
|
||||||
@ -79,7 +79,7 @@ body.theme-light {
|
|||||||
--outline: var(--neutral-300);
|
--outline: var(--neutral-300);
|
||||||
--layer-0: var(--neutral-100);
|
--layer-0: var(--neutral-100);
|
||||||
--layer-1: var(--neutral-100);
|
--layer-1: var(--neutral-100);
|
||||||
--layer-2: var(--neutral-100);
|
--layer-2: var(--neutral-200);
|
||||||
--layer-3: var(--neutral-500);
|
--layer-3: var(--neutral-500);
|
||||||
--active: #000000;
|
--active: #000000;
|
||||||
--selected: #c65a19;
|
--selected: #c65a19;
|
||||||
|
|||||||
@ -2,16 +2,16 @@
|
|||||||
import type { Hst } from "@histoire/plugin-svelte";
|
import type { Hst } from "@histoire/plugin-svelte";
|
||||||
export let Hst: Hst;
|
export let Hst: Hst;
|
||||||
import Checkbox from "./Checkbox.svelte";
|
import Checkbox from "./Checkbox.svelte";
|
||||||
|
import StoryContent from "$lib/helpers/StoryContent.svelte";
|
||||||
|
import StorySettings from "$lib/helpers/StorySettings.svelte";
|
||||||
|
let theme = "dark";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Hst.Story>
|
<Hst.Story>
|
||||||
<div>
|
<StoryContent {theme}>
|
||||||
<Checkbox checked={false} />
|
<Checkbox value={false} />
|
||||||
</div>
|
</StoryContent>
|
||||||
|
<svelte:fragment slot="controls">
|
||||||
|
<StorySettings bind:theme />
|
||||||
|
</svelte:fragment>
|
||||||
</Hst.Story>
|
</Hst.Story>
|
||||||
|
|
||||||
<style>
|
|
||||||
div {
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
value = value === 1;
|
value = value === 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
export let id: string;
|
export let id = "";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input {id} type="checkbox" bind:checked={value} />
|
<input {id} type="checkbox" bind:checked={value} />
|
||||||
|
|||||||
@ -2,16 +2,16 @@
|
|||||||
import type { Hst } from "@histoire/plugin-svelte";
|
import type { Hst } from "@histoire/plugin-svelte";
|
||||||
export let Hst: Hst;
|
export let Hst: Hst;
|
||||||
import Float from "./Float.svelte";
|
import Float from "./Float.svelte";
|
||||||
|
import StoryContent from "$lib/helpers/StoryContent.svelte";
|
||||||
|
import StorySettings from "$lib/helpers/StorySettings.svelte";
|
||||||
|
let theme = "dark";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Hst.Story>
|
<Hst.Story>
|
||||||
<div>
|
<StoryContent {theme}>
|
||||||
<Float value={0} min={0} max={6.9} />
|
<Float value={0} min={0} max={6.9} />
|
||||||
</div>
|
</StoryContent>
|
||||||
|
<svelte:fragment slot="controls">
|
||||||
|
<StorySettings bind:theme />
|
||||||
|
</svelte:fragment>
|
||||||
</Hst.Story>
|
</Hst.Story>
|
||||||
|
|
||||||
<style>
|
|
||||||
div {
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
import { getBoundingValue } from "../helpers/getBoundingValue";
|
import { getBoundingValue } from "../helpers/getBoundingValue.js";
|
||||||
|
|
||||||
export let value = 0.5;
|
export let value = 0.5;
|
||||||
export let step = 0.01;
|
export let step = 0.01;
|
||||||
@ -123,10 +123,11 @@
|
|||||||
.component-wrapper {
|
.component-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: var(--layer-2, #4b4b4b);
|
background-color: var(--layer-2, #4b4b4b);
|
||||||
border-radius: 2px;
|
border-radius: 4px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: box-shadow 0.3s ease;
|
transition: box-shadow 0.3s ease;
|
||||||
outline: solid 1px var(--outline);
|
border: solid 1px var(--outline);
|
||||||
|
box-sizing: border-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: var(--border-radius, 2px);
|
border-radius: var(--border-radius, 2px);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,12 +2,19 @@
|
|||||||
import type { Hst } from "@histoire/plugin-svelte";
|
import type { Hst } from "@histoire/plugin-svelte";
|
||||||
export let Hst: Hst;
|
export let Hst: Hst;
|
||||||
import Integer from "./Integer.svelte";
|
import Integer from "./Integer.svelte";
|
||||||
|
import StorySettings from "../helpers/StorySettings.svelte";
|
||||||
|
import StoryContent from "$lib/helpers/StoryContent.svelte";
|
||||||
|
|
||||||
|
let theme = "dark";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Hst.Story>
|
<Hst.Story>
|
||||||
<div>
|
<StoryContent {theme}>
|
||||||
<Integer value={5} min={0} max={42} />
|
<Integer value={5} min={0} max={42} />
|
||||||
</div>
|
</StoryContent>
|
||||||
|
<svelte:fragment slot="controls">
|
||||||
|
<StorySettings bind:theme />
|
||||||
|
</svelte:fragment>
|
||||||
</Hst.Story>
|
</Hst.Story>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@ -96,6 +96,7 @@
|
|||||||
<input
|
<input
|
||||||
bind:value
|
bind:value
|
||||||
bind:this={inputEl}
|
bind:this={inputEl}
|
||||||
|
{id}
|
||||||
{step}
|
{step}
|
||||||
{max}
|
{max}
|
||||||
{min}
|
{min}
|
||||||
|
|||||||
@ -2,16 +2,17 @@
|
|||||||
import type { Hst } from "@histoire/plugin-svelte";
|
import type { Hst } from "@histoire/plugin-svelte";
|
||||||
export let Hst: Hst;
|
export let Hst: Hst;
|
||||||
import Select from "./Select.svelte";
|
import Select from "./Select.svelte";
|
||||||
|
import StoryContent from "$lib/helpers/StoryContent.svelte";
|
||||||
|
import StorySettings from "$lib/helpers/StorySettings.svelte";
|
||||||
|
|
||||||
|
let theme = "dark";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Hst.Story>
|
<Hst.Story>
|
||||||
<div>
|
<StoryContent {theme}>
|
||||||
<Select value={"banana"} options={["strawberry", "apple", "banana"]} />
|
<Select id="" options={["strawberry", "apple", "banana"]} />
|
||||||
</div>
|
</StoryContent>
|
||||||
|
<svelte:fragment slot="controls">
|
||||||
|
<StorySettings bind:theme />
|
||||||
|
</svelte:fragment>
|
||||||
</Hst.Story>
|
</Hst.Story>
|
||||||
|
|
||||||
<style>
|
|
||||||
div {
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export let options: string[] = [];
|
export let options: string[] = [];
|
||||||
export let value: number = 0;
|
export let value: number = 0;
|
||||||
export let id: string;
|
export let id = "";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<select {id} bind:value>
|
<select {id} bind:value>
|
||||||
|
|||||||
18
packages/ui/src/lib/elements/Vec3.story.svelte
Normal file
18
packages/ui/src/lib/elements/Vec3.story.svelte
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Hst } from "@histoire/plugin-svelte";
|
||||||
|
export let Hst: Hst;
|
||||||
|
import Vec3 from "./Vec3.svelte";
|
||||||
|
import StoryContent from "$lib/helpers/StoryContent.svelte";
|
||||||
|
import StorySettings from "$lib/helpers/StorySettings.svelte";
|
||||||
|
|
||||||
|
let theme = "dark";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Hst.Story>
|
||||||
|
<StoryContent {theme}>
|
||||||
|
<Vec3 value={[0.2, 0.4, 0.6]} />
|
||||||
|
</StoryContent>
|
||||||
|
<svelte:fragment slot="controls">
|
||||||
|
<StorySettings bind:theme />
|
||||||
|
</svelte:fragment>
|
||||||
|
</Hst.Story>
|
||||||
@ -5,6 +5,27 @@
|
|||||||
export let id = "";
|
export let id = "";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Float id={`${id}-x`} bind:value={value[0]} />
|
<div>
|
||||||
<Float id={`${id}-y`} bind:value={value[1]} />
|
<Float id={`${id}-x`} bind:value={value[0]} />
|
||||||
<Float id={`${id}-z`} bind:value={value[2]} />
|
<Float id={`${id}-y`} bind:value={value[1]} />
|
||||||
|
<Float id={`${id}-z`} bind:value={value[2]} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div > :global(.component-wrapper:nth-child(1)) {
|
||||||
|
border-radius: 4px 4px 0px 0px !important;
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
div > :global(.component-wrapper:nth-child(2)) {
|
||||||
|
border-radius: 0px !important;
|
||||||
|
outline: none;
|
||||||
|
border: solid thin var(--outline);
|
||||||
|
border-top: solid thin color-mix(in srgb, var(--outline) 50%, transparent);
|
||||||
|
border-bottom: solid thin
|
||||||
|
color-mix(in srgb, var(--outline) 50%, transparent);
|
||||||
|
}
|
||||||
|
div > :global(.component-wrapper:nth-child(3)) {
|
||||||
|
border-top: none !important;
|
||||||
|
border-radius: 0px 0px 4px 4px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
24
packages/ui/src/lib/helpers/StoryContent.svelte
Normal file
24
packages/ui/src/lib/helpers/StoryContent.svelte
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let theme = "dark";
|
||||||
|
|
||||||
|
$: if (theme !== undefined) {
|
||||||
|
const classes = document.body.classList;
|
||||||
|
const newClassName = `theme-${theme}`;
|
||||||
|
for (const className of classes) {
|
||||||
|
if (className.startsWith("theme-") && className !== newClassName) {
|
||||||
|
classes.remove(className);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.body.classList.add(newClassName);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
31
packages/ui/src/lib/helpers/StorySettings.svelte
Normal file
31
packages/ui/src/lib/helpers/StorySettings.svelte
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Select } from "$lib/index.js";
|
||||||
|
|
||||||
|
const themes = [
|
||||||
|
"dark",
|
||||||
|
"light",
|
||||||
|
"catppuccin",
|
||||||
|
"solarized",
|
||||||
|
"high-contrast",
|
||||||
|
"nord",
|
||||||
|
"dracula",
|
||||||
|
];
|
||||||
|
|
||||||
|
let value = 0;
|
||||||
|
export let theme = themes[value];
|
||||||
|
$: theme = themes[value];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="theme-select"> Select Theme </label>
|
||||||
|
<Select id="" bind:value options={themes} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1em;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -10,3 +10,5 @@ import Details from "./Details.svelte";
|
|||||||
export { Float, Integer, Select, Checkbox, Input, Details };
|
export { Float, Integer, Select, Checkbox, Input, Details };
|
||||||
|
|
||||||
export default Input;
|
export default Input;
|
||||||
|
|
||||||
|
export { default as ShortCut } from "./ShortCut.svelte";
|
||||||
|
|||||||
1
packages/ui/src/routes/+layout.ts
Normal file
1
packages/ui/src/routes/+layout.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export const prerender = true;
|
||||||
@ -1,18 +1,18 @@
|
|||||||
import adapter from '@sveltejs/adapter-auto';
|
import adapter from '@sveltejs/adapter-static';
|
||||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||||
|
|
||||||
/** @type {import('@sveltejs/kit').Config} */
|
/** @type {import('@sveltejs/kit').Config} */
|
||||||
const config = {
|
const config = {
|
||||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||||
// for more information about preprocessors
|
// for more information about preprocessors
|
||||||
preprocess: vitePreprocess(),
|
preprocess: vitePreprocess(),
|
||||||
|
|
||||||
kit: {
|
kit: {
|
||||||
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||||
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
||||||
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||||
adapter: adapter()
|
adapter: adapter()
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default config;
|
export default config;
|
||||||
|
|||||||
@ -13,7 +13,7 @@
|
|||||||
"@nodes/types": "link:../types"
|
"@nodes/types": "link:../types"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"vite": "^5.2.9",
|
"vite": "^5.2.10",
|
||||||
"vitest": "^1.5.0"
|
"vitest": "^1.5.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
use super::{create_geometry_data, wrap_geometry_data};
|
use super::{create_geometry_data, wrap_geometry_data, PathData};
|
||||||
use glam::{Mat4, Vec3};
|
use glam::{Mat4, Vec3};
|
||||||
|
|
||||||
fn create_circle(res: usize) -> Vec<f32> {
|
fn create_circle(res: usize) -> Vec<f32> {
|
||||||
@ -11,8 +11,8 @@ fn create_circle(res: usize) -> Vec<f32> {
|
|||||||
circle
|
circle
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn extrude_path(input_path: &[i32], res_x: usize) -> Vec<i32> {
|
pub fn extrude_path(input_path: PathData, res_x: usize) -> Vec<i32> {
|
||||||
let point_amount = input_path.len() / 4;
|
let point_amount = input_path.points.len() / 4;
|
||||||
let face_amount = (point_amount - 1) * res_x * 2;
|
let face_amount = (point_amount - 1) * res_x * 2;
|
||||||
let vertices_amount = point_amount * res_x;
|
let vertices_amount = point_amount * res_x;
|
||||||
|
|
||||||
@ -26,12 +26,9 @@ pub fn extrude_path(input_path: &[i32], res_x: usize) -> Vec<i32> {
|
|||||||
let positions = geometry.positions;
|
let positions = geometry.positions;
|
||||||
let indices = geometry.faces;
|
let indices = geometry.faces;
|
||||||
|
|
||||||
let path: &[f32];
|
let path: &[f32] = input_path.points;
|
||||||
unsafe {
|
|
||||||
path = std::slice::from_raw_parts(input_path.as_ptr() as *const f32, input_path.len());
|
|
||||||
}
|
|
||||||
|
|
||||||
for i in 0..point_amount {
|
for i in 0..input_path.length {
|
||||||
let index_offset = i * res_x * 6;
|
let index_offset = i * res_x * 6;
|
||||||
let position_offset = i * res_x;
|
let position_offset = i * res_x;
|
||||||
|
|
||||||
|
|||||||
@ -6,8 +6,13 @@ pub struct GeometryData<'a> {
|
|||||||
pub faces: &'a mut [i32], // View into `data`
|
pub faces: &'a mut [i32], // View into `data`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static GEOMETRY_HEADER_SIZE: usize = 3;
|
||||||
|
// 0: geometry type = 0
|
||||||
|
// 1: vertex amount
|
||||||
|
// 2: face amount
|
||||||
|
|
||||||
pub fn create_geometry_data(vertex_amount: usize, face_amount: usize) -> Vec<i32> {
|
pub fn create_geometry_data(vertex_amount: usize, face_amount: usize) -> Vec<i32> {
|
||||||
let amount = 3 // definition (type, vertex_amount, face_amount)
|
let amount = GEOMETRY_HEADER_SIZE // definition (type, vertex_amount, face_amount)
|
||||||
+ 4 // opening and closing brackets
|
+ 4 // opening and closing brackets
|
||||||
+ vertex_amount * 3 // positions
|
+ vertex_amount * 3 // positions
|
||||||
+ vertex_amount * 3 // normals
|
+ vertex_amount * 3 // normals
|
||||||
@ -35,12 +40,12 @@ pub fn create_geometry_data(vertex_amount: usize, face_amount: usize) -> Vec<i32
|
|||||||
pub fn wrap_geometry_data(geometry: &mut [i32]) -> GeometryData {
|
pub fn wrap_geometry_data(geometry: &mut [i32]) -> GeometryData {
|
||||||
// Basic validity checks
|
// Basic validity checks
|
||||||
assert!(
|
assert!(
|
||||||
geometry.len() > 5,
|
geometry.len() > GEOMETRY_HEADER_SIZE,
|
||||||
"Geometry vector does not contain enough data for a header."
|
"Geometry vector does not contain enough data for a header."
|
||||||
);
|
);
|
||||||
|
|
||||||
// Split at after header
|
// Split at after header
|
||||||
let (header, rest) = geometry.split_at_mut(5);
|
let (header, rest) = geometry.split_at_mut(2 + GEOMETRY_HEADER_SIZE);
|
||||||
|
|
||||||
let vertices_amount = header[3] as usize;
|
let vertices_amount = header[3] as usize;
|
||||||
let face_amount = header[4] as usize;
|
let face_amount = header[4] as usize;
|
||||||
@ -1,9 +1,11 @@
|
|||||||
mod calculate_normals;
|
mod calculate_normals;
|
||||||
mod extrude_path;
|
mod extrude_path;
|
||||||
mod geometry;
|
mod geometry_data;
|
||||||
|
mod path_data;
|
||||||
mod transform;
|
mod transform;
|
||||||
|
|
||||||
pub use calculate_normals::*;
|
pub use calculate_normals::*;
|
||||||
pub use extrude_path::*;
|
pub use extrude_path::*;
|
||||||
pub use geometry::*;
|
pub use geometry_data::*;
|
||||||
|
pub use path_data::*;
|
||||||
pub use transform::*;
|
pub use transform::*;
|
||||||
|
|||||||
106
packages/utils/src/geometry/path_data.rs
Normal file
106
packages/utils/src/geometry/path_data.rs
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
static PATH_HEADER_SIZE: usize = 2;
|
||||||
|
// 0: node-type, stem: 0
|
||||||
|
// 1: depth
|
||||||
|
|
||||||
|
#[derive(Debug)]
|
||||||
|
pub struct PathData<'a> {
|
||||||
|
pub header: &'a mut [i32],
|
||||||
|
pub length: usize,
|
||||||
|
pub points: &'a mut [f32],
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn create_multiple_paths(amount: usize, point_amount: usize, depth: i32) -> Vec<i32> {
|
||||||
|
let output_size = amount * (point_amount * 4 + PATH_HEADER_SIZE + 4) + 4;
|
||||||
|
|
||||||
|
let mut path: Vec<i32> = vec![0; output_size];
|
||||||
|
|
||||||
|
path[0] = 0; // encode opening bracket
|
||||||
|
path[1] = 1; // encode opening bracket
|
||||||
|
path[output_size - 2] = 1; // encode closing bracket
|
||||||
|
path[output_size - 1] = 1; // encode closing bracket
|
||||||
|
|
||||||
|
for i in 0..amount {
|
||||||
|
let start_index = 2 + i * (point_amount * 4 + PATH_HEADER_SIZE + 4);
|
||||||
|
let end_index = 2 + (i + 1) * (point_amount * 4 + PATH_HEADER_SIZE + 4);
|
||||||
|
|
||||||
|
path[start_index] = 0; // encode opening bracket
|
||||||
|
path[start_index + 1] = point_amount as i32 * 4 + 3; // encode opening bracket
|
||||||
|
path[start_index + 2] = 0; // encode node-type, stem: 0
|
||||||
|
path[start_index + 3] = depth; // encode depth
|
||||||
|
|
||||||
|
path[end_index - 2] = 1; // encode closing bracket
|
||||||
|
path[end_index - 1] = 1; // encode closing bracket
|
||||||
|
}
|
||||||
|
|
||||||
|
path
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn wrap_multiple_paths(mut input: &mut [i32]) -> Vec<PathData<'_>> {
|
||||||
|
let mut paths = Vec::new();
|
||||||
|
let mut end_index = 2;
|
||||||
|
|
||||||
|
// remove starting bracket
|
||||||
|
input = &mut input[2..];
|
||||||
|
|
||||||
|
while end_index < input.len() - 1 {
|
||||||
|
end_index = input[1] as usize + 3;
|
||||||
|
if end_index < input.len() {
|
||||||
|
let (path_slice, remaining) = input.split_at_mut(end_index);
|
||||||
|
let path_data = wrap_path(path_slice);
|
||||||
|
paths.push(path_data);
|
||||||
|
input = remaining;
|
||||||
|
} else {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
paths
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn create_path(point_amount: usize, depth: i32) -> Vec<i32> {
|
||||||
|
let output_size = point_amount * 4 + PATH_HEADER_SIZE + 4;
|
||||||
|
|
||||||
|
let mut path: Vec<i32> = vec![0; output_size];
|
||||||
|
|
||||||
|
path[0] = 0; // encode opening bracket
|
||||||
|
path[1] = (point_amount * 4) as i32 + 2; // encode opening bracket
|
||||||
|
path[2] = 0; //encode node-type, stem: 0
|
||||||
|
path[3] = depth; //encode depth
|
||||||
|
path[output_size - 2] = 1; // encode closing bracket
|
||||||
|
path[output_size - 1] = 1; // encode closing bracket
|
||||||
|
|
||||||
|
path
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn wrap_path<'a>(geometry: &'a mut [i32]) -> PathData<'a> {
|
||||||
|
// Basic validity checks
|
||||||
|
assert!(
|
||||||
|
geometry.len() > PATH_HEADER_SIZE,
|
||||||
|
"Geometry vector does not contain enough data for a header."
|
||||||
|
);
|
||||||
|
|
||||||
|
let (_opening_brackets, rest) = geometry.split_at_mut(2);
|
||||||
|
|
||||||
|
// Split at after header
|
||||||
|
let (header, rest) = rest.split_at_mut(PATH_HEADER_SIZE);
|
||||||
|
|
||||||
|
// split after points, excluding last two that encode closing bracket
|
||||||
|
let (points_slice, _closing_bracket) = rest.split_at_mut(rest.len() - 2);
|
||||||
|
|
||||||
|
assert!(
|
||||||
|
points_slice.len() % 4 == 0,
|
||||||
|
"Points slice does not match the expected size.",
|
||||||
|
);
|
||||||
|
|
||||||
|
let length = points_slice.len() / 4;
|
||||||
|
|
||||||
|
let points: &'a mut [f32] = unsafe {
|
||||||
|
std::slice::from_raw_parts_mut(points_slice.as_mut_ptr() as *mut f32, points_slice.len())
|
||||||
|
};
|
||||||
|
|
||||||
|
PathData {
|
||||||
|
header,
|
||||||
|
length,
|
||||||
|
points,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,5 +1,9 @@
|
|||||||
use utils::get_args;
|
use utils::{
|
||||||
|
geometry::{create_multiple_paths, create_path, wrap_multiple_paths},
|
||||||
|
get_args,
|
||||||
|
};
|
||||||
|
|
||||||
|
#[allow(dead_code)]
|
||||||
#[rustfmt::skip]
|
#[rustfmt::skip]
|
||||||
fn test_split_args(){
|
fn test_split_args(){
|
||||||
let inputs = vec![
|
let inputs = vec![
|
||||||
@ -16,4 +20,17 @@ fn test_split_args(){
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fn main() {}
|
fn test_path() {
|
||||||
|
// let path_data = create_path(3, 2);
|
||||||
|
// println!("{:?}", path_data);
|
||||||
|
|
||||||
|
let mut multiple_paths = create_multiple_paths(1, 4, 1);
|
||||||
|
let mut wrapped_paths = wrap_multiple_paths(&mut multiple_paths);
|
||||||
|
wrapped_paths[0].points[0] = 1.0;
|
||||||
|
println!("{:?}", wrapped_paths);
|
||||||
|
println!("{:?}", multiple_paths);
|
||||||
|
}
|
||||||
|
|
||||||
|
fn main() {
|
||||||
|
test_path()
|
||||||
|
}
|
||||||
|
|||||||
8338
pnpm-lock.yaml
8338
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -2,4 +2,5 @@ packages:
|
|||||||
- app
|
- app
|
||||||
- packages/*
|
- packages/*
|
||||||
- nodes/**/**/**/*
|
- nodes/**/**/**/*
|
||||||
|
- '!nodes/**/**/**/pkg'
|
||||||
- '!**/.template'
|
- '!**/.template'
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user