Skip to content

Instantly share code, notes, and snippets.

@daybrush
Last active September 24, 2022 08:28
Show Gist options
  • Save daybrush/b287fa4a1854ff9b9b52ae64a1ae21fa to your computer and use it in GitHub Desktop.
Save daybrush/b287fa4a1854ff9b9b52ae64a1ae21fa to your computer and use it in GitHub Desktop.
middle croffle code
// Original: https://daybrush.com/moveable/storybook2/?path=/story/combination-with-other-components--use-selecto-with-multiple-group
import { deepFlat } from "@daybrush/utils";
import { useKeycon } from "!croffle!keycon";
import Selecto from "!croffle!selecto";
import Moveable, { MoveableTargetGroupsType } from "!croffle!moveable";
import "./cube.css";
import { GroupManager } from "@moveable/helper";
export default function App() {
function $created() {
const { isKeydown: isCommand } = useKeycon({ keys: "meta" });
(this.isCommand = isCommand) as CroffleNamed<
Import<"react-keycon", "useKeycon">,
Named<"isKeydown">
>;
const { isKeydown: isShift } = useKeycon({ keys: "shift" });
(this.isShift = isShift) as CroffleNamed<
Import<"react-keycon", "useKeycon">,
Named<"isKeydown">
>;
(this.groupManagerRef = undefiend) as CroffleRef;
(this.targets = []) as CroffleState;
(this.moveableRef = null) as CroffleRef;
(this.selectoRef = null) as CroffleRef;
(this.cubes = []) as CroffleAny;
for (let i = 0; i < 30; ++i) {
this.cubes.push(i);
}
(this.setSelectedTargets = (nextTargetes: MoveableTargetGroupsType) => {
this.selectoRef.setSelectedTargets(deepFlat(nextTargetes));
this.targets = nextTargetes;
}) as CroffleMethod;
(this.onClickGroup = (e) => {
if (!e.moveableTarget) {
this.setSelectedTargets([]);
return;
}
if (e.isDouble) {
const nextTargets = this.groupManagerRef!.selectNextChild(
this.targets,
e.moveableTarget
);
this.setSelectedTargets(nextTargets);
return;
}
this.selectoRef!.clickTarget(e.inputEvent, e.moveableTarget);
}) as CroffleMethod;
(this.onDrag = (e) => {
e.target.style.transform = e.transform;
}) as CroffleMethod;
(this.onRenderGroup = (e) => {
e.events.forEach((ev) => {
ev.target.style.cssText += ev.cssText;
});
}) as CroffleMethod;
(this.onDragStart = (e) => {
const moveable = this.moveableRef!;
const target = e.inputEvent.target;
// Must have use deep flat
const flatted = this.targets.flat(3) as Array<HTMLElement | SVGElement>;
if (
moveable.isMoveableElement(target) ||
flatted.some((t) => t === target || t.contains(target))
) {
e.stop();
}
}) as CroffleMethod;
(this.onSelectEnd = (e) => {
const { isDragStart, isClick, added, removed, inputEvent } = e;
const moveable = this.moveableRef!;
if (isDragStart) {
inputEvent.preventDefault();
moveable.waitToChangeTarget().then(() => {
moveable.dragStart(inputEvent);
});
}
const groupManager = this.groupManagerRef!;
let nextTargets = this.targets;
if (isDragStart || isClick) {
if (this.isCommand) {
nextTargets = groupManager.selectSingleTargets(
this.targets,
added,
removed
);
} else {
nextTargets = groupManager.selectCompletedTargets(
this.targets,
added,
removed,
this.isShift
);
}
} else {
nextTargets = groupManager.selectSameDepthTargets(
this.targets,
added,
removed
);
}
this.setSelectedTargets(nextTargets);
}) as CroffleMethod;
}
interface $props {}
function $render(
{ Moveable, Selecto },
{
moveableRef,
targets,
onClickGroup,
onDrag,
onRenderGroup,
selectoRef,
onDragStart,
onSelectEnd,
cubes,
}
) {
return (
<div class="root">
<div class="container">
<Moveable
ref={this.moveableRef}
draggable={true}
rotatable={true}
scalable={true}
target={this.targets}
onClickGroup={this.onClickGroup}
onDrag={this.onDrag}
onRenderGroup={this.onRenderGroup}
></Moveable>
<Selecto
ref={this.selectoRef}
dragContainer={window}
selectableTargets={[".selecto-area .cube"]}
hitRate={0}
selectByClick={true}
selectFromInside={false}
toggleContinueSelect={["shift"]}
ratio={0}
onDragStart={this.onDragStart}
onSelectEnd={this.onSelectEnd}
></Selecto>
<p>[[0, 1], 2] is group</p>
<p>[5, 6, 7] is group</p>
<div class="elements selecto-area">
<ForContainer list={this.cubes} value={i}>
<div class="cube" key={i}>
{i}
</div>
</ForContainer>
</div>
<div class="empty elements"></div>
</div>
</div>
);
}
function $mounted() {
$$mounted(() => {
// [[0, 1], 2], 3, 4, [5, 6], 7, 8, 9
const elements = this.selectoRef!.getSelectableElements();
this.groupManagerRef = new GroupManager(
[
[[elements[0], elements[1]], elements[2]],
[elements[5], elements[6], elements[7]],
],
elements
);
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment