crimson 0.1.0

data/lib/crimson/version.rb

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

data/lib/crimson/webserver.rb

@@ -0,0 +1,17 @@
+require 'sinatra/base'
+
+module Crimson
+  class WebServer < Sinatra::Base
+    set :public_folder, "#{__dir__}/../"
+
+    def initialize(template)
+      super()
+      
+      @template = template
+    end
+
+    get '/' do
+      @template
+    end
+  end
+end

data/lib/crimson/widgets/bottom_resizer.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require_relative 'resizer'
+
+module Crimson
+  class BottomResizer < Resizer
+    def initialize
+      super('ns-resize')
+
+      style.width = '100%'
+      style.height = '5px'
+      style.position = 'absolute'
+      style.bottom = 0
+      style.left = 0
+    end
+
+    def on_mousemove(data)
+        parent.style.height = "#{data.clientY - parent.style.top.delete_suffix('px').to_i - data.movementY}px"
+        parent.commit!
+    end
+  end
+end

data/lib/crimson/widgets/desktop.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+require_relative '../object'
+require_relative 'window'
+
+module Crimson
+  class Desktop < Crimson::Object
+    def initialize
+      super(:div)
+
+      self.style = {
+        "height": '100vh',
+        "width": '100vw',
+        "max-height": '100vh',
+        "max-width": '100vw',
+        "overflow": 'hidden',
+        "position": 'fixed',
+        "left": "0px",
+        "top": "0px"
+      }
+
+      self.ondragover = 'event.preventDefault();'
+      self.ondrop = 'event.preventDefault();'
+
+      on('drop', method(:on_drop))
+    end
+
+    def on_drop(data)
+      window = find_descendant(data.target.to_sym).parent
+
+      unless window.nil?
+        window.style.left = "#{data.clientX + window.offset.left}px"
+        window.style.top = "#{data.clientY + window.offset.top}px"
+        window.commit!
+      end
+    end
+
+    def create_window(*args)
+      window = Crimson::Window.new(*args)
+      add(window)
+      window
+    end
+  end
+end

data/lib/crimson/widgets/form.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require_relative '../object'
+
+module Crimson
+  class Form < Crimson::Object
+    def initialize
+      super(:form)
+      self.onsubmit = "return false"
+    end
+  end
+end

data/lib/crimson/widgets/input.rb

@@ -0,0 +1,10 @@
+require_relative '../object'
+
+module Crimson
+  class Input < Crimson::Object
+    def initialize(type)
+      super(:input)
+      self.type = type
+    end
+  end
+end

data/lib/crimson/widgets/left_resizer.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require_relative 'resizer'
+
+module Crimson
+  class LeftResizer < Resizer
+    def initialize
+      super('ew-resize')
+
+      style.width = '5px'
+      style.height = '100%'
+      style.position = 'absolute'
+      style.top = 0
+      style.left = 0
+    end
+
+    def on_mousemove(data)
+      min_width = parent.style.minWidth.delete_suffix('px').to_i
+      new_width = parent.style.width.delete_suffix('px').to_i - data.movementX
+      new_left = parent.style.left.delete_suffix('px').to_i + data.movementX
+
+      parent.style.width = "#{new_width}px"
+      parent.style.left = "#{new_left}px" unless new_width < min_width
+      parent.commit!
+    end
+  end
+end

data/lib/crimson/widgets/resizer.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+require_relative '../object'
+
+module Crimson
+  class Resizer < Crimson::Object
+    attr_reader :cursor
+
+    def initialize(cursor)
+      super(:div)
+
+      @cursor = cursor
+      self.style = {}
+
+      enable
+    end
+
+    def enable
+      style.cursor = cursor
+      on(:mousedown, method(:on_mousedown))
+    end
+
+    def disable
+      style.cursor = "auto"
+      un(:mousedown, method(:on_mousedown))
+    end
+
+    def on_mousedown(_data)
+      parent.parent.on(:mousemove, method(:on_mousemove))
+      parent.parent.on(:mouseup, method(:on_mouseup))
+    end
+
+    def on_mouseup(_data)
+      parent.parent.un(:mousemove, method(:on_mousemove))
+      parent.parent.un(:mouseup, method(:on_mouseup))
+    end
+  end
+end

data/lib/crimson/widgets/right_resizer.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require_relative 'resizer'
+
+module Crimson
+  class RightResizer < Resizer
+    def initialize
+      super('ew-resize')
+
+      style.width = '5px'
+      style.height = '100%'
+      style.position = 'absolute'
+      style.top = 0
+      style.right = 0
+    end
+
+    def on_mousemove(data)
+      parent.style.width = "#{data.clientX - parent.style.left.delete_suffix('px').to_i - data.movementX}px"
+      parent.commit!
+    end
+  end
+end

data/lib/crimson/widgets/titlebar.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+require_relative '../object'
+
+module Crimson
+  class Titlebar < Crimson::Object
+    attr_reader :title, :hide_button, :resize_button, :close_button
+
+    def initialize(window_title)
+      super(:div)
+
+      @title = Object.new(:div)
+      self.title = window_title
+      title.style.color = 'white'
+      title.style.fontFamily = 'Verdana'
+      title.style.fontWeight = 'bold'
+      title.style.textAlign = 'center'
+      title.style.margin = 'auto'
+      add(title)
+
+      @hide_button = Object.new(:img)
+      hide_button.src = 'crimson/icons/hide.png'
+      hide_button.style.padding = '10px 20px'
+      hide_button.on('mouseenter') do |_data|
+        hide_button.style.backgroundColor = 'rgba(0, 0, 0, 0.6)'
+        hide_button.commit!
+      end
+      hide_button.on('mouseleave') do |_data|
+        hide_button.style.backgroundColor = 'rgba(0, 0, 0, 0.0)'
+        hide_button.commit!
+      end
+      add(hide_button)
+
+      @resize_button = Object.new(:img)
+      resize_button.src = 'crimson/icons/resize.png'
+      resize_button.style.padding = '8px 16px'
+      resize_button.on('mouseenter') do |_data|
+        resize_button.style.backgroundColor = 'rgba(0, 0, 0, 0.6)'
+        resize_button.commit!
+      end
+      resize_button.on('mouseleave') do |_data|
+        resize_button.style.backgroundColor = 'rgba(0, 0, 0, 0.0)'
+        resize_button.commit!
+      end
+      add(resize_button)
+
+      @close_button = Object.new(:img)
+      close_button.src = 'crimson/icons/close.png'
+      close_button.style.padding = '10px 20px'
+      close_button.on('mouseenter') do |_data|
+        close_button.style.backgroundColor = 'rgba(0, 0, 0, 0.6)'
+        close_button.commit!
+      end
+      close_button.on('mouseleave') do |_data|
+        close_button.style.backgroundColor = 'rgba(0, 0, 0, 0.0)'
+        close_button.commit!
+      end
+      add(close_button)
+
+      style.backgroundColor = '#2ecc71'
+      style.width = '100%'
+      style.height = '35px'
+      style.display = 'flex'
+      style.userSelect = 'none'
+    end
+
+    def title=(window_title)
+      title.innerHTML = window_title
+    end
+
+    def buttons
+      [hide_button, resize_button, close_button]
+    end
+  end
+end

data/lib/crimson/widgets/top_resizer.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require_relative 'resizer'
+
+module Crimson
+  class TopResizer < Resizer
+    def initialize
+      super('ns-resize')
+
+      style.width = '100%'
+      style.height = '5px'
+      style.position = 'absolute'
+      style.top = 0
+      style.left = 0
+    end
+
+    def on_mousemove(data)
+      min_height = parent.style.minHeight.delete_suffix('px').to_i
+      new_height = parent.style.height.delete_suffix('px').to_i - data.movementY
+      new_top = parent.style.top.delete_suffix('px').to_i + data.movementY
+
+      parent.style.height = "#{new_height}px"
+      parent.style.top = "#{new_top}px" unless new_height < min_height
+      parent.commit!
+    end
+  end
+end

data/lib/crimson/widgets/window.rb

@@ -0,0 +1,134 @@
+# frozen_string_literal: true
+
+require 'hashie'
+require_relative '../object'
+require_relative 'titlebar'
+require_relative 'left_resizer'
+require_relative 'right_resizer'
+require_relative 'top_resizer'
+require_relative 'bottom_resizer'
+
+module Crimson
+  class Window < Crimson::Object
+    attr_reader :offset, :titlebar, :previous_dimensions, :content
+    attr_reader :resizable, :left_resizer, :right_resizer, :top_resizer, :bottom_resizer
+
+    def initialize(title, width = '800px', height = '600px')
+      super(:div)
+
+      @resizable = true
+      @offset = Hashie::Mash.new
+      @previous_dimensions = Hashie::Mash.new
+
+      @titlebar = Titlebar.new(title)
+      titlebar.draggable = true
+      titlebar.on('dragstart', method(:on_dragstart))
+      titlebar.resize_button.on('click') do |_data|
+        maximized? ? minimize : maximize
+        commit_tree!
+      end
+      titlebar.close_button.on('click') do |_data|
+        old_parent = parent
+        old_parent.remove(self)
+        old_parent.commit_tree!
+      end
+      add(titlebar)
+
+      @left_resizer = LeftResizer.new
+      add(left_resizer)
+
+      @right_resizer = RightResizer.new
+      add(right_resizer)
+
+      @top_resizer = TopResizer.new
+      top_resizer.style.height = '10px'
+      add(top_resizer)
+
+      @bottom_resizer = BottomResizer.new
+      add(bottom_resizer)
+
+      @content = Crimson::Object.new(:div)
+      content.style.width = '100%'
+      content.style.height = "calc(100% - #{titlebar.style.height})"
+      content.style.padding = 0
+      content.style.margin = 0
+      add(content)
+
+      style.left = '0px'
+      style.top = '0px'
+      style.height = height
+      style.width = width
+      style.minHeight = '200px'
+      style.minWidth = '400px'
+      style.position = 'absolute'
+      style.backgroundColor = 'white'
+      style.boxShadow = '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
+
+      on('mousedown', method(:on_mousedown))
+    end
+
+    def content=(widget)
+      content.children.each { |child| content.remove(child) }
+      content.add(widget)
+    end
+
+    def on_dragstart(data)
+      offset.top = style.top.delete_suffix('px').to_i - data.clientY
+      offset.left = style.left.delete_suffix('px').to_i - data.clientX
+    end
+
+    def on_mousedown(_data)
+      parent.move(self, -1)
+      parent.commit_tree!(:children)
+    end
+
+    def maximized?
+      style.height == '100vh' && style.width == '100vw'
+    end
+
+    def minimized?
+      !maximized?
+    end
+
+    def resizable?
+      resizable
+    end
+
+    def resizable=(bool)
+      @resizable = bool
+
+      if resizable?
+        resizers.each(&:enable)
+      else
+        resizers.each(&:disable)
+      end
+    end
+
+    def resizers
+      [left_resizer, right_resizer, top_resizer, bottom_resizer]
+    end
+
+    def maximize
+      self.resizable = false
+
+      previous_dimensions.top = style.top.dup
+      previous_dimensions.left = style.left.dup
+      previous_dimensions.width = style.width.dup
+      previous_dimensions.height = style.height.dup
+
+      style.top = '0px'
+      style.left = '0px'
+      style.width = '100vw'
+      style.height = '100vh'
+    end
+
+    def minimize
+      style.top = previous_dimensions.top.dup
+      style.left =  previous_dimensions.left.dup
+      style.width = previous_dimensions.width.dup
+      style.height = previous_dimensions.height.dup
+
+      self.resizable = true
+    end
+  end
+end