share_space 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 32915e8b4741eecd245a29eee960ab1484b707f79a3c445915094f61194b4c4e
+  data.tar.gz: 867829aafa5531cd2bbedf52f6899076ba8edd870633673357ac3cdcde76c989
+SHA512:
+  metadata.gz: a066416f1c20fe267023465dce138447f283257007fd56da4ebf639016d15a6f2002d0e5917e690a9cb81c5b207886049d17dd249541e80935d37c4c293b6c3b
+  data.tar.gz: b4b1b0262dc2fd138e7fe32726ad6f7c7f042644791fbcf360ecc344cf4762ae0c3f1700c3e64af220c3847fe8e7b5a4110e1ab47b76a6f19048df339bc7d03f

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright paydaypay1
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,28 @@
+# ShareSpace
+Short description and motivation.
+
+## Usage
+How to use my plugin.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem "share_space"
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install share_space
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,3 @@
+require "bundler/setup"
+
+require "bundler/gem_tasks"

data/app/assets/stylesheets/share_space/application.css

@@ -0,0 +1,32 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */
+.editor-heading { margin-bottom: 1rem !important; }
+.editor-layout { align-items: flex-start; }
+.toolbox { width: 230px; }
+.toolbox .buttons { gap: .5rem; }
+.canvas-column { min-width: 0; }
+.canvas-scroll { overflow: auto; max-height: calc(100vh - 230px); padding: 1.25rem; background: #f1f3f5; border-radius: 8px; }
+#canvas-editor { display: block; max-width: none; box-shadow: 0 2px 12px rgb(10 10 10 / 12%); touch-action: none; }
+.canvas-shape { cursor: grab; }
+.canvas-shape:active { cursor: grabbing; }
+.canvas-shape.is-selected { filter: drop-shadow(0 0 4px #485fc7); }
+.form-box { max-width: 640px; }
+.canvas-color { max-width: 5rem; padding: .25rem; }
+@media (max-width: 768px) {
+  .toolbox { width: 100%; }
+  .toolbox .buttons { flex-direction: row !important; }
+  .canvas-scroll { max-height: 65vh; }
+}

data/app/controllers/share_space/application_controller.rb

@@ -0,0 +1,4 @@
+module ShareSpace
+  class ApplicationController < ActionController::Base
+  end
+end

data/app/controllers/share_space/canvas_elements_controller.rb

@@ -0,0 +1,57 @@
+module ShareSpace
+  class CanvasElementsController < ApplicationController
+    before_action :set_canvas
+    before_action :set_element, only: %i[update destroy]
+
+    def create
+      type = element_params[:type].presence || "ShareSpace::Rectangle"
+      unless CanvasElement::ELEMENT_TYPES.map { |name| "ShareSpace::#{name}" }.include?(type)
+        return head :unprocessable_entity
+      end
+
+      @element = @canvas.elements.new(element_params.except(:type).to_h.merge(type: type))
+      if @element.save
+        render json: element_json(@element), status: :created
+      else
+        render json: { errors: @element.errors.full_messages }, status: :unprocessable_entity
+      end
+    end
+
+    def update
+      if @element.update(element_params.except(:type))
+        render json: element_json(@element)
+      else
+        render json: { errors: @element.errors.full_messages }, status: :unprocessable_entity
+      end
+    end
+
+    def destroy
+      @element.destroy
+      head :no_content
+    end
+
+    private
+
+    def set_canvas
+      @canvas = Canvas.find(params[:canvas_id])
+    end
+
+    def set_element
+      @element = @canvas.elements.find(params[:id])
+    end
+
+    def element_params
+      params.require(:element).permit(:type, :name, :x, :y, :width, :height, :rotation,
+                                     :fill_color, :stroke_color, :stroke_width, :opacity,
+                                     :visible, :locked, :z_index, points: [])
+    end
+
+    def element_json(element)
+      { id: element.id, type: element.type, name: element.name, x: element.x.to_f, y: element.y.to_f,
+        width: element.width&.to_f, height: element.height&.to_f, rotation: element.rotation.to_f,
+        fill_color: element.fill_color, stroke_color: element.stroke_color,
+        stroke_width: element.stroke_width&.to_f, opacity: element.opacity.to_f,
+        visible: element.visible, locked: element.locked, points: element.points }
+    end
+  end
+end

data/app/controllers/share_space/canvases_controller.rb

@@ -0,0 +1,53 @@
+module ShareSpace
+  class CanvasesController < ApplicationController
+    before_action :set_canvas, only: %i[show edit update destroy]
+
+    def index
+      @canvases = Canvas.order(updated_at: :desc)
+    end
+
+    def show
+      @elements = @canvas.elements.ordered
+      @element = @canvas.elements.build(type: "ShareSpace::Rectangle", width: 160, height: 100,
+                                        fill_color: "#48c78e", stroke_color: "#257953", stroke_width: 2)
+    end
+
+    def new
+      @canvas = Canvas.new(width: 1200, height: 800, background_color: "#ffffff")
+    end
+
+    def create
+      @canvas = Canvas.new(canvas_params)
+      if @canvas.save
+        redirect_to canvas_path(@canvas), notice: "Canvas created."
+      else
+        render :new, status: :unprocessable_entity
+      end
+    end
+
+    def edit; end
+
+    def update
+      if @canvas.update(canvas_params)
+        redirect_to canvas_path(@canvas), notice: "Canvas updated."
+      else
+        render :edit, status: :unprocessable_entity
+      end
+    end
+
+    def destroy
+      @canvas.destroy
+      redirect_to canvases_path, notice: "Canvas deleted."
+    end
+
+    private
+
+    def set_canvas
+      @canvas = Canvas.find(params[:id])
+    end
+
+    def canvas_params
+      params.require(:canvas).permit(:name, :width, :height, :background_color)
+    end
+  end
+end

data/app/helpers/share_space/application_helper.rb

@@ -0,0 +1,4 @@
+module ShareSpace
+  module ApplicationHelper
+  end
+end

data/app/jobs/share_space/application_job.rb

@@ -0,0 +1,4 @@
+module ShareSpace
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/share_space/application_mailer.rb

@@ -0,0 +1,6 @@
+module ShareSpace
+  class ApplicationMailer < ActionMailer::Base
+    default from: "from@example.com"
+    layout "mailer"
+  end
+end

data/app/models/share_space/application_record.rb

@@ -0,0 +1,5 @@
+module ShareSpace
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/models/share_space/canvas.rb

@@ -0,0 +1,12 @@
+module ShareSpace
+  class Canvas < ApplicationRecord
+    has_many :elements,
+           class_name: "CanvasElement",
+           dependent: :destroy,
+           inverse_of: :canvas
+
+    validates :name, presence: true
+    validates :width, numericality: { greater_than: 0 }
+    validates :height, numericality: { greater_than: 0 }
+  end
+end

data/app/models/share_space/canvas_element.rb

@@ -0,0 +1,23 @@
+module ShareSpace
+  class CanvasElement < ApplicationRecord
+    belongs_to :canvas, inverse_of: :elements
+
+    scope :visible, -> { where(visible: true) }
+    scope :ordered, -> { order(:z_index, :id) }
+
+    ELEMENT_TYPES = %w[Rectangle Ellipse Line].freeze
+
+    validates :type, inclusion: { in: ELEMENT_TYPES.map { |name| "ShareSpace::#{name}" } }
+
+      validates :x, :y, numericality: true
+    validates :opacity, numericality: { in: 0.0..1.0 }
+
+    def hide!
+      update!(visible: false)
+    end
+
+    def show!
+      update!(visible: true)
+    end
+  end
+end

data/app/models/share_space/ellipse.rb

@@ -0,0 +1,5 @@
+module ShareSpace
+  class Ellipse < CanvasElement
+    validates :width, :height, numericality: { greater_than: 0 }
+  end
+end

data/app/models/share_space/line.rb

@@ -0,0 +1,5 @@
+module ShareSpace
+  class Line < CanvasElement
+    validates :points, presence: true
+  end
+end

data/app/models/share_space/rectangle.rb

@@ -0,0 +1,5 @@
+module ShareSpace
+  class Rectangle < CanvasElement
+    validates :width, :height, numericality: { greater_than: 0 }
+  end
+end

data/app/views/layouts/share_space/application.html.haml

@@ -0,0 +1,21 @@
+!!!
+%html
+  %head
+    %title ShareSpace canvas
+    %meta{ name: "viewport", content: "width=device-width, initial-scale=1" }
+    = csrf_meta_tags
+    = csp_meta_tag
+    %link{ rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css" }
+    = stylesheet_link_tag "share_space/application", media: "all"
+    = yield :head
+  %body
+    %nav.navbar.is-dark{ role: "navigation" }
+      .navbar-brand
+        = link_to "ShareSpace", canvases_path, class: "navbar-item has-text-weight-bold"
+    %main.section
+      .container.is-fluid
+        - if notice
+          .notification.is-success.is-light= notice
+        - if alert
+          .notification.is-danger.is-light= alert
+        = yield

data/app/views/share_space/canvases/_form.html.haml

@@ -0,0 +1,21 @@
+= form_with model: @canvas, url: (@canvas.persisted? ? canvas_path(@canvas) : canvases_path) do |form|
+  - if @canvas.errors.any?
+    .notification.is-danger= @canvas.errors.full_messages.to_sentence
+  .field
+    = form.label :name, class: "label"
+    .control= form.text_field :name, class: "input", required: true
+  .columns
+    .column
+      .field
+        = form.label :width, class: "label"
+        .control= form.number_field :width, class: "input", min: 1, required: true
+    .column
+      .field
+        = form.label :height, class: "label"
+        .control= form.number_field :height, class: "input", min: 1, required: true
+  .field
+    = form.label :background_color, class: "label"
+    .control= form.color_field :background_color, class: "input canvas-color"
+  .field.is-grouped.mt-5
+    .control= form.submit class: "button is-primary"
+    .control= link_to "Cancel", canvases_path, class: "button is-light"

data/app/views/share_space/canvases/edit.html.haml

@@ -0,0 +1,6 @@
+%h1.title Canvas settings
+.box.form-box
+  = render "form"
+  - if @canvas.persisted?
+    %hr
+    = button_to "Delete canvas", canvas_path(@canvas), method: :delete, class: "button is-danger is-light", form: { data: { turbo_confirm: "Delete this canvas and all its elements?" } }

data/app/views/share_space/canvases/index.html.haml

@@ -0,0 +1,20 @@
+.level
+  .level-left
+    %div
+      %h1.title Canvases
+      %p.subtitle Create and edit your browser based canvases.
+  .level-right
+    = link_to "New canvas", new_canvas_path, class: "button is-primary"
+- if @canvases.any?
+  .columns.is-multiline
+    - @canvases.each do |canvas|
+      .column.is-one-quarter
+        .card
+          .card-content
+            %p.title.is-5= canvas.name
+            %p.subtitle.is-6= "#{canvas.width} × #{canvas.height}"
+          .card-footer
+            = link_to "Open editor", canvas_path(canvas), class: "card-footer-item"
+            = link_to "Settings", edit_canvas_path(canvas), class: "card-footer-item"
+- else
+  .notification.is-light No canvases yet. Create one to start drawing.

data/app/views/share_space/canvases/new.html.haml

@@ -0,0 +1,2 @@
+%h1.title New canvas
+.box.form-box= render "form"

data/app/views/share_space/canvases/show.html.haml

@@ -0,0 +1,131 @@
+- content_for :head do
+  %meta{ name: "csrf-token", content: form_authenticity_token }
+.level.editor-heading
+  .level-left
+    %div
+      %h1.title.is-4= @canvas.name
+      %p.subtitle.is-6= "#{@canvas.width} × #{@canvas.height} px"
+  .level-right
+    = link_to "All canvases", canvases_path, class: "button is-light"
+    = link_to "Settings", edit_canvas_path(@canvas), class: "button is-light"
+.columns.editor-layout
+  .column.is-narrow.toolbox
+    %p.menu-label Add element
+    .buttons.are-small.is-flex-direction-column.is-align-items-stretch
+      %button.button.is-primary{ type: "button", data: { draw: "rectangle" } } Rectangle
+      %button.button{ type: "button", data: { draw: "ellipse" } } Ellipse
+      %button.button{ type: "button", data: { draw: "line" } } Line
+      %button.button{ type: "button", data: { draw: "select" } } Select / move
+    %hr
+    %p.menu-label Selected element
+    %p#selection-empty.has-text-grey.is-size-7 Click a shape to edit its properties.
+    #inspector.is-hidden
+      .field
+        %label.label X
+        .control= number_field_tag :element_x, nil, class: "input is-small", id: "element-x", step: "any"
+      .field
+        %label.label Y
+        .control= number_field_tag :element_y, nil, class: "input is-small", id: "element-y", step: "any"
+      .field
+        %label.label Width
+        .control= number_field_tag :element_width, nil, class: "input is-small", id: "element-width", min: 1, step: "any"
+      .field
+        %label.label Height
+        .control= number_field_tag :element_height, nil, class: "input is-small", id: "element-height", min: 1, step: "any"
+      .field
+        %label.label Fill
+        .control= color_field_tag :element_fill_color, "#48c78e", class: "input is-small canvas-color", id: "element-fill"
+      .buttons
+        %button#delete-element.button.is-danger.is-light.is-small{ type: "button" } Delete
+  .column.canvas-column
+    .canvas-scroll
+      %svg#canvas-editor{ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 #{@canvas.width} #{@canvas.height}", width: @canvas.width, height: @canvas.height,
+        style: "background: #{@canvas.background_color}", data: { canvas_width: @canvas.width, canvas_height: @canvas.height,
+          create_url: canvas_elements_path(@canvas), update_url: canvas_elements_path(@canvas, id: "ELEMENT_ID"),
+          csrf: form_authenticity_token } }
+        - @elements.each do |element|
+          - next unless element.visible
+          - attrs = { "data-id" => element.id, "data-type" => element.type.demodulize.downcase,
+            "data-x" => element.x.to_f, "data-y" => element.y.to_f, "data-width" => element.width.to_f,
+            "data-height" => element.height.to_f, "data-fill" => element.fill_color || "#48c78e",
+            "data-stroke" => element.stroke_color || "#257953", "data-stroke-width" => element.stroke_width.to_f,
+            "data-opacity" => element.opacity.to_f, "data-locked" => element.locked }
+          - if element.is_a?(Line)
+            - points = (element.points || []).map { |point| point.is_a?(Array) ? point.join(",") : point }.join(" ")
+            %polyline{ **attrs, points: points, fill: "none", stroke: element.stroke_color || "#257953", "stroke-width" => element.stroke_width || 2 }
+          - elsif element.is_a?(Ellipse)
+            %ellipse{ **attrs, cx: element.x.to_f + element.width.to_f / 2, cy: element.y.to_f + element.height.to_f / 2,
+              rx: element.width.to_f / 2, ry: element.height.to_f / 2, fill: element.fill_color || "#48c78e",
+              stroke: element.stroke_color || "#257953", "stroke-width" => element.stroke_width || 2, opacity: element.opacity }
+          - else
+            %rect{ **attrs, x: element.x, y: element.y, width: element.width, height: element.height,
+              fill: element.fill_color || "#48c78e", stroke: element.stroke_color || "#257953",
+              "stroke-width" => element.stroke_width || 2, opacity: element.opacity }
+:javascript
+  (() => {
+    const svg = document.getElementById("canvas-editor");
+    if (!svg) return;
+    const token = svg.dataset.csrf;
+    let tool = "select", selected = null, drag = null;
+    const inspector = document.getElementById("inspector");
+    const empty = document.getElementById("selection-empty");
+    const fields = { x: document.getElementById("element-x"), y: document.getElementById("element-y"),
+      width: document.getElementById("element-width"), height: document.getElementById("element-height"),
+      fill_color: document.getElementById("element-fill") };
+    const urlFor = id => svg.dataset.updateUrl.replace("ELEMENT_ID", id);
+    const localPoint = event => {
+      const p = svg.createSVGPoint(); p.x = event.clientX; p.y = event.clientY;
+      return p.matrixTransform(svg.getScreenCTM().inverse());
+    };
+    const payload = el => ({ x: Number(el.dataset.x), y: Number(el.dataset.y), width: Number(el.dataset.width),
+      height: Number(el.dataset.height), fill_color: el.dataset.fill });
+    const render = el => {
+      const x = Number(el.dataset.x), y = Number(el.dataset.y), w = Number(el.dataset.width), h = Number(el.dataset.height);
+      const shape = el.dataset.type === "ellipse" ? document.createElementNS("http://www.w3.org/2000/svg", "ellipse") :
+        el.dataset.type === "line" ? document.createElementNS("http://www.w3.org/2000/svg", "line") :
+        document.createElementNS("http://www.w3.org/2000/svg", "rect");
+      shape.dataset.id = el.dataset.id; shape.dataset.type = el.dataset.type;
+      Object.assign(shape.dataset, { x, y, width: w, height: h, fill: el.dataset.fill, stroke: el.dataset.stroke || "#257953", locked: el.dataset.locked || "false" });
+      shape.setAttribute("fill", el.dataset.type === "line" ? "none" : el.dataset.fill);
+      shape.setAttribute("stroke", el.dataset.stroke || "#257953"); shape.setAttribute("stroke-width", el.dataset.strokeWidth || 2);
+      if (el.dataset.type === "ellipse") { shape.setAttribute("cx", x + w / 2); shape.setAttribute("cy", y + h / 2); shape.setAttribute("rx", w / 2); shape.setAttribute("ry", h / 2); }
+      else if (el.dataset.type === "line") { shape.setAttribute("x1", x); shape.setAttribute("y1", y); shape.setAttribute("x2", x + w); shape.setAttribute("y2", y + h); }
+      else { shape.setAttribute("x", x); shape.setAttribute("y", y); shape.setAttribute("width", w); shape.setAttribute("height", h); }
+      shape.setAttribute("opacity", el.dataset.opacity || 1); shape.classList.add("canvas-shape");
+      return shape;
+    };
+    const select = el => {
+      selected = el;
+      svg.querySelectorAll(".canvas-shape").forEach(shape => shape.classList.toggle("is-selected", shape === el));
+      inspector.classList.toggle("is-hidden", !el); empty.classList.toggle("is-hidden", !!el);
+      if (el) Object.entries(fields).forEach(([key, input]) => input.value = key === "fill_color" ? el.dataset.fill : el.dataset[key]);
+    };
+    const save = async (el, attrs) => {
+      Object.entries(attrs).forEach(([key, value]) => { el.dataset[key === "fill_color" ? "fill" : key] = value; });
+      const response = await fetch(urlFor(el.dataset.id), { method: "PATCH", headers: { "Content-Type": "application/json", "X-CSRF-Token": token, Accept: "application/json" }, body: JSON.stringify({ element: attrs }) });
+      if (!response.ok) return;
+      const replacement = render(el); el.replaceWith(replacement); if (selected === el) select(replacement);
+    };
+    svg.querySelectorAll("[data-id]").forEach(el => { const shape = render(el); el.replaceWith(shape); });
+    svg.addEventListener("pointerdown", event => {
+      const el = event.target.closest(".canvas-shape");
+      if (tool !== "select") return;
+      if (el) { select(el); if (el.dataset.locked !== "true") { const p = localPoint(event); drag = { el, x: p.x, y: p.y, startX: Number(el.dataset.x), startY: Number(el.dataset.y) }; svg.setPointerCapture(event.pointerId); } }
+      else select(null);
+    });
+    svg.addEventListener("pointermove", event => { if (!drag) return; const p = localPoint(event); drag.el.dataset.x = drag.startX + p.x - drag.x; drag.el.dataset.y = drag.startY + p.y - drag.y; const updated = render(drag.el); drag.el.replaceWith(updated); drag.el = updated; select(updated); });
+    svg.addEventListener("pointerup", () => { if (drag) { save(drag.el, { x: Number(drag.el.dataset.x), y: Number(drag.el.dataset.y) }); drag = null; } });
+    document.querySelectorAll("[data-draw]").forEach(button => button.addEventListener("click", () => { tool = button.dataset.draw; document.querySelectorAll("[data-draw]").forEach(b => b.classList.toggle("is-primary", b === button)); }));
+    svg.addEventListener("click", async event => {
+      if (tool === "select" || event.target.closest(".canvas-shape")) return;
+      const p = localPoint(event), kind = tool;
+      const attrs = { type: `ShareSpace::${kind[0].toUpperCase()}${kind.slice(1)}`, x: p.x, y: p.y, width: kind === "line" ? 120 : 140, height: kind === "line" ? 80 : 90, fill_color: "#48c78e", stroke_color: "#257953", stroke_width: 2, opacity: 1, visible: true, locked: false, points: kind === "line" ? [`${p.x},${p.y}`, `${p.x + 120},${p.y + 80}`] : [] };
+      const response = await fetch(svg.dataset.createUrl, { method: "POST", headers: { "Content-Type": "application/json", "X-CSRF-Token": token, Accept: "application/json" }, body: JSON.stringify({ element: attrs }) });
+      if (!response.ok) return;
+      const data = await response.json(), el = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      Object.assign(el.dataset, { id: data.id, type: kind, x: data.x, y: data.y, width: data.width, height: data.height, fill: data.fill_color, stroke: data.stroke_color, strokeWidth: data.stroke_width, opacity: data.opacity });
+      const shape = render(el); svg.appendChild(shape); select(shape); tool = "select";
+    });
+    Object.entries(fields).forEach(([key, input]) => input.addEventListener("change", () => { if (selected) save(selected, { [key]: key === "fill_color" ? input.value : Number(input.value) }); }));
+    document.getElementById("delete-element").addEventListener("click", async () => { if (!selected) return; await fetch(urlFor(selected.dataset.id), { method: "DELETE", headers: { "X-CSRF-Token": token } }); selected.remove(); select(null); });
+  })();

data/config/routes.rb

@@ -0,0 +1,6 @@
+ShareSpace::Engine.routes.draw do
+  root "canvases#index"
+  resources :canvases do
+    resources :elements, controller: "canvas_elements", only: %i[create update destroy]
+  end
+end

data/db/migrate/20261027225958_create_share_space_canvas.rb

@@ -0,0 +1,12 @@
+class CreateShareSpaceCanvas < ActiveRecord::Migration[8.1]
+  def change
+    create_table :share_space_canvases do |t|
+      t.string :name, null: false, default: "Untitled canvas"
+      t.integer :width, null: false, default: 1200
+      t.integer :height, null: false, default: 800
+      t.string :background_color, null: false, default: "#ffffff"
+
+      t.timestamps
+    end
+  end
+end

data/db/migrate/20261027231337_create_canvas_element.rb

@@ -0,0 +1,34 @@
+class CreateCanvasElement < ActiveRecord::Migration[8.1]
+  def change
+    create_table :share_space_canvas_elements do |t|
+      t.references :canvas,
+                   null: false,
+                   foreign_key: { to_table: :share_space_canvases }
+
+      t.string :type
+      t.string :name
+
+      t.decimal :x, precision: 12, scale: 4, null: false, default: 0
+      t.decimal :y, precision: 12, scale: 4, null: false, default: 0
+      t.decimal :width, precision: 12, scale: 4
+      t.decimal :height, precision: 12, scale: 4
+      t.decimal :rotation, precision: 8, scale: 4, default: 0
+
+      t.boolean :visible, null: false, default: true
+      t.boolean :locked, null: false, default: false
+      t.integer :z_index, null: false, default: 0
+
+      t.string :fill_color
+      t.string :stroke_color
+      t.decimal :stroke_width, precision: 8, scale: 4
+      t.decimal :opacity, precision: 4, scale: 3,
+                          null: false, default: 1.0
+
+      t.json :points, null: false, default: []
+
+      t.timestamps
+    end
+
+    add_index :share_space_canvas_elements, [:canvas_id, :z_index]
+  end
+end

data/lib/share_space/engine.rb

@@ -0,0 +1,5 @@
+module ShareSpace
+  class Engine < ::Rails::Engine
+    isolate_namespace ShareSpace
+  end
+end

data/lib/share_space/version.rb

@@ -0,0 +1,3 @@
+module ShareSpace
+  VERSION = "0.1.0"
+end

data/lib/share_space.rb

@@ -0,0 +1,6 @@
+require "share_space/version"
+require "share_space/engine"
+
+module ShareSpace
+  # Your code goes here...
+end

data/lib/tasks/share_space_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :share_space do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,103 @@
+--- !ruby/object:Gem::Specification
+name: share_space
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- paydaypay1
+bindir: bin
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 8.1.4
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 8.1.4
+- !ruby/object:Gem::Dependency
+  name: haml-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.0'
+description: Users can create shared spaces among other users. When working together,
+  updates propogate to other users and cursors are visible. Similar to Figma or Google
+  Suite collaboration.
+email:
+- paydaypay1@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/stylesheets/share_space/application.css
+- app/controllers/share_space/application_controller.rb
+- app/controllers/share_space/canvas_elements_controller.rb
+- app/controllers/share_space/canvases_controller.rb
+- app/helpers/share_space/application_helper.rb
+- app/jobs/share_space/application_job.rb
+- app/mailers/share_space/application_mailer.rb
+- app/models/share_space/application_record.rb
+- app/models/share_space/canvas.rb
+- app/models/share_space/canvas_element.rb
+- app/models/share_space/ellipse.rb
+- app/models/share_space/line.rb
+- app/models/share_space/rectangle.rb
+- app/views/layouts/share_space/application.html.haml
+- app/views/share_space/canvases/_form.html.haml
+- app/views/share_space/canvases/edit.html.haml
+- app/views/share_space/canvases/index.html.haml
+- app/views/share_space/canvases/new.html.haml
+- app/views/share_space/canvases/show.html.haml
+- config/routes.rb
+- db/migrate/20261027225958_create_share_space_canvas.rb
+- db/migrate/20261027231337_create_canvas_element.rb
+- lib/share_space.rb
+- lib/share_space/engine.rb
+- lib/share_space/version.rb
+- lib/tasks/share_space_tasks.rake
+homepage: https://github.com/paydaypay1/share_space
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org/
+  homepage_uri: https://github.com/paydaypay1/share_space
+  source_code_uri: https://github.com/paydaypay1/share_space
+  changelog_uri: https://github.com/paydaypay1/share_space/blob/main/CHANGELOG.md
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.2.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 4.0.6
+specification_version: 4
+summary: Provides a shared space for realtime collaboration.
+test_files: []