- Foldable left panel (user profile) and right panel (task details) - Clicking a task in the list or graph node selects it and shows details - Both views (task list + graph) always mounted via absolute inset-0 for correct canvas dimensions; tabs toggle visibility with opacity - Graph node selection animation: other nodes repel outward (charge -600), then selected node smoothly slides to center (500ms cubic ease-out), then charge restores to -120 and graph stabilizes - Graph re-fits on tab switch and panel resize via ResizeObserver - Fix UUID string IDs throughout (backend returns UUIDs, not integers) - Add TaskDetailPanel, UserPanel components - Add CLAUDE.md project documentation Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
195 lines
6.5 KiB
JavaScript
195 lines
6.5 KiB
JavaScript
import debounce from 'lodash-es/debounce.js';
|
|
|
|
function _arrayLikeToArray(r, a) {
|
|
(null == a || a > r.length) && (a = r.length);
|
|
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
return n;
|
|
}
|
|
function _arrayWithHoles(r) {
|
|
if (Array.isArray(r)) return r;
|
|
}
|
|
function _classCallCheck(a, n) {
|
|
if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
|
|
}
|
|
function _createClass(e, r, t) {
|
|
return Object.defineProperty(e, "prototype", {
|
|
writable: false
|
|
}), e;
|
|
}
|
|
function _iterableToArrayLimit(r, l) {
|
|
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
if (null != t) {
|
|
var e,
|
|
n,
|
|
i,
|
|
u,
|
|
a = [],
|
|
f = true,
|
|
o = false;
|
|
try {
|
|
if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
|
} catch (r) {
|
|
o = true, n = r;
|
|
} finally {
|
|
try {
|
|
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
|
} finally {
|
|
if (o) throw n;
|
|
}
|
|
}
|
|
return a;
|
|
}
|
|
}
|
|
function _nonIterableRest() {
|
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
}
|
|
function _slicedToArray(r, e) {
|
|
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
|
}
|
|
function _unsupportedIterableToArray(r, a) {
|
|
if (r) {
|
|
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
var t = {}.toString.call(r).slice(8, -1);
|
|
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
|
}
|
|
}
|
|
|
|
var Prop = /*#__PURE__*/_createClass(function Prop(name, _ref) {
|
|
var _ref$default = _ref["default"],
|
|
defaultVal = _ref$default === void 0 ? null : _ref$default,
|
|
_ref$triggerUpdate = _ref.triggerUpdate,
|
|
triggerUpdate = _ref$triggerUpdate === void 0 ? true : _ref$triggerUpdate,
|
|
_ref$onChange = _ref.onChange,
|
|
onChange = _ref$onChange === void 0 ? function (newVal, state) {} : _ref$onChange;
|
|
_classCallCheck(this, Prop);
|
|
this.name = name;
|
|
this.defaultVal = defaultVal;
|
|
this.triggerUpdate = triggerUpdate;
|
|
this.onChange = onChange;
|
|
});
|
|
function index (_ref2) {
|
|
var _ref2$stateInit = _ref2.stateInit,
|
|
stateInit = _ref2$stateInit === void 0 ? function () {
|
|
return {};
|
|
} : _ref2$stateInit,
|
|
_ref2$props = _ref2.props,
|
|
rawProps = _ref2$props === void 0 ? {} : _ref2$props,
|
|
_ref2$methods = _ref2.methods,
|
|
methods = _ref2$methods === void 0 ? {} : _ref2$methods,
|
|
_ref2$aliases = _ref2.aliases,
|
|
aliases = _ref2$aliases === void 0 ? {} : _ref2$aliases,
|
|
_ref2$init = _ref2.init,
|
|
initFn = _ref2$init === void 0 ? function () {} : _ref2$init,
|
|
_ref2$update = _ref2.update,
|
|
updateFn = _ref2$update === void 0 ? function () {} : _ref2$update;
|
|
// Parse props into Prop instances
|
|
var props = Object.keys(rawProps).map(function (propName) {
|
|
return new Prop(propName, rawProps[propName]);
|
|
});
|
|
return function KapsuleComp() {
|
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
var classMode = !!(this instanceof KapsuleComp ? this.constructor : void 0);
|
|
var nodeElement = classMode ? args.shift() : undefined;
|
|
var _args$ = args[0],
|
|
options = _args$ === void 0 ? {} : _args$;
|
|
|
|
// Holds component state
|
|
var state = Object.assign({}, stateInit instanceof Function ? stateInit(options) : stateInit,
|
|
// Support plain objects for backwards compatibility
|
|
{
|
|
initialised: false
|
|
});
|
|
|
|
// keeps track of which props triggered an update
|
|
var changedProps = {};
|
|
|
|
// Component constructor
|
|
function comp(nodeElement) {
|
|
initStatic(nodeElement, options);
|
|
digest();
|
|
return comp;
|
|
}
|
|
var initStatic = function initStatic(nodeElement, options) {
|
|
initFn.call(comp, nodeElement, state, options);
|
|
state.initialised = true;
|
|
};
|
|
var digest = debounce(function () {
|
|
if (!state.initialised) {
|
|
return;
|
|
}
|
|
updateFn.call(comp, state, changedProps);
|
|
changedProps = {};
|
|
}, 1);
|
|
|
|
// Getter/setter methods
|
|
props.forEach(function (prop) {
|
|
comp[prop.name] = getSetProp(prop);
|
|
function getSetProp(_ref3) {
|
|
var prop = _ref3.name,
|
|
_ref3$triggerUpdate = _ref3.triggerUpdate,
|
|
redigest = _ref3$triggerUpdate === void 0 ? false : _ref3$triggerUpdate,
|
|
_ref3$onChange = _ref3.onChange,
|
|
onChange = _ref3$onChange === void 0 ? function (newVal, state) {} : _ref3$onChange,
|
|
_ref3$defaultVal = _ref3.defaultVal,
|
|
defaultVal = _ref3$defaultVal === void 0 ? null : _ref3$defaultVal;
|
|
return function (_) {
|
|
var curVal = state[prop];
|
|
if (!arguments.length) {
|
|
return curVal;
|
|
} // Getter mode
|
|
|
|
var val = _ === undefined ? defaultVal : _; // pick default if value passed is undefined
|
|
state[prop] = val;
|
|
onChange.call(comp, val, state, curVal);
|
|
|
|
// track changed props
|
|
!changedProps.hasOwnProperty(prop) && (changedProps[prop] = curVal);
|
|
if (redigest) {
|
|
digest();
|
|
}
|
|
return comp;
|
|
};
|
|
}
|
|
});
|
|
|
|
// Other methods
|
|
Object.keys(methods).forEach(function (methodName) {
|
|
comp[methodName] = function () {
|
|
var _methods$methodName;
|
|
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
args[_key2] = arguments[_key2];
|
|
}
|
|
return (_methods$methodName = methods[methodName]).call.apply(_methods$methodName, [comp, state].concat(args));
|
|
};
|
|
});
|
|
|
|
// Link aliases
|
|
Object.entries(aliases).forEach(function (_ref4) {
|
|
var _ref5 = _slicedToArray(_ref4, 2),
|
|
alias = _ref5[0],
|
|
target = _ref5[1];
|
|
return comp[alias] = comp[target];
|
|
});
|
|
|
|
// Reset all component props to their default value
|
|
comp.resetProps = function () {
|
|
props.forEach(function (prop) {
|
|
comp[prop.name](prop.defaultVal);
|
|
});
|
|
return comp;
|
|
};
|
|
|
|
//
|
|
|
|
comp.resetProps(); // Apply all prop defaults
|
|
state._rerender = digest; // Expose digest method
|
|
|
|
classMode && nodeElement && comp(nodeElement);
|
|
return comp;
|
|
};
|
|
}
|
|
|
|
export { index as default };
|