svelte-gantt-event-custom
Version:
Interactive JavaScript Gantt chart/resource booking component
1,844 lines (1,739 loc) • 183 kB
JavaScript
import moment, { duration } from 'moment';
import { of } from 'rxjs';
function noop() { }
function assign(tar, src) {
// @ts-ignore
for (const k in src)
tar[k] = src[k];
return tar;
}
function run(fn) {
return fn();
}
function blank_object() {
return Object.create(null);
}
function run_all(fns) {
fns.forEach(run);
}
function is_function(thing) {
return typeof thing === 'function';
}
function safe_not_equal(a, b) {
return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
}
function subscribe(store, ...callbacks) {
if (store == null) {
return noop;
}
const unsub = store.subscribe(...callbacks);
return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub;
}
function get_store_value(store) {
let value;
subscribe(store, _ => value = _)();
return value;
}
function component_subscribe(component, store, callback) {
component.$$.on_destroy.push(subscribe(store, callback));
}
function create_slot(definition, ctx, $$scope, fn) {
if (definition) {
const slot_ctx = get_slot_context(definition, ctx, $$scope, fn);
return definition[0](slot_ctx);
}
}
function get_slot_context(definition, ctx, $$scope, fn) {
return definition[1] && fn
? assign($$scope.ctx.slice(), definition[1](fn(ctx)))
: $$scope.ctx;
}
function get_slot_changes(definition, $$scope, dirty, fn) {
if (definition[2] && fn) {
const lets = definition[2](fn(dirty));
if ($$scope.dirty === undefined) {
return lets;
}
if (typeof lets === 'object') {
const merged = [];
const len = Math.max($$scope.dirty.length, lets.length);
for (let i = 0; i < len; i += 1) {
merged[i] = $$scope.dirty[i] | lets[i];
}
return merged;
}
return $$scope.dirty | lets;
}
return $$scope.dirty;
}
function update_slot(slot, slot_definition, ctx, $$scope, dirty, get_slot_changes_fn, get_slot_context_fn) {
const slot_changes = get_slot_changes(slot_definition, $$scope, dirty, get_slot_changes_fn);
if (slot_changes) {
const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn);
slot.p(slot_context, slot_changes);
}
}
function exclude_internal_props(props) {
const result = {};
for (const k in props)
if (k[0] !== '$')
result[k] = props[k];
return result;
}
function compute_rest_props(props, keys) {
const rest = {};
keys = new Set(keys);
for (const k in props)
if (!keys.has(k) && k[0] !== '$')
rest[k] = props[k];
return rest;
}
function null_to_empty(value) {
return value == null ? '' : value;
}
function set_store_value(store, ret, value = ret) {
store.set(value);
return ret;
}
function action_destroyer(action_result) {
return action_result && is_function(action_result.destroy) ? action_result.destroy : noop;
}
function append(target, node) {
target.appendChild(node);
}
function insert(target, node, anchor) {
target.insertBefore(node, anchor || null);
}
function detach(node) {
node.parentNode.removeChild(node);
}
function destroy_each(iterations, detaching) {
for (let i = 0; i < iterations.length; i += 1) {
if (iterations[i])
iterations[i].d(detaching);
}
}
function element(name) {
return document.createElement(name);
}
function svg_element(name) {
return document.createElementNS('http://www.w3.org/2000/svg', name);
}
function text(data) {
return document.createTextNode(data);
}
function space() {
return text(' ');
}
function empty() {
return text('');
}
function listen(node, event, handler, options) {
node.addEventListener(event, handler, options);
return () => node.removeEventListener(event, handler, options);
}
function attr(node, attribute, value) {
if (value == null)
node.removeAttribute(attribute);
else if (node.getAttribute(attribute) !== value)
node.setAttribute(attribute, value);
}
function children(element) {
return Array.from(element.childNodes);
}
function set_data(text, data) {
data = '' + data;
if (text.data !== data)
text.data = data;
}
function set_style(node, key, value, important) {
node.style.setProperty(key, value, important ? 'important' : '');
}
// unfortunately this can't be a constant as that wouldn't be tree-shakeable
// so we cache the result instead
let crossorigin;
function is_crossorigin() {
if (crossorigin === undefined) {
crossorigin = false;
try {
if (typeof window !== 'undefined' && window.parent) {
void window.parent.document;
}
}
catch (error) {
crossorigin = true;
}
}
return crossorigin;
}
function add_resize_listener(node, fn) {
const computed_style = getComputedStyle(node);
const z_index = (parseInt(computed_style.zIndex) || 0) - 1;
if (computed_style.position === 'static') {
node.style.position = 'relative';
}
const iframe = element('iframe');
iframe.setAttribute('style', `display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ` +
`overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: ${z_index};`);
iframe.setAttribute('aria-hidden', 'true');
iframe.tabIndex = -1;
const crossorigin = is_crossorigin();
let unsubscribe;
if (crossorigin) {
iframe.src = `data:text/html,<script>onresize=function(){parent.postMessage(0,'*')}</script>`;
unsubscribe = listen(window, 'message', (event) => {
if (event.source === iframe.contentWindow)
fn();
});
}
else {
iframe.src = 'about:blank';
iframe.onload = () => {
unsubscribe = listen(iframe.contentWindow, 'resize', fn);
};
}
append(node, iframe);
return () => {
if (crossorigin) {
unsubscribe();
}
else if (unsubscribe && iframe.contentWindow) {
unsubscribe();
}
detach(iframe);
};
}
function toggle_class(element, name, toggle) {
element.classList[toggle ? 'add' : 'remove'](name);
}
function custom_event(type, detail) {
const e = document.createEvent('CustomEvent');
e.initCustomEvent(type, false, false, detail);
return e;
}
class HtmlTag {
constructor(anchor = null) {
this.a = anchor;
this.e = this.n = null;
}
m(html, target, anchor = null) {
if (!this.e) {
this.e = element(target.nodeName);
this.t = target;
this.h(html);
}
this.i(anchor);
}
h(html) {
this.e.innerHTML = html;
this.n = Array.from(this.e.childNodes);
}
i(anchor) {
for (let i = 0; i < this.n.length; i += 1) {
insert(this.t, this.n[i], anchor);
}
}
p(html) {
this.d();
this.h(html);
this.i(this.a);
}
d() {
this.n.forEach(detach);
}
}
let current_component;
function set_current_component(component) {
current_component = component;
}
function get_current_component() {
if (!current_component)
throw new Error(`Function called outside component initialization`);
return current_component;
}
function onMount(fn) {
get_current_component().$$.on_mount.push(fn);
}
function onDestroy(fn) {
get_current_component().$$.on_destroy.push(fn);
}
function createEventDispatcher() {
const component = get_current_component();
return (type, detail) => {
const callbacks = component.$$.callbacks[type];
if (callbacks) {
// TODO are there situations where events could be dispatched
// in a server (non-DOM) environment?
const event = custom_event(type, detail);
callbacks.slice().forEach(fn => {
fn.call(component, event);
});
}
};
}
function setContext(key, context) {
get_current_component().$$.context.set(key, context);
}
function getContext(key) {
return get_current_component().$$.context.get(key);
}
// TODO figure out if we still want to support
// shorthand events, or if we want to implement
// a real bubbling mechanism
function bubble(component, event) {
const callbacks = component.$$.callbacks[event.type];
if (callbacks) {
callbacks.slice().forEach(fn => fn(event));
}
}
const dirty_components = [];
const binding_callbacks = [];
const render_callbacks = [];
const flush_callbacks = [];
const resolved_promise = Promise.resolve();
let update_scheduled = false;
function schedule_update() {
if (!update_scheduled) {
update_scheduled = true;
resolved_promise.then(flush);
}
}
function tick() {
schedule_update();
return resolved_promise;
}
function add_render_callback(fn) {
render_callbacks.push(fn);
}
let flushing = false;
const seen_callbacks = new Set();
function flush() {
if (flushing)
return;
flushing = true;
do {
// first, call beforeUpdate functions
// and update components
for (let i = 0; i < dirty_components.length; i += 1) {
const component = dirty_components[i];
set_current_component(component);
update(component.$$);
}
dirty_components.length = 0;
while (binding_callbacks.length)
binding_callbacks.pop()();
// then, once components are updated, call
// afterUpdate functions. This may cause
// subsequent updates...
for (let i = 0; i < render_callbacks.length; i += 1) {
const callback = render_callbacks[i];
if (!seen_callbacks.has(callback)) {
// ...so guard against infinite loops
seen_callbacks.add(callback);
callback();
}
}
render_callbacks.length = 0;
} while (dirty_components.length);
while (flush_callbacks.length) {
flush_callbacks.pop()();
}
update_scheduled = false;
flushing = false;
seen_callbacks.clear();
}
function update($$) {
if ($$.fragment !== null) {
$$.update();
run_all($$.before_update);
const dirty = $$.dirty;
$$.dirty = [-1];
$$.fragment && $$.fragment.p($$.ctx, dirty);
$$.after_update.forEach(add_render_callback);
}
}
const outroing = new Set();
let outros;
function group_outros() {
outros = {
r: 0,
c: [],
p: outros // parent group
};
}
function check_outros() {
if (!outros.r) {
run_all(outros.c);
}
outros = outros.p;
}
function transition_in(block, local) {
if (block && block.i) {
outroing.delete(block);
block.i(local);
}
}
function transition_out(block, local, detach, callback) {
if (block && block.o) {
if (outroing.has(block))
return;
outroing.add(block);
outros.c.push(() => {
outroing.delete(block);
if (callback) {
if (detach)
block.d(1);
callback();
}
});
block.o(local);
}
}
function outro_and_destroy_block(block, lookup) {
transition_out(block, 1, 1, () => {
lookup.delete(block.key);
});
}
function update_keyed_each(old_blocks, dirty, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block, next, get_context) {
let o = old_blocks.length;
let n = list.length;
let i = o;
const old_indexes = {};
while (i--)
old_indexes[old_blocks[i].key] = i;
const new_blocks = [];
const new_lookup = new Map();
const deltas = new Map();
i = n;
while (i--) {
const child_ctx = get_context(ctx, list, i);
const key = get_key(child_ctx);
let block = lookup.get(key);
if (!block) {
block = create_each_block(key, child_ctx);
block.c();
}
else if (dynamic) {
block.p(child_ctx, dirty);
}
new_lookup.set(key, new_blocks[i] = block);
if (key in old_indexes)
deltas.set(key, Math.abs(i - old_indexes[key]));
}
const will_move = new Set();
const did_move = new Set();
function insert(block) {
transition_in(block, 1);
block.m(node, next);
lookup.set(block.key, block);
next = block.first;
n--;
}
while (o && n) {
const new_block = new_blocks[n - 1];
const old_block = old_blocks[o - 1];
const new_key = new_block.key;
const old_key = old_block.key;
if (new_block === old_block) {
// do nothing
next = new_block.first;
o--;
n--;
}
else if (!new_lookup.has(old_key)) {
// remove old block
destroy(old_block, lookup);
o--;
}
else if (!lookup.has(new_key) || will_move.has(new_key)) {
insert(new_block);
}
else if (did_move.has(old_key)) {
o--;
}
else if (deltas.get(new_key) > deltas.get(old_key)) {
did_move.add(new_key);
insert(new_block);
}
else {
will_move.add(old_key);
o--;
}
}
while (o--) {
const old_block = old_blocks[o];
if (!new_lookup.has(old_block.key))
destroy(old_block, lookup);
}
while (n)
insert(new_blocks[n - 1]);
return new_blocks;
}
function get_spread_update(levels, updates) {
const update = {};
const to_null_out = {};
const accounted_for = { $$scope: 1 };
let i = levels.length;
while (i--) {
const o = levels[i];
const n = updates[i];
if (n) {
for (const key in o) {
if (!(key in n))
to_null_out[key] = 1;
}
for (const key in n) {
if (!accounted_for[key]) {
update[key] = n[key];
accounted_for[key] = 1;
}
}
levels[i] = n;
}
else {
for (const key in o) {
accounted_for[key] = 1;
}
}
}
for (const key in to_null_out) {
if (!(key in update))
update[key] = undefined;
}
return update;
}
function get_spread_object(spread_props) {
return typeof spread_props === 'object' && spread_props !== null ? spread_props : {};
}
function create_component(block) {
block && block.c();
}
function mount_component(component, target, anchor) {
const { fragment, on_mount, on_destroy, after_update } = component.$$;
fragment && fragment.m(target, anchor);
// onMount happens before the initial afterUpdate
add_render_callback(() => {
const new_on_destroy = on_mount.map(run).filter(is_function);
if (on_destroy) {
on_destroy.push(...new_on_destroy);
}
else {
// Edge case - component was destroyed immediately,
// most likely as a result of a binding initialising
run_all(new_on_destroy);
}
component.$$.on_mount = [];
});
after_update.forEach(add_render_callback);
}
function destroy_component(component, detaching) {
const $$ = component.$$;
if ($$.fragment !== null) {
run_all($$.on_destroy);
$$.fragment && $$.fragment.d(detaching);
// TODO null out other refs, including component.$$ (but need to
// preserve final state?)
$$.on_destroy = $$.fragment = null;
$$.ctx = [];
}
}
function make_dirty(component, i) {
if (component.$$.dirty[0] === -1) {
dirty_components.push(component);
schedule_update();
component.$$.dirty.fill(0);
}
component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
}
function init(component, options, instance, create_fragment, not_equal, props, dirty = [-1]) {
const parent_component = current_component;
set_current_component(component);
const prop_values = options.props || {};
const $$ = component.$$ = {
fragment: null,
ctx: null,
// state
props,
update: noop,
not_equal,
bound: blank_object(),
// lifecycle
on_mount: [],
on_destroy: [],
before_update: [],
after_update: [],
context: new Map(parent_component ? parent_component.$$.context : []),
// everything else
callbacks: blank_object(),
dirty
};
let ready = false;
$$.ctx = instance
? instance(component, prop_values, (i, ret, ...rest) => {
const value = rest.length ? rest[0] : ret;
if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
if ($$.bound[i])
$$.bound[i](value);
if (ready)
make_dirty(component, i);
}
return ret;
})
: [];
$$.update();
ready = true;
run_all($$.before_update);
// `false` as a special case of no DOM component
$$.fragment = create_fragment ? create_fragment($$.ctx) : false;
if (options.target) {
if (options.hydrate) {
const nodes = children(options.target);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
$$.fragment && $$.fragment.l(nodes);
nodes.forEach(detach);
}
else {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
$$.fragment && $$.fragment.c();
}
if (options.intro)
transition_in(component.$$.fragment);
mount_component(component, options.target, options.anchor);
flush();
}
set_current_component(parent_component);
}
class SvelteComponent {
$destroy() {
destroy_component(this, 1);
this.$destroy = noop;
}
$on(type, callback) {
const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
callbacks.push(callback);
return () => {
const index = callbacks.indexOf(callback);
if (index !== -1)
callbacks.splice(index, 1);
};
}
$set() {
// overridden by instance, if it has props
}
}
const subscriber_queue = [];
/**
* Creates a `Readable` store that allows reading by subscription.
* @param value initial value
* @param {StartStopNotifier}start start and stop notifications for subscriptions
*/
function readable(value, start) {
return {
subscribe: writable(value, start).subscribe,
};
}
/**
* Create a `Writable` store that allows both updating and reading by subscription.
* @param {*=}value initial value
* @param {StartStopNotifier=}start start and stop notifications for subscriptions
*/
function writable(value, start = noop) {
let stop;
const subscribers = [];
function set(new_value) {
if (safe_not_equal(value, new_value)) {
value = new_value;
if (stop) { // store is ready
const run_queue = !subscriber_queue.length;
for (let i = 0; i < subscribers.length; i += 1) {
const s = subscribers[i];
s[1]();
subscriber_queue.push(s, value);
}
if (run_queue) {
for (let i = 0; i < subscriber_queue.length; i += 2) {
subscriber_queue[i][0](subscriber_queue[i + 1]);
}
subscriber_queue.length = 0;
}
}
}
}
function update(fn) {
set(fn(value));
}
function subscribe(run, invalidate = noop) {
const subscriber = [run, invalidate];
subscribers.push(subscriber);
if (subscribers.length === 1) {
stop = start(set) || noop;
}
run(value);
return () => {
const index = subscribers.indexOf(subscriber);
if (index !== -1) {
subscribers.splice(index, 1);
}
if (subscribers.length === 0) {
stop();
stop = null;
}
};
}
return { set, update, subscribe };
}
function derived(stores, fn, initial_value) {
const single = !Array.isArray(stores);
const stores_array = single
? [stores]
: stores;
const auto = fn.length < 2;
return readable(initial_value, (set) => {
let inited = false;
const values = [];
let pending = 0;
let cleanup = noop;
const sync = () => {
if (pending) {
return;
}
cleanup();
const result = fn(single ? values[0] : values, set);
if (auto) {
set(result);
}
else {
cleanup = is_function(result) ? result : noop;
}
};
const unsubscribers = stores_array.map((store, i) => subscribe(store, (value) => {
values[i] = value;
pending &= ~(1 << i);
if (inited) {
sync();
}
}, () => {
pending |= (1 << i);
}));
inited = true;
sync();
return function stop() {
run_all(unsubscribers);
cleanup();
};
});
}
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function createEntityStore() {
const { subscribe, set, update } = writable({ ids: [], entities: {} });
return {
set,
_update: update,
subscribe,
add: (item) => update(({ ids, entities }) => ({
ids: [...ids, item.model.id],
entities: Object.assign(Object.assign({}, entities), { [item.model.id]: item })
})),
delete: (id) => update(state => {
const _a = state.entities, _b = id, _ = _a[_b], entities = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
return {
ids: state.ids.filter(i => i !== id),
entities
};
}),
deleteAll: (ids) => update(state => {
const entities = Object.assign({}, state.entities);
const idState = {};
ids.forEach(id => {
delete entities[id];
idState[id] = true;
});
return {
ids: state.ids.filter(i => !idState[i]),
entities
};
}),
update: (item) => update(({ ids, entities }) => ({
ids,
entities: Object.assign(Object.assign({}, entities), { [item.model.id]: item })
})),
upsert: (item) => update(({ ids, entities }) => {
const hasIndex = ids.indexOf(item.model.id) !== -1;
return {
ids: hasIndex ? ids : [...ids, item.model.id],
entities: Object.assign(Object.assign({}, entities), { [item.model.id]: item })
};
}),
upsertAll: (items) => update(state => {
const entities = Object.assign({}, state.entities);
const ids = [...state.ids];
items.forEach(item => {
if (!entities[item.model.id]) {
ids.push(item.model.id);
}
entities[item.model.id] = item;
});
return {
ids,
entities
};
}),
addAll: (items) => {
const ids = [];
const entities = {};
for (const entity of items) {
ids.push(entity.model.id);
entities[entity.model.id] = entity;
}
set({ ids, entities });
},
refresh: () => update(store => (Object.assign({}, store)))
};
}
const taskStore = createEntityStore();
const rowStore = createEntityStore();
const timeRangeStore = createEntityStore();
const allTasks = all(taskStore);
const allRows = all(rowStore);
const allTimeRanges = all(timeRangeStore);
const rowTaskCache = derived(allTasks, $allTasks => {
return $allTasks.reduce((cache, task) => {
if (!cache[task.model.resourceId])
cache[task.model.resourceId] = [];
cache[task.model.resourceId].push(task.model.id);
return cache;
}, {});
});
function all(store) {
return derived(store, ({ ids, entities }) => ids.map(id => entities[id]));
}
function isLeftClick(event) {
return event.which === 1;
}
/**
* Gets mouse position within an element
* @param node
* @param event
*/
function getRelativePos(node, event) {
const rect = node.getBoundingClientRect();
const x = event.clientX - rect.left; //x position within the element.
const y = event.clientY - rect.top; //y position within the element.
return {
x: x,
y: y
};
}
/**
* Adds an event listener that triggers once.
* @param target
* @param type
* @param listener
* @param addOptions
* @param removeOptions
*/
function addEventListenerOnce(target, type, listener, addOptions, removeOptions) {
target.addEventListener(type, function fn(event) {
target.removeEventListener(type, fn, removeOptions);
listener.apply(this, arguments, addOptions);
});
}
/**
* Sets the cursor on an element. Globally by default.
* @param cursor
* @param node
*/
function setCursor(cursor, node = document.body) {
node.style.cursor = cursor;
}
const MIN_DRAG_X = 2;
const MIN_DRAG_Y = 2;
/**
* Applies dragging interaction to gantt elements
*/
class Draggable {
constructor(node, settings) {
this.dragging = false;
this.resizing = false;
this.resizeTriggered = false;
this.onmousedown = (event) => {
if (!isLeftClick(event)) {
return;
}
event.stopPropagation();
event.preventDefault();
const canDrag = this.dragAllowed;
const canResize = this.resizeAllowed;
if (canDrag || canResize) {
const x = this.settings.getX(event);
const y = this.settings.getY(event);
const width = this.settings.getWidth();
this.initialX = event.clientX;
this.initialY = event.clientY;
this.mouseStartPosX = getRelativePos(this.settings.container, event).x - x;
this.mouseStartPosY = getRelativePos(this.settings.container, event).y - y;
this.mouseStartRight = x + width;
if (canResize && this.mouseStartPosX < this.settings.resizeHandleWidth) {
this.direction = 'left';
this.resizing = true;
}
if (canResize && this.mouseStartPosX > width - this.settings.resizeHandleWidth) {
this.direction = 'right';
this.resizing = true;
}
if (canDrag && !this.resizing) {
this.dragging = true;
}
if ((this.dragging || this.resizing) && this.settings.onDown) {
this.settings.onDown({
mouseEvent: event,
x,
width,
y,
resizing: this.resizing,
dragging: this.dragging
});
}
window.addEventListener('mousemove', this.onmousemove, false);
addEventListenerOnce(window, 'mouseup', this.onmouseup);
}
};
this.onmousemove = (event) => {
if (!this.resizeTriggered) {
if (Math.abs(event.clientX - this.initialX) > MIN_DRAG_X || Math.abs(event.clientY - this.initialY) > MIN_DRAG_Y) {
this.resizeTriggered = true;
}
else {
return;
}
}
event.preventDefault();
if (this.resizing) {
const mousePos = getRelativePos(this.settings.container, event);
const x = this.settings.getX(event);
const width = this.settings.getWidth();
let resultX;
let resultWidth;
if (this.direction === 'left') { //resize ulijevo
if (mousePos.x > x + width) {
this.direction = 'right';
resultX = this.mouseStartRight;
resultWidth = this.mouseStartRight - mousePos.x;
this.mouseStartRight = this.mouseStartRight + width;
}
else {
resultX = mousePos.x;
resultWidth = this.mouseStartRight - mousePos.x;
}
}
else if (this.direction === 'right') { //resize desno
if (mousePos.x <= x) {
this.direction = 'left';
resultX = mousePos.x;
resultWidth = x - mousePos.x;
this.mouseStartRight = x;
}
else {
resultX = x;
resultWidth = mousePos.x - x;
}
}
this.settings.onResize && this.settings.onResize({
mouseEvent: event,
x: resultX,
width: resultWidth
});
}
// mouseup
if (this.dragging && this.settings.onDrag) {
const mousePos = getRelativePos(this.settings.container, event);
this.settings.onDrag({
mouseEvent: event,
x: mousePos.x - this.mouseStartPosX,
y: mousePos.y - this.mouseStartPosY
});
}
};
this.onmouseup = (event) => {
const x = this.settings.getX(event);
const y = this.settings.getY(event);
const width = this.settings.getWidth();
this.settings.onMouseUp && this.settings.onMouseUp();
if (this.resizeTriggered && this.settings.onDrop) {
this.settings.onDrop({
mouseEvent: event,
x,
y,
width,
dragging: this.dragging,
resizing: this.resizing
});
}
this.dragging = false;
this.resizing = false;
this.direction = null;
this.resizeTriggered = false;
window.removeEventListener('mousemove', this.onmousemove, false);
};
this.settings = settings;
this.node = node;
node.addEventListener('mousedown', this.onmousedown, false);
}
get dragAllowed() {
if (typeof (this.settings.dragAllowed) === 'function') {
return this.settings.dragAllowed();
}
else {
return this.settings.dragAllowed;
}
}
get resizeAllowed() {
if (typeof (this.settings.resizeAllowed) === 'function') {
return this.settings.resizeAllowed();
}
else {
return this.settings.resizeAllowed;
}
}
destroy() {
this.node.removeEventListener('mousedown', this.onmousedown, false);
this.node.removeEventListener('mousemove', this.onmousemove, false);
this.node.removeEventListener('mouseup', this.onmouseup, false);
}
}
class DragDropManager {
constructor(rowStore) {
this.handlerMap = {};
this.register('row', (event) => {
let elements = document.elementsFromPoint(event.clientX, event.clientY);
let rowElement = elements.find((element) => !!element.getAttribute('data-row-id'));
if (rowElement !== undefined) {
const rowId = parseInt(rowElement.getAttribute('data-row-id'));
const { entities } = get_store_value(rowStore);
const targetRow = entities[rowId];
if (targetRow.model.enableDragging) {
return targetRow;
}
}
return null;
});
}
register(target, handler) {
this.handlerMap[target] = handler;
}
getTarget(target, event) {
//const rowCenterX = this.root.refs.mainContainer.getBoundingClientRect().left + this.root.refs.mainContainer.getBoundingClientRect().width / 2;
var handler = this.handlerMap[target];
if (handler) {
return handler(event);
}
}
}
class TaskFactory {
constructor(columnService) {
this.columnService = columnService;
}
createTask(model) {
// id of task, every task needs to have a unique one
//task.id = task.id || undefined;
// completion %, indicated on task
model.amountDone = model.amountDone || 0;
// css classes
model.classes = model.classes || '';
// datetime task starts on, currently moment-js object
model.from = model.from || null;
// datetime task ends on, currently moment-js object
model.to = model.to || null;
// label of task
model.label = model.label || undefined;
// html content of task, will override label
model.html = model.html || undefined;
// show button bar
model.showButton = model.showButton || false;
// button classes, useful for fontawesome icons
model.buttonClasses = model.buttonClasses || '';
// html content of button
model.buttonHtml = model.buttonHtml || '';
// enable dragging of task
model.enableDragging = model.enableDragging === undefined ? true : model.enableDragging;
const left = this.columnService.getPositionByDate(model.from) | 0;
const right = this.columnService.getPositionByDate(model.to) | 0;
return {
model,
left: left,
width: right - left,
height: this.getHeight(model),
top: this.getPosY(model),
reflections: []
};
}
createTasks(tasks) {
return tasks.map(task => this.createTask(task));
}
row(resourceId) {
return this.rowEntities[resourceId];
}
getHeight(model) {
return this.row(model.resourceId).height - 2 * this.rowPadding;
}
getPosY(model) {
return this.row(model.resourceId).y + this.rowPadding;
}
}
function reflectTask(task, row, options) {
const reflectedId = `reflected-task-${task.model.id}-${row.model.id}`;
const model = Object.assign(Object.assign({}, task.model), { resourceId: row.model.id, id: reflectedId, enableDragging: false });
return Object.assign(Object.assign({}, task), { model, top: row.y + options.rowPadding, reflected: true, reflectedOnParent: true, reflectedOnChild: true, originalId: task.model.id });
}
/* src\entities\Task.svelte generated by Svelte v3.23.0 */
function create_if_block_4(ctx) {
let div;
return {
c() {
div = element("div");
attr(div, "class", "sg-task-background svelte-19txnoa");
set_style(div, "width", /*model*/ ctx[0].amountDone + "%");
},
m(target, anchor) {
insert(target, div, anchor);
},
p(ctx, dirty) {
if (dirty[0] & /*model*/ 1) {
set_style(div, "width", /*model*/ ctx[0].amountDone + "%");
}
},
d(detaching) {
if (detaching) detach(div);
}
};
}
// (300:4) {:else}
function create_else_block(ctx) {
let t_value = /*model*/ ctx[0].label + "";
let t;
return {
c() {
t = text(t_value);
},
m(target, anchor) {
insert(target, t, anchor);
},
p(ctx, dirty) {
if (dirty[0] & /*model*/ 1 && t_value !== (t_value = /*model*/ ctx[0].label + "")) set_data(t, t_value);
},
d(detaching) {
if (detaching) detach(t);
}
};
}
// (298:26)
function create_if_block_3(ctx) {
let html_tag;
let raw_value = /*taskContent*/ ctx[8](/*model*/ ctx[0]) + "";
return {
c() {
html_tag = new HtmlTag(null);
},
m(target, anchor) {
html_tag.m(raw_value, target, anchor);
},
p(ctx, dirty) {
if (dirty[0] & /*model*/ 1 && raw_value !== (raw_value = /*taskContent*/ ctx[8](/*model*/ ctx[0]) + "")) html_tag.p(raw_value);
},
d(detaching) {
if (detaching) html_tag.d();
}
};
}
// (296:4) {#if model.html}
function create_if_block_2(ctx) {
let html_tag;
let raw_value = /*model*/ ctx[0].html + "";
return {
c() {
html_tag = new HtmlTag(null);
},
m(target, anchor) {
html_tag.m(raw_value, target, anchor);
},
p(ctx, dirty) {
if (dirty[0] & /*model*/ 1 && raw_value !== (raw_value = /*model*/ ctx[0].html + "")) html_tag.p(raw_value);
},
d(detaching) {
if (detaching) html_tag.d();
}
};
}
// (302:4) {#if model.showButton}
function create_if_block_1(ctx) {
let span;
let raw_value = /*model*/ ctx[0].buttonHtml + "";
let span_class_value;
let mounted;
let dispose;
return {
c() {
span = element("span");
attr(span, "class", span_class_value = "sg-task-button " + /*model*/ ctx[0].buttonClasses + " svelte-19txnoa");
},
m(target, anchor) {
insert(target, span, anchor);
span.innerHTML = raw_value;
if (!mounted) {
dispose = listen(span, "click", /*onclick*/ ctx[3]);
mounted = true;
}
},
p(ctx, dirty) {
if (dirty[0] & /*model*/ 1 && raw_value !== (raw_value = /*model*/ ctx[0].buttonHtml + "")) span.innerHTML = raw_value;
if (dirty[0] & /*model*/ 1 && span_class_value !== (span_class_value = "sg-task-button " + /*model*/ ctx[0].buttonClasses + " svelte-19txnoa")) {
attr(span, "class", span_class_value);
}
},
d(detaching) {
if (detaching) detach(span);
mounted = false;
dispose();
}
};
}
// (309:2) {#if model.labelBottom}
function create_if_block(ctx) {
let label;
let t_value = /*model*/ ctx[0].labelBottom + "";
let t;
return {
c() {
label = element("label");
t = text(t_value);
attr(label, "class", "sg-label-bottom svelte-19txnoa");
},
m(target, anchor) {
insert(target, label, anchor);
append(label, t);
},
p(ctx, dirty) {
if (dirty[0] & /*model*/ 1 && t_value !== (t_value = /*model*/ ctx[0].labelBottom + "")) set_data(t, t_value);
},
d(detaching) {
if (detaching) detach(label);
}
};
}
function create_fragment(ctx) {
let div1;
let t0;
let div0;
let t1;
let t2;
let div1_data_task_id_value;
let div1_class_value;
let mounted;
let dispose;
let if_block0 = /*model*/ ctx[0].amountDone && create_if_block_4(ctx);
function select_block_type(ctx, dirty) {
if (/*model*/ ctx[0].html) return create_if_block_2;
if (/*taskContent*/ ctx[8]) return create_if_block_3;
return create_else_block;
}
let current_block_type = select_block_type(ctx);
let if_block1 = current_block_type(ctx);
let if_block2 = /*model*/ ctx[0].showButton && create_if_block_1(ctx);
let if_block3 = /*model*/ ctx[0].labelBottom && create_if_block(ctx);
return {
c() {
div1 = element("div");
if (if_block0) if_block0.c();
t0 = space();
div0 = element("div");
if_block1.c();
t1 = space();
if (if_block2) if_block2.c();
t2 = space();
if (if_block3) if_block3.c();
attr(div0, "class", "sg-task-content svelte-19txnoa");
attr(div1, "data-task-id", div1_data_task_id_value = /*model*/ ctx[0].id);
attr(div1, "class", div1_class_value = "sg-task " + /*model*/ ctx[0].classes + " svelte-19txnoa");
set_style(div1, "width", /*_position*/ ctx[6].width + "px");
set_style(div1, "height", /*height*/ ctx[1] + "px"); //thangnaozay todo
set_style(div1, "transform", "translate(" + /*_position*/ ctx[6].x + "px, " + /*_position*/ ctx[6].y + "px)");
toggle_class(div1, "moving", /*_dragging*/ ctx[4] || /*_resizing*/ ctx[5]);
toggle_class(div1, "selected", /*selected*/ ctx[7]);
toggle_class(div1, "animating", animating);
toggle_class(div1, "sg-task-reflected", /*reflected*/ ctx[2]);
},
m(target, anchor) {
insert(target, div1, anchor);
if (if_block0) if_block0.m(div1, null);
append(div1, t0);
append(div1, div0);
if_block1.m(div0, null);
append(div0, t1);
if (if_block2) if_block2.m(div0, null);
append(div1, t2);
if (if_block3) if_block3.m(div1, null);
if (!mounted) {
dispose = action_destroyer(ctx[10].call(null, div1));
mounted = true;
}
},
p(ctx, dirty) {
if (/*model*/ ctx[0].amountDone) {
if (if_block0) {
if_block0.p(ctx, dirty);
} else {
if_block0 = create_if_block_4(ctx);
if_block0.c();
if_block0.m(div1, t0);
}
} else if (if_block0) {
if_block0.d(1);
if_block0 = null;
}
if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block1) {
if_block1.p(ctx, dirty);
} else {
if_block1.d(1);
if_block1 = current_block_type(ctx);
if (if_block1) {
if_block1.c();
if_block1.m(div0, t1);
}
}
if (/*model*/ ctx[0].showButton) {
if (if_block2) {
if_block2.p(ctx, dirty);
} else {
if_block2 = create_if_block_1(ctx);
if_block2.c();
if_block2.m(div0, null);
}
} else if (if_block2) {
if_block2.d(1);
if_block2 = null;
}
if (/*model*/ ctx[0].labelBottom) {
if (if_block3) {
if_block3.p(ctx, dirty);
} else {
if_block3 = create_if_block(ctx);
if_block3.c();
if_block3.m(div1, null);
}
} else if (if_block3) {
if_block3.d(1);
if_block3 = null;
}
if (dirty[0] & /*model*/ 1 && div1_data_task_id_value !== (div1_data_task_id_value = /*model*/ ctx[0].id)) {
attr(div1, "data-task-id", div1_data_task_id_value);
}
if (dirty[0] & /*model*/ 1 && div1_class_value !== (div1_class_value = "sg-task " + /*model*/ ctx[0].classes + " svelte-19txnoa")) {
attr(div1, "class", div1_class_value);
}
if (dirty[0] & /*_position*/ 64) {
set_style(div1, "width", /*_position*/ ctx[6].width + "px");
}
if (dirty[0] & /*height*/ 2) {
set_style(div1, "height", /*height*/ ctx[1] + "px");
}
if (dirty[0] & /*_position*/ 64) {
set_style(div1, "transform", "translate(" + /*_position*/ ctx[6].x + "px, " + /*_position*/ ctx[6].y + "px)");
}
if (dirty[0] & /*model, _dragging, _resizing*/ 49) {
toggle_class(div1, "moving", /*_dragging*/ ctx[4] || /*_resizing*/ ctx[5]);
}
if (dirty[0] & /*model, selected*/ 129) {
toggle_class(div1, "selected", /*selected*/ ctx[7]);
}
if (dirty[0] & /*model*/ 1) {
toggle_class(div1, "animating", animating);
}
if (dirty[0] & /*model, reflected*/ 5) {
toggle_class(div1, "sg-task-reflected", /*reflected*/ ctx[2]);
}
},
i: noop,
o: noop,
d(detaching) {
if (detaching) detach(div1);
if (if_block0) if_block0.d();
if_block1.d();
if (if_block2) if_block2.d();
if (if_block3) if_block3.d();
mounted = false;
dispose();
}
};
}
let animating = true;
function instance($$self, $$props, $$invalidate) {
let $rowStore;
let $taskStore;
let $rowPadding;
let $selection;
component_subscribe($$self, rowStore, $$value => $$invalidate(16, $rowStore = $$value));
component_subscribe($$self, taskStore, $$value => $$invalidate(17, $taskStore = $$value));
let { model } = $$props;
let { height } = $$props;
let { left } = $$props;
let { top } = $$props;
let { width } = $$props;
let { reflected = false } = $$props;
let _dragging = false;
let _resizing = false;
let _position = { x: left, y: top, width };
function updatePosition(x, y, width) {
if (!_dragging && !_resizing) {
$$invalidate(6, _position.x = x, _position);
$$invalidate(6, _position.y = y, _position); //row.y + 6;
$$invalidate(6, _position.width = width, _position);
} // should NOT animate on resize/update of columns
}
const { dimensionsChanged } = getContext("dimensions");
const { rowContainer } = getContext("gantt");
const { taskContent, resizeHandleWidth, rowPadding, onTaskButtonClick, reflectOnParentRows, reflectOnChildRows } = getContext("options");
component_subscribe($$self, rowPadding, value => $$invalidate(18, $rowPadding = value));
const { dndManager, api, utils, selectionManager, columnService } = getContext("services");
function drag(node) {
const ondrop = event => {
let rowChangeValid = true;
//row switching
const sourceRow = $rowStore.entities[model.resourceId];
if (event.dragging && false) { //thangnaozay force false
const targetRow = dndManager.getTarget("row", event.mouseEvent);
if (targetRow) {
$$invalidate(0, model.resourceId = targetRow.model.id, model);
api.tasks.raise.switchRow(this, targetRow, sourceRow);
} else {
rowChangeValid = false;
}
}
$$invalidate(4, _dragging = $$invalidate(5, _resizing = false));
const task = $taskStore.entities[model.id];
if (rowChangeValid) {
const prevFrom = model.from;
const prevTo = model.to;
const newFrom = $$invalidate(0, model.from = utils.roundTo(columnService.getDateByPosition(event.x)), model);
const newTo = $$invalidate(0, model.to = utils.roundTo(columnService.getDateByPosition(event.x + event.width)), model);
const newLeft = columnService.getPositionByDate(newFrom) | 0;
const newRight = columnService.getPositionByDate(newTo) | 0;
const targetRow = $rowStore.entities[model.resourceId];
const left = newLeft;
const width = newRight - newLeft;
const top = $rowPadding + targetRow.y;
updatePosition(left, top, width); // set new position
const newTask = { ...task, left, width, top, model };
const changed = !prevFrom.isSame(newFrom) || !prevTo.isSame(newTo) || sourceRow && sourceRow.model.id !== targetRow.model.id;
//if (changed) {
api.tasks.raise.change({ task: newTask, sourceRow, targetRow });
//}
taskStore.update(newTask); // set new position
//if (changed) {
selectionManager.selectSingle(task.model.id);
api.tasks.raise.changed({ task: newTask, sourceRow, targetRow, prevFrom, prevTo });
//}
//custom thangnaozay // set new position
// setTimeout(function () {
// ($$invalidate(6, _position.x = task.left, _position), $$invalidate(6, _position.width = task.width, _position), $$invalidate(6, _position.y = task.top, _position));
// });
// update shadow tasks
if (newTask.reflections) {
taskStore.deleteAll(newTask.reflections);
}
const reflectedTasks = [];
if (reflectOnChildRows && targetRow.allChildren) {
if (!newTask.reflections) newTask.reflections = [];
const opts = { rowPadding: $rowPadding };
targetRow.allChildren.forEach(r => {
const reflectedTask = reflectTask(newTask, r, opts);
newTask.reflections.push(reflectedTask.model.id);
reflectedTasks.push(reflectedTask);
});
}
if (reflectOnParentRows && targetRow.allParents.length > 0) {
if (!newTask.reflections) newTask.reflections = [];
const opts = { rowPadding: $rowPadding };
targetRow.allParents.forEach(r => {
const reflectedTask = reflectTask(newTask, r, opts);
newTask.reflections.push(reflectedTask.model.id);
reflectedTasks.push(reflectedTask);
});
}
if (reflectedTasks.length > 0) {
taskStore.upsertAll(reflectedTasks);
}
if (!(targetRow.allParents.length > 0) && !targetRow.allChildren) {
newTask.reflections = null;
}
} else {
// reset position
($$invalidate(6, _position.x = task.left, _position), $$invalidate(6, _position.width = task.width, _position), $$invalidate(6, _position.y = task.top, _position));
}
};
const draggable = new Draggable(node,
{
onDown: event => {
if (event.dragging) {
setCursor("move");
}
if (event.resizing) {
setCursor("e-resize");
}
},
onMouseUp: () => {
setCursor("default");
},
onResize: event => {
($$invalidate(6, _position.x = event.x, _position), $$invalidate(6, _position.width = event.width, _position), $$invalidate(5, _resizing = true));
},
onDrag: event => {
($$invalidate(6, _position.x = event.x, _position), $$invalidate(6, _position.y = event.y, _position), $$invalidate(4, _dragging = true));
},
dragAllowed: () => {
return row.model.enableDragging && model.enableDragging;
},
resizeAllowed: () => {
return row.model.enableDragging && model.enableDragging;
},
onDrop: ondrop,
container: rowContainer,
resizeHandleWidth,
getX: () => _position.x,
getY: () => _position.y,
getWidth: () => _position.width
});
return { destroy: () => draggable.destroy() };
}
function onclick(event) {
if (onTaskButtonClick) {
onTaskButtonClick(task);
}
}
let selection = selectionManager.selection;
component_subscribe($$self, selection, value => $$invalidate(19, $selection = value));
let selected = false;
let row;
$$self.$set = $$props => {
if ("model" in $$props) $$invalidate(0, model = $$props.model);
if ("height" in $$props) $$invalidate(1, height = $$props.height);
if ("left" in $$props) $$invalidate(12, left = $$props.left);
if ("top" in $$props) $$invalidate(13, top = $$props.top);
if ("width" in $$props) $$invalidate(14, width = $$props.width);
if ("reflected" in $$props) $$invalidate(2, reflected = $$props.reflected);
};
$$self.$$.update = () => {
if ($$self.$$.dirty[0] & /*left, top, width*/ 28672) {
updatePosition(left, top, width);
}
if ($$self.$$.dirty[0] & /*$selection, model*/ 524289) {
$$invalidate(7, selected = $selection.indexOf(model.id) !== -1);
}
if ($$self.$$.dirty[0] & /*$rowStore, model*/ 65537) {
row = $rowStore.entities[model.resourceId];
}
};
return [
model,
height,
reflected,
onclick,
_dragging,
_resizing,
_position,
selected,
taskContent,
rowPadding,
drag,
selection,
left,
top,
width
];
}
class Task extends SvelteComponent {
constructor(options) {
super();
init(
this,
options,
instance,
create_fragment,
safe_not_equal,
{
model: 0,
height: 1,
left: 12,
top: 13,
width: 14,
reflected: 2,
onclick: 3
},
[-1, -1]
);
}
get onclick() {
return this.$$.ctx[3];
}
}
/* src\entities\Row.svelte generated by Svelte v3.23.0 */
function create_if_block$1(ctx) {
let html_tag;
let raw_value = /*row*/ ctx[0].model.contentHtml + "";
return {
c() {
html_tag = new HtmlTag(null);
},
m(target, anchor) {
html_tag.m(raw_value, target, anchor);
},
p(ctx, dirty) {
if (dirty & /*row*/ 1 && raw_value !== (raw_value = /*row*/ ctx[0].model.contentHtml + "")) html_tag.p(raw_value);
},
d(detaching) {
if (detaching) html_tag.d();
}
};
}
function create_fragment$1(ctx) {
let div;
let div_class_value;
let div_data_row_id_value;
let if_block = /*row*/ ctx[0].model.contentHtml && create_if_block$1(ctx);
return {
c() {
div = element("div");
if (if_block) if_block.c();
attr(div, "class", div_class_value = "sg-row " + /*row*/ ctx[0].model.classes + " svelte-ejtbeo");
attr(div, "data-row-id", div_data_row_id_value = /*row*/ ctx[0].model.id);
set_style(div, "height", /*$rowHeight*/ ctx[4] + "px");
toggle_class(div, "sg-hover", /*$hoveredRow*/ ctx[2] == /*row*/ ctx[0].model.id);
toggle_class(div, "sg-selected", /*$selectedRow*/ ctx[3] == /*row*/ ctx[0].model.id);
},
m(target, anchor) {
insert(target, div, anchor);
if (if_block) if_block.m(div, null);
/*div_binding*/ ctx[8](div);
},
p(ctx, [dirty]) {
if (/*row*/ ctx[0].model.contentHtml) {
if (if_block) {
if_block.p(ctx, dirty);
} else {
if_block = create_if_block$1(ctx);
if_block.c();
if_block.m(div, null);
}
} else if (if_block) {
if_block.d(1);
if_block = null;
}
if (dirty & /*row*/ 1 && div_class_value !== (div_class_value = "sg-row " + /*row*/ ctx[0].model.classes + " svelte-ejtbeo")) {
attr(div, "class", div_class_value);
}
if (dirty & /*row*/ 1 && div_data_row_id_value !== (div_data_row_id_value = /*row*/ ctx[0].model.id)) {
attr(div, "data-row-id", div_data_row_id_value);
}
if (dirty & /*$rowHeight*/ 16) {
set_style(div, "height", /*$rowHeight*/ ctx[4] + "px");
}
if (dirty & /*row, $hoveredRow, row*/ 5) {
toggle_class(div, "sg-hover", /*$hoveredRow*/ ctx[2] == /*row*/ ctx[0].model.id);
}
if (dirty & /*row, $selectedRow, row*/ 9) {
toggle_class(div, "sg-selected", /*$selectedRow*/ ctx[3] == /*row*/ ctx[0].model.id);
}
},
i: noop,
o: noop,
d(detaching) {
if (detaching) detach(div);
if (if_block) if_block.d();
/*div_binding*/ ctx[8](null);
}
};
}
function instance$1($$self, $$props, $$invalidate) {
let $hoveredRow;
let $selectedRow;
let $rowHeight;
let { row } = $$props;
let rowElement;
const { rowHeight } = getContext("options");
component_subscribe($$self, rowHeight, value => $$invalidate(4, $rowHeight = value));
const { hoveredRow, selectedRow } = getContext("gantt");
component_subscribe($$self, hoveredRow, value => $$invalidate(2, $hoveredRow = value));
component_subscribe($$self, selectedRow, value => $$invalidate(3, $selectedRow = value));
function div_binding($$value) {
binding_callbacks[$$value ? "unshift" : "push"](() => {
$$invalidate(1, rowElement = $$value);
});
}
$$self.$set = $$props => {
if ("row" in $$props) $$invalidate(0, row = $$props.row);
};
return [
row,
rowElement,
$hoveredRow,
$selectedRow,
$rowHeight,
rowHeight,
hoveredRow,
selectedRow,
div_binding
];
}
class Row extends SvelteComponent {
constructor(options) {
super();
init(this, options, instance$1, create_fragment$1, safe_not_equal, { row: 0 });
}
}
/* src\entities\TimeRange.svelte generated by Svelte v3.23.0 */
function create_fragment$2(ctx) {
let div1;
let div0;
let t_value = /*model*/ ctx[0].label + "";
let t;
return {
c() {
div1 = element("div");
div0 = element("div");
t = text(t_value);
attr(div0, "class", "sg-time-range-label svelte-18yq9be");
attr(div1, "class", "sg-time-range svelte-18yq9be");
set_style(div1, "width", /*_position*/ ctx[2].width + "px");
set_style(div1, "left", /*_position*/ ctx[2].x + "px");
toggle_class(div1, "moving", /*resizing*/ ctx[1]);
},
m(target, anchor) {
insert(target, div1, anchor);
append(div1, div0);
append(div0, t);
},
p(ctx, [dirty]) {
if (dirty & /*model*/ 1 && t_value !== (t_value = /*model*/ ctx[0].label + "")) set_data(t, t_value);
if (dirty & /*_position*/ 4) {
set_style(div1,