PHPackages                             letoceiling-coder/ceiling-calculator - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. letoceiling-coder/ceiling-calculator

ActiveLibrary[Utility & Helpers](/categories/utility)

letoceiling-coder/ceiling-calculator
====================================

Калькулятор натяжных потолков для Laravel с поддержкой Vue 3

v1.0.0(6mo ago)01MITJavaScriptPHP ^8.1

Since Nov 15Pushed 6mo agoCompare

[ Source](https://github.com/letoceiling-coder/cieling-vue)[ Packagist](https://packagist.org/packages/letoceiling-coder/ceiling-calculator)[ RSS](/packages/letoceiling-coder-ceiling-calculator/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (7)Versions (2)Used By (0)

Ceiling Calculator - Laravel Package
====================================

[](#ceiling-calculator---laravel-package)

📦 **Профессиональный калькулятор натяжных потолков для Laravel**

Независимый Laravel-пакет для расчета стоимости натяжных потолков с интерактивным чертежом, выбором материалов, цветов и автоматическим формированием сметы.

✅ Подтверждение
---------------

[](#-подтверждение)

**Да! Пакет устанавливается через Composer и Vue 3 компонент полностью работает с API!**

### Что работает из коробки:

[](#что-работает-из-коробки)

- ✅ **Установка через Composer** - `composer require letoceiling-coder/ceiling-calculator:dev-main`
- ✅ **Vue 3 интеграция** - Полная поддержка Vue 3 компонентов
- ✅ **API endpoints** - Автоматически регистрируются после установки
- ✅ **Подключение к API** - Vue компонент автоматически загружает данные через API
- ✅ **Сохранение расчетов** - Vue компонент сохраняет расчеты через API
- ✅ **Laravel Passport** - Поддержка авторизации через Passport (опционально)

### Доступные API Endpoints:

[](#доступные-api-endpoints)

После установки автоматически доступны:

- `GET /api/ceiling/rooms` - Список помещений
- `GET /api/ceiling/materials` - Список материалов (текстуры, производители, цвета)
- `POST /api/ceiling` - Сохранить расчет
- `PUT /api/ceiling/{id}` - Обновить расчет
- `DELETE /api/ceiling/{id}` - Удалить расчет

### Vue 3 компонент:

[](#vue-3-компонент)

```

```

**См. `QUICK_START_VUE3.md` для быстрого старта и `VUE3_API_INTEGRATION.md` для полного руководства**

**Все работает из коробки! Нет необходимости в дополнительной настройке!** 🎉

📖 О проекте
-----------

[](#-о-проекте)

**Ceiling Calculator** - это полнофункциональный калькулятор для расчета стоимости натяжных потолков, который позволяет:

- 🎨 **Создавать интерактивные чертежи** помещений с помощью canvas
- 📐 **Рассчитывать площадь и периметр** потолка автоматически
- 🎨 **Выбирать текстуры и производителей** из базы данных
- 🌈 **Выбирать цвета** потолка
- 💰 **Автоматически формировать смету** с детализацией работ и материалов
- 💾 **Сохранять расчеты** для последующего использования
- 📄 **Экспортировать сметы** в удобном формате

Пакет полностью независим и содержит все необходимые ресурсы (CSS, JS, изображения, иконки), не требует дополнительных зависимостей от основного проекта.

✨ Основной функционал
---------------------

[](#-основной-функционал)

### 🎯 Основные возможности

[](#-основные-возможности)

#### 1. **Интерактивное создание чертежей**

[](#1-интерактивное-создание-чертежей)

- Рисование контуров помещений на canvas
- Автоматический расчет площади и периметра
- Поддержка сложных форм (многоугольники, кривые)
- Добавление отверстий и проемов
- Измерение углов и расстояний

#### 2. **Выбор материалов**

[](#2-выбор-материалов)

- База данных текстур/фактур (матовые, глянцевые, сатиновые и т.д.)
- Список производителей (Pongs, Clipso, Alkor Draka и др.)
- Выбор цвета из палитры
- Выбор ширины полотна

#### 3. **Расчет стоимости**

[](#3-расчет-стоимости)

- Автоматический расчет площади потолка
- Расчет длины швов
- Учет усадки материала
- Расчет стоимости материалов
- Расчет стоимости работ (монтаж, установка светильников и т.д.)
- Расчет коммуникаций (обход труб, проводов)
- Формирование итоговой сметы

#### 4. **Управление расчетами**

[](#4-управление-расчетами)

- Сохранение расчетов в базу данных
- Просмотр истории расчетов
- Редактирование существующих расчетов
- Удаление расчетов
- Экспорт смет

#### 5. **Работа с помещениями**

[](#5-работа-с-помещениями)

- Создание списка помещений
- Привязка расчетов к помещениям
- Группировка расчетов по помещениям

### 🎨 Интерфейс

[](#-интерфейс)

- **Адаптивный дизайн** - работает на всех устройствах
- **Интуитивное управление** - простое и понятное
- **Визуальный редактор** - чертежи с помощью мыши/касаний
- **Живой предпросмотр** - изменения видны сразу

📦 Установка через Composer
--------------------------

[](#-установка-через-composer)

### Требования

[](#требования)

- PHP >= 8.1
- Laravel >= 10.0
- Composer >= 2.0
- MySQL/PostgreSQL/SQLite

### Шаг 1: Добавить репозиторий

[](#шаг-1-добавить-репозиторий)

В `composer.json` вашего Laravel проекта добавьте репозиторий:

```
{
    "repositories": [
        {
            "type": "vcs",
            "url": "https://github.com/letoceiling-coder/cieling-vue.git"
        }
    ],
    "require": {
        "letoceiling-coder/ceiling-calculator": "dev-main"
    }
}
```

**Для установки из Packagist (после публикации):**

```
{
    "require": {
        "letoceiling-coder/ceiling-calculator": "^1.0"
    }
}
```

### Шаг 2: Установить пакет

[](#шаг-2-установить-пакет)

```
composer require letoceiling-coder/ceiling-calculator:dev-main
```

### Шаг 3: Публикация ресурсов

[](#шаг-3-публикация-ресурсов)

```
php artisan vendor:publish --tag=ceiling-config
php artisan vendor:publish --tag=ceiling-assets
php artisan vendor:publish --tag=ceiling-migrations
```

Или используйте команду установки (выполняет все вышеперечисленное):

```
php artisan ceiling:install
```

### Шаг 4: Запустить миграции

[](#шаг-4-запустить-миграции)

```
php artisan migrate
```

### Шаг 5: Заполнить базу данных (опционально)

[](#шаг-5-заполнить-базу-данных-опционально)

```
php artisan db:seed --class=Database\\Seeders\\CeilingDatabaseSeeder
```

Это заполнит базу данных начальными данными:

- 20 текстур/фактур
- 11 производителей
- Примеры цветов

### Шаг 6: Проверить установку

[](#шаг-6-проверить-установку)

Откройте в браузере:

```
http://your-domain.com/ceilng

```

🎨 Интеграция Vue 3
------------------

[](#-интеграция-vue-3)

Пакет поддерживает опциональную интеграцию Vue 3 для создания интерактивных компонентов.

### Шаг 1: Включить Vue 3

[](#шаг-1-включить-vue-3)

В файле `.env`:

```
CEILING_VUE_ENABLED=true
CEILING_VUE_MODE=production
```

Или в `config/ceiling.php`:

```
'vue' => [
    'enabled' => true,
    'mode' => 'production', // или 'development'
    'cdn' => 'https://unpkg.com/vue@3/dist/vue.global',
],
```

### Шаг 2: Регистрация Vue компонента

[](#шаг-2-регистрация-vue-компонента)

Создайте файл `resources/js/ceiling-calculator.js`:

```
import { createApp } from 'vue';
import CeilingCalculator from './components/CeilingCalculator.vue';

// Регистрация компонента глобально
window.createCeilingApp = function(containerId, props = {}) {
    const app = createApp(CeilingCalculator, props);
    app.mount(containerId);
    return app;
};

// Или регистрация через plugin
export default {
    install(app) {
        app.component('CeilingCalculator', CeilingCalculator);
    }
};
```

### Шаг 3: Создание компонента Vue

[](#шаг-3-создание-компонента-vue)

Создайте файл `resources/js/components/CeilingCalculator.vue`:

```

            {{ title }}

                {{ mode === 'draw' ? 'Режим просмотра' : 'Режим рисования' }}

                Выберите помещение:

                        {{ room.name }}

                    Площадь:
                    {{ area }} м²

                    Периметр:
                    {{ perimeter }} м

                    Выберите текстуру:

                            {{ texture.title }}

                    Выберите производителя:

                            {{ manufacturer.name }}

                    Выберите цвет:

                Расчет стоимости

                    Материалы:
                    {{ materialCost }} ₽

                    Работы:
                    {{ workCost }} ₽

                    Итого:
                    {{ totalCost }} ₽

                    Сохранить расчет

export default {
    name: 'CeilingCalculator',
    props: {
        // Основные props
        title: {
            type: String,
            default: 'Калькулятор натяжных потолков'
        },
        initialData: {
            type: Object,
            default: () => ({})
        },
        apiUrl: {
            type: String,
            default: '/api/ceiling'
        },
        // Конфигурация
        showRoomSelector: {
            type: Boolean,
            default: true
        },
        editable: {
            type: Boolean,
            default: true
        },
        // Данные
        rooms: {
            type: Array,
            default: () => []
        },
        textures: {
            type: Array,
            default: () => []
        },
        manufacturers: {
            type: Array,
            default: () => []
        },
        colors: {
            type: Array,
            default: () => []
        },
        // Состояние
        selectedRoom: {
            type: [Number, String],
            default: null
        },
        selectedTexture: {
            type: [Number, String],
            default: null
        },
        selectedManufacturer: {
            type: [Number, String],
            default: null
        },
        selectedColor: {
            type: [Number, String],
            default: null
        }
    },
    data() {
        return {
            mode: 'draw', // 'draw' или 'view'
            area: 0,
            perimeter: 0,
            materialCost: 0,
            workCost: 0,
            canvas: null,
            ctx: null,
            drawing: false,
            currentPath: [],
            paths: []
        };
    },
    computed: {
        totalCost() {
            return this.materialCost + this.workCost;
        }
    },
    mounted() {
        this.initCanvas();
        this.loadInitialData();
    },
    methods: {
        initCanvas() {
            this.canvas = this.$refs.canvas;
            this.ctx = this.canvas.getContext('2d');

            // Установка размеров canvas
            const container = this.canvas.parentElement;
            this.canvas.width = container.clientWidth;
            this.canvas.height = container.clientHeight;

            // Инициализация canvas
            this.ctx.strokeStyle = '#000';
            this.ctx.lineWidth = 2;
        },
        loadInitialData() {
            if (this.initialData) {
                if (this.initialData.rooms) {
                    this.rooms = this.initialData.rooms;
                }
                if (this.initialData.textures) {
                    this.textures = this.initialData.textures;
                }
                if (this.initialData.manufacturers) {
                    this.manufacturers = this.initialData.manufacturers;
                }
                if (this.initialData.colors) {
                    this.colors = this.initialData.colors;
                }
            }
        },
        onMouseDown(e) {
            if (!this.editable || this.mode !== 'draw') return;

            this.drawing = true;
            const rect = this.canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            this.currentPath = [{ x, y }];
            this.ctx.beginPath();
            this.ctx.moveTo(x, y);
        },
        onMouseMove(e) {
            if (!this.drawing) return;

            const rect = this.canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            this.currentPath.push({ x, y });
            this.ctx.lineTo(x, y);
            this.ctx.stroke();
        },
        onMouseUp() {
            if (!this.drawing) return;

            this.drawing = false;
            if (this.currentPath.length > 2) {
                this.paths.push([...this.currentPath]);
                this.calculateArea();
            }
        },
        calculateArea() {
            // Расчет площади и периметра на основе путей
            // Это упрощенный пример, реальная реализация будет более сложной
            let totalArea = 0;
            let totalPerimeter = 0;

            this.paths.forEach(path => {
                // Расчет площади по формуле Гаусса (Shoelace formula)
                let area = 0;
                for (let i = 0; i

@push('scripts')

    document.addEventListener('DOMContentLoaded', function() {
        const props = {
            title: 'Калькулятор натяжных потолков',
            rooms: @json($data['rooms'] ?? []),
            textures: @json($data['textures'] ?? []),
            manufacturers: @json($data['manufacturers'] ?? []),
            colors: @json($data['colors'] ?? []),
            apiUrl: '{{ config('ceiling.api.prefix') }}',
            showRoomSelector: true,
            editable: true
        };

        window.createCeilingApp('#ceiling-calculator', props);
    });

@endpush
```

#### Вариант 2: Локальное использование

[](#вариант-2-локальное-использование)

```

import CeilingCalculator from './components/CeilingCalculator.vue';

export default {
    components: {
        CeilingCalculator
    },
    data() {
        return {
            rooms: [],
            textures: [],
            manufacturers: [],
            colors: [],
            apiUrl: '/api/ceiling'
        };
    },
    methods: {
        onCalculationSaved(result) {
            console.log('Расчет сохранен:', result);
        }
    }
};

```

### Props компонента

[](#props-компонента)

PropТипПо умолчаниюОписание`title`String`'Калькулятор натяжных потолков'`Заголовок калькулятора`initialData`Object`{}`Начальные данные`apiUrl`String`'/api/ceiling'`URL API для сохранения`showRoomSelector`Boolean`true`Показывать выбор помещения`editable`Boolean`true`Разрешить редактирование`rooms`Array`[]`Список помещений`textures`Array`[]`Список текстур`manufacturers`Array`[]`Список производителей`colors`Array`[]`Список цветов`selectedRoom`Number/String`null`Выбранное помещение`selectedTexture`Number/String`null`Выбранная текстура`selectedManufacturer`Number/String`null`Выбранный производитель`selectedColor`Number/String`null`Выбранный цвет### События (Events)

[](#события-events)

СобытиеПараметрыОписание`room-changed``roomId`Выбрано помещение`texture-changed``textureId`Выбрана текстура`manufacturer-changed``manufacturerId`Выбран производитель`color-changed``colorId`Выбран цвет`calculation-saved``result`Расчет сохранен🔐 Интеграция с Laravel Passport
-------------------------------

[](#-интеграция-с-laravel-passport)

Пакет поддерживает аутентификацию через Laravel Passport для защиты API.

### Шаг 1: Установка Laravel Passport

[](#шаг-1-установка-laravel-passport)

```
composer require laravel/passport
php artisan migrate
php artisan passport:install
```

### Шаг 2: Настройка модели User

[](#шаг-2-настройка-модели-user)

В `app/Models/User.php`:

```
use Laravel\Passport\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;
    // ...
}
```

### Шаг 3: Настройка AuthServiceProvider

[](#шаг-3-настройка-authserviceprovider)

В `app/Providers/AuthServiceProvider.php`:

```
use Laravel\Passport\Passport;

public function boot()
{
    $this->registerPolicies();

    Passport::routes();

    // Настройка токенов
    Passport::tokensExpireIn(now()->addDays(15));
    Passport::refreshTokensExpireIn(now()->addDays(30));
}
```

### Шаг 4: Защита API роутов

[](#шаг-4-защита-api-роутов)

В `config/ceiling.php`:

```
'api' => [
    'prefix' => env('CEILING_API_PREFIX', 'api/ceiling'),
    'middleware' => ['api', 'auth:api'], // Добавлен auth:api
    'rate_limit' => env('CEILING_API_RATE_LIMIT', 60),
],
```

### Шаг 5: Использование токенов в компоненте Vue

[](#шаг-5-использование-токенов-в-компоненте-vue)

Компонент автоматически использует токен из `localStorage`:

```
getAuthToken() {
    return localStorage.getItem('access_token') || '';
}
```

Для сохранения токена после авторизации:

```
// После успешной авторизации
localStorage.setItem('access_token', response.data.access_token);
```

### Шаг 6: Пример авторизации

[](#шаг-6-пример-авторизации)

```
// Получение токена
async function login(email, password) {
    const response = await fetch('/api/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email, password })
    });

    const data = await response.json();
    localStorage.setItem('access_token', data.access_token);
    return data;
}
```

### Использование токенов в запросах

[](#использование-токенов-в-запросах)

Компонент автоматически добавляет токен в заголовки:

```
headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${this.getAuthToken()}`
}
```

📚 Использование
---------------

[](#-использование)

### Через контроллер

[](#через-контроллер)

```
use LetoCeilingCoder\CeilingCalculator\Http\Controllers\CeilingController;

Route::get('/ceilng', [CeilingController::class, 'index']);
```

### Через сервис

[](#через-сервис)

```
use LetoCeilingCoder\CeilingCalculator\CeilingService;

$service = app(CeilingService::class);
$data = $service->getInitialData($request);
```

### Через фасад

[](#через-фасад)

```
use LetoCeilingCoder\CeilingCalculator\Facades\Ceiling;

$data = Ceiling::getInitialData($request);
$rooms = Ceiling::getRooms();
```

📖 Дополнительная документация
-----------------------------

[](#-дополнительная-документация)

- `QUICK_START_VUE3.md` - **Быстрый старт с Vue 3 и API** ⭐
- `VUE3_API_INTEGRATION.md` - **Полное руководство по Vue 3 с API** ⭐
- `COMPOSER_INSTALLATION.md` - подробная установка через Composer
- `COMPOSER_QUICK_START.md` - быстрый старт с Composer
- `VUE3_INTEGRATION.md` - интеграция Vue 3 (базовое руководство)
- `LARAVEL_PASSPORT.md` - настройка Laravel Passport
- `ASSETS_CHECKLIST.md` - чеклист ресурсов
- `PACKAGE_INDEPENDENCE.md` - независимость пакета
- `database/README.md` - структура базы данных

🔧 Требования
------------

[](#-требования)

- PHP >= 8.1
- Laravel >= 10.0
- Composer >= 2.0
- MySQL/PostgreSQL/SQLite
- Laravel Passport (опционально, для API аутентификации)

📝 Лицензия
----------

[](#-лицензия)

MIT

👥 Авторы
--------

[](#-авторы)

LetoCeiling Coder

🔗 Репозиторий
-------------

[](#-репозиторий)

GitHub:

🆘 Поддержка
-----------

[](#-поддержка)

Для вопросов и поддержки создайте Issue в репозитории проекта.

###  Health Score

31

—

LowBetter than 68% of packages

Maintenance69

Regular maintenance activity

Popularity1

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity43

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

182d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/bba6a99134d905eaed0dcccbc768321a5d14edc29aab6dedc45cac31beb0d36e?d=identicon)[letoceiling-coder](/maintainers/letoceiling-coder)

---

Top Contributors

[![Postads](https://avatars.githubusercontent.com/u/25578332?v=4)](https://github.com/Postads "Postads (1 commits)")

---

Tags

laravelcalculatorceilingvue3натяжные потолкикалькулятор

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/letoceiling-coder-ceiling-calculator/health.svg)

```
[![Health](https://phpackages.com/badges/letoceiling-coder-ceiling-calculator/health.svg)](https://phpackages.com/packages/letoceiling-coder-ceiling-calculator)
```

###  Alternatives

[yajra/laravel-datatables-oracle

jQuery DataTables API for Laravel

4.9k33.8M339](/packages/yajra-laravel-datatables-oracle)[psalm/plugin-laravel

Psalm plugin for Laravel

3274.9M308](/packages/psalm-plugin-laravel)[laravel/cashier

Laravel Cashier provides an expressive, fluent interface to Stripe's subscription billing services.

2.5k25.9M107](/packages/laravel-cashier)[laravel/pulse

Laravel Pulse is a real-time application performance monitoring tool and dashboard for your Laravel application.

1.7k12.1M99](/packages/laravel-pulse)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[laravel/cashier-paddle

Cashier Paddle provides an expressive, fluent interface to Paddle's subscription billing services.

264778.4k3](/packages/laravel-cashier-paddle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)