Skip to content

Dev #27

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
NiceArti merged 5 commits into from
Aug 4, 2026
Merged

Dev #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9b079b6
Merge pull request #26 from Flowscape-UI/main
NiceArti Jul 31, 2026
8a34041
refactor(renderer): unify shape rendering and stroke geometry
NiceArti Jul 31, 2026
bbcd6b5
feat: Implement stroke pattern resolution and rendering
NiceArti Aug 2, 2026
a480fce
refactor(renderer): update stroke properties for shapes and add dotte…
NiceArti Aug 4, 2026
740f282
refactor(input): optimize pointer down handling and improve pointer s…
NiceArti Aug 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 42 additions & 129 deletions apps/playground/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ import {
LayerWorldInputController,
LayerOverlayInputController,
FillMode,
StrokeAlign,
StrokeStyle,
StrokeDashCap,
} from "@flowscape-ui/core-sdk";

const container = document.querySelector<HTMLDivElement>("#app");
Expand Down Expand Up @@ -106,166 +109,75 @@ layerBackground.setImagePosition("50%", "50%");
// const groupNode = new NodeGroup(1000);

const rectNode = new NodeRect(1);
rectNode.setFillMode(FillMode.MeshGradient);
rectNode.setFill(
"mesh-gradient(grid 4 4 method bicubic in oklab, vertex v00 0% 0% #67e8f9, vertex v10 31.7% 0% #f472b6, vertex v20 75.02% 0.72% #9333ea, vertex v30 100% 0.56% hsl(195, 80%, 55%), vertex v01 0% 27.05% #7c3aed, vertex v11 40.2% 39.97% #2563eb, vertex v21 68.24% 35.81% #9333ea, vertex v31 98.83% 25.52% hsl(57, 69%, 69%), vertex v02 1.98% 70.17% #2563eb, vertex v12 38.88% 72.37% #67e8f9, vertex v22 60.62% 63.5% #2563eb, vertex v32 98.39% 72.18% #7c3aed, vertex v03 0% 100% #9333ea, vertex v13 40.73% 99.92% #06b6d4, vertex v23 74% 98.88% #f472b6, vertex v33 99.19% 99.73% #ec4899, patch p00 v00 v10 v11 v01, patch p10 v10 v20 v21 v11, patch p20 v20 v30 v31 v21, patch p01 v01 v11 v12 v02, patch p11 v11 v21 v22 v12, patch p21 v21 v31 v32 v22, patch p02 v02 v12 v13 v03, patch p12 v12 v22 v23 v13, patch p22 v22 v32 v33 v23)",
rectNode.setFillMode(FillMode.LinearGradient);
rectNode.setFill("linear-gradient(red, blue)");
rectNode.setStrokeWidth([5]);
rectNode.setStrokeAlign(StrokeAlign.Outside);
rectNode.setStrokeFill("white");
rectNode.setStrokeStyle(StrokeStyle.Dotted);
rectNode.setStrokeStyleProperties(
StrokeStyle.Dashed,
20,
10,
StrokeDashCap.Round,
);

rectNode.setStrokeMode(FillMode.ConicGradient);
rectNode.setStrokeFill(
"mesh-gradient(grid 3 3 method bicubic in oklab, vertex v00 0% 0% #67e8f9, vertex v10 50% 0% #f472b6, vertex v20 100% 0% #9333ea, vertex v01 0% 50% #7c3aed, vertex v11 48% 42% #facc15, vertex v21 100% 50% #06b6d4, vertex v02 0% 100% #2563eb, vertex v12 50% 100% #ec4899, vertex v22 100% 100% #111827, patch p00 v00 v10 v11 v01, patch p10 v10 v20 v21 v11, patch p01 v01 v11 v12 v02, patch p11 v11 v21 v22 v12)",
);

rectNode.setFillMode(FillMode.MeshGradient);

// const MESH_ANIMATION_FPS = 30;
// const MESH_FRAME_INTERVAL = 1000 / MESH_ANIMATION_FPS;

// let meshAnimationFrameId = 0;
// let previousMeshFrameTime = 0;

// function roundPercent(value: number): number {
// return Math.round(value * 100) / 100;
// }

// function createAnimatedRectMesh(time: number): string {
// const t = time * 0.001;

// const topX = roundPercent(
// 50 + Math.sin(t * 0.8) * 8,
// );

// const leftY = roundPercent(
// 50 + Math.cos(t * 0.7) * 8,
// );

// const rightY = roundPercent(
// 50 + Math.sin(t * 0.9) * 8,
// );

// const bottomX = roundPercent(
// 50 + Math.cos(t * 0.75) * 8,
// );

// const centerX = roundPercent(
// 50 + Math.sin(t * 1.1) * 14,
// );

// const centerY = roundPercent(
// 50 + Math.cos(t * 1.3) * 14,
// );

// const centerHue = Math.round(
// (time * 0.035) % 360,
// );

// return [
// "mesh-gradient(",
// "grid 3 3 method bicubic in oklab, ",

// "vertex v00 0% 0% #67e8f9, ",
// `vertex v10 ${topX}% 0% #f472b6, `,
// "vertex v20 100% 0% #9333ea, ",

// `vertex v01 0% ${leftY}% #7c3aed, `,
// `vertex v11 ${centerX}% ${centerY}% hsl(${centerHue}, 88%, 62%), `,
// `vertex v21 100% ${rightY}% #06b6d4, `,

// "vertex v02 0% 100% #2563eb, ",
// `vertex v12 ${bottomX}% 100% #ec4899, `,
// "vertex v22 100% 100% #facc15, ",

// "patch p00 v00 v10 v11 v01, ",
// "patch p10 v10 v20 v21 v11, ",
// "patch p01 v01 v11 v12 v02, ",
// "patch p11 v11 v21 v22 v12",
// ")",
// ].join("");
// }

// function animateRectMesh(time: number): void {
// const elapsed = time - previousMeshFrameTime;

// if (elapsed >= MESH_FRAME_INTERVAL) {
// previousMeshFrameTime =
// time - (elapsed % MESH_FRAME_INTERVAL);

// rectNode.setFill(
// createAnimatedRectMesh(time),
// );

// scene.invalidate();
// }

// meshAnimationFrameId =
// requestAnimationFrame(animateRectMesh);
// }

// meshAnimationFrameId =
// requestAnimationFrame(animateRectMesh);
rectNode.setStrokeWidth({ t: 3, r: 3, b: 3, l: 3 });
// rectNode.setPosition(120, 110);
// rectNode.setSize(580, 520);
// rectNode.setCornerRadius({
// tl: 28,
// tr: 28,
// bl: 0,
// br: 0
// });
// rectNode.setFill("#D1D5DB");
// rectNode.setStrokeFill("red");
// rectNode.setStrokeWidth({ t: 3, r: 3, b: 3, l: 3 });
// rectNode.setRotation(-8);

const rectNode2 = new NodeRect(20);
rectNode2.setPosition(-100, 0);
rectNode2.setSize(180, 120);
rectNode2.setCornerRadius({
tl: 28,
tr: 28,
bl: 0,
br: 0,
});
rectNode2.setCornerRadius([28]);


rectNode;
rectNode2.setFill("#D1D5DB");
rectNode2.setStrokeFill("blue");
rectNode2.setStrokeWidth({ t: 3, r: 3, b: 3, l: 3 });
rectNode2.setStrokeWidth([3]);
// rectNode2.setRotation(-8);

const ellipseNode = new NodeEllipse(2);
ellipseNode.setPosition(370, 120);
ellipseNode.setSize(190, 130);
ellipseNode.setFill("#FDBA74");
ellipseNode.setFillMode(FillMode.MeshGradient);
ellipseNode.setStrokeStyle(StrokeStyle.Dotted);
// ellipseNode.setFill("#FDBA74");
ellipseNode.setInnerRatio(0.48);
ellipseNode.setStartAngle(20);
ellipseNode.setEndAngle(320);
ellipseNode.setStrokeFill("#7C2D12");
ellipseNode.setStrokeWidth({ t: 3, r: 3, b: 3, l: 3 });
ellipseNode.setStrokeWidth([3]);

const polygonNode = new NodePolygon(3);

polygonNode.setStrokeAlign(StrokeAlign.Inside);
polygonNode.setFillMode(FillMode.LinearGradient);
polygonNode.setFill(
"linear-gradient(to right, red, white)"
);
// polygonNode.setPosition(610, 100);
polygonNode.setSize(180, 150);
polygonNode.setSideCount(7);
polygonNode.setFill("#86EFAC");
// polygonNode.setStrokeFill("#14532D");
// polygonNode.setStrokeWidth({ t: 3, r: 3, b: 3, l: 3 });
polygonNode.setStrokeStyle(StrokeStyle.Dotted);
polygonNode.setStrokeWidth([5]);
polygonNode.setStrokeMode(FillMode.LinearGradient);
polygonNode.setStrokeFill("linear-gradient(to right, red, black)");

const starNode = new NodeStar(4);
starNode.setPosition(170, 320);
starNode.setSize(180, 170);
starNode.setInnerRatio(0.45);
starNode.setFill("#93C5FD");
starNode.setFillMode(FillMode.MeshGradient);
// starNode.setFill("#93C5FD");
starNode.setStrokeFill("#1E3A8A");
starNode.setStrokeWidth({ t: 3, r: 3, b: 3, l: 3 });
starNode.setStrokeWidth([3]);
starNode.setRotation(12);
starNode.setSideCount(25);

const pathNode = new NodePath(5);
pathNode.setPosition(440, 300);
pathNode.setSize(250, 180);
pathNode.setFill("#67E8F9");
pathNode.setFillMode(FillMode.LinearGradient);
// pathNode.setFill("#67E8F9");
pathNode.setStrokeFill("#155E75");
pathNode.setStrokeWidth({ t: 3, r: 3, b: 3, l: 3 });
pathNode.setStrokeWidth([3]);
pathNode.moveTo({ x: 22, y: 125 });
pathNode.cubicTo({ x: 55, y: 10 }, { x: 165, y: 12 }, { x: 210, y: 80 });
pathNode.quadTo({ x: 240, y: 118 }, { x: 190, y: 150 });
Expand All @@ -284,7 +196,8 @@ lineNode.setLineCapEnd(LineCap.Square);
const textNode = new NodeText(7);
textNode.setPosition(700, 80);
textNode.setSize(320, 160);
textNode.setFill("#E2E8F0");
// textNode.setFill("#E2E8F0");
// textNode.setFillMode(FillMode.LinearGradient);
textNode.setFontFamily("Inter");
textNode.setFontSize(24);
textNode.setFontWeight(700);
Expand All @@ -295,8 +208,8 @@ textNode.setVerticalAlign(TextVerticalAlign.Top);
textNode.setWrapMode(TextWrapMode.Word);
textNode.setText(
"Flowscape Editor\n" +
"Precision tools for building\n" +
"interactive scene systems.",
"Precision tools for building\n" +
"interactive scene systems.",
);

// groupNode.addChild(rectNode);
Expand Down
1 change: 1 addition & 0 deletions packages/engine/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./src";
54 changes: 45 additions & 9 deletions packages/engine/src/input/Input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -901,19 +901,55 @@ export class Input {
// Handlers — Pointer
// =========================================================

private static _onPointerDown = (e: PointerEvent): void => {
private static _onPointerDown = (
e: PointerEvent,
): void => {
if (
this._activePointerId !== null &&
this._activePointerId !== e.pointerId
) {
return;
}

this._pointerDown = true;
this._activePointerId = e.pointerId;
this._pointerType = e.pointerType as "mouse" | "pen" | "touch";
this._pointerPressure = e.pressure;
this._updatePointerPosition(e);
this._lastInputTime = performance.now();
this._activePointerId =
e.pointerId;

this._pointerType =
e.pointerType as
| "mouse"
| "pen"
| "touch";

if (this._options.usePointerCapture) {
(e.currentTarget as Element).setPointerCapture(e.pointerId);
this._pointerPressure =
e.pressure;

this._pointerPosition = {
x: e.clientX,
y: e.clientY,
};

this._pointerDelta = {
x: 0,
y: 0,
};

this._lastInputTime =
performance.now();

if (
this._options.usePointerCapture &&
e.currentTarget instanceof Element
) {
e.currentTarget.setPointerCapture(
e.pointerId,
);
}

this._emitInput({ type: "pointerdown", mouseButton: e.button });
this._emitInput({
type: "pointerdown",
mouseButton: e.button,
});
};

private static _onPointerMove = (e: PointerEvent): void => {
Expand Down
Loading
Loading