tldraw
Version:
A tiny little drawing editor.
206 lines (205 loc) • 10.6 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
var __typeError = (msg) => {
throw TypeError(msg);
};
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
var __decoratorStart = (base) => [, , , __create(base?.[__knownSymbol("metadata")] ?? null)];
var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
var __runInitializers = (array, flags, self, value) => {
for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
return value;
};
var __decorateElement = (array, flags, name, decorators, target, extra) => {
var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
return __privateGet(this, extra);
}, set [name](x) {
return __privateSet(this, extra, x);
} }, name));
k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
for (var i = decorators.length - 1; i >= 0; i--) {
ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
if (k) {
ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
}
it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
else if (typeof it !== "object" || it === null) __typeError("Object expected");
else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
}
return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
};
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
var _dispose_dec, _init;
import {
Vec,
bind,
compact,
isShapeId
} from "@tldraw/editor";
const SLOW_POINTER_LAG_DURATION = 320;
const FAST_POINTER_LAG_DURATION = 60;
_dispose_dec = [bind];
class DragAndDropManager {
constructor(editor) {
this.editor = editor;
__runInitializers(_init, 5, this);
__publicField(this, "shapesToActuallyMove", []);
__publicField(this, "draggedOverShapeIds", /* @__PURE__ */ new Set());
__publicField(this, "initialGroupIds", /* @__PURE__ */ new Map());
__publicField(this, "initialParentIds", /* @__PURE__ */ new Map());
__publicField(this, "initialIndices", /* @__PURE__ */ new Map());
__publicField(this, "initialDraggingOverShape");
__publicField(this, "prevDraggingOverShape");
__publicField(this, "prevPagePoint", new Vec());
__publicField(this, "intervalTimerId", -1);
editor.disposables.add(this.dispose);
}
startDraggingShapes(movingShapes, point, cb) {
const { editor } = this;
if (this.intervalTimerId !== -1) return;
const shapesToActuallyMove = new Set(movingShapes);
const movingGroups = /* @__PURE__ */ new Set();
for (const shape of shapesToActuallyMove) {
const parent = editor.getShapeParent(shape);
if (parent && editor.isShapeOfType(parent, "group")) {
if (!movingGroups.has(parent)) {
movingGroups.add(parent);
}
}
}
for (const movingGroup of movingGroups) {
const children = compact(
editor.getSortedChildIdsForParent(movingGroup).map((id) => editor.getShape(id))
);
shapesToActuallyMove.add(movingGroup);
for (const child of children) {
shapesToActuallyMove.delete(child);
}
}
this.initialParentIds.clear();
for (const shape of shapesToActuallyMove) {
const parent = editor.getShapeParent(shape);
if (parent) {
this.initialParentIds.set(shape.id, parent.id);
}
this.initialIndices.set(shape.id, shape.index);
const group = editor.findShapeAncestor(shape, (s) => editor.isShapeOfType(s, "group"));
if (group) {
this.initialGroupIds.set(shape.id, group.id);
}
}
const allShapes = editor.getCurrentPageShapesSorted();
this.shapesToActuallyMove = Array.from(shapesToActuallyMove).filter((s) => !s.isLocked).sort((a, b) => allShapes.indexOf(a) - allShapes.indexOf(b));
this.initialDraggingOverShape = editor.getDraggingOverShape(point, this.shapesToActuallyMove);
this.prevDraggingOverShape = this.initialDraggingOverShape;
this.updateDraggingShapes(point, cb);
let skip2of3FramesWhileMovingFast = 0;
this.intervalTimerId = this.editor.timers.setInterval(
() => {
skip2of3FramesWhileMovingFast++;
if (skip2of3FramesWhileMovingFast % 3 && this.editor.inputs.getPointerVelocity().len() > 0.5) {
return;
}
this.updateDraggingShapes(editor.inputs.getCurrentPagePoint(), cb);
},
movingShapes.length > 10 ? SLOW_POINTER_LAG_DURATION : FAST_POINTER_LAG_DURATION
);
}
dropShapes(shapes) {
const { editor } = this;
const currentPagePoint = editor.inputs.getCurrentPagePoint();
this.updateDraggingShapes(currentPagePoint);
const draggingOverShape = editor.getDraggingOverShape(currentPagePoint, shapes);
if (draggingOverShape) {
const util = editor.getShapeUtil(draggingOverShape);
util.onDropShapesOver?.(draggingOverShape, shapes, {
initialDraggingOverShapeId: this.initialDraggingOverShape?.id ?? null,
initialParentIds: this.initialParentIds,
initialIndices: this.initialIndices
});
}
this.dispose();
}
clear() {
clearInterval(this.intervalTimerId);
this.intervalTimerId = -1;
this.initialParentIds.clear();
this.initialIndices.clear();
this.shapesToActuallyMove = [];
this.initialDraggingOverShape = void 0;
this.prevDraggingOverShape = void 0;
this.editor.setHintingShapes([]);
}
dispose() {
this.clear();
}
updateDraggingShapes(point, cb) {
const { editor } = this;
const draggingShapes = compact(this.shapesToActuallyMove.map((s) => editor.getShape(s)));
if (!draggingShapes.length) return;
const nextDraggingOverShape = editor.getDraggingOverShape(point, this.shapesToActuallyMove);
const currentPagePoint = editor.inputs.getCurrentPagePoint();
const cursorDidMove = !this.prevPagePoint.equals(currentPagePoint);
this.prevPagePoint.setTo(currentPagePoint);
editor.run(() => {
if (this.prevDraggingOverShape?.id === nextDraggingOverShape?.id) {
if (cursorDidMove && nextDraggingOverShape && isShapeId(nextDraggingOverShape.id) && !editor.inputs.getPreviousPagePoint().equals(currentPagePoint)) {
const util = editor.getShapeUtil(nextDraggingOverShape);
util.onDragShapesOver?.(nextDraggingOverShape, draggingShapes, {
initialDraggingOverShapeId: this.initialDraggingOverShape?.id ?? null,
initialParentIds: this.initialParentIds,
initialIndices: this.initialIndices
});
}
return;
}
if (this.prevDraggingOverShape) {
const util = editor.getShapeUtil(this.prevDraggingOverShape);
util.onDragShapesOut?.(this.editor.getShape(this.prevDraggingOverShape), draggingShapes, {
nextDraggingOverShapeId: nextDraggingOverShape?.id ?? null,
initialDraggingOverShapeId: this.initialDraggingOverShape?.id ?? null,
initialParentIds: this.initialParentIds,
initialIndices: this.initialIndices
});
}
if (nextDraggingOverShape) {
const util = editor.getShapeUtil(nextDraggingOverShape);
util.onDragShapesIn?.(nextDraggingOverShape, draggingShapes, {
initialDraggingOverShapeId: this.initialDraggingOverShape?.id ?? null,
prevDraggingOverShapeId: this.prevDraggingOverShape?.id ?? null,
initialParentIds: this.initialParentIds,
initialIndices: this.initialIndices
});
editor.setHintingShapes([nextDraggingOverShape.id]);
} else if (this.prevDraggingOverShape) {
editor.setHintingShapes([]);
}
cb?.();
});
this.prevDraggingOverShape = nextDraggingOverShape;
}
}
_init = __decoratorStart(null);
__decorateElement(_init, 1, "dispose", _dispose_dec, DragAndDropManager);
__decoratorMetadata(_init, DragAndDropManager);
export {
DragAndDropManager
};
//# sourceMappingURL=DragAndDropManager.mjs.map