Replace Old Widgets

.back/WidBack/private/Animations.cpp

@@ -0,0 +1,103 @@
+
+#include "Animations.hpp"
+
+using namespace tp;
+
+bool AnimValue::gInTransition = false;
+
+halnf AnimValue::interpolate() const {
+	if (!mTimeAnim) {
+		return mVal;
+	}
+
+	auto dt = gCurrentTime - mTimeStart;
+	if (dt > mTimeAnim) dt = mTimeAnim;
+	auto t = (halnf) dt / (halnf) mTimeAnim;
+	t = (halnf) (0.511 + atan((t - 0.36) * 28) / 2.9);
+	t = clamp(t, 0.f, 1.f);
+	auto out = mValPrev + (mVal - mValPrev) * t;
+	return out;
+}
+
+AnimValue::AnimValue() {
+	mTimeStart = gCurrentTime;
+}
+
+void AnimValue::setAnimTime(halni time) { mTimeAnim = time; }
+
+AnimValue::AnimValue(halnf val) {
+	mVal = val;
+	mValPrev = mVal;
+	mTimeStart = gCurrentTime;
+}
+
+bool AnimValue::inTransition() const {
+	auto timePassed = gCurrentTime - mTimeStart >= mTimeAnim;
+	return !timePassed;
+}
+
+void AnimValue::set(halnf val) {
+	if (!inTransition()) mValPrev = mVal;
+	if (val == mVal) return;
+	mValPrev = get();
+	mVal = val;
+	if (!inTransition()) {
+		mTimeStart = gCurrentTime;
+	}
+}
+
+halnf AnimValue::getTarget() const { return mVal; }
+
+void AnimValue::setNoTransition(halnf val) {
+	mValPrev = val;
+	mVal = val;
+	mTimeStart = gCurrentTime - mTimeAnim;
+}
+
+halnf AnimValue::get() const {
+	if (inTransition()) {
+		gInTransition = true;
+		return interpolate();
+	}
+	return mVal;
+}
+
+void AnimValue::operator=(halnf val) {
+	setNoTransition(val);
+}
+
+AnimValue::operator halnf() const { return get(); }
+
+RectF AnimRect::get() const { return { x.get(), y.get(), z.get(), w.get() }; }
+
+RectF AnimRect::getTarget() const { return { x.getTarget(), y.getTarget(), z.getTarget(), w.getTarget() }; }
+
+void AnimRect::setNoTransition(RectF rec) {
+	x.setNoTransition(rec.x);
+	y.setNoTransition(rec.y);
+	z.setNoTransition(rec.z);
+	w.setNoTransition(rec.w);
+}
+
+void AnimRect::setAnimTime(const halni time) {
+	x.setAnimTime(time);
+	y.setAnimTime(time);
+	z.setAnimTime(time);
+	w.setAnimTime(time);
+}
+
+void AnimRect::set(const RectF& in) {
+	x.set(in.x);
+	y.set(in.y);
+	z.set(in.z);
+	w.set(in.w);
+}
+
+AnimColor::AnimColor() : mColor() {}
+
+RGBA AnimColor::get() const {
+	auto col = mColor.get();
+	return { col.x, col.y, col.z, col.w };
+}
+
+void AnimColor::set(const RGBA& col) { mColor.set(RectF(col.r, col.g, col.b, col.a)); }

.back/WidBack/private/ButtonWidget.cpp

@@ -0,0 +1,46 @@
+
+#include "ButtonWidget.hpp"
+
+using namespace tp;
+
+ButtonWidget::ButtonWidget() {
+	this->setArea({ 0, 0, 100, 30 });
+	this->mChildWidgets.pushBack(&mLabel);
+}
+
+ButtonWidget::ButtonWidget(const std::string& label, const tp::RectF& aArea) {
+	this->setArea(aArea);
+	mLabel.mLabel = label;
+	this->mChildWidgets.pushBack(&mLabel);
+}
+
+bool ButtonWidget::isFired() { return this->isReleased(); }
+
+void ButtonWidget::eventProcess(const Events&) {
+	mLabel.setArea(this->mArea);
+
+	if (isFired()) {
+		mCallback();
+	}
+}
+
+void ButtonWidget::eventDraw(Canvas& canvas) {
+	if (this->isHolding()) {
+		canvas.rect(this->mArea, pressedColor, rounding);
+	} else if (this->isFocus()) {
+		canvas.rect(this->mArea, hoveredColor, rounding);
+	} else {
+		canvas.rect(this->mArea, accentColor, rounding);
+	}
+}
+
+void ButtonWidget::setLabel(const std::string& string) { mLabel.mLabel = string; }
+
+void ButtonWidget::eventUpdateConfiguration(WidgetManager& wm) {
+	wm.setActiveId("Button");
+
+	pressedColor = wm.getColor("Pressed", "Action");
+	hoveredColor = wm.getColor("Hovered", "Interaction");
+	accentColor = wm.getColor("Default", "Accent");
+	rounding = wm.getNumber("Rounding", "Rounding");
+}

.back/WidBack/private/CollapsableMenu.cpp

@@ -0,0 +1,96 @@
+
+#include "CollapsableMenu.hpp"
+
+using namespace tp;
+
+CollapsableMenu::CollapsableMenu() {
+	this->mChildWidgets.pushBack(&mHeader);
+	this->mChildWidgets.pushBack(&mBody);
+}
+
+void CollapsableMenu::eventProcess(const Events&) {
+	if (mHeader.isReleased()) {
+		toggleCollapsed();
+	}
+
+	updateGeometry();
+}
+
+void CollapsableMenu::eventDraw(Canvas& canvas) {
+	if (mBorders) {
+		canvas.rect(this->mArea, mBorderColor, rounding);
+		canvas.rect(this->mArea.shrink(mBorderSize), mMenuColor, rounding);
+	} else {
+		canvas.rect(this->mArea, mMenuColor, rounding);
+	}
+}
+
+void CollapsableMenu::addWidgetToMenu(Widget* widget) {
+	mBody.addWidget(widget);
+
+	EventHandler ev;
+	mBody.procWrapper(ev, this->mArea);
+	updateGeometry();
+}
+
+void CollapsableMenu::setLabel(const std::string& string) { mHeader.mLabel = string; }
+
+void CollapsableMenu::toggleCollapsed() { setCollapsed(!getCollapsed()); }
+
+void CollapsableMenu::setCollapsed(bool collapsed) {
+	if (mLocked) return;
+	if (collapsed && !mCollapsed) mPrevHeight = this->mArea.size.y;
+	if (!collapsed && mCollapsed) this->mArea.size.y = mPrevHeight;
+	mCollapsed = collapsed;
+}
+
+bool CollapsableMenu::getCollapsed() const { return mCollapsed; }
+
+void CollapsableMenu::updateGeometry() {
+	mHeader.setArea(getHeaderRect());
+
+	mBody.mEnable = !mCollapsed;
+
+	if (mCollapsed) {
+		this->mArea.size.y = headerHeight;
+	} else {
+		if (mAdjustHeight) {
+			this->mArea.size.y = headerHeight + getBodyRect().size.y + mPadding * 2;
+		}
+
+		mBody.setArea(getBodyRect());
+	}
+}
+
+RectF CollapsableMenu::getHeaderRect() {
+	RectF out = { this->mArea.pos, { this->mArea.size.x, headerHeight } };
+	if (mBorders) out = out.shrink(mPadding);
+	return out;
+}
+
+RectF CollapsableMenu::getBodyRect() {
+	RectF out = { Vec2F{ this->mArea.pos.x, this->mArea.pos.y + headerHeight },
+								Vec2F{ this->mArea.size.x, this->mArea.size.y - headerHeight - mPadding } };
+
+	out.size.y -= mBorderSize * 2;
+
+	if (mAdjustHeight) out.size.y = mBody.getContentSize();
+
+	if (mBody.getContentSize() && mBorders) {
+		out = out.shrink(mPadding);
+		out.size.y += mPadding * 2 + 1;
+	}
+
+	return out;
+}
+
+void CollapsableMenu::eventUpdateConfiguration(WidgetManager& wm) {
+	wm.setActiveId("CollapsableMenu");
+
+	headerHeight = wm.getNumber("HeaderHeight", 35);
+	mMenuColor = wm.getColor("MenuColor", RGBA(0, 0, 0, 1.f));
+	rounding = wm.getNumber("Rounding", "Rounding");
+	mBorderColor = wm.getColor("BorderColor", RGBA(0.16, 0.16, 0.16, 1.f));
+	mBorderSize = wm.getNumber("BorderSize", 2.f);
+	mPadding = wm.getNumber("Padding", "Padding");
+}

.back/WidBack/private/FloatSpaceWidget.cpp

@@ -0,0 +1,47 @@
+#include "FloatingLayoutWidget.hpp"
+
+using namespace tp;
+
+FloatingLayoutWidget::FloatingLayoutWidget()  = default;
+
+void FloatingLayoutWidget::eventProcess(const tp::Events& events) {
+	updateActiveWindow(events);
+}
+
+void FloatingLayoutWidget::updateActiveWindow(const tp::Events& events) {
+	mIsPassThrough = true;
+	for (auto childNode = this->mChildWidgets.firstNode(); childNode; childNode = childNode->next) {
+		auto child = childNode->data;
+		if (child->mArea.isInside(events.getPointer())) {
+			mIsPassThrough = false;
+		}
+	}
+
+	if (events.isPressed(InputID::MOUSE1)) {
+
+		Widget* activeChild = nullptr;
+
+		for (auto childNode = this->mChildWidgets.firstNode(); childNode; childNode = childNode->next) {
+			auto child = childNode->data;
+
+			if (child->mArea.isInside(events.getPointer())) {
+
+				mChildWidgets.detach(childNode);
+				mChildWidgets.pushFront(childNode);
+
+				child->mHandlesEvents = true;
+				activeChild = child;
+				break;
+			}
+		}
+
+		if (activeChild) {
+			for (auto child : this->mChildWidgets) {
+				if (activeChild != child.data() && !child->mIsDocked) child->mHandlesEvents = false;
+			}
+		}
+
+	}
+}
+
+bool FloatingLayoutWidget::handlesEvent() const { return !mIsPassThrough; }

.back/WidBack/private/FloatingWidget.cpp

@@ -0,0 +1,89 @@
+
+#include "FloatingWidget.hpp"
+
+using namespace tp;
+
+FloatingWidget::FloatingWidget() {
+	this->mArea = { 0, 0, 300, 300 };
+	this->mAdjustHeight = false;
+}
+
+void FloatingWidget::eventProcess(const Events& events) {
+	mActionStartRelativePos = events.getPointerPrev() - this->mArea.pos;
+
+	checkFloating(events);
+	if (mResizable) checkResizing(events);
+
+	CollapsableMenu::eventProcess(events);
+}
+
+void FloatingWidget::eventDraw(Canvas& canvas) {
+	CollapsableMenu::eventDraw(canvas);
+
+	if (!this->getCollapsed() && mResizable) {
+		auto rect = getResizeHandle();
+		canvas.rect(rect, mResizeHandleColor, 0);
+		canvas.circle(rect.pos - this->mBorderSize, rect.w, this->mMenuColor);
+	}
+}
+
+void FloatingWidget::eventUpdateConfiguration(WidgetManager& wm) {
+	CollapsableMenu::eventUpdateConfiguration(wm);
+
+	wm.setActiveId("FloatingWidget");
+
+	mResizeHandleSize = wm.getNumber("ResizeHandleSize", 15);
+	mResizeHandleColor = wm.getColor("ResizeHandleColor", RGBA(0.16, 0.16, 0.16, 1.f));
+}
+
+void FloatingWidget::checkFloating(const Events& events) {
+	mDropped = false;
+
+	if (this->mHeader.isHolding() && events.getPointerDelta().length2() > 4) {
+		mFloating = true;
+	}
+
+	if (mFloating && this->mHeader.isReleased()) {
+		mFloating = false;
+		this->mHeader.clearEvents();
+		mDropped = true;
+	}
+
+	if (mFloating) {
+		auto relativePos = events.getPointer() - this->mArea.pos;
+		this->mArea.pos += relativePos - mActionStartRelativePos;
+	}
+}
+
+void FloatingWidget::checkResizing(const Events& events) {
+	if (this->getCollapsed()) return;
+
+	if (events.isPressed(InputID::MOUSE1) && getResizeHandle().isInside(events.getPointer())) {
+		mResizing = true;
+	}
+
+	if (events.isReleased(InputID::MOUSE1)) {
+		mResizing = false;
+	}
+
+	if (mResizing) {
+		auto relativePos = events.getPointer() - this->mArea.pos;
+		this->mArea.size += relativePos - mActionStartRelativePos;
+	}
+
+	if (!this->mCollapsed) {
+		this->mArea.size.clamp(mMinSize, { FLT_MAX, FLT_MAX });
+	}
+}
+
+RectF FloatingWidget::getResizeHandle() {
+	auto size = Vec2F(mResizeHandleSize);
+	auto pos = this->mArea.pos + this->mArea.size - size;
+	return { pos, size };
+}
+
+bool FloatingWidget::isFloating() const { return mFloating; }
+
+void FloatingWidget::stopFloating() {
+	mFloating = false;
+}

.back/WidBack/private/GridLayoutWidget.cpp

@@ -0,0 +1,328 @@
+#include "GridLayoutWidget.hpp"
+
+using namespace tp;
+
+DockWidget::DockWidget() {
+	mSideWidgets[0].side = LEFT;
+	mSideWidgets[1].side = TOP;
+	mSideWidgets[2].side = RIGHT;
+	mSideWidgets[3].side = BOTTOM;
+}
+
+void DockWidget::addSideWidget(Widget* widget, Side side) {
+	if (sideExists(side)) return;
+
+	auto& sideWidget = mSideWidgets[side];
+	sideWidget.widget = widget;
+	for (auto& order : mSideWidgets) {
+		if (order.order == -1) {
+			order.order = side;
+			break;
+		}
+	}
+
+	sideWidget.hidden = false;
+
+	mChildWidgets.pushBack(widget);
+	widget->mIsDocked = true;
+}
+
+void DockWidget::removeSideWidget(Side side) {
+	if (!sideExists(side)) return;
+
+	bool removed = false;
+	for (ualni i = 0; i < 3; i++) {
+		if (mSideWidgets[i].order == side) {
+			removed = true;
+		}
+		if (removed) {
+			swapV(mSideWidgets[i].order, mSideWidgets[i + 1].order);
+		}
+	}
+	mSideWidgets[3].order = -1;
+
+	auto widget = mSideWidgets[side].widget;
+	widget->mIsDocked = false;
+	mChildWidgets.removeNode(mChildWidgets.find(widget));
+
+	mSideWidgets[side].widget = nullptr;
+}
+
+void DockWidget::setCenterWidget(Widget* widget) {
+	mChildWidgets.removeNode(mChildWidgets.find(mCenterWidget));
+	mCenterWidget = widget;
+	mChildWidgets.pushBack(mCenterWidget);
+}
+
+void DockWidget::toggleHiddenState(DockWidget::Side side) {
+	if (!sideExists(side)) return;
+	mSideWidgets[side].hidden = !mSideWidgets[side].hidden;
+}
+
+void DockWidget::eventProcess(const tp::Events& events) {
+	calculateSideAreas();
+	calculateResizeHandles();
+	// calculateHeaderAreas();
+
+	handlePreview(events);
+	handleResizeEvents(events);
+
+	updateChildSideWidgets();
+}
+
+void DockWidget::eventDraw(Canvas& canvas) {
+	canvas.rect(this->mArea, mBackgroundColor, 0);
+
+	for (auto& sideWidget : mSideWidgets) {
+		if (!isSideVisible(sideWidget.side)) continue;
+		auto& handle = sideWidget.resizeHandle;
+		if (handle.active) {
+			canvas.rect(handle.area.shrink(mPadding / 1.5f), mResizeHandleColorActive, 0);
+		} else if (handle.hover) {
+			canvas.rect(handle.area.shrink(mPadding / 1.5f), mResizeHandleColorHovered, 0);
+		}
+	}
+
+	for (auto& sideWidget : mSideWidgets) {
+		if (!isSideVisible(sideWidget.side)) continue;
+		canvas.rect(sideWidget.headerArea, mResizeHandleColorActive, 0);
+	}
+}
+
+void DockWidget::eventDrawOver(Canvas& canvas) {
+	if (!mPreview) return;
+
+	if (mPreviewSide != NONE) canvas.rect(mPreviewArea.shrink(mPadding * 2), mPreviewColor, mRounding);
+
+	for (auto& sideWidget : mSideWidgets) {
+		if (sideWidget.widget) continue;
+		canvas.rect(sideWidget.previewHandleArea, mPreviewColor, mRounding);
+	}
+}
+
+void DockWidget::calculateSideAreas() {
+	auto startArea = this->mArea;
+	for (auto& sideWidget : mSideWidgets) {
+		const auto side = sideWidget.order;
+
+		if (side == -1) break;
+		if (!isSideVisible(Side(side))) continue;
+
+		bool vertical = side == TOP || side == BOTTOM;
+		bool opposite = side == BOTTOM || side == RIGHT;
+
+		auto& sideSize = mSideWidgets[side].absoluteSize;
+
+		auto factor = sideSize / startArea.size[vertical];
+		if (opposite) factor = factor * -1 + 1;
+		auto& area = mSideWidgets[side].area;
+
+		if (!vertical) {
+			const auto first = startArea.splitByFactorHL(factor);
+			const auto second = startArea.splitByFactorHR(factor);
+			area = side == LEFT ? first : second;
+			startArea = side == LEFT ? second : first;
+		} else {
+			const auto first = startArea.splitByFactorVT(factor);
+			const auto second = startArea.splitByFactorVB(factor);
+			area = side == TOP ? first : second;
+			startArea = side == TOP ? second : first;
+		}
+
+		area = area.shrink(mPadding);
+	}
+
+	mCenterArea = startArea.shrink(mPadding);
+}
+
+void DockWidget::calculateResizeHandles() {
+	RectF rec;
+
+	if (isSideVisible(LEFT)) {
+		auto& side = mSideWidgets[LEFT];
+		rec = { side.area.p4(), { mPadding * 2, side.area.size.y } };
+		side.resizeHandle = { rec, 0, mCenterArea.p3().x };
+	}
+	if (isSideVisible(RIGHT)) {
+		auto& side = mSideWidgets[RIGHT];
+		rec = { side.area.p1(), { mPadding * 2, side.area.size.y } };
+		rec.x -= mPadding * 2;
+		side.resizeHandle = { rec, 0, (this->mArea.p3() - mCenterArea.p1()).x };
+	}
+	if (isSideVisible(TOP)) {
+		auto& side = mSideWidgets[TOP];
+		rec = { side.area.p2(), { side.area.size.x, mPadding * 2 } };
+		side.resizeHandle = { rec, 0, mCenterArea.p2().y };
+	}
+	if (isSideVisible(BOTTOM)) {
+		auto& side = mSideWidgets[BOTTOM];
+		rec = { side.area.p1(), { side.area.size.x, mPadding * 2 } };
+		rec.y -= mPadding * 2;
+		side.resizeHandle = { rec, 0, (this->mArea.p3() - mCenterArea.p1()).y };
+	}
+}
+
+void DockWidget::handleResizeEvents(const Events& events) {
+	for (auto& sideWidget : mSideWidgets) {
+		auto& sideSize = sideWidget.absoluteSize;
+		auto& resizeHandle = sideWidget.resizeHandle;
+		if (resizeHandle.end < mSideSizePadding * 2) {
+			sideSize = resizeHandle.end / 2.f;
+		} else {
+			sideSize = clamp(sideSize, resizeHandle.start + mSideSizePadding, resizeHandle.end - mSideSizePadding);
+		}
+	}
+
+	for (auto& sideWidget : mSideWidgets) {
+		sideWidget.resizeHandle.hover = false;
+		if (sideWidget.resizeHandle.area.isInside(events.getPointerPrev())) {
+			sideWidget.resizeHandle.hover = true;
+		}
+	}
+
+	for (auto& sideWidget : mSideWidgets) {
+		sideWidget.resizeHandle.active = false;
+	}
+
+	if (mPreview) return;
+
+	auto resizeSideWidget = [&events](SideWidgetData& sideWidget, Vec2F deltaVec) {
+		halnf delta = deltaVec[(sideWidget.side == TOP || sideWidget.side == BOTTOM)];
+		if (sideWidget.side == BOTTOM || sideWidget.side == RIGHT) delta *= -1;
+		sideWidget.absoluteSize += delta;
+		sideWidget.resizeHandle.active = true;
+	};
+
+	if (events.isDown(InputID::MOUSE1)) {
+		for (auto& sideWidget : mSideWidgets) {
+			if (sideWidget.resizeHandle.area.isInside(events.getPointerPrev())) {
+				resizeSideWidget(sideWidget, events.getPointerDelta());
+			}
+		}
+	}
+
+	if (events.isDown(InputID::LEFT_ALT)) {
+		const auto pointer = events.getPointerPrev();
+		if (!mCenterArea.isInside(pointer)) return;
+
+		if (events.isPressed(InputID::MOUSE1)) {
+			for (auto i : { 0, 1 }) {
+				const auto step = mCenterArea.size[i] / 3.f;
+				const auto rec1 = mCenterArea.pos[i];
+				const auto pos = pointer[i];
+				if (pos > rec1 && pos < rec1 + step) resizeType[i] = 0;
+				if (pos > rec1 + step && pos < rec1 + step * 2) resizeType[i] = 1;
+				if (pos > rec1 + step * 2) resizeType[i] = 2;
+			}
+		} else if (events.isDown(InputID::MOUSE1)) {
+			const auto deltaVec = events.getPointerDelta();
+
+			if (resizeType[0] == 0) resizeSideWidget(mSideWidgets[LEFT], deltaVec);
+			if (resizeType[1] == 0) resizeSideWidget(mSideWidgets[TOP], deltaVec);
+			if (resizeType[0] == 2) resizeSideWidget(mSideWidgets[RIGHT], deltaVec);
+			if (resizeType[1] == 2) resizeSideWidget(mSideWidgets[BOTTOM], deltaVec);
+		}
+	}
+}
+
+void DockWidget::updateChildSideWidgets() {
+	// Update Child Widgets
+	{
+		for (ualni i = 0; i < 4; i++) {
+			if (!sideExists(Side(i))) continue;
+			auto widget = mSideWidgets[i].widget;
+
+			if (!isSideVisible(Side(i))) {
+				widget->mEnable = false;
+			} else {
+				widget->setArea(mSideWidgets[i].area);
+				widget->mEnable = true;
+			}
+		}
+
+		if (mCenterWidget) mCenterWidget->setArea(mCenterArea);
+	}
+
+	// update depth order
+	/*
+		if (mChildWidgets.size() > 1) {
+			for (auto sideChild : mSideWidgets) {
+				if (!sideChild) continue;
+
+		for (auto childNode = mChildWidgets.firstNode(); childNode; childNode = childNode->next) {
+			if (childNode->data == sideChild) {
+				mChildWidgets.detach(childNode);
+				mChildWidgets.pushBack(childNode);
+				break;
+			}
+		}
+	}
+	}
+	*/
+}
+
+void DockWidget::calculateHeaderAreas() {
+	for (ualni i = 0; i < 4; i++) {
+		if (!isSideVisible(Side(i))) continue;
+		auto& area = mSideWidgets[i].area;
+		const auto factor = mHeaderSize / area.size.y;
+		mSideWidgets[i].headerArea = area.splitByFactorVT(factor);
+		area = area.splitByFactorVB(factor);
+
+		mSideWidgets[i].headerArea.size.y -= mPadding;
+	}
+}
+
+bool DockWidget::isSideVisible(DockWidget::Side side) {
+	return sideExists(side) && !mSideWidgets[side].hidden;
+}
+
+bool DockWidget::sideExists(DockWidget::Side side) { return mSideWidgets[side].widget; }
+
+ualni DockWidget::getVisibleSidesSize() {
+	ualni out = 0;
+	for (ualni i = 0; i < 4; i++) {
+		if (isSideVisible(Side(i))) out++;
+	}
+	return out;
+}
+
+DockWidget::Side DockWidget::getPreviewSide() { return mPreviewSide; }
+
+void DockWidget::handlePreview(const Events& events) {
+	if (!mPreview) {
+		mPreviewSide = NONE;
+		return;
+	}
+
+	const halnf factor = 0.3;
+	const halnf handleFactor = 0.1;
+
+	const auto handleSize = min(mCenterArea.size.x, mCenterArea.size.y) * handleFactor;
+
+	for (auto& sideWidget : mSideWidgets) {
+		if (sideWidget.widget) continue;
+
+		switch (sideWidget.side) {
+			case TOP: sideWidget.area = mCenterArea.splitByFactorVT(factor); break;
+			case BOTTOM: sideWidget.area = mCenterArea.splitByFactorVB(1 - factor); break;
+			case LEFT: sideWidget.area = mCenterArea.splitByFactorHL(factor); break;
+			case RIGHT: sideWidget.area = mCenterArea.splitByFactorHR(1 - factor); break;
+			default: break;
+		}
+
+		sideWidget.area = sideWidget.area.shrink(mPadding * 2);
+		sideWidget.previewHandleArea = sideWidget.area.getSizedFromCenter({ handleSize, handleSize });
+	}
+
+	mPreviewArea = {};
+	mPreviewSide = NONE;
+	for (auto& sideWidget : mSideWidgets) {
+		if (sideWidget.widget) continue;
+		
+		if (sideWidget.previewHandleArea.isInside(events.getPointer())) {
+			mPreviewArea = sideWidget.area;
+			mPreviewSide = sideWidget.side;
+		}
+	}
+}

.back/WidBack/private/LabelWidget.cpp

@@ -0,0 +1,17 @@
+#include "LabelWidget.hpp"
+
+using namespace tp;
+
+LabelWidget::LabelWidget() { this->mArea = { 0, 0, 100, 30 }; }
+
+void LabelWidget::eventDraw(Canvas& canvas) {
+	canvas.text(mLabel.c_str(), this->mArea, fontSize, Canvas::LC, padding, fontColor);
+}
+
+void LabelWidget::eventUpdateConfiguration(WidgetManager& wm) {
+	wm.setActiveId("Label");
+
+	fontSize = wm.getNumber("Size", "FontSize");
+	padding = wm.getNumber("Padding", "Padding");
+	fontColor = wm.getColor("Default", "Front");
+}

.back/WidBack/private/ScrollableWidget.cpp

@@ -0,0 +1,179 @@
+#include "ScrollableWidget.hpp"
+#include "../../WidgetsNew/public/widgets/ScrollableWidget.hpp"
+
+using namespace tp;
+
+ScrollBarWidget::ScrollBarWidget() = default;
+
+void ScrollBarWidget::eventProcess(const Events& events) {
+	auto area = getHandle();
+	mHovered = getHandleHandle().isInside(events.getPointer());
+
+	if (mSizeFraction > 1.f) {
+		mPositionFraction = 0;
+		return;
+	}
+
+	if (events.getScrollY() != 0 && mArea.isInside(events.getPointer())) {
+		auto offset = events.getScrollY() < 0 ? 1.0f : -1.0f;
+		mPositionFraction += mSizeFraction * offset * 0.3f;
+		mPositionFraction = tp::clamp(mPositionFraction, 0.f, 1.f - mSizeFraction);
+	}
+
+	if (events.isPressed(InputID::MOUSE1) && area.isInside(events.getPointer())) {
+		mIsScrolling = true;
+	} else if (events.isReleased(InputID::MOUSE1)) {
+		mIsScrolling = false;
+	}
+
+	if (mIsScrolling) {
+		tp::halnf pos = events.getPointer().y;
+		pos = (pos - area.y - mSizeFraction * area.w / 2.f) / area.w;
+		mPositionFraction = tp::clamp(pos, 0.f, 1.f - mSizeFraction);
+	}
+
+	mPositionFraction = tp::clamp(mPositionFraction, 0.f, 1.f - mSizeFraction);
+}
+
+void ScrollBarWidget::eventDraw(Canvas& canvas) {
+	auto area = getHandle();
+
+	if (mSizeFraction > 1.f) return;
+	// if (!areaParent.isOverlap(getHandle())) return;
+
+	tp::RGBA col = mHandleColor;
+
+	if (mIsScrolling) {
+		col = mScrollingColor;
+	} else if (mHovered) {
+		col = mHoveredColor;
+	}
+
+	canvas.rect(area, mDefaultColor, mRounding);
+	canvas.rect(getHandleHandle(), col, mRounding);
+}
+
+RectF ScrollBarWidget::getHandleHandle() const {
+	auto area = getHandle();
+	auto sliderSize = tp::clamp(area.w * mSizeFraction, mMinSize * 2, area.w);
+	auto diffSize = sliderSize - area.w * mSizeFraction;
+	return { area.x, area.y + (area.w - diffSize) * mPositionFraction, area.z, sliderSize };
+}
+
+RectF ScrollBarWidget::getViewport() const {
+	if (mSizeFraction > 1.f) {
+		return this->mArea;
+	}
+	return { this->mArea.x, this->mArea.y, this->mArea.z - mHandleSize, this->mArea.w };
+}
+
+RectF ScrollBarWidget::getHandle() const {
+	return { this->mArea.x + this->mArea.z - mHandleSize + mPadding,
+					 this->mArea.y + mPadding,
+					 mHandleSize - mPadding * 2,
+					 this->mArea.w - mPadding * 2 };
+}
+
+void ScrollBarWidget::eventUpdateConfiguration(WidgetManager& wm) {
+	wm.setActiveId("Scrollbar");
+
+	mDefaultColor = wm.getColor("Default", "Base");
+	mHandleColor = wm.getColor("Handle", "Accent");
+	mHoveredColor = wm.getColor("Hovered", "Interaction");
+	mScrollingColor = wm.getColor("Scrolling", "Action");
+	mPadding = wm.getNumber("Padding", "Padding");
+	mHandleSize = wm.getNumber("HandleSize", 20.f);
+	mMinSize = wm.getNumber("MinSize", 20.f);
+	mRounding = wm.getNumber("Rounding", "Rounding");
+}
+
+ScrollableWindow::ScrollableWindow() {
+	this->mChildWidgets.pushBack(&mScroller);
+	this->mChildWidgets.pushBack(&mContentWidget);
+}
+
+ScrollableWindow::~ScrollableWindow() = default;
+
+void ScrollableWindow::eventProcess(const Events& events) {
+	List<Widget*>& content = mContentWidget.mChildWidgets;
+
+	// to account all changed geometry of child widgets
+	for (auto widget : content) {
+		widget->procWrapper(events, mContentWidget.mVisibleArea);
+	}
+
+	updateContents(content);
+	updateContentSize(content);
+
+	const auto padding = mPadding;
+
+	mScroller.mSizeFraction = mContentWidget.mArea.w / mContentSize;
+	mScroller.setArea(this->mArea);
+	mContentWidget.setArea(mScroller.getViewport());
+
+	if (mScroller.mSizeFraction > 1.f) {
+		setOffset(content, 0);
+	} else {
+		setOffset(content, (-mScroller.mPositionFraction) * mContentSize);
+	}
+
+	for (auto widget : content) {
+		widget->setArea({ mContentWidget.mArea.x + padding,
+											mContentWidget.mArea.y + widget->mArea.y,
+											mScroller.getViewport().z - padding * 2,
+											widget->mArea.w });
+	}
+}
+
+void ScrollableWindow::addWidget(Widget* widget) {
+	mContentWidget.mChildWidgets.pushBack(widget);
+
+	List<Widget*>& content = mContentWidget.mChildWidgets;
+	updateContents(content);
+	updateContentSize(content);
+}
+
+void ScrollableWindow::clearContent() { mContentWidget.mChildWidgets.removeAll(); }
+List<Widget*>& ScrollableWindow::getContent() { return mContentWidget.mChildWidgets; }
+
+void ScrollableWindow::eventUpdateConfiguration(WidgetManager& wm) {
+	wm.setActiveId("ScrollableWidget");
+	mPadding = wm.getNumber("Padding", "Padding");
+}
+
+[[nodiscard]] halnf ScrollableWindow::getContentSize() const { return mContentSize; }
+
+void ScrollableWindow::updateContents(List<Widget*>& contentWidgets) {
+	if (!contentWidgets.size()) {
+		return;
+	}
+
+	const halnf offset = contentWidgets.first()->mArea.y + mPadding;
+
+	halnf start = 0;
+	for (auto widget : contentWidgets) {
+		widget->mArea.y = start;
+		start += widget->mArea.w + mPadding;
+	}
+
+	for (auto widget : contentWidgets) {
+		widget->mArea.y += offset;
+	}
+}
+
+void ScrollableWindow::updateContentSize(List<Widget*>& contentWidgets) {
+	mContentSize = 0;
+	if (contentWidgets.size()) {
+		mContentSize = contentWidgets.last()->mArea.y - contentWidgets.first()->mArea.y;
+		mContentSize += contentWidgets.last()->mArea.w;
+		mContentSize += 2 * mPadding;
+	}
+}
+
+void ScrollableWindow::setOffset(List<Widget*>& contentWidgets, const halnf offset) {
+	if (!contentWidgets.size()) return;
+	auto newOffset = offset - contentWidgets.first()->mArea.y + mPadding;
+	for (auto widget : contentWidgets) {
+		widget->mArea.y += newOffset;
+	}
+}

.back/WidBack/private/SliderWidget.cpp

@@ -0,0 +1,62 @@
+#include "SliderWidget.hpp"
+
+using namespace tp;
+
+SliderWidget::SliderWidget() = default;
+
+void SliderWidget::eventProcess(const Events& events) {
+	if (this->isPressed()) {
+		mIsSliding = true;
+	} else if (events.isReleased(InputID::MOUSE1)) {
+		mIsSliding = false;
+	}
+
+	if (mIsSliding) {
+		mFactor = (events.getPointer().x - this->mArea.x - handleSize / 2.f) / (this->mArea.z - handleSize);
+	}
+
+	mFactor = tp::clamp(mFactor, 0.f, 1.f);
+}
+
+void SliderWidget::eventDraw(Canvas& canvas) {
+	canvas.rect(this->mArea, handleColor, rounding);
+	canvas.rect(this->mArea.shrink(borderSize), defaultColor, rounding);
+	canvas.rect(getHandle(), handleColor, rounding);
+}
+
+RectF SliderWidget::getHandle() const {
+	const auto left = this->mArea.x + (this->mArea.z - handleSize) * mFactor;
+	return { left, this->mArea.y, handleSize, this->mArea.w };
+}
+
+void SliderWidget::eventUpdateConfiguration(WidgetManager& wm) {
+	wm.setActiveId("Slider");
+	defaultColor = wm.getColor("Default", "Base");
+	handleColor = wm.getColor("Handle", RGBA(0.3f, 0.3f, 0.3f, 1.f));
+	borderSize = wm.getNumber("BorderSize", 2);
+	handleSize = wm.getNumber("HandleSize", 15.f);
+	rounding = wm.getNumber("Rounding", "Rounding");
+}
+
+NamedSliderWidget::NamedSliderWidget(const char* name) {
+	mLabel.mLabel = name;
+	this->mArea = { 0, 0, 100, 30 };
+
+	this->mChildWidgets.pushBack(&mSlider);
+	this->mChildWidgets.pushBack(&mLabel);
+}
+
+void NamedSliderWidget::eventProcess(const Events& events) {
+	const auto widthFirst = this->mArea.z * mFactor;
+	const auto widthSecond = this->mArea.z * (1.f - mFactor);
+
+	RectF rec = this->mArea;
+	rec.size.x = widthFirst;
+
+	mLabel.setArea(rec);
+
+	rec.pos.x += widthFirst;
+	rec.size.x = widthSecond;
+
+	mSlider.setArea(rec);
+}

.back/WidBack/private/TextInputWidget.cpp

@@ -0,0 +1,57 @@
+#include "TextInputWidget.hpp"
+
+#include "imgui.h"
+#include "imgui_internal.h"
+
+using namespace tp;
+
+TextInputWidget::TextInputWidget() = default;
+
+void TextInputWidget::eventDraw(Canvas&) {
+	nChanged = false;
+
+	const auto col = mAccentColor;
+	const auto colSel = mHoveredColor;
+
+	ImGui::GetStyle().Colors[ImGuiCol_FrameBg] = { col.r, col.g, col.b, col.a };
+	ImGui::GetStyle().Colors[ImGuiCol_TextSelectedBg] = { colSel.r, colSel.g, colSel.b, colSel.a };
+
+	ImGui::SetNextWindowPos({ this->mArea.x, this->mArea.y });
+	ImGui::SetNextWindowSize({ this->mArea.z, this->mArea.w });
+	ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, { 0, 0 });
+	ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, mRounding * 1.5f);
+	ImGui::PushStyleVar(ImGuiStyleVar_FramePadding, { mPadding, mPadding });
+
+	// ImGui::PushID((int) alni(this));
+	ImGui::Begin(
+		mId.c_str(),
+		0,
+		ImGuiWindowFlags_NoTitleBar | ImGuiWindowFlags_NoCollapse | ImGuiWindowFlags_NoBackground |
+			ImGuiWindowFlags_NoResize
+	);
+
+	if (mMultiline) {
+		if (ImGui::InputTextMultiline("input", mBuff, mMaxBufferSize, { this->mArea.z, this->mArea.w })) {
+			mValue = mBuff;
+			nChanged = true;
+		}
+	} else {
+		if (ImGui::InputTextEx("input", mId.c_str(), mBuff, mMaxBufferSize, { this->mArea.z, this->mArea.w }, 0)) {
+			mValue = mBuff;
+			nChanged = true;
+		}
+	}
+
+	ImGui::End();
+	ImGui::PopStyleVar(3);
+}
+
+void TextInputWidget::eventUpdateConfiguration(WidgetManager& wm) {
+	wm.setActiveId("TextInput");
+
+	mAccentColor = wm.getColor("Accent", "Accent");
+	mBaseColor = wm.getColor("Base", "Base");
+	mRounding = wm.getNumber("Rounding", "Rounding");
+	mHoveredColor = wm.getColor("Hovered", "Accent");
+	mPadding = wm.getNumber("Padding", "Padding");
+}

.back/WidBack/private/WidgetBase.cpp

@@ -0,0 +1,140 @@
+#include "WidgetBase.hpp"
+
+using namespace tp;
+
+Widget::Widget() { mArea = { 0, 0, 100, 100 }; }
+
+Widget::~Widget() = default;
+
+void Widget::procWrapper(const Events& events, const RectF& parentArea) {
+	if (!mEnable) return;
+
+	checkVisibility(events, parentArea);
+
+	if (!mVisible) return;
+
+	checkFocus(events);
+
+	checkClicked(events);
+
+	if (mHandlesEvents) {
+
+		for (auto child : mChildWidgets) {
+			child->procWrapper(events, mVisibleArea);
+		}
+
+		eventProcess(events);
+	}
+}
+
+void Widget::drawWrapper(Canvas& canvas) {
+	if (!mEnable || !mVisible) return;
+
+	eventDraw(canvas);
+
+	// draw child widgets
+	canvas.pushClamp(this->mArea);
+	for (auto child = mChildWidgets.lastNode(); child; child = child->prev) {
+		child->data->drawWrapper(canvas);
+	}
+	canvas.popClamp();
+
+	eventDrawOver(canvas);
+}
+
+void Widget::updateConfigWrapper(WidgetManager& wm) {
+	wm.setActiveId("Global");
+
+	eventUpdateConfiguration(wm);
+
+	for (auto child : mChildWidgets) {
+		child->updateConfigWrapper(wm);
+	}
+}
+
+void Widget::eventProcess(const Events& events) {}
+void Widget::eventDraw(Canvas& canvas) {}
+void Widget::eventDrawOver(Canvas& canvas) {}
+void Widget::eventUpdateConfiguration(WidgetManager& wm) {}
+
+void Widget::eventVisible(const Events& events) {}
+void Widget::eventNotVisible(const Events& events) {}
+
+void Widget::eventFocusEnter(const Events& events) {}
+void Widget::eventFocusLeave(const Events& events) {}
+
+void Widget::eventPressed(const Events& events) {}
+void Widget::eventReleased(const Events& events) {}
+
+void Widget::checkVisibility(const Events& events, const RectF& parentArea) {
+	const bool currentVisibility = parentArea.isOverlap(getArea());
+
+	parentArea.calcIntersection(mArea, mVisibleArea);
+
+	if (currentVisibility != mVisible) {
+		if (currentVisibility) eventVisible(events);
+		else eventNotVisible(events);
+	}
+
+	mVisible = currentVisibility;
+
+	if (!mVisible) {
+		mHolding = false;
+		mPressed = false;
+		mReleased = false;
+	}
+}
+
+void Widget::checkFocus(const Events& events) {
+	const bool currentFocus = mVisibleArea.isInside(events.getPointerPrev());
+
+	if (currentFocus != mInFocus) {
+		if (currentFocus) eventFocusEnter(events);
+		else eventFocusLeave(events);
+	}
+
+	mInFocus = currentFocus;
+
+	if (!mInFocus) {
+		mHolding = false;
+		mPressed = false;
+		mReleased = false;
+	}
+}
+
+void Widget::checkClicked(const Events& events) {
+	mPressed = false;
+	mReleased = false;
+
+	if (!mInFocus) return;
+
+	if (mHolding) {
+		if (events.isReleased(InputID::MOUSE1)) {
+			eventReleased(events);
+			mReleased = true;
+			mHolding = false;
+		}
+	} else {
+		if (events.isPressed(InputID::MOUSE1) && mVisibleArea.isInside(events.getPointer())) {
+			eventPressed(events);
+			mHolding = true;
+			mPressed = true;
+		}
+	}
+}
+
+void Widget::setEnable(bool enable) { mEnable = enable; }
+void Widget::setVisible(bool visible) { mVisible = visible; }
+void Widget::setArea(const RectF& area) { mArea = area; }
+
+const RectF& Widget::getArea() const { return mArea; }
+bool Widget::isFocus() const { return mInFocus; }
+bool Widget::isPressed() const { return mPressed; }
+bool Widget::isReleased() const { return mReleased; }
+bool Widget::isHolding() const { return mHolding; }
+
+void Widget::clearEvents() {
+	mReleased = false;
+	mPressed = false;
+	mHolding = false;
+}

.back/WidBack/private/WidgetManager.cpp

@@ -0,0 +1,74 @@
+#include "WidgetManager.hpp"
+
+using namespace tp;
+
+WidgetManager::WidgetManager() { initGlobalParameters(); }
+WidgetManager::~WidgetManager() { mConfigurations.removeAll(); }
+
+const RGBA& WidgetManager::getColor(const std::string& parameterId, const RGBA& defaultValue) {
+	WidgetConfig& config = getWidgetConfig(mActiveId);
+	Parameter& parameter = getParameter(config, parameterId, Parameter(defaultValue));
+	return parameter.color;
+}
+
+const RGBA& WidgetManager::getColor(const std::string& parameterId, const char* globalRef) {
+	WidgetConfig& config = getWidgetConfig(mActiveId);
+	Parameter& parameter = getParameter(config, parameterId, Parameter(globalRef, Parameter::COL));
+	return parameter.color;
+}
+
+halnf WidgetManager::getNumber(const std::string& parameterId, halnf defaultValue) {
+	WidgetConfig& config = getWidgetConfig(mActiveId);
+	Parameter& parameter = getParameter(config, parameterId, Parameter(defaultValue));
+	return parameter.value;
+}
+
+halnf WidgetManager::getNumber(const std::string& parameterId, const char* globalRef) {
+	WidgetConfig& config = getWidgetConfig(mActiveId);
+	Parameter& parameter = getParameter(config, parameterId, Parameter(globalRef, Parameter::VAL));
+	return parameter.value;
+}
+
+void WidgetManager::setActiveId(const std::string& id) { mActiveId = id; }
+
+WidgetConfig& WidgetManager::getWidgetConfig(const std::string& id) {
+	auto idx = mConfigurations.presents(id);
+	if (idx) return mConfigurations.getSlotVal(idx);
+	mConfigurations.put(id, {});
+	return mConfigurations.get(id);
+}
+
+WidgetManager::Parameter& WidgetManager::getParameter(WidgetConfig& config, const std::string& id, const Parameter& defaultValue) {
+	auto idx = config.mParameters.presents(id);
+
+	if (!idx) {
+		config.mParameters.put(id, defaultValue);
+	}
+
+	Parameter& parameter = config.mParameters.get(id);
+
+	if (parameter.globalReference) {
+		return mGlobalConfig.mParameters.get(parameter.globalId);
+	} else {
+		return parameter;
+	}
+}
+
+void WidgetManager::initGlobalParameters() {
+	auto& params = mGlobalConfig.mParameters;
+
+	params.put("FontSize", Parameter(15.f));
+
+	params.put("FontSizeDim", Parameter(12.f));
+	params.put("Rounding", Parameter(5.f));
+	params.put("Padding", Parameter(5.f));
+	params.put("HandleSize", Parameter(5.f));
+
+	params.put("Background", Parameter(RGBA{ 0.03f, 0.03f, 0.03f, 1.f }));
+	params.put("Base", Parameter(RGBA{ 0.07f, 0.07f, 0.07f, 1.f }));
+	params.put("Accent", Parameter(RGBA{ 0.13f, 0.13f, 0.13f, 1.f }));
+	params.put("Interaction", Parameter(RGBA{ 0.33f, 0.33f, 0.3f, 1.f }));
+	params.put("Action", Parameter(RGBA{ 0.44f, 0.44f, 0.4f, 1.f }));
+	params.put("Front", Parameter(RGBA{ 1.f, 1.f, 1.f, 1.f }));
+	params.put("FrontDim", Parameter(RGBA{ 0.7f, 0.7f, 0.7f, 1.f }));
+}

.back/WidBack/private/WorkspaceWidget.cpp

@@ -0,0 +1,73 @@
+#include "WorkspaceWidget.hpp"
+
+using namespace tp;
+
+WorkspaceWidget::WorkspaceWidget() {
+	this->mChildWidgets.pushBack(&mFloatingLayer);
+	this->mChildWidgets.pushBack(&mDockSpace);
+}
+
+void WorkspaceWidget::eventProcess(const Events& events) {
+	mDockSpace.setArea(this->mArea);
+	mFloatingLayer.setArea(this->mArea);
+
+	mDockSpace.mPreview = false;
+	mDockSpace.mHandlesEvents = !mFloatingLayer.handlesEvent();
+
+	for (auto floatingChild : mFloatingLayer.mChildWidgets) {
+		auto widget = dynamic_cast<FloatingWidget*>(floatingChild.data());
+		if (!widget) continue;
+
+		if (widget->mDropped) {
+			auto side = mDockSpace.getPreviewSide();
+			if (side != DockWidget::NONE) {
+				mFloatingLayer.mChildWidgets.removeNode(mFloatingLayer.mChildWidgets.find(widget));
+				widget->setCollapsed(false);
+				widget->stopFloating();
+				mDockSpace.addSideWidget(widget, side);
+			}
+		}
+
+		if (widget->isFloating()) {
+			mDockSpace.mHandlesEvents = true;
+			mDockSpace.mPreview = true;
+		}
+	}
+
+	for (auto& dockedChild : mDockSpace.mSideWidgets) {
+		auto widget = dynamic_cast<FloatingWidget*>(dockedChild.widget);
+		if (!widget) continue;
+
+		if (widget->isFloating()) {
+			mDockSpace.removeSideWidget(dockedChild.side);
+			mFloatingLayer.mChildWidgets.pushBack(widget);
+			widget->mArea.pos = events.getPointer() - 20;
+			widget->mArea.size = mDefaultFloatSize;
+
+			widget->mResizable = true;
+			// widget->mBorders = true;
+		}
+	}
+
+	// toggle hide state
+	if (events.isDown(InputID::LEFT_ALT)) {
+		if (events.isPressed(InputID::N1)) {
+			mDockSpace.toggleHiddenState(DockWidget::LEFT);
+		} else if (events.isPressed(InputID::N2)) {
+			mDockSpace.toggleHiddenState(DockWidget::TOP);
+		} else if (events.isPressed(InputID::N3)) {
+			mDockSpace.toggleHiddenState(DockWidget::RIGHT);
+		} else if (events.isPressed(InputID::N4)) {
+			mDockSpace.toggleHiddenState(DockWidget::BOTTOM);
+		}
+	}
+
+	for (auto& dockedChild : mDockSpace.mSideWidgets) {
+		auto widget = dynamic_cast<FloatingWidget*>(dockedChild.widget);
+		if (!widget) continue;
+
+		widget->setCollapsed(false);
+		widget->mResizable = false;
+		// widget->mBorders = false;
+	}
+}