share_space 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 32915e8b4741eecd245a29eee960ab1484b707f79a3c445915094f61194b4c4e
-  data.tar.gz: 867829aafa5531cd2bbedf52f6899076ba8edd870633673357ac3cdcde76c989
+  metadata.gz: 7536fadda6c04dc84d07ab563818139749efd431303aa20d6e0a0b5edf14c64b
+  data.tar.gz: 9b7f8fb94ca761b2ae2fb683590e58b81826f5175410fa7df44f15eefdfc4300
 SHA512:
-  metadata.gz: a066416f1c20fe267023465dce138447f283257007fd56da4ebf639016d15a6f2002d0e5917e690a9cb81c5b207886049d17dd249541e80935d37c4c293b6c3b
-  data.tar.gz: b4b1b0262dc2fd138e7fe32726ad6f7c7f042644791fbcf360ecc344cf4762ae0c3f1700c3e64af220c3847fe8e7b5a4110e1ab47b76a6f19048df339bc7d03f
+  metadata.gz: 53aabcb2e9825715e2462149a81ad44f1384255db6fd0082b05ca21d8653a933551d4f48f835496cc4fae9ec044a5e99acd008b85d4c6f1f454931b051326f71
+  data.tar.gz: abb5a654c152979dadf69f41fd68dbb77e13a3ed6423c1d42ef58a05d9de3f7a55d44bf126229b709ff7bd4527b847eca8b44090e61b0c7741a8f408a9442e20

data/README.md

@@ -1,8 +1,12 @@
 # ShareSpace
-Short description and motivation.
+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.
+
+The canvas editor supports 2D shapes (including polygons and straight, Bezier, and free-form lines), simple 3D primitives, rectangular clipping masks, symmetry and transform effects, and SVG, PNG, JPEG, WebP, and print-to-PDF export. Canvas changes and cursor positions are shared live over Action Cable.
+
+The host Rails application must mount Action Cable at `/cable` and configure a shared Action Cable adapter (Redis in multi-process deployments) for collaboration across web workers. The channel checks `current_user` and canvas ownership/shares when the host connection exposes a signed-in user; standalone engine hosts should add an equivalent authorization check.
 
 ## Usage
-How to use my plugin.
+TODO How to use my plugin.
 
 ## Installation
 Add this line to your application's Gemfile:
@@ -22,7 +26,7 @@ $ gem install share_space
 ```
 
 ## Contributing
-Contribution directions go here.
+TODO 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/app/assets/stylesheets/share_space/application.css

@@ -17,16 +17,40 @@
 .editor-layout { align-items: flex-start; }
 .toolbox { width: 230px; }
 .toolbox .buttons { gap: .5rem; }
+.tool-pane { width: 200px; }
+.inspector-pane { width: 300px; }
+.tree-item { display: flex; width: 100%; justify-content: space-between; padding: .45rem .6rem; border: 0; border-radius: 4px; background: transparent; text-align: left; cursor: pointer; }
+.tree-item:hover, .tree-item.is-active { background: #eff1fa; color: #485fc7; }
 .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-editor[data-tool="select"] { cursor: default; }
+#canvas-editor[data-tool="select"] .canvas-shape { cursor: grab; }
+#canvas-editor[data-tool="select"] .canvas-shape[data-locked="true"] { cursor: not-allowed; }
+#canvas-editor[data-tool="rectangle"], #canvas-editor[data-tool="ellipse"], #canvas-editor[data-tool="line"], #canvas-editor[data-tool="polygon"], #canvas-editor[data-tool="bezier_line"], #canvas-editor[data-tool="freeform_line"], #canvas-editor[data-tool="cube"], #canvas-editor[data-tool="sphere"], #canvas-editor[data-tool="cylinder"], #canvas-editor[data-tool="mask"] { cursor: crosshair; }
+#canvas-editor[data-tool="rectangle"] .canvas-shape, #canvas-editor[data-tool="ellipse"] .canvas-shape, #canvas-editor[data-tool="line"] .canvas-shape, #canvas-editor[data-tool="polygon"] .canvas-shape, #canvas-editor[data-tool="bezier_line"] .canvas-shape, #canvas-editor[data-tool="freeform_line"] .canvas-shape { cursor: crosshair; }
+.tool-group { margin: .6rem 0; }
+.tool-group summary { padding: .35rem 0; font-size: .85rem; font-weight: 700; cursor: pointer; }
+.tool-group .buttons { margin-top: .4rem; }
+#canvas-editor[data-cursor="point"], #canvas-editor[data-cursor="point"] .canvas-shape { cursor: move !important; }
+#canvas-editor[data-cursor="locked"], #canvas-editor[data-cursor="locked"] .canvas-shape { cursor: not-allowed !important; }
+#canvas-editor[data-cursor="element"], #canvas-editor[data-cursor="element"] .canvas-shape { cursor: grab !important; }
+#canvas-editor[data-cursor="dragging"], #canvas-editor[data-cursor="dragging"] .canvas-shape { cursor: grabbing !important; }
+.point-handle { fill: #fff; stroke: #485fc7; stroke-width: 2; cursor: move; pointer-events: all; }
+.point-handle:hover { fill: #dfe3ff; }
 .canvas-shape.is-selected { filter: drop-shadow(0 0 4px #485fc7); }
+.canvas-shape.is-preview { opacity: .48 !important; pointer-events: none; }
+.remote-cursor { pointer-events: none; overflow: visible; }
+.remote-cursor .cursor-arrow { fill: #ff3860; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
+.remote-cursor text { font: 12px sans-serif; fill: #fff; paint-order: stroke; stroke: #d7264d; stroke-width: 4px; stroke-linejoin: round; }
+.context-menu { position: fixed; z-index: 50; min-width: 150px; padding: .35rem; background: #fff; border: 1px solid #dbdbdb; border-radius: 6px; box-shadow: 0 4px 16px rgb(10 10 10 / 18%); }
+.context-menu button { display: block; width: 100%; padding: .45rem .6rem; border: 0; border-radius: 4px; background: transparent; text-align: left; cursor: pointer; }
+.context-menu button:hover:not(:disabled) { background: #eff1fa; }
+.context-menu button:disabled { color: #b5b5b5; cursor: not-allowed; }
 .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; }
+  .tool-pane, .inspector-pane { width: 100%; }
+  .tool-pane .buttons { flex-direction: row !important; }
   .canvas-scroll { max-height: 65vh; }
 }

data/app/channels/share_space/canvas_channel.rb

@@ -0,0 +1,39 @@
+module ShareSpace
+  class CanvasChannel < ActionCable::Channel::Base
+    def subscribed
+      @canvas = Canvas.find_by(id: params[:canvas_id])
+      reject unless @canvas && authorized_canvas?
+
+      stream_from "share_space_canvas_#{@canvas.id}"
+    end
+
+    def authorized_canvas?
+      return true unless connection.respond_to?(:current_user)
+
+      user = connection.current_user
+      return false unless user
+      return true unless @canvas.respond_to?(:user_id)
+
+      owns_canvas = @canvas.user_id == user.id
+      shared_canvas = user.respond_to?(:shared_canvases) && user.shared_canvases.exists?(id: @canvas.id)
+      owns_canvas || shared_canvas
+    end
+
+    def receive(data)
+      return unless data["type"] == "cursor"
+
+      x = data["x"].to_f.clamp(0, @canvas.width.to_f)
+      y = data["y"].to_f.clamp(0, @canvas.height.to_f)
+      ActionCable.server.broadcast("share_space_canvas_#{@canvas.id}", {
+        type: "cursor", client_id: data["client_id"].to_s.first(64), x: x, y: y,
+        active: data["active"] != false
+      })
+    end
+
+    def unsubscribed
+      ActionCable.server.broadcast("share_space_canvas_#{@canvas.id}", {
+        type: "cursor", client_id: params[:client_id].to_s.first(64), active: false
+      }) if @canvas
+    end
+  end
+end

data/app/controllers/share_space/canvas_elements_controller.rb

@@ -11,7 +11,9 @@ module ShareSpace
 
       @element = @canvas.elements.new(element_params.except(:type).to_h.merge(type: type))
       if @element.save
-        render json: element_json(@element), status: :created
+        payload = element_json(@element)
+        broadcast_change("create", payload)
+        render json: payload, status: :created
       else
         render json: { errors: @element.errors.full_messages }, status: :unprocessable_entity
       end
@@ -19,14 +21,18 @@ module ShareSpace
 
     def update
       if @element.update(element_params.except(:type))
-        render json: element_json(@element)
+        payload = element_json(@element)
+        broadcast_change("update", payload)
+        render json: payload
       else
         render json: { errors: @element.errors.full_messages }, status: :unprocessable_entity
       end
     end
 
     def destroy
+      payload = element_json(@element)
       @element.destroy
+      broadcast_change("delete", payload)
       head :no_content
     end
 
@@ -43,7 +49,7 @@ module ShareSpace
     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: [])
+                                     :visible, :locked, :z_index, points: [], options: {})
     end
 
     def element_json(element)
@@ -51,7 +57,11 @@ module ShareSpace
         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 }
+        visible: element.visible, locked: element.locked, points: element.points, options: element.options || {} }
+    end
+
+    def broadcast_change(action, element)
+      ActionCable.server.broadcast("share_space_canvas_#{@canvas.id}", { type: "element", action: action, element: element })
     end
   end
 end

data/app/models/share_space/bezier_line.rb

@@ -0,0 +1,5 @@
+module ShareSpace
+  class BezierLine < CanvasElement
+    validates :points, length: { is: 4 }
+  end
+end

data/app/models/share_space/canvas_element.rb

@@ -5,7 +5,7 @@ module ShareSpace
     scope :visible, -> { where(visible: true) }
     scope :ordered, -> { order(:z_index, :id) }
 
-    ELEMENT_TYPES = %w[Rectangle Ellipse Line].freeze
+    ELEMENT_TYPES = %w[Rectangle Ellipse Polygon Line BezierLine FreeformLine Cube Sphere Cylinder Mask].freeze
 
     validates :type, inclusion: { in: ELEMENT_TYPES.map { |name| "ShareSpace::#{name}" } }
 

data/app/models/share_space/cube.rb

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

data/app/models/share_space/cylinder.rb

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

data/app/models/share_space/freeform_line.rb

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

data/app/models/share_space/mask.rb

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

data/app/models/share_space/polygon.rb

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

data/app/models/share_space/sphere.rb

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

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

@@ -7,125 +7,407 @@
       %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"
+    .select.is-small
+      %select#export-format{ aria: { label: "Export format" } }
+        %option{ value: "svg" } SVG
+        %option{ value: "png" } PNG
+        %option{ value: "jpeg" } JPEG
+        %option{ value: "webp" } WebP
+        %option{ value: "pdf" } PDF
+    %button#export-canvas.button.is-link.is-light{ type: "button" } Export
+    %span#cursor-position.tag.is-light X 0 · Y 0
 .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.is-narrow.tool-pane
+    .box
+      %h2.title.is-6 Tool
+      .buttons.are-small.is-flex-direction-column.is-align-items-stretch
+        %button.button.is-primary{ type: "button", data: { draw: "select" } } Select / move
+      %details.tool-group{ open: true }
+        %summary 2D shapes
+        .buttons.are-small.is-flex-direction-column.is-align-items-stretch
+          %button.button{ type: "button", data: { draw: "rectangle" } } Rectangle
+          %button.button{ type: "button", data: { draw: "ellipse" } } Ellipse
+          %button.button{ type: "button", data: { draw: "polygon" } } Polygon
+          .field
+            %label.label.is-size-7{ for: "polygon-sides" } Polygon sides
+            .control= number_field_tag :polygon_sides, 5, min: 3, max: 64, class: "input is-small", id: "polygon-sides"
+          %button.button{ type: "button", data: { draw: "line" } } Straight line
+          %button.button{ type: "button", data: { draw: "bezier_line" } } Bezier curve
+          %button.button{ type: "button", data: { draw: "freeform_line" } } Free form line
+      %details.tool-group
+        %summary 3D shapes
+        .buttons.are-small.is-flex-direction-column.is-align-items-stretch
+          %button.button{ type: "button", data: { draw: "cube" } } Cube
+          %button.button{ type: "button", data: { draw: "sphere" } } Sphere
+          %button.button{ type: "button", data: { draw: "cylinder" } } Cylinder
+      .box.is-shadowless.p-2
+        %h3.title.is-7 Masks
+        %button#mask-tool.button.is-small.is-fullwidth{ type: "button", data: { draw: "mask" } } Draw rectangular mask
+      .box.is-shadowless.p-2
+        %h3.title.is-7 FX
+        .field
+          %label.label.is-size-7{ for: "fx-symmetry" } Reflection
+          .control
+            .select.is-small.is-fullwidth
+              %select#fx-symmetry
+                %option{ value: "none" } None
+                %option{ value: "linear" } Linear
+                %option{ value: "radial" } Radial
+        .field
+          %label.label.is-size-7{ for: "fx-count" } Lines / copies
+          .control= number_field_tag :fx_count, 2, min: 2, max: 24, class: "input is-small", id: "fx-count"
+        .field
+          %label.label.is-size-7{ for: "fx-rotate" } Rotate (degrees)
+          .control= number_field_tag :fx_rotate, 0, class: "input is-small", id: "fx-rotate", step: 1
+        .field
+          %label.label.is-size-7{ for: "fx-skew" } Skew (degrees)
+          .control= number_field_tag :fx_skew, 0, class: "input is-small", id: "fx-skew", step: 1
+        .field
+          %label.checkbox.is-size-7
+            = check_box_tag :fx_shadow, "1", false, id: "fx-shadow"
+            Drop shadow
+        %button#apply-fx.button.is-small.is-link.is-light.is-fullwidth{ type: "button" } Apply FX to selection
+      .buttons.are-small.mt-3
+        %button#undo.button{ type: "button", disabled: true } Undo
+        %button#redo.button{ type: "button", disabled: true } Redo
+      %p.help Drag shapes to move them. Drag a line's points to reshape it.
   .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 } }
+          csrf: form_authenticity_token, tool: "select", canvas_id: @canvas.id } }
         - @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)
+            "data-opacity" => element.opacity.to_f, "data-locked" => element.locked,
+            "data-points" => element.points.to_json, "data-name" => element.name,
+            "data-options" => (element.options || {}).to_json }
+          - if %w[Line BezierLine FreeformLine Polygon].include?(element.type.demodulize)
             - 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 }
+            %polyline{ **attrs, points: points, fill: (element.type.demodulize == "Polygon" ? (element.fill_color || "#48c78e") : "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 }
+          - elsif %w[Cube Sphere Cylinder].include?(element.type.demodulize)
+            %rect{ **attrs, x: element.x, y: element.y, width: element.width, height: element.height, rx: (element.type.demodulize == "Sphere" ? "50%" : 0), fill: element.fill_color || "#48c78e", stroke: element.stroke_color || "#257953", "stroke-width" => element.stroke_width || 2, opacity: element.opacity, "data-options" => (element.options || {}).to_json }
           - 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 }
+  .column.is-narrow.inspector-pane
+    .box
+      %h2.title.is-6 Element tree
+      #element-tree
+        - @elements.each do |element|
+          %button.tree-item{ type: "button", data: { select_element: element.id } }
+            %span= element.name.presence || element.type.demodulize
+            %span.has-text-grey.is-size-7= "##{element.id}"
+        - if @elements.empty?
+          %p#tree-empty.has-text-grey.is-size-7 No elements yet.
+    .box
+      %h2.title.is-6 Properties
+      %p#selection-empty.has-text-grey.is-size-7 Select an element to edit its properties.
+      #inspector.is-hidden
+        - { x: "X", y: "Y", width: "Width", height: "Height" }.each do |key, label|
+          .field
+            %label.label{ for: "element-#{key}" }= label
+            .control= number_field_tag "element_#{key}", nil, class: "input is-small", id: "element-#{key}", step: "any", min: (key == "x" || key == "y" ? nil : 1)
+        .field
+          %label.label{ for: "element-fill" } Fill
+          .control= color_field_tag :element_fill_color, "#48c78e", class: "input is-small canvas-color", id: "element-fill"
+        %p.help The selected object can be mirrored or styled with FX from the tool pane.
+        %p#point-help.help.is-hidden Drag the white handles on the canvas to move individual points.
+        .buttons
+          %button#delete-element.button.is-danger.is-light.is-small{ type: "button" } Delete
+          %button#lock-element.button.is-light.is-small{ type: "button" } Lock
+#editor-context-menu.context-menu.is-hidden{ role: "menu" }
 :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 token = svg.dataset.csrf, menu = document.getElementById("editor-context-menu");
+    const inspector = document.getElementById("inspector"), empty = document.getElementById("selection-empty");
+    const pointHelp = document.getElementById("point-help");
+    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") };
+    let tool = "select", selectedIds = new Set(), drag = null, clipboard = null, history = [], historyIndex = -1;
+    const idRemap = new Map();
+    const shapes = () => [...svg.querySelectorAll(".canvas-shape")];
+    const modelType = type => ({ rectangle: "Rectangle", ellipse: "Ellipse", polygon: "Polygon", line: "Line", bezier_line: "BezierLine", bezierline: "BezierLine", freeform_line: "FreeformLine", freeformline: "FreeformLine", cube: "Cube", sphere: "Sphere", cylinder: "Cylinder", mask: "Mask" }[type] || "Rectangle");
+    const resolveId = id => idRemap.get(String(id)) || String(id);
+    const byId = id => shapes().find(shape => shape.dataset.id === resolveId(id));
+    const updateUrl = id => svg.dataset.updateUrl.replace("ELEMENT_ID", id);
+    const parsePoints = shape => {
+      try {
+        const saved = JSON.parse(shape.dataset.points || "[]");
+        return saved.map(item => Array.isArray(item) ? { x: Number(item[0]), y: Number(item[1]) } : { x: Number(String(item).split(",")[0]), y: Number(String(item).split(",")[1]) }).filter(p => Number.isFinite(p.x) && Number.isFinite(p.y));
+      } catch (_) { return []; }
+    };
+    const pointStrings = shape => parsePoints(shape).map(p => `${p.x},${p.y}`);
+    const refreshMasks = () => {
+      svg.querySelector("#canvas-masks")?.remove();
+      const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); defs.id = "canvas-masks";
+      const all = shapes(); all.forEach(shape => shape.removeAttribute("clip-path"));
+      all.forEach((mask, maskIndex) => {
+        if (mask.dataset.type !== "mask") return;
+        const clip = document.createElementNS("http://www.w3.org/2000/svg", "clipPath"); clip.id = `clip-${mask.dataset.id}`; clip.setAttribute("clipPathUnits", "userSpaceOnUse");
+        const region = document.createElementNS("http://www.w3.org/2000/svg", "rect"); region.setAttribute("x", mask.dataset.x); region.setAttribute("y", mask.dataset.y); region.setAttribute("width", mask.dataset.width); region.setAttribute("height", mask.dataset.height); clip.appendChild(region); defs.appendChild(clip);
+        all.slice(0, maskIndex).filter(shape => shape.dataset.type !== "mask").forEach(shape => shape.setAttribute("clip-path", `url(#${clip.id})`));
+      });
+      svg.prepend(defs);
     };
-    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");
+    const render = source => {
+      const x = Number(source.dataset.x), y = Number(source.dataset.y), w = Number(source.dataset.width), h = Number(source.dataset.height), type = source.dataset.type;
+      const tag = type === "ellipse" || type === "sphere" ? "ellipse" : type === "polygon" || type === "cube" ? "polygon" : type === "line" || type === "freeformline" ? "polyline" : type === "bezierline" ? "path" : "rect";
+      const shape = document.createElementNS("http://www.w3.org/2000/svg", tag);
+      Object.assign(shape.dataset, { id: source.dataset.id, type, x, y, width: w, height: h, fill: source.dataset.fill || "#48c78e", stroke: source.dataset.stroke || "#257953", strokeWidth: source.dataset.strokeWidth || 2, opacity: source.dataset.opacity || 1, locked: source.dataset.locked || "false", points: source.dataset.points || "[]", name: source.dataset.name || "", options: source.dataset.options || "{}" });
+      if (type === "ellipse" || type === "sphere") { shape.setAttribute("cx", x + w / 2); shape.setAttribute("cy", y + h / 2); shape.setAttribute("rx", w / 2); shape.setAttribute("ry", h / 2); }
+      else if (["line", "freeformline", "polygon"].includes(type)) shape.setAttribute("points", pointStrings(shape).join(" "));
+      else if (type === "cube") shape.setAttribute("points", `${x+w*.2},${y} ${x+w},${y} ${x+w},${y+h*.75} ${x+w*.8},${y+h} ${x},${y+h} ${x},${y+h*.25}`);
+      else if (type === "bezierline") { const p = parsePoints(shape); if (p.length >= 4) shape.setAttribute("d", `M ${p[0].x} ${p[0].y} C ${p[1].x} ${p[1].y}, ${p[2].x} ${p[2].y}, ${p[3].x} ${p[3].y}`); }
+      else { shape.setAttribute("x", x); shape.setAttribute("y", y); shape.setAttribute("width", w); shape.setAttribute("height", h); if (type === "cylinder") shape.setAttribute("rx", Math.min(w,h)*.14); }
+      const options = JSON.parse(shape.dataset.options || "{}");
+      shape.setAttribute("fill", ["line", "bezierline", "freeformline"].includes(type) ? "none" : shape.dataset.fill); shape.setAttribute("stroke", shape.dataset.stroke);
+      shape.setAttribute("stroke-width", shape.dataset.strokeWidth); shape.setAttribute("opacity", shape.dataset.opacity); shape.classList.add("canvas-shape");
+      shape.dataset.locked = source.dataset.locked || "false";
+      if (type === "mask") { shape.setAttribute("fill", "#7aa7ff"); shape.setAttribute("fill-opacity", ".22"); shape.setAttribute("stroke-dasharray", "7 4"); }
+      if (options.rotate || options.skew) shape.setAttribute("transform", `rotate(${Number(options.rotate || 0)} ${x + w / 2} ${y + h / 2}) skewX(${Number(options.skew || 0)})`);
+      if (options.shadow) shape.style.filter = "drop-shadow(4px 5px 4px #3338)";
       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 serialized = shape => ({ id: shape.dataset.id, type: shape.dataset.type, x: Number(shape.dataset.x), y: Number(shape.dataset.y), width: Number(shape.dataset.width), height: Number(shape.dataset.height), fill_color: shape.dataset.fill, stroke_color: shape.dataset.stroke, stroke_width: Number(shape.dataset.strokeWidth), opacity: Number(shape.dataset.opacity), locked: shape.dataset.locked === "true", points: pointStrings(shape), options: JSON.parse(shape.dataset.options || "{}") });
+    const refreshMirrors = () => {
+      svg.querySelector("#fx-mirrors")?.remove(); refreshMasks();
+      const group = document.createElementNS("http://www.w3.org/2000/svg", "g"); group.id = "fx-mirrors"; group.setAttribute("pointer-events", "none");
+      shapes().forEach(shape => {
+        const options = JSON.parse(shape.dataset.options || "{}"); if (!options.symmetry || options.symmetry === "none") return;
+        const count = Math.max(2, Math.min(24, Number(options.count) || 2)), cx = Number(shape.dataset.x) + Number(shape.dataset.width) / 2, cy = Number(shape.dataset.y) + Number(shape.dataset.height) / 2;
+        for (let i = 1; i < count; i++) { const clone = shape.cloneNode(true); clone.classList.remove("canvas-shape", "is-selected"); clone.removeAttribute("data-id");
+          clone.setAttribute("transform", options.symmetry === "radial" ? `rotate(${360*i/count} ${cx} ${cy})` : `rotate(${180*i/count} ${cx} ${cy}) translate(${2*cx} 0) scale(-1 1)`); group.appendChild(clone); }
+      });
+      svg.appendChild(group);
+    };
+    const snapshot = () => JSON.stringify(shapes().map(serialized));
+    const updateHistoryButtons = () => { document.getElementById("undo").disabled = historyIndex <= 0; document.getElementById("redo").disabled = historyIndex >= history.length - 1; };
+    const recordHistory = () => { const state = snapshot(); if (history[historyIndex] === state) return; history = history.slice(0, historyIndex + 1); history.push(state); if (history.length > 50) history.shift(); historyIndex = history.length - 1; updateHistoryButtons(); };
+    const drawPointHandles = () => {
+      svg.querySelector(".point-handles")?.remove();
+      const shape = selectedIds.size === 1 ? byId([...selectedIds][0]) : null;
+      const supportsPoints = ["line", "freeformline", "bezierline", "polygon"].includes(shape?.dataset.type);
+      pointHelp.classList.toggle("is-hidden", !supportsPoints);
+      if (!shape || !supportsPoints) return;
+      const group = document.createElementNS("http://www.w3.org/2000/svg", "g"); group.classList.add("point-handles");
+      parsePoints(shape).forEach((p, index) => { const handle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); handle.setAttribute("cx", p.x); handle.setAttribute("cy", p.y); handle.setAttribute("r", "7"); handle.dataset.pointIndex = index; handle.classList.add("point-handle"); group.appendChild(handle); });
+      svg.appendChild(group);
+    };
+    const tree = document.getElementById("element-tree");
+    const refreshTree = () => {
+      const currentIds = new Set(shapes().map(shape => shape.dataset.id));
+      tree.querySelectorAll("[data-select-element]").forEach(button => { if (!currentIds.has(resolveId(button.dataset.selectElement))) button.remove(); });
+      shapes().forEach(shape => {
+        if (tree.querySelector(`[data-select-element="${shape.dataset.id}"]`)) return;
+        const button = document.createElement("button"); button.type = "button"; button.dataset.selectElement = shape.dataset.id; button.className = "tree-item";
+        const label = document.createElement("span"); label.textContent = shape.dataset.name || `${shape.dataset.type[0].toUpperCase()}${shape.dataset.type.slice(1)}`;
+        const id = document.createElement("span"); id.className = "has-text-grey is-size-7"; id.textContent = `#${shape.dataset.id}`;
+        button.append(label, id); tree.appendChild(button);
+      });
+      tree.querySelectorAll("[data-select-element]").forEach(button => button.classList.toggle("is-active", selectedIds.has(resolveId(button.dataset.selectElement))));
+      const treeEmpty = document.getElementById("tree-empty"); if (treeEmpty) treeEmpty.classList.toggle("is-hidden", currentIds.size > 0);
+    };
+    const select = ids => {
+      selectedIds = new Set([...ids].map(resolveId));
+      shapes().forEach(shape => shape.classList.toggle("is-selected", selectedIds.has(shape.dataset.id)));
+      const shape = selectedIds.size === 1 ? byId([...selectedIds][0]) : null;
+      inspector.classList.toggle("is-hidden", !shape); empty.classList.toggle("is-hidden", !!shape);
+      if (shape) Object.entries(fields).forEach(([key, field]) => { field.value = key === "fill_color" ? shape.dataset.fill : shape.dataset[key]; });
+      if (shape) document.getElementById("lock-element").textContent = shape.dataset.locked === "true" ? "Unlock" : "Lock";
+      refreshTree(); drawPointHandles();
     };
-    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);
+    const api = async (url, method, data) => fetch(url, { method, headers: { "Content-Type": "application/json", "X-CSRF-Token": token, Accept: "application/json" }, ...(data ? { body: JSON.stringify({ element: data }) } : {}) });
+    const save = async (shape, attrs, record = true) => {
+      Object.entries(attrs).forEach(([key, value]) => { shape.dataset[key === "fill_color" ? "fill" : key === "stroke_color" ? "stroke" : key === "stroke_width" ? "strokeWidth" : key] = Array.isArray(value) ? JSON.stringify(value) : value; });
+      const response = await api(updateUrl(shape.dataset.id), "PATCH", attrs); if (!response.ok) return;
+      const fresh = render(shape); shape.replaceWith(fresh); refreshMirrors(); select(selectedIds); if (record) recordHistory();
     };
-    svg.querySelectorAll("[data-id]").forEach(el => { const shape = render(el); el.replaceWith(shape); });
+    const createElement = async (data, historyChange = true) => {
+      const response = await api(svg.dataset.createUrl, "POST", data); if (!response.ok) return null;
+      const saved = await response.json(), source = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      Object.assign(source.dataset, { id: saved.id, type: saved.type.split("::").pop().toLowerCase(), x: saved.x, y: saved.y, width: saved.width, height: saved.height, fill: saved.fill_color, stroke: saved.stroke_color, strokeWidth: saved.stroke_width, opacity: saved.opacity, locked: saved.locked, points: JSON.stringify(saved.points || data.points || []), name: saved.name || data.name || "", options: JSON.stringify(saved.options || data.options || {}) });
+      const shape = render(source); svg.querySelector("#fx-mirrors")?.remove(); svg.appendChild(shape); refreshMirrors(); select([shape.dataset.id]); if (historyChange) recordHistory(); return shape;
+    };
+    const deleteShape = async shape => { await api(updateUrl(shape.dataset.id), "DELETE"); shape.remove(); selectedIds.delete(shape.dataset.id); refreshMirrors(); };
+    const restoreSnapshot = async state => {
+      const target = JSON.parse(state), targetIds = new Set(target.map(item => resolveId(item.id)));
+      for (const shape of shapes()) if (!targetIds.has(shape.dataset.id)) await deleteShape(shape);
+      for (const item of target) {
+        let shape = byId(item.id);
+        const attrs = { x: item.x, y: item.y, width: item.width, height: item.height, fill_color: item.fill_color, stroke_color: item.stroke_color, stroke_width: item.stroke_width, opacity: item.opacity, locked: item.locked, points: item.points, options: item.options };
+        if (!shape) {
+          const created = await createElement({ ...attrs, type: `ShareSpace::${item.type[0].toUpperCase()}${item.type.slice(1)}`, visible: true }, false);
+          if (created && String(item.id) !== created.dataset.id) idRemap.set(String(item.id), created.dataset.id);
+        } else await save(shape, attrs, false);
+      }
+      select([]); drawPointHandles();
+    };
+    const undo = async () => { if (historyIndex <= 0) return; historyIndex -= 1; await restoreSnapshot(history[historyIndex]); updateHistoryButtons(); };
+    const redo = async () => { if (historyIndex >= history.length - 1) return; historyIndex += 1; await restoreSnapshot(history[historyIndex]); updateHistoryButtons(); };
+    const showMenu = (event, element) => {
+      event.preventDefault();
+      if (element) select([element.dataset.id]);
+      const actions = element ? [["copy", "Copy"], ["paste", "Paste"], ["delete", "Delete"], ["lock", element.dataset.locked === "true" ? "Unlock" : "Lock"]] : [["select-all", "Select all"], ["undo", "Undo"], ["redo", "Redo"], ["paste", "Paste"]];
+      menu.replaceChildren(...actions.map(([action, label]) => { const button = document.createElement("button"); button.type = "button"; button.dataset.action = action; button.textContent = label; button.disabled = (action === "undo" && historyIndex <= 0) || (action === "redo" && historyIndex >= history.length - 1) || (action === "paste" && !clipboard); return button; }));
+      menu.style.left = `${event.clientX}px`; menu.style.top = `${event.clientY}px`; menu.classList.remove("is-hidden");
+    };
+    const paste = async () => { if (!clipboard) return; const data = { ...clipboard, type: `ShareSpace::${modelType(clipboard.type)}`, x: Number(clipboard.x) + 20, y: Number(clipboard.y) + 20, points: clipboard.points.map(value => { const [x,y] = value.split(",").map(Number); return `${x+20},${y+20}`; }) }; delete data.id; delete data.locked; await createElement(data); };
+    shapes().forEach(shape => shape.replaceWith(render(shape))); refreshMirrors();
+    history = [snapshot()]; historyIndex = 0; updateHistoryButtons();
     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);
+      const handle = event.target.closest(".point-handle");
+      if (handle) { const shape = byId([...selectedIds][0]), points = parsePoints(shape), p = localPoint(event); drag = { kind: "point", shape, index: Number(handle.dataset.pointIndex), points }; svg.setPointerCapture(event.pointerId); event.preventDefault(); return; }
+      const el = event.target.closest(".canvas-shape"); if (tool !== "select") return;
+      if (!el) { select([]); return; }
+      select([el.dataset.id]); if (el.dataset.locked === "true") return;
+      const p = localPoint(event); drag = { kind: "element", el, x: p.x, y: p.y, startX: Number(el.dataset.x), startY: Number(el.dataset.y), points: parsePoints(el) }; svg.setPointerCapture(event.pointerId);
+    });
+    svg.addEventListener("pointermove", event => {
+      if (!drag) return; const p = localPoint(event);
+      if (drag.kind === "draw") { const last = drag.points[drag.points.length - 1]; if (Math.hypot(p.x-last.x, p.y-last.y) > 3) drag.points.push(p); drag.preview.dataset.points = JSON.stringify(drag.points.map(point => `${point.x},${point.y}`)); const fresh = render(drag.preview); drag.preview.replaceWith(fresh); drag.preview = fresh; }
+      else if (drag.kind === "draw-shape") { drag.end = p; updatePreview(drag); }
+      else if (drag.kind === "point") { drag.points[drag.index] = { x: p.x, y: p.y }; drag.shape.dataset.points = JSON.stringify(drag.points.map(point => `${point.x},${point.y}`)); const fresh = render(drag.shape); drag.shape.replaceWith(fresh); drag.shape = fresh; select([fresh.dataset.id]); }
+      else { const dx = p.x - drag.x, dy = p.y - drag.y; drag.el.dataset.x = drag.startX + dx; drag.el.dataset.y = drag.startY + dy; if (drag.el.dataset.type === "line") drag.el.dataset.points = JSON.stringify(drag.points.map(point => `${point.x+dx},${point.y+dy}`)); const fresh = render(drag.el); drag.el.replaceWith(fresh); drag.el = fresh; select([fresh.dataset.id]); }
     });
-    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)); }));
+    let suppressClick = false;
+    svg.addEventListener("pointerup", () => { if (!drag) return; let action;
+      if (drag.kind === "draw") { suppressClick = true; drag.preview.remove(); action = createElement({ type: "ShareSpace::FreeformLine", x: Math.min(...drag.points.map(p => p.x)), y: Math.min(...drag.points.map(p => p.y)), width: 1, height: 1, fill_color: "#48c78e", stroke_color: "#257953", stroke_width: 2, opacity: 1, visible: true, locked: false, points: drag.points.map(p => `${p.x},${p.y}`), options: {} }); }
+      else if (drag.kind === "draw-shape") { suppressClick = true; updatePreview(drag, true); drag.preview.remove(); action = createElement(drag.data); }
+      else if (drag.kind === "point") action = save(drag.shape, { points: pointStrings(drag.shape) });
+      else action = save(drag.el, { x: Number(drag.el.dataset.x), y: Number(drag.el.dataset.y), ...(drag.el.dataset.type === "line" ? { points: pointStrings(drag.el) } : {}) });
+      drag = null; action;
+    });
+    const setTool = value => { tool = value; svg.dataset.tool = value; svg.dataset.cursor = value === "select" ? "canvas" : "draw"; document.querySelectorAll("[data-draw]").forEach(item => item.classList.toggle("is-primary", item.dataset.draw === value)); };
+    document.querySelectorAll("[data-draw]").forEach(button => button.addEventListener("click", () => setTool(button.dataset.draw)));
+    svg.addEventListener("pointermove", event => {
+      if (drag) return;
+      if (tool !== "select") { svg.dataset.cursor = "draw"; return; }
+      const handle = event.target.closest(".point-handle"), shape = event.target.closest(".canvas-shape");
+      svg.dataset.cursor = handle ? "point" : shape?.dataset.locked === "true" ? "locked" : shape ? "element" : "canvas";
+    });
+    svg.addEventListener("pointerleave", () => { if (!drag) svg.dataset.cursor = "canvas"; });
+    svg.addEventListener("pointerdown", () => { if (drag) svg.dataset.cursor = "dragging"; });
     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";
+      if (suppressClick) { suppressClick = false; return; }
+      if (tool === "select" || event.target.closest(".canvas-shape,.point-handle")) return;
+      const p = localPoint(event), type = tool, width = type.includes("line") ? 120 : 140, height = type.includes("line") ? 80 : 90;
+      const center = { x: p.x + width / 2, y: p.y + height / 2 }, sides = Math.max(3, Math.min(64, Number(document.getElementById("polygon-sides").value) || 5));
+      let points = [];
+      if (type === "line" || type === "freeform_line") points = [`${p.x},${p.y}`, `${p.x+width},${p.y+height}`];
+      if (type === "bezier_line") points = [`${p.x},${p.y+height}`, `${p.x+width/3},${p.y}`, `${p.x+2*width/3},${p.y+height}`, `${p.x+width},${p.y}`];
+      if (type === "polygon") points = Array.from({ length: sides }, (_, i) => `${center.x + Math.cos(2*Math.PI*i/sides)*width/2},${center.y + Math.sin(2*Math.PI*i/sides)*height/2}`);
+      if (type === "mask") points = [];
+      await createElement({ type: `ShareSpace::${modelType(type)}`, x: p.x, y: p.y, width, height, fill_color: "#48c78e", stroke_color: "#257953", stroke_width: 2, opacity: 1, visible: true, locked: false, points, options: {} });
+      setTool("select");
+    });
+    svg.addEventListener("pointerdown", event => {
+      if (tool === "select" || event.target.closest(".canvas-shape,.point-handle")) return;
+      const p = localPoint(event), preview = document.createElementNS("http://www.w3.org/2000/svg", "g"), type = tool;
+      Object.assign(preview.dataset, { type: modelType(type).toLowerCase(), id: "preview", x: p.x, y: p.y, width: 1, height: 1, points: "[]", fill: "#48c78e", stroke: "#257953", strokeWidth: 2, opacity: .48, locked: "false", options: "{}" });
+      const shape = render(preview); shape.classList.add("is-preview"); svg.appendChild(shape);
+      const state = { kind: type === "freeform_line" ? "draw" : "draw-shape", type, start: p, end: p, points: [p], preview: shape };
+      drag = state; if (state.kind === "draw-shape") updatePreview(state); svg.setPointerCapture(event.pointerId); event.preventDefault();
+    });
+    function updatePreview(state, finalize = false) {
+      let { x, y, width, height } = bounds(state.start, state.end), points = [], type = state.type;
+      if (Math.abs(width) < 1 && Math.abs(height) < 1) { width = 140; height = 90; }
+      const sides = Math.max(3, Math.min(64, Number(document.getElementById("polygon-sides").value) || 5)), cx = x + width / 2, cy = y + height / 2;
+      if (["line", "freeform_line"].includes(type)) points = [`${state.start.x},${state.start.y}`, `${state.end.x},${state.end.y}`];
+      if (type === "bezier_line") points = [`${x},${y+height}`, `${x+width/3},${y}`, `${x+2*width/3},${y+height}`, `${x+width},${y}`];
+      if (type === "polygon") points = Array.from({ length: sides }, (_, i) => `${cx + Math.cos(2*Math.PI*i/sides)*width/2},${cy + Math.sin(2*Math.PI*i/sides)*height/2}`);
+      const data = { type: `ShareSpace::${modelType(type)}`, x, y, width, height, fill_color: "#48c78e", stroke_color: "#257953", stroke_width: 2, opacity: 1, visible: true, locked: false, points, options: {} };
+      state.data = data; Object.assign(state.preview.dataset, { type: modelType(type).toLowerCase(), x, y, width, height, points: JSON.stringify(points) });
+      if (finalize) return;
+      const fresh = render(state.preview); fresh.classList.add("is-preview"); state.preview.replaceWith(fresh); state.preview = fresh;
+    }
+    function bounds(a, b) { return { x: Math.min(a.x,b.x), y: Math.min(a.y,b.y), width: Math.abs(a.x-b.x), height: Math.abs(a.y-b.y) }; }
+    tree.addEventListener("click", event => { const button = event.target.closest("[data-select-element]"); if (button) select([button.dataset.selectElement]); });
+    Object.entries(fields).forEach(([key, field]) => field.addEventListener("change", () => { const shape = selectedIds.size === 1 ? byId([...selectedIds][0]) : null; if (shape) save(shape, { [key]: key === "fill_color" ? field.value : Number(field.value) }); }));
+    document.getElementById("delete-element").addEventListener("click", async () => { for (const id of [...selectedIds]) { const shape = byId(id); if (shape) await deleteShape(shape); } select([]); recordHistory(); });
+    document.getElementById("lock-element").addEventListener("click", async () => { const shape = selectedIds.size === 1 ? byId([...selectedIds][0]) : null; if (shape) save(shape, { locked: shape.dataset.locked !== "true" }); });
+    document.getElementById("apply-fx").addEventListener("click", async () => {
+      const symmetry = document.getElementById("fx-symmetry").value, count = Number(document.getElementById("fx-count").value) || 2;
+      const rotate = Number(document.getElementById("fx-rotate").value) || 0, skew = Number(document.getElementById("fx-skew").value) || 0, shadow = document.getElementById("fx-shadow").checked;
+      for (const id of selectedIds) { const shape = byId(id); if (!shape) continue; const options = { ...JSON.parse(shape.dataset.options || "{}"), symmetry, count, rotate, skew, shadow }; await save(shape, { options }); }
+    });
+    document.getElementById("undo").addEventListener("click", undo); document.getElementById("redo").addEventListener("click", redo);
+    svg.addEventListener("contextmenu", event => showMenu(event, event.target.closest(".canvas-shape")));
+    menu.addEventListener("click", async event => { const action = event.target.dataset.action; if (!action) return; const shape = selectedIds.size === 1 ? byId([...selectedIds][0]) : null; menu.classList.add("is-hidden");
+      if (action === "select-all") select(shapes().map(item => item.dataset.id));
+      if (action === "undo") await undo(); if (action === "redo") await redo();
+      if (action === "copy" && shape) clipboard = serialized(shape);
+      if (action === "paste") await paste();
+      if (action === "delete" && shape) { await deleteShape(shape); select([]); recordHistory(); }
+      if (action === "lock" && shape) await save(shape, { locked: shape.dataset.locked !== "true" });
+    });
+    document.addEventListener("click", event => { if (!menu.contains(event.target)) menu.classList.add("is-hidden"); });
+    document.addEventListener("keydown", event => { if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "z") { event.preventDefault(); event.shiftKey ? redo() : undo(); } else if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "c" && selectedIds.size === 1) { const shape = byId([...selectedIds][0]); if (shape) clipboard = serialized(shape); } else if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "v") paste(); else if (event.key === "Escape") menu.classList.add("is-hidden"); });
+    document.getElementById("export-canvas").addEventListener("click", async event => {
+      const button = event.currentTarget, format = document.getElementById("export-format").value; button.classList.add("is-loading");
+      try {
+        const clone = svg.cloneNode(true); clone.querySelectorAll(".point-handles,#fx-mirrors").forEach(node => node.remove()); clone.querySelectorAll(".canvas-shape").forEach(node => node.classList.remove("is-selected"));
+        const source = new XMLSerializer().serializeToString(clone), svgBlob = new Blob([source], { type: "image/svg+xml;charset=utf-8" });
+        if (format === "pdf") { const url = URL.createObjectURL(svgBlob), win = window.open(url, "_blank"); if (win) { win.addEventListener("load", () => win.print()); } else window.print(); setTimeout(() => URL.revokeObjectURL(url), 60_000); return; }
+        let blob = svgBlob;
+        if (format !== "svg") { const image = new Image(), url = URL.createObjectURL(svgBlob); image.src = url; await image.decode(); const canvas = document.createElement("canvas"); canvas.width = Number(svg.dataset.canvasWidth); canvas.height = Number(svg.dataset.canvasHeight); const ctx = canvas.getContext("2d"); if (format === "jpeg") { ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); } ctx.drawImage(image, 0, 0); URL.revokeObjectURL(url); blob = await new Promise(resolve => canvas.toBlob(resolve, `image/${format}`, .95)); }
+        const url = URL.createObjectURL(blob), link = document.createElement("a"); link.href = url; link.download = `${document.title.replace(/[^a-z0-9_-]+/gi, "-")}.${format}`; link.click(); setTimeout(() => URL.revokeObjectURL(url), 10_000);
+      } catch (error) { console.error("Canvas export failed", error); alert("The canvas could not be exported in that format."); }
+      finally { button.classList.remove("is-loading"); }
+    });
+    function localPoint(event) { const p = svg.createSVGPoint(); p.x = event.clientX; p.y = event.clientY; return p.matrixTransform(svg.getScreenCTM().inverse()); }
+    const clientId = crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const cableUrl = `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/cable`;
+    let socket, lastCursorAt = 0;
+    const connectCollaboration = () => {
+      socket = new WebSocket(cableUrl);
+      socket.addEventListener("open", () => socket.send(JSON.stringify({ command: "subscribe", identifier: JSON.stringify({ channel: "ShareSpace::CanvasChannel", canvas_id: svg.dataset.canvasId, client_id: clientId }) })));
+      socket.addEventListener("message", event => {
+        let frame; try { frame = JSON.parse(event.data); } catch (_) { return; }
+        if (frame.type === "ping" || frame.type === "welcome" || frame.type === "confirm_subscription") return;
+        const message = frame.message; if (!message) return;
+        if (message.type === "cursor") return updateRemoteCursor(message);
+        if (message.type !== "element" || String(message.element?.id) === "undefined") return;
+        const element = message.element, id = String(element.id);
+        if (message.action === "delete") { byId(id)?.remove(); selectedIds.delete(id); select(selectedIds); }
+        else {
+          let shape = byId(id); const source = shape ? shape.cloneNode(false) : document.createElementNS("http://www.w3.org/2000/svg", "g");
+          Object.assign(source.dataset, { id, type: element.type.split("::").pop().toLowerCase(), x: element.x, y: element.y, width: element.width, height: element.height, fill: element.fill_color || "#48c78e", stroke: element.stroke_color || "#257953", strokeWidth: element.stroke_width || 2, opacity: element.opacity, locked: element.locked, points: JSON.stringify(element.points || []), options: JSON.stringify(element.options || {}), name: element.name || "" });
+          const fresh = render(source); if (shape) shape.replaceWith(fresh); else svg.appendChild(fresh); refreshMirrors();
+        }
+        refreshTree(); recordHistory();
+      });
+    };
+    const cursors = new Map();
+    function updateRemoteCursor(message) {
+      const id = String(message.client_id || ""); if (!id || id === clientId) return;
+      let marker = cursors.get(id);
+      if (message.active === false) { marker?.remove(); cursors.delete(id); return; }
+      if (!marker) {
+        marker = document.createElementNS("http://www.w3.org/2000/svg", "g"); marker.classList.add("remote-cursor");
+        const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); arrow.setAttribute("d", "M 0 0 L 0 18 L 5 13 L 10 22 L 14 20 L 9 11 L 16 10 Z"); arrow.classList.add("cursor-arrow");
+        const label = document.createElementNS("http://www.w3.org/2000/svg", "text"); label.setAttribute("x", "18"); label.setAttribute("y", "17"); label.textContent = `Collaborator ${cursors.size + 1}`;
+        marker.append(arrow, label); svg.appendChild(marker); cursors.set(id, marker);
+      }
+      marker.setAttribute("transform", `translate(${message.x} ${message.y})`);
+      marker.children[1].textContent = `Collaborator ${[...cursors.keys()].indexOf(id) + 1} · ${Math.round(message.x)}, ${Math.round(message.y)}`;
+    }
+    connectCollaboration();
+    svg.addEventListener("pointermove", event => {
+      const p = localPoint(event); document.getElementById("cursor-position").textContent = `X ${Math.round(p.x)} · Y ${Math.round(p.y)}`;
+      if (!socket || socket.readyState !== WebSocket.OPEN || event.timeStamp - lastCursorAt < 50) return;
+      lastCursorAt = event.timeStamp; const point = p;
+      socket.send(JSON.stringify({ command: "message", identifier: JSON.stringify({ channel: "ShareSpace::CanvasChannel", canvas_id: svg.dataset.canvasId, client_id: clientId }), data: JSON.stringify({ type: "cursor", client_id: clientId, x: point.x, y: point.y }) }));
     });
-    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); });
+    window.addEventListener("beforeunload", () => { if (socket?.readyState === WebSocket.OPEN) socket.close(); });
   })();

data/db/migrate/20261028010000_add_options_to_share_space_canvas_elements.rb

@@ -0,0 +1,5 @@
+class AddOptionsToShareSpaceCanvasElements < ActiveRecord::Migration[8.1]
+  def change
+    add_column :share_space_canvas_elements, :options, :json, null: false, default: {}
+  end
+end

data/lib/share_space/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: share_space
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - paydaypay1
@@ -50,6 +50,7 @@ files:
 - README.md
 - Rakefile
 - app/assets/stylesheets/share_space/application.css
+- app/channels/share_space/canvas_channel.rb
 - app/controllers/share_space/application_controller.rb
 - app/controllers/share_space/canvas_elements_controller.rb
 - app/controllers/share_space/canvases_controller.rb
@@ -57,11 +58,18 @@ files:
 - 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/bezier_line.rb
 - app/models/share_space/canvas.rb
 - app/models/share_space/canvas_element.rb
+- app/models/share_space/cube.rb
+- app/models/share_space/cylinder.rb
 - app/models/share_space/ellipse.rb
+- app/models/share_space/freeform_line.rb
 - app/models/share_space/line.rb
+- app/models/share_space/mask.rb
+- app/models/share_space/polygon.rb
 - app/models/share_space/rectangle.rb
+- app/models/share_space/sphere.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
@@ -71,6 +79,7 @@ files:
 - config/routes.rb
 - db/migrate/20261027225958_create_share_space_canvas.rb
 - db/migrate/20261027231337_create_canvas_element.rb
+- db/migrate/20261028010000_add_options_to_share_space_canvas_elements.rb
 - lib/share_space.rb
 - lib/share_space/engine.rb
 - lib/share_space/version.rb