539 lines
15 KiB
TypeScript
539 lines
15 KiB
TypeScript
import {
|
|
BaseBoxShapeUtil,
|
|
Editor,
|
|
Geometry2d,
|
|
HTMLContainer,
|
|
Rectangle2d,
|
|
TLBaseShape,
|
|
TLOnResizeHandler,
|
|
TLShape,
|
|
TLShapeId,
|
|
resizeBox,
|
|
} from "tldraw";
|
|
import { getUserId } from "./storeUtils";
|
|
import { getEdge } from "./propagators/tlgraph";
|
|
|
|
export type ValueType = "SCALAR" | "BOOLEAN" | "STRING" | "RANK" | "NONE";
|
|
|
|
export type ISocialShape = TLBaseShape<
|
|
"social",
|
|
{
|
|
w: number;
|
|
h: number;
|
|
text: string;
|
|
selector: string;
|
|
valueType: ValueType;
|
|
values: Record<string, any>;
|
|
value: any;
|
|
syntaxError: boolean;
|
|
}
|
|
>;
|
|
|
|
export class SocialShapeUtil extends BaseBoxShapeUtil<ISocialShape> {
|
|
static override type = "social" as const;
|
|
private valueTypeRegex = (valueType: ValueType) =>
|
|
new RegExp(`${valueType}\\s*\\((.*?)\\)|${valueType}`);
|
|
override canBind = () => true;
|
|
override canEdit = () => false;
|
|
override getDefaultProps(): ISocialShape["props"] {
|
|
return {
|
|
w: 160 * 2,
|
|
h: 90 * 2,
|
|
text: "",
|
|
selector: "",
|
|
valueType: "NONE",
|
|
values: {},
|
|
value: null,
|
|
syntaxError: false,
|
|
};
|
|
}
|
|
override onResize: TLOnResizeHandler<ISocialShape> = (shape, info) => {
|
|
return resizeBox(shape, info);
|
|
};
|
|
override getGeometry(shape: ISocialShape): Geometry2d {
|
|
return new Rectangle2d({
|
|
width: shape.props.w,
|
|
height: shape.props.h,
|
|
isFilled: true,
|
|
});
|
|
}
|
|
|
|
indicator(shape: ISocialShape) {
|
|
return <rect width={shape.props.w} height={shape.props.h} rx={4} />;
|
|
}
|
|
|
|
override component(shape: ISocialShape) {
|
|
const currentUser = getUserId(this.editor);
|
|
|
|
const defaultValues = {
|
|
BOOLEAN: false,
|
|
SCALAR: 0,
|
|
DEFAULT: null,
|
|
};
|
|
|
|
const handleOnChange = (newValue: boolean | number) => {
|
|
console.log("NEW VALUE", newValue);
|
|
this.updateProps(shape, {
|
|
values: { ...shape.props.values, [currentUser]: newValue },
|
|
});
|
|
this.updateValue(shape.id);
|
|
};
|
|
|
|
const handleTextChange = (text: string) => {
|
|
let valueType: ValueType = "NONE";
|
|
const selector = text.match(/@([a-zA-Z]+)/)?.[1] || "";
|
|
|
|
if (text.includes("SCALAR")) {
|
|
valueType = "SCALAR";
|
|
} else if (text.includes("BOOLEAN")) {
|
|
valueType = "BOOLEAN";
|
|
} else if (text.includes("STRING")) {
|
|
valueType = "STRING";
|
|
} else if (text.includes("RANK")) {
|
|
valueType = "RANK";
|
|
}
|
|
|
|
if (valueType !== shape.props.valueType) {
|
|
this.updateProps(shape, { text, valueType, selector, values: {} });
|
|
} else {
|
|
this.updateProps(shape, { text, selector });
|
|
}
|
|
this.updateValue(shape.id);
|
|
};
|
|
|
|
const args = this.getArgs(shape, shape.props.valueType);
|
|
const inputMap = getInputMap(this.editor, shape);
|
|
const usedInputs: any[] = [];
|
|
for (const arg of args) {
|
|
if (arg !== false && arg !== true && inputMap[arg]) {
|
|
if (Array.isArray(inputMap[arg].value)) {
|
|
usedInputs.push(...inputMap[arg].value);
|
|
} else {
|
|
usedInputs.push(inputMap[arg].value);
|
|
}
|
|
}
|
|
}
|
|
// console.log("USED INPUTS", usedInputs)
|
|
|
|
return (
|
|
<HTMLContainer
|
|
style={{
|
|
padding: 4,
|
|
borderRadius: 4,
|
|
border: "1px solid #ccc",
|
|
outline: shape.props.syntaxError ? "2px solid orange" : "none",
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
>
|
|
<textarea
|
|
style={{
|
|
width: "100%",
|
|
minHeight: "4em",
|
|
height: "auto",
|
|
border: "1px solid lightgrey",
|
|
resize: "none",
|
|
pointerEvents: "all",
|
|
}}
|
|
value={shape.props.text}
|
|
onChange={(e) => handleTextChange(e.target.value)}
|
|
rows={2}
|
|
/>
|
|
<ValueInterface
|
|
type={shape.props.valueType ?? null}
|
|
value={
|
|
shape.props.values[currentUser] ??
|
|
defaultValues[shape.props.valueType as keyof typeof defaultValues]
|
|
}
|
|
values={shape.props.values}
|
|
inputs={usedInputs}
|
|
onChange={handleOnChange}
|
|
editor={this.editor}
|
|
/>
|
|
</HTMLContainer>
|
|
);
|
|
}
|
|
|
|
private getArgs(shape: ISocialShape, valueType: ValueType) {
|
|
const match = shape.props.text.match(this.valueTypeRegex(valueType));
|
|
let args: (string | number | boolean)[] = [];
|
|
if (match?.[1]) {
|
|
args = match[1].split(",").map((arg) => {
|
|
const trimmed = arg.trim();
|
|
if (trimmed === "true") return true;
|
|
if (trimmed === "false") return false;
|
|
if (!Number.isNaN(Number(trimmed))) return Number(trimmed);
|
|
return trimmed;
|
|
});
|
|
}
|
|
return args;
|
|
}
|
|
|
|
private updateValue(shapeId: TLShapeId) {
|
|
const shape = this.editor.getShape(shapeId) as ISocialShape;
|
|
const valueType = shape.props.valueType;
|
|
const vals = Array.from(Object.values(shape.props.values));
|
|
|
|
const functionBody = `return ${shape.props.text.replace(
|
|
this.valueTypeRegex(valueType),
|
|
"VALUES"
|
|
)};`;
|
|
|
|
const sum = (vals: number[] | boolean[]) => {
|
|
if (valueType === "SCALAR") {
|
|
return (vals as number[]).reduce((acc, val) => acc + val, 0);
|
|
}
|
|
if (valueType === "BOOLEAN") {
|
|
//@ts-ignore
|
|
return vals.filter(Boolean).length;
|
|
}
|
|
};
|
|
const average = (vals: number[] | boolean[]) => {
|
|
if (valueType === "SCALAR") {
|
|
return (
|
|
(vals as number[]).reduce((acc, val) => acc + val, 0) / vals.length
|
|
);
|
|
}
|
|
if (valueType === "BOOLEAN") {
|
|
//@ts-ignore
|
|
return vals.filter(Boolean).length;
|
|
}
|
|
};
|
|
|
|
const countVotes = (votes: Array<{ up: string[]; down: string[] }>) => {
|
|
const voteCount = votes.reduce((acc, vote) => {
|
|
for (const item of vote.up) {
|
|
acc[item] = (acc[item] || 0) + 1;
|
|
}
|
|
for (const item of vote.down) {
|
|
acc[item] = (acc[item] || 0) - 1;
|
|
}
|
|
return acc;
|
|
}, {} as Record<string, number>);
|
|
|
|
return Object.entries(voteCount).sort((a, b) => b[1] - a[1]);
|
|
};
|
|
|
|
const inputMap = getInputMap(this.editor, shape);
|
|
|
|
try {
|
|
const paramNames = [
|
|
"sum",
|
|
"average",
|
|
"countVotes",
|
|
"VALUES",
|
|
...Object.keys(inputMap),
|
|
];
|
|
const paramValues = [
|
|
sum,
|
|
average,
|
|
countVotes,
|
|
vals,
|
|
...Object.values(inputMap).map((s) => s.value),
|
|
];
|
|
const func = new Function(...paramNames, functionBody);
|
|
const result = func(...paramValues);
|
|
|
|
if (typeof result === "function") {
|
|
this.updateProps(
|
|
{ ...shape, props: { ...shape.props, value: null } },
|
|
{ syntaxError: true }
|
|
);
|
|
return;
|
|
}
|
|
|
|
this.updateProps(shape, { value: result, syntaxError: false });
|
|
} catch (e) {
|
|
console.log("ERROR", e);
|
|
this.updateProps(shape, { syntaxError: true });
|
|
}
|
|
}
|
|
|
|
private updateProps(
|
|
shape: ISocialShape,
|
|
props: Partial<ISocialShape["props"]>
|
|
) {
|
|
this.editor.updateShape<ISocialShape>({
|
|
id: shape.id,
|
|
type: "social",
|
|
props: {
|
|
...shape.props,
|
|
...props,
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
function ValueInterface({
|
|
type,
|
|
value,
|
|
values,
|
|
onChange,
|
|
inputs,
|
|
editor,
|
|
}: {
|
|
type: ValueType;
|
|
value: boolean | number | string;
|
|
values: Record<string, any>;
|
|
onChange: (value: any) => void;
|
|
inputs: any[];
|
|
editor: Editor;
|
|
}) {
|
|
switch (type) {
|
|
case "BOOLEAN":
|
|
return (
|
|
<>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: "4px",
|
|
}}
|
|
>
|
|
<input
|
|
style={{
|
|
pointerEvents: "all",
|
|
width: "20px",
|
|
height: "20px",
|
|
margin: 0,
|
|
}}
|
|
type="checkbox"
|
|
checked={value as boolean}
|
|
onChange={(e) => onChange(e.target.checked)}
|
|
/>
|
|
<div
|
|
style={{ width: "1px", height: "20px", backgroundColor: "grey" }}
|
|
/>
|
|
{Object.values(values).map((bool, i) => (
|
|
<div
|
|
key={`boolean-${i}`}
|
|
style={{
|
|
backgroundColor: bool ? "blue" : "white",
|
|
width: "20px",
|
|
height: "20px",
|
|
border: "1px solid lightgrey",
|
|
borderRadius: 2,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
case "STRING":
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
width: "100%",
|
|
gap: "4px",
|
|
}}
|
|
>
|
|
<textarea
|
|
style={{
|
|
pointerEvents: "all",
|
|
width: "100%",
|
|
minHeight: "60px",
|
|
resize: "vertical",
|
|
padding: "4px",
|
|
boxSizing: "border-box",
|
|
}}
|
|
value={value as string}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
/>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<div style={{ display: "flex", gap: "2px" }}>
|
|
{Object.values(values)
|
|
.filter((value) => value !== "")
|
|
.map((_, i) => (
|
|
<div
|
|
key={`string-${i}`}
|
|
style={{
|
|
width: "8px",
|
|
height: "8px",
|
|
backgroundColor: "blue",
|
|
borderRadius: "50%",
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
case "RANK": {
|
|
const currentUser = getUserId(editor);
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
width: "100%",
|
|
gap: "8px",
|
|
}}
|
|
>
|
|
{inputs.map((input, index) => (
|
|
<div
|
|
key={`rank-${index}`}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "8px",
|
|
border: "1px solid lightgrey",
|
|
borderRadius: 4,
|
|
padding: "4px 8px",
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
flex: 1,
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
}}
|
|
>
|
|
{input}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
const newUp = [
|
|
...new Set([...(values[currentUser]?.up || []), input]),
|
|
];
|
|
//@ts-ignore
|
|
const newDown = (values[currentUser]?.down || []).filter(
|
|
(v: string) => v !== input
|
|
);
|
|
onChange({ up: newUp, down: newDown });
|
|
}}
|
|
style={{
|
|
cursor: "pointer",
|
|
padding: "4px 8px",
|
|
pointerEvents: "all",
|
|
backgroundColor: values[currentUser]?.up?.includes(input)
|
|
? "#4CAF50"
|
|
: "inherit",
|
|
}}
|
|
>
|
|
▲
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
//@ts-ignore
|
|
const newUp = (values[currentUser]?.up || []).filter(
|
|
(v: string) => v !== input
|
|
);
|
|
//@ts-ignore
|
|
const newDown = [
|
|
...new Set([...(values[currentUser]?.down || []), input]),
|
|
];
|
|
onChange({ up: newUp, down: newDown });
|
|
}}
|
|
style={{
|
|
cursor: "pointer",
|
|
padding: "4px 8px",
|
|
pointerEvents: "all",
|
|
backgroundColor: values[currentUser]?.down?.includes(input)
|
|
? "#FF3B30"
|
|
: "inherit",
|
|
}}
|
|
>
|
|
▼
|
|
</button>
|
|
</div>
|
|
))}
|
|
<div style={{ display: "flex", gap: "2px" }}>
|
|
{Object.values(values)
|
|
.filter((value) => value !== "")
|
|
.map((_, i) => (
|
|
<div
|
|
key={`rank-dot-${i}`}
|
|
style={{
|
|
width: "8px",
|
|
height: "8px",
|
|
backgroundColor: "blue",
|
|
borderRadius: "50%",
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
case "SCALAR":
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: "4px",
|
|
}}
|
|
>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
value={(value as number) ?? 0}
|
|
onChange={(e) => onChange(parseFloat(e.target.value))}
|
|
style={{ width: "100px", pointerEvents: "all" }}
|
|
/>
|
|
<span style={{ fontFamily: "monospace" }}>
|
|
{((value as number) ?? 0).toFixed(2)}
|
|
</span>
|
|
<div
|
|
style={{ width: "1px", height: "20px", backgroundColor: "grey" }}
|
|
/>
|
|
{Object.values(values).map((val, i) => (
|
|
<div
|
|
key={`scalar-${i}`}
|
|
style={{
|
|
backgroundColor: `rgba(0, 0, 255, ${val ?? 0})`,
|
|
width: "20px",
|
|
height: "20px",
|
|
border: "1px solid lightgrey",
|
|
borderRadius: 2,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
default:
|
|
return (
|
|
<div style={{ marginTop: 10, textAlign: "center" }}>
|
|
No Interface...
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
function getInputMap(editor: Editor, shape: TLShape) {
|
|
const arrowBindings = editor.getBindingsInvolvingShape(shape.id, "arrow");
|
|
const arrows = arrowBindings.map((binding) =>
|
|
editor.getShape(binding.fromId)
|
|
);
|
|
|
|
return arrows.reduce((acc, arrow) => {
|
|
const edge = getEdge(arrow, editor);
|
|
if (edge && edge.to === shape.id) {
|
|
const sourceShape = editor.getShape(edge.from);
|
|
if (sourceShape && edge.text) {
|
|
//@ts-ignore
|
|
acc[edge.text] = {
|
|
//@ts-ignore
|
|
value: sourceShape.props.value || sourceShape.props.text || null,
|
|
shapeId: sourceShape.id,
|
|
};
|
|
}
|
|
}
|
|
return acc;
|
|
}, {} as Record<string, { value: any; shapeId: TLShapeId }>);
|
|
}
|