From 9c6f8f8568d20d75eb22955dbf2752ea777e59f8 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 7 Jan 2015 14:34:41 -0500 Subject: stub in brochure page --- public/assets/stylesheets/app.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'public') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index aecd6be..0463e26 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -673,7 +673,21 @@ iframe.embed { font-weight: 300; } +.aboutintro { + text-align: center; + line-height: 43px; + font-size: 24px; + padding: 5% 0; + font-weight: 300; +} +.aboutintro .inner { + max-width: 800px; + margin: 0 auto; + text-align: center; +} + /* PROFILE PAGE */ + .profilePic { background-size: cover; background-position: center; -- cgit v1.2.3-70-g09d2 From 664099f91ae3ed2d667d331b19c2e41dec60124c Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Fri, 9 Jan 2015 06:43:31 -0500 Subject: fix up plans form --- public/assets/stylesheets/app.css | 6 +- public/assets/stylesheets/staff.css | 16 ++++ server/lib/views/staff.js | 70 ++++++++++++---- server/repl.js | 2 + views/staff/_nav.ejs | 1 + views/staff/index.ejs | 6 +- views/staff/plans/_form.ejs | 160 ++++++++++++++++++++++-------------- views/staff/plans/edit.ejs | 2 +- views/staff/plans/index.ejs | 11 ++- views/staff/plans/new.ejs | 4 +- 10 files changed, 186 insertions(+), 92 deletions(-) (limited to 'public') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 0463e26..9e86ac3 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -2478,7 +2478,7 @@ form li { form label { float:left; } -form input[type="text"],form input[type="password"] { +form input[type="text"],form input[type="password"],form input[type="number"] { border: 1px solid; font-size: 20px; padding: 5px; @@ -3048,8 +3048,8 @@ a[data-role="forgot-password"] { form li { font-size: 16px; } - form input[type="text"], form input[type="password"] { - font-size: 15px; + form input[type="text"],form input[type="password"],form input[type="number"] { + font-size: 15px; } .page h1 { font-size: 26px; diff --git a/public/assets/stylesheets/staff.css b/public/assets/stylesheets/staff.css index de31571..e5cafa2 100644 --- a/public/assets/stylesheets/staff.css +++ b/public/assets/stylesheets/staff.css @@ -71,6 +71,22 @@ hr { color: #00f; border-bottom: 1px solid; } +.staff form { + max-width: none; + width: 600px; + padding: 20px; +} +.staff form label { + float: none; +} +.staff form p { + width: 350px; + margin: 5px 0; + color: #444; +} +.staff form div li { + width: 180px; +} #iframe-embed, #iframe-embed tr, #iframe-embed td { width: 79vw; } diff --git a/server/lib/views/staff.js b/server/lib/views/staff.js index ce676ed..6639137 100644 --- a/server/lib/views/staff.js +++ b/server/lib/views/staff.js @@ -18,6 +18,10 @@ var staff = module.exports = { fields: { user: "_id username displayName photo created_at updated_at last_seen created_ip last_ip", project: "_id name slug user_id privacy created_at updated_at", + plans: "monthly_price yearly_price basic_layout_monthly_price basic_layout_yearly_price " + + "pro_layout_monthly_price pro_layout_yearly_price " + + "basic_layout_limit pro_layout_limit stock_project_limit basic_project_limit pro_project_limit", + plans_permissions: "basic_editor pro_editor solids collaborators no_logo", }, defaults: { @@ -122,8 +126,8 @@ var staff = module.exports = { }, ensurePlans: function(req, res, next){ - Plan.exec(function (err, plans) { - res.locals.plans = plans.map(staff.helpers.plan) + Plan.find(function (err, plans) { + res.locals.plans = (plans || []).map(staff.helpers.plan) next() }) }, @@ -132,17 +136,16 @@ var staff = module.exports = { Plan.findOne({ slug: req.params.slug }, function(err, plan){ if (err || ! plan) { console.error(err) - req.plan = null + res.redirect("/staff/plans/") } else { req.plan = plan + next() } - next() }) } else { - req.plan = null - next() + res.redirect("/staff/plans/") } }, @@ -326,7 +329,14 @@ var staff = module.exports = { media.user = {} media.shortUrl = media.url.replace(/^http.:\/\//,"") return media - } + }, + + plan: function(plan){ + plan = plan.toObject() + plan.date = moment( plan.updated_at || plan.created_at ).format("M/DD/YYYY hh:mm a") + plan.user = {} + return plan + }, }, route: function(app){ @@ -452,7 +462,8 @@ var staff = module.exports = { // // plans - app.get('/staff/plans/', + + app.get('/staff/plans', middleware.ensureAuthenticated, middleware.ensureIsStaff, @@ -484,6 +495,8 @@ var staff = module.exports = { middleware.ensureAuthenticated, middleware.ensureIsStaff, + staff.middleware.ensurePlan, + staff.plans.update ); }, @@ -607,14 +620,8 @@ var staff = module.exports = { plans: { index: function(req, res){ - res.locals.fields = ( - "monthly_price yearly_price basic_layout_monthly_price basic_layout_yearly_price " + - "pro_layout_monthly_price pro_layout_yearly_price " + - "basic_layout_limit pro_layout_limit stock_project_limit basic_project_limit pro_project_limit" - ).split(" ") - - res.locals.permissions = "basic_editor pro_editor solids collaborators no_logo".split(" ") - + res.locals.fields = staff.fields.plans.split(" ") + res.locals.permissions = staff.fields.plans_permissions.split(" ") res.render('staff/plans/index') }, new: function(req, res){ @@ -625,10 +632,37 @@ var staff = module.exports = { res.render('staff/plans/edit') }, create: function(req, res){ - res.redirect("/staff/plans/") + var plan = new Plan () + var fields = staff.fields.plans.split(" ") + var permissions = staff.fields.plans_permissions.split(" ") + + var data = util.cleanQuery(req.body) + data.name = util.sanitize(data.name) + data.slug = util.sanitize(data.slug.toLowerCase()) + + permissions.forEach(function(field){ + data[field] = data["permissions_" + field] + }) + + new Plan (data).save(function(err, doc){ + if (err || ! doc) { return res.json({ error: err }) } + res.redirect("/staff/plans/") + }) }, update: function(req, res){ - res.redirect("/staff/plans/") + var data = util.cleanQuery(req.body) + data.name = util.sanitize(data.name) + data.slug = util.sanitize(data.slug.toLowerCase()) + + _.extend(req.plan, data) + permissions.forEach(function(field){ + req.plan[field] = data["permissions_" + field] + }) + + req.plan.save(function(err, doc){ + if (err || ! doc) { return res.json({ error: err }) } + res.redirect("/staff/plans/") + }) }, } diff --git a/server/repl.js b/server/repl.js index ba94d45..353d8c5 100644 --- a/server/repl.js +++ b/server/repl.js @@ -9,6 +9,8 @@ mongoose.connect('mongodb://' + DB_HOST + '/vvalls', {}, function(){ "./lib/schemas/Layout", "./lib/schemas/Media", "./lib/schemas/Project", + "./lib/schemas/Plan", + "./lib/schemas/Subscription", ].forEach(function(modName){ // console.log(name, modName) var namez = modName.split("/"), name = namez[namez.length-1]; diff --git a/views/staff/_nav.ejs b/views/staff/_nav.ejs index 2115e9f..db7bedb 100644 --- a/views/staff/_nav.ejs +++ b/views/staff/_nav.ejs @@ -3,4 +3,5 @@ users projects media + plans \ No newline at end of file diff --git a/views/staff/index.ejs b/views/staff/index.ejs index 5ca7269..1b73641 100644 --- a/views/staff/index.ejs +++ b/views/staff/index.ejs @@ -2,11 +2,7 @@

Staff Area

- + [[ include _nav ]]
diff --git a/views/staff/plans/_form.ejs b/views/staff/plans/_form.ejs index b97716f..fc86516 100644 --- a/views/staff/plans/_form.ejs +++ b/views/staff/plans/_form.ejs @@ -1,109 +1,149 @@ + -
+
    + +
  • +

    New Plan

    +
    • + +
  • - -
+
+ -
+
  • - -
    • +
    + -
    +
  • +

    Plan Pricing

    +
    • + +
  • - -
    • +
    + -
    +
  • - -
    • +
    + + +

    + Note: Pricing should be in cents, i.e. a price of $10.00 should be entered as 1000. +

    -
    - - -
    +
  • +

    Additional Template Pricing

    +
    • -
    - - -
    +
  • + +
    +
    • -
    - - -
    +
  • + +
    +
    • -
    - - -
    +
  • + +
    +
    • + +
  • + +
    +
    • -
    - - -
    +
  • +

    Per-Plan Template Limits

    +
    • -
    - - -
    +
  • + +
    +
    • + +
  • + +
    +
    • -
    +
  • +

    Per-Plan Project Limits

    +
    • + +
  • - -
    • +
    + -
    +
  • - -
    • +
    + -
    +
  • - -
    • +
    + +
  • +

    Permissions

    +
    • +
    - +
  • -
    • + + -
    - +
  • -
    • + + -
    - +
  • -
    • + + -
    - +
  • -
    • + + -
    - +
  • -
    • + + + +

    + These permissions should harmonize with the restrictions on layouts set above. +

    + - +
  • + +
    • + diff --git a/views/staff/plans/edit.ejs b/views/staff/plans/edit.ejs index 503c97d..9848873 100644 --- a/views/staff/plans/edit.ejs +++ b/views/staff/plans/edit.ejs @@ -7,7 +7,7 @@
    -[[- include form ]] +[[- include _form ]]
    [[ include ../_footer ]] diff --git a/views/staff/plans/index.ejs b/views/staff/plans/index.ejs index aa6c35a..121a2fc 100644 --- a/views/staff/plans/index.ejs +++ b/views/staff/plans/index.ejs @@ -6,6 +6,7 @@
    +[[ if (plans.length) { ]] @@ -30,7 +31,11 @@ [[ plans.forEach(function(plan){ ]] [[ }) ]] @@ -46,8 +51,10 @@ [[ }) ]] [[ }) ]] -
    [[- field.replace(/_/," ") ]] - [[- plan[field] ]] + [[ if (field.indexOf("_price") != -1) { ]] + [[- plan[field] == 0 ? "" : "$" + (plan[field]/100).toFixed(2) ]] + [[ } else { ]] + [[- plan[field] ]] + [[ } ]]
    +
    +[[ } ]] + New Plan
    diff --git a/views/staff/plans/new.ejs b/views/staff/plans/new.ejs index d56a1c3..297d3d6 100644 --- a/views/staff/plans/new.ejs +++ b/views/staff/plans/new.ejs @@ -7,9 +7,7 @@
    -[[- include form ]] +[[- include _form ]]
    [[ include ../_footer ]] - - -- cgit v1.2.3-70-g09d2 From b386c3b88034e4e372f147ffd368c2de1d23a865 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Fri, 9 Jan 2015 07:28:43 -0500 Subject: saving plans --- public/assets/stylesheets/staff.css | 2 +- server/lib/views/staff.js | 6 +++++- views/staff/plans/_form.ejs | 10 +++++----- views/staff/plans/index.ejs | 34 +++++++++++++++++++--------------- 4 files changed, 30 insertions(+), 22 deletions(-) (limited to 'public') diff --git a/public/assets/stylesheets/staff.css b/public/assets/stylesheets/staff.css index e5cafa2..fffadbf 100644 --- a/public/assets/stylesheets/staff.css +++ b/public/assets/stylesheets/staff.css @@ -67,7 +67,7 @@ hr { .staff .body a { border-bottom: 1px dotted; } -.staff .editLinks a { +.staff .editLinks a, .staff a.bluelink { color: #00f; border-bottom: 1px solid; } diff --git a/server/lib/views/staff.js b/server/lib/views/staff.js index 6639137..2fdc2c3 100644 --- a/server/lib/views/staff.js +++ b/server/lib/views/staff.js @@ -629,6 +629,7 @@ var staff = module.exports = { res.render('staff/plans/new') }, edit: function(req, res){ + res.locals.plan = req.plan res.render('staff/plans/edit') }, create: function(req, res){ @@ -650,13 +651,16 @@ var staff = module.exports = { }) }, update: function(req, res){ + var fields = staff.fields.plans.split(" ") + var permissions = staff.fields.plans_permissions.split(" ") + var data = util.cleanQuery(req.body) data.name = util.sanitize(data.name) data.slug = util.sanitize(data.slug.toLowerCase()) _.extend(req.plan, data) permissions.forEach(function(field){ - req.plan[field] = data["permissions_" + field] + req.plan.permissions[field] = data["permissions_" + field].length == 2 }) req.plan.save(function(err, doc){ diff --git a/views/staff/plans/_form.ejs b/views/staff/plans/_form.ejs index fc86516..ae5ca5a 100644 --- a/views/staff/plans/_form.ejs +++ b/views/staff/plans/_form.ejs @@ -107,31 +107,31 @@
  • - +
  • - +
  • - +
  • - +
  • - +
    • diff --git a/views/staff/plans/index.ejs b/views/staff/plans/index.ejs index 121a2fc..16fcf14 100644 --- a/views/staff/plans/index.ejs +++ b/views/staff/plans/index.ejs @@ -6,31 +6,33 @@
    -[[ if (plans.length) { ]] - - [[ plans.forEach(function(plan){ ]] + [[ plans.forEach(function(plan){ ]] + [[ }) ]] - - - [[ plans.forEach(function(plan){ ]] + + [[ plans.forEach(function(plan){ ]] + [[ }) ]] [[ fields.forEach(function(field){ ]] - + [[ plans.forEach(function(plan){ ]] - [[ }) ]] + + + + [[ permissions.forEach(function(permission){ ]] - + [[ plans.forEach(function(plan){ ]] - [[ }) ]] [[ }) ]]
    - [[- plan.name ]] + + [[- plan.name ]]
    - edit + New Plan + + [edit]
    [[- field.replace(/_/," ") ]][[- field.replace(/_/g," ") ]] + [[ if (field.indexOf("_price") != -1) { ]] [[- plan[field] == 0 ? "" : "$" + (plan[field]/100).toFixed(2) ]] [[ } else { ]] @@ -41,20 +43,22 @@
    [[- permission.replace(/_/," ") ]][[- permission.replace(/_/g," ") ]] - [[- plan.permissions[permission] ? "x" : " " ]] + + [[- plan.permissions[permission] ? "x" : " " ]]

    -[[ } ]] - New Plan
    -- cgit v1.2.3-70-g09d2 From c5ab88deba82c4b4a149b3df594162351157483a Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Fri, 9 Jan 2015 10:51:24 -0500 Subject: buy buttons --- public/assets/stylesheets/app.css | 4 +++- views/about/_blank.ejs | 2 +- views/about/about.ejs | 2 +- views/about/brochure.ejs | 45 +++++++++++++++++++++++++++------------ 4 files changed, 36 insertions(+), 17 deletions(-) (limited to 'public') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 9e86ac3..a149166 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -604,7 +604,9 @@ iframe.embed { .page h1:nth-child(2) { margin-top: 40px; } - +.page h1.leader { + margin-top: 60px; +} .page p { margin: 20px; } diff --git a/views/about/_blank.ejs b/views/about/_blank.ejs index 3c23fa7..732ea3f 100644 --- a/views/about/_blank.ejs +++ b/views/about/_blank.ejs @@ -8,7 +8,7 @@
    [[ include ../partials/header ]] - +

    Hallo

    diff --git a/views/about/about.ejs b/views/about/about.ejs index 2aec982..6d5f011 100644 --- a/views/about/about.ejs +++ b/views/about/about.ejs @@ -8,7 +8,7 @@
    [[ include ../partials/header ]] -

    About VValls

    +

    About VValls

    diff --git a/views/about/brochure.ejs b/views/about/brochure.ejs index 75e7b60..e75f8c6 100644 --- a/views/about/brochure.ejs +++ b/views/about/brochure.ejs @@ -8,7 +8,7 @@
    [[ include ../partials/header ]] -

    Subscriptions

    +

    Subscriptions

    @@ -27,11 +27,14 @@

    [[- plans.basic.name ]]

    • $[[- plans.basic.monthly_price ]]/mo or $[[- plans.basic.yearly_price ]]/year -
    • [[- plans.basic.stock_project_limit ]] exhibitions included with pre-designed template floor plans +
    • Comes with [[- plans.basic.basic_layout_limit ]] basic floor plan and [[- plans.basic.basic_project_limit ]] exhibitions
    • Each new basic floor plan costs $[[- plans.basic.basic_layout_monthly_price ]]/mo or $[[- plans.basic.basic_layout_yearly_price ]]/year, minimum 3 months -
    • Each new basic floor plan can have up to [[- plans.basic.basic_project_limit ]] exhibitions +
    • Each new floor plan can have up to [[- plans.basic.basic_project_limit ]] exhibitions
    • VValls logo appears when embedding an exhibition on a web page +
    • + +
    @@ -45,10 +48,13 @@
  • Each new pro floor plan can have up to [[- plans.pro.pro_project_limit ]] exhibitions
  • Includes planning for 3D objects in the room
  • No VValls logo on embed +
  • + +
    • -
    +
    • Buying any extra floor plan unlocks collaboration. Invite an artist or curator to work on the exhibition with you.
    • Basic Floor plan: Rectangle-based design of any dimension. @@ -56,10 +62,10 @@
    -
    -

    Custom

    +
    +

    Want Something Custom?

  • We offer customized white-label options for business and educational uses. -
  • Contact us for more information. +
  • Contact us for more information.
    • @@ -74,13 +80,23 @@ [[ include ../partials/scripts ]] \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 904a18b763889c9f85d874388fdff9daaefb89cd Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 14 Jan 2015 15:44:34 -0500 Subject: roll back devicePixelRatio fix on desktop --- public/assets/javascripts/app.js | 4 +++- public/assets/javascripts/mx/mx.js | 14 +++++++------- public/assets/stylesheets/app.css | 4 ++++ 3 files changed, 14 insertions(+), 8 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 41edafe..a146325 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -3,7 +3,7 @@ if (is_mobile) { $("html").addClass("mobile") } else { - $("html").addClass("desktop") + $("html").addClass("desktop") } @@ -23,6 +23,8 @@ app.launch = function () { var movements + app.devicePixelRatio = is_mobile ? devicePixelRatio : 1 + scene = new MX.Scene().addTo('#scene') scene.width = window.innerWidth scene.height = window.innerHeight diff --git a/public/assets/javascripts/mx/mx.js b/public/assets/javascripts/mx/mx.js index d59a551..ab9a9a0 100644 --- a/public/assets/javascripts/mx/mx.js +++ b/public/assets/javascripts/mx/mx.js @@ -162,24 +162,24 @@ var MX = MX || (function (undefined) { Object.defineProperty(this, 'width', { get: function () { return width - || parseInt(self.el.style.width*devicePixelRatio, 10) + || parseInt(self.el.style.width, 10) * app.devicePixelRatio || 0 }, set: function (val) { width = val - this.el.style.width = (width/devicePixelRatio) + 'px' + this.el.style.width = (width/app.devicePixelRatio) + 'px' } }) Object.defineProperty(this, 'height', { get: function () { return height - || parseInt(self.el.style.height*devicePixelRatio, 10) + || parseInt(self.el.style.height, 10) * app.devicePixelRatio || 0 }, set: function (val) { height = val - this.el.style.height = (height/devicePixelRatio) + 'px' + this.el.style.height = (height/app.devicePixelRatio) + 'px' } }) } @@ -302,9 +302,9 @@ var MX = MX || (function (undefined) { + (-this.y).toFixed(floatPrecision) + 'px,' + (-this.z).toFixed(floatPrecision) + 'px) ' + 'scale3d(' - + (devicePixelRatio * this.scaleX).toFixed(floatPrecision) + ',' - + (devicePixelRatio * this.scaleY).toFixed(floatPrecision) + ',' - + (devicePixelRatio * this.scaleZ).toFixed(floatPrecision) + ') ' + + (app.devicePixelRatio * this.scaleX).toFixed(floatPrecision) + ',' + + (app.devicePixelRatio * this.scaleY).toFixed(floatPrecision) + ',' + + (app.devicePixelRatio * this.scaleZ).toFixed(floatPrecision) + ') ' if (rotationTranslation) { transformString += rotationTranslation.before diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index a149166..0ce2c5e 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -929,6 +929,9 @@ border-left: 1px solid black; .no-templates { display: none; } +.no-templates a { + border-bottom: 1px solid; +} .templates span { display: block; @@ -2373,6 +2376,7 @@ button { font-weight: 500; width: 100%; font-size:14px; + font-family:'Lato', sans-serif; } #builder-units { -- cgit v1.2.3-70-g09d2 From 29e0f23c5ade5072851aaa74314166b0c7281272 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 23 Jan 2015 19:28:53 -0500 Subject: stub subscription modal js --- .../javascripts/ui/site/EditSubscriptionModal.js | 21 ++++++++++ views/partials/edit-subscription.ejs | 45 +++++++++++++++------- 2 files changed, 53 insertions(+), 13 deletions(-) create mode 100644 public/assets/javascripts/ui/site/EditSubscriptionModal.js (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js new file mode 100644 index 0000000..1b3b859 --- /dev/null +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -0,0 +1,21 @@ + +var EditSubscriptionModal = ModalFormView.extend({ + el: ".mediaDrawer.editSubscription", + action: "/api/subscription", + method: "put", + + fixedClose: true, + + events: { + "click [data-role='changePasswordToggle']": 'togglePasswordFields' + }, + + load: function(){ + this.reset() + $.get("/api/subscription", function(data){ + + this.show() + }.bind(this)) + }, + +}) diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs index 0aa5281..1f8db62 100644 --- a/views/partials/edit-subscription.ejs +++ b/views/partials/edit-subscription.ejs @@ -7,24 +7,43 @@

  • Edit Subscription

    • -
  • - [[ if (! user.plan_level) { ]] +
    You are currently using the free plan. For access to all of Vvalls features, consider upgrading to a paid plan.

    View the Plans - [[ } else { ]] - Your current plan level is XXX - You have been a member since XXX - $cost/month OR $cost/year +

    +
    + Your current plan level is + + + + + + + + + + + + + + + + + + + + + + + + +
    Basic plan@ $/
    Additional basic layouts@ $/Buy more
    Additional PRO layouts$/Buy more
    Total$/
    + + - You are using N basic layouts - Buy more - - You are using N pro layouts - Buy more / Upgrade your account - - Cancel your subscription + [[ } ]]
    • -- cgit v1.2.3-70-g09d2 From 3059c3203d2cec4e2e745be8c21c6d3fbddb0c14 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Wed, 28 Jan 2015 01:39:28 -0500 Subject: rigging EditSubscriptionModal --- Gruntfile.js | 1 + config.json.example | 1 - public/assets/javascripts/ui/_router.js | 10 ++++++++++ server/index.js | 1 + server/lib/api/subscription.js | 19 ++++++++++++++++--- server/lib/webhook/webhook.js | 14 ++++++++++++++ views/about/brochure.ejs | 3 +++ views/partials/edit-subscription.ejs | 1 - views/partials/scripts.ejs | 1 + 9 files changed, 46 insertions(+), 5 deletions(-) (limited to 'public') diff --git a/Gruntfile.js b/Gruntfile.js index f62cc82..ed236c5 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -99,6 +99,7 @@ module.exports = function(grunt) { "public/assets/javascripts/ui/site/LayoutsModal.js", "public/assets/javascripts/ui/site/EditProjectModal.js", "public/assets/javascripts/ui/site/EditProfileModal.js", + "public/assets/javascripts/ui/site/EditSubscriptionModal.js", "public/assets/javascripts/ui/site/DocumentModal.js", "public/assets/javascripts/ui/site/HomeView.js", diff --git a/config.json.example b/config.json.example index b8c310c..dc79edd 100644 --- a/config.json.example +++ b/config.json.example @@ -5,6 +5,5 @@ "socketPort": 1337, "webhookPort": 5000, "databaseHost": "lvh.me", - "pageSize": 10, "env": { "development": 1 } } diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index 3532428..9e7ce75 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -9,6 +9,7 @@ var SiteRouter = Router.extend({ "click [data-role='new-project-modal']": 'newProject', "click [data-role='edit-project-modal']": 'editProject', "click [data-role='edit-profile-modal']": 'editProfile', + "click [data-role='edit-subscription-modal']": 'editSubscription', "click [data-role='new-document-modal']": 'newDocument', "click [data-role='edit-document-modal']": 'editDocument', "click [data-role='destroy-document-modal']": 'destroyDocument', @@ -29,6 +30,7 @@ var SiteRouter = Router.extend({ "/profile": 'profile', "/profile/edit": 'editProfile', + "/profile/billing": 'editSubscription', "/profile/:name": 'profile', "/about/:name/edit": 'editDocument', "/about/new": 'newDocument', @@ -56,6 +58,7 @@ var SiteRouter = Router.extend({ "/profile": 'profile', "/profile/edit": 'editProfile', + "/profile/billing": 'editSubscription', "/profile/:name": 'profile', "/project/:name": 'projectViewer', @@ -69,6 +72,7 @@ var SiteRouter = Router.extend({ this.newProjectModal = new NewProjectModal() this.editProjectModal = new EditProjectModal() this.editProfileModal = new EditProfileModal() + this.editSubscriptionModal = new EditSubscriptionModal() this.passwordForgotModal = new PasswordForgot() this.documentModal = new DocumentModal() this.profileView = new ProfileView() @@ -195,6 +199,12 @@ var SiteRouter = Router.extend({ this.editProfileModal.load() }, + editSubscription: function(e){ + e && e.preventDefault() + window.history.pushState(null, document.title, "/profile/billing") + + this.editSubscriptionModal.load() + }, newDocument: function(e){ diff --git a/server/index.js b/server/index.js index 02fea3c..475054d 100644 --- a/server/index.js +++ b/server/index.js @@ -102,6 +102,7 @@ site.route = function () { app.get('/profile', views.profile) app.get('/profile/edit', views.profile) + app.get('/profile/billing', views.profile) app.get('/profile/:username', views.profile) app.get('/about', views.docs); diff --git a/server/lib/api/subscription.js b/server/lib/api/subscription.js index bd19127..83644cf 100644 --- a/server/lib/api/subscription.js +++ b/server/lib/api/subscription.js @@ -18,16 +18,29 @@ var subscription = module.exports = { }) }, */ - show: function(req,res){ + middleware: { + fetchAccount: function(req, res, next){ + recurly.subscriptions.listByAccount(req.user._id, function(data){ + }) + }, + }, + + // synchronise an account with recurly.. + // useful when testing locally (if webhooks do not fire) + sync: function(req, res){ + // fetch req.user._id + }, + + show: function(req, res){ // fetch from recurly }, - update: function(req,res){ + update: function(req, res){ // update plan_type on recurly // update add_ons on recurly }, - destroy: function(req,res){ + destroy: function(req, res){ // destroy on recurly }, diff --git a/server/lib/webhook/webhook.js b/server/lib/webhook/webhook.js index e9a7925..4f23d0b 100644 --- a/server/lib/webhook/webhook.js +++ b/server/lib/webhook/webhook.js @@ -134,7 +134,21 @@ var subscribe = module.exports = { }); }, + list: function(req, res){ + recurly.subscriptions.listByAccount(req.params.id, function(data){ + if (data.data != 404) { + res.json(data) + return + } + else { + res.json(data) + return + } + }) + }, + route: function(app){ app.post('/subscribe/webhook', subscribe.handle); + app.get('/subscribe/list/:id', subscribe.list); }, } diff --git a/views/about/brochure.ejs b/views/about/brochure.ejs index 1c808f8..49b03db 100644 --- a/views/about/brochure.ejs +++ b/views/about/brochure.ejs @@ -123,6 +123,9 @@ text-align: center; margin-bottom: 10px; } +.about_plan ul { + margin-bottom: 60px; +} .planbox li { list-style-type: none; margin-bottom: 5px; diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs index 1f8db62..adc3f71 100644 --- a/views/partials/edit-subscription.ejs +++ b/views/partials/edit-subscription.ejs @@ -44,7 +44,6 @@ - [[ } ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index fc94992..04bd945 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -95,6 +95,7 @@ + -- cgit v1.2.3-70-g09d2 From 1d88890a988b255c915d0472297b18a2635f6433 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 30 Jan 2015 01:26:46 -0500 Subject: ui boilerplate --- .../javascripts/ui/site/EditSubscriptionModal.js | 40 ++++++++++++++++++++-- views/partials/edit-subscription.ejs | 28 +++++++-------- 2 files changed, 52 insertions(+), 16 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 1b3b859..342e8be 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -7,15 +7,51 @@ var EditSubscriptionModal = ModalFormView.extend({ fixedClose: true, events: { - "click [data-role='changePasswordToggle']": 'togglePasswordFields' + "click [data-role='']": 'togglePasswordFields' + }, + + initialize: function(){ + this.$freePlan = this.$("#free_plan") + this.$paidPlan = this.$("#paid_plan") + this.$proLayoutRow = this.$("#proLayoutRow") + + this.$billingInterval = this.$("[data-role=billingInterval]") + + this.$planType = this.$("[data-role=planType]") + this.$planName = this.$("[data-role=planName]") + this.$planCost = this.$("[data-role=planCost]") + + this.$basicLayoutCost = this.$("[data-role=basicLayoutCost]") + this.$basicLayoutQuantity = this.$("[data-role=basicLayoutQuantity]") + + this.$proLayoutCost = this.$("[data-role=proLayoutCost]") + this.$proLayoutQuantity = this.$("[data-role=proLayoutQuantity]") + + this.$upgradeSubscription = this.$("[data-role=upgradeSubscription]") + this.$cancelSubscription = this.$("[data-role=cancelSubscription]") }, load: function(){ this.reset() $.get("/api/subscription", function(data){ - + if (data.error) { + this.$freePlan.show() + this.$paidPlan.hide() + this.show() + return + } + this.$freePlan.show() + this.$paidPlan.hide() + + var plan = data.plans[ data.subscription.plan_name ] + this.show() + + // layouts }.bind(this)) }, + + updateTotals: function(){ + }, }) diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs index adc3f71..f49d791 100644 --- a/views/partials/edit-subscription.ejs +++ b/views/partials/edit-subscription.ejs @@ -13,37 +13,37 @@

    View the Plans

    -
    - Your current plan level is + -
    -

    [[- plans.free.name ]]

    -
      -
    • [[- plans.free.stock_project_limit ]] exhibition with pre-designed template floor plan -
    -
    - -
    -

    [[- plans.basic.name ]]

    -
      -
    • $[[- plans.basic.monthly_price ]]/mo or $[[- plans.basic.yearly_price ]]/year -
    • Comes with [[- plans.basic.basic_layout_limit ]] basic floor plan and [[- plans.basic.basic_project_limit ]] exhibitions -
    • Each new basic floor plan costs $[[- plans.basic.basic_layout_monthly_price ]]/mo - or $[[- plans.basic.basic_layout_yearly_price ]]/year, minimum 3 months -
    • Each new floor plan can have up to [[- plans.basic.basic_project_limit ]] exhibitions -
    • VValls logo appears when embedding an exhibition on a web page -
    • - [[ if (! logged_in) { ]] - - [[ } else if (! user.plan_level) { ]] - - [[ } else if (user.plan_level == plan.level) { ]] - Current Level - [[ } ]] -
    -
    - -
    -

    [[- plans.pro.name ]]

    -
      -
    • $[[- plans.pro.monthly_price ]]/mo or $[[- plans.pro.yearly_price ]]/year -
    • Comes with [[- plans.pro.pro_layout_limit ]] pro floor plan and [[- plans.pro.pro_project_limit ]] exhibitions -
    • Each new pro floor plan costs $[[- plans.pro.pro_layout_monthly_price ]]/mo - or $[[- plans.pro.pro_layout_yearly_price ]]/year, minimum 3 months -
    • Each new pro floor plan can have up to [[- plans.pro.pro_project_limit ]] exhibitions -
    • Includes planning for 3D objects in the room -
    • No VValls logo on embed -
    • - [[ if (! logged_in) { ]] - - [[ } else if (! user.plan_level) { ]] - - [[ } else if (user.plan_level == plan.level) { ]] - Current Level - [[ } else if (user.plan_level < plan.level) { ]] - - [[ } ]] -
    -
    - -
    -
      -
    • Buying any extra floor plan unlocks collaboration. Invite an artist or curator to work on the exhibition with you. -
    • Basic Floor plan: Rectangle-based design of any dimension. -
    • Pro Floor plan: Trace an arbitrary floor plan from image. -
    -
    - -
    -

    Want Something Custom?

    -
  • We offer customized white-label options for business and educational uses. -
  • Contact us for more information. -
    • + [[ include _plans ]]
    - [[ include ../partials/confirm-modal ]] [[ include ../projects/layouts-modal ]] [[ include ../partials/sign-in ]] @@ -91,51 +28,3 @@ [[ include ../partials/scripts ]] - \ No newline at end of file diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs index bb7cc27..2f6e4c1 100644 --- a/views/partials/edit-subscription.ejs +++ b/views/partials/edit-subscription.ejs @@ -7,15 +7,14 @@

  • Edit Subscription

    • -
    - You are currently using the free plan. For access to all of Vvalls features, +
  • + You are currently using the free version of Vvalls. For access to all of Vvalls features, consider upgrading to a paid plan. -

    - View the Plans -

    • - + +
    +

    [[- plans.basic.name ]]

    +
      +
    • $[[- plans.basic.monthly_price ]]/mo or $[[- plans.basic.yearly_price ]]/year +
    • Comes with [[- plans.basic.basic_layout_limit ]] basic floor plan and [[- plans.basic.basic_project_limit ]] exhibitions +
    • Each new basic floor plan costs $[[- plans.basic.basic_layout_monthly_price ]]/mo + or $[[- plans.basic.basic_layout_yearly_price ]]/year, minimum 3 months +
    • Each new floor plan can have up to [[- plans.basic.basic_project_limit ]] exhibitions +
    • VValls logo appears when embedding an exhibition on a web page +
    • + [[ if (! logged_in) { ]] + + [[ } else if (! user.plan_level) { ]] + + [[ } else if (user.plan_level == plan.level) { ]] + Current Level + [[ } ]] +
    +
    + +
    +

    [[- plans.pro.name ]]

    +
      +
    • $[[- plans.pro.monthly_price ]]/mo or $[[- plans.pro.yearly_price ]]/year +
    • Comes with [[- plans.pro.pro_layout_limit ]] pro floor plan and [[- plans.pro.pro_project_limit ]] exhibitions +
    • Each new pro floor plan costs $[[- plans.pro.pro_layout_monthly_price ]]/mo + or $[[- plans.pro.pro_layout_yearly_price ]]/year, minimum 3 months +
    • Each new pro floor plan can have up to [[- plans.pro.pro_project_limit ]] exhibitions +
    • Includes planning for 3D objects in the room +
    • No VValls logo on embed +
    • + [[ if (! logged_in) { ]] + + [[ } else if (! user.plan_level) { ]] + + [[ } else if (user.plan_level == plan.level) { ]] + Current Level + [[ } else if (user.plan_level < plan.level) { ]] + + [[ } ]] +
    +
    + +
    +
      +
    • Buying any extra floor plan unlocks collaboration.
      Invite an artist or curator to work on the exhibition with you. +
    • Basic Floor plan: Rectangle-based design of any dimension. +
    • Pro Floor plan: Trace an arbitrary floor plan from image. +
    +
    + +
    +

    Want Something Custom?

    +
  • We offer customized white-label options for business and educational uses. +
  • Contact us for more information. +
    • diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs index 2f6e4c1..cc296f6 100644 --- a/views/partials/edit-subscription.ejs +++ b/views/partials/edit-subscription.ejs @@ -1,19 +1,19 @@
    X
    -
    +

    • Edit Subscription

      • -
    • +
    • You are currently using the free version of Vvalls. For access to all of Vvalls features, consider upgrading to a paid plan.

      - +
      • -
    • Your current plan level is diff --git a/views/staff/_users.ejs b/views/staff/_users.ejs index 053e289..46811b6 100644 --- a/views/staff/_users.ejs +++ b/views/staff/_users.ejs @@ -12,7 +12,8 @@ - - @@ -44,7 +42,8 @@
      [view profile] - [recurly] + [view media] + [recurly] [[- user.last_seen ]] -- cgit v1.2.3-70-g09d2 From a3f3f4d370da5d38c039f6cdb36223b396eeeb77 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 30 Jan 2015 17:59:29 -0500 Subject: sync gear for test purposes --- .../javascripts/ui/site/EditSubscriptionModal.js | 20 +++++++++++++++----- public/assets/stylesheets/app.css | 14 ++++++++++++++ server/index.js | 2 +- server/lib/api/subscription.js | 4 +++- views/partials/edit-subscription.ejs | 2 ++ 5 files changed, 35 insertions(+), 7 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index e7e1fa5..1637e18 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -2,6 +2,7 @@ var EditSubscriptionModal = ModalFormView.extend({ el: ".mediaDrawer.editSubscription", action: "/api/subscription", + syncAction: "/api/subscription/sync", updateAction: "/api/subscription", destroyAction: "/api/subscription/destroy", @@ -11,6 +12,7 @@ var EditSubscriptionModal = ModalFormView.extend({ events: { "click [data-role='upgradeSubscription']": 'upgradeSubscription', "click [data-role='cancelSubscription']": 'cancelSubscription', + "click .gear": 'sync', }, initialize: function(){ @@ -41,6 +43,7 @@ var EditSubscriptionModal = ModalFormView.extend({ this.$upgradeSubscription = this.$("[data-role=upgradeSubscription]") this.$cancelSubscription = this.$("[data-role=cancelSubscription]") + this.$gear = this.$(".gear") }, plan_levels: { @@ -48,10 +51,6 @@ var EditSubscriptionModal = ModalFormView.extend({ basic: 1, pro: 2, }, - - sync: function(){ - $.put(this.syncAction, this.didLoad.bind(this)) - }, loaded: false, load: function(){ @@ -74,6 +73,7 @@ var EditSubscriptionModal = ModalFormView.extend({ show: function(){ + this.$gear.removeClass("turning") if (! this.subscriber) { this.$freePlan.show() this.$paidPlan.hide() @@ -88,7 +88,7 @@ var EditSubscriptionModal = ModalFormView.extend({ this.$paidPlan.show() this.updateTotals() - + this.__super__.show.call(this) }, @@ -127,6 +127,16 @@ var EditSubscriptionModal = ModalFormView.extend({ this.$planTotal.toDollars ( totals.plan_total ) }, + sync: function(){ + this.$gear.addClass("turning") + $.ajax({ + url: this.syncAction, + type: "put", + data: { _csrf: $("[name=_csrf]").val() }, + success: this.didLoad.bind(this) + }) + }, + update: function(){ $.ajax({ url: this.updateAction, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 8184032..981869b 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -979,6 +979,20 @@ iframe.embed { .about_custom a { border-bottom: 1px solid; } +.editSubscription .gear { + position: absolute; + top: 10px; + left: 10px; + opacity: 0.1; + cursor: pointer; + transition: all 0.3s; +} +.editSubscription .gear.turning { + opacity: 0.3; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); +} + /* LAYOUTS MODAL */ diff --git a/server/index.js b/server/index.js index fa7044b..5c14d9d 100644 --- a/server/index.js +++ b/server/index.js @@ -151,9 +151,9 @@ site.route = function () { app.post('/api/media/upload', middleware.ensureAuthenticated, api.media.upload) app.delete('/api/media/destroy', middleware.ensureAuthenticated, api.media.destroy) - app.get('/api/subscription/sync', middleware.ensureAuthenticated, api.subscription.middleware.ensureSubscription, api.subscription.sync) app.get('/api/subscription', middleware.ensureAuthenticated, api.subscription.middleware.ensurePlans, api.subscription.middleware.ensureSubscription, api.subscription.show) app.put('/api/subscription', middleware.ensureAuthenticated, api.subscription.middleware.ensureSubscription, api.subscription.update) + app.put('/api/subscription/sync', middleware.ensureAuthenticated, api.subscription.middleware.ensureSubscription, api.subscription.sync) app.delete('/api/subscription', middleware.ensureAuthenticated, api.subscription.middleware.ensureSubscription, api.subscription.destroy) app.get('/partials/plans', views.partials.plans) diff --git a/server/lib/api/subscription.js b/server/lib/api/subscription.js index 9c77dfc..4ec7709 100644 --- a/server/lib/api/subscription.js +++ b/server/lib/api/subscription.js @@ -8,7 +8,9 @@ var _ = require('lodash'), Project = require('../schemas/Project'), Layout = require('../schemas/Layout'), Plan = require('../schemas/Plan'); - Subscription = require('../schemas/Subscription'); + Subscription = require('../schemas/Subscription'), + Recurly = require('node-recurly'), + recurly = new Recurly(require('../webhook/recurly-config')); var plan_levels = { free: 0, diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs index cc296f6..cfd5728 100644 --- a/views/partials/edit-subscription.ejs +++ b/views/partials/edit-subscription.ejs @@ -12,6 +12,7 @@ consider upgrading to a paid plan.

      +


    • Your current plan level is @@ -43,6 +44,7 @@
      • +
      -- cgit v1.2.3-70-g09d2 From 682b96ebb7210858e26157d1367b75efde9119e2 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 30 Jan 2015 18:11:55 -0500 Subject: follow links in profile brochure --- public/assets/javascripts/ui/site/EditSubscriptionModal.js | 9 ++++++--- public/assets/stylesheets/app.css | 12 ++++++++++-- 2 files changed, 16 insertions(+), 5 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 1637e18..b38894d 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -1,5 +1,5 @@ -var EditSubscriptionModal = ModalFormView.extend({ +var EditSubscriptionModal = ModalView.extend({ el: ".mediaDrawer.editSubscription", action: "/api/subscription", syncAction: "/api/subscription/sync", @@ -13,6 +13,7 @@ var EditSubscriptionModal = ModalFormView.extend({ "click [data-role='upgradeSubscription']": 'upgradeSubscription', "click [data-role='cancelSubscription']": 'cancelSubscription', "click .gear": 'sync', + "click .planList button": 'followLink', }, initialize: function(){ @@ -54,7 +55,6 @@ var EditSubscriptionModal = ModalFormView.extend({ loaded: false, load: function(){ - this.reset() if (this.loaded) { return this.show() } $.get(this.action, this.didLoad.bind(this)) }, @@ -70,7 +70,10 @@ var EditSubscriptionModal = ModalFormView.extend({ } return this.show() }, - + followLink: function(e){ + e.preventDefault(); + window.location.href = $(e.target).closest("a").attr("href") + }, show: function(){ this.$gear.removeClass("turning") diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 981869b..4826aef 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -989,8 +989,16 @@ iframe.embed { } .editSubscription .gear.turning { opacity: 0.3; - -webkit-transform: rotate(360deg); - transform: rotate(360deg); + -webkit-animation: gear 1s; + animation: gear 1s; +} +@-webkit-keyframes gear { + from { transform: rotate(0deg); } + to { transform: rotate(720deg); } +} +@keyframes gear { + from { transform: rotate(0deg); } + to { transform: rotate(720deg); } } -- cgit v1.2.3-70-g09d2 From 9e8364dd574c02c8a5605c3b09c0230a5476f9b1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 30 Jan 2015 18:30:37 -0500 Subject: sync working --- public/assets/javascripts/ui/site/EditSubscriptionModal.js | 1 + server/index.js | 2 +- server/lib/api/subscription.js | 9 +++++---- 3 files changed, 7 insertions(+), 5 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index b38894d..28d699c 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -60,6 +60,7 @@ var EditSubscriptionModal = ModalView.extend({ }, didLoad: function(data){ this.loaded = true + console.log("didLoad", data) this.plans = data.plans if (data.subscription) { this.subscriber = data.subscription diff --git a/server/index.js b/server/index.js index 5c14d9d..9f28f59 100644 --- a/server/index.js +++ b/server/index.js @@ -153,7 +153,7 @@ site.route = function () { app.get('/api/subscription', middleware.ensureAuthenticated, api.subscription.middleware.ensurePlans, api.subscription.middleware.ensureSubscription, api.subscription.show) app.put('/api/subscription', middleware.ensureAuthenticated, api.subscription.middleware.ensureSubscription, api.subscription.update) - app.put('/api/subscription/sync', middleware.ensureAuthenticated, api.subscription.middleware.ensureSubscription, api.subscription.sync) + app.put('/api/subscription/sync', middleware.ensureAuthenticated, api.subscription.middleware.ensurePlans, api.subscription.middleware.ensureSubscription, api.subscription.sync) app.delete('/api/subscription', middleware.ensureAuthenticated, api.subscription.middleware.ensureSubscription, api.subscription.destroy) app.get('/partials/plans', views.partials.plans) diff --git a/server/lib/api/subscription.js b/server/lib/api/subscription.js index 4ec7709..0801204 100644 --- a/server/lib/api/subscription.js +++ b/server/lib/api/subscription.js @@ -41,8 +41,9 @@ var subscription = module.exports = { sync: function(req, res){ var subscriber = req.subscription || new Subscription () var user = req.user - recurly.subscriptions.listByAccount(req.user._id, function(data){ - if (data.description !== 200) { + recurly.subscriptions.listByAccount(req.user._id, function(recurlyRes){ + var data = recurlyRes.data + if (recurlyRes.description !== 200) { res.json({ error: "no account" }) return } @@ -87,8 +88,8 @@ var subscription = module.exports = { subscriber.save(function(){ user.save(function(){ - res.render({ - subscription: req.subscription, + res.json({ + subscription: subscriber, plans: res.locals.plans }) }) -- cgit v1.2.3-70-g09d2 From 18c81b8a5c8ac4b6d9cbc16e370fcc37e9138cd6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 30 Jan 2015 19:04:31 -0500 Subject: styling form --- .../javascripts/ui/site/EditSubscriptionModal.js | 4 ++-- public/assets/stylesheets/app.css | 27 ++++++++++++++++++++++ views/partials/edit-subscription.ejs | 27 ++++++++++++---------- 3 files changed, 44 insertions(+), 14 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 28d699c..0d54d8f 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -30,7 +30,7 @@ var EditSubscriptionModal = ModalView.extend({ this.$billingInterval = this.$("[data-role=billingInterval]") - this.$planType = this.$("[data-role=planType]") + this.$planName = this.$("[data-role=planName]") this.$planCost = this.$("[data-role=planCost]") this.$planTotal = this.$("[data-role=planTotal]") @@ -114,7 +114,7 @@ var EditSubscriptionModal = ModalView.extend({ var plan = this.plans[ this.plan_levels[ subscriber.plan_type ] ] var totals = this.calculateTotals(subscriber, plan) - this.$planType.html ( plan.name ) + this.$planName.html ( plan.name ) this.$planCost.toDollars ( totals.plan_price ) this.$billingInterval.html ( totals.is_monthly ? "mo." : "yr." ) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 4826aef..bedf2c4 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1000,6 +1000,33 @@ iframe.embed { from { transform: rotate(0deg); } to { transform: rotate(720deg); } } +.paidPlan { + text-align: left; + font-size: 14px; +} +.planInfo { + margin: 10px 0; + width: 100%; + padding: 0; +} +.planInfo td, .planInfo th { + text-align: left; + padding: 10px 3px; + margin: 0; +} +.planInfo td:nth-child(2), +.planInfo th:nth-child(2), +.planInfo td:nth-child(3), +.planInfo td:nth-child(4), +.planInfo th:nth-child(3) { + text-align: right; +} +.planInfo [data-role="billingInterval"] { + font-size: 10px; +} +.totalRow td:nth-child(4) { + border-top: 1px solid; +} /* LAYOUTS MODAL */ diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs index cfd5728..266d43b 100644 --- a/views/partials/edit-subscription.ejs +++ b/views/partials/edit-subscription.ejs @@ -16,29 +16,32 @@
    • Your current plan level is - +
      - + - + + - + - - + + - + - - + + + - - - + + + +
      @ $/$/
      Additional Basic layoutsAdditional Basic layouts @ $/$each $/$/ Buy more
      Additional Pro layoutsAdditional Pro layouts @ $/$@ $ ...$/Buy more
      Total$Total$/
      -- cgit v1.2.3-70-g09d2 From 6a9418a4256c04c327262947f0fee3b615c93029 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 30 Jan 2015 20:27:42 -0500 Subject: buttonz --- .../javascripts/ui/site/EditSubscriptionModal.js | 7 ++++--- public/assets/stylesheets/app.css | 23 ++++++++++++++++++++-- views/partials/edit-subscription.ejs | 5 ++--- 3 files changed, 27 insertions(+), 8 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 0d54d8f..6823740 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -10,7 +10,8 @@ var EditSubscriptionModal = ModalView.extend({ subscriber: null, events: { - "click [data-role='upgradeSubscription']": 'upgradeSubscription', + "click [data-role='addLayouts']": 'addLayouts', + "click [data-role='changePlan']": 'changePlan', "click [data-role='cancelSubscription']": 'cancelSubscription', "click .gear": 'sync', "click .planList button": 'followLink', @@ -141,11 +142,11 @@ var EditSubscriptionModal = ModalView.extend({ }) }, - update: function(){ + update: function(data){ $.ajax({ url: this.updateAction, type: "put", - data: { _csrf: this.$csrf.val() }, + data: { _csrf: $("[name=_csrf]").val() }, success: function(data){ } }) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index bedf2c4..2570bb2 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -985,12 +985,15 @@ iframe.embed { left: 10px; opacity: 0.1; cursor: pointer; + -webkit-transition: all 0.3s; + -webkit-transform-origin: 49% 53%; transition: all 0.3s; + transform-origin: 49% 53%; } .editSubscription .gear.turning { opacity: 0.3; - -webkit-animation: gear 1s; - animation: gear 1s; + -webkit-animation: gear 1s infinite linear; + animation: gear 1s infinite linear; } @-webkit-keyframes gear { from { transform: rotate(0deg); } @@ -1027,6 +1030,22 @@ iframe.embed { .totalRow td:nth-child(4) { border-top: 1px solid; } +.paidPlan button { + width: 200px; + float: none; + margin: 5px 7px; +} +.paidPlan [data-role="cancelSubscription"] { + color: red; + width: 200px; + float: none; +} +.paidPlan [data-role="cancelSubscription"]:hover { + color: white; + background: red; + border-color: red; +} + /* LAYOUTS MODAL */ diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs index 266d43b..8599fb5 100644 --- a/views/partials/edit-subscription.ejs +++ b/views/partials/edit-subscription.ejs @@ -28,14 +28,12 @@
      		• each $/ $/Buy more
      Additional Pro layouts @ $ ... $/Buy more
      $/
      - + +
      • -- cgit v1.2.3-70-g09d2 From d08c86d68ceb22665b735054fc3bc316f85f84c1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 31 Jan 2015 08:51:55 -0500 Subject: billing link in footer --- public/assets/javascripts/ui/site/EditSubscriptionModal.js | 12 ++++++++++-- server/lib/auth/index.js | 4 ++-- views/partials/footer.ejs | 6 ++++++ 3 files changed, 18 insertions(+), 4 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 6823740..82f6903 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -12,7 +12,7 @@ var EditSubscriptionModal = ModalView.extend({ events: { "click [data-role='addLayouts']": 'addLayouts', "click [data-role='changePlan']": 'changePlan', - "click [data-role='cancelSubscription']": 'cancelSubscription', + "click [data-role='cancelSubscription']": 'destroy', "click .gear": 'sync', "click .planList button": 'followLink', }, @@ -132,6 +132,13 @@ var EditSubscriptionModal = ModalView.extend({ this.$planTotal.toDollars ( totals.plan_total ) }, + addLayouts: function(e){ + e.preventDefault() + }, + changePlan: function(e){ + e.preventDefault() + }, + sync: function(){ this.$gear.addClass("turning") $.ajax({ @@ -152,7 +159,8 @@ var EditSubscriptionModal = ModalView.extend({ }) }, - destroy: function(){ + destroy: function(e){ + e.preventDefault() var msg = "Are you sure you want to cancel your subscription?" ConfirmModal.confirm(msg, function(){ $.ajax({ diff --git a/server/lib/auth/index.js b/server/lib/auth/index.js index a9a2400..199377d 100644 --- a/server/lib/auth/index.js +++ b/server/lib/auth/index.js @@ -135,12 +135,12 @@ var auth = { deserializeUser: function (id, done) { try { var _id = mongoose.Types.ObjectId(id) - User.findOne({ _id: _id }, "_id displayName username photo isStaff", function (err, user) { + User.findOne({ _id: _id }, "_id displayName username photo isStaff plan_level", function (err, user) { done(err, user); }); } catch (e) { - User.findOne({ twitter_id: id }, "_id displayName username photo isStaff", function (err, user) { + User.findOne({ twitter_id: id }, "_id displayName username photo isStaff plan_level", function (err, user) { done(err, user); }); } diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs index e3c572f..8a95fc4 100644 --- a/views/partials/footer.ejs +++ b/views/partials/footer.ejs @@ -15,6 +15,12 @@ About How To + + [[ if (logged_in && user.plan_level > 0) { ]] + Billing + [[ } else { ]] + Subscribe + [[ } ]] Terms Privacy Contact -- cgit v1.2.3-70-g09d2 From af230e59ec431c9b617b0caf94dc7c37bb5e81af Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 31 Jan 2015 09:16:27 -0500 Subject: handle cancelled subscription --- .../javascripts/ui/site/EditSubscriptionModal.js | 5 +- server/index.js | 2 +- server/lib/api/subscription.js | 78 +++++++++++++--------- server/lib/schemas/Subscription.js | 2 +- 4 files changed, 51 insertions(+), 36 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 82f6903..7dd527a 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -61,7 +61,6 @@ var EditSubscriptionModal = ModalView.extend({ }, didLoad: function(data){ this.loaded = true - console.log("didLoad", data) this.plans = data.plans if (data.subscription) { this.subscriber = data.subscription @@ -163,11 +162,13 @@ var EditSubscriptionModal = ModalView.extend({ e.preventDefault() var msg = "Are you sure you want to cancel your subscription?" ConfirmModal.confirm(msg, function(){ + this.__super__.show.call(this) $.ajax({ url: this.destroyAction, type: "delete", - data: { _csrf: this.$csrf.val() }, + data: { _csrf: $("[name=_csrf]").val() }, success: function(data){ + window.location.href = "/" } }) }.bind(this)) diff --git a/server/index.js b/server/index.js index 9f28f59..3572675 100644 --- a/server/index.js +++ b/server/index.js @@ -154,7 +154,7 @@ site.route = function () { app.get('/api/subscription', middleware.ensureAuthenticated, api.subscription.middleware.ensurePlans, api.subscription.middleware.ensureSubscription, api.subscription.show) app.put('/api/subscription', middleware.ensureAuthenticated, api.subscription.middleware.ensureSubscription, api.subscription.update) app.put('/api/subscription/sync', middleware.ensureAuthenticated, api.subscription.middleware.ensurePlans, api.subscription.middleware.ensureSubscription, api.subscription.sync) - app.delete('/api/subscription', middleware.ensureAuthenticated, api.subscription.middleware.ensureSubscription, api.subscription.destroy) + app.delete('/api/subscription/destroy', middleware.ensureAuthenticated, api.subscription.middleware.ensureSubscription, api.subscription.destroy) app.get('/partials/plans', views.partials.plans) diff --git a/server/lib/api/subscription.js b/server/lib/api/subscription.js index 0801204..285ce8b 100644 --- a/server/lib/api/subscription.js +++ b/server/lib/api/subscription.js @@ -51,40 +51,51 @@ var subscription = module.exports = { res.json({ error: "account error" }) return } + if (subscriber.state != "active") { + user.plan_type = "free" + user.plan_level = plan_levels["free"] - var plan = data.subscriptions.subscription.plan.plan_code.split("-") - var plan_type = plan[0] - var plan_period = plan[1] - - user.plan_type = plan_type - user.plan_level = plan_levels[plan_type] + return subscriber.remove(function(){ + user.save(function(){ + res.json({ error: "account cancelled" }) + }) + }) + } + else { + var plan = data.subscriptions.subscription.plan.plan_code.split("-") + var plan_type = plan[0] + var plan_period = plan[1] + + user.plan_type = plan_type + user.plan_level = plan_levels[plan_type] - subscriber.uuid = data.subscriptions.subscription.uuid - subscriber.user_id = user._id - subscriber.plan_type = plan_type - subscriber.plan_period = plan_period - subscriber.plan_level = plan_levels[plan_type] - - var add_ons = data.subscriptions.subscription.subscription_add_ons.subscription_add_on - if (add_ons) { - if (add_ons.add_on_code) { - add_ons = [ add_ons ] - } - // TODO: handle multiple add-ons.. presumably this will work - add_ons.forEach(function(add_on){ - var add_on_type = add_on.add_on_code.split("-")[1] - if (add_on_type == "basic") { - subscriber.basic_layouts = parseInt( add_on.quantity._ ) - } - if (add_on_type == "pro") { - subscriber.pro_layouts = parseInt( add_on.quantity._ ) - } - }) - } - else { - subscriber.basic_layouts = 0 - subscriber.pro_layouts = 0 - } + subscriber.uuid = data.subscriptions.subscription.uuid + subscriber.user_id = user._id + subscriber.plan_type = plan_type + subscriber.plan_period = plan_period + subscriber.plan_level = plan_levels[plan_type] + + var add_ons = data.subscriptions.subscription.subscription_add_ons.subscription_add_on + if (add_ons) { + if (add_ons.add_on_code) { + add_ons = [ add_ons ] + } + // TODO: handle multiple add-ons.. presumably this will work + add_ons.forEach(function(add_on){ + var add_on_type = add_on.add_on_code.split("-")[1] + if (add_on_type == "basic") { + subscriber.basic_layouts = parseInt( add_on.quantity._ ) + } + if (add_on_type == "pro") { + subscriber.pro_layouts = parseInt( add_on.quantity._ ) + } + }) + } + else { + subscriber.basic_layouts = 0 + subscriber.pro_layouts = 0 + } + } subscriber.save(function(){ user.save(function(){ @@ -156,6 +167,9 @@ var subscription = module.exports = { subscriber.remove(function(){ req.user.plan_code = 0 req.user.plan_type = "free" + req.user.save(function(){ + res.json({ status: "OK" }) + }) }) }) }, diff --git a/server/lib/schemas/Subscription.js b/server/lib/schemas/Subscription.js index 44455a9..355bbe2 100644 --- a/server/lib/schemas/Subscription.js +++ b/server/lib/schemas/Subscription.js @@ -12,7 +12,7 @@ var SubscriptionSchema = new mongoose.Schema({ plan_type: { type: String, default: "free" }, plan_period: { type: String, default: "monthly" }, - subscription_uuid: { type: String }, + uuid: { type: String }, basic_layouts: { type: Number, default: 0 }, pro_layouts: { type: Number, default: 0 }, -- cgit v1.2.3-70-g09d2 From 85728db4898e88592d9e89510bf121de91e59a6f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 31 Jan 2015 10:17:12 -0500 Subject: .. --- public/assets/javascripts/ui/site/EditSubscriptionModal.js | 5 ++--- server/lib/api/subscription.js | 1 - 2 files changed, 2 insertions(+), 4 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 7dd527a..0f72995 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -162,14 +162,13 @@ var EditSubscriptionModal = ModalView.extend({ e.preventDefault() var msg = "Are you sure you want to cancel your subscription?" ConfirmModal.confirm(msg, function(){ - this.__super__.show.call(this) $.ajax({ url: this.destroyAction, type: "delete", data: { _csrf: $("[name=_csrf]").val() }, success: function(data){ - window.location.href = "/" - } + this.didLoad(data) + }.bind(this) }) }.bind(this)) }, diff --git a/server/lib/api/subscription.js b/server/lib/api/subscription.js index b8853e6..3a8403f 100644 --- a/server/lib/api/subscription.js +++ b/server/lib/api/subscription.js @@ -55,7 +55,6 @@ var subscription = module.exports = { } return false }) - console.log(data.subscriptions) if (! is_active) { set_cancelled() } -- cgit v1.2.3-70-g09d2 From 4d0a9b9402b0ba1b5d50ba27106541e4e4dbe19f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 31 Jan 2015 15:29:37 -0500 Subject: css --- public/assets/stylesheets/app.css | 56 ++++++++++++++++++++++----------------- views/about/_plans.ejs | 2 +- 2 files changed, 33 insertions(+), 25 deletions(-) (limited to 'public') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 2570bb2..082a2d4 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -904,30 +904,6 @@ iframe.embed { /* PLANS BROCHURE */ /* nb these styles should be fixed for narrower screens/mobile layout */ -.planList { - position: absolute; - left: 50%; - transform: translateX(-48%); -} -.planList .about_custom { - width: 56vw; - margin: 1vw 4vw; -} -.planList .planbox { - padding: 0; -} -.mediaDrawer .planList h3 { - margin-top: 3px; - font-size: 21px; - font-weight: bold -} -.freePlan { - text-align: left; -} -.planList .planbox li:first-child { - font-size: 1.9vw; - padding: 0; -} .about_plan { width: 28vw; margin: 2vw; @@ -979,6 +955,38 @@ iframe.embed { .about_custom a { border-bottom: 1px solid; } + +/* Billing / Subscription Settings */ +.planList { + position: absolute; + left: 50%; + transform: translateX(-48%); +} +.planList .about_custom { + width: 56vw; + margin: 1vw 4vw; +} +.planList .planbox { + padding: 0; +} +.planList .custombox { + margin: 2vw 4vw 4vw 4vw; +} +.planList .miscbox { + line-height: 2.7vw; +} +.mediaDrawer .planList h3 { + margin-top: 3px; + font-size: 21px; + font-weight: bold +} +.freePlan { + text-align: left; +} +.planList .planbox li:first-child { + font-size: 1.9vw; + padding: 0; +} .editSubscription .gear { position: absolute; top: 10px; diff --git a/views/about/_plans.ejs b/views/about/_plans.ejs index 1536ac3..abd6aaa 100644 --- a/views/about/_plans.ejs +++ b/views/about/_plans.ejs @@ -56,7 +56,7 @@
    -
    +

    Want Something Custom?

  • We offer customized white-label options for business and educational uses.
  • Contact us for more information. -- cgit v1.2.3-70-g09d2 From ef52758ef0c27760a93ca861f1d17259dbc40fc4 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 31 Jan 2015 19:10:24 -0500 Subject: adding radio buttons etc --- .../javascripts/ui/site/EditSubscriptionModal.js | 31 +++++++++++++++++-- public/assets/stylesheets/app.css | 11 +++++-- server/index.js | 2 +- server/lib/api/subscription.js | 2 +- views/partials/edit-subscription.ejs | 35 +++++++++++++++++----- 5 files changed, 68 insertions(+), 13 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 0f72995..619bff8 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -35,6 +35,11 @@ var EditSubscriptionModal = ModalView.extend({ this.$planCost = this.$("[data-role=planCost]") this.$planTotal = this.$("[data-role=planTotal]") + this.$basicPlanName = this.$("[data-role=basicPlanName]") + this.$proPlanName = this.$("[data-role=proPlanName]") + this.$basicPlanCost = this.$("[data-role=basicPlanCost]") + this.$proPlanCost = this.$("[data-role=proPlanCost]") + this.$basicLayoutCost = this.$("[data-role=basicLayoutCost]") this.$basicLayoutQuantity = this.$("[data-role=basicLayoutQuantity]") this.$basicLayoutTotal = this.$("[data-role=basicLayoutTotal]") @@ -43,8 +48,24 @@ var EditSubscriptionModal = ModalView.extend({ this.$proLayoutQuantity = this.$("[data-role=proLayoutQuantity]") this.$proLayoutTotal = this.$("[data-role=proLayoutTotal]") + this.$showLayoutsMenu = this.$("[data-role=showLayoutsMenu]") + this.$showPlanMenu = this.$("[data-role=showPlanMenu]") + + this.$layoutsMenu = this.$("[data-role=layoutsMenu]") + this.$planMenu = this.$("[data-role=planMenu]") + this.$closeMenu = this.$("[data-role=closeMenu]") + + this.$buyLayouts = this.$("[data-role=buyLayouts]") + + this.$changePlan = this.$("[data-role=changePlan]") + + this.$basicLayoutInput = this.$("[data-role=basicLayoutInput]") + this.$proLayoutInput = this.$("[data-role=proLayoutInput]") + this.$planRadio = this.$("[name=planRadio]") + this.$upgradeSubscription = this.$("[data-role=upgradeSubscription]") this.$cancelSubscription = this.$("[data-role=cancelSubscription]") + this.$gear = this.$(".gear") }, @@ -100,7 +121,7 @@ var EditSubscriptionModal = ModalView.extend({ var t = {} t.is_pro = plan.name == "pro" t.is_monthly = subscriber.plan_period == "monthly" - t.plan_price = t.is_monthly ? plan.monthly_price : plan.yearly_price + t.plan_price = t.is_monthly ? plan.basic_layout_monthly_price : plan.yearly_price t.basic_layout_price = t.is_monthly ? plan.basic_layout_monthly_price : plan.basic_layout_yearly_price t.basic_layout_total = subscriber.basic_layouts * t.basic_layout_price t.pro_layout_price = t.is_monthly ? plan.pro_layout_monthly_price : plan.pro_layout_yearly_price @@ -113,12 +134,18 @@ var EditSubscriptionModal = ModalView.extend({ var subscriber = this.subscriber var plan = this.plans[ this.plan_levels[ subscriber.plan_type ] ] var totals = this.calculateTotals(subscriber, plan) + + this.$basicPlanName.html ( this.plans[1].name ) + this.$proPlanName.html ( this.plans[2].name ) + this.$basicPlanCost.toDollars ( totals.is_monthly ? this.plans[1].monthly_price : this.plans[2].yearly_price) + this.$proPlanCost.toDollars ( totals.is_monthly ? this.plans[2].monthly_price : this.plans[2].yearly_price) this.$planName.html ( plan.name ) this.$planCost.toDollars ( totals.plan_price ) this.$billingInterval.html ( totals.is_monthly ? "mo." : "yr." ) - this.$proLayoutRow.toggle ( totals.is_pro ) + this.$basicLayoutRow.toggle ( subscriber.basic_layouts > 0 ) + this.$proLayoutRow.toggle ( totals.is_pro && subscriber.pro_layouts > 0) this.$basicLayoutCost.toDollars ( totals.basic_layout_price ) this.$basicLayoutQuantity.html ( subscriber.basic_layouts ) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 082a2d4..4144b8b 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -987,6 +987,8 @@ iframe.embed { font-size: 1.9vw; padding: 0; } + +/* debug sync button */ .editSubscription .gear { position: absolute; top: 10px; @@ -1053,8 +1055,13 @@ iframe.embed { background: red; border-color: red; } - - +/* purchase mode */ +.paidPlan input[type=number] { display: none } +.paidPlan.editing input[type=number] { display: inline-block } +.paidPlan.editing input[type=number]+span { display: none } +form .paidPlan div { float: none; } +form .paidPlan label { float: none; font-size: 2vw; margin: 0 10px; } +.paidPlan .upgradeMenu div { padding: 5px 10px; } /* LAYOUTS MODAL */ diff --git a/server/index.js b/server/index.js index 3572675..8c8212f 100644 --- a/server/index.js +++ b/server/index.js @@ -72,7 +72,7 @@ site.setup = function(){ server = http.createServer(app) server.listen(app.get('port'), function () { - console.log('Vvalls server listening on port ' + app.get('port')); + console.log('VValls server listening on port ' + app.get('port')); }); // var io = websocket.listen(server) diff --git a/server/lib/api/subscription.js b/server/lib/api/subscription.js index 3a8403f..6f08e66 100644 --- a/server/lib/api/subscription.js +++ b/server/lib/api/subscription.js @@ -28,7 +28,7 @@ var subscription = module.exports = { }) }, ensurePlans: function(req, res, next){ - Plan.find({}).sort({ 'level': -1 }).exec(function (err, plans) { + Plan.find({}).sort({ 'level': 1 }).exec(function (err, plans) { res.locals.plans = (plans || []) next() }) diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs index 69ec88d..fcb4b94 100644 --- a/views/partials/edit-subscription.ejs +++ b/views/partials/edit-subscription.ejs @@ -8,13 +8,13 @@

    Edit Subscription

  • - You are currently using the free version of Vvalls. For access to all of Vvalls features, + You are currently using the free version of VValls. For access to all of VValls features, consider upgrading to a paid plan.




    • -
  • +
  • Your current plan level is @@ -25,13 +25,13 @@ - + - + @@ -42,9 +42,30 @@
    Additional Basic layouts each $/ $/
    Additional Pro layouts @ $ ... $/
    $/
    - - - +
    + + + +
    +
    + + +
    +
    +

    Select desired plan:

    +
    + + + $/ +
    +
    + + + $/ +
    + + +
    • -- cgit v1.2.3-70-g09d2 From a7be7295ae568bee76f18e3cf1228168b265db76 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 1 Feb 2015 14:32:25 -0500 Subject: setting up events --- .../javascripts/ui/site/EditSubscriptionModal.js | 44 ++++++++++++++++------ 1 file changed, 32 insertions(+), 12 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 619bff8..af3b99e 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -15,14 +15,30 @@ var EditSubscriptionModal = ModalView.extend({ "click [data-role='cancelSubscription']": 'destroy', "click .gear": 'sync', "click .planList button": 'followLink', + + "click [data-role=showLayoutsMenu]": "layoutsMode", + "click [data-role=showPlanMenu]": "planMode", + + "click [data-role=closeMenu]": "reset", + + "input [data-role=basicLayoutInput]": "updateQuantity", + "input [data-role=proLayoutInput]": "updateQuantity", + "click [data-role=buyLayouts]": "saveLayouts", + + "input [name=planRadio]": "updatePlan", + "click [data-role=changePlan]": "savePlan", }, initialize: function(){ // this.parent = opt.parent this.__super__.initialize.call(this) + // two sections this.$freePlan = this.$(".freePlan") this.$paidPlan = this.$(".paidPlan") + + // subscription table + this.$planInfo = this.$(".planInfo") this.$planRow = this.$(".planRow") this.$basicLayoutRow = this.$(".basicLayoutRow") this.$proLayoutRow = this.$(".proLayoutRow") @@ -31,15 +47,18 @@ var EditSubscriptionModal = ModalView.extend({ this.$billingInterval = this.$("[data-role=billingInterval]") + // plan stuff this.$planName = this.$("[data-role=planName]") this.$planCost = this.$("[data-role=planCost]") this.$planTotal = this.$("[data-role=planTotal]") this.$basicPlanName = this.$("[data-role=basicPlanName]") - this.$proPlanName = this.$("[data-role=proPlanName]") this.$basicPlanCost = this.$("[data-role=basicPlanCost]") + + this.$proPlanName = this.$("[data-role=proPlanName]") this.$proPlanCost = this.$("[data-role=proPlanCost]") + // basic + pro layout stuff this.$basicLayoutCost = this.$("[data-role=basicLayoutCost]") this.$basicLayoutQuantity = this.$("[data-role=basicLayoutQuantity]") this.$basicLayoutTotal = this.$("[data-role=basicLayoutTotal]") @@ -48,24 +67,24 @@ var EditSubscriptionModal = ModalView.extend({ this.$proLayoutQuantity = this.$("[data-role=proLayoutQuantity]") this.$proLayoutTotal = this.$("[data-role=proLayoutTotal]") + // menus.. main menu this.$showLayoutsMenu = this.$("[data-role=showLayoutsMenu]") this.$showPlanMenu = this.$("[data-role=showPlanMenu]") + this.$cancelSubscription = this.$("[data-role=cancelSubscription]") + // three submenus this.$layoutsMenu = this.$("[data-role=layoutsMenu]") this.$planMenu = this.$("[data-role=planMenu]") - this.$closeMenu = this.$("[data-role=closeMenu]") this.$buyLayouts = this.$("[data-role=buyLayouts]") - + this.$closeMenu = this.$("[data-role=closeMenu]") this.$changePlan = this.$("[data-role=changePlan]") + // input fields this.$basicLayoutInput = this.$("[data-role=basicLayoutInput]") this.$proLayoutInput = this.$("[data-role=proLayoutInput]") this.$planRadio = this.$("[name=planRadio]") - this.$upgradeSubscription = this.$("[data-role=upgradeSubscription]") - this.$cancelSubscription = this.$("[data-role=cancelSubscription]") - this.$gear = this.$(".gear") }, @@ -112,11 +131,15 @@ var EditSubscriptionModal = ModalView.extend({ this.$freePlan.hide() this.$paidPlan.show() - this.updateTotals() + this.reset() this.__super__.show.call(this) }, - + reset: function(){ + var subscriber = this.subscriber + var plan = this.plans[ this.plan_levels[ subscriber.plan_type ] ] + this.displayTotals(subscriber) + }, calculateTotals: function(subscriber, plan){ var t = {} t.is_pro = plan.name == "pro" @@ -129,10 +152,7 @@ var EditSubscriptionModal = ModalView.extend({ t.plan_total = t.plan_price + t.basic_layout_total + t.pro_layout_total return t }, - - updateTotals: function(){ - var subscriber = this.subscriber - var plan = this.plans[ this.plan_levels[ subscriber.plan_type ] ] + displayTotals: function(subscriber, plan){ var totals = this.calculateTotals(subscriber, plan) this.$basicPlanName.html ( this.plans[1].name ) -- cgit v1.2.3-70-g09d2 From 97e7312439b24bfdd255f6868e8b42c469b0b38e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 1 Feb 2015 14:49:10 -0500 Subject: basic ui --- .../javascripts/ui/site/EditSubscriptionModal.js | 60 ++++++++++++++++++++-- public/assets/stylesheets/app.css | 10 +++- views/partials/edit-subscription.ejs | 4 +- 3 files changed, 65 insertions(+), 9 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index af3b99e..539a8ae 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -8,6 +8,7 @@ var EditSubscriptionModal = ModalView.extend({ fixedClose: true, subscriber: null, + tempSubscriber: null, events: { "click [data-role='addLayouts']": 'addLayouts', @@ -19,16 +20,62 @@ var EditSubscriptionModal = ModalView.extend({ "click [data-role=showLayoutsMenu]": "layoutsMode", "click [data-role=showPlanMenu]": "planMode", - "click [data-role=closeMenu]": "reset", + "click [data-role=closeMenu]": "resetMode", "input [data-role=basicLayoutInput]": "updateQuantity", "input [data-role=proLayoutInput]": "updateQuantity", - "click [data-role=buyLayouts]": "saveLayouts", + "click [data-role=saveQuantity]": "saveQuantity", "input [name=planRadio]": "updatePlan", "click [data-role=changePlan]": "savePlan", }, - + + resetMode: function(e){ + e.preventDefault() + this.$paidPlan.removeClass("editLayouts editPlan") + this.reset() + }, + + layoutsMode: function(e){ + e.preventDefault() + this.$paidPlan.addClass("editLayouts") + this.tempSubscriber = defaults({}, this.subscriber) + this.$basicLayoutInput.val( this.subscriber.basic_layouts ) + this.$proLayoutInput.val( this.subscriber.pro_layouts ) + }, + updateQuantity: function(e){ + e.preventDefault() + this.tempSubscriber.basic_layouts = this.$proLayoutInput.int() + this.tempSubscriber.pro_layouts = this.$basicLayoutInput.int() + + var plan = this.getPlan( this.tempSubscriber.plan_type ) + this.displayTotals(this.tempSubscriber, plan) + }, + saveQuantity: function(e){ + e.preventDefault() + // blabla.. save + this.subscriber = this.tempSubscriber + this.resetMode() + }, + + planMode: function(e){ + e.preventDefault() + this.$paidPlan.addClass("editPlan") + this.$planRadio.val( this.subscriber.plan_type ) + this.tempSubscriber = defaults({}, this.subscriber) + }, + updatePlan: function(e){ + e.preventDefault() + var plan = this.getPlan( this.$("[name=planRadio]").val() ) + this.displayTotals(this.tempSubscriber, plan) + }, + savePlan: function(e){ + e.preventDefault() + this.subscriber.plan_type = this.$("[name=planRadio]").val() + this.subscriber = this.tempSubscriber + this.resetMode() + }, + initialize: function(){ // this.parent = opt.parent this.__super__.initialize.call(this) @@ -137,8 +184,11 @@ var EditSubscriptionModal = ModalView.extend({ }, reset: function(){ var subscriber = this.subscriber - var plan = this.plans[ this.plan_levels[ subscriber.plan_type ] ] - this.displayTotals(subscriber) + var plan = this.getPlan(subscriber.plan_type) + this.displayTotals(subscriber, plan) + }, + getPlan: function(plan_type){ + return this.plans[ this.plan_levels[ plan_type ] ] }, calculateTotals: function(subscriber, plan){ var t = {} diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 4144b8b..b3d380c 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1057,11 +1057,17 @@ iframe.embed { } /* purchase mode */ .paidPlan input[type=number] { display: none } -.paidPlan.editing input[type=number] { display: inline-block } -.paidPlan.editing input[type=number]+span { display: none } form .paidPlan div { float: none; } form .paidPlan label { float: none; font-size: 2vw; margin: 0 10px; } .paidPlan .upgradeMenu div { padding: 5px 10px; } +.paidPlan .layoutsMenu { display: none } +.paidPlan .planMenu { display: none } +.paidPlan.editLayouts .layoutsMenu { display: block } +.paidPlan.editLayouts .billingMenu { display: none } +.paidPlan.editLayouts input[type=number] { display: inline-block } +.paidPlan.editLayouts input[type=number]+span { display: none } +.paidPlan.editPlan .planMenu { display: block } +.paidPlan.editPlan .billingMenu { display: none } /* LAYOUTS MODAL */ diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs index fcb4b94..086f513 100644 --- a/views/partials/edit-subscription.ejs +++ b/views/partials/edit-subscription.ejs @@ -48,7 +48,7 @@
    - +
    @@ -63,7 +63,7 @@ $/
    - +
    -- cgit v1.2.3-70-g09d2 From bc843c0c65d9ff98dac35a72821f7e312dc7e62b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 1 Feb 2015 15:31:44 -0500 Subject: let confirmModal take two callbacks --- public/assets/javascripts/ui/lib/ConfirmModal.js | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/lib/ConfirmModal.js b/public/assets/javascripts/ui/lib/ConfirmModal.js index a72b31e..7d9da67 100644 --- a/public/assets/javascripts/ui/lib/ConfirmModal.js +++ b/public/assets/javascripts/ui/lib/ConfirmModal.js @@ -4,21 +4,31 @@ var ConfirmModal = new( ModalFormView.extend({ el: ".mediaDrawer.confirm", events: { - "click .yes": "advance", - "click .no": "hide", + "click .yes": "agree", + "click .no": "cancel", }, - confirm: function(question, callback){ + confirm: function(question, agreeCallback, cancelCallback){ this.$(".question").empty().append(question) - this.callback = callback + this.agreeCallback = agreeCallback + this.cancelCallback = cancelCallback this.show() }, - advance: function(e){ + agree: function(e){ e && e.preventDefault() this.hide() - this.callback && this.callback() - this.callback = null + this.agreeCallback && this.agreeCallback() + this.agreeCallback = null + this.cancelCallback = null + }, + + cancel: function(e){ + e && e.preventDefault() + this.hide() + this.cancelCallback && this.cancelCallback() + this.agreeCallback = null + this.cancelCallback = null } }) ) \ No newline at end of file -- cgit v1.2.3-70-g09d2 From fbf637f2210d281c8c6f41b72cf50746939a8ece Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 1 Feb 2015 15:32:01 -0500 Subject: edit layout counts --- .../javascripts/ui/site/EditSubscriptionModal.js | 24 +++++++++++++--------- public/assets/stylesheets/app.css | 13 ++++++++++-- views/partials/edit-subscription.ejs | 4 ++-- 3 files changed, 27 insertions(+), 14 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 539a8ae..fe93499 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -31,46 +31,50 @@ var EditSubscriptionModal = ModalView.extend({ }, resetMode: function(e){ - e.preventDefault() + e && e.preventDefault() this.$paidPlan.removeClass("editLayouts editPlan") this.reset() }, layoutsMode: function(e){ - e.preventDefault() + e && e.preventDefault() this.$paidPlan.addClass("editLayouts") this.tempSubscriber = defaults({}, this.subscriber) this.$basicLayoutInput.val( this.subscriber.basic_layouts ) this.$proLayoutInput.val( this.subscriber.pro_layouts ) + this.$basicLayoutRow.show() + this.$proLayoutRow.toggle(this.subscriber.plan_name == "pro") }, updateQuantity: function(e){ - e.preventDefault() - this.tempSubscriber.basic_layouts = this.$proLayoutInput.int() - this.tempSubscriber.pro_layouts = this.$basicLayoutInput.int() + e && e.preventDefault() + this.tempSubscriber.basic_layouts = this.$basicLayoutInput.int() + this.tempSubscriber.pro_layouts = this.$proLayoutInput.int() var plan = this.getPlan( this.tempSubscriber.plan_type ) this.displayTotals(this.tempSubscriber, plan) + this.$basicLayoutRow.show() + this.$proLayoutRow.toggle(plan.name == "pro") }, saveQuantity: function(e){ - e.preventDefault() + e && e.preventDefault() // blabla.. save this.subscriber = this.tempSubscriber this.resetMode() }, planMode: function(e){ - e.preventDefault() + e && e.preventDefault() this.$paidPlan.addClass("editPlan") this.$planRadio.val( this.subscriber.plan_type ) this.tempSubscriber = defaults({}, this.subscriber) }, updatePlan: function(e){ - e.preventDefault() + e && e.preventDefault() var plan = this.getPlan( this.$("[name=planRadio]").val() ) this.displayTotals(this.tempSubscriber, plan) }, savePlan: function(e){ - e.preventDefault() + e && e.preventDefault() this.subscriber.plan_type = this.$("[name=planRadio]").val() this.subscriber = this.tempSubscriber this.resetMode() @@ -178,7 +182,7 @@ var EditSubscriptionModal = ModalView.extend({ this.$freePlan.hide() this.$paidPlan.show() - this.reset() + this.resetMode() this.__super__.show.call(this) }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index b3d380c..b58bb01 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1027,6 +1027,10 @@ iframe.embed { padding: 10px 3px; margin: 0; } +.planInfo td { + height: 60px; + vertical-align: middle; +} .planInfo td:nth-child(2), .planInfo th:nth-child(2), .planInfo td:nth-child(3), @@ -1034,6 +1038,10 @@ iframe.embed { .planInfo th:nth-child(3) { text-align: right; } +.planInfo td:nth-child(4) { + width: 90px; +} + .planInfo [data-role="billingInterval"] { font-size: 10px; } @@ -1046,7 +1054,8 @@ iframe.embed { margin: 5px 7px; } .paidPlan [data-role="cancelSubscription"] { - color: red; + color: #800; + border-color: black; width: 200px; float: none; } @@ -1056,7 +1065,7 @@ iframe.embed { border-color: red; } /* purchase mode */ -.paidPlan input[type=number] { display: none } +.paidPlan input[type=number] { display: none; float: right; } form .paidPlan div { float: none; } form .paidPlan label { float: none; font-size: 2vw; margin: 0 10px; } .paidPlan .upgradeMenu div { padding: 5px 10px; } diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs index 086f513..19f6851 100644 --- a/views/partials/edit-subscription.ejs +++ b/views/partials/edit-subscription.ejs @@ -43,8 +43,8 @@
    - - +
    +
    -- cgit v1.2.3-70-g09d2 From 60aa806d65a90907c6a76cb017c167c8453260b3 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 1 Feb 2015 16:58:58 -0500 Subject: plan val from radio button --- .../javascripts/ui/site/EditSubscriptionModal.js | 110 ++++++++++----------- views/partials/edit-subscription.ejs | 4 +- 2 files changed, 56 insertions(+), 58 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index fe93499..b9abd75 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -26,60 +26,10 @@ var EditSubscriptionModal = ModalView.extend({ "input [data-role=proLayoutInput]": "updateQuantity", "click [data-role=saveQuantity]": "saveQuantity", - "input [name=planRadio]": "updatePlan", + "change [name=planRadio]": "updatePlan", "click [data-role=changePlan]": "savePlan", }, - resetMode: function(e){ - e && e.preventDefault() - this.$paidPlan.removeClass("editLayouts editPlan") - this.reset() - }, - - layoutsMode: function(e){ - e && e.preventDefault() - this.$paidPlan.addClass("editLayouts") - this.tempSubscriber = defaults({}, this.subscriber) - this.$basicLayoutInput.val( this.subscriber.basic_layouts ) - this.$proLayoutInput.val( this.subscriber.pro_layouts ) - this.$basicLayoutRow.show() - this.$proLayoutRow.toggle(this.subscriber.plan_name == "pro") - }, - updateQuantity: function(e){ - e && e.preventDefault() - this.tempSubscriber.basic_layouts = this.$basicLayoutInput.int() - this.tempSubscriber.pro_layouts = this.$proLayoutInput.int() - - var plan = this.getPlan( this.tempSubscriber.plan_type ) - this.displayTotals(this.tempSubscriber, plan) - this.$basicLayoutRow.show() - this.$proLayoutRow.toggle(plan.name == "pro") - }, - saveQuantity: function(e){ - e && e.preventDefault() - // blabla.. save - this.subscriber = this.tempSubscriber - this.resetMode() - }, - - planMode: function(e){ - e && e.preventDefault() - this.$paidPlan.addClass("editPlan") - this.$planRadio.val( this.subscriber.plan_type ) - this.tempSubscriber = defaults({}, this.subscriber) - }, - updatePlan: function(e){ - e && e.preventDefault() - var plan = this.getPlan( this.$("[name=planRadio]").val() ) - this.displayTotals(this.tempSubscriber, plan) - }, - savePlan: function(e){ - e && e.preventDefault() - this.subscriber.plan_type = this.$("[name=planRadio]").val() - this.subscriber = this.tempSubscriber - this.resetMode() - }, - initialize: function(){ // this.parent = opt.parent this.__super__.initialize.call(this) @@ -135,6 +85,8 @@ var EditSubscriptionModal = ModalView.extend({ this.$basicLayoutInput = this.$("[data-role=basicLayoutInput]") this.$proLayoutInput = this.$("[data-role=proLayoutInput]") this.$planRadio = this.$("[name=planRadio]") + this.$basicPlanInput = this.$("[data-role=basicPlanInput]") + this.$proPlanInput = this.$("[data-role=proPlanInput]") this.$gear = this.$(".gear") }, @@ -198,7 +150,7 @@ var EditSubscriptionModal = ModalView.extend({ var t = {} t.is_pro = plan.name == "pro" t.is_monthly = subscriber.plan_period == "monthly" - t.plan_price = t.is_monthly ? plan.basic_layout_monthly_price : plan.yearly_price + t.plan_price = t.is_monthly ? plan.monthly_price : plan.yearly_price t.basic_layout_price = t.is_monthly ? plan.basic_layout_monthly_price : plan.basic_layout_yearly_price t.basic_layout_total = subscriber.basic_layouts * t.basic_layout_price t.pro_layout_price = t.is_monthly ? plan.pro_layout_monthly_price : plan.pro_layout_yearly_price @@ -232,13 +184,59 @@ var EditSubscriptionModal = ModalView.extend({ this.$planTotal.toDollars ( totals.plan_total ) }, - addLayouts: function(e){ - e.preventDefault() + resetMode: function(e){ + e && e.preventDefault() + this.$paidPlan.removeClass("editLayouts editPlan") + this.reset() }, - changePlan: function(e){ - e.preventDefault() + + layoutsMode: function(e){ + e && e.preventDefault() + this.$paidPlan.addClass("editLayouts") + this.tempSubscriber = defaults({}, this.subscriber) + this.$basicLayoutInput.val( this.subscriber.basic_layouts ) + this.$proLayoutInput.val( this.subscriber.pro_layouts ) + this.$basicLayoutRow.show() + this.$proLayoutRow.toggle(this.subscriber.plan_name == "pro") + }, + updateQuantity: function(e){ + e && e.preventDefault() + var plan = this.getPlan( this.tempSubscriber.plan_type ) + this.tempSubscriber.basic_layouts = this.$basicLayoutInput.int() + this.tempSubscriber.pro_layouts = this.$proLayoutInput.int() + this.displayTotals(this.tempSubscriber, plan) + this.$basicLayoutRow.show() + this.$proLayoutRow.toggle(plan.name == "pro") + }, + saveQuantity: function(e){ + e && e.preventDefault() + this.subscriber = this.tempSubscriber + this.resetMode() + // blabla.. save }, + planMode: function(e){ + e && e.preventDefault() + this.$paidPlan.addClass("editPlan") + switch (this.subscriber.plan_type) { + case 'basic': this.$basicPlanInput.prop('checked', true); break; + case 'pro': this.$proPlanInput.prop('checked', true); break; + } + this.tempSubscriber = defaults({}, this.subscriber) + }, + updatePlan: function(e){ + e && e.preventDefault() + var plan_type = this.$("[name=planRadio]:checked").val() + var plan = this.getPlan( plan_type ) + this.displayTotals(this.tempSubscriber, plan) + }, + savePlan: function(e){ + e && e.preventDefault() + this.subscriber.plan_type = this.$("[name=planRadio]:checked").val() + this.subscriber = this.tempSubscriber + this.resetMode() + // blabla.. save + }, sync: function(){ this.$gear.addClass("turning") $.ajax({ diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs index 19f6851..e651187 100644 --- a/views/partials/edit-subscription.ejs +++ b/views/partials/edit-subscription.ejs @@ -54,12 +54,12 @@

    Select desired plan:

    - + $/
    - + $/
    -- cgit v1.2.3-70-g09d2 From 003f59d687d8d3d5e4e9c4a2eeb1bb167753d0c9 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 1 Feb 2015 18:22:28 -0500 Subject: check form input --- .../javascripts/ui/site/EditSubscriptionModal.js | 18 +++++++++++------- views/partials/edit-subscription.ejs | 6 +++--- 2 files changed, 14 insertions(+), 10 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index b9abd75..384460d 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -27,7 +27,9 @@ var EditSubscriptionModal = ModalView.extend({ "click [data-role=saveQuantity]": "saveQuantity", "change [name=planRadio]": "updatePlan", - "click [data-role=changePlan]": "savePlan", + "click [data-role=savePlan]": "savePlan", + + "submit form": "preventDefault", }, initialize: function(){ @@ -148,7 +150,7 @@ var EditSubscriptionModal = ModalView.extend({ }, calculateTotals: function(subscriber, plan){ var t = {} - t.is_pro = plan.name == "pro" + t.is_pro = subscriber.plan_type == "pro" t.is_monthly = subscriber.plan_period == "monthly" t.plan_price = t.is_monthly ? plan.monthly_price : plan.yearly_price t.basic_layout_price = t.is_monthly ? plan.basic_layout_monthly_price : plan.basic_layout_yearly_price @@ -197,16 +199,19 @@ var EditSubscriptionModal = ModalView.extend({ this.$basicLayoutInput.val( this.subscriber.basic_layouts ) this.$proLayoutInput.val( this.subscriber.pro_layouts ) this.$basicLayoutRow.show() - this.$proLayoutRow.toggle(this.subscriber.plan_name == "pro") + this.$proLayoutRow.toggle(this.subscriber.plan_type == "pro") }, updateQuantity: function(e){ e && e.preventDefault() var plan = this.getPlan( this.tempSubscriber.plan_type ) - this.tempSubscriber.basic_layouts = this.$basicLayoutInput.int() - this.tempSubscriber.pro_layouts = this.$proLayoutInput.int() + this.tempSubscriber.basic_layouts = clamp( this.$basicLayoutInput.int() || 0, 0, 100) + this.tempSubscriber.pro_layouts = clamp( this.$proLayoutInput.int() || 0, 0, 100) + + this.$basicLayoutInput.val(this.tempSubscriber.basic_layouts) + this.$proLayoutInput.val(this.tempSubscriber.pro_layouts) this.displayTotals(this.tempSubscriber, plan) this.$basicLayoutRow.show() - this.$proLayoutRow.toggle(plan.name == "pro") + this.$proLayoutRow.toggle(this.tempSubscriber.plan_type == "pro") }, saveQuantity: function(e){ e && e.preventDefault() @@ -233,7 +238,6 @@ var EditSubscriptionModal = ModalView.extend({ savePlan: function(e){ e && e.preventDefault() this.subscriber.plan_type = this.$("[name=planRadio]:checked").val() - this.subscriber = this.tempSubscriber this.resetMode() // blabla.. save }, diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs index e651187..1b0fc41 100644 --- a/views/partials/edit-subscription.ejs +++ b/views/partials/edit-subscription.ejs @@ -32,7 +32,7 @@ Additional Pro layouts - @ $ ... + each $/ $/ @@ -43,12 +43,12 @@
    -
    +

    - +
    -- cgit v1.2.3-70-g09d2 From 3f0ef2173b6d00ae8130b3125b63f3d9ad9e98de Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 1 Feb 2015 18:48:08 -0500 Subject: make it 1 action --- .../javascripts/ui/site/EditSubscriptionModal.js | 57 ++++++++++------------ public/assets/stylesheets/app.css | 14 +++--- views/partials/edit-subscription.ejs | 43 ++++++++-------- 3 files changed, 56 insertions(+), 58 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 384460d..6e5dc9e 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -7,6 +7,7 @@ var EditSubscriptionModal = ModalView.extend({ destroyAction: "/api/subscription/destroy", fixedClose: true, + editing: false, subscriber: null, tempSubscriber: null, @@ -17,14 +18,13 @@ var EditSubscriptionModal = ModalView.extend({ "click .gear": 'sync', "click .planList button": 'followLink', - "click [data-role=showLayoutsMenu]": "layoutsMode", - "click [data-role=showPlanMenu]": "planMode", + "click [data-role=showEditMenu]": "editMode", "click [data-role=closeMenu]": "resetMode", "input [data-role=basicLayoutInput]": "updateQuantity", "input [data-role=proLayoutInput]": "updateQuantity", - "click [data-role=saveQuantity]": "saveQuantity", + "click [data-role=saveChanges]": "saveChanges", "change [name=planRadio]": "updatePlan", "click [data-role=savePlan]": "savePlan", @@ -186,21 +186,28 @@ var EditSubscriptionModal = ModalView.extend({ this.$planTotal.toDollars ( totals.plan_total ) }, - resetMode: function(e){ - e && e.preventDefault() - this.$paidPlan.removeClass("editLayouts editPlan") - this.reset() - }, - - layoutsMode: function(e){ + editMode: function(e){ e && e.preventDefault() - this.$paidPlan.addClass("editLayouts") + + this.editing = true + this.$el.addClass("editing") this.tempSubscriber = defaults({}, this.subscriber) this.$basicLayoutInput.val( this.subscriber.basic_layouts ) this.$proLayoutInput.val( this.subscriber.pro_layouts ) this.$basicLayoutRow.show() this.$proLayoutRow.toggle(this.subscriber.plan_type == "pro") + switch (this.subscriber.plan_type) { + case 'basic': this.$basicPlanInput.prop('checked', true); break; + case 'pro': this.$proPlanInput.prop('checked', true); break; + } }, + resetMode: function(e){ + e && e.preventDefault() + this.editing = false + this.$el.removeClass("editing") + this.reset() + }, + updateQuantity: function(e){ e && e.preventDefault() var plan = this.getPlan( this.tempSubscriber.plan_type ) @@ -213,34 +220,24 @@ var EditSubscriptionModal = ModalView.extend({ this.$basicLayoutRow.show() this.$proLayoutRow.toggle(this.tempSubscriber.plan_type == "pro") }, - saveQuantity: function(e){ + saveChanges: function(e){ e && e.preventDefault() + if (this.tempSubscriber.plan_type != this.subscriber.plan_type + || this.tempSubscriber.basic_layouts != this.subscriber.basic_layouts + || this.tempSubscriber.pro_layouts != this.subscriber.pro_layouts) { + // update plan_type + } this.subscriber = this.tempSubscriber this.resetMode() // blabla.. save }, - planMode: function(e){ - e && e.preventDefault() - this.$paidPlan.addClass("editPlan") - switch (this.subscriber.plan_type) { - case 'basic': this.$basicPlanInput.prop('checked', true); break; - case 'pro': this.$proPlanInput.prop('checked', true); break; - } - this.tempSubscriber = defaults({}, this.subscriber) - }, updatePlan: function(e){ e && e.preventDefault() - var plan_type = this.$("[name=planRadio]:checked").val() - var plan = this.getPlan( plan_type ) - this.displayTotals(this.tempSubscriber, plan) - }, - savePlan: function(e){ - e && e.preventDefault() - this.subscriber.plan_type = this.$("[name=planRadio]:checked").val() - this.resetMode() - // blabla.. save + this.tempSubscriber.plan_type = this.$("[name=planRadio]:checked").val() + this.updateQuantity() }, + sync: function(){ this.$gear.addClass("turning") $.ajax({ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index b58bb01..ffb133d 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1071,12 +1071,14 @@ form .paidPlan label { float: none; font-size: 2vw; margin: 0 10px; } .paidPlan .upgradeMenu div { padding: 5px 10px; } .paidPlan .layoutsMenu { display: none } .paidPlan .planMenu { display: none } -.paidPlan.editLayouts .layoutsMenu { display: block } -.paidPlan.editLayouts .billingMenu { display: none } -.paidPlan.editLayouts input[type=number] { display: inline-block } -.paidPlan.editLayouts input[type=number]+span { display: none } -.paidPlan.editPlan .planMenu { display: block } -.paidPlan.editPlan .billingMenu { display: none } + +.editing .section_break { display: none } +.editing .paidPlan .currentPlanLevel { display: none } +.editing .paidPlan .billingMenu { display: none } +.editing .paidPlan .layoutsMenu { display: block } +.editing .paidPlan .planMenu { display: block } +.editing .paidPlan input[type=number] { display: inline-block } +.editing .paidPlan input[type=number]+span { display: none } /* LAYOUTS MODAL */ diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs index 1b0fc41..38c6dfc 100644 --- a/views/partials/edit-subscription.ejs +++ b/views/partials/edit-subscription.ejs @@ -14,8 +14,23 @@



    -
  • - Your current plan level is +
  • +
    + Your current plan level is +
    +
    +

    Select desired plan:

    +
    + + + $/ +
    +
    + + + $/ +
    +
    @@ -24,13 +39,13 @@ - + - + @@ -43,27 +58,11 @@
    $/
    Additional Basic layoutsBasic layouts each $/ $/
    Additional Pro layoutsPro layouts each $/ $/
    -
    -
    +
    - - -
    -
    -

    Select desired plan:

    -
    - - - $/ -
    -
    - - - $/ -
    - +
    • -- cgit v1.2.3-70-g09d2 From 9e40939c50cf098e88f7d66f85bd925fcc9d01e4 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 1 Feb 2015 18:52:32 -0500 Subject: space for blabitybla text --- public/assets/javascripts/ui/site/EditSubscriptionModal.js | 8 +++++--- public/assets/stylesheets/app.css | 5 +++-- views/partials/edit-subscription.ejs | 7 ++++++- 3 files changed, 14 insertions(+), 6 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 6e5dc9e..cd3d1bb 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -71,12 +71,11 @@ var EditSubscriptionModal = ModalView.extend({ this.$proLayoutTotal = this.$("[data-role=proLayoutTotal]") // menus.. main menu - this.$showLayoutsMenu = this.$("[data-role=showLayoutsMenu]") - this.$showPlanMenu = this.$("[data-role=showPlanMenu]") + this.$showEditMenu = this.$("[data-role=showEditMenu]") this.$cancelSubscription = this.$("[data-role=cancelSubscription]") // three submenus - this.$layoutsMenu = this.$("[data-role=layoutsMenu]") + this.$editMenu = this.$("[data-role=editMenu]") this.$planMenu = this.$("[data-role=planMenu]") this.$buyLayouts = this.$("[data-role=buyLayouts]") @@ -270,6 +269,9 @@ var EditSubscriptionModal = ModalView.extend({ this.didLoad(data) }.bind(this) }) + }.bind(this), + function(){ + this.show() }.bind(this)) }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index ffb133d..7c49ed1 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1069,17 +1069,18 @@ iframe.embed { form .paidPlan div { float: none; } form .paidPlan label { float: none; font-size: 2vw; margin: 0 10px; } .paidPlan .upgradeMenu div { padding: 5px 10px; } -.paidPlan .layoutsMenu { display: none } +.paidPlan .editMenu { display: none } .paidPlan .planMenu { display: none } .editing .section_break { display: none } .editing .paidPlan .currentPlanLevel { display: none } .editing .paidPlan .billingMenu { display: none } -.editing .paidPlan .layoutsMenu { display: block } +.editing .paidPlan .editMenu { display: block } .editing .paidPlan .planMenu { display: block } .editing .paidPlan input[type=number] { display: inline-block } .editing .paidPlan input[type=number]+span { display: none } +.editMenu .fineprint { font-size: 12px; width: auto; text-align: justify; } /* LAYOUTS MODAL */ .templates { diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs index 38c6dfc..f3c3589 100644 --- a/views/partials/edit-subscription.ejs +++ b/views/partials/edit-subscription.ejs @@ -61,7 +61,12 @@
    -
    +
    +
    + Your credit card will be charged the difference of XXXX for this month. + Your subscription will renew at XXXX at the start of your next billing cycle. + We thank you for your support! +
    -- cgit v1.2.3-70-g09d2 From 7a23f57b1ef3e9ceca414d909aa15a7d5ea6d536 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 1 Feb 2015 20:46:42 -0500 Subject: hitting update api --- .../javascripts/ui/site/EditSubscriptionModal.js | 25 ++++++++++++++++------ server/lib/api/subscription.js | 20 ++++++++--------- 2 files changed, 28 insertions(+), 17 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index cd3d1bb..3bc1a24 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -221,14 +221,21 @@ var EditSubscriptionModal = ModalView.extend({ }, saveChanges: function(e){ e && e.preventDefault() - if (this.tempSubscriber.plan_type != this.subscriber.plan_type - || this.tempSubscriber.basic_layouts != this.subscriber.basic_layouts - || this.tempSubscriber.pro_layouts != this.subscriber.pro_layouts) { - // update plan_type + var is_changed = false + var diff = {} + "plan_type basic_layouts pro_layouts".split(" ").forEach(function(field){ + if (this.tempSubscriber[field] != this.subscriber[field]) { + diff[field] = this.tempSubscriber[field] + is_changed = true + } + }.bind(this)) + + if (is_changed) { + diff.plan_type = this.tempSubscriber.plan_type + this.update(diff) } this.subscriber = this.tempSubscriber this.resetMode() - // blabla.. save }, updatePlan: function(e){ @@ -248,12 +255,16 @@ var EditSubscriptionModal = ModalView.extend({ }, update: function(data){ + data['_csrf'] = $("[name=_csrf]").val() + this.$gear.addClass("turning") $.ajax({ url: this.updateAction, type: "put", - data: { _csrf: $("[name=_csrf]").val() }, + data: data, success: function(data){ - } + console.log("SUCCESS") + this.$gear.removeClass("turning") + }.bind(this) }) }, diff --git a/server/lib/api/subscription.js b/server/lib/api/subscription.js index 6f08e66..362d633 100644 --- a/server/lib/api/subscription.js +++ b/server/lib/api/subscription.js @@ -138,26 +138,26 @@ var subscription = module.exports = { } var subscriber = req.subscription - // change.. - // data.plan_code - // data.subscription_add_ons = [] - // add_on.add_on_code - // add_on.quantity - var basic_layouts = max(0, parseInt(req.body.basic_layouts)) - var pro_layouts = max(0, parseInt(req.body.pro_layouts)) + var plan_type = req.body.plan_type + var basic_layouts = Math.max(0, parseInt(req.body.basic_layouts, 10)) + var pro_layouts = Math.max(0, parseInt(req.body.pro_layouts, 10)) var data = {} - data.plan_code = req.body.plan_type + "_monthly" + data.plan_code = plan_type + "_monthly" data.subscription_add_ons = [] - if (plan_levels[req.body.plan_type]) { + if (plan_levels[plan_type] > 0) { data.subscription_add_ons.push({ add_on_code: "extra-basic-layout", quantity: basic_layouts }) } - if (req.body.plan_type == "pro") { + if (plan_type == "pro") { data.subscription_add_ons.push({ add_on_code: "extra-pro-layout", quantity: pro_layouts }) } + // data.plan_code + // data.subscription_add_ons = [] + // add_on.add_on_code + // add_on.quantity recurly.subscriptions.update(subscriber.uuid, data, function(){ return res.json(subscriber) }) -- cgit v1.2.3-70-g09d2 From a5c5fa85c85fc31bebae1917ceeac4f8e1e383d5 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 1 Feb 2015 22:02:52 -0500 Subject: talking to recurly --- package.json | 2 +- .../javascripts/ui/site/EditSubscriptionModal.js | 1 - server/lib/api/subscription.js | 32 ++++++++++++++++++---- 3 files changed, 27 insertions(+), 8 deletions(-) (limited to 'public') diff --git a/package.json b/package.json index e89fcd9..56ffcdf 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "mongoose-unique-validator": "~0.3.0", "monk": "~0.7.1", "multer": "~0.1.0", - "node-recurly": "^2.1.0", + "node-recurly": "julescarbon/node-recurly", "node-restful": "~0.1.14", "passport": "~0.2.0", "passport-facebook": "~1.0.3", diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 3bc1a24..55ff3b5 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -262,7 +262,6 @@ var EditSubscriptionModal = ModalView.extend({ type: "put", data: data, success: function(data){ - console.log("SUCCESS") this.$gear.removeClass("turning") }.bind(this) }) diff --git a/server/lib/api/subscription.js b/server/lib/api/subscription.js index 362d633..7e9221a 100644 --- a/server/lib/api/subscription.js +++ b/server/lib/api/subscription.js @@ -137,13 +137,20 @@ var subscription = module.exports = { return res.json({ error: "bad input" }) } var subscriber = req.subscription + var user = req.user var plan_type = req.body.plan_type - var basic_layouts = Math.max(0, parseInt(req.body.basic_layouts, 10)) - var pro_layouts = Math.max(0, parseInt(req.body.pro_layouts, 10)) + var basic_layouts = Math.max(0, parseInt(req.body.basic_layouts || 0, 10)) + var pro_layouts = Math.max(0, parseInt(req.body.pro_layouts || 0, 10)) + + if (plan_type == subscription.plan_type + && basic_layouts == subscriber.basic_layouts + && pro_layouts == subscriber.pro_layouts) { + return res.json(subscriber) + } var data = {} - data.plan_code = plan_type + "_monthly" + data.plan_code = plan_type + "-monthly" data.subscription_add_ons = [] if (plan_levels[plan_type] > 0) { @@ -158,8 +165,21 @@ var subscription = module.exports = { // data.subscription_add_ons = [] // add_on.add_on_code // add_on.quantity - recurly.subscriptions.update(subscriber.uuid, data, function(){ - return res.json(subscriber) + recurly.subscriptions.update(subscriber.uuid, data, function(err, data){ + if (err) { + console.log("error updating recurly subscription", err) + return res.json({ error: err }) + } + subscriber.plan_type = plan_type + subscriber.basic_layouts = basic_layouts + subscriber.pro_layouts = pro_layouts + subscriber.save(function(){ + user.plan_level = plan_levels[plan_type] + user.plan_type = plan_type + user.save(function(){ + return res.json(subscriber) + }) + }) }) }, @@ -169,7 +189,7 @@ var subscription = module.exports = { } var subscriber = req.subscription - recurly.subscriptions.terminate(subscriber.uuid, "partial", function(){ + recurly.subscriptions.terminate(subscriber.uuid, "partial", function(err, data){ subscriber.remove(function(){ req.user.plan_code = 0 req.user.plan_type = "free" -- cgit v1.2.3-70-g09d2 From e7ecd5b141945a9c9ca7a57df643eaa3f3fdc3d6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 2 Feb 2015 09:43:06 -0500 Subject: double checking all plan changes.. need to pass full plan info to update --- public/assets/javascripts/ui/site/EditSubscriptionModal.js | 3 +-- server/lib/api/subscription.js | 10 ++++++---- views/staff/_nav.ejs | 2 +- 3 files changed, 8 insertions(+), 7 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 55ff3b5..c276354 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -224,14 +224,13 @@ var EditSubscriptionModal = ModalView.extend({ var is_changed = false var diff = {} "plan_type basic_layouts pro_layouts".split(" ").forEach(function(field){ + diff[field] = this.tempSubscriber[field] if (this.tempSubscriber[field] != this.subscriber[field]) { - diff[field] = this.tempSubscriber[field] is_changed = true } }.bind(this)) if (is_changed) { - diff.plan_type = this.tempSubscriber.plan_type this.update(diff) } this.subscriber = this.tempSubscriber diff --git a/server/lib/api/subscription.js b/server/lib/api/subscription.js index 7e9221a..9c2d6ef 100644 --- a/server/lib/api/subscription.js +++ b/server/lib/api/subscription.js @@ -142,6 +142,7 @@ var subscription = module.exports = { var plan_type = req.body.plan_type var basic_layouts = Math.max(0, parseInt(req.body.basic_layouts || 0, 10)) var pro_layouts = Math.max(0, parseInt(req.body.pro_layouts || 0, 10)) + if (plan_type != "pro") { pro_layouts = 0 } if (plan_type == subscription.plan_type && basic_layouts == subscriber.basic_layouts @@ -149,15 +150,14 @@ var subscription = module.exports = { return res.json(subscriber) } - var data = {} + var data = { subscription_add_ons: [] } data.plan_code = plan_type + "-monthly" - data.subscription_add_ons = [] - if (plan_levels[plan_type] > 0) { + if (plan_levels[plan_type] > 0 && basic_layouts > 0) { data.subscription_add_ons.push({ add_on_code: "extra-basic-layout", quantity: basic_layouts }) } - if (plan_type == "pro") { + if (plan_type == "pro" && pro_layouts > 0) { data.subscription_add_ons.push({ add_on_code: "extra-pro-layout", quantity: pro_layouts }) } @@ -165,7 +165,9 @@ var subscription = module.exports = { // data.subscription_add_ons = [] // add_on.add_on_code // add_on.quantity + console.log(data) recurly.subscriptions.update(subscriber.uuid, data, function(err, data){ + console.log("got response from RECURLY ...") if (err) { console.log("error updating recurly subscription", err) return res.json({ error: err }) diff --git a/views/staff/_nav.ejs b/views/staff/_nav.ejs index e79ff69..a607638 100644 --- a/views/staff/_nav.ejs +++ b/views/staff/_nav.ejs @@ -4,5 +4,5 @@ projects media plans - subscriptions + \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 95b7043c7bf259da3135652461f80162be432691 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 2 Feb 2015 10:43:46 -0500 Subject: spacing --- config.json.example | 12 ++++++------ public/assets/stylesheets/app.css | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) (limited to 'public') diff --git a/config.json.example b/config.json.example index dc79edd..7072d48 100644 --- a/config.json.example +++ b/config.json.example @@ -1,9 +1,9 @@ { - "host": "lvh.me:3000", - "hostName": "lvh.me", - "port": 3000, - "socketPort": 1337, - "webhookPort": 5000, + "host": "lvh.me:3000", + "hostName": "lvh.me", + "port": 3000, + "socketPort": 1337, + "webhookPort": 5000, "databaseHost": "lvh.me", - "env": { "development": 1 } + "env": { "development": 1 } } diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 7c49ed1..0a7e24a 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1067,7 +1067,7 @@ iframe.embed { /* purchase mode */ .paidPlan input[type=number] { display: none; float: right; } form .paidPlan div { float: none; } -form .paidPlan label { float: none; font-size: 2vw; margin: 0 10px; } +form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } .paidPlan .upgradeMenu div { padding: 5px 10px; } .paidPlan .editMenu { display: none } .paidPlan .planMenu { display: none } -- cgit v1.2.3-70-g09d2 From 4b6ba728390f3c16c48392beef5cb0b58cbf1763 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 2 Feb 2015 13:57:13 -0500 Subject: null sub --- public/assets/javascripts/ui/site/EditSubscriptionModal.js | 1 + 1 file changed, 1 insertion(+) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index c276354..3a20234 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -275,6 +275,7 @@ var EditSubscriptionModal = ModalView.extend({ type: "delete", data: { _csrf: $("[name=_csrf]").val() }, success: function(data){ + this.subscriber = null this.didLoad(data) }.bind(this) }) -- cgit v1.2.3-70-g09d2 From 6a4e4d30d5428fd0e629081d6a214e9a618ab52f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 2 Feb 2015 14:05:24 -0500 Subject: css a bit --- public/assets/stylesheets/app.css | 3 +++ 1 file changed, 3 insertions(+) (limited to 'public') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 0a7e24a..b23b50b 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -942,6 +942,9 @@ iframe.embed { list-style-type: none; margin-bottom: 0; font-size: 1.3vw; + padding: 0 1vw; +} +.paidPlan .planbox li { padding: 0 5.6vw; } .about_custom.planbox li { -- cgit v1.2.3-70-g09d2 From ca838d172cbd7fca1f2cba3bb1f095821710920a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 2 Feb 2015 17:53:16 -0500 Subject: userlist sort --- public/assets/stylesheets/staff.css | 14 ++++++++++++++ server/lib/views/staff.js | 4 +++- views/staff/_users.ejs | 13 +++++++++++++ views/staff/users/show.ejs | 31 ++++++++++++++++++++++++++++--- 4 files changed, 58 insertions(+), 4 deletions(-) (limited to 'public') diff --git a/public/assets/stylesheets/staff.css b/public/assets/stylesheets/staff.css index fffadbf..d93e46e 100644 --- a/public/assets/stylesheets/staff.css +++ b/public/assets/stylesheets/staff.css @@ -30,6 +30,15 @@ nav { nav a { margin-left: 10px; } +nav.subnav { + background: white; + padding: 10px; + font-weight: 200; + font-size: 12px; +} +.alphabet a { + margin-left: 5px; +} hr { border: 1px solid #bbb; margin: 10px auto 10px; @@ -62,8 +71,13 @@ hr { user-select: none; } .staff { + background: white; font-size: 15px; } +.staff hr { + border: 1px solid black; + border-top: 0; +} .staff .body a { border-bottom: 1px dotted; } diff --git a/server/lib/views/staff.js b/server/lib/views/staff.js index c3ecc97..b772859 100644 --- a/server/lib/views/staff.js +++ b/server/lib/views/staff.js @@ -368,8 +368,10 @@ var staff = module.exports = { helpers: { user: function(user){ + var last_seen = moment( user.last_seen || user.updated_at || user.created_at ) user = user.toObject() - user.last_seen = moment( user.last_seen || user.updated_at || user.created_at ).fromNow() + user.last_seen = last_seen.format("YYYY/MM/DD HH:MM") + " " + last_seen.fromNow() + user.last_charged = user.last_charged && moment( user.last_charged ).format("YYYY/MM/DD HH:MM") user.created_ip = util.num2ip( user.created_ip ) user.last_ip = util.num2ip( user.last_ip ) return user diff --git a/views/staff/_users.ejs b/views/staff/_users.ejs index 46811b6..1af47aa 100644 --- a/views/staff/_users.ejs +++ b/views/staff/_users.ejs @@ -1,9 +1,22 @@ + + [[ users.forEach(function(user){ ]] + diff --git a/views/staff/users/show.ejs b/views/staff/users/show.ejs index d6a21d5..e441109 100644 --- a/views/staff/users/show.ejs +++ b/views/staff/users/show.ejs @@ -17,13 +17,38 @@ [[- profile.displayName ]]
    		+ [[- user.plan_type ]] + [[- user.last_charged ]] + [[- user.username ]] - [view profile] - [view media] - [view on recurly] + [profile] + [media] + [[ if (profile.subscription) { ]] + [recurly] + [[ } ]]
    + + [[ if (profile.subscription) { ]] +

    Subscription

    + + + + + + + + + +
    + plan + + [[- profile.plan_type ]] +
    + last charged + + [[- profile.last_charged ]] +
    + [[ } ]] +

    Profile

    -- cgit v1.2.3-70-g09d2 From 1169b347c1f339b64f30466004a3f9a06ef7e117 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 2 Feb 2015 18:16:09 -0500 Subject: find users by initial --- public/assets/stylesheets/staff.css | 8 ++++++++ server/lib/views/staff.js | 12 ++++++++++++ views/staff/_users.ejs | 10 ++++++++-- 3 files changed, 28 insertions(+), 2 deletions(-) (limited to 'public') diff --git a/public/assets/stylesheets/staff.css b/public/assets/stylesheets/staff.css index d93e46e..ebc240a 100644 --- a/public/assets/stylesheets/staff.css +++ b/public/assets/stylesheets/staff.css @@ -39,6 +39,14 @@ nav.subnav { .alphabet a { margin-left: 5px; } +.body .error { + color: #f00; + border: 1px solid #f00; + margin: 20px 5px 200px 5px; + padding: 10px; + width: 400px; + display: inline-block; +} hr { border: 1px solid #bbb; margin: 10px auto 10px; diff --git a/server/lib/views/staff.js b/server/lib/views/staff.js index b772859..07050f1 100644 --- a/server/lib/views/staff.js +++ b/server/lib/views/staff.js @@ -38,6 +38,7 @@ var staff = module.exports = { var criteria = req.criteria || {} var limit = paginationInfo.limit = Math.min( Number(req.query.limit) || 50, 200 ) var offset = paginationInfo.offset = Number(req.query.offset) || 0 + var initial = util.sanitize(req.query.initial) var sort paginationInfo.sort = req.query.sort paginationInfo.sortOptions = ["date", "last_seen", "username"] @@ -54,6 +55,9 @@ var staff = module.exports = { paginationInfo.sort = "username" break } + if (initial) { + criteria.username = new RegExp('^' + initial, "i") + } User.find(criteria) .select(staff.fields.user) .sort(sort) @@ -61,6 +65,14 @@ var staff = module.exports = { .limit(limit) .exec(function (err, users) { res.locals.users = users.map(staff.helpers.user) + if (! res.locals.users.length) { + if (initial) { + res.locals.opt.error = "No users found starting with " + initial.toUpperCase() + "" + } + else { + res.locals.opt.error = "No users found" + } + } next() }) }, diff --git a/views/staff/_users.ejs b/views/staff/_users.ejs index 1af47aa..9caf893 100644 --- a/views/staff/_users.ejs +++ b/views/staff/_users.ejs @@ -1,12 +1,18 @@ +[[ if (! users.length || opt.error) { ]] +
    + [[- opt.error ]] +
    +[[ } ]] +
    [[ users.forEach(function(user){ ]] -- cgit v1.2.3-70-g09d2 From d67ead4ebbe27dc66d89927ff3ab91662fabdae4 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 3 Feb 2015 13:25:23 -0500 Subject: fix tests --- public/assets/javascripts/app.js | 2 -- public/assets/javascripts/mx/mx.js | 16 ++++++++-------- public/assets/javascripts/vendor/polyfill.js | 3 ++- public/assets/test/intersect2.html | 5 +++-- public/assets/test/intersect3.html | 5 +++-- public/assets/test/surface.html | 2 +- 6 files changed, 17 insertions(+), 16 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index a146325..6ff062e 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -23,8 +23,6 @@ app.launch = function () { var movements - app.devicePixelRatio = is_mobile ? devicePixelRatio : 1 - scene = new MX.Scene().addTo('#scene') scene.width = window.innerWidth scene.height = window.innerHeight diff --git a/public/assets/javascripts/mx/mx.js b/public/assets/javascripts/mx/mx.js index ab9a9a0..60651eb 100644 --- a/public/assets/javascripts/mx/mx.js +++ b/public/assets/javascripts/mx/mx.js @@ -25,7 +25,7 @@ var MX = MX || (function (undefined) { var MX = { version: '0.1.0', prefix: undefined, - rotationUnit: 'rad' + rotationUnit: 'rad', } var floatPrecision = 5 @@ -162,24 +162,24 @@ var MX = MX || (function (undefined) { Object.defineProperty(this, 'width', { get: function () { return width - || parseInt(self.el.style.width, 10) * app.devicePixelRatio + || parseInt(self.el.style.width, 10) * app_devicePixelRatio || 0 }, set: function (val) { width = val - this.el.style.width = (width/app.devicePixelRatio) + 'px' + this.el.style.width = (width/app_devicePixelRatio) + 'px' } }) Object.defineProperty(this, 'height', { get: function () { return height - || parseInt(self.el.style.height, 10) * app.devicePixelRatio + || parseInt(self.el.style.height, 10) * app_devicePixelRatio || 0 }, set: function (val) { height = val - this.el.style.height = (height/app.devicePixelRatio) + 'px' + this.el.style.height = (height/app_devicePixelRatio) + 'px' } }) } @@ -302,9 +302,9 @@ var MX = MX || (function (undefined) { + (-this.y).toFixed(floatPrecision) + 'px,' + (-this.z).toFixed(floatPrecision) + 'px) ' + 'scale3d(' - + (app.devicePixelRatio * this.scaleX).toFixed(floatPrecision) + ',' - + (app.devicePixelRatio * this.scaleY).toFixed(floatPrecision) + ',' - + (app.devicePixelRatio * this.scaleZ).toFixed(floatPrecision) + ') ' + + (app_devicePixelRatio * this.scaleX).toFixed(floatPrecision) + ',' + + (app_devicePixelRatio * this.scaleY).toFixed(floatPrecision) + ',' + + (app_devicePixelRatio * this.scaleZ).toFixed(floatPrecision) + ') ' if (rotationTranslation) { transformString += rotationTranslation.before diff --git a/public/assets/javascripts/vendor/polyfill.js b/public/assets/javascripts/vendor/polyfill.js index 499cbc5..2139618 100644 --- a/public/assets/javascripts/vendor/polyfill.js +++ b/public/assets/javascripts/vendor/polyfill.js @@ -48,7 +48,7 @@ function has3d(){ } else if ( browser.webkit ) { browser.safari = true; } - $.browser = browser; + if (window.$) $.browser = browser; return browser; })( navigator.userAgent ); @@ -58,6 +58,7 @@ var is_ipad = (navigator.userAgent.match(/iPad/i)) var is_android = (navigator.userAgent.match(/Android/i)) var is_mobile = is_iphone || is_ipad || is_android var is_desktop = ! is_mobile; +var app_devicePixelRatio = is_mobile ? devicePixelRatio : 1; // rAF shim diff --git a/public/assets/test/intersect2.html b/public/assets/test/intersect2.html index 3df9f30..9a6deb2 100644 --- a/public/assets/test/intersect2.html +++ b/public/assets/test/intersect2.html @@ -6,9 +6,10 @@ body,html{margin:0;padding:0;}
    - - + + + diff --git a/public/assets/test/intersect3.html b/public/assets/test/intersect3.html index 5440a76..0db85f0 100644 --- a/public/assets/test/intersect3.html +++ b/public/assets/test/intersect3.html @@ -6,9 +6,10 @@ body,html{margin:0;padding:0;}
    - - + + + diff --git a/public/assets/test/surface.html b/public/assets/test/surface.html index 85e3a7b..02be479 100644 --- a/public/assets/test/surface.html +++ b/public/assets/test/surface.html @@ -1,7 +1,7 @@ - + -- cgit v1.2.3-70-g09d2 From 7da20303ba24f40366e94586b45efd2f04734338 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 3 Feb 2015 13:45:31 -0500 Subject: hidpi canvas polyfill --- bower.json | 3 ++- public/assets/test/bg.html | 1 + public/assets/test/intersect.html | 5 +++-- public/assets/test/intersect2.html | 7 ++++--- public/assets/test/intersect3.html | 7 ++++--- public/assets/test/surface.html | 5 +++-- 6 files changed, 17 insertions(+), 11 deletions(-) (limited to 'public') diff --git a/bower.json b/bower.json index 5f35d6c..c78310d 100644 --- a/bower.json +++ b/bower.json @@ -9,6 +9,7 @@ "fiber": "", "jquery-jsonview": "1.2.0", "prefixfree": "", - "marked": "0.3.2" + "marked": "0.3.2", + "hidpi-canvas": "~1.0.9" } } diff --git a/public/assets/test/bg.html b/public/assets/test/bg.html index fecf811..65dd5d9 100644 --- a/public/assets/test/bg.html +++ b/public/assets/test/bg.html @@ -5,6 +5,7 @@
    + diff --git a/public/assets/test/intersect.html b/public/assets/test/intersect.html index 4e5b0bb..92f1d5d 100644 --- a/public/assets/test/intersect.html +++ b/public/assets/test/intersect.html @@ -2,6 +2,7 @@
    + @@ -10,11 +11,11 @@ + @@ -30,12 +31,12 @@ body,html{margin:0;padding:0;} + @@ -30,12 +31,12 @@ body,html{margin:0;padding:0;} + @@ -9,11 +10,11 @@ - + diff --git a/views/controls/editor/color-control.ejs b/views/controls/editor/color-control.ejs index c035e24..bcc955d 100644 --- a/views/controls/editor/color-control.ejs +++ b/views/controls/editor/color-control.ejs @@ -1,4 +1,4 @@ -
    +

    Edit Room Colors

    diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index a58eca1..011644b 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -5,6 +5,7 @@ + -- cgit v1.2.3-70-g09d2 From 220320494c60c154e84c579f86d2dfdd8f41be2f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 3 Feb 2015 17:41:36 -0500 Subject: orthographic polyline --- .../javascripts/rectangles/engine/map/_map.js | 8 + .../javascripts/rectangles/engine/map/draw.js | 19 +- .../assets/javascripts/rectangles/models/vec2.js | 5 + public/assets/test/ortho.html | 224 +++++++++++++++++++++ 4 files changed, 251 insertions(+), 5 deletions(-) create mode 100644 public/assets/test/ortho.html (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 202803a..d582982 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -48,6 +48,13 @@ var Map = function(opt){ base.el.appendChild(canvas) switch (opt.type) { + case "ortho": + base.draw = new Map.Draw (base, { ortho: true }) + base.ui = new Map.UI.Ortho (base) + base.sides = base.sides_for_camera + $(window).resize(base.resize) + break + case "editor": base.draw = new Map.Draw (base) base.ui = new Map.UI.Editor (base) @@ -65,6 +72,7 @@ var Map = function(opt){ base.resize = function(){ canvas.width = base.dimensions.a = window.innerWidth canvas.height = base.dimensions.b = window.innerHeight + // resize here - esp if 2d-hires } base.toggle = function(state){ diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 5a9b592..b525696 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -5,14 +5,16 @@ Map.Draw = function(map, opt){ var draw = this - var ctx = map.canvas.getContext("2d") + var ctx = draw.ctx = map.canvas.getContext("2d") draw.animate = function(){ ctx.save() draw.clear() draw.fill("rgba(255,255,255,0.98)") - if (opt.minimap) { + if (opt.ortho) { + } + else if (opt.minimap) { ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) ctx.scale( map.zoom, map.zoom ) ctx.translate( opt.center.x, - opt.center.z ) @@ -22,7 +24,6 @@ Map.Draw = function(map, opt){ draw.regions(Rooms.regions, [ "#fff" ], "#000") draw.camera(scene.camera) } - else { ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) ctx.scale( map.zoom, map.zoom ) @@ -31,12 +32,19 @@ Map.Draw = function(map, opt){ draw.regions(Rooms.regions, [ "#f8f8f8" ], "#000") draw.mouse(map.ui.mouse.cursor) + draw.mouse_dimensions(map.ui.mouse.cursor) draw.coords() scene && draw.camera(scene.camera) } ctx.restore() } + draw.translate = function(){ + ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) + ctx.scale( map.zoom, map.zoom ) + ctx.translate( map.center.a, map.center.b ) + ctx.scale( -1, 1 ) + } // changes the ctx temporarily draw.render = function(){ @@ -87,7 +95,7 @@ Map.Draw = function(map, opt){ ctx.putImageData(pixelData, 0, 0) // reset the ctx - ctx = map.canvas.getContext("2d") + ctx = draw.ctx return canvas } @@ -123,7 +131,8 @@ Map.Draw = function(map, opt){ ctx.beginPath(); ctx.arc(mouse.x.b, mouse.y.b, radius, 0, 2*Math.PI, false); ctx.fill(); - + } + draw.mouse_dimensions = function(mouse){ if (mouse.width() != 0 && mouse.height() != 0) { if (map.ui.dragging) { stroke_rect(mouse) diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js index 14d0e6b..290e45e 100644 --- a/public/assets/javascripts/rectangles/models/vec2.js +++ b/public/assets/javascripts/rectangles/models/vec2.js @@ -80,6 +80,11 @@ this.a = Math.round(this.a) this.b = Math.round(this.b) } + vec2.prototype.distanceTo = function(v){ + var va = (this.a - v.a) + var vb = (this.b - v.b) + return Math.sqrt( va*va + vb*vb ) + } vec2.prototype.setPosition = function(n){ var len = this.length() this.a = n diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html new file mode 100644 index 0000000..8626453 --- /dev/null +++ b/public/assets/test/ortho.html @@ -0,0 +1,224 @@ + + +
    +
    + +
    + + + + + + + + + + + + + + + + + + \ No newline at end of file -- cgit v1.2.3-70-g09d2 From ab6f7d9f205f740c3af4d7f083af436cc038d5b4 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 3 Feb 2015 18:16:29 -0500 Subject: mx on the other side --- public/assets/test/ortho.html | 165 +++++++++++++++++------------------------- 1 file changed, 66 insertions(+), 99 deletions(-) (limited to 'public') diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index 8626453..e7ec113 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -39,12 +39,6 @@ body { \ No newline at end of file -- cgit v1.2.3-70-g09d2 From eb1f73bd8be4ba8909ec5c7cd83c37269fbff31b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 07:55:32 -0500 Subject: basic orbit camera --- public/assets/test/ortho.html | 55 +++++++++++++++++++++++++++++++++++++++---- 1 file changed, 50 insertions(+), 5 deletions(-) (limited to 'public') diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index e7ec113..bd94a51 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -14,6 +14,9 @@ body { left:50%; top:0px } +#hud { + white-space: pre; +}
    @@ -90,10 +93,46 @@ Map.UI.Ortho = function(map){ new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) } }) - +} +MX.OrbitCamera = function(opt){ + var exports = {}, bound = false + exports.opt = opt = defaults(opt, { + el: window, // object to bind events on + camera: scene.camera, // camera object we'll be moving + radius: 100, + radiusRange: [ 10, 1000 ], + rotationX: 0, + rotationY: 0, + center: { x: 0, y: 0, z: 0 }, + }) + exports.init = function(){ + exports.bind() + } + exports.toggle = function(state){ + if (state) exports.bind() + else exports.unbind() + } + exports.bind = function(){ + if (bound) return; + bound = true + } + exports.unbind = function(){ + if (! bound) return; + bound = false + } + exports.update = function(){ + opt.camera.x = opt.radius * sin(opt.rotationY) * cos(opt.rotationX) + opt.camera.y = opt.radius * sin(opt.rotationY) * sin(opt.rotationX) + opt.camera.z = opt.radius * cos(opt.rotationY) + opt.camera.rotationX = opt.rotationX + opt.camera.rotationY = PI-opt.rotationY + hud.innerHTML = opt.camera.toString() + } + + return exports } -var scene, map +var scene, map, controls map = new Map ({ type: "ortho", @@ -135,8 +174,8 @@ function add_mx_point (p) { x: p.a, y: 0, z: p.b, - width: 5, - height: 5, + width: 1, + height: 1, }) mx.el.style.backgroundColor = "#f80" mx.el.style.backfaceVisibility = "visible" @@ -169,13 +208,18 @@ function build_circle () { } scene.update() + + controls = new MX.OrbitCamera() + controls.init() + console.log("ready..perhaps") - animate() + animate(0) } function animate(time){ requestAnimationFrame(animate) map.update(time) + controls.update() scene.update() map.draw.ctx.save() @@ -183,6 +227,7 @@ function animate(time){ map.draw.coords() map.draw.mouse(map.ui.mouse.cursor) + map.draw.camera(scene.camera) polyline() map.draw.ctx.restore() -- cgit v1.2.3-70-g09d2 From 4c7cad2ebfc44244ba845c1574271e48b9f2b740 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 13:30:39 -0500 Subject: orbit camera --- .../javascripts/mx/extensions/mx.orbitCamera.js | 80 ++++++++++++ public/assets/javascripts/rectangles/util/mouse.js | 8 ++ public/assets/test/orbit.html | 140 +++++++++++++++++++++ public/assets/test/ortho.html | 50 ++------ 4 files changed, 235 insertions(+), 43 deletions(-) create mode 100644 public/assets/javascripts/mx/extensions/mx.orbitCamera.js create mode 100644 public/assets/test/orbit.html (limited to 'public') diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js new file mode 100644 index 0000000..b3dcc43 --- /dev/null +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -0,0 +1,80 @@ +MX.OrbitCamera = function(opt){ + var exports = {}, bound = false + exports.opt = opt = defaults(opt, { + el: window, // object to bind events on + camera: scene.camera, // camera object we'll be moving + radius: 100, + radiusRange: [ 10, 1000 ], + rotationX: PI/2, + rotationY: 0, + center: { x: 0, y: 0, z: 0 }, + sensitivity: 10, // moving 1 pixel is like moving N radians + ease: 10, + }) + var rx, ry, px, py, epsilon = 1e-10, dragging = false + exports.init = function(){ + ry = opt.rotationY + rx = opt.rotationX + exports.bind() + } + exports.toggle = function(state){ + if (state) exports.bind() + else exports.unbind() + } + exports.bind = function(){ + if (bound) return; + bound = true + opt.el.addEventListener("mousedown", down) + opt.el.addEventListener("mousemove", move) + opt.el.addEventListener("mouseup", up) + } + exports.unbind = function(){ + if (! bound) return; + bound = false + opt.el.removeEventListener("mousedown", down) + opt.el.removeEventListener("mousemove", move) + opt.el.removeEventListener("mouseup", up) + } + function down (e) { + px = e.pageX + py = e.pageY + dragging = true + } + function move (e) { + if (! dragging) return + exports.delta(px- e.pageX, py - e.pageY) + px = e.pageX + py = e.pageY + } + function up (e) { + dragging = false + } + exports.delta = function(x,y){ + opt.rotationY += x/window.innerWidth * opt.sensitivity + opt.rotationX = clamp( opt.rotationX + y/window.innerHeight * opt.sensitivity, 0, PI) + } + exports.move = function(y, x){ + opt.rotationY = y + if (typeof x == "number") { opt.rotationX = x } + } + exports.update = function(){ + if (abs(ry - opt.rotationY) > epsilon) { + ry = avg(ry, opt.rotationY, opt.ease) + } + else { + ry = opt.rotationY + } + if (abs(rx - opt.rotationX) > epsilon) { + rx = avg(rx, opt.rotationX, opt.ease) + } + else { + rx = opt.rotationX + } + opt.camera.x = opt.center.x + opt.radius * sin(rx) * cos(ry) + opt.camera.z = opt.center.y + opt.radius * sin(rx) * sin(ry) + opt.camera.y = opt.center.z + opt.radius * cos(rx) + opt.camera.rotationX = PI/2 - rx + opt.camera.rotationY = ry + PI/2 + } + return exports +} diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js index cb36038..86edf6c 100644 --- a/public/assets/javascripts/rectangles/util/mouse.js +++ b/public/assets/javascripts/rectangles/util/mouse.js @@ -76,6 +76,14 @@ function mouse (opt) { window.addEventListener("mousemove", base.mousemove) window.addEventListener("mouseup", base.mouseup) } + base.unbind = function(){ + if (opt.el) { + opt.el.removeEventListener("mousedown", base.mousedown) + opt.el.removeEventListener("contextmenu", base.contextmenu) + } + window.removeEventListener("mousemove", base.mousemove) + window.removeEventListener("mouseup", base.mouseup) + } base.bind_el = function(el){ el.addEventListener("mousedown", base.mousedown) diff --git a/public/assets/test/orbit.html b/public/assets/test/orbit.html new file mode 100644 index 0000000..8b45de6 --- /dev/null +++ b/public/assets/test/orbit.html @@ -0,0 +1,140 @@ + + +
    +
    + +
    + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index bd94a51..57e050c 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -32,6 +32,7 @@ body { + @@ -94,43 +95,6 @@ Map.UI.Ortho = function(map){ } }) } -MX.OrbitCamera = function(opt){ - var exports = {}, bound = false - exports.opt = opt = defaults(opt, { - el: window, // object to bind events on - camera: scene.camera, // camera object we'll be moving - radius: 100, - radiusRange: [ 10, 1000 ], - rotationX: 0, - rotationY: 0, - center: { x: 0, y: 0, z: 0 }, - }) - exports.init = function(){ - exports.bind() - } - exports.toggle = function(state){ - if (state) exports.bind() - else exports.unbind() - } - exports.bind = function(){ - if (bound) return; - bound = true - } - exports.unbind = function(){ - if (! bound) return; - bound = false - } - exports.update = function(){ - opt.camera.x = opt.radius * sin(opt.rotationY) * cos(opt.rotationX) - opt.camera.y = opt.radius * sin(opt.rotationY) * sin(opt.rotationX) - opt.camera.z = opt.radius * cos(opt.rotationY) - opt.camera.rotationX = opt.rotationX - opt.camera.rotationY = PI-opt.rotationY - hud.innerHTML = opt.camera.toString() - } - - return exports -} var scene, map, controls @@ -167,17 +131,17 @@ function polyline (time) { } } document.addEventListener('DOMContentLoaded', build_circle) -function add_mx_point (p) { +function add_mx_point (p, i) { var mx = new MX.Object3D() mx.updateChildren = false mx.move({ x: p.a, - y: 0, + y: i/4, z: p.b, width: 1, - height: 1, + height: i/2, }) - mx.el.style.backgroundColor = "#f80" + mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' mx.el.style.backfaceVisibility = "visible" scene.add(mx) mx.update() @@ -200,11 +164,11 @@ function build_circle () { var theta, rad = 10; for (var i = 0; i < 100; i++) { - theta = (i/TWO_PI) + theta = (i/100 * TWO_PI) add_mx_point({ a: sin(theta) * rad, b: cos(theta) * rad, - }) + }, i) } scene.update() -- cgit v1.2.3-70-g09d2 From 24c2c9bd7b776c49e5e90caef00c99bc008ac72a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 14:04:48 -0500 Subject: separate orbit test & add mousewheel zoom --- .../javascripts/mx/extensions/mx.orbitCamera.js | 31 ++++++++++++++++------ .../javascripts/rectangles/engine/map/draw.js | 21 ++++++++++++++- public/assets/javascripts/rectangles/util/wheel.js | 10 ++++--- public/assets/test/orbit.html | 22 ++++++++++++--- public/assets/test/ortho.html | 1 + 5 files changed, 68 insertions(+), 17 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js index b3dcc43..b09512e 100644 --- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -11,10 +11,17 @@ MX.OrbitCamera = function(opt){ sensitivity: 10, // moving 1 pixel is like moving N radians ease: 10, }) - var rx, ry, px, py, epsilon = 1e-10, dragging = false + var rx, ry, radius, px, py, epsilon = 1e-10, dragging = false exports.init = function(){ ry = opt.rotationY rx = opt.rotationX + radius = opt.radius + exports.wheel = new wheel({ + el: opt.el, + update: function(e, delta){ + opt.radius = clamp( opt.radius+delta, opt.radiusRange[0], opt.radiusRange[1] ) + }, + }) exports.bind() } exports.toggle = function(state){ @@ -25,15 +32,17 @@ MX.OrbitCamera = function(opt){ if (bound) return; bound = true opt.el.addEventListener("mousedown", down) - opt.el.addEventListener("mousemove", move) - opt.el.addEventListener("mouseup", up) + window.addEventListener("mousemove", move) + window.addEventListener("mouseup", up) + exports.wheel.unlock() } exports.unbind = function(){ if (! bound) return; bound = false opt.el.removeEventListener("mousedown", down) - opt.el.removeEventListener("mousemove", move) - opt.el.removeEventListener("mouseup", up) + window.removeEventListener("mousemove", move) + window.removeEventListener("mouseup", up) + exports.wheel.lock() } function down (e) { px = e.pageX @@ -70,9 +79,15 @@ MX.OrbitCamera = function(opt){ else { rx = opt.rotationX } - opt.camera.x = opt.center.x + opt.radius * sin(rx) * cos(ry) - opt.camera.z = opt.center.y + opt.radius * sin(rx) * sin(ry) - opt.camera.y = opt.center.z + opt.radius * cos(rx) + if (abs(radius - opt.radius) > epsilon) { + radius = avg(radius, opt.radius, opt.ease) + } + else { + radius = opt.radius + } + opt.camera.x = opt.center.x + radius * sin(rx) * cos(ry) + opt.camera.z = opt.center.y + radius * sin(rx) * sin(ry) + opt.camera.y = opt.center.z + radius * cos(rx) opt.camera.rotationX = PI/2 - rx opt.camera.rotationY = ry + PI/2 } diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index b525696..564b351 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -228,7 +228,7 @@ Map.Draw = function(map, opt){ line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation) } - function dot_at (x,z){ + draw.dot_at = function dot_at (x,z){ ctx.save() ctx.translate(x,z) @@ -240,4 +240,23 @@ Map.Draw = function(map, opt){ ctx.restore() } + + draw.x_at = function x_at (x, z, length){ + ctx.save() + ctx.translate(x,z) + + var len = (length/2 || 4) / map.zoom + + ctx.lineCap = "square" + ctx.lineWidth = 2/map.zoom + ctx.beginPath() + ctx.moveTo( -len, -len); + ctx.lineTo( len, len); + ctx.moveTo( -len, len); + ctx.lineTo( len, -len); + ctx.stroke(); + + ctx.restore() + } + } \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/util/wheel.js b/public/assets/javascripts/rectangles/util/wheel.js index 712d470..4155a70 100644 --- a/public/assets/javascripts/rectangles/util/wheel.js +++ b/public/assets/javascripts/rectangles/util/wheel.js @@ -3,8 +3,8 @@ base.wheel = new wheel({ el: document.querySelector("#map"), - update: function(e, val, delta){ - // do something with val + update: function(e, delta){ + // do something with delta }, }) @@ -13,7 +13,7 @@ function wheel (opt) { opt = defaults(opt, { el: document, - fn: function(e, val, delta){}, + update: function(e, delta){}, propagate: false, locked: false, reversible: true, @@ -22,7 +22,7 @@ function wheel (opt) { }) opt.el.addEventListener('wheel', onMouseWheel, false); -// opt.el.addEventListener('mousewheel', onMouseWheel, false); + // opt.el.addEventListener('mousewheel', onMouseWheel, false); opt.el.addEventListener('DOMMouseScroll', onMouseWheel, false); function onMouseWheel (e) { @@ -58,6 +58,8 @@ function wheel (opt) { // opt.val = clamp(opt.val + delta, opt.min, opt.max) + // deltaX is also passed, but these values tend to be unusable + // try http://vvalls.com/assets/test/wheel.html with a trackpad opt.update(e, deltaY, deltaX) } diff --git a/public/assets/test/orbit.html b/public/assets/test/orbit.html index 8b45de6..0416ff7 100644 --- a/public/assets/test/orbit.html +++ b/public/assets/test/orbit.html @@ -35,6 +35,7 @@ body { + @@ -76,17 +77,26 @@ function add_mx_point (p, theta, i) { mx.updateChildren = false mx.move({ x: p.a, - y: i/4, + y: i/2, z: p.b, rotationY: -theta, width: 1, - height: i/2, + height: i, }) mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' mx.el.style.backfaceVisibility = "visible" scene.add(mx) mx.update() } +function add_center () { + var mx = new MX.Object3D() + mx.width = 79 + mx.height = 64 + mx.y = 32 * 0.05 + mx.scale = 0.05 + mx.el.style.backgroundImage = "url(http://i.asdf.us/im/b8/_1400215546_frankhats_1400215573_frankhats.gif)" + scene.add(mx) +} function build_circle () { scene = new MX.Scene().addTo("#perspective") scene.camera.move({ @@ -102,7 +112,7 @@ function build_circle () { scene.height = window.innerHeight scene.perspective = window.innerHeight - var theta, rad = 10; + var theta, rad = 16; for (var i = 0; i < 100; i++) { theta = (i/100 * TWO_PI) add_mx_point({ @@ -111,9 +121,11 @@ function build_circle () { }, theta, i) } + add_center() + scene.update() - controls = new MX.OrbitCamera() + controls = new MX.OrbitCamera({ el: document.querySelector("#perspective") }) controls.init() console.log("ready..perhaps") @@ -131,6 +143,8 @@ function animate(time){ map.draw.translate() map.draw.coords() + ctx.strokeStyle = "#f00"; + map.draw.x_at(0,0) map.draw.mouse(map.ui.mouse.cursor) map.draw.camera(scene.camera) diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index 57e050c..b00b6fe 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -35,6 +35,7 @@ body { + -- cgit v1.2.3-70-g09d2 From cbc0e733553648f24c8c0256caee36d1e4f24ce1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 18:08:43 -0500 Subject: build MX divs from polyline --- .../javascripts/mx/extensions/mx.orbitCamera.js | 3 +- public/assets/test/ortho.html | 107 +++++++++++++++++---- 2 files changed, 88 insertions(+), 22 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js index b09512e..6dc5b6c 100644 --- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -9,6 +9,7 @@ MX.OrbitCamera = function(opt){ rotationY: 0, center: { x: 0, y: 0, z: 0 }, sensitivity: 10, // moving 1 pixel is like moving N radians + wheelSensitivity: 10, ease: 10, }) var rx, ry, radius, px, py, epsilon = 1e-10, dragging = false @@ -19,7 +20,7 @@ MX.OrbitCamera = function(opt){ exports.wheel = new wheel({ el: opt.el, update: function(e, delta){ - opt.radius = clamp( opt.radius+delta, opt.radiusRange[0], opt.radiusRange[1] ) + opt.radius = clamp( opt.radius + delta * opt.wheelSensitivity, opt.radiusRange[0], opt.radiusRange[1] ) }, }) exports.bind() diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index b00b6fe..041ec3f 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -62,17 +62,19 @@ Map.UI.Ortho = function(map){ if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) { points.push( points[0].clone() ) placing = false + add_mx_polyline(points) } else { points.push( p ) + mx_points.push( add_mx_point(p) ) } } else { placing = true - points.length = 0 + points.length = mx_points.length = 0 points.push( p ) + mx_points.push( add_mx_point(p) ) } - add_mx_point(p) }, move: function(e, cursor){ cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) @@ -104,10 +106,11 @@ map = new Map ({ el: document.querySelector("#orthographic"), width: window.innerWidth/2, height: window.innerHeight, + zoom: 0, }) var placing = false -var points = [] +var points = [], mx_points = [] var ctx = map.draw.ctx var last_point @@ -119,6 +122,7 @@ function polyline (time) { if (points.length > 1) { ctx.fillStyle = "#ff0" ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom ctx.beginPath() ctx.moveTo(points[0].a, points[0].b) points.forEach(function(point, i){ @@ -131,24 +135,80 @@ function polyline (time) { } } } -document.addEventListener('DOMContentLoaded', build_circle) + +function add_mx_polyline (points) { + mx_points.forEach(function(mx){ scene.remove(mx) }) + for (var i = 1; i < points.length; i++) { + var head = points[i-1] + var tail = points[i % (points.length-1)] + add_mx_polyline_face(head, tail) + } +} +function add_mx_polyline_face(head, tail){ + var mx = new MX.Object3D() + var mid_x = (head.a + tail.a) + var mid_z = (head.b + tail.b) + var len = head.distanceTo( tail ) + var angle = atan2( head.b - tail.b, head.a - tail.a ) + mx.move({ + x: mid_x / 2, + y: 25 + 1, + z: mid_z / 2, + width: ceil(len), + height: 50, + rotationY: angle + }) + var hue = abs(round( angle / PI * 90 + 300)) + console.log('hsl(' + [hue + "deg", "100%", "50%"] + ')') + mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' + scene.add(mx) +} + + function add_mx_point (p, i) { var mx = new MX.Object3D() mx.updateChildren = false mx.move({ x: p.a, - y: i/4, + y: 11, z: p.b, - width: 1, - height: i/2, + width: 20, + height: 20, }) mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' mx.el.style.backfaceVisibility = "visible" scene.add(mx) - mx.update() + return mx +} +function mx_grid () { + var space = 20, cells = 20, side = space*cells + var ctx, canvas = document.createElement("canvas") + canvas.width = canvas.height = side + 4 + ctx = canvas.getContext('2d') + + draw_grid(ctx, 20, 20) + + var mx = new MX.Object3D(canvas) + mx.rotationX = PI/2 + scene.add(mx) +} +function draw_grid (ctx, cells, space) { + var side = space * cells + ctx.strokeStyle = "#444" + ctx.lineWidth = 1 + ctx.beginPath() + ctx.translate(1,1) + for (var i = 0; i <= cells; i++) { + ctx.moveTo(i*space, 0) + ctx.lineTo(i*space, side) + ctx.moveTo(0, i*space) + ctx.lineTo(side, i*space) + } + ctx.stroke() } -function build_circle () { +document.addEventListener('DOMContentLoaded', build) +function build () { scene = new MX.Scene().addTo("#perspective") scene.camera.move({ "x": 0, @@ -163,21 +223,17 @@ function build_circle () { scene.height = window.innerHeight scene.perspective = window.innerHeight - var theta, rad = 10; - for (var i = 0; i < 100; i++) { - theta = (i/100 * TWO_PI) - add_mx_point({ - a: sin(theta) * rad, - b: cos(theta) * rad, - }, i) - } - + mx_grid() + scene.update() - controls = new MX.OrbitCamera() + controls = new MX.OrbitCamera({ + radius: 1000, + rotationX: PI/4, + rotationY: PI/2, + }) controls.init() - console.log("ready..perhaps") animate(0) } function animate(time){ @@ -190,10 +246,19 @@ function animate(time){ map.draw.ctx.save() map.draw.translate() + map.draw.ctx.save() + map.draw.ctx.translate(-(20*20)/2, -(20*20)/2) + draw_grid(map.draw.ctx, 20, 20) + map.draw.ctx.restore() + map.draw.coords() + + polyline() + + ctx.strokeStyle = "#f00"; + map.draw.x_at(0,0) map.draw.mouse(map.ui.mouse.cursor) map.draw.camera(scene.camera) - polyline() map.draw.ctx.restore() } -- cgit v1.2.3-70-g09d2 From 779226a92063b91151988b132415e76636337de9 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 18:47:51 -0500 Subject: keeping track of finished paths --- public/assets/test/ortho.html | 43 +++++++++++++++++++++++++++---------------- 1 file changed, 27 insertions(+), 16 deletions(-) (limited to 'public') diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index 041ec3f..ce52f99 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -71,7 +71,7 @@ Map.UI.Ortho = function(map){ } else { placing = true - points.length = mx_points.length = 0 + points = [] points.push( p ) mx_points.push( add_mx_point(p) ) } @@ -110,11 +110,13 @@ map = new Map ({ }) var placing = false -var points = [], mx_points = [] +var points, mx_points = [] +var shapes = [] var ctx = map.draw.ctx var last_point -function polyline (time) { +function polyline (points, finished) { + if (! points) return if (points.length == 1) { ctx.fillStyle = "#f80" ctx.fillRect(points[0].a, points[0].b, 10, 10) @@ -128,9 +130,8 @@ function polyline (time) { points.forEach(function(point, i){ i && ctx.lineTo(point.a, point.b) }) - placing && last_point && ctx.lineTo(last_point.a, last_point.b) ctx.stroke() - if (! placing) { + if (! placing || finished) { ctx.fill() } } @@ -138,11 +139,18 @@ function polyline (time) { function add_mx_polyline (points) { mx_points.forEach(function(mx){ scene.remove(mx) }) + var faces = [] for (var i = 1; i < points.length; i++) { var head = points[i-1] - var tail = points[i % (points.length-1)] - add_mx_polyline_face(head, tail) + var tail = points[i] + face = add_mx_polyline_face(head, tail) + faces.push(face) } + shapes.push({ + mx: faces, + points: points, + }) + points = [] } function add_mx_polyline_face(head, tail){ var mx = new MX.Object3D() @@ -162,9 +170,9 @@ function add_mx_polyline_face(head, tail){ console.log('hsl(' + [hue + "deg", "100%", "50%"] + ')') mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' scene.add(mx) + return mx } - function add_mx_point (p, i) { var mx = new MX.Object3D() mx.updateChildren = false @@ -204,19 +212,13 @@ function draw_grid (ctx, cells, space) { ctx.moveTo(0, i*space) ctx.lineTo(side, i*space) } + ctx.closePath() ctx.stroke() } document.addEventListener('DOMContentLoaded', build) function build () { scene = new MX.Scene().addTo("#perspective") - scene.camera.move({ - "x": 0, - "y": 0, - "z": 0, - "rotationX": 0, // PI/2, - "rotationY": PI/2, // PI - }) scene.camera.radius = 20 scene.width = window.innerWidth/2 @@ -253,7 +255,16 @@ function animate(time){ map.draw.coords() - polyline() + polyline(points) + if (placing && last_point && points.length) { + ctx.beginPath() + ctx.moveTo(points[0].a, points[0].b) + ctx.lineTo(last_point.a, last_point.b) + } + + shapes.forEach(function(shape){ + polyline(shape.points, true) + }) ctx.strokeStyle = "#f00"; map.draw.x_at(0,0) -- cgit v1.2.3-70-g09d2 From bcf1904e0bdd64353e6d06f922112cf28b1bc87f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 5 Feb 2015 12:28:04 -0500 Subject: line to cursor --- public/assets/javascripts/rectangles/engine/map/draw.js | 4 ++-- public/assets/test/ortho.html | 16 ++++++++++------ 2 files changed, 12 insertions(+), 8 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 564b351..24f7cf3 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -228,11 +228,11 @@ Map.Draw = function(map, opt){ line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation) } - draw.dot_at = function dot_at (x,z){ + draw.dot_at = function dot_at (x, z, radius){ ctx.save() ctx.translate(x,z) - var radius = 2 / map.zoom + radius = (radius || 2) / map.zoom ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2*Math.PI, false); diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index ce52f99..1ca7e06 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -80,9 +80,11 @@ Map.UI.Ortho = function(map){ cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) last_point = new vec2( cursor.x.a, cursor.y.a ) - var p = new vec2( cursor.x.a, cursor.y.a ) - if (placing && points.length > 1 && points[0].distanceTo( p ) < 10/map.zoom) { + if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) { document.body.style.cursor = "pointer" + last_point.assign(points[0]) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b =last_point.b } else { document.body.style.cursor = "crosshair" @@ -119,7 +121,7 @@ function polyline (points, finished) { if (! points) return if (points.length == 1) { ctx.fillStyle = "#f80" - ctx.fillRect(points[0].a, points[0].b, 10, 10) + map.draw.dot_at(points[0].a, points[0].b, 5) } if (points.length > 1) { ctx.fillStyle = "#ff0" @@ -167,7 +169,6 @@ function add_mx_polyline_face(head, tail){ rotationY: angle }) var hue = abs(round( angle / PI * 90 + 300)) - console.log('hsl(' + [hue + "deg", "100%", "50%"] + ')') mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' scene.add(mx) return mx @@ -256,10 +257,13 @@ function animate(time){ map.draw.coords() polyline(points) - if (placing && last_point && points.length) { + if (placing && last_point) { + ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom ctx.beginPath() - ctx.moveTo(points[0].a, points[0].b) + ctx.moveTo(points[points.length-1].a, points[points.length-1].b) ctx.lineTo(last_point.a, last_point.b) + ctx.stroke() } shapes.forEach(function(shape){ -- cgit v1.2.3-70-g09d2 From 3832685358c9d3ad3e0aead51228f29255702007 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 24 Mar 2015 13:23:33 -0400 Subject: setVolume functions --- public/assets/javascripts/mx/primitives/mx.video.js | 5 +++++ public/assets/javascripts/mx/primitives/mx.vimeo.js | 5 +++++ public/assets/javascripts/mx/primitives/mx.youtube.js | 5 +++++ public/assets/javascripts/rectangles/engine/scenery/types/video.js | 4 ++++ 4 files changed, 19 insertions(+) (limited to 'public') diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index c281f02..9138cdd 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -87,6 +87,11 @@ MX.Video = MX.Object3D.extend({ this.muted = false }, + setVolume: function(n){ + if (this.muted) return + this.player.volume = n + }, + setLoop: function(state){ this.media.loop = state }, diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index fe5ce86..bff781b 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -130,6 +130,11 @@ MX.Vimeo = MX.Object3D.extend({ this.player.api('setVolume', 0.8) this.muted = false }, + + setVolume: function(n){ + if (this.muted) return + this.player.api('setVolume', n) + }, setLoop: function(state){ this.media.loop = state diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index 5c92378..fad66dd 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -173,6 +173,11 @@ MX.Youtube = MX.Object3D.extend({ this.player.setVolume(80) this.muted = false }, + + setVolume: function(n){ + if (this.muted) return + this.player.setVolume( floor(n * 100) ) + }, setLoop: function(state){ this.media.loop = state diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index d1b1763..fb1a868 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -90,6 +90,10 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ } }, + setVolume: function(n){ + this.mx.setVolume(n) + }, + serialize: function(){ var data = base.serialize.call(this) return data -- cgit v1.2.3-70-g09d2 From 0a67e7f8ab74f82212a123dd6c30903124c1e8df Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 24 Mar 2015 17:08:47 -0400 Subject: sound interpolation --- .../assets/javascripts/mx/primitives/mx.soundcloud.js | 5 +++++ public/assets/javascripts/mx/primitives/mx.video.js | 2 +- public/assets/javascripts/mx/primitives/mx.vimeo.js | 2 +- public/assets/javascripts/mx/primitives/mx.youtube.js | 2 +- .../javascripts/rectangles/engine/scenery/_scenery.js | 1 + .../javascripts/rectangles/engine/scenery/sound.js | 17 +++++++++++++++++ .../rectangles/engine/scenery/types/audio.js | 4 ++++ views/partials/scripts.ejs | 1 + 8 files changed, 31 insertions(+), 3 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/scenery/sound.js (limited to 'public') diff --git a/public/assets/javascripts/mx/primitives/mx.soundcloud.js b/public/assets/javascripts/mx/primitives/mx.soundcloud.js index 75286d9..fecb2f4 100644 --- a/public/assets/javascripts/mx/primitives/mx.soundcloud.js +++ b/public/assets/javascripts/mx/primitives/mx.soundcloud.js @@ -102,6 +102,11 @@ MX.Soundcloud = MX.Object3D.extend({ setLoop: function(state){ this.media.loop = state }, + + setVolume: function(n){ + if (this.muted || ! this.player) return + this.player.setVolume(floor( n * 100 )) + }, didPlay: function(){ this.paused = false diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index 9138cdd..43c392a 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -88,7 +88,7 @@ MX.Video = MX.Object3D.extend({ }, setVolume: function(n){ - if (this.muted) return + if (this.muted || ! this.player) return this.player.volume = n }, diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index bff781b..ccd0a13 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -132,7 +132,7 @@ MX.Vimeo = MX.Object3D.extend({ }, setVolume: function(n){ - if (this.muted) return + if (this.muted || ! this.player) return this.player.api('setVolume', n) }, diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index fad66dd..e4e73d6 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -175,7 +175,7 @@ MX.Youtube = MX.Object3D.extend({ }, setVolume: function(n){ - if (this.muted) return + if (this.muted || ! this.player || ! this.player.setVolume) return this.player.setVolume( floor(n * 100) ) }, diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index d52fe21..18d665f 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -11,6 +11,7 @@ var Scenery = new function(){ base.init = function(){ base.resize.init() + base.sound.init() } base.add = function(opt){ diff --git a/public/assets/javascripts/rectangles/engine/scenery/sound.js b/public/assets/javascripts/rectangles/engine/scenery/sound.js new file mode 100644 index 0000000..2f7f8de --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/sound.js @@ -0,0 +1,17 @@ + +Scenery.sound = {} +Scenery.sound.max_distance = 600 +Scenery.sound.init = function(){ + app.tube.on("move", Scenery.sound.move) +} +Scenery.sound.move = function(){ + var vals = Scenery.map(function(scenery){ + if ((scenery.type == "video" || scenery.type == "audio") && ! scenery.muted()) { + //get distance from A to B + var distance = dist(cam.x, cam.z, + scenery.mx.x, scenery.mx.z) + var volume = 1 - (clamp( distance, 0, Scenery.sound.max_distance ) / Scenery.sound.max_distance) + scenery.setVolume(volume) + } + }) +} diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/audio.js b/public/assets/javascripts/rectangles/engine/scenery/types/audio.js index 82f984e..fdd221d 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/audio.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/audio.js @@ -39,6 +39,10 @@ Scenery.types.audio = Scenery.types.base.extend(function(base){ this.dimensions.deserialize(data.dimensions) }, + setVolume: function(n){ + this.mx.setVolume(n) + }, + play: function(){ this.mx.play() }, diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 011644b..72aaa8c 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -65,6 +65,7 @@ + -- cgit v1.2.3-70-g09d2 From d7a12fac00ce78ef37a17da5eb1094281272bad7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 25 Mar 2015 15:09:57 -0400 Subject: longer distance --- public/assets/javascripts/rectangles/engine/scenery/sound.js | 3 +-- views/controls/editor/color-control.ejs | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/scenery/sound.js b/public/assets/javascripts/rectangles/engine/scenery/sound.js index 2f7f8de..776dd80 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/sound.js +++ b/public/assets/javascripts/rectangles/engine/scenery/sound.js @@ -1,13 +1,12 @@ Scenery.sound = {} -Scenery.sound.max_distance = 600 +Scenery.sound.max_distance = 2000 Scenery.sound.init = function(){ app.tube.on("move", Scenery.sound.move) } Scenery.sound.move = function(){ var vals = Scenery.map(function(scenery){ if ((scenery.type == "video" || scenery.type == "audio") && ! scenery.muted()) { - //get distance from A to B var distance = dist(cam.x, cam.z, scenery.mx.x, scenery.mx.z) var volume = 1 - (clamp( distance, 0, Scenery.sound.max_distance ) / Scenery.sound.max_distance) diff --git a/views/controls/editor/color-control.ejs b/views/controls/editor/color-control.ejs index bcc955d..c035e24 100644 --- a/views/controls/editor/color-control.ejs +++ b/views/controls/editor/color-control.ejs @@ -1,4 +1,4 @@ -
    +

    Edit Room Colors

    -- cgit v1.2.3-70-g09d2 From 2a984d83343d6d5f7510697ac6f61d2def21e721 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 25 Mar 2015 15:11:26 -0400 Subject: lil less --- public/assets/javascripts/rectangles/engine/scenery/sound.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/scenery/sound.js b/public/assets/javascripts/rectangles/engine/scenery/sound.js index 776dd80..37bdee0 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/sound.js +++ b/public/assets/javascripts/rectangles/engine/scenery/sound.js @@ -1,6 +1,6 @@ Scenery.sound = {} -Scenery.sound.max_distance = 2000 +Scenery.sound.max_distance = 1500 Scenery.sound.init = function(){ app.tube.on("move", Scenery.sound.move) } -- cgit v1.2.3-70-g09d2 From b38b008981ee88c58cfff5c2e2e7820046dde415 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 30 Mar 2015 17:35:30 -0400 Subject: store rotation on wall object --- public/assets/javascripts/rectangles/engine/scenery/move.js | 5 +++-- public/assets/javascripts/rectangles/engine/scenery/resize.js | 2 +- public/assets/javascripts/rectangles/engine/scenery/types/_object.js | 4 ++-- public/assets/javascripts/rectangles/models/wall.js | 5 +++-- 4 files changed, 9 insertions(+), 7 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index f57ddba..0d26582 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -75,13 +75,14 @@ Scenery.move = function(base){ switch (base.wall.side) { case FRONT: case BACK: - base.mx.x = position.a + delta.a * cos(wall_rotation[base.wall.side]) + dimension.a / 2 + base.mx.x = position.a + delta.a * cos(base.wall.rotationY) + dimension.a / 2 break case LEFT: case RIGHT: - base.mx.z = position.a + delta.a * sin(wall_rotation[base.wall.side]) + dimension.a / 2 + base.mx.z = position.a + delta.a * sin(base.wall.rotationY) + dimension.a / 2 break } + console.log( sin(base.wall.rotationY), cos(base.wall.rotationY) ) if (editor.permissions.resize) { Scenery.resize.move_dots() } diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index 5af7f3f..73fd82a 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -49,7 +49,7 @@ Scenery.resize = new function(){ // rotate the dots as appropriate base.rotate_dots = function(){ - rotationY = wall_rotation[obj.wall.side] + rotationY = obj.wall.rotationY dots.forEach(function(dot){ dot.rotationY = rotationY }) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js index cd3f981..e3b9b4d 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js @@ -90,11 +90,11 @@ Scenery.types.base = Fiber.extend(function(base){ switch (this.wall.side) { case FRONT: case BACK: - this.position.a += delta.a * cos(wall_rotation[this.wall.side]) + this.position.a += delta.a * cos(this.wall.rotationY) break case LEFT: case RIGHT: - this.position.a += delta.a * sin(wall_rotation[this.wall.side]) + this.position.a += delta.a * sin(this.wall.rotationY) break } }, diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index a026c3c..13f5cd7 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -18,6 +18,7 @@ this.edge = opt.edge this.side = opt.side this.surface = opt.surface + this.rotationY = ('rotationY' in opt) ? opt.rotationY : wall_rotation[opt.side] this.mx = opt.mx this.background = { src: "none" } } @@ -89,7 +90,7 @@ mx_dot.move(mx_pos) mx_dot.width = 5 mx_dot.height = 5 - mx_dot.rotationY = wall_rotation[base.side] + mx_dot.rotationY = base.rotationY mx_dot.el.style.backgroundColor = "red" scene.add(mx_dot) } @@ -236,7 +237,7 @@ x: x, y: position.b + dimension.b / 2, z: z, - rotationY: wall_rotation[ this.side ], + rotationY: this.rotationY, } } Wall.prototype.mxToPosition = function(mx, dimension) { -- cgit v1.2.3-70-g09d2 From 9117849bf7d183c5ed773c5ed1ef105c41a0f659 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 30 Mar 2015 20:25:45 -0400 Subject: split out mx.grid --- public/assets/javascripts/mx/primitives/mx.grid.js | 60 +++++++ .../javascripts/rectangles/engine/map/ui_ortho.js | 65 +++++++ .../javascripts/rectangles/engine/scenery/move.js | 3 +- public/assets/test/ortho2.html | 200 +++++++++++++++++++++ 4 files changed, 326 insertions(+), 2 deletions(-) create mode 100644 public/assets/javascripts/mx/primitives/mx.grid.js create mode 100644 public/assets/javascripts/rectangles/engine/map/ui_ortho.js create mode 100644 public/assets/test/ortho2.html (limited to 'public') diff --git a/public/assets/javascripts/mx/primitives/mx.grid.js b/public/assets/javascripts/mx/primitives/mx.grid.js new file mode 100644 index 0000000..7a40144 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.grid.js @@ -0,0 +1,60 @@ +MX.Grid = MX.Object3D.extend({ + init: function (ops) { + + this.type = "Grid" + + var ops = this.ops = defaults(ops, { + x: 0, + y: 0, + z: 0, + space: 20, + cells: 20, + }) + + ops.side = ops.space * ops.cells + + var ctx, canvas = document.createElement("canvas") + + this.el = canvas + this.width = this.height = canvas.width = canvas.height = ops.side + 4 + + ctx = canvas.getContext('2d') + + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.rotationX = PI/2 + this.scale = ops.scale || 1 + this.backface = ops.backface || false + + ops.className && this.el.classList.add(ops.className) + this.backface && this.el.classList.add("backface-visible") + this.el.classList.add("mx-grid") + + this.draw(ctx) + }, + + draw: function(ctx){ + ctx = ctx || this.ctx + + var cells = this.ops.cells, + space = this.ops.space, + side = this.ops.side + + ctx.strokeStyle = "#444" + ctx.lineWidth = 1 + ctx.beginPath() + ctx.translate(1,1) + for (var i = 0; i <= cells; i++) { + ctx.moveTo(i*space, 0) + ctx.lineTo(i*space, side) + ctx.moveTo(0, i*space) + ctx.lineTo(side, i*space) + } + ctx.closePath() + ctx.stroke() + }, + +}) + + diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js new file mode 100644 index 0000000..adff4d2 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -0,0 +1,65 @@ +Map.UI = Map.UI || {} +Map.UI.Ortho = function(map){ + + var base = this + + base.creating = base.dragging = base.resizing = false + + base.mouse = new mouse({ + el: map.el, + down: function(e, cursor){ + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + // compare to initial point + var p = new vec2( cursor.x.a, cursor.y.a ) + if (placing) { + if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) { + points.push( points[0].clone() ) + placing = false + add_mx_polyline(points) + } + else { + points.push( p ) + mx_points.push( add_mx_point(p) ) + } + } + else { + placing = true + points = [] + points.push( p ) + mx_points.push( add_mx_point(p) ) + } + }, + move: function(e, cursor){ + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + last_point = new vec2( cursor.x.a, cursor.y.a ) + if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) { + document.body.style.cursor = "pointer" + last_point.assign(points[0]) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b =last_point.b + } + else { + document.body.style.cursor = "crosshair" + } + }, + drag: function(e, cursor){ + cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a + cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b + }, + up: function(e, cursor, new_cursor){ + new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + } + }) + + base.wheel = new wheel({ + el: map.el, + update: mousewheel, + }) + + function mousewheel (e, deltaY, deltaX){ + map.set_zoom(map.zoom_exponent - deltaY/20) + } +} \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index 0d26582..dd60a61 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -82,7 +82,7 @@ Scenery.move = function(base){ base.mx.z = position.a + delta.a * sin(base.wall.rotationY) + dimension.a / 2 break } - console.log( sin(base.wall.rotationY), cos(base.wall.rotationY) ) + if (editor.permissions.resize) { Scenery.resize.move_dots() } @@ -105,7 +105,6 @@ Scenery.move = function(base){ dragging = moved = false oldState = null document.body.classList.remove("dragging") - } function switch_wall (e, target, cursor){ diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html new file mode 100644 index 0000000..d554a60 --- /dev/null +++ b/public/assets/test/ortho2.html @@ -0,0 +1,200 @@ + + +
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 744b4f00e9c8a7ef8a75cc8508bf10c0da8de9cc Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 30 Mar 2015 21:27:07 -0400 Subject: plotting points on an image of an art gallery --- public/assets/javascripts/mx/primitives/mx.grid.js | 12 ++++++++++- .../assets/javascripts/mx/primitives/mx.image.js | 24 ++++++++++++++++++++- public/assets/test/ortho2.html | 25 +++++++++++++++------- 3 files changed, 51 insertions(+), 10 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/mx/primitives/mx.grid.js b/public/assets/javascripts/mx/primitives/mx.grid.js index 7a40144..a765c89 100644 --- a/public/assets/javascripts/mx/primitives/mx.grid.js +++ b/public/assets/javascripts/mx/primitives/mx.grid.js @@ -34,8 +34,13 @@ MX.Grid = MX.Object3D.extend({ this.draw(ctx) }, - draw: function(ctx){ + draw: function(ctx, recenter){ ctx = ctx || this.ctx + + if (recenter) { + ctx.save() + ctx.translate( -grid.width/2, -grid.height/2 ) + } var cells = this.ops.cells, space = this.ops.space, @@ -53,6 +58,11 @@ MX.Grid = MX.Object3D.extend({ } ctx.closePath() ctx.stroke() + + if (recenter) { + ctx.restore() + } + }, }) diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index b8557bf..ca79065 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -1,6 +1,5 @@ MX.Image = MX.Object3D.extend({ init: function (ops) { - this.type = "Image" this.media = ops.media this.width = 0 @@ -41,8 +40,31 @@ MX.Image = MX.Object3D.extend({ layer.el.classList.add('image') layer.dirty = true layer.update() + layer.ops.onload } image.src = ops.src; + + if (ops.keepImage) { + this.image = image + } + }, + + draw: function(ctx, recenter){ + if (recenter) { + ctx.save() + ctx.scale(-1, 1) + ctx.translate( -this.width/2 * this.scale, -this.height/2 * this.scale ) + } + + ctx.drawImage(this.image, + 0, 0, this.image.naturalWidth, this.image.naturalHeight, + 0, 0, this.image.width * this.scale, this.image.height * this.scale + ) + + if (recenter) { + ctx.restore() + } + }, }) diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index d554a60..733c90c 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -34,6 +34,7 @@ body { + @@ -53,7 +54,7 @@ map = new Map ({ el: document.querySelector("#orthographic"), width: window.innerWidth/2, height: window.innerHeight, - zoom: 0, + zoom: -2, }) var placing = false @@ -127,9 +128,11 @@ function add_mx_point (p, i) { z: p.b, width: 20, height: 20, + rotationX: PI/2, }) mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' mx.el.style.backfaceVisibility = "visible" + mx.el.style.borderRadius = "50%" scene.add(mx) return mx } @@ -143,14 +146,22 @@ function build () { scene.height = window.innerHeight scene.perspective = window.innerHeight - grid = new MX.Grid() - scene.add(grid) +// grid = new MX.Grid() +// scene.add(grid) + floorplan = new MX.Image({ + src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg", + keepImage: true, + rotationX: -PI/2, + rotationY: PI, + }) + scene.add(floorplan) scene.update() controls = new MX.OrbitCamera({ el: scene.el, - radius: 1000, + radius: 3000, + radiusRange: [ 10, 10000 ], rotationX: PI/4, rotationY: PI/2, }) @@ -168,10 +179,8 @@ function animate(time){ map.draw.ctx.save() map.draw.translate() - map.draw.ctx.save() - map.draw.ctx.translate(-(20*20)/2, -(20*20)/2) - grid.draw(map.draw.ctx, 20, 20) - map.draw.ctx.restore() +// grid.draw(map.draw.ctx, true) + floorplan.draw(map.draw.ctx, true) map.draw.coords() -- cgit v1.2.3-70-g09d2 From 835fbcd8b47715d34d17b784409db1d45f992c29 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 30 Mar 2015 21:46:25 -0400 Subject: rightclick to recenter canvas --- .../javascripts/rectangles/engine/map/ui_ortho.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js index adff4d2..adcc078 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -10,6 +10,23 @@ Map.UI.Ortho = function(map){ down: function(e, cursor){ cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + + if (e.ctrlKey || e.which === 3) { + if (placing) { + // close polyline or cancel + return + } + cursor.quantize(1/map.zoom) + map.center.a = cursor.x.a + map.center.b = -cursor.y.a + cursor.x.b = cursor.x.a + cursor.y.b = cursor.y.a + base.mouse.down = false + e.preventDefault() + e.stopPropagation() + return + } + // compare to initial point var p = new vec2( cursor.x.a, cursor.y.a ) if (placing) { -- cgit v1.2.3-70-g09d2 From 4b794104e86b74c531e35443cf23ce8cf144d505 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 31 Mar 2015 12:44:28 -0400 Subject: etc --- public/assets/javascripts/app.js | 2 - .../javascripts/rectangles/engine/map/ui_ortho.js | 82 --------------------- public/assets/test/ortho.html | 9 +++ public/assets/test/ortho2.html | 83 ++++++++++++++++++++++ 4 files changed, 92 insertions(+), 84 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 6ff062e..6ebcda5 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -21,8 +21,6 @@ app.init = function () { app.launch = function () { if ($.browser.msie || ! has3d()) { return app.fallback() } - var movements - scene = new MX.Scene().addTo('#scene') scene.width = window.innerWidth scene.height = window.innerHeight diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js index adcc078..e69de29 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -1,82 +0,0 @@ -Map.UI = Map.UI || {} -Map.UI.Ortho = function(map){ - - var base = this - - base.creating = base.dragging = base.resizing = false - - base.mouse = new mouse({ - el: map.el, - down: function(e, cursor){ - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - - if (e.ctrlKey || e.which === 3) { - if (placing) { - // close polyline or cancel - return - } - cursor.quantize(1/map.zoom) - map.center.a = cursor.x.a - map.center.b = -cursor.y.a - cursor.x.b = cursor.x.a - cursor.y.b = cursor.y.a - base.mouse.down = false - e.preventDefault() - e.stopPropagation() - return - } - - // compare to initial point - var p = new vec2( cursor.x.a, cursor.y.a ) - if (placing) { - if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) { - points.push( points[0].clone() ) - placing = false - add_mx_polyline(points) - } - else { - points.push( p ) - mx_points.push( add_mx_point(p) ) - } - } - else { - placing = true - points = [] - points.push( p ) - mx_points.push( add_mx_point(p) ) - } - }, - move: function(e, cursor){ - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - last_point = new vec2( cursor.x.a, cursor.y.a ) - if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) { - document.body.style.cursor = "pointer" - last_point.assign(points[0]) - cursor.x.a = cursor.x.b = last_point.a - cursor.y.a = cursor.y.b =last_point.b - } - else { - document.body.style.cursor = "crosshair" - } - }, - drag: function(e, cursor){ - cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a - cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b - }, - up: function(e, cursor, new_cursor){ - new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - } - }) - - base.wheel = new wheel({ - el: map.el, - update: mousewheel, - }) - - function mousewheel (e, deltaY, deltaX){ - map.set_zoom(map.zoom_exponent - deltaY/20) - } -} \ No newline at end of file diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index 1ca7e06..2257006 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -99,6 +99,15 @@ Map.UI.Ortho = function(map){ new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) } }) + + base.wheel = new wheel({ + el: map.el, + update: mousewheel, + }) + + function mousewheel (e, deltaY, deltaX){ + map.set_zoom(map.zoom_exponent - deltaY/20) + } } var scene, map, controls diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 733c90c..17acead 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -46,6 +46,89 @@ body { @@ -98,12 +105,13 @@ Map.UI.Ortho = function(map){ move: function(e, cursor){ cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + last_point = new vec2( cursor.x.a, cursor.y.a ) if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) { document.body.style.cursor = "pointer" last_point.assign(points[0]) cursor.x.a = cursor.x.b = last_point.a - cursor.y.a = cursor.y.b =last_point.b + cursor.y.a = cursor.y.b = last_point.b } else { document.body.style.cursor = "crosshair" @@ -225,6 +233,10 @@ function add_mx_point (p, i) { return mx } +$("#url").on("input", function(){ + floorplan.load({ src: this.value }) +}) + document.addEventListener('DOMContentLoaded', build) function build () { scene = new MX.Scene().addTo("#perspective") @@ -234,8 +246,6 @@ function build () { scene.height = window.innerHeight scene.perspective = window.innerHeight -// grid = new MX.Grid() -// scene.add(grid) floorplan = new MX.Image({ src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg", keepImage: true, @@ -267,7 +277,6 @@ function animate(time){ map.draw.ctx.save() map.draw.translate() -// grid.draw(map.draw.ctx, true) floorplan.draw(map.draw.ctx, true) map.draw.coords() diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html new file mode 100644 index 0000000..19bb13a --- /dev/null +++ b/public/assets/test/ortho3.html @@ -0,0 +1,239 @@ + + +
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 00614373ad41e679dc7e06aca950d7167bd1c68f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 31 Mar 2015 16:31:54 -0400 Subject: test with image url --- public/assets/javascripts/rectangles/util/mouse.js | 2 +- public/assets/test/ortho2.html | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js index 86edf6c..2b98cee 100644 --- a/public/assets/javascripts/rectangles/util/mouse.js +++ b/public/assets/javascripts/rectangles/util/mouse.js @@ -134,7 +134,7 @@ function mouse (opt) { } var x = pos.a, y = pos.b - + if (base.down) { base.cursor.x.b = x base.cursor.y.b = y diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 5609ec3..89a5688 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -69,6 +69,8 @@ Map.UI.Ortho = function(map){ if (e.ctrlKey || e.which === 3) { if (placing) { // close polyline or cancel + placing = false + add_mx_polyline(points) return } cursor.quantize(1/map.zoom) @@ -153,6 +155,7 @@ $(window).resize(function(){ }) +var wall_height = 100 var placing = false var points, mx_points = [] var shapes = [] @@ -166,7 +169,7 @@ function polyline (points, finished) { map.draw.dot_at(points[0].a, points[0].b, 5) } if (points.length > 1) { - ctx.fillStyle = "#ff0" + ctx.fillStyle = "rgba(255,255,0,0.1)" ctx.strokeStyle = "#f80" ctx.lineWidth = 2 / map.zoom ctx.beginPath() @@ -204,10 +207,10 @@ function add_mx_polyline_face(head, tail){ var angle = atan2( head.b - tail.b, head.a - tail.a ) mx.move({ x: mid_x / 2, - y: 25 + 1, + y: wall_height/2 + 1, z: mid_z / 2, width: ceil(len), - height: 50, + height: wall_height, rotationY: angle }) var hue = abs(round( angle / PI * 90 + 300)) -- cgit v1.2.3-70-g09d2 From 30ee4d90d5fc89880ef0801aa078f26eeb26f155 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 31 Mar 2015 17:02:43 -0400 Subject: toggle keyboard/orbit cam --- public/assets/javascripts/defaults.js | 3 +- .../javascripts/mx/extensions/mx.movements.js | 18 ++++--- .../javascripts/mx/extensions/mx.orbitCamera.js | 1 + public/assets/test/ortho2.html | 56 ++++++++++++++++++++-- 4 files changed, 66 insertions(+), 12 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js index 12aed62..413bb13 100644 --- a/public/assets/javascripts/defaults.js +++ b/public/assets/javascripts/defaults.js @@ -1,3 +1,4 @@ +app = window.app || {} app.defaults = { viewHeight: window.viewHeight = 186, units: app.units = "ft", @@ -13,7 +14,7 @@ app.defaults = { }, } -marked.setOptions({ +window.marked && marked.setOptions({ sanitize: true, smartypants: true, }) diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 9af2c8d..bc71fc4 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -39,7 +39,7 @@ MX.Movements = function (cam) { }) function clampRotation( vr ) { - if (Rooms.mover.noclip) { + if (window.Rooms && Rooms.mover.noclip) { return clamp(vr, PI/-2, PI/2 ) } else { @@ -221,15 +221,19 @@ MX.Movements = function (cam) { /* case 48: // 0 - cam.rotationX = 0 - cam.rotationY = 0 - cam.x = 0 - cam.y = viewHeight - cam.z = 0 + movements.center() break */ } }, + + center: function(){ + cam.rotationX = 0 + cam.rotationY = 0 + cam.x = 0 + cam.y = viewHeight + cam.z = 0 + }, mousedown: function (e) { if (locked) return; @@ -341,7 +345,7 @@ MX.Movements = function (cam) { jumping = false } - var ceiling = (Rooms.mover.room ? Rooms.mover.room.height : 5000) + var ceiling = ((window.Rooms && Rooms.mover.room) ? Rooms.mover.room.height : 5000) if (pos.y >= ceiling-5) { vy = 0 diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js index 6dc5b6c..f4759fb 100644 --- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -68,6 +68,7 @@ MX.OrbitCamera = function(opt){ if (typeof x == "number") { opt.rotationX = x } } exports.update = function(){ + if (! bound) return if (abs(ry - opt.rotationY) > epsilon) { ry = avg(ry, opt.rotationY, opt.ease) } diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 89a5688..d6f0c5c 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -1,3 +1,4 @@ +
    @@ -29,9 +32,12 @@ body {
    + +
    + @@ -40,6 +46,7 @@ body { + @@ -53,6 +60,11 @@ body { + @@ -298,7 +299,16 @@ function build () { rotationY: PI, }) scene.add(floorplan) - + floorplan.el.addEventListener("contextmenu", function(e){ + e.preventDefault() + var offset = offsetFromPoint(e, this) + var x = (offset.left - 0.5) * floorplan.width + var z = (offset.top - 0.5) * floorplan.height + controls.opt.center.x = -x + controls.opt.center.y = 0 + controls.opt.center.z = -z + }, true) + scene.update() controls = new MX.OrbitCamera({ diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index 19bb13a..37bf620 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -38,6 +38,7 @@ body { + -- cgit v1.2.3-70-g09d2 From 39f1a7136567ae7e0afbf085732853cc86123393 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 1 Apr 2015 19:30:22 -0400 Subject: stub in 3d object ui --- .../javascripts/rectangles/engine/scenery/undo.js | 65 ++++++++++++++ .../rectangles/engine/sculpture/_sculpture.js | 94 +++++++++++++++++++++ .../rectangles/engine/sculpture/types/image.js | 98 ++++++++++++++++++++++ .../assets/javascripts/rectangles/models/floor.js | 8 +- views/controls/editor/sculpture.ejs | 42 ++++++++++ views/editor.ejs | 1 + views/partials/scripts.ejs | 3 + 7 files changed, 309 insertions(+), 2 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js create mode 100644 public/assets/javascripts/rectangles/engine/sculpture/types/image.js create mode 100644 views/controls/editor/sculpture.ejs (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index 1232780..b976ea2 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -195,5 +195,70 @@ }, }, + // + { + type: "create-sculpture", + undo: function(state){ + Sculpture.remove(state.id) + Sculpture.resize.hide() + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + }, + redo: function(state){ + var scenery = Sculpture.deserialize([ state ]) + Sculpture.resize.show( sculpture ) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + }, + }, + { + type: "update-sculpture", + undo: function(state){ + var sculpture = Sculpture.find(state.id) + + sculpture.deserialize(state) + + if (editor.permissions.resize) { + Sculpture.resize.show(sculpture) + } + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + }, + redo: function(state){ + var sculpture = Sculpture.find(state.id) + + sculpture.deserialize(state) + + if (editor.permissions.resize) { + Sculpture.resize.show(sculpture) + Sculpture.resize.move_dots() + Sculpture.resize.rotate_dots() + } + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + }, + }, + { + type: "destroy-sculpture", + undo: function(state){ + var sculpture = Sculpture.deserialize([ state ]) + Sculpture.resize.show( sculpture ) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + }, + redo: function(state){ + Sculpture.resize.hide() + Sculpture.remove(state.id) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + }, + }, + ]) })() diff --git a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js new file mode 100644 index 0000000..eb64e92 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js @@ -0,0 +1,94 @@ + +var Sculpture = new function(){ + + var base = this; + + base.list = {} + base.nextMedia = null + + base.mouse = new mouse ({ use_offset: false, mousedownUsesCapture: true }) + + base.init = function(){ + } + + base.add = function(opt){ + var scene_media + switch (opt.media.type) { + case 'image': + scene_media = new Sculpture.types.image (opt) + break + } + base.list[scene_media.id] = scene_media + return scene_media + } + + base.addNextToWall = function(opt){ + opt.newMedia = true + opt.media = base.nextMedia + opt.index = opt.index || 0 + var scene_media = base.add(opt) + + // test if scenery was placed here + if (! scene_media) { + return null + } + else { + base.nextMedia = null + return scene_media + } + } + + base.find = function(id){ + return base.list[id] || null + } + + base.remove = function(id){ + var scene_media = base.list[id] + delete base.list[id] + scene_media && scene_media.destroy() + } + + base.removeAll = function(){ + base.forEach(function(scene_media){ + base.remove(scene_media.id) + }) + } + + base.uid = new UidGenerator(base.list) + + base.forEach = function(f){ + return base.values().forEach(f) + } + + base.map = function(f){ + return base.values().map(f) + } + + base.values = function(){ + return _.values(base.list) + } + + base.serialize = function(){ + var sculptures = base.map(function(sculpture){ + return sculpture.serialize() + }) + return sculptures + } + + base.deserialize = function(sculpture_data){ + var added = [] + sculpture_data.forEach(function(data){ + var scene_media = base.add({ + id: data.id, + data: data, + media: data.media, + }) + added.push(scene_media) + }) + return added + } + + return base +} + +Sculpture.types = {} diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js new file mode 100644 index 0000000..af538f7 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js @@ -0,0 +1,98 @@ +Scenery.types.base = Fiber.extend(function(base){ + + var exports = { + + init: function(opt){ + _.bindAll(this, 'enter', 'leave') + + this.id = opt.id || Scenery.uid("scenery") + this.move = new Scenery.move (this) + this.media = opt.media + this.naturalDimensions = new vec2(this.media.width, this.media.height) + + this.set_scale( opt.scale || this.media.scale || 1.0 ) + this.position = new vec2(0,0) + }, + + set_scale: function(scale){ + this.scale = scale || 1.0 + if (this.mx) { + this.mx.scale = this.mx.ops.scale = this.scale + } + this.dimensions = this.naturalDimensions.clone().mul(this.scale) + }, + + bind: function(){ + this.move.bind() +// $(this.mx.el).bind({ +// mouseenter: this.enter, +// mouseleave: this.leave, +// }) + }, + + unbind: function(){ + this.move.unbind() +// $(this.mx.el).unbind({ +// mouseenter: this.enter, +// mouseleave: this.leave, +// }) + }, + + remove: function(){ + if (this.removed) return + this.removed = true + + UndoStack.push({ + type: 'destroy-sculpture', + undo: this.serialize(), + redo: { id: this.id }, + }) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + + Scenery.remove(this.id) + + Scenery.resize.hide() + if (app.controller.mediaEditor) { + app.controller.mediaEditor.tainted = false + app.controller.mediaEditor.hide() + } + if (app.controller.textEditor) { + app.controller.textEditor.tainted = false + app.controller.textEditor.hide() + } + }, + + destroy: function(){ + this.unbind() + scene.remove(this.mx) + this.mx.media = null + this.mx.ops = null + this.mx = null + this.move = null + this.media = null + this.dimensions = null + this.naturalDimensions = null + this.wall = null + this.bounds = null + this.center = null + }, + + serialize: function(){ + var data = { + id: this.id, + wall_id: this.wall && this.wall.id, + side: this.wall && this.wall.side, + dimensions: this.dimensions.serialize(), + position: app.position(this.mx), + scale: this.scale, + media: this.media, + } + return data + }, + } + + return exports + +}) diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js index ac1f8c9..439c16a 100644 --- a/public/assets/javascripts/rectangles/models/floor.js +++ b/public/assets/javascripts/rectangles/models/floor.js @@ -68,8 +68,12 @@ } return } - - if (Scenery.nextWallpaper) { + + if (Scenery.nextMedia) { + e.preventDefault() + // + } + else if (Scenery.nextWallpaper) { var oldState = base.serialize() base.wallpaper(Scenery.nextWallpaper) // Scenery.nextWallpaper = null diff --git a/views/controls/editor/sculpture.ejs b/views/controls/editor/sculpture.ejs new file mode 100644 index 0000000..21e5039 --- /dev/null +++ b/views/controls/editor/sculpture.ejs @@ -0,0 +1,42 @@ +
    +

    3D Object

    + + + + +
    + +
    + +
    + +
    + +
    + + + +
    + +
    + + +
    + +
    + + +
    +
    + + +
    +
    + + +
    +
    + remove object +
    + +
    diff --git a/views/editor.ejs b/views/editor.ejs index 74e4d6d..08959a0 100755 --- a/views/editor.ejs +++ b/views/editor.ejs @@ -16,6 +16,7 @@ [[ include controls/builder/info ]] [[ include controls/editor/media-drawer ]] [[ include controls/editor/media-editor ]] + [[ include controls/editor/sculpture ]] [[ include controls/editor/wallpaper ]] [[ include controls/editor/color-control ]] [[ include controls/editor/text-editor ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 72aaa8c..6cc5315 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -73,6 +73,9 @@ + + + -- cgit v1.2.3-70-g09d2 From f9112718b560d4cc8380dd905d6cb60c497230bb Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 1 Apr 2015 21:42:40 -0400 Subject: get x/z position when clicking floor --- .../assets/javascripts/rectangles/models/floor.js | 36 ++++++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js index 439c16a..7b020a9 100644 --- a/public/assets/javascripts/rectangles/models/floor.js +++ b/public/assets/javascripts/rectangles/models/floor.js @@ -69,9 +69,41 @@ return } + + var offset = offsetFromPoint(e, mx.el) + if (! offset) { return } + + var x = mx.x + mx.width * (offset.left-0.5) + var z = mx.z + mx.height * (0.5-offset.top) + if (Scenery.nextMedia) { e.preventDefault() - // + + var sculpture = Sculpture.addNextToWall({ + index: index, + position: pos, + }) + + // scenery was not placed + if (! sculpture) { + e.stopPropagation() + return + } + + app.controller.toolbar.resetPermissions() + Sculpture.resize.show(sculpture) + Sculpture.hovering = true + + // app.controller.pick(sculpture) + + UndoStack.push({ + type: 'create-sculpture', + undo: { id: sculpture.id }, + redo: sculpture.serialize(), + }) + + // TODO: watch individual sculpture object here + Minotaur.watch( app.router.editorView.settings ) } else if (Scenery.nextWallpaper) { var oldState = base.serialize() @@ -102,7 +134,7 @@ this.mx.reverse() } } - + Floor.prototype.color = function(color){ this.$els.css("background-color", color) } -- cgit v1.2.3-70-g09d2 From c6eea0f4887ba14e5a6ecfff8c9e8480ae6421c1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 2 Apr 2015 17:05:31 -0400 Subject: placing objects on the floor --- .../rectangles/engine/sculpture/_sculpture.js | 24 +++-- .../rectangles/engine/sculpture/types/_object.js | 91 +++++++++++++++++ .../rectangles/engine/sculpture/types/image.js | 110 ++++++--------------- .../assets/javascripts/rectangles/models/floor.js | 7 +- .../assets/javascripts/rectangles/models/vec3.js | 9 ++ .../assets/javascripts/ui/editor/EditorSettings.js | 3 + server/lib/schemas/Project.js | 1 + views/partials/scripts.ejs | 1 + 8 files changed, 149 insertions(+), 97 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/sculpture/types/_object.js (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js index eb64e92..c8c90d3 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js @@ -4,7 +4,6 @@ var Sculpture = new function(){ var base = this; base.list = {} - base.nextMedia = null base.mouse = new mouse ({ use_offset: false, mousedownUsesCapture: true }) @@ -12,29 +11,28 @@ var Sculpture = new function(){ } base.add = function(opt){ - var scene_media + var sculpture switch (opt.media.type) { case 'image': - scene_media = new Sculpture.types.image (opt) + sculpture = new Sculpture.types.image (opt) break } - base.list[scene_media.id] = scene_media - return scene_media + base.list[sculpture.id] = sculpture + return sculpture } - base.addNextToWall = function(opt){ + base.addNext = function(opt){ opt.newMedia = true - opt.media = base.nextMedia - opt.index = opt.index || 0 - var scene_media = base.add(opt) + opt.media = Scenery.nextMedia + var sculpture = base.add(opt) - // test if scenery was placed here - if (! scene_media) { + // test if sculpture was placed here + if (! sculpture) { return null } else { - base.nextMedia = null - return scene_media + Scenery.nextMedia = null + return sculpture } } diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js new file mode 100644 index 0000000..fa6b0b1 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -0,0 +1,91 @@ +Sculpture.types.base = Fiber.extend(function(base){ + + var exports = { + + init: function(opt){ + this.id = opt.id || Sculpture.uid("sculpture") + // this.move = new Sculpture.move (this) + this.media = opt.media + this.naturalDimensions = new vec2(this.media.width, this.media.height) + + this.set_scale( opt.scale || this.media.scale || 1.0 ) + this.position = new vec2(0,0) + }, + + set_scale: function(scale){ + this.scale = scale || 1.0 + if (this.mx) { + this.mx.scale = this.mx.ops.scale = this.scale + } + this.dimensions = this.naturalDimensions.clone().mul(this.scale) + }, + + place: function(opt){ + if (opt.data) { + this.deserialize(opt.data) + } + else { + this.mx.move(opt.position) + } + }, + + bind: function(){ + // this.move.bind() + }, + + unbind: function(){ + // this.move.unbind() + }, + + remove: function(){ + if (this.removed) return + this.removed = true + + UndoStack.push({ + type: 'destroy-sculpture', + undo: this.serialize(), + redo: { id: this.id }, + }) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + + Sculpture.remove(this.id) + + // Sculpture.resize.hide() + if (app.controller.sculptureEditor) { + app.controller.sculptureEditor.tainted = false + app.controller.sculptureEditor.hide() + } + }, + + destroy: function(){ + this.unbind() + scene.remove(this.mx) + this.mx.media = null + this.mx.ops = null + this.mx = null + this.move = null + this.media = null + this.dimensions = null + this.naturalDimensions = null + this.wall = null + this.bounds = null + this.center = null + }, + + serialize: function(){ + var data = { + id: this.id, + dimensions: this.dimensions.serialize(), + position: app.position(this.mx), + scale: this.scale, + media: this.media, + } + return data + }, + } + + return exports + +}) diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js index af538f7..ae62133 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js @@ -1,98 +1,48 @@ -Scenery.types.base = Fiber.extend(function(base){ - var exports = { +Sculpture.types.image = Sculpture.types.base.extend(function(base){ + var exports = { + + type: 'image', + init: function(opt){ - _.bindAll(this, 'enter', 'leave') - this.id = opt.id || Scenery.uid("scenery") - this.move = new Scenery.move (this) - this.media = opt.media - this.naturalDimensions = new vec2(this.media.width, this.media.height) - - this.set_scale( opt.scale || this.media.scale || 1.0 ) - this.position = new vec2(0,0) - }, + opt.scale = opt.scale || (opt.data && opt.data.scale) || DEFAULT_PICTURE_WIDTH / max(DEFAULT_PICTURE_WIDTH, opt.media.width) - set_scale: function(scale){ - this.scale = scale || 1.0 - if (this.mx) { - this.mx.scale = this.mx.ops.scale = this.scale - } - this.dimensions = this.naturalDimensions.clone().mul(this.scale) - }, - - bind: function(){ - this.move.bind() -// $(this.mx.el).bind({ -// mouseenter: this.enter, -// mouseleave: this.leave, -// }) - }, - - unbind: function(){ - this.move.unbind() -// $(this.mx.el).unbind({ -// mouseenter: this.enter, -// mouseleave: this.leave, -// }) - }, - - remove: function(){ - if (this.removed) return - this.removed = true - - UndoStack.push({ - type: 'destroy-sculpture', - undo: this.serialize(), - redo: { id: this.id }, - }) + base.init.call(this, opt) - // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) + this.build(opt) + this.bind() + this.place(opt) + }, - Scenery.remove(this.id) + build: function(opt){ + this.footprint = new MX.Object3D() + this.mx = new MX.Image({ + src: this.media.url, + scale: this.scale, + media: this.media, + backface: true, + }) - Scenery.resize.hide() - if (app.controller.mediaEditor) { - app.controller.mediaEditor.tainted = false - app.controller.mediaEditor.hide() - } - if (app.controller.textEditor) { - app.controller.textEditor.tainted = false - app.controller.textEditor.hide() - } - }, + opt.position.y = opt.position.y || this.scale * this.media.height/2, + opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY, - destroy: function(){ - this.unbind() - scene.remove(this.mx) - this.mx.media = null - this.mx.ops = null - this.mx = null - this.move = null - this.media = null - this.dimensions = null - this.naturalDimensions = null - this.wall = null - this.bounds = null - this.center = null + scene.add( this.mx ) }, serialize: function(){ - var data = { - id: this.id, - wall_id: this.wall && this.wall.id, - side: this.wall && this.wall.side, - dimensions: this.dimensions.serialize(), - position: app.position(this.mx), - scale: this.scale, - media: this.media, - } + var data = base.serialize.call(this) return data }, + + deserialize: function(data){ + this.mx.move(data.position) + this.mx.ops.width = data.dimensions.a + this.mx.ops.height = data.dimensions.b + this.dimensions.deserialize(data.dimensions) + }, } return exports - }) diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js index 7b020a9..530de2b 100644 --- a/public/assets/javascripts/rectangles/models/floor.js +++ b/public/assets/javascripts/rectangles/models/floor.js @@ -79,9 +79,8 @@ if (Scenery.nextMedia) { e.preventDefault() - var sculpture = Sculpture.addNextToWall({ - index: index, - position: pos, + var sculpture = Sculpture.addNext({ + position: { x: x, y: 0, z: z }, }) // scenery was not placed @@ -91,7 +90,7 @@ } app.controller.toolbar.resetPermissions() - Sculpture.resize.show(sculpture) + // Sculpture.resize.show(sculpture) Sculpture.hovering = true // app.controller.pick(sculpture) diff --git a/public/assets/javascripts/rectangles/models/vec3.js b/public/assets/javascripts/rectangles/models/vec3.js index c44dfe6..97329ed 100644 --- a/public/assets/javascripts/rectangles/models/vec3.js +++ b/public/assets/javascripts/rectangles/models/vec3.js @@ -32,3 +32,12 @@ vec3.prototype.apply_projection = function (m) { return this; } + +vec3.prototype.serialize = function(){ + return [ round(this.a), round(this.b), round(this.c) ] +} +vec3.prototype.deserialize = function(data){ + this.a = data[0] + this.b = data[1] + this.c = data[2] +} \ No newline at end of file diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index b319404..460863e 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -77,6 +77,7 @@ var EditorSettings = FormView.extend({ data.privacy && this.$privacy.find("[value=" + data.privacy + "]").prop("checked", "checked") data.media && Scenery.deserialize(data.media) + data.sculpture && Sculpture.deserialize(data.sculpture) } }, @@ -112,6 +113,7 @@ var EditorSettings = FormView.extend({ clear: function(e){ e.preventDefault() Scenery.removeAll() + Sculpture.removeAll() }, destroy: function(){ @@ -191,6 +193,7 @@ var EditorSettings = FormView.extend({ fd.append( "walls", JSON.stringify( Walls.serialize() ) ) fd.append( "colors", JSON.stringify( Walls.colors ) ) fd.append( "media", JSON.stringify( Scenery.serialize() ) ) + fd.append( "sculpture", JSON.stringify( Sculpture.serialize() ) ) fd.append( "startPosition", JSON.stringify( this.startPosition || false ) ) fd.append( "lastPosition", JSON.stringify( app.position(scene.camera) ) ) diff --git a/server/lib/schemas/Project.js b/server/lib/schemas/Project.js index a923d85..e9501fc 100644 --- a/server/lib/schemas/Project.js +++ b/server/lib/schemas/Project.js @@ -30,6 +30,7 @@ var ProjectSchema = new mongoose.Schema({ rooms: [mongoose.Schema.Types.Mixed], walls: [mongoose.Schema.Types.Mixed], media: [mongoose.Schema.Types.Mixed], + sculpture: [mongoose.Schema.Types.Mixed], colors: mongoose.Schema.Types.Mixed, startPosition: mongoose.Schema.Types.Mixed, lastPosition: mongoose.Schema.Types.Mixed, diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 6cc5315..ca6cc94 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -74,6 +74,7 @@ + -- cgit v1.2.3-70-g09d2 From 3986bd98b0c0a4674310aa6425c75dba5962f2c7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 3 Apr 2015 16:23:51 -0400 Subject: persist sculpture to db --- .../assets/javascripts/rectangles/engine/sculpture/types/image.js | 8 +++++--- server/lib/api/projects.js | 4 +++- 2 files changed, 8 insertions(+), 4 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js index ae62133..914abdf 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js @@ -25,9 +25,11 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ backface: true, }) - opt.position.y = opt.position.y || this.scale * this.media.height/2, - opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY, - + if (opt.position) { + opt.position.y = opt.position.y || this.scale * this.media.height/2 + 5 + opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY + } + scene.add( this.mx ) }, diff --git a/server/lib/api/projects.js b/server/lib/api/projects.js index 1bf046f..3810168 100644 --- a/server/lib/api/projects.js +++ b/server/lib/api/projects.js @@ -40,6 +40,7 @@ var projects = { data.rooms = JSON.parse(data.rooms) data.walls = JSON.parse(data.walls) data.media = JSON.parse(data.media) + data.sculpture = JSON.parse(data.sculpture) data.colors = JSON.parse(data.colors) data.startPosition = JSON.parse(data.startPosition) data.lastPosition = JSON.parse(data.lastPosition) @@ -100,11 +101,12 @@ var projects = { data.updated_at = new Date () _.extend(doc, data) - + doc.rooms = JSON.parse(data.rooms) doc.walls = JSON.parse(data.walls) doc.colors = JSON.parse(data.colors) doc.media = JSON.parse(data.media) + doc.sculpture = JSON.parse(data.sculpture) doc.startPosition = JSON.parse(data.startPosition) doc.lastPosition = JSON.parse(data.lastPosition) -- cgit v1.2.3-70-g09d2 From 66e10f749fcc35e779e2492521b8dd98a8770820 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 3 Apr 2015 16:54:51 -0400 Subject: billboard mode --- public/assets/javascripts/rectangles/_env.js | 1 + .../assets/javascripts/rectangles/engine/sculpture/_sculpture.js | 9 +++++++++ .../javascripts/rectangles/engine/sculpture/types/image.js | 3 +++ 3 files changed, 13 insertions(+) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js index 3221bac..14f73e3 100644 --- a/public/assets/javascripts/rectangles/_env.js +++ b/public/assets/javascripts/rectangles/_env.js @@ -20,6 +20,7 @@ environment.init = function(){ Rooms.init() Walls.init() Scenery.init() + Sculpture.init() scene.update() environment.update() diff --git a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js index c8c90d3..1543def 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js @@ -8,6 +8,15 @@ var Sculpture = new function(){ base.mouse = new mouse ({ use_offset: false, mousedownUsesCapture: true }) base.init = function(){ + app.on("move", base.updateBillboards) + } + + base.updateBillboards = function(){ + base.forEach(function(sculpture){ + if (sculpture.billboard) { + sculpture.mx.rotationY = cam.rotationY + } + }) } base.add = function(opt){ diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js index 914abdf..9399097 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js @@ -28,6 +28,7 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ if (opt.position) { opt.position.y = opt.position.y || this.scale * this.media.height/2 + 5 opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY + this.billboard = true } scene.add( this.mx ) @@ -35,6 +36,7 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ serialize: function(){ var data = base.serialize.call(this) + data.billboard = this.billboard return data }, @@ -42,6 +44,7 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ this.mx.move(data.position) this.mx.ops.width = data.dimensions.a this.mx.ops.height = data.dimensions.b + this.billboard = data.billboard this.dimensions.deserialize(data.dimensions) }, } -- cgit v1.2.3-70-g09d2 From 1f4d4c1034f7e3403c9671bd88e6e83d22696dcb Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 3 Apr 2015 17:30:37 -0400 Subject: backface --- .../assets/javascripts/rectangles/engine/sculpture/types/image.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js index 9399097..9e8de58 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js @@ -17,7 +17,6 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ }, build: function(opt){ - this.footprint = new MX.Object3D() this.mx = new MX.Image({ src: this.media.url, scale: this.scale, @@ -26,9 +25,10 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ }) if (opt.position) { - opt.position.y = opt.position.y || this.scale * this.media.height/2 + 5 + opt.position.y = opt.position.y || this.scale * this.media.height/2 + 3 opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY this.billboard = true + this.backface = true } scene.add( this.mx ) @@ -37,6 +37,7 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ serialize: function(){ var data = base.serialize.call(this) data.billboard = this.billboard + data.backface = this.backface return data }, @@ -45,6 +46,8 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ this.mx.ops.width = data.dimensions.a this.mx.ops.height = data.dimensions.b this.billboard = data.billboard + this.backface = data.backface + if (! this.backface) this.mx.el.classList.remove("backface-visible") this.dimensions.deserialize(data.dimensions) }, } -- cgit v1.2.3-70-g09d2 From 519ff21e00c5c48d06e1ddee0cdc1dc3d90a26f8 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 3 Apr 2015 18:40:04 -0400 Subject: pulling in move code / view code --- .../rectangles/engine/scenery/resize.js | 1 + .../rectangles/engine/sculpture/move.js | 158 ++++++++++++++++ .../rectangles/engine/sculpture/types/_object.js | 22 ++- .../rectangles/engine/sculpture/types/image.js | 18 -- public/assets/javascripts/ui/editor/EditorView.js | 10 +- .../javascripts/ui/editor/SculptureEditor.js | 200 +++++++++++++++++++++ views/partials/scripts.ejs | 2 + 7 files changed, 390 insertions(+), 21 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/sculpture/move.js create mode 100644 public/assets/javascripts/ui/editor/SculptureEditor.js (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index 73fd82a..a5e255a 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -49,6 +49,7 @@ Scenery.resize = new function(){ // rotate the dots as appropriate base.rotate_dots = function(){ + console.trace() rotationY = obj.wall.rotationY dots.forEach(function(dot){ dot.rotationY = rotationY diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js new file mode 100644 index 0000000..b5a4b40 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js @@ -0,0 +1,158 @@ + +Sculpture.move = function(base){ + + var x, y, z, position, dimension, bounds + var dragging = false, moved = false + var oldState + + this.bind = function(){ + Sculpture.mouse.bind_el(base.mx.el) + Sculpture.mouse.on("down", down) + Sculpture.mouse.on("enter", switch_wall) + Sculpture.mouse.on("drag", drag) + Sculpture.mouse.on("up", up) + } + + this.unbind = function(){ + base.focused = false + Sculpture.mouse.unbind_el(base.mx.el) + Sculpture.mouse.off("down", down) + Sculpture.mouse.off("enter", switch_wall) + Sculpture.mouse.off("drag", drag) + Sculpture.mouse.off("up", up) + } + + function down (e, cursor){ + if (e.target != base.mx.el && (e.target != base.mx.overlay)) return; + if (editor.permissions.destroy) { + base.remove() + return + } + + // load the modal + app.controller.pick(base) + + if (! base.focused) { + e.clickAccepted = false + base.focused = true + return + } + if (! (editor.permissions.move || editor.permissions.resize) ) { + e.clickAccepted = false + return + } + dragging = true + moved = false + x = base.mx.x + y = base.mx.y + z = base.mx.z + + bounds = base.bounds + dimension = base.dimensions + position = base.wall.mxToPosition( base.mx, dimension ) + + oldState = base.serialize() + document.body.classList.add("dragging") + } + + function drag (e, cursor){ + if (! dragging) return + + moved = true + + var flipX = base.wall.side & (FRONT | RIGHT) + + var delta = cursor.delta() + delta.mul( cursor_amp ) // TODO: this should be proportional to your distance from the wall + if (flipX) { delta.a *= -1 } + delta.b *= -1 + + var new_bounds = base.wall.surface.translate( bounds, dimension, position, delta ) + if (new_bounds) bounds = new_bounds + if (flipX) { delta.a *= -1 } + + base.mx.y = position.b + delta.b + dimension.b / 2 + switch (base.wall.side) { + case FRONT: + case BACK: + base.mx.x = position.a + delta.a * cos(base.wall.rotationY) + dimension.a / 2 + break + case LEFT: + case RIGHT: + base.mx.z = position.a + delta.a * sin(base.wall.rotationY) + dimension.a / 2 + break + } + + if (editor.permissions.resize) { + Sculpture.resize.move_dots() + } + } + + function up (e, cursor){ + if (! dragging || ! oldState) return + + if (moved) { + UndoStack.push({ + type: 'update-sculpture', + undo: oldState, + redo: base.serialize(), + }) + + // TODO: watch individual sculpture object here + Minotaur.watch( app.router.editorView.settings ) + } + + dragging = moved = false + oldState = null + document.body.classList.remove("dragging") + } + + function switch_wall (e, target, cursor){ + if (! dragging) return + if (target.wall.id == base.wall.id) return + + var old_wall_side = base.wall.side + var wall_group = old_wall_side | target.wall.side + var new_bounds = target.wall.surface.bounds_at_index_with_dimensions(target.index || 0, dimension) + + if (! new_bounds) return + + base.wall = target.wall + base.bounds = bounds = new_bounds + + position.a = bounds.x.midpoint() - dimension.a / 2 + + if (old_wall_side !== target.wall.side && wall_group !== FRONT_BACK && wall_group !== LEFT_RIGHT) { + switch (old_wall_side) { + case FRONT: + position.a = bounds.x.a + dimension.a / 2 + break + case BACK: + position.a = bounds.x.b - dimension.a / 2 + break + case LEFT: + position.a = bounds.x.a + dimension.a / 2 + break + case RIGHT: + position.a = bounds.x.b - dimension.a / 2 + break + } + } + + var mx_delta = base.wall.positionToMx( position, dimension ) + base.mx.move(mx_delta) + + if (editor.permissions.resize) { + Sculpture.resize.rotate_dots() + Sculpture.resize.move_dots() + } + + cursor.x.a = cursor.x.b + //var delta = cursor.delta() + drag(e, cursor) + + } + + return this + +} \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index fa6b0b1..6c93b41 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -8,8 +8,14 @@ Sculpture.types.base = Fiber.extend(function(base){ this.media = opt.media this.naturalDimensions = new vec2(this.media.width, this.media.height) + this.move = new Sculpture.move (this) + this.billboard = true + this.backface = true + this.set_scale( opt.scale || this.media.scale || 1.0 ) this.position = new vec2(0,0) + + this.isSculpture = true }, set_scale: function(scale){ @@ -30,11 +36,11 @@ Sculpture.types.base = Fiber.extend(function(base){ }, bind: function(){ - // this.move.bind() + this.move.bind() }, unbind: function(){ - // this.move.unbind() + this.move.unbind() }, remove: function(){ @@ -81,9 +87,21 @@ Sculpture.types.base = Fiber.extend(function(base){ position: app.position(this.mx), scale: this.scale, media: this.media, + billboard: this.billboard, + backface: this.backface, } return data }, + + deserialize: function(data){ + this.mx.move(data.position) + this.mx.ops.width = data.dimensions.a + this.mx.ops.height = data.dimensions.b + this.billboard = data.billboard + this.backface = data.backface + if (! this.backface) this.mx.el.classList.remove("backface-visible") + this.dimensions.deserialize(data.dimensions) + }, } return exports diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js index 9e8de58..3e5ab08 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js @@ -27,29 +27,11 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ if (opt.position) { opt.position.y = opt.position.y || this.scale * this.media.height/2 + 3 opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY - this.billboard = true - this.backface = true } scene.add( this.mx ) }, - serialize: function(){ - var data = base.serialize.call(this) - data.billboard = this.billboard - data.backface = this.backface - return data - }, - - deserialize: function(data){ - this.mx.move(data.position) - this.mx.ops.width = data.dimensions.a - this.mx.ops.height = data.dimensions.b - this.billboard = data.billboard - this.backface = data.backface - if (! this.backface) this.mx.el.classList.remove("backface-visible") - this.dimensions.deserialize(data.dimensions) - }, } return exports diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 50d3650..e5e2ca0 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -17,6 +17,7 @@ var EditorView = View.extend({ this.mediaUpload = new MediaUpload ({ parent: this }) this.mediaTumblr = new MediaTumblr ({ parent: this }) this.mediaEditor = new MediaEditor ({ parent: this }) + this.sculptureEditor = new SculptureEditor ({ parent: this }) this.wallpaperPicker = new WallpaperPicker ({ parent: this }) this.colorControl = new ColorControl ({ parent: this }) this.textEditor = new TextEditor ({ parent: this }) @@ -56,12 +57,19 @@ var EditorView = View.extend({ }, pick: function(scenery){ - if (scenery.type == "text") { + if (scenery.isSculpture) { this.mediaEditor.hide() + this.textEditor.hide() + this.sculptureEditor.pick(scenery) + } + else if (scenery.type == "text") { + this.mediaEditor.hide() + this.sculptureEditor.hide() this.textEditor.pick(scenery) } else { this.textEditor.hide() + this.sculptureEditor.hide() this.mediaEditor.pick(scenery) } }, diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js new file mode 100644 index 0000000..cce000e --- /dev/null +++ b/public/assets/javascripts/ui/editor/SculptureEditor.js @@ -0,0 +1,200 @@ + +var SculptureEditor = FormView.extend({ + el: "#sculptureEditor", + + events: { + "keydown": 'taint', + "focus [name]": "clearMinotaur", + "click [data-role=play-media]": "togglePaused", + "mousedown [name=keyframe]": "stopPropagation", + "mousedown": "stopPropagation", + "change [name=keyframe]": "seek", + "change [name=autoplay]": "setAutoplay", + "change [name=loop]": "setLoop", + "change [name=mute]": "setMute", + "change [name=width]": 'changeWidth', + "change [name=height]": 'changeHeight', + "change [name=units]": 'changeUnits', + "click [data-role=destroy-media]": "destroy", + }, + + initialize: function(opt){ + this.parent = opt.parent + this.__super__.initialize.call(this) + + this.$name = this.$("[name=name]") + this.$description = this.$("[name=description]") + + // image fields + this.$width = this.$("[name=width]") + this.$height = this.$("[name=height]") + this.$units = this.$("[name=units]") + + // video fields + this.$playButton = this.$("[data-role=play-media]") + this.$autoplay = this.$("[name=autoplay]") + this.$loop = this.$("[name=loop]") + this.$mute = this.$("[name=mute]") + this.$keyframe = this.$("[name=keyframe]") + }, + + toggle: function(state) { + if (state) { + this.parent.settings.toggle() + } + this.$el.toggleClass("active", state); + }, + + togglePaused: function(state){ + var state = this.sculpture.toggle(state) + this.$playButton.toggleClass("paused", ! state) + }, + + pick: function(sculpture) { + if (this.sculpture && sculpture !== this.sculpture) { + this.unbind() + } + + this.bind(sculpture) + this.$el.addClass("active") + +// app.controller.toolbar.resetMode() + app.controller.toolbar.resetControls() + // Sculpture.resize.show(sculpture) + Sculpture.hovering = true + + var media = sculpture.media + + // console.log(media) + + this.$name.val(media.title) // || filenameFromUrl(media.url) ) + this.$description.val(media.description) + this.setDimensions() + this.$units.val( "ft" ) + + switch (media.type) { + case "image": + this.$(".video").hide() + this.$(".audio").hide() + this.$(".image").show() + break + + case "youtube": + case "vimeo": + case "video": + this.$(".image").hide() + this.$(".audio").hide() + this.$(".video").show() + + this.$playButton.toggleClass("paused", ! this.sculpture.paused()) + this.$autoplay.prop('checked', !! media.autoplay) + this.$loop.prop('checked', !! media.loop) + this.$mute.prop('checked', !! media.mute) + this.$keyframe.val( Number(media.keyframe || 0) ) + break + + case "soundcloud": + this.$(".image").hide() + this.$(".video").hide() + this.$(".audio").show() + this.$playButton.toggleClass("paused", ! this.sculpture.paused()) + this.$autoplay.prop('checked', !! media.autoplay) + this.$loop.prop('checked', !! media.loop) + break + } + }, + + hide: function(sculpture){ + if (this.sculpture) { + this.unbind() + } + this.toggle(false) + }, + + seek: function(){ + var n = parseFloat( this.$keyframe.val() ) + this.sculpture.seek(n) + this.tainted = true + + this.sculpture.media.keyframe = n + }, + setAutoplay: function(){ + var checked = this.$autoplay.prop('checked') + this.sculpture.media.autoplay = checked + this.tainted = true + if (checked && this.sculpture.paused()) { + this.togglePaused() + } + }, + setLoop: function(){ + var checked = this.$loop.prop('checked') + this.sculpture.setLoop(checked) + this.tainted = true + }, + setMute: function(){ + var checked = this.$mute.prop('checked') + this.sculpture.media.mute = checked + this.sculpture.mute(checked) + this.tainted = true + }, + + setDimensions: function(){ + if (! this.sculpture) return + this.$width.unitVal( Number(this.sculpture.naturalDimensions.a * this.sculpture.scale) || "" ) + this.$height.unitVal( Number(this.sculpture.naturalDimensions.b * this.sculpture.scale) || "" ) + this.tainted = true + }, + changeWidth: function(e){ + e.stopPropagation() + this.sculpture.set_scale( this.$width.unitVal() / this.sculpture.naturalDimensions.a ) + this.setDimensions() + }, + changeHeight: function(e){ + e.stopPropagation() + this.sculpture.set_scale( this.$height.unitVal() / this.sculpture.naturalDimensions.b ) + this.setDimensions() + }, + changeUnits: function(){ + app.units = this.$units.val() + this.$('.units').resetUnitVal() + }, + + taint: function(e){ + e.stopPropagation() + this.tainted = true + }, + + bind: function(sculpture){ + this.sculpture = sculpture + this.sculpture.mx.bound = true + this.sculpture.mx.el.classList.add("picked") + }, + + unbind: function(){ + if (this.sculpture) { + this.sculpture.focused = false + if (this.tainted && this.sculpture.media) { + this.sculpture.media.title = this.$name.val() + this.sculpture.media.description = this.$description.val() + Minotaur.watch( app.router.editorView.settings ) + } + if (this.sculpture.mx) { + this.sculpture.mx.bound = false + this.sculpture.mx.el.classList.remove("picked") + } + } + this.tainted = false + this.sculpture = null + }, + + destroy: function(){ + var sculpture = this.sculpture + this.hide() + + sculpture.remove() + + this.tainted = false + this.sculpture = null + }, + +}) diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index ca6cc94..1eda8bd 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -74,6 +74,7 @@ + @@ -124,6 +125,7 @@ + -- cgit v1.2.3-70-g09d2 From d7c461e09e9ed644e35be86f067ccbe6d19e8b8c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 3 Apr 2015 20:23:30 -0400 Subject: moving statues --- .../rectangles/engine/sculpture/move.js | 77 ++-------------------- 1 file changed, 7 insertions(+), 70 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js index b5a4b40..28d707e 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/move.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js @@ -8,7 +8,6 @@ Sculpture.move = function(base){ this.bind = function(){ Sculpture.mouse.bind_el(base.mx.el) Sculpture.mouse.on("down", down) - Sculpture.mouse.on("enter", switch_wall) Sculpture.mouse.on("drag", drag) Sculpture.mouse.on("up", up) } @@ -17,7 +16,6 @@ Sculpture.move = function(base){ base.focused = false Sculpture.mouse.unbind_el(base.mx.el) Sculpture.mouse.off("down", down) - Sculpture.mouse.off("enter", switch_wall) Sculpture.mouse.off("drag", drag) Sculpture.mouse.off("up", up) } @@ -49,7 +47,6 @@ Sculpture.move = function(base){ bounds = base.bounds dimension = base.dimensions - position = base.wall.mxToPosition( base.mx, dimension ) oldState = base.serialize() document.body.classList.add("dragging") @@ -60,32 +57,18 @@ Sculpture.move = function(base){ moved = true - var flipX = base.wall.side & (FRONT | RIGHT) - var delta = cursor.delta() delta.mul( cursor_amp ) // TODO: this should be proportional to your distance from the wall - if (flipX) { delta.a *= -1 } delta.b *= -1 - var new_bounds = base.wall.surface.translate( bounds, dimension, position, delta ) - if (new_bounds) bounds = new_bounds - if (flipX) { delta.a *= -1 } - - base.mx.y = position.b + delta.b + dimension.b / 2 - switch (base.wall.side) { - case FRONT: - case BACK: - base.mx.x = position.a + delta.a * cos(base.wall.rotationY) + dimension.a / 2 - break - case LEFT: - case RIGHT: - base.mx.z = position.a + delta.a * sin(base.wall.rotationY) + dimension.a / 2 - break - } + // here we need to move the element based on the XY coords, as + // base.mx.y = position.b + delta.b + dimension.b / 2 + base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY) + base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY) - if (editor.permissions.resize) { - Sculpture.resize.move_dots() - } +// if (editor.permissions.resize) { +// Sculpture.resize.move_dots() +// } } function up (e, cursor){ @@ -107,52 +90,6 @@ Sculpture.move = function(base){ document.body.classList.remove("dragging") } - function switch_wall (e, target, cursor){ - if (! dragging) return - if (target.wall.id == base.wall.id) return - - var old_wall_side = base.wall.side - var wall_group = old_wall_side | target.wall.side - var new_bounds = target.wall.surface.bounds_at_index_with_dimensions(target.index || 0, dimension) - - if (! new_bounds) return - - base.wall = target.wall - base.bounds = bounds = new_bounds - - position.a = bounds.x.midpoint() - dimension.a / 2 - - if (old_wall_side !== target.wall.side && wall_group !== FRONT_BACK && wall_group !== LEFT_RIGHT) { - switch (old_wall_side) { - case FRONT: - position.a = bounds.x.a + dimension.a / 2 - break - case BACK: - position.a = bounds.x.b - dimension.a / 2 - break - case LEFT: - position.a = bounds.x.a + dimension.a / 2 - break - case RIGHT: - position.a = bounds.x.b - dimension.a / 2 - break - } - } - - var mx_delta = base.wall.positionToMx( position, dimension ) - base.mx.move(mx_delta) - - if (editor.permissions.resize) { - Sculpture.resize.rotate_dots() - Sculpture.resize.move_dots() - } - - cursor.x.a = cursor.x.b - //var delta = cursor.delta() - drag(e, cursor) - - } - return this } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From f68450b1c3ece018009df5542b7e73b2b74852e7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 3 Apr 2015 20:39:44 -0400 Subject: sculpture on reader --- Gruntfile.js | 7 +++++++ public/assets/javascripts/ui/reader/ReaderView.js | 1 + 2 files changed, 8 insertions(+) (limited to 'public') diff --git a/Gruntfile.js b/Gruntfile.js index 70a8b13..026ec6f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -32,6 +32,7 @@ module.exports = function(grunt) { "public/assets/javascripts/mx/primitives/mx.youtube.js", "public/assets/javascripts/mx/primitives/mx.vimeo.js", "public/assets/javascripts/mx/primitives/mx.soundcloud.js", + "public/assets/javascripts/mx/primitives/mx.grid.js", "public/assets/javascripts/rectangles/_env.js", @@ -76,6 +77,11 @@ module.exports = function(grunt) { "public/assets/javascripts/rectangles/engine/scenery/types/video.js", "public/assets/javascripts/rectangles/engine/scenery/types/audio.js", + "public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js", + "public/assets/javascripts/rectangles/engine/sculpture/move.js", + "public/assets/javascripts/rectangles/engine/sculpture/types/_object.js", + "public/assets/javascripts/rectangles/engine/sculpture/types/image.js", + "public/assets/javascripts/rectangles/engine/map/_map.js", "public/assets/javascripts/rectangles/engine/map/ui_editor.js", "public/assets/javascripts/rectangles/engine/map/ui_minimap.js", @@ -123,6 +129,7 @@ module.exports = function(grunt) { "public/assets/javascripts/ui/editor/MediaUpload.js", "public/assets/javascripts/ui/editor/MediaViewer.js", "public/assets/javascripts/ui/editor/Presets.js", + "public/assets/javascripts/ui/editor/SculptureEditor.js", "public/assets/javascripts/ui/editor/TextEditor.js", "public/assets/javascripts/ui/editor/WallpaperPicker.js", diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index 617a145..e3e27c3 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -74,6 +74,7 @@ var ReaderView = View.extend({ data.rooms && Rooms.deserialize(data.rooms) data.walls && Walls.deserialize(data.walls) data.media && Scenery.deserialize(data.media) + data.sculpture && Sculpture.deserialize(data.sculpture) data.startPosition && scene.camera.move(data.startPosition) cam.y = window.viewHeight = data.viewHeight || app.defaults.viewHeight -- cgit v1.2.3-70-g09d2 From 24543d0839ad51b2afa7195b16d29bc52b3f1a1b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 13:15:19 -0400 Subject: remove sculpture --- .../javascripts/mx/extensions/mx.movements.js | 5 +++- .../rectangles/engine/sculpture/types/_object.js | 12 +++++++++ .../javascripts/ui/editor/SculptureEditor.js | 31 +++++++++++++++++++++- public/assets/stylesheets/app.css | 3 +++ views/controls/editor/sculpture.ejs | 10 +++---- 5 files changed, 54 insertions(+), 7 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index bc71fc4..931caac 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -162,7 +162,10 @@ MX.Movements = function (cam) { case 8: // backspace e.preventDefault() - if (app.controller.mediaEditor.scenery) { + if (app.controller.sculptureEditor.sculpture) { + app.controller.sculptureEditor.sculpture.remove() + } + else if (app.controller.mediaEditor.scenery) { app.controller.mediaEditor.scenery.remove() } else if (app.controller.textEditor.scenery) { diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index 6c93b41..48fd96a 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -43,6 +43,18 @@ Sculpture.types.base = Fiber.extend(function(base){ this.move.unbind() }, + setOutline: function(val){ + this.outline = val + // show/hide outline + }, + setOutlineColor: function(val){ + this.outlineColor = val + // set outline color + }, + setBillboard: function(val){ + this.billboard = val + }, + remove: function(){ if (this.removed) return this.removed = true diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js index cce000e..ab0ccd2 100644 --- a/public/assets/javascripts/ui/editor/SculptureEditor.js +++ b/public/assets/javascripts/ui/editor/SculptureEditor.js @@ -10,12 +10,15 @@ var SculptureEditor = FormView.extend({ "mousedown": "stopPropagation", "change [name=keyframe]": "seek", "change [name=autoplay]": "setAutoplay", + "change [name=billboard]": "setBillboard", + "change [name=outline]": "setOutline", + "change [name=outlineColor]": "setOutlineColor", "change [name=loop]": "setLoop", "change [name=mute]": "setMute", "change [name=width]": 'changeWidth', "change [name=height]": 'changeHeight', "change [name=units]": 'changeUnits', - "click [data-role=destroy-media]": "destroy", + "click [data-role=destroy-sculpture]": "destroy", }, initialize: function(opt){ @@ -25,6 +28,10 @@ var SculptureEditor = FormView.extend({ this.$name = this.$("[name=name]") this.$description = this.$("[name=description]") + this.$billboard = this.$("[name=billboard]") + this.$outline = this.$("[name=outline]") + this.$outlineColor = this.$("[name=outlineColor]") + // image fields this.$width = this.$("[name=width]") this.$height = this.$("[name=height]") @@ -71,6 +78,11 @@ var SculptureEditor = FormView.extend({ this.$description.val(media.description) this.setDimensions() this.$units.val( "ft" ) + + this.$outline.prop( 'checked', !! media.outline ) + this.$outlineColor.val( media.outlineColor ) + this.$billboard.prop( 'checked', !! media.billboard ) + switch (media.type) { case "image": @@ -138,6 +150,23 @@ var SculptureEditor = FormView.extend({ this.tainted = true }, + + setBillboard: function(){ + var checked = this.$billboard.prop('checked') + this.sculpture.setBillboard(checked) + this.tainted = true + }, + setOutline: function(){ + var checked = this.$outline.prop('checked') + this.sculpture.setOutline(checked) + this.tainted = true + }, + setOutlineColor: function(){ + var color = this.$outlineColor.val() + this.sculpture.setOutlineColor(color) + this.tainted = true + }, + setDimensions: function(){ if (! this.sculpture) return this.$width.unitVal( Number(this.sculpture.naturalDimensions.a * this.sculpture.scale) || "" ) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index b23b50b..6e97500 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -2455,6 +2455,9 @@ input[type="range"]::-webkit-slider-thumb { #mediaEditor .setting.number [type=text] { width: 140px; } +#sculptureEditor .setting.number input[type=text] { + width: 130px; +} .playButton,.muteButton { border-radius: 50%; diff --git a/views/controls/editor/sculpture.ejs b/views/controls/editor/sculpture.ejs index 21e5039..4b8535a 100644 --- a/views/controls/editor/sculpture.ejs +++ b/views/controls/editor/sculpture.ejs @@ -13,14 +13,14 @@
    - - - + + +
    - - + +
    -- cgit v1.2.3-70-g09d2 From cee602fc6e1431fd505665a7b285c3fa85d32d3e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 13:17:15 -0400 Subject: toggle billboard --- .../javascripts/rectangles/engine/sculpture/types/_object.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index 48fd96a..489a6a1 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -53,7 +53,13 @@ Sculpture.types.base = Fiber.extend(function(base){ }, setBillboard: function(val){ this.billboard = val - }, + if (this.billboard) { + this.mx.rotationY = cam.rotationY + } + else { + this.mx.rotationY = PI/2 + } + }, remove: function(){ if (this.removed) return -- cgit v1.2.3-70-g09d2 From 546fba7ee9dac48d2fb0015709247b1b2efca8bc Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 14:31:24 -0400 Subject: store billboard setting --- public/assets/javascripts/rectangles/engine/scenery/resize.js | 2 +- .../javascripts/rectangles/engine/sculpture/types/_object.js | 6 ++++++ public/assets/javascripts/ui/editor/EditorView.js | 1 + public/assets/javascripts/ui/editor/SculptureEditor.js | 7 +++---- 4 files changed, 11 insertions(+), 5 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index a5e255a..006ff2a 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -49,7 +49,7 @@ Scenery.resize = new function(){ // rotate the dots as appropriate base.rotate_dots = function(){ - console.trace() + // console.trace() rotationY = obj.wall.rotationY dots.forEach(function(dot){ dot.rotationY = rotationY diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index 489a6a1..b903c5b 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -54,9 +54,13 @@ Sculpture.types.base = Fiber.extend(function(base){ setBillboard: function(val){ this.billboard = val if (this.billboard) { + this.mx.el.classList.add("backface-visible") + this.mx.el.classList.remove("backface-hidden") this.mx.rotationY = cam.rotationY } else { + this.mx.el.classList.add("backface-hidden") + this.mx.el.classList.remove("backface-visible") this.mx.rotationY = PI/2 } }, @@ -106,6 +110,8 @@ Sculpture.types.base = Fiber.extend(function(base){ scale: this.scale, media: this.media, billboard: this.billboard, + outline: this.outline, + outlineColor: this.outlineColor, backface: this.backface, } return data diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index e5e2ca0..a7b4f20 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -80,6 +80,7 @@ var EditorView = View.extend({ }, hideExtras: function(){ + this.sculptureEditor.hide() this.mediaEditor.hide() this.textEditor.hide() this.share.hide() diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js index ab0ccd2..ff1e6b9 100644 --- a/public/assets/javascripts/ui/editor/SculptureEditor.js +++ b/public/assets/javascripts/ui/editor/SculptureEditor.js @@ -79,10 +79,9 @@ var SculptureEditor = FormView.extend({ this.setDimensions() this.$units.val( "ft" ) - this.$outline.prop( 'checked', !! media.outline ) - this.$outlineColor.val( media.outlineColor ) - this.$billboard.prop( 'checked', !! media.billboard ) - + this.$outline.prop( 'checked', !! sculpture.outline ) + this.$outlineColor.val( sculpture.outlineColor || "#000000" ) + this.$billboard.prop( 'checked', !! sculpture.billboard ) switch (media.type) { case "image": -- cgit v1.2.3-70-g09d2 From 0b8b54e26aa7a40065a0be6f7708b7021e4fec13 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 15:03:35 -0400 Subject: resize scenery --- Gruntfile.js | 1 + .../rectangles/engine/scenery/resize.js | 1 + .../rectangles/engine/sculpture/_sculpture.js | 4 + .../rectangles/engine/sculpture/move.js | 6 +- .../rectangles/engine/sculpture/resize.js | 207 +++++++++++++++++++++ .../rectangles/engine/sculpture/types/_object.js | 2 +- .../assets/javascripts/rectangles/models/floor.js | 2 +- public/assets/javascripts/ui/editor/EditorView.js | 1 + .../javascripts/ui/editor/SculptureEditor.js | 3 +- views/partials/scripts.ejs | 1 + 10 files changed, 221 insertions(+), 7 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/sculpture/resize.js (limited to 'public') diff --git a/Gruntfile.js b/Gruntfile.js index 026ec6f..789ce6f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -79,6 +79,7 @@ module.exports = function(grunt) { "public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js", "public/assets/javascripts/rectangles/engine/sculpture/move.js", + "public/assets/javascripts/rectangles/engine/sculpture/resize.js", "public/assets/javascripts/rectangles/engine/sculpture/types/_object.js", "public/assets/javascripts/rectangles/engine/sculpture/types/image.js", diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index 006ff2a..8dac140 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -8,6 +8,7 @@ Scenery.resize = new function(){ var dragging = false var naturalDimension, naturalDimensionCopy, dimension, position, scale var oldState + var rotationY var dots = [], dot, selected_dot diff --git a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js index 1543def..888b925 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js @@ -9,6 +9,7 @@ var Sculpture = new function(){ base.init = function(){ app.on("move", base.updateBillboards) + base.resize.init() } base.updateBillboards = function(){ @@ -17,6 +18,9 @@ var Sculpture = new function(){ sculpture.mx.rotationY = cam.rotationY } }) + if (Sculpture.resize.obj && Sculpture.resize.obj.billboard) { + Sculpture.resize.move_dots() + } } base.add = function(opt){ diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js index 28d707e..f968bcf 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/move.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js @@ -66,9 +66,9 @@ Sculpture.move = function(base){ base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY) base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY) -// if (editor.permissions.resize) { -// Sculpture.resize.move_dots() -// } + if (editor.permissions.resize) { + Sculpture.resize.move_dots() + } } function up (e, cursor){ diff --git a/public/assets/javascripts/rectangles/engine/sculpture/resize.js b/public/assets/javascripts/rectangles/engine/sculpture/resize.js new file mode 100644 index 0000000..53b8b2d --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/sculpture/resize.js @@ -0,0 +1,207 @@ +Sculpture.resize = new function(){ + + var base = this + + var obj + var x, y, z, bounds + var dragging = false + var naturalDimension, naturalDimensionCopy, dimension, position, scale + var oldState + var rotationY + + var dots = [], dot, selected_dot + + base.init = function(){ + base.build() + base.bind() + } + + // create 9 dots at the corners of the div + base.build = function(){ + [ TOP, + TOP_RIGHT, + RIGHT, + BOTTOM_RIGHT, + BOTTOM, + BOTTOM_LEFT, + LEFT, + TOP_LEFT ].forEach(base.build_dot) + } + + // generate a dot element + base.build_dot = function(side) { + var dot = new MX.Object3D('.dot') + dot.width = dot.height = dot_side * 2 + dot.scale = 0.5 + dot.side = side + $(dot.el).on({ + mouseenter: function(){ base.hovering = true }, + mouseleave: function(){ base.hovering = false }, + }) + dots.push(dot) + } + + base.add_dots = function(){ + dots.forEach(function(dot){ + scene.add(dot) + }) + } + + // move all the dots to the object's current position + base.move_dots = function(){ + rotationY = obj.mx.rotationY + + var x = obj.mx.x + sin(rotationY) * dot_distance_from_picture + var y = obj.mx.y + var z = obj.mx.z - cos(rotationY) * dot_distance_from_picture + + dots.forEach(function(dot){ + base.move_dot(dot, { x: x, y: y, z: z, rotationY: rotationY }) + }) + } + + // move a dot .. to the initial position of the image + base.move_dot = function(dot, pos){ + if (dot.side & TOP) { + pos.y += obj.dimensions.b / 2 + } + if (dot.side & BOTTOM) { + pos.y -= obj.dimensions.b / 2 + } + if (dot.side & LEFT) { + pos.x -= cos(rotationY) * (obj.dimensions.a) / 2 + pos.z -= sin(rotationY) * (obj.dimensions.a) / 2 + } + if (dot.side & RIGHT) { + pos.x += cos(rotationY) * (obj.dimensions.a) / 2 + pos.z += sin(rotationY) * (obj.dimensions.a) / 2 + } + dot.move(pos) + } + + // pick a new object to focus on and show the dots + base.show = function(new_object) { + // if (obj === new_object) return + if (! new_object) return + base.obj = obj = new_object + base.add_dots() + base.move_dots() + } + + // dismiss the dots on blur + var dotsHideTimeout; + base.defer_hide = function(){ + clearTimeout(dotsHideTimeout) + + dotsHideTimeout = setTimeout(function(){ + if (Scenery.hovering || Scenery.resize.hovering || Scenery.mouse.down) return + Scenery.resize.hide() + }, dot_hide_delay) + } + + base.hide = function () { + if (! obj) return + base.obj = obj = null + dots.forEach(function(dot){ + scene.remove(dot) + }) + } + + base.bind = function(){ + dots.forEach(function(dot){ + Sculpture.mouse.bind_el(dot.el) + }) + Sculpture.mouse.on("down", down) + Sculpture.mouse.on("drag", drag) + Sculpture.mouse.on("up", up) + } + + base.unbind = function(){ + dots.forEach(function(dot){ + Sculpture.mouse.unbind_el(dot.el) + }) + Sculpture.mouse.off("down", down) + Sculpture.mouse.off("drag", drag) + Sculpture.mouse.off("up", up) + } + + function down (e, cursor){ + var selection = dots.filter(function(dot){return e.target == dot.el}) + if (! selection.length) return + + selected_dot = selection[0] + dragging = true + + naturalDimension = obj.naturalDimensions + dimension = obj.dimensions + position = new vec3(obj.mx.x, obj.mx.y, obj.mx.z) + oldState = obj.serialize() + + if (obj.type == "text") { + naturalDimensionCopy = naturalDimension.clone() + positionCopy = position.clone() + } + + document.body.classList.add("dragging") + } + + function drag (e, cursor){ + if (! dragging) return + + var x_sign = selected_dot.side & LEFT ? -1 : selected_dot.side & RIGHT ? 1 : 0 + var y_sign = selected_dot.side & TOP ? -1 : selected_dot.side & BOTTOM ? 1 : 0 + var width = cursor.x.magnitude() + var height = cursor.y.magnitude() + var mag = cursor.magnitude() + + if (abs(width) > abs(height)) { + mag = x_sign * mag * sign(width) + } + else { + mag = y_sign * mag * sign(height) + } + + if (obj.type == "text") { + obj.mx.width = obj.media.width = naturalDimension.a = naturalDimensionCopy.a + (mag * 2) + obj.mx.height = obj.media.height = naturalDimension.b = naturalDimensionCopy.b + (mag * 2) + dimension.a = naturalDimension.a * obj.scale + dimension.b = naturalDimension.b * obj.scale + } + else { + obj.set_scale( ( dimension.a + mag ) / naturalDimension.a ) + } + + if (selected_dot.side & LEFT_RIGHT) { + obj.mx.x = position.a + cos(rotationY) * mag/2 * (x_sign) + obj.mx.z = position.c + sin(rotationY) * mag/2 * (x_sign) + } + if (selected_dot.side & TOP_BOTTOM) { + obj.mx.y = position.b - mag/2 * y_sign + } + + base.move_dots() + + app.controller.sculptureEditor.setDimensions() + } + + function up (e, cursor){ + if (! dragging) return + dragging = false + if (! editor.permissions.resize) { return } + + obj.scale = obj.mx.ops.scale = obj.mx.scale + obj.dimensions.assign(obj.naturalDimensions).mul(obj.scale) + + UndoStack.push({ + type: 'update-sculpture', + undo: oldState, + redo: obj.serialize(), + }) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + + document.body.classList.remove("dragging") + selected_dot = null + } +} \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index b903c5b..390c42e 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -80,7 +80,7 @@ Sculpture.types.base = Fiber.extend(function(base){ Sculpture.remove(this.id) - // Sculpture.resize.hide() + Sculpture.resize.hide() if (app.controller.sculptureEditor) { app.controller.sculptureEditor.tainted = false app.controller.sculptureEditor.hide() diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js index 530de2b..799bdc7 100644 --- a/public/assets/javascripts/rectangles/models/floor.js +++ b/public/assets/javascripts/rectangles/models/floor.js @@ -90,7 +90,7 @@ } app.controller.toolbar.resetPermissions() - // Sculpture.resize.show(sculpture) + Sculpture.resize.show(sculpture) Sculpture.hovering = true // app.controller.pick(sculpture) diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index a7b4f20..a2d84a6 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -84,6 +84,7 @@ var EditorView = View.extend({ this.mediaEditor.hide() this.textEditor.hide() this.share.hide() + Sculpture.resize.hide() Scenery.resize.hide() Scenery.hovering = false } diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js index ff1e6b9..35abc00 100644 --- a/public/assets/javascripts/ui/editor/SculptureEditor.js +++ b/public/assets/javascripts/ui/editor/SculptureEditor.js @@ -67,7 +67,7 @@ var SculptureEditor = FormView.extend({ // app.controller.toolbar.resetMode() app.controller.toolbar.resetControls() - // Sculpture.resize.show(sculpture) + Sculpture.resize.show(sculpture) Sculpture.hovering = true var media = sculpture.media @@ -149,7 +149,6 @@ var SculptureEditor = FormView.extend({ this.tainted = true }, - setBillboard: function(){ var checked = this.$billboard.prop('checked') this.sculpture.setBillboard(checked) diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 1eda8bd..6dfe912 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -75,6 +75,7 @@ + -- cgit v1.2.3-70-g09d2 From 226e90a540e185c8ae2f861eac5e2b1747f5d729 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 15:05:11 -0400 Subject: hide dots --- public/assets/javascripts/rectangles/engine/scenery/resize.js | 1 + 1 file changed, 1 insertion(+) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index 8dac140..252af74 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -95,6 +95,7 @@ Scenery.resize = new function(){ base.add_dots() base.rotate_dots() base.move_dots() + Sculpture.resize.hide() } // dismiss the dots on blur -- cgit v1.2.3-70-g09d2 From 06fc629e2be66d79e94a02b169e12bc0918d0881 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 15:45:55 -0400 Subject: shift-drag scupltures up and down; dont drag through floor --- .../assets/javascripts/rectangles/engine/scenery/move.js | 2 +- .../javascripts/rectangles/engine/sculpture/move.js | 16 ++++++++++++---- .../rectangles/engine/sculpture/types/image.js | 2 +- public/assets/javascripts/rectangles/util/constants.js | 3 ++- 4 files changed, 16 insertions(+), 7 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index dd60a61..94c6281 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -28,7 +28,7 @@ Scenery.move = function(base){ base.remove() return } - + // load the modal app.controller.pick(base) diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js index f968bcf..4f6d176 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/move.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js @@ -2,8 +2,9 @@ Sculpture.move = function(base){ var x, y, z, position, dimension, bounds - var dragging = false, moved = false + var dragging = false, shiftPressed = false, moved = false var oldState + var height, width this.bind = function(){ Sculpture.mouse.bind_el(base.mx.el) @@ -39,11 +40,13 @@ Sculpture.move = function(base){ e.clickAccepted = false return } + shiftPressed = e.shiftKey dragging = true moved = false x = base.mx.x y = base.mx.y z = base.mx.z + height = base.mx.height * base.mx.scale bounds = base.bounds dimension = base.dimensions @@ -63,9 +66,14 @@ Sculpture.move = function(base){ // here we need to move the element based on the XY coords, as // base.mx.y = position.b + delta.b + dimension.b / 2 - base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY) - base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY) - + if (e.shiftKey) { + base.mx.y = clamp( y + delta.b, height/2 + sculpture_distance_from_floor, Infinity ) + } + else { + base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY) + base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY) + } + if (editor.permissions.resize) { Sculpture.resize.move_dots() } diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js index 3e5ab08..1a53f5b 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js @@ -25,7 +25,7 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ }) if (opt.position) { - opt.position.y = opt.position.y || this.scale * this.media.height/2 + 3 + opt.position.y = opt.position.y || this.scale * this.media.height/2 + sculpture_distance_from_floor opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY } diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js index 3bc314c..a70cacd 100644 --- a/public/assets/javascripts/rectangles/util/constants.js +++ b/public/assets/javascripts/rectangles/util/constants.js @@ -25,7 +25,8 @@ var height_min = 200, MAP_GRID_SIZE = 360 // 10 feet var painting_distance_from_wall = 10, - dot_distance_from_picture = 3 + dot_distance_from_picture = 3, + sculpture_distance_from_floor = 3 var dot_hide_delay = 50, // ms dot_side = 20 -- cgit v1.2.3-70-g09d2 From 6ce9d713a9ffdbf27155718ca8c9a3a4645389f2 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 16:45:09 -0400 Subject: alt to rotate a non-billboard scenery obj --- public/assets/javascripts/rectangles/engine/sculpture/move.js | 11 +++++++++-- .../javascripts/rectangles/engine/sculpture/types/_object.js | 8 ++++---- 2 files changed, 13 insertions(+), 6 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js index 4f6d176..e571c3b 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/move.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js @@ -2,7 +2,8 @@ Sculpture.move = function(base){ var x, y, z, position, dimension, bounds - var dragging = false, shiftPressed = false, moved = false + var rotationY + var dragging = false, altPressed = false, shiftPressed = false, moved = false var oldState var height, width @@ -40,12 +41,14 @@ Sculpture.move = function(base){ e.clickAccepted = false return } + altPressed = (e.altKey && ! base.billboard) shiftPressed = e.shiftKey dragging = true moved = false x = base.mx.x y = base.mx.y z = base.mx.z + rotationY = base.mx.rotationY height = base.mx.height * base.mx.scale bounds = base.bounds @@ -66,9 +69,13 @@ Sculpture.move = function(base){ // here we need to move the element based on the XY coords, as // base.mx.y = position.b + delta.b + dimension.b / 2 - if (e.shiftKey) { + if (shiftPressed) { base.mx.y = clamp( y + delta.b, height/2 + sculpture_distance_from_floor, Infinity ) } + else if (altPressed) { + base.mx.rotationY = mod( rotationY + delta.a / (window.innerWidth / 2) , TWO_PI ) + Sculpture.resize.move_dots() + } else { base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY) base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY) diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index 390c42e..a9c1669 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -54,13 +54,13 @@ Sculpture.types.base = Fiber.extend(function(base){ setBillboard: function(val){ this.billboard = val if (this.billboard) { - this.mx.el.classList.add("backface-visible") - this.mx.el.classList.remove("backface-hidden") + this.mx.el.classList.add("backface-hidden") + this.mx.el.classList.remove("backface-visible") this.mx.rotationY = cam.rotationY } else { - this.mx.el.classList.add("backface-hidden") - this.mx.el.classList.remove("backface-visible") + this.mx.el.classList.add("backface-visible") + this.mx.el.classList.remove("backface-hidden") this.mx.rotationY = PI/2 } }, -- cgit v1.2.3-70-g09d2 From e2bb9e31b5cafe6bac49ef97dd791ab217797e94 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 16:51:41 -0400 Subject: wall --- public/assets/javascripts/rectangles/engine/sculpture/types/_object.js | 1 + 1 file changed, 1 insertion(+) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index a9c1669..5dd0aae 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -63,6 +63,7 @@ Sculpture.types.base = Fiber.extend(function(base){ this.mx.el.classList.remove("backface-hidden") this.mx.rotationY = PI/2 } + Sculpture.resize.move_dots() }, remove: function(){ -- cgit v1.2.3-70-g09d2 From 7fd34f49fea785f11320eec412a95726cbcf7349 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 17:59:51 -0400 Subject: static build target --- .gitignore | 3 + Gruntfile.js | 130 +++++++++++++- public/assets/javascripts/ui/reader/MediaPlayer.js | 2 +- public/assets/javascripts/ui/reader/ReaderView.js | 12 +- public/assets/javascripts/ui/reader/_router.js | 16 ++ public/assets/test/static.html | 196 +++++++++++++++++++++ server/index.js | 4 + 7 files changed, 354 insertions(+), 9 deletions(-) create mode 100644 public/assets/javascripts/ui/reader/_router.js create mode 100644 public/assets/test/static.html (limited to 'public') diff --git a/.gitignore b/.gitignore index 50f54f1..14d6d0f 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,6 @@ config.json app.concat.js app.min.js +reader.concat.js +reader.min.js + diff --git a/Gruntfile.js b/Gruntfile.js index 93f13fe..a3ef359 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -147,7 +147,110 @@ module.exports = function(grunt) { "public/assets/javascripts/defaults.js", ], dest: 'public/assets/javascripts/app.concat.js', + }, + + // this builds a static version of the vvalls code, suitable for embedding + // in another website. see assets/test/static.html + 'static': { + src: [ + "public/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js", + "public/assets/javascripts/vendor/bower_components/lodash/lodash.min.js", + "public/assets/javascripts/vendor/bower_components/momentjs/min/moment.min.js", + "public/assets/javascripts/vendor/bower_components/fiber/src/fiber.min.js", + "public/assets/javascripts/vendor/bower_components/marked/lib/marked.js", + "public/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js", + "public/assets/javascripts/vendor/tube.js", + "public/assets/javascripts/vendor/loader.js", + "public/assets/javascripts/vendor/polyfill.js", + "public/assets/javascripts/vendor/froogaloop.js", + "public/assets/javascripts/util.js", + + "public/assets/javascripts/mx/mx.js", + "public/assets/javascripts/mx/extensions/mx.scene.js", + "public/assets/javascripts/mx/extensions/mx.movements.js", + "public/assets/javascripts/mx/extensions/mx.movementsMobile.js", + "public/assets/javascripts/mx/primitives/mx.image.js", + "public/assets/javascripts/mx/primitives/mx.text.js", + "public/assets/javascripts/mx/primitives/mx.video.js", + "public/assets/javascripts/mx/primitives/mx.youtube.js", + "public/assets/javascripts/mx/primitives/mx.vimeo.js", + "public/assets/javascripts/mx/primitives/mx.soundcloud.js", + "public/assets/javascripts/mx/primitives/mx.grid.js", + + "public/assets/javascripts/rectangles/_env.js", + + "public/assets/javascripts/rectangles/util/constants.js", + "public/assets/javascripts/rectangles/util/colors.js", + "public/assets/javascripts/rectangles/util/coords.js", + "public/assets/javascripts/rectangles/util/debug.js", + "public/assets/javascripts/rectangles/util/keys.js", + "public/assets/javascripts/rectangles/util/measurement.js", + "public/assets/javascripts/rectangles/util/minotaur.js", + "public/assets/javascripts/rectangles/util/mouse.js", + "public/assets/javascripts/rectangles/util/permissions.js", + "public/assets/javascripts/rectangles/util/sort.js", + "public/assets/javascripts/rectangles/util/uid.js", + "public/assets/javascripts/rectangles/util/undostack.js", + "public/assets/javascripts/rectangles/util/wheel.js", + + "public/assets/javascripts/rectangles/models/vec2.js", + "public/assets/javascripts/rectangles/models/vec3.js", + "public/assets/javascripts/rectangles/models/rect.js", + "public/assets/javascripts/rectangles/models/surface.js", + "public/assets/javascripts/rectangles/models/tree.js", + "public/assets/javascripts/rectangles/models/room.js", + "public/assets/javascripts/rectangles/models/wall.js", + "public/assets/javascripts/rectangles/models/floor.js", + + "public/assets/javascripts/rectangles/engine/rooms/_rooms.js", + "public/assets/javascripts/rectangles/engine/rooms/_walls.js", + "public/assets/javascripts/rectangles/engine/rooms/builder.js", + "public/assets/javascripts/rectangles/engine/rooms/clipper.js", + "public/assets/javascripts/rectangles/engine/rooms/grouper.js", + "public/assets/javascripts/rectangles/engine/rooms/mover.js", + + "public/assets/javascripts/rectangles/engine/scenery/_scenery.js", + "public/assets/javascripts/rectangles/engine/scenery/move.js", + "public/assets/javascripts/rectangles/engine/scenery/resize.js", + "public/assets/javascripts/rectangles/engine/scenery/randomize.js", + "public/assets/javascripts/rectangles/engine/scenery/sound.js", + "public/assets/javascripts/rectangles/engine/scenery/undo.js", + "public/assets/javascripts/rectangles/engine/scenery/types/_object.js", + "public/assets/javascripts/rectangles/engine/scenery/types/image.js", + "public/assets/javascripts/rectangles/engine/scenery/types/text.js", + "public/assets/javascripts/rectangles/engine/scenery/types/video.js", + "public/assets/javascripts/rectangles/engine/scenery/types/audio.js", + + "public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js", + "public/assets/javascripts/rectangles/engine/sculpture/move.js", + "public/assets/javascripts/rectangles/engine/sculpture/resize.js", + "public/assets/javascripts/rectangles/engine/sculpture/types/_object.js", + "public/assets/javascripts/rectangles/engine/sculpture/types/image.js", + + "public/assets/javascripts/rectangles/engine/map/_map.js", + "public/assets/javascripts/rectangles/engine/map/ui_editor.js", + "public/assets/javascripts/rectangles/engine/map/ui_minimap.js", + "public/assets/javascripts/rectangles/engine/map/draw.js", + + "public/assets/javascripts/ui/lib/View.js", + "public/assets/javascripts/ui/lib/Router.js", + "public/assets/javascripts/ui/lib/ModalView.js", + + "public/assets/javascripts/ui/reader/ReaderView.js", + "public/assets/javascripts/ui/reader/ShareView.js", + "public/assets/javascripts/ui/reader/EmbedView.js", + "public/assets/javascripts/ui/reader/MediaPlayer.js", + "public/assets/javascripts/ui/reader/Tracker.js", + + "public/assets/javascripts/ui/reader/_router.js", + + "public/assets/javascripts/app.js", + "public/assets/javascripts/defaults.js", + ], + dest: 'public/assets/javascripts/reader.concat.js', } + + }, copy: { concat: { @@ -158,7 +261,15 @@ module.exports = function(grunt) { }, ] }, - }, + 'static': { + files: [ + { + src: 'public/assets/javascripts/static.concat.js', + dest: 'public/assets/javascripts/static.min.js', + }, + ] + }, + }, uglify: { options: { banner: '/* vvalls by okfocus 2015 */\n' @@ -166,10 +277,17 @@ module.exports = function(grunt) { js: { src: 'public/assets/javascripts/app.concat.js', dest: 'public/assets/javascripts/app.min.js', + }, + 'static': { + src: 'public/assets/javascripts/static.concat.js', + dest: 'public/assets/javascripts/static.min.js', } }, clean: { - release: ["public/assets/javascripts/app.concat.js"], + release: [ + "public/assets/javascripts/static.concat.js", + "public/assets/javascripts/app.concat.js", + ], } }); @@ -180,8 +298,10 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-clean'); // Default task(s). - grunt.registerTask('js', ['concat:js', 'uglify:js', 'clean:release']); - grunt.registerTask('merge', ['concat:js', 'copy:concat']); - grunt.registerTask('default', ['js']); + grunt.registerTask('js', ['concat:js', 'uglify:js', 'clean:release']); + grunt.registerTask('js-test', ['concat:js', 'copy:concat']); + grunt.registerTask('static', ['concat:static', 'uglify:static', 'clean:release']); + grunt.registerTask('static-test', ['concat:static', 'copy:static']); + grunt.registerTask('default', ['js']); }; diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js index 8424d9c..8e65976 100644 --- a/public/assets/javascripts/ui/reader/MediaPlayer.js +++ b/public/assets/javascripts/ui/reader/MediaPlayer.js @@ -1,5 +1,5 @@ -var MediaPlayer = FormView.extend({ +var MediaPlayer = View.extend({ el: "#mediaPlayer", events: { diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index e3e27c3..55d2520 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -31,7 +31,12 @@ var ReaderView = View.extend({ this.tracker = new Tracker ({ mode: mode }) - $.get(this.projectAction + name, this.ready.bind(this)) + if ('vvalls_data' in window) { + this.ready(window.vvalls_data) + } + else { + $.get(this.projectAction + name, this.ready.bind(this)) + } }, getQS: function(){ @@ -85,9 +90,10 @@ var ReaderView = View.extend({ Walls.setColor[mode](colors[mode]) }) - editor.permissions.clear() + window.editor && editor.permissions.clear() - this.listen() + // disable until we start using spinning again + // this.listen() }, listen: function(){ diff --git a/public/assets/javascripts/ui/reader/_router.js b/public/assets/javascripts/ui/reader/_router.js new file mode 100644 index 0000000..a0e346a --- /dev/null +++ b/public/assets/javascripts/ui/reader/_router.js @@ -0,0 +1,16 @@ + +var SiteRouter = Router.extend({ + el: "body", + + initialize: function(){ + app.launch() + if (app.unsupported) return + + this.readerView = app.controller = new ReaderView() + this.readerView.load() + + $("body").removeClass("loading") + } + +}) + diff --git a/public/assets/test/static.html b/public/assets/test/static.html new file mode 100644 index 0000000..90871a5 --- /dev/null +++ b/public/assets/test/static.html @@ -0,0 +1,196 @@ + + + + VValls + + + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    + + +
    +
    +

    + Leaves and such +
    + +
    + + asdf +

    + + + Last modified 4/20/2015 + + + + + Edit Room + +
    + +
    + + + + + + + + + + + + + +
    +
    +
    + +
    + +
    + X + +
    +
    +
    +

    Embed VValls

    + +

    + This code generates an iframe which will embed this room in your website or blog. +

    + + + dimensions: x + + + + test +
    +
    +
    +
    + +
    + +
    + +
    +
    + + + + + + + + + + diff --git a/server/index.js b/server/index.js index 7bc3f7f..391385c 100644 --- a/server/index.js +++ b/server/index.js @@ -66,6 +66,10 @@ site.setup = function(){ app.set('env', config.env.production ? "production" : "development") app.get('env') === 'development' && app.use(express.errorHandler()); + if (config.env.production) { + app.set('json spaces', 0) + } + // Essential middleware // app.all('*', middleware.enableCORS); app.all('*', middleware.ensureLocals); -- cgit v1.2.3-70-g09d2 From ce5fb676488648fa390bd0ebee0891abcd2c9290 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 19:04:00 -0400 Subject: static project with demo data --- .gitignore | 4 +- Gruntfile.js | 2 +- public/assets/test/static.html | 238 +++++++++++++++++------------------------ 3 files changed, 100 insertions(+), 144 deletions(-) (limited to 'public') diff --git a/.gitignore b/.gitignore index 14d6d0f..2a58e7f 100644 --- a/.gitignore +++ b/.gitignore @@ -34,6 +34,6 @@ config.json app.concat.js app.min.js -reader.concat.js -reader.min.js +static.concat.js +static.min.js diff --git a/Gruntfile.js b/Gruntfile.js index a3ef359..a0f4d83 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -247,7 +247,7 @@ module.exports = function(grunt) { "public/assets/javascripts/app.js", "public/assets/javascripts/defaults.js", ], - dest: 'public/assets/javascripts/reader.concat.js', + dest: 'public/assets/javascripts/static.concat.js', } diff --git a/public/assets/test/static.html b/public/assets/test/static.html index 90871a5..dc098de 100644 --- a/public/assets/test/static.html +++ b/public/assets/test/static.html @@ -17,7 +17,7 @@ | | | | | | | | | | | | | | | | + | | + | | + | | + | | | | .' | |/ | | \| | `. | | -+------+' +------+ +------+ +------+ `+------> ++------+' +------+ +------+ +------+ `+-------> @@ -36,161 +36,117 @@ - -
    - - -
    - - -
    -
    -

    - Leaves and such -
    - -
    - - asdf -

    - - - Last modified 4/20/2015 - - - - - Edit Room - -
    - -
    - - - - - - - - - - - - - -
    -
    -
    +
    -
    +
    + +
    + +
    +
    - + - -- cgit v1.2.3-70-g09d2 From ff0e7521982ecb38992c59656452dbcc15af64d5 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 19:33:33 -0400 Subject: editor ref --- public/assets/javascripts/ui/reader/_router.js | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'public') diff --git a/public/assets/javascripts/ui/reader/_router.js b/public/assets/javascripts/ui/reader/_router.js index a0e346a..f3b121b 100644 --- a/public/assets/javascripts/ui/reader/_router.js +++ b/public/assets/javascripts/ui/reader/_router.js @@ -14,3 +14,11 @@ var SiteRouter = Router.extend({ }) +var editor = { + permissions: new Permissions({ + 'pick': true, + 'move': true, + 'resize': true, + 'destroy': false, + }) +} -- cgit v1.2.3-70-g09d2 From ede940e7449efc100191060b0b2e0351921681b5 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 23 Apr 2015 17:14:30 -0400 Subject: disable arrows --- public/assets/javascripts/mx/extensions/mx.movements.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 931caac..cf00adb 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -94,12 +94,12 @@ MX.Movements = function (cam) { moveRight = true break - case 37: // left + // case 37: // left case 81: // q turnLeft = true break - case 39: // right + // case 39: // right case 69: // e turnRight = true break @@ -200,12 +200,12 @@ MX.Movements = function (cam) { moveRight = false break - case 37: // left + // case 37: // left case 81: // q turnLeft = false break - case 39: // right + // case 39: // right case 69: // e turnRight = false break -- cgit v1.2.3-70-g09d2 From 90b0e89b4dabf67035ae4bccdb02c52da4e31ab1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 27 Apr 2015 19:49:27 -0400 Subject: infoboxes on sculpture --- public/assets/javascripts/ui/editor/SculptureEditor.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js index 35abc00..52663e1 100644 --- a/public/assets/javascripts/ui/editor/SculptureEditor.js +++ b/public/assets/javascripts/ui/editor/SculptureEditor.js @@ -73,9 +73,8 @@ var SculptureEditor = FormView.extend({ var media = sculpture.media // console.log(media) - - this.$name.val(media.title) // || filenameFromUrl(media.url) ) - this.$description.val(media.description) + this.$name.val(media.title || "") // || filenameFromUrl(media.url) ) + this.$description.val(media.description || "") this.setDimensions() this.$units.val( "ft" ) -- cgit v1.2.3-70-g09d2 From 53695472cfb20b730d04b2d6a6a16c6d281e9180 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 27 Apr 2015 20:47:41 -0400 Subject: outline box --- .../rectangles/engine/sculpture/move.js | 1 + .../rectangles/engine/sculpture/resize.js | 3 +- .../rectangles/engine/sculpture/types/_object.js | 52 +++++++++++++++++++--- .../assets/javascripts/rectangles/models/vec3.js | 18 +++++++- .../javascripts/rectangles/util/measurement.js | 4 ++ .../javascripts/ui/editor/SculptureEditor.js | 11 +++++ public/assets/stylesheets/app.css | 7 +++ views/controls/editor/sculpture.ejs | 2 +- 8 files changed, 90 insertions(+), 8 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js index e571c3b..0cbeccd 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/move.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js @@ -83,6 +83,7 @@ Sculpture.move = function(base){ if (editor.permissions.resize) { Sculpture.resize.move_dots() + base.updateOutline() } } diff --git a/public/assets/javascripts/rectangles/engine/sculpture/resize.js b/public/assets/javascripts/rectangles/engine/sculpture/resize.js index 53b8b2d..5f21d66 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/resize.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/resize.js @@ -180,7 +180,8 @@ Sculpture.resize = new function(){ } base.move_dots() - + obj.updateOutline() + app.controller.sculptureEditor.setDimensions() } diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index 5dd0aae..2f24ae5 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -6,7 +6,8 @@ Sculpture.types.base = Fiber.extend(function(base){ this.id = opt.id || Sculpture.uid("sculpture") // this.move = new Sculpture.move (this) this.media = opt.media - this.naturalDimensions = new vec2(this.media.width, this.media.height) + this.naturalDimensions = new vec3(this.media.width, this.media.height, this.media.width) + this.dimensions = new vec3(this.media.width, this.media.height, this.media.width) this.move = new Sculpture.move (this) this.billboard = true @@ -14,7 +15,7 @@ Sculpture.types.base = Fiber.extend(function(base){ this.set_scale( opt.scale || this.media.scale || 1.0 ) this.position = new vec2(0,0) - + this.isSculpture = true }, @@ -25,6 +26,11 @@ Sculpture.types.base = Fiber.extend(function(base){ } this.dimensions = this.naturalDimensions.clone().mul(this.scale) }, + set_depth: function(depth){ + console.log(this.dimensions.c, this.naturalDimensions.c, depth) + this.dimensions.c = depth + this.naturalDimensions.c = depth / this.scale + }, place: function(opt){ if (opt.data) { @@ -45,11 +51,16 @@ Sculpture.types.base = Fiber.extend(function(base){ setOutline: function(val){ this.outline = val - // show/hide outline + if (val && ! this.outlineEl) { + this.buildOutline() + } + this.outlineEl.el.style.display = val ? "block" : "none" }, setOutlineColor: function(val){ this.outlineColor = val - // set outline color + if (this.outlineEl) { + this.outlineColor = this.outlineEl.el.style.borderColor = val + } }, setBillboard: function(val){ this.billboard = val @@ -65,6 +76,32 @@ Sculpture.types.base = Fiber.extend(function(base){ } Sculpture.resize.move_dots() }, + + buildOutline: function(){ + this.outlineEl = new MX.Object3D(".mx-outline") + this.outlineEl.width = this.naturalDimensions.a + this.outlineEl.height = this.naturalDimensions.c + this.outlineEl.scale = this.mx.scale + this.outlineEl.rotationX = -PI/2 + this.outlineEl.x = this.mx.x + this.outlineEl.y = sculpture_distance_from_floor + this.outlineEl.z = this.mx.z + this.outlineEl.el.style.borderColor = this.outlineColor || "#000000" + scene.add(this.outlineEl) + }, + updateOutline: function(){ + if (! this.outline) { return } + if (! this.outlineEl) { + this.buildOutline() + } + this.outlineEl.x = this.mx.x + this.outlineEl.y = sculpture_distance_from_floor + this.outlineEl.z = this.mx.z + this.outlineEl.width = this.naturalDimensions.a + this.outlineEl.height = this.naturalDimensions.c + + this.outlineEl.scale = this.mx.scale + }, remove: function(){ if (this.removed) return @@ -112,7 +149,7 @@ Sculpture.types.base = Fiber.extend(function(base){ media: this.media, billboard: this.billboard, outline: this.outline, - outlineColor: this.outlineColor, + outlineColor: this.outlineColor || "#000000", backface: this.backface, } return data @@ -123,9 +160,14 @@ Sculpture.types.base = Fiber.extend(function(base){ this.mx.ops.width = data.dimensions.a this.mx.ops.height = data.dimensions.b this.billboard = data.billboard + this.outline = data.outline + this.outlineColor = data.outlineColor || "#000000" this.backface = data.backface if (! this.backface) this.mx.el.classList.remove("backface-visible") this.dimensions.deserialize(data.dimensions) + if (this.outline) { + this.buildOutline() + } }, } diff --git a/public/assets/javascripts/rectangles/models/vec3.js b/public/assets/javascripts/rectangles/models/vec3.js index 97329ed..b3825a9 100644 --- a/public/assets/javascripts/rectangles/models/vec3.js +++ b/public/assets/javascripts/rectangles/models/vec3.js @@ -39,5 +39,21 @@ vec3.prototype.serialize = function(){ vec3.prototype.deserialize = function(data){ this.a = data[0] this.b = data[1] - this.c = data[2] + this.c = data[2] || data[0] + return this +} +vec3.prototype.clone = function(){ + return new vec3(this.a, this.b, this.c) +} +vec3.prototype.assign = function(v){ + this.a = v.a + this.b = v.b + this.c = v.c + return this +} +vec3.prototype.mul = function(n) { + this.a *= n + this.b *= n + this.c *= n + return this } \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/util/measurement.js b/public/assets/javascripts/rectangles/util/measurement.js index d6a0b35..6346eac 100644 --- a/public/assets/javascripts/rectangles/util/measurement.js +++ b/public/assets/javascripts/rectangles/util/measurement.js @@ -28,6 +28,10 @@ function measurementToString( n ) { case 'ft': ft = floor(n / 36) inch = abs(round((n % 36) / 3)) + if (inch == 12) { + inch = 0 + ft += 1 + } s = ft + "'" if (inch > 0) { s += " " + inch + '"' diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js index 52663e1..953260c 100644 --- a/public/assets/javascripts/ui/editor/SculptureEditor.js +++ b/public/assets/javascripts/ui/editor/SculptureEditor.js @@ -17,6 +17,7 @@ var SculptureEditor = FormView.extend({ "change [name=mute]": "setMute", "change [name=width]": 'changeWidth', "change [name=height]": 'changeHeight', + "change [name=depth]": 'changeDepth', "change [name=units]": 'changeUnits', "click [data-role=destroy-sculpture]": "destroy", }, @@ -35,6 +36,7 @@ var SculptureEditor = FormView.extend({ // image fields this.$width = this.$("[name=width]") this.$height = this.$("[name=height]") + this.$depth = this.$("[name=depth]") this.$units = this.$("[name=units]") // video fields @@ -168,17 +170,26 @@ var SculptureEditor = FormView.extend({ if (! this.sculpture) return this.$width.unitVal( Number(this.sculpture.naturalDimensions.a * this.sculpture.scale) || "" ) this.$height.unitVal( Number(this.sculpture.naturalDimensions.b * this.sculpture.scale) || "" ) + this.$depth.unitVal( Number(this.sculpture.naturalDimensions.c * this.sculpture.scale) || "" ) this.tainted = true }, changeWidth: function(e){ e.stopPropagation() this.sculpture.set_scale( this.$width.unitVal() / this.sculpture.naturalDimensions.a ) this.setDimensions() + this.sculpture.updateOutline() }, changeHeight: function(e){ e.stopPropagation() this.sculpture.set_scale( this.$height.unitVal() / this.sculpture.naturalDimensions.b ) this.setDimensions() + this.sculpture.updateOutline() + }, + changeDepth: function(e){ + e.stopPropagation() + this.sculpture.set_depth( this.$depth.unitVal() ) + this.$depth.unitVal( Number(this.sculpture.naturalDimensions.c * this.sculpture.scale) || "" ) + this.sculpture.updateOutline() }, changeUnits: function(){ app.units = this.$units.val() diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 6e97500..6adb2a0 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1205,6 +1205,13 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } -webkit-box-sizing: content-box; box-sizing: content-box; } +.mx-outline { + border-width: 2px; + border-style: dashed; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} .destroyActive .mx-scene, .destroyActive .mx-object3d.image { cursor:url(/assets/img/delete-cursor.png), auto; } diff --git a/views/controls/editor/sculpture.ejs b/views/controls/editor/sculpture.ejs index 4b8535a..dfe917f 100644 --- a/views/controls/editor/sculpture.ejs +++ b/views/controls/editor/sculpture.ejs @@ -33,7 +33,7 @@
    - +
    remove object -- cgit v1.2.3-70-g09d2 From aaa81d4b52659f991e38994f8fff56ba43baa419 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 28 Apr 2015 17:54:30 -0400 Subject: abstract out map tools --- .../javascripts/mx/extensions/mx.movements.js | 8 +- .../javascripts/rectangles/engine/map/ui_ortho.js | 49 +++ .../rectangles/engine/sculpture/types/_object.js | 2 +- public/assets/test/ortho2.html | 158 ++++----- public/assets/test/ortho3.html | 394 +++++++++++++++------ 5 files changed, 421 insertions(+), 190 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index cf00adb..931caac 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -94,12 +94,12 @@ MX.Movements = function (cam) { moveRight = true break - // case 37: // left + case 37: // left case 81: // q turnLeft = true break - // case 39: // right + case 39: // right case 69: // e turnRight = true break @@ -200,12 +200,12 @@ MX.Movements = function (cam) { moveRight = false break - // case 37: // left + case 37: // left case 81: // q turnLeft = false break - // case 39: // right + case 39: // right case 69: // e turnRight = false break diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js index e69de29..0c501ad 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -0,0 +1,49 @@ +Map.UI = Map.UI || {} +Map.UI.Ortho = function(map){ + + var base = this + + base.creating = base.dragging = base.resizing = false + + base.mouse = new mouse({ + el: map.el, + down: function(e, cursor){ + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + base.tools[currentTool].down(e, cursor) + }, + move: function(e, cursor){ + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + base.tools[currentTool].move(e, cursor) + }, + drag: function(e, cursor){ + cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a + cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b + base.tools[currentTool].drag(e, cursor) + }, + up: function(e, cursor, new_cursor){ + new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + base.tools[currentTool].up(e, cursor, new_cursor) + } + }) + + var currentTool = "polyline" + base.setTool = function(s){ + currentTool = s + } + base.tools = { + polyline: new PolylineTool, + position: new PositionTool, + } + + base.wheel = new wheel({ + el: map.el, + update: mousewheel, + }) + + function mousewheel (e, deltaY, deltaX){ + map.set_zoom(map.zoom_exponent - deltaY/20) + } +} diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index 2f24ae5..2f593e8 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -72,7 +72,7 @@ Sculpture.types.base = Fiber.extend(function(base){ else { this.mx.el.classList.add("backface-visible") this.mx.el.classList.remove("backface-hidden") - this.mx.rotationY = PI/2 + this.mx.rotationY = quantize(cam.rotationY, PI/2) } Sculpture.resize.move_dots() }, diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 2c600f5..49e0308 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -41,6 +41,7 @@ body { + @@ -66,92 +67,87 @@ app.tube = new Tube () app.on = function(){ app.tube.on.apply(app.tube, arguments) } app.off = function(){ app.tube.off.apply(app.tube, arguments) } -Map.UI = Map.UI || {} -Map.UI.Ortho = function(map){ - - var base = this - - base.creating = base.dragging = base.resizing = false +var MapTool = Fiber.extend(function(base){ + var exports = { + down: function(e, cursor){}, + move: function(e, cursor){}, + drag: function(e, cursor){}, + up: function(e, cursor, new_cursor){}, + } + return exports +}) - base.mouse = new mouse({ - el: map.el, - down: function(e, cursor){ - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) +var PositionTool = MapTool.extend(function(base){ + var exports = { + down: function(e, cursor){ + cursor.quantize(1/map.zoom) + map.center.a = cursor.x.a + map.center.b = -cursor.y.a + cursor.x.b = cursor.x.a + cursor.y.b = cursor.y.a + map.ui.mouse.down = false + }, + } + return exports +}) - if (e.ctrlKey || e.which === 3) { - if (placing) { - // close polyline or cancel - placing = false - add_mx_polyline(points) - return +var PolylineTool = MapTool.extend(function (base) { + var exports = {} + exports.down = function(e, cursor){ + + // rightclick? + if (e.ctrlKey || e.which === 3) { + e.preventDefault() + e.stopPropagation() + if (placing) { + // close polyline or cancel + placing = false + if (points.length > 2) { + add_mx_polyline(points) + } + else { + points.length = 0 } - cursor.quantize(1/map.zoom) - map.center.a = cursor.x.a - map.center.b = -cursor.y.a - cursor.x.b = cursor.x.a - cursor.y.b = cursor.y.a - base.mouse.down = false - e.preventDefault() - e.stopPropagation() return } + map.ui.tools.position.down(e, cursor) + return + } - // compare to initial point - var p = new vec2( cursor.x.a, cursor.y.a ) - if (placing) { - if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) { - points.push( points[0].clone() ) - placing = false - add_mx_polyline(points) - } - else { - points.push( p ) - mx_points.push( add_mx_point(p) ) - } - } - else { - placing = true - points = [] - points.push( p ) + // compare to initial point + var p = new vec2( cursor.x.a, cursor.y.a ) + if (placing) { + if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) { + points.push( points[0].clone() ) + placing = false + add_mx_polyline(points) + } + else { + points.push( p ) mx_points.push( add_mx_point(p) ) - } - }, - move: function(e, cursor){ - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - - last_point = new vec2( cursor.x.a, cursor.y.a ) - if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) { - document.body.style.cursor = "pointer" - last_point.assign(points[0]) - cursor.x.a = cursor.x.b = last_point.a - cursor.y.a = cursor.y.b = last_point.b - } - else { - document.body.style.cursor = "crosshair" - } - }, - drag: function(e, cursor){ - cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a - cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b - }, - up: function(e, cursor, new_cursor){ - new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - } - }) - - base.wheel = new wheel({ - el: map.el, - update: mousewheel, - }) - - function mousewheel (e, deltaY, deltaX){ - map.set_zoom(map.zoom_exponent - deltaY/20) - } -} - + } + } + else { + placing = true + points = [] + points.push( p ) + mx_points.push( add_mx_point(p) ) + } + } + exports.move = function(e, cursor){ + last_point = new vec2( cursor.x.a, cursor.y.a ) + if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) { + document.body.style.cursor = "pointer" + last_point.assign(points[0]) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + } + else { + document.body.style.cursor = "crosshair" + } + } + return exports +}) var scene, map, controls @@ -302,8 +298,8 @@ function build () { floorplan.el.addEventListener("contextmenu", function(e){ e.preventDefault() var offset = offsetFromPoint(e, this) - var x = (offset.left - 0.5) * floorplan.width - var z = (offset.top - 0.5) * floorplan.height + var x = (offset.left - 0.5) * floorplan.width * floorplan.scale + var z = (offset.top - 0.5) * floorplan.height * floorplan.scale controls.opt.center.x = -x controls.opt.center.y = 0 controls.opt.center.z = -z diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index 37bf620..a41eb8b 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -1,3 +1,4 @@ +
    -
    +
    + + + +
    + +
    + + + +
    + + + + - - @@ -96,7 +97,7 @@ var ArrowTool = MapTool.extend(function(base){ exports.down = function(e, cursor){ last_point.a = cursor.x.a last_point.b = cursor.y.a - var p = findClosestPoint(last_point) + var p = shapes.findClosestPoint(last_point) if (p) { selected_shape = p.shape selected_point = p.point @@ -110,7 +111,7 @@ var ArrowTool = MapTool.extend(function(base){ exports.move = function(e, cursor){ last_point.a = cursor.x.a last_point.b = cursor.y.a - var p = findClosestPoint(last_point) + var p = shapes.findClosestPoint(last_point) if (p) { document.body.style.cursor = "pointer" last_point.assign(p.point) @@ -339,6 +340,26 @@ var OrthoPolylineTool = MapTool.extend(function (base) { return exports }) +var EraserTool = MapTool.extend(function(base){ + var exports = {} + exports.down = function(e, cursor){ + } + exports.move = function(e, cursor){ + var segment = shapes.findClosestSegment(last_point) + if (segment) { + document.body.style.cursor = "pointer" + last_point.a = segment.x + last_point.b = segment.y + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + return + } + else { + document.body.style.cursor = "crosshair" + } + } + return exports +}) var ShapeList = Fiber.extend(function(base){ var exports = {} @@ -348,6 +369,12 @@ var ShapeList = Fiber.extend(function(base){ exports.add = function(shape){ this.shapes.push(shape) } + exports.remove = function(shape){ + var index = this.shapes.indexOf(shape) + if (index !== -1) { + this.shapes.splice(index, 1) + } + } exports.findClosestPoint = function (p){ var point for (var i = 0; i < this.shapes.length; i++) { @@ -364,6 +391,17 @@ var ShapeList = Fiber.extend(function(base){ } return null } + exports.findClosestSegment = function (p){ + var segment = null, closest_segment = null + for (var i = 0; i < this.shapes.length; i++) { + segment = this.shapes[i].hasSegmentNear(p, 10) + if (segment && (! closest_segment || segment.distance < closest_segment.distance)) { + closest_segment = segment + closest_segment.shape = this.shapes[i] + } + } + return closest_segment + } exports.forEach = function(fn){ this.shapes.forEach(fn) } @@ -421,7 +459,10 @@ var Polyline = Fiber.extend(function(base){ var dx, dy, new_x, new_y, x, y, closest_distance = min_dist || Infinity var closest_i = -1 var points = this.points + var p1, p2 = points[0] for (var i = 1; i < points.length; i++) { + p1 = p2 + p2 = points[i] d1 = p1.a - p2.a d2 = p1.b - p2.b sum = d1*d1 + d2*d2 @@ -448,10 +489,6 @@ var Polyline = Fiber.extend(function(base){ } } - exports.getSegment = function(i){ - return [ points[i], points[i+1] ] - } - exports.draw = function(ctx){ var points = this.points if (! points.length) return @@ -541,7 +578,16 @@ MX.Polyline = MX.Object3D.extend({ }) var hue = abs(round( angle / PI * 90 + 300)) mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' - } + }, + + destroy: function(){ + this.faces.forEach(function(mx){ + scene.remove(mx) + }) + this.faces = null + this.points = null + }, + }) MX.Point = MX.Object3D.extend({ @@ -577,6 +623,7 @@ map = new Map ({ map.ui.add_tool("arrow", new ArrowTool) map.ui.add_tool("polyline", new PolylineTool) map.ui.add_tool("ortho-polyline", new OrthoPolylineTool) +map.ui.add_tool("eraser", new EraserTool) map.ui.add_tool("position", new PositionTool) $(window).resize(function(){ @@ -645,6 +692,9 @@ OrthographicToolbar.add("polyline-mode", function(){ OrthographicToolbar.add("ortho-polyline-mode", function(){ map.ui.set_tool("ortho-polyline") }) +OrthographicToolbar.add("eraser-mode", function(){ + map.ui.set_tool("eraser") +}) OrthographicToolbar.pick("ortho-polyline-mode") document.addEventListener('DOMContentLoaded', build) diff --git a/views/about/_old_plans.ejs b/views/about/_old_plans.ejs new file mode 100644 index 0000000..e4b07be --- /dev/null +++ b/views/about/_old_plans.ejs @@ -0,0 +1,63 @@ +
    +

    [[- plans.free.name ]]

    +
      +
    • [[- plans.free.stock_project_limit ]] exhibition with pre-designed template floor plan +
    +
    + +
    +

    [[- plans.basic.name ]]

    +
      +
    • $[[- plans.basic.monthly_price ]]/mo or $[[- plans.basic.yearly_price ]]/year +
    • Comes with [[- plans.basic.basic_layout_limit ]] basic floor plan and [[- plans.basic.basic_project_limit ]] exhibitions +
    • Each new basic floor plan costs $[[- plans.basic.basic_layout_monthly_price ]]/mo + or $[[- plans.basic.basic_layout_yearly_price ]]/year, minimum 3 months +
    • Each new floor plan can have up to [[- plans.basic.basic_project_limit ]] exhibitions +
    • VValls logo appears when embedding an exhibition on a web page +
    • + [[ if (! logged_in) { ]] + + [[ } else if (! user.plan_level) { ]] + + [[ } else if (user.plan_level == plans.basic.level) { ]] + Current Level + [[ } ]] +
    +
    + +
    +

    [[- plans.pro.name ]]

    +
      +
    • $[[- plans.pro.monthly_price ]]/mo or $[[- plans.pro.yearly_price ]]/year +
    • Comes with [[- plans.pro.pro_layout_limit ]] pro floor plan and [[- plans.pro.pro_project_limit ]] exhibitions +
    • Each new pro floor plan costs $[[- plans.pro.pro_layout_monthly_price ]]/mo + or $[[- plans.pro.pro_layout_yearly_price ]]/year, minimum 3 months +
    • Each new pro floor plan can have up to [[- plans.pro.pro_project_limit ]] exhibitions +
    • Includes planning for 3D objects in the room +
    • No VValls logo on embed +
    • + [[ if (! logged_in) { ]] + + [[ } else if (! user.plan_level) { ]] + + [[ } else if (user.plan_level == plans.pro.level) { ]] + Current Level + [[ } else if (user.plan_level < plans.pro.level) { ]] + + [[ } ]] +
    +
    + +
    +
      +
    • Buying any extra floor plan unlocks collaboration.
      Invite an artist or curator to work on the exhibition with you. +
    • Basic Floor plan: Rectangle-based design of any dimension. +
    • Pro Floor plan: Trace an arbitrary floor plan from image. +
    +
    + +
    +

    Want Something Custom?

    +
  • We offer customized white-label options for business and educational uses. +
  • Contact us for more information. +
    • diff --git a/views/about/_plans.ejs b/views/about/_plans.ejs index 16fb9c6..af2a050 100644 --- a/views/about/_plans.ejs +++ b/views/about/_plans.ejs @@ -1,63 +1,117 @@ -
    -

    [[- plans.free.name ]]

    -
      -
    • [[- plans.free.stock_project_limit ]] exhibition with pre-designed template floor plan -
    -
    -
    -

    [[- plans.basic.name ]]

    -
      -
    • $[[- plans.basic.monthly_price ]]/mo or $[[- plans.basic.yearly_price ]]/year -
    • Comes with [[- plans.basic.basic_layout_limit ]] basic floor plan and [[- plans.basic.basic_project_limit ]] exhibitions -
    • Each new basic floor plan costs $[[- plans.basic.basic_layout_monthly_price ]]/mo - or $[[- plans.basic.basic_layout_yearly_price ]]/year, minimum 3 months -
    • Each new floor plan can have up to [[- plans.basic.basic_project_limit ]] exhibitions -
    • VValls logo appears when embedding an exhibition on a web page -
    • - [[ if (! logged_in) { ]] - - [[ } else if (! user.plan_level) { ]] - - [[ } else if (user.plan_level == plans.basic.level) { ]] - Current Level - [[ } ]] -
    +
      +
    • +
      +

      [[- plans.pro.name ]]

      +

      $[[- plans.pro.monthly_price ]] / mo

      +

      Ideal for large galleries
      and small businesses.

      - -
      -

      [[- plans.pro.name ]]

      -
        -
      • $[[- plans.pro.monthly_price ]]/mo or $[[- plans.pro.yearly_price ]]/year -
      • Comes with [[- plans.pro.pro_layout_limit ]] pro floor plan and [[- plans.pro.pro_project_limit ]] exhibitions -
      • Each new pro floor plan costs $[[- plans.pro.pro_layout_monthly_price ]]/mo - or $[[- plans.pro.pro_layout_yearly_price ]]/year, minimum 3 months -
      • Each new pro floor plan can have up to [[- plans.pro.pro_project_limit ]] exhibitions -
      • Includes planning for 3D objects in the room -
      • No VValls logo on embed -
      • - [[ if (! logged_in) { ]] - - [[ } else if (! user.plan_level) { ]] - - [[ } else if (user.plan_level == plans.pro.level) { ]] - Current Level - [[ } else if (user.plan_level < plans.pro.level) { ]] - - [[ } ]] -
      +
        +
      • + [[- plans.pro.pro_layout_limit ]] Pro Floor Plan and [[- plans.pro.pro_project_limit ]] Exhibitions +
        • +
      • + Trace a Floor Plan from a Drawing +
        • +
      • + Image Hosting For Artworks +
        • +
      • + Planning for 3D Objects +
        • +
      • + Everything the Medium Plan Contains +
        • +
      • + No VValls Branding! +
        • +
      + +
      • +
    • +
      +

      [[- plans.basic.name ]]

      +

      $[[- plans.basic.monthly_price ]] / mo

      +

      Great for small galleries
      and art projects.

      - -
      -
        -
      • Buying any extra floor plan unlocks collaboration.
        Invite an artist or curator to work on the exhibition with you. -
      • Basic Floor plan: Rectangle-based design of any dimension. -
      • Pro Floor plan: Trace an arbitrary floor plan from image. -
      +
        +
      • + [[- plans.basic.basic_layout_limit ]] Basic Floor Plan and [[- plans.basic.basic_project_limit ]] Exhibitions +
        • +
      • + Add More Basic Floor Plans for $[[- plans.basic.basic_layout_monthly_price ]]/mo +
        • +
      • + Invite Artists to Collaborate +
        • +
      • + Prepay a Year and Get Two Months Free +
        • +
      • + Everything the Small Plan Contains +
        • +
      • + VValls Branding +
        • +
      + +
      • +
    • +
      +

      [[- plans.free.name ]]

      +

      $0 / mo

      +

      Free forever.

      +
      +
        +
      • + [[- plans.free.stock_project_limit ]] Basic Exhibition +
        • +
      • + Use Any of our Built-In Floor Plans +
        • +
      • + Embed Images and Videos in your Room +
        • +
      • + Custom Color and Wallpaper +
        • +
      • + Embed Room on Your Website +
        • +
      • + VValls Branding +
        • +
      -
      -

      Want Something Custom?

      -
    • We offer customized white-label options for business and educational uses. -
    • Contact us for more information. + +
      • +
    + +
    +

    Want Something Custom?

    +
  • We offer customized white-label options for business and educational uses. +
    + Contact us for more information. +
    • diff --git a/views/about/brochure.ejs b/views/about/brochure.ejs index 80cb154..e34d3d3 100644 --- a/views/about/brochure.ejs +++ b/views/about/brochure.ejs @@ -11,99 +11,7 @@

    Subscriptions

    - - -
      -
    • -
      -

      Large

      -

      $50 / mo

      -

      Ideal for businesses and ecommerce sites.

      -
      -
        -
      • - 15 Source Accounts / Hashtags -
        • -
      • - 3 Embeddable Feeds -
        • -
      • - Pulls In New Posts Every 10 Minutes -
        • -
      • - Analytics and Analysis Tools -
        • -
      • - Everything the Medium Plan Contains -
        • -
      • - No Juicer Branding! -
        • -
      - -
      • -
    • -
      -

      Medium

      -

      $10 / mo

      -

      Great for personal sites and small blogs.

      -
      -
        -
      • - 5 Source Accounts / Hashtags -
        • -
      • - 1 Embeddable Feed -
        • -
      • - Pulls In New Posts Every Hour -
        • -
      • - Moderation and Filtering Tools -
        • -
      • - Everything the Small Plan Contains -
        • -
      • - No Juicer Branding! -
        • -
      - -
      • -
    • -
      -

      Small

      -

      $0 / mo

      -

      Free forever.

      -
      -
        -
      • - 2 Source Accounts / Hashtags -
        • -
      • - 1 Embeddable Social Media Feed -
        • -
      • - Pulls In New Posts Every 24 Hours -
        • -
      • - All Templates and Custom Styling -
        • -
      • - HTTPS Secure Connection Support -
        • -
      • - Juicer Branding -
        • -
      - -
      • -
    - - - - - [[ include _plans ]] + [[ include _plans ]]
    [[ include ../partials/confirm-modal ]] -- cgit v1.2.3-70-g09d2 From 44642b48203b3ee2fa9e281f31ed9fed3f60ee79 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 21 Jul 2015 13:23:22 -0400 Subject: find closest segment --- Gruntfile.js | 8 +- .../assets/javascripts/mx/primitives/mx.point.js | 17 + .../javascripts/mx/primitives/mx.polyline.js | 48 +++ .../rectangles/engine/map/tools/_base.js | 11 + .../rectangles/engine/map/tools/arrow.js | 46 +++ .../rectangles/engine/map/tools/ortho.js | 115 +++++++ .../rectangles/engine/map/tools/polyline.js | 69 ++++ .../rectangles/engine/map/tools/position.js | 17 + .../javascripts/rectangles/engine/map/ui/editor.js | 284 ++++++++++++++++ .../rectangles/engine/map/ui/minimap.js | 81 +++++ .../javascripts/rectangles/engine/map/ui/ortho.js | 105 ++++++ .../javascripts/rectangles/engine/map/ui_editor.js | 284 ---------------- .../rectangles/engine/map/ui_minimap.js | 81 ----- .../javascripts/rectangles/engine/map/ui_ortho.js | 105 ------ public/assets/test/ortho3.html | 362 ++------------------- views/partials/scripts.ejs | 4 +- 16 files changed, 824 insertions(+), 813 deletions(-) create mode 100644 public/assets/javascripts/mx/primitives/mx.point.js create mode 100644 public/assets/javascripts/mx/primitives/mx.polyline.js create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/_base.js create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/arrow.js create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/ortho.js create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/polyline.js create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/position.js create mode 100644 public/assets/javascripts/rectangles/engine/map/ui/editor.js create mode 100644 public/assets/javascripts/rectangles/engine/map/ui/minimap.js create mode 100644 public/assets/javascripts/rectangles/engine/map/ui/ortho.js delete mode 100644 public/assets/javascripts/rectangles/engine/map/ui_editor.js delete mode 100644 public/assets/javascripts/rectangles/engine/map/ui_minimap.js delete mode 100644 public/assets/javascripts/rectangles/engine/map/ui_ortho.js (limited to 'public') diff --git a/Gruntfile.js b/Gruntfile.js index a0f4d83..233c7ff 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -85,8 +85,8 @@ module.exports = function(grunt) { "public/assets/javascripts/rectangles/engine/sculpture/types/image.js", "public/assets/javascripts/rectangles/engine/map/_map.js", - "public/assets/javascripts/rectangles/engine/map/ui_editor.js", - "public/assets/javascripts/rectangles/engine/map/ui_minimap.js", + "public/assets/javascripts/rectangles/engine/map/ui/editor.js", + "public/assets/javascripts/rectangles/engine/map/ui/minimap.js", "public/assets/javascripts/rectangles/engine/map/draw.js", "public/assets/javascripts/ui/lib/View.js", @@ -228,8 +228,8 @@ module.exports = function(grunt) { "public/assets/javascripts/rectangles/engine/sculpture/types/image.js", "public/assets/javascripts/rectangles/engine/map/_map.js", - "public/assets/javascripts/rectangles/engine/map/ui_editor.js", - "public/assets/javascripts/rectangles/engine/map/ui_minimap.js", + "public/assets/javascripts/rectangles/engine/map/ui/editor.js", + "public/assets/javascripts/rectangles/engine/map/ui/minimap.js", "public/assets/javascripts/rectangles/engine/map/draw.js", "public/assets/javascripts/ui/lib/View.js", diff --git a/public/assets/javascripts/mx/primitives/mx.point.js b/public/assets/javascripts/mx/primitives/mx.point.js new file mode 100644 index 0000000..41a7732 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.point.js @@ -0,0 +1,17 @@ +MX.Point = MX.Object3D.extend({ + init: function(p){ + this.updateChildren = false + this.move({ + x: p.a, + y: 11, + z: p.b, + width: 20, + height: 20, + rotationX: PI/2, + }) + this.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' + this.el.style.backfaceVisibility = "visible" + this.el.style.borderRadius = "50%" + scene.add(this) + } +}) diff --git a/public/assets/javascripts/mx/primitives/mx.polyline.js b/public/assets/javascripts/mx/primitives/mx.polyline.js new file mode 100644 index 0000000..555b3c6 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.polyline.js @@ -0,0 +1,48 @@ +MX.Polyline = MX.Object3D.extend({ + init: function(polyline){ + this.faces = [] + this.points = polyline.points + for (var i = 1; i < this.points.length; i++) { + var mx = new MX.Object3D() + var head = this.points[i-1] + var tail = this.points[i] + this.move_face(mx, head, tail) + this.faces.push(mx) + scene.add(mx) + } + }, + + rebuild: function(){ + for (var i = 1; i < this.points.length; i++) { + var mx = this.faces[i-1] + var head = this.points[i-1] + var tail = this.points[i] + this.move_face(mx, head, tail) + } + }, + + move_face: function (mx, head, tail){ + var mid_x = (head.a + tail.a) + var mid_z = (head.b + tail.b) + var len = head.distanceTo( tail ) + var angle = atan2( head.b - tail.b, head.a - tail.a ) + mx.move({ + x: mid_x / 2, + y: wall_height/2 + 1, + z: mid_z / 2, + width: ceil(len), + height: wall_height, + rotationY: angle + }) + var hue = abs(round( angle / PI * 90 + 300)) + mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' + }, + + destroy: function(){ + this.faces.forEach(function(mx){ + scene.remove(mx) + }) + this.faces = null + this.points = null + }, +}) diff --git a/public/assets/javascripts/rectangles/engine/map/tools/_base.js b/public/assets/javascripts/rectangles/engine/map/tools/_base.js new file mode 100644 index 0000000..17b247d --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/_base.js @@ -0,0 +1,11 @@ +var MapTool = Fiber.extend(function(base){ + var exports = { + recenterCursor: true, + down: function(e, cursor){}, + move: function(e, cursor){}, + drag: function(e, cursor){}, + up: function(e, cursor, new_cursor){}, + cancel: function(){}, + } + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/map/tools/arrow.js b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js new file mode 100644 index 0000000..2a73954 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js @@ -0,0 +1,46 @@ +var ArrowTool = MapTool.extend(function(base){ + var exports = {} + + var selected_point = null, original_point = null, selected_shape = null + + exports.down = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var p = shapes.findClosestPoint(last_point) + if (p) { + selected_shape = p.shape + selected_point = p.point + original_point = selected_point.clone() + } + else { + map.ui.set_drag_tool("position") + } + } + + exports.move = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var p = shapes.findClosestPoint(last_point) + if (p) { + document.body.style.cursor = "pointer" + last_point.assign(p.point) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + } + else { + document.body.style.cursor = "crosshair" + } + } + + exports.drag = function(e, cursor){ + selected_point.a = original_point.a + cursor.x.magnitude() + selected_point.b = original_point.b + cursor.y.magnitude() + selected_shape.rebuild() + } + + exports.up = function(e, cursor){ + selected_point = selected_shape = original_point = null + } + + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js new file mode 100644 index 0000000..be3d707 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js @@ -0,0 +1,115 @@ +var OrthoPolylineTool = MapTool.extend(function (base) { + // this will work like normal polyline except all walls will be orthogonal + + var prev_point, horizontal = false, first_edge_is_horizontal = false + + var exports = {} + exports.down = function(e, cursor){ + // rightclick? + if (e.ctrlKey || e.which === 3) { + e.preventDefault() + e.stopPropagation() + if (map.ui.placing) { + // close polyline or cancel + map.ui.placing = false + if (line.points.length > 2) { + line.build() + } + else { + line.reset() + } + return + } + else { + map.ui.tools.position.rightclick(e, cursor) + } + return + } + + // compare to initial point + var p = last_point.clone() + if (map.ui.placing) { + if (line.lastPoint().eq(p)) { + return + } + else if (line.canCloseWith(p)) { + line.close() + line.build() + map.ui.placing = false + } + else { + line.add(p) + prev_point = p + horizontal = ! horizontal + } + } + else { + map.ui.placing = true + line = new Polyline () + line.add(p) + first_point = prev_point = p + horizontal = false + } + } + exports.move = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + if (map.ui.placing) { + if (line.points.length == 1) { + var x = abs(prev_point.a - last_point.a) + var y = abs(prev_point.b - last_point.b) + if (x > y) { + last_point.b = prev_point.b + first_edge_is_horizontal = horizontal = true + } + else { + last_point.a = prev_point.a + first_edge_is_horizontal = horizontal = false + } + } + else { + if (horizontal) { + last_point.b = prev_point.b + } + else { + last_point.a = prev_point.a + } + if (horizontal == first_edge_is_horizontal) { + // check if this point is within N pixels of the normal + // and lock it into place if so + if (horizontal && abs( first_point.a - last_point.a ) < 10/map.zoom) { + last_point.a = first_point.a + } + else if (! horizontal && abs( first_point.b - last_point.b ) < 10/map.zoom) { + last_point.b = first_point.b + } + } + } + + if (line.canCloseWith(last_point)) { + document.body.style.cursor = "pointer" + last_point.assign(first_point) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + } + return + } + var end_point = shapes.findClosestEndPoint(last_point) + if (end_point) { + document.body.style.cursor = "pointer" + last_point.assign(end_point.point) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + return + } + else { + document.body.style.cursor = "crosshair" + } + } + exports.cancel = function(){ + if (map.ui.placing) { line.reset() } + first_point = null + map.ui.placing = false + } + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js new file mode 100644 index 0000000..559aea8 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js @@ -0,0 +1,69 @@ +var PolylineTool = MapTool.extend(function (base) { + var exports = {} + exports.down = function(e, cursor){ + + // rightclick? + if (e.ctrlKey || e.which === 3) { + e.preventDefault() + e.stopPropagation() + if (map.ui.placing) { + // close polyline or cancel + map.ui.placing = false + if (line.points.length > 2) { + line.build() + } + else { + line.reset() + } + return + } + map.ui.tools.position.rightclick(e, cursor) + return + } + + // compare to initial point + var p = last_point.clone() + if (map.ui.placing) { + if (line.canCloseWith(p)) { + line.close() + line.build() + map.ui.placing = false + } + else { + line.add(p) + } + } + else { + map.ui.placing = true + line = new Polyline () + line.add(p) + } + } + exports.move = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + if (map.ui.placing && line.canCloseWith(last_point)) { + document.body.style.cursor = "pointer" + last_point.assign(line.points[0]) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + return + } + var end_point = shapes.findClosestEndPoint(last_point) + if (end_point) { + document.body.style.cursor = "pointer" + last_point.assign(end_point.point) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + return + } + else { + document.body.style.cursor = "crosshair" + } + } + exports.cancel = function(){ + if (map.ui.placing) { line.reset() } + map.ui.placing = false + } + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/map/tools/position.js b/public/assets/javascripts/rectangles/engine/map/tools/position.js new file mode 100644 index 0000000..a994f5a --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/position.js @@ -0,0 +1,17 @@ +var PositionTool = MapTool.extend(function(base){ + var exports = { + recenterCursor: false, + drag: function(e, cursor){ + map.center.a = -cursor.x.magnitude() + map.center.b = cursor.y.magnitude() + }, + rightclick: function(e, cursor){ + cursor.quantize(1/map.zoom) + map.center.a = cursor.x.a + map.center.b = -cursor.y.a + cursor.x.b = cursor.x.a + cursor.y.b = cursor.y.a + } + } + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/map/ui/editor.js b/public/assets/javascripts/rectangles/engine/map/ui/editor.js new file mode 100644 index 0000000..7308344 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/ui/editor.js @@ -0,0 +1,284 @@ + +Map.UI = Map.UI || {} +Map.UI.Editor = function(map){ + + var base = this + + base.creating = base.dragging = base.resizing = false + + base.mouse = new mouse({ + el: map.el, + down: down, + move: move, + drag: drag, + up: up, + rightclick: rightclick, + }) + + base.wheel = new wheel({ + el: map.el, + update: mousewheel, + }) + + base.permissions = new Permissions({ + create: true, + move: true, + resize: true, + destroy: false, + }) + + base.blur = function(){ + Rooms.forEach(function(r){ + return r.focused = false + }) + app.tube("builder-pick-nothing") + } + + // + + function down (e, cursor){ + var room + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + + if (e.ctrlKey || e.which === 3) { + if (Rooms.regions.length == 0) return + cursor.quantize(1/map.zoom) + map.center.a = cursor.x.a + map.center.b = -cursor.y.a + cursor.x.b = cursor.x.a + cursor.y.b = cursor.y.a + base.mouse.down = false + e.preventDefault() + e.stopPropagation() + return + } + + var intersects = Rooms.filter(function(r){ + return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) + }) + + if (intersects.length && (base.permissions.destroy || e.altKey)) { + base.mouse.down = false + + room = intersects[0] + + UndoStack.push({ + type: "destroy-room", + undo: room.copy(), + redo: { id: room.id }, + }) + + Rooms.remove(room) + app.tube("builder-destroy-room", room) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + return + } + else if (intersects.length) { + base.dragging = intersects[0] + base.resizing = base.dragging.rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom) + base.dragging.rect.translation.sides = base.resizing + app.tube("builder-pick-room", intersects[0]) + } + else if (base.permissions.create) { + base.creating = true + } + + if (e.shiftKey && base.dragging) { + base.dragging.rect.quantize(10/map.zoom) + } + } + + function move (e, cursor) { + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + + var intersects = Rooms.filter(function(r){ + return r.rect.contains(cursor.x.a, cursor.y.a) + }) + + if (base.permissions.destroy) { + map.el.className = "destroy" + } + else if (intersects.length) { + var edges = intersects[0].rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom) + switch (edges) { + case FRONT_LEFT: + case BACK_RIGHT: + map.el.className = "nesw-resize" + break + + case FRONT_RIGHT: + case BACK_LEFT: + map.el.className = "nwse-resize" + break + + case FRONT: + case BACK: + map.el.className = "ns-resize" + break + + case LEFT: + case RIGHT: + map.el.className = "ew-resize" + break + + default: + map.el.className = "move" + break + } + } + else { + map.el.className = "" + } + } + + function drag (e, cursor) { + cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a + cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b + + if (base.resizing) { + var x_length = base.dragging.rect.x.length(), + y_length = base.dragging.rect.y.length() + + if (base.resizing & LEFT) { + base.dragging.rect.translation.a = clamp( cursor.x.magnitude(), x_length - side_max, x_length - side_min ) + } + if (base.resizing & RIGHT) { + base.dragging.rect.translation.a = clamp( cursor.x.magnitude(), side_min - x_length, side_max - x_length ) + } + if (base.resizing & FRONT) { + base.dragging.rect.translation.b = clamp( cursor.y.magnitude(), y_length - side_max, y_length - side_min ) + } + if (base.resizing & BACK) { + base.dragging.rect.translation.b = clamp( cursor.y.magnitude(), side_min - y_length, side_max - y_length ) + } + } + else if (base.dragging) { + base.dragging.rect.translation.a = cursor.x.magnitude() + base.dragging.rect.translation.b = cursor.y.magnitude() + } + } + + function up (e, cursor, new_cursor) { + new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + + if (base.creating) { + if (cursor.height() > side_min && cursor.width() > side_min) { + cursor.x.abs().quantize(1) + cursor.y.abs().quantize(1) + var room = Rooms.add_with_rect( cursor ) + + Rooms.rebuild() + + UndoStack.push({ + type: "create-room", + undo: { id: room.id }, + redo: room.copy() + }) + + Rooms.rebuild() + app.tube("builder-pick-room", room) + + // TODO: watch individual scenery object here + Minotaur.watch( app.controller.settings ) + } + } + if (base.resizing || base.dragging) { + var oldState = base.dragging.copy() + + if (base.resizing) { + base.dragging.rect.resize() + } + else if (base.dragging) { + base.dragging.rect.translate() + } + + UndoStack.push({ + type: "update-room", + undo: oldState, + redo: base.dragging.copy() + }) + Rooms.rebuild() + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + } + + var intersects = Rooms.filter(function(r){ + return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) + }) + if (! intersects.length) { + app.tube("builder-pick-nothing") + } + + base.creating = base.dragging = base.resizing = false + } + + var wheelState, wheelTimeout + + function mousewheel (e, deltaY, deltaX){ + var cursor = base.mouse.cursor + + var intersects = Rooms.filter(function(r){ + return r.focused // = r.rect.contains(cursor.x.a, cursor.y.a) + }) + + if (intersects.length && window.heightIsGlobal) { + var rooms = Rooms.values() + wheelState = wheelState || rooms[0].height + var height = clamp( ~~(rooms[0].height + deltaY * 2), height_min, height_max ) + rooms.forEach(function(room){ + room.height = height + }) + + app.tube("builder-pick-room", intersects[0]) + + clearTimeout(wheelTimeout) + wheelTimeout = setTimeout(function(){ + UndoStack.push({ + type: "update-rooms-height", + undo: wheelState, + redo: height + }) + Rooms.rebuild() + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + + wheelState = null + }, 250) + } + else if (intersects.length) { + wheelState = wheelState || intersects[0].copy() + + intersects[0].height = clamp( ~~(intersects[0].height + deltaY * 2), height_min, height_max ) + app.tube("builder-pick-room", intersects[0]) + + clearTimeout(wheelTimeout) + wheelTimeout = setTimeout(function(){ + UndoStack.push({ + type: "update-room", + undo: wheelState, + redo: intersects[0].copy() + }) + Rooms.rebuild() + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + + wheelState = null + }, 250) + } + else { + map.set_zoom(map.zoom_exponent + deltaY/20) + } + } + + function rightclick (e){ + } + +} diff --git a/public/assets/javascripts/rectangles/engine/map/ui/minimap.js b/public/assets/javascripts/rectangles/engine/map/ui/minimap.js new file mode 100644 index 0000000..0fdd336 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/ui/minimap.js @@ -0,0 +1,81 @@ + +Map.UI = Map.UI || {} + +Map.UI.Minimap = function(map){ + + var base = this + + base.creating = base.dragging = base.resizing = false + + base.mouse = new mouse({ + el: map.el, + down: down, + move: move, + drag: drag, + up: up, + rightclick: rightclick, + }) + + base.wheel = new wheel({ + el: map.el, + update: mousewheel, + }) + + var x, z + + // + + function down (e, cursor){ + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + + x = scene.camera.x + z = scene.camera.z + + if (e.ctrlKey || e.which === 3) { + cursor.quantize(1/map.zoom) + map.center.a = cursor.x.a + map.center.b = -cursor.y.a + console.log(map.center+"") + cursor.x.b = cursor.x.a + cursor.y.b = cursor.y.a + base.mouse.down = false + e.preventDefault() + e.stopPropagation() + return + } + } + + function move (e, cursor) { + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + } + + function drag (e, cursor) { + cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a + cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b + + scene.camera.x = x + cursor.x.magnitude() * map.zoom * 16 + scene.camera.z = z + cursor.y.magnitude() * map.zoom * 16 + Rooms.mover.room = null + + if (base.dragging) { + base.dragging.rect.translation.a = cursor.x.magnitude() + base.dragging.rect.translation.b = cursor.y.magnitude() + } + } + + function up (e, cursor, new_cursor) { + new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + + base.dragging = false + } + + function mousewheel (e, deltaY, deltaX){ + map.set_zoom(map.zoom_exponent - deltaY/20) + } + + function rightclick (e){ + } +} diff --git a/public/assets/javascripts/rectangles/engine/map/ui/ortho.js b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js new file mode 100644 index 0000000..52f7339 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js @@ -0,0 +1,105 @@ +Map.UI = Map.UI || {} +Map.UI.Ortho = function(map){ + + var base = this + var last_event = null + + base.creating = base.dragging = base.resizing = false + + base.mouse = new mouse({ + el: map.el, + down: function(e, cursor){ + last_event = e + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom) + if (tool.recenterCursor) { + cursor.x.add(map.center.a) + cursor.y.sub(map.center.b) + base.tools[currentTool].down(e, cursor) + } + else { + base.tools[currentTool].down(e, cursor) + cursor.x.add(map.center.a) + cursor.y.sub(map.center.b) + } + }, + move: function(e, cursor){ + last_event = e + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom) + if (tool.recenterCursor) { + cursor.x.add(map.center.a) + cursor.y.sub(map.center.b) + base.tools[currentTool].move(e, cursor) + } + else { + base.tools[currentTool].move(e, cursor) + cursor.x.add(map.center.a) + cursor.y.sub(map.center.b) + } + }, + drag: function(e, cursor){ + last_event = e + cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom + if (tool.recenterCursor) { + cursor.x.b += map.center.a + cursor.y.b -= map.center.b + base.tools[currentTool].drag(e, cursor) + } + else { + base.tools[currentTool].drag(e, cursor) + cursor.x.b += map.center.a + cursor.y.b -= map.center.b + } + }, + up: function(e, cursor, new_cursor){ + last_event = e + new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom) + new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom) + if (tool.recenterCursor) { + new_cursor.x.add(map.center.a) + new_cursor.y.sub(map.center.b) + base.tools[currentTool].up(e, cursor, new_cursor) + } + else { + base.tools[currentTool].up(e, cursor, new_cursor) + new_cursor.x.add(map.center.a) + new_cursor.y.sub(map.center.b) + } + if (nextTool) { + console.log('found nextTool') + base.set_tool(nextTool) + nextTool = null + } + } + }) + + var currentTool = "polyline", nextTool, tool + base.add_tool = function(name, tool){ + base.tools[name] = tool + } + base.set_tool = function(s){ + console.log("set tool to", s) + base.tools[currentTool].cancel() + currentTool = s + tool = base.tools[currentTool] + } + base.set_drag_tool = function(s){ + console.log('set drag tool to', s) + nextTool = currentTool + currentTool = s + tool = base.tools[currentTool] + base.tools[currentTool].down(last_event, base.mouse.cursor) + } + base.tools = {} + + base.wheel = new wheel({ + el: map.el, + update: mousewheel, + }) + + function mousewheel (e, deltaY, deltaX){ + map.set_zoom(map.zoom_exponent - deltaY/20) + } +} diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js deleted file mode 100644 index 7308344..0000000 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ /dev/null @@ -1,284 +0,0 @@ - -Map.UI = Map.UI || {} -Map.UI.Editor = function(map){ - - var base = this - - base.creating = base.dragging = base.resizing = false - - base.mouse = new mouse({ - el: map.el, - down: down, - move: move, - drag: drag, - up: up, - rightclick: rightclick, - }) - - base.wheel = new wheel({ - el: map.el, - update: mousewheel, - }) - - base.permissions = new Permissions({ - create: true, - move: true, - resize: true, - destroy: false, - }) - - base.blur = function(){ - Rooms.forEach(function(r){ - return r.focused = false - }) - app.tube("builder-pick-nothing") - } - - // - - function down (e, cursor){ - var room - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - - if (e.ctrlKey || e.which === 3) { - if (Rooms.regions.length == 0) return - cursor.quantize(1/map.zoom) - map.center.a = cursor.x.a - map.center.b = -cursor.y.a - cursor.x.b = cursor.x.a - cursor.y.b = cursor.y.a - base.mouse.down = false - e.preventDefault() - e.stopPropagation() - return - } - - var intersects = Rooms.filter(function(r){ - return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) - }) - - if (intersects.length && (base.permissions.destroy || e.altKey)) { - base.mouse.down = false - - room = intersects[0] - - UndoStack.push({ - type: "destroy-room", - undo: room.copy(), - redo: { id: room.id }, - }) - - Rooms.remove(room) - app.tube("builder-destroy-room", room) - - // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) - return - } - else if (intersects.length) { - base.dragging = intersects[0] - base.resizing = base.dragging.rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom) - base.dragging.rect.translation.sides = base.resizing - app.tube("builder-pick-room", intersects[0]) - } - else if (base.permissions.create) { - base.creating = true - } - - if (e.shiftKey && base.dragging) { - base.dragging.rect.quantize(10/map.zoom) - } - } - - function move (e, cursor) { - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - - var intersects = Rooms.filter(function(r){ - return r.rect.contains(cursor.x.a, cursor.y.a) - }) - - if (base.permissions.destroy) { - map.el.className = "destroy" - } - else if (intersects.length) { - var edges = intersects[0].rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom) - switch (edges) { - case FRONT_LEFT: - case BACK_RIGHT: - map.el.className = "nesw-resize" - break - - case FRONT_RIGHT: - case BACK_LEFT: - map.el.className = "nwse-resize" - break - - case FRONT: - case BACK: - map.el.className = "ns-resize" - break - - case LEFT: - case RIGHT: - map.el.className = "ew-resize" - break - - default: - map.el.className = "move" - break - } - } - else { - map.el.className = "" - } - } - - function drag (e, cursor) { - cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a - cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b - - if (base.resizing) { - var x_length = base.dragging.rect.x.length(), - y_length = base.dragging.rect.y.length() - - if (base.resizing & LEFT) { - base.dragging.rect.translation.a = clamp( cursor.x.magnitude(), x_length - side_max, x_length - side_min ) - } - if (base.resizing & RIGHT) { - base.dragging.rect.translation.a = clamp( cursor.x.magnitude(), side_min - x_length, side_max - x_length ) - } - if (base.resizing & FRONT) { - base.dragging.rect.translation.b = clamp( cursor.y.magnitude(), y_length - side_max, y_length - side_min ) - } - if (base.resizing & BACK) { - base.dragging.rect.translation.b = clamp( cursor.y.magnitude(), side_min - y_length, side_max - y_length ) - } - } - else if (base.dragging) { - base.dragging.rect.translation.a = cursor.x.magnitude() - base.dragging.rect.translation.b = cursor.y.magnitude() - } - } - - function up (e, cursor, new_cursor) { - new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - - if (base.creating) { - if (cursor.height() > side_min && cursor.width() > side_min) { - cursor.x.abs().quantize(1) - cursor.y.abs().quantize(1) - var room = Rooms.add_with_rect( cursor ) - - Rooms.rebuild() - - UndoStack.push({ - type: "create-room", - undo: { id: room.id }, - redo: room.copy() - }) - - Rooms.rebuild() - app.tube("builder-pick-room", room) - - // TODO: watch individual scenery object here - Minotaur.watch( app.controller.settings ) - } - } - if (base.resizing || base.dragging) { - var oldState = base.dragging.copy() - - if (base.resizing) { - base.dragging.rect.resize() - } - else if (base.dragging) { - base.dragging.rect.translate() - } - - UndoStack.push({ - type: "update-room", - undo: oldState, - redo: base.dragging.copy() - }) - Rooms.rebuild() - - // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) - } - - var intersects = Rooms.filter(function(r){ - return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) - }) - if (! intersects.length) { - app.tube("builder-pick-nothing") - } - - base.creating = base.dragging = base.resizing = false - } - - var wheelState, wheelTimeout - - function mousewheel (e, deltaY, deltaX){ - var cursor = base.mouse.cursor - - var intersects = Rooms.filter(function(r){ - return r.focused // = r.rect.contains(cursor.x.a, cursor.y.a) - }) - - if (intersects.length && window.heightIsGlobal) { - var rooms = Rooms.values() - wheelState = wheelState || rooms[0].height - var height = clamp( ~~(rooms[0].height + deltaY * 2), height_min, height_max ) - rooms.forEach(function(room){ - room.height = height - }) - - app.tube("builder-pick-room", intersects[0]) - - clearTimeout(wheelTimeout) - wheelTimeout = setTimeout(function(){ - UndoStack.push({ - type: "update-rooms-height", - undo: wheelState, - redo: height - }) - Rooms.rebuild() - - // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) - - wheelState = null - }, 250) - } - else if (intersects.length) { - wheelState = wheelState || intersects[0].copy() - - intersects[0].height = clamp( ~~(intersects[0].height + deltaY * 2), height_min, height_max ) - app.tube("builder-pick-room", intersects[0]) - - clearTimeout(wheelTimeout) - wheelTimeout = setTimeout(function(){ - UndoStack.push({ - type: "update-room", - undo: wheelState, - redo: intersects[0].copy() - }) - Rooms.rebuild() - - // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) - - wheelState = null - }, 250) - } - else { - map.set_zoom(map.zoom_exponent + deltaY/20) - } - } - - function rightclick (e){ - } - -} diff --git a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js deleted file mode 100644 index 0fdd336..0000000 --- a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js +++ /dev/null @@ -1,81 +0,0 @@ - -Map.UI = Map.UI || {} - -Map.UI.Minimap = function(map){ - - var base = this - - base.creating = base.dragging = base.resizing = false - - base.mouse = new mouse({ - el: map.el, - down: down, - move: move, - drag: drag, - up: up, - rightclick: rightclick, - }) - - base.wheel = new wheel({ - el: map.el, - update: mousewheel, - }) - - var x, z - - // - - function down (e, cursor){ - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - - x = scene.camera.x - z = scene.camera.z - - if (e.ctrlKey || e.which === 3) { - cursor.quantize(1/map.zoom) - map.center.a = cursor.x.a - map.center.b = -cursor.y.a - console.log(map.center+"") - cursor.x.b = cursor.x.a - cursor.y.b = cursor.y.a - base.mouse.down = false - e.preventDefault() - e.stopPropagation() - return - } - } - - function move (e, cursor) { - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - } - - function drag (e, cursor) { - cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a - cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b - - scene.camera.x = x + cursor.x.magnitude() * map.zoom * 16 - scene.camera.z = z + cursor.y.magnitude() * map.zoom * 16 - Rooms.mover.room = null - - if (base.dragging) { - base.dragging.rect.translation.a = cursor.x.magnitude() - base.dragging.rect.translation.b = cursor.y.magnitude() - } - } - - function up (e, cursor, new_cursor) { - new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - - base.dragging = false - } - - function mousewheel (e, deltaY, deltaX){ - map.set_zoom(map.zoom_exponent - deltaY/20) - } - - function rightclick (e){ - } -} diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js deleted file mode 100644 index 52f7339..0000000 --- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js +++ /dev/null @@ -1,105 +0,0 @@ -Map.UI = Map.UI || {} -Map.UI.Ortho = function(map){ - - var base = this - var last_event = null - - base.creating = base.dragging = base.resizing = false - - base.mouse = new mouse({ - el: map.el, - down: function(e, cursor){ - last_event = e - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom) - if (tool.recenterCursor) { - cursor.x.add(map.center.a) - cursor.y.sub(map.center.b) - base.tools[currentTool].down(e, cursor) - } - else { - base.tools[currentTool].down(e, cursor) - cursor.x.add(map.center.a) - cursor.y.sub(map.center.b) - } - }, - move: function(e, cursor){ - last_event = e - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom) - if (tool.recenterCursor) { - cursor.x.add(map.center.a) - cursor.y.sub(map.center.b) - base.tools[currentTool].move(e, cursor) - } - else { - base.tools[currentTool].move(e, cursor) - cursor.x.add(map.center.a) - cursor.y.sub(map.center.b) - } - }, - drag: function(e, cursor){ - last_event = e - cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom - cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - if (tool.recenterCursor) { - cursor.x.b += map.center.a - cursor.y.b -= map.center.b - base.tools[currentTool].drag(e, cursor) - } - else { - base.tools[currentTool].drag(e, cursor) - cursor.x.b += map.center.a - cursor.y.b -= map.center.b - } - }, - up: function(e, cursor, new_cursor){ - last_event = e - new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom) - new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom) - if (tool.recenterCursor) { - new_cursor.x.add(map.center.a) - new_cursor.y.sub(map.center.b) - base.tools[currentTool].up(e, cursor, new_cursor) - } - else { - base.tools[currentTool].up(e, cursor, new_cursor) - new_cursor.x.add(map.center.a) - new_cursor.y.sub(map.center.b) - } - if (nextTool) { - console.log('found nextTool') - base.set_tool(nextTool) - nextTool = null - } - } - }) - - var currentTool = "polyline", nextTool, tool - base.add_tool = function(name, tool){ - base.tools[name] = tool - } - base.set_tool = function(s){ - console.log("set tool to", s) - base.tools[currentTool].cancel() - currentTool = s - tool = base.tools[currentTool] - } - base.set_drag_tool = function(s){ - console.log('set drag tool to', s) - nextTool = currentTool - currentTool = s - tool = base.tools[currentTool] - base.tools[currentTool].down(last_event, base.mouse.cursor) - } - base.tools = {} - - base.wheel = new wheel({ - el: map.el, - update: mousewheel, - }) - - function mousewheel (e, deltaY, deltaX){ - map.set_zoom(map.zoom_exponent - deltaY/20) - } -} diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index fa7e3c5..7e7e8ec 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -61,6 +61,8 @@ body { + + @@ -68,8 +70,13 @@ body { - + + + + + + - - + + -- cgit v1.2.3-70-g09d2 From 0a6a314dc01df3d8d7f37c6b97293cedeb1aa6a0 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 28 Jul 2015 13:29:55 -0400 Subject: remove segment --- public/assets/test/ortho3.html | 58 ++++++++++++++++++++++++++++++++++-------- 1 file changed, 48 insertions(+), 10 deletions(-) (limited to 'public') diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index 7e7e8ec..f56c73f 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -87,6 +87,12 @@ app.off = function(){ app.tube.off.apply(app.tube, arguments) } var EraserTool = MapTool.extend(function(base){ var exports = {} exports.down = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var segment = shapes.findClosestSegment(last_point) + if (segment) { + shapes.removeSegment(segment) + } } exports.move = function(e, cursor){ last_point.a = cursor.x.a @@ -98,7 +104,6 @@ var EraserTool = MapTool.extend(function(base){ last_point.b = segment.y cursor.x.a = cursor.x.b = last_point.a cursor.y.a = cursor.y.b = last_point.b - return } else { document.body.style.cursor = "crosshair" @@ -121,6 +126,21 @@ var ShapeList = Fiber.extend(function(base){ this.shapes.splice(index, 1) } } + exports.removeSegment = function (segment){ + var shape = segment.shape + var head = shape.getHeadAtIndex(segment.head) + var tail = shape.getTailAtIndex(segment.tail) + this.remove(shape) + shape.destroy() + if (head) { + this.add(head) + head.build() + } + if (tail) { + this.add(tail) + tail.build() + } + } exports.findClosestPoint = function (p){ var point for (var i = 0; i < this.shapes.length; i++) { @@ -156,29 +176,42 @@ var ShapeList = Fiber.extend(function(base){ var Polyline = Fiber.extend(function(base){ var exports = {} - exports.init = function(){ this.points = [] this.mx_points = [] this.closed = false } - exports.add = function(p){ this.points.push( p ) this.mx_points.push( new MX.Point(p) ) } - exports.firstPoint = function(){ return this.points[0] } exports.lastPoint = function(){ return this.points[this.points.length-1] } - exports.canCloseWith = function(p){ return (this.points.length > 2 && this.points[0].distanceTo( p ) < 10/map.zoom) } - + exports.getHeadAtIndex = function(index){ + if (index == 0) { return null } + if (index == this.points.length-1) { return this.clone() } + var head = new Polyline() + head.points = this.points.slice(0, index+1) + return head + } + exports.getTailAtIndex = function(index){ + if (index == this.points.length-1) { return null } + if (index == 0) { return this.clone() } + var tail = new Polyline() + tail.points = this.points.slice(index, this.points.length) + return tail + } + exports.clone = function(){ + var clone = new Polyline() + clone.points = this.points.concat() + } exports.hasPointNear = function(p){ var point for (var i = 0; i < this.points.length; i++){ @@ -199,7 +232,6 @@ var Polyline = Fiber.extend(function(base){ } return null } - exports.hasSegmentNear = function(p, min_dist){ var p1, p2, d1, d2, sum, rat var dx, dy, new_x, new_y, x, y, closest_distance = min_dist || Infinity @@ -231,10 +263,10 @@ var Polyline = Fiber.extend(function(base){ x: x, y: y, distance: closest_distance, - index: closest_i, + head: closest_i-1, + tail: closest_i, } } - exports.draw = function(ctx){ var points = this.points if (! points.length) return @@ -280,13 +312,18 @@ var Polyline = Fiber.extend(function(base){ } exports.reset = function(){ this.mx_points.forEach(function(mx){ scene.remove(mx) }) - this.points.length = 0 this.mx_points.length = 0 + this.points.length = 0 } + exports.destroy = function(){ + this.reset() + this.mx && this.mx.destroy() + } return exports }) + var scene, map, controls map = new Map ({ @@ -377,6 +414,7 @@ OrthographicToolbar.add("eraser-mode", function(){ // OrthographicToolbar.pick("ortho-polyline-mode") OrthographicToolbar.pick("eraser-mode") + document.addEventListener('DOMContentLoaded', build) function build () { scene = new MX.Scene().addTo("#perspective") -- cgit v1.2.3-70-g09d2 From 80723a9898ad237818ac04ae47ff801919f34961 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 28 Jul 2015 13:50:27 -0400 Subject: split out modules --- .../rectangles/engine/map/tools/eraser.js | 27 +++ .../rectangles/engine/shapes/polyline.js | 147 +++++++++++++ .../rectangles/engine/shapes/shapelist.js | 61 ++++++ public/assets/test/ortho3.html | 243 +-------------------- 4 files changed, 238 insertions(+), 240 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/eraser.js create mode 100644 public/assets/javascripts/rectangles/engine/shapes/polyline.js create mode 100644 public/assets/javascripts/rectangles/engine/shapes/shapelist.js (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/map/tools/eraser.js b/public/assets/javascripts/rectangles/engine/map/tools/eraser.js new file mode 100644 index 0000000..648cd11 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/eraser.js @@ -0,0 +1,27 @@ +var EraserTool = MapTool.extend(function(base){ + var exports = {} + exports.down = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var segment = shapes.findClosestSegment(last_point) + if (segment) { + shapes.removeSegment(segment) + } + } + exports.move = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var segment = shapes.findClosestSegment(last_point) + if (segment) { + document.body.style.cursor = "pointer" + last_point.a = segment.x + last_point.b = segment.y + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + } + else { + document.body.style.cursor = "crosshair" + } + } + return exports +}) diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js new file mode 100644 index 0000000..7e3c04c --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -0,0 +1,147 @@ +var Polyline = Fiber.extend(function(base){ + var exports = {} + exports.init = function(){ + this.points = [] + this.mx_points = [] + this.closed = false + } + exports.add = function(p){ + this.points.push( p ) + this.mx_points.push( new MX.Point(p) ) + } + exports.firstPoint = function(){ + return this.points[0] + } + exports.lastPoint = function(){ + return this.points[this.points.length-1] + } + exports.canCloseWith = function(p){ + return (this.points.length > 2 && this.points[0].distanceTo( p ) < 10/map.zoom) + } + exports.getHeadAtIndex = function(index){ + if (index == 0) { return null } + if (index == this.points.length-1) { return this.clone() } + var head = new Polyline() + head.points = this.points.slice(0, index+1) + return head + } + exports.getTailAtIndex = function(index){ + if (index == this.points.length-1) { return null } + if (index == 0) { return this.clone() } + var tail = new Polyline() + tail.points = this.points.slice(index, this.points.length) + return tail + } + exports.clone = function(){ + var clone = new Polyline() + clone.points = this.points.concat() + } + exports.hasPointNear = function(p){ + var point + for (var i = 0; i < this.points.length; i++){ + point = this.points[i] + if (point.distanceTo( p ) < 10/map.zoom) { + return point + } + } + return null + } + exports.hasEndPointNear = function(p){ + if (this.closed) return null + if (this.firstPoint().distanceTo( p ) < 10/map.zoom) { + return this.firstPoint() + } + if (this.lastPoint().distanceTo( p ) < 10/map.zoom) { + return this.lastPoint() + } + return null + } + exports.hasSegmentNear = function(p, min_dist){ + var p1, p2, d1, d2, sum, rat + var dx, dy, new_x, new_y, x, y, closest_distance = min_dist || Infinity + var closest_i = -1 + var points = this.points + var p1, p2 = points[0] + for (var i = 1; i < points.length; i++) { + p1 = p2 + p2 = points[i] + d1 = p2.a - p1.a + d2 = p2.b - p1.b + sum = d1*d1 + d2*d2 + rat = ((p.a - p1.a) * d1 + (p.b - p1.b) * d2) / sum + rat = rat < 0 ? 0 : rat < 1 ? rat : 1 + new_x = p1.a + rat * d1 + new_y = p1.b + rat * d2 + dx = new_x - p.a + dy = new_y - p.b + sum2 = sqrt(dx*dx+dy*dy) + if (sum2 < closest_distance) { + x = new_x + y = new_y + closest_distance = sum2 + closest_i = i + } + } + if (closest_i == -1) return null + return { + x: x, + y: y, + distance: closest_distance, + head: closest_i-1, + tail: closest_i, + } + } + exports.draw = function(ctx){ + var points = this.points + if (! points.length) return + if (points.length == 1) { + ctx.fillStyle = "#f80" + map.draw.dot_at(this.points[0].a, points[0].b, 5) + } + if (points.length > 1) { + ctx.fillStyle = "rgba(255,255,0,0.1)" + ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom + ctx.beginPath() + ctx.moveTo(points[0].a, points[0].b) + points.forEach(function(point, i){ + i && ctx.lineTo(point.a, point.b) + }) + ctx.stroke() + if (! map.ui.placing || this.closed) { + ctx.fill() + } + } + } + exports.draw_line = function (ctx, p){ + var last = this.points[this.points.length-1] + ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom + ctx.beginPath() + ctx.moveTo(last.a, last.b) + ctx.lineTo(p.a, p.b) + ctx.stroke() + } + exports.close = function(){ + this.points[this.points.length] = this.points[0] + this.closed = true + } + exports.build = function(){ + this.mx_points && this.mx_points.forEach(function(mx){ scene.remove(mx) }) + this.mx = new MX.Polyline(this) + shapes.add(this) + } + exports.rebuild = function(){ + this.mx.rebuild() + } + exports.reset = function(){ + this.mx_points.forEach(function(mx){ scene.remove(mx) }) + this.mx_points.length = 0 + this.points.length = 0 + } + exports.destroy = function(){ + this.reset() + this.mx && this.mx.destroy() + } + return exports +}) diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js new file mode 100644 index 0000000..00e1a4e --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -0,0 +1,61 @@ +var ShapeList = Fiber.extend(function(base){ + var exports = {} + exports.init = function(){ + this.shapes = [] + } + exports.add = function(shape){ + this.shapes.push(shape) + } + exports.remove = function(shape){ + var index = this.shapes.indexOf(shape) + if (index !== -1) { + this.shapes.splice(index, 1) + } + } + exports.removeSegment = function (segment){ + var shape = segment.shape + var head = shape.getHeadAtIndex(segment.head) + var tail = shape.getTailAtIndex(segment.tail) + this.remove(shape) + shape.destroy() + if (head) { + this.add(head) + head.build() + } + if (tail) { + this.add(tail) + tail.build() + } + } + exports.findClosestPoint = function (p){ + var point + for (var i = 0; i < this.shapes.length; i++) { + point = this.shapes[i].hasPointNear(p) + if (point) return { point: point, shape: this.shapes[i] } + } + return null + } + exports.findClosestEndPoint = function (p){ + var point + for (var i = 0; i < this.shapes.length; i++) { + point = this.shapes[i].hasEndPointNear(p) + if (point) return { point: point, shape: this.shapes[i] } + } + return null + } + exports.findClosestSegment = function (p){ + var segment = null, closest_segment = null + for (var i = 0; i < this.shapes.length; i++) { + segment = this.shapes[i].hasSegmentNear(p, 10) + if (segment && (! closest_segment || segment.distance < closest_segment.distance)) { + closest_segment = segment + closest_segment.shape = this.shapes[i] + } + } + return closest_segment + } + exports.forEach = function(fn){ + this.shapes.forEach(fn) + } + return exports +}) \ No newline at end of file diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index f56c73f..ef5732c 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -74,9 +74,12 @@ body { + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/server/lib/middleware.js b/server/lib/middleware.js index 94c4acd..04cb330 100644 --- a/server/lib/middleware.js +++ b/server/lib/middleware.js @@ -114,7 +114,7 @@ var middleware = { console.error(err) req.layout = null } - else if (! project) { + else if (! layout) { req.layout = null } else { diff --git a/server/lib/schemas/Media.js b/server/lib/schemas/Media.js index 8247467..f37fb12 100644 --- a/server/lib/schemas/Media.js +++ b/server/lib/schemas/Media.js @@ -42,6 +42,7 @@ var MediaSchema = new mongoose.Schema({ mute: { type: Boolean, default: false }, keyframe: { type: Number, default: 0.0 }, tag: { type: String, default: "" }, + scale: { type: Number, default: 1.0 }, widthDimension: { type: Number }, heightDimension: { type: Number }, diff --git a/server/lib/views/staff.js b/server/lib/views/staff.js index a3d5bea..43330e2 100644 --- a/server/lib/views/staff.js +++ b/server/lib/views/staff.js @@ -6,6 +6,7 @@ var User = require('../schemas/User'), Collaborator = require('../schemas/Collaborator'), Plan = require('../schemas/Plan'), Subscription = require('../schemas/Subscription'), + Layout = require('../schemas/Layout'), config = require('../../../config'), middleware = require('../middleware'), util = require('../util'), @@ -821,7 +822,7 @@ var staff = module.exports = { make_stock: function(req, res){ res.locals.layout.is_stock = req.body.state == "true" res.locals.layout.save(function(err, layout){ - res.json({ state: layout.featured }) + res.json({ state: layout.is_stock }) }) }, }, diff --git a/views/staff/_layouts.ejs b/views/staff/_layouts.ejs index 3f3e6b2..d97883b 100644 --- a/views/staff/_layouts.ejs +++ b/views/staff/_layouts.ejs @@ -1,5 +1,5 @@
    -[[ layouts.forEach(function(project){ ]] +[[ layouts.forEach(function(layout){ ]]
    [[- layout.name ]] diff --git a/views/staff/layouts/show.ejs b/views/staff/layouts/show.ejs index 0a2014b..b66449f 100644 --- a/views/staff/layouts/show.ejs +++ b/views/staff/layouts/show.ejs @@ -45,14 +45,14 @@ featured? - [[- layout.plan_type == 0 ? "yes" : "no" ]] + [[- layout.is_stock ? "yes" : "no" ]]


    - +

    -- cgit v1.2.3-70-g09d2 From e61e94f5d2f570f0cba3a3f7d91a18d8db524d79 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 10 Aug 2015 20:42:19 -0400 Subject: blueprint upload stuff --- .../javascripts/rectangles/engine/map/_map.js | 2 +- .../javascripts/ui/builder/BlueprintUpload.js | 120 +++++++++++++++++++++ public/assets/stylesheets/app.css | 3 +- public/assets/test/ortho4.html | 43 +++++++- 4 files changed, 162 insertions(+), 6 deletions(-) create mode 100644 public/assets/javascripts/ui/builder/BlueprintUpload.js (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index bf646bb..e3d7621 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -44,7 +44,7 @@ var Map = function(opt){ var canvas = base.canvas = document.createElement("canvas") canvas.width = base.dimensions.a canvas.height = base.dimensions.b - + base.el.appendChild(canvas) switch (opt.type) { diff --git a/public/assets/javascripts/ui/builder/BlueprintUpload.js b/public/assets/javascripts/ui/builder/BlueprintUpload.js new file mode 100644 index 0000000..dbc6f12 --- /dev/null +++ b/public/assets/javascripts/ui/builder/BlueprintUpload.js @@ -0,0 +1,120 @@ + +var BlueprintUpload = UploadView.extend({ + el: ".blueprintUpload", + + mediaTag: "blueprint", + createAction: "/api/media/new", + uploadAction: "/api/media/upload", + listAction: "/api/media/user", + destroyAction: "/api/media/destroy", + + events: { + "mousedown": 'stopPropagation', + "change .url": "enterUrl", + "keydown .url": "enterSetUrl", + + "click .blueprint": "choose", + "change [name=blueprint-dimensions]": "changeDimensions", + "change [name=blueprint-units]": "changeUnits", + "click #saveBlueprint": "save", + }, + + initialize: function(opt){ + this.parent = opt.parent + this.__super__.initialize.call(this) + + this.$url = this.$(".url") + + this.$blueprintMap = this.$("#blueprintMap") + this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") + this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$units = this.$("[name=blueprint-units]") + this.$save = this.$("#saveBlueprint") + + this.map = new Map ({ type: ortho }) + + this.load() + }, + + loaded: false, + load: function(){ + $.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this)) + }, + + populate: function(data){ + this.loaded = true + if (data && data.length) { + data.forEach(this.append.bind(this)) + this.$(".txt").hide() + } + else { + this.$(".txt").show() + } + }, + + append: function(media){ + var $el = $("
    ") + $el.data("id", media._id) + $el.addClass("blueprint") + this.$blueprints.append($el) + }, + + pick: function(e){ + var $el = $(e.currentTarget) + // load map with it + }, + + destroy: function(_id, cb){ + $.ajax({ + type: "delete", + url: this.destroyAction, + data: { _id: _id, _csrf: $("[name=_csrf]").val() } + }).complete(cb || function(){}) + }, + + show: function(){ + this.toggle(true) + }, + hide: function(){ + this.toggle(false) + }, + toggle: function (state) { + this.$el.toggleClass("active", state) + }, + + addUrl: function (url){ + Parser.loadImage(url, function(media){ + if (! media) return + media._csrf = $("[name=_csrf]").val() + media.tag = this.mediaTag + + var request = $.ajax({ + type: "post", + url: this.createAction, + data: media, + }) + request.done(this.add.bind(this)) + + }.bind(this)) + }, + enterUrl: function(){ + var url = this.$url.sanitize() + this.addUrl(url) + this.$url.val("") + }, + enterSetUrl: function (e) { + e.stopPropagation() + if (e.keyCode == 13) { + setTimeout(this.enterUrl.bind(this), 100) + } + }, + + add: function(media){ + this.append(media) + }, + changeDimensions: function(){ + }, + changeUnits: function(){ + }, + +}) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 56c65fe..bb32500 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1597,7 +1597,8 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } .mediaDrawer.signin, .mediaDrawer.signup, .mediaDrawer.alert, .mediaDrawer.confirm, .mediaDrawer.passwordForgot, .mediaDrawer.passwordReset, .mediaDrawer.usernameTaken, -.mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject { +.mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject, +.mediaDrawer.blueprintUpload { display:table; } .confirm button { diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html index b434efb..12b6ab2 100644 --- a/public/assets/test/ortho4.html +++ b/public/assets/test/ortho4.html @@ -1,15 +1,19 @@ +
    @@ -47,11 +55,38 @@ body {
    -
    +
    X

    Upload A Room Image

    + +
    +
    +
    + + + +
    +
    + +
    + + Please tell us the scale of your map. + Click both corners of a wall, and then enter how long the wall is. + +
    +
    + +
    + + + + +
    -- cgit v1.2.3-70-g09d2 From 8d749201d661f62766b4e3a84735c3307ff7ab5e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 11 Aug 2015 13:22:02 -0400 Subject: refactor environment loading --- public/assets/javascripts/app.js | 30 +----- public/assets/javascripts/rectangles/_env.js | 34 +++++- public/assets/javascripts/ui/_router.js | 11 ++ .../javascripts/ui/builder/BlueprintUpload.js | 120 --------------------- public/assets/test/ortho4.html | 9 +- views/modal.ejs | 3 +- views/partials/scripts.ejs | 17 ++- 7 files changed, 68 insertions(+), 156 deletions(-) delete mode 100644 public/assets/javascripts/ui/builder/BlueprintUpload.js (limited to 'public') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 6ebcda5..3cafeca 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -21,40 +21,12 @@ app.init = function () { app.launch = function () { if ($.browser.msie || ! has3d()) { return app.fallback() } - scene = new MX.Scene().addTo('#scene') - scene.width = window.innerWidth - scene.height = window.innerHeight - scene.perspective = window.innerHeight - - window.onresize = function () { - scene.width = window.innerWidth - scene.height = window.innerHeight - scene.perspective = window.innerHeight - scene.update() - } - - cam = scene.camera - cam.y = viewHeight - - if (MX.Map) map = app.map = new MX.Map() - - if (is_mobile) { - app.movements = new MX.MobileMovements(cam, viewHeight) - } - else { - app.movements = new MX.Movements(cam, viewHeight) - } - app.movements.init() - var last_t = 0 function animate (t) { var dt = t - last_t last_t = t requestAnimationFrame(animate) - environment.update(t) - window.path && path.update(t) - app.movements.update(dt || 0) - scene.update() + environment.update(t, dt) } var loader = new Loader(function(){ diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js index 14f73e3..b3c7d66 100644 --- a/public/assets/javascripts/rectangles/_env.js +++ b/public/assets/javascripts/rectangles/_env.js @@ -1,6 +1,22 @@ var environment = new function(){} environment.init = function(){ + scene = new MX.Scene().addTo('#scene') + scene.width = window.innerWidth + scene.height = window.innerHeight + scene.perspective = window.innerHeight + + cam = scene.camera + cam.y = viewHeight + + if (is_mobile) { + app.movements = new MX.MobileMovements(cam, viewHeight) + } + else { + app.movements = new MX.Movements(cam, viewHeight) + } + app.movements.init() + map = new Map () if (window.scene) { @@ -16,7 +32,14 @@ environment.init = function(){ scene.camera.radius = 20 } - + + window.onresize = function () { + scene.width = window.innerWidth + scene.height = window.innerHeight + scene.perspective = window.innerHeight + scene.update() + } + Rooms.init() Walls.init() Scenery.init() @@ -52,8 +75,13 @@ environment.init = function(){ } }) } -environment.update = function(t){ +environment.minimal = function(){ + environment.update = function(t){} +} +environment.update = function(t, dt){ + app.movements.update(dt || 0) + scene.update() map.update() - window.minimap && window.minimap.update && minimap.update() + window.minimap && minimap.update && minimap.update() z = false } diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index 1bdce19..857377c 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -44,6 +44,8 @@ var SiteRouter = Router.extend({ "/project/:name": 'projectViewer', "/project/:name/edit": 'projectEditor', "/project/:name/view": 'projectViewer', + + "/test/blueprint": 'blueprintEditor', }, mobileRoutes: { @@ -157,6 +159,15 @@ var SiteRouter = Router.extend({ this.readerView = app.controller = new ReaderView() this.readerView.load(name) }, + + blueprintEditor: function(e){ + environment.init = environment.minimal + app.launch() + if (app.unsupported) return + + this.blueprintView = app.controller = new BlueprintView () + this.blueprintView.load() + }, signup: function(e){ e && e.preventDefault() diff --git a/public/assets/javascripts/ui/builder/BlueprintUpload.js b/public/assets/javascripts/ui/builder/BlueprintUpload.js deleted file mode 100644 index dbc6f12..0000000 --- a/public/assets/javascripts/ui/builder/BlueprintUpload.js +++ /dev/null @@ -1,120 +0,0 @@ - -var BlueprintUpload = UploadView.extend({ - el: ".blueprintUpload", - - mediaTag: "blueprint", - createAction: "/api/media/new", - uploadAction: "/api/media/upload", - listAction: "/api/media/user", - destroyAction: "/api/media/destroy", - - events: { - "mousedown": 'stopPropagation', - "change .url": "enterUrl", - "keydown .url": "enterSetUrl", - - "click .blueprint": "choose", - "change [name=blueprint-dimensions]": "changeDimensions", - "change [name=blueprint-units]": "changeUnits", - "click #saveBlueprint": "save", - }, - - initialize: function(opt){ - this.parent = opt.parent - this.__super__.initialize.call(this) - - this.$url = this.$(".url") - - this.$blueprintMap = this.$("#blueprintMap") - this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") - this.$dimensions = this.$("[name=blueprint-dimensions]") - this.$units = this.$("[name=blueprint-units]") - this.$save = this.$("#saveBlueprint") - - this.map = new Map ({ type: ortho }) - - this.load() - }, - - loaded: false, - load: function(){ - $.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this)) - }, - - populate: function(data){ - this.loaded = true - if (data && data.length) { - data.forEach(this.append.bind(this)) - this.$(".txt").hide() - } - else { - this.$(".txt").show() - } - }, - - append: function(media){ - var $el = $("
    ") - $el.data("id", media._id) - $el.addClass("blueprint") - this.$blueprints.append($el) - }, - - pick: function(e){ - var $el = $(e.currentTarget) - // load map with it - }, - - destroy: function(_id, cb){ - $.ajax({ - type: "delete", - url: this.destroyAction, - data: { _id: _id, _csrf: $("[name=_csrf]").val() } - }).complete(cb || function(){}) - }, - - show: function(){ - this.toggle(true) - }, - hide: function(){ - this.toggle(false) - }, - toggle: function (state) { - this.$el.toggleClass("active", state) - }, - - addUrl: function (url){ - Parser.loadImage(url, function(media){ - if (! media) return - media._csrf = $("[name=_csrf]").val() - media.tag = this.mediaTag - - var request = $.ajax({ - type: "post", - url: this.createAction, - data: media, - }) - request.done(this.add.bind(this)) - - }.bind(this)) - }, - enterUrl: function(){ - var url = this.$url.sanitize() - this.addUrl(url) - this.$url.val("") - }, - enterSetUrl: function (e) { - e.stopPropagation() - if (e.keyCode == 13) { - setTimeout(this.enterUrl.bind(this), 100) - } - }, - - add: function(media){ - this.append(media) - }, - changeDimensions: function(){ - }, - changeUnits: function(){ - }, - -}) diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html index 12b6ab2..1c1adef 100644 --- a/public/assets/test/ortho4.html +++ b/public/assets/test/ortho4.html @@ -91,14 +91,16 @@ body {
    - - + + + + @@ -126,8 +128,10 @@ body { + + + + @@ -79,10 +81,20 @@ + + + + - + + + + + + + @@ -115,6 +127,9 @@ + + + -- cgit v1.2.3-70-g09d2 From b5d2503ec4e5844ab3793c9e48020bcbaef3112b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 11 Aug 2015 13:22:31 -0400 Subject: blueprint integration into views --- .../javascripts/ui/blueprint/BlueprintScale.js | 0 .../javascripts/ui/blueprint/BlueprintUpload.js | 122 +++++++++++++++++++++ .../javascripts/ui/blueprint/BlueprintView.js | 39 +++++++ views/controls/builder/blueprint.ejs | 92 ++++++++++++++++ 4 files changed, 253 insertions(+) create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintScale.js create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintUpload.js create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintView.js create mode 100644 views/controls/builder/blueprint.ejs (limited to 'public') diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScale.js b/public/assets/javascripts/ui/blueprint/BlueprintScale.js new file mode 100644 index 0000000..e69de29 diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js new file mode 100644 index 0000000..fd3a659 --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js @@ -0,0 +1,122 @@ + +var BlueprintUploadView = UploadView.extend({ + el: ".blueprintUpload", + + mediaTag: "blueprint", + createAction: "/api/media/new", + uploadAction: "/api/media/upload", + listAction: "/api/media/user", + destroyAction: "/api/media/destroy", + + events: { + "mousedown": 'stopPropagation', + "change .url": "enterUrl", + "keydown .url": "enterSetUrl", + + "click .blueprint": "choose", + "change [name=blueprint-dimensions]": "changeDimensions", + "change [name=blueprint-units]": "changeUnits", + "click #saveBlueprint": "save", + }, + + initialize: function(opt){ + this.parent = opt.parent + this.__super__.initialize.call(this) + + this.$url = this.$(".url") + + this.$blueprintMap = this.$("#blueprintMap") + this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") + this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$units = this.$("[name=blueprint-units]") + this.$save = this.$("#saveBlueprint") + + this.map = new Map ({ type: 'ortho' }) + + this.load() + }, + + loaded: false, + load: function(){ + $.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this)) + }, + + populate: function(data){ + this.loaded = true + if (data && data.length) { + data.forEach(this.append.bind(this)) + this.$(".txt").hide() + } + else { + this.$(".txt").show() + } + }, + + append: function(media){ + var $el = $("
    ") + $el.data("id", media._id) + $el.addClass("blueprint") + this.$blueprints.append($el) + }, + + pick: function(e){ + var $el = $(e.currentTarget) + // load map with it + }, + + destroy: function(_id, cb){ + $.ajax({ + type: "delete", + url: this.destroyAction, + data: { _id: _id, _csrf: $("[name=_csrf]").val() } + }).complete(cb || function(){}) + }, + + show: function(){ + this.toggle(true) + }, + hide: function(){ + this.toggle(false) + }, + toggle: function (state) { + this.$el.toggleClass("active", state) + }, + + addUrl: function (url){ + Parser.loadImage(url, function(media){ + if (! media) return + media._csrf = $("[name=_csrf]").val() + media.tag = this.mediaTag + + var request = $.ajax({ + type: "post", + url: this.createAction, + data: media, + }) + request.done(this.add.bind(this)) + + }.bind(this)) + }, + enterUrl: function(){ + var url = this.$url.sanitize() + this.addUrl(url) + this.$url.val("") + }, + enterSetUrl: function (e) { + e.stopPropagation() + if (e.keyCode == 13) { + setTimeout(this.enterUrl.bind(this), 100) + } + }, + + add: function(media){ + this.append(media) + }, + changeDimensions: function(){ + }, + changeUnits: function(){ + }, + save: function(){ + }, + +}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js new file mode 100644 index 0000000..f7ee13e --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -0,0 +1,39 @@ + +var BlueprintView = View.extend({ + el: "#blueprintView", + + events: { + }, + + initialize: function(){ +// this.info = new BuilderInfo ({ parent: this }) +// this.toolbar = new BuilderToolbar ({ parent: this }) +// this.settings = new BuilderSettings ({ parent: this }) +// this.colorControl = new ColorControl ({ parent: this }) +// this.cursor = new HelpCursor({ parent: this }) + this.blueprintUpload = new BlueprintUploadView ({ parent: this }) + }, + + load: function(name){ +// if (! name || name == "new") { +// this.ready({ isNew: true, _id: "new", name: "" }) +// return +// } +// +// name = sanitize(name) +// +// $.get(this.action + name, this.ready.bind(this)) + }, + + ready: function(data){ +// this.settings.load(data) +// this.info.load(data) + }, + + hideExtras: function(){ + }, + + pickWall: function(wall, pos){ + }, + +}) diff --git a/views/controls/builder/blueprint.ejs b/views/controls/builder/blueprint.ejs new file mode 100644 index 0000000..e5f3257 --- /dev/null +++ b/views/controls/builder/blueprint.ejs @@ -0,0 +1,92 @@ + + +
    +
    +
    + +
    + + + +
    + +
    + + + + +
    + +
    + X +
    + +

    Upload A Room Image

    + +
    +
    +
    + + + +
    +
    + +
    + + Please tell us the scale of your map. + Click both corners of a wall, and then enter how long the wall is. + +
    +
    + +
    + + + + +
    + +
    +
    +
    \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 4024085b09261c23cd89227e340037e0238072c7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 11 Aug 2015 14:15:31 -0400 Subject: uploader functioning --- .../javascripts/ui/blueprint/BlueprintEditor.js | 30 ++++++ .../javascripts/ui/blueprint/BlueprintScale.js | 0 .../javascripts/ui/blueprint/BlueprintUpload.js | 35 ++----- .../javascripts/ui/blueprint/BlueprintView.js | 3 +- public/assets/stylesheets/app.css | 2 +- views/controls/blueprint/editor.ejs | 104 +++++++++++++++++++++ views/controls/builder/blueprint.ejs | 92 ------------------ views/modal.ejs | 2 +- views/partials/scripts.ejs | 1 + 9 files changed, 149 insertions(+), 120 deletions(-) create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintEditor.js delete mode 100644 public/assets/javascripts/ui/blueprint/BlueprintScale.js create mode 100644 views/controls/blueprint/editor.ejs delete mode 100644 views/controls/builder/blueprint.ejs (limited to 'public') diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js new file mode 100644 index 0000000..227c1c8 --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -0,0 +1,30 @@ + +var BlueprintEditor = ModalView.extend({ + el: ".blueprintEditor", + + events: { + "change [name=blueprint-dimensions]": "changeDimensions", + "change [name=blueprint-units]": "changeUnits", + "click #saveBlueprint": "save", + }, + + initialize: function(){ + this.$blueprintMap = this.$("#blueprintMap") + this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") + this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$units = this.$("[name=blueprint-units]") + this.$save = this.$("#saveBlueprint") + + this.map = new Map ({ type: 'ortho' }) + + this.$blueprintMap.append(this.map.el) + }, + + changeDimensions: function(){ + }, + changeUnits: function(){ + }, + save: function(){ + }, + +}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScale.js b/public/assets/javascripts/ui/blueprint/BlueprintScale.js deleted file mode 100644 index e69de29..0000000 diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js index fd3a659..9467715 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js @@ -1,5 +1,5 @@ -var BlueprintUploadView = UploadView.extend({ +var BlueprintUpload = UploadView.extend({ el: ".blueprintUpload", mediaTag: "blueprint", @@ -14,9 +14,6 @@ var BlueprintUploadView = UploadView.extend({ "keydown .url": "enterSetUrl", "click .blueprint": "choose", - "change [name=blueprint-dimensions]": "changeDimensions", - "change [name=blueprint-units]": "changeUnits", - "click #saveBlueprint": "save", }, initialize: function(opt){ @@ -24,15 +21,8 @@ var BlueprintUploadView = UploadView.extend({ this.__super__.initialize.call(this) this.$url = this.$(".url") + this.$blueprints = this.$(".blueprints") - this.$blueprintMap = this.$("#blueprintMap") - this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") - this.$dimensions = this.$("[name=blueprint-dimensions]") - this.$units = this.$("[name=blueprint-units]") - this.$save = this.$("#saveBlueprint") - - this.map = new Map ({ type: 'ortho' }) - this.load() }, @@ -52,13 +42,6 @@ var BlueprintUploadView = UploadView.extend({ } }, - append: function(media){ - var $el = $("
    ") - $el.data("id", media._id) - $el.addClass("blueprint") - this.$blueprints.append($el) - }, - pick: function(e){ var $el = $(e.currentTarget) // load map with it @@ -112,11 +95,13 @@ var BlueprintUploadView = UploadView.extend({ add: function(media){ this.append(media) }, - changeDimensions: function(){ - }, - changeUnits: function(){ - }, - save: function(){ - }, + append: function(media){ + var $el = $("") + $el.attr("src", media.url) + $el.data("id", media._id) + $el.addClass("blueprint") + this.$blueprints.append($el) + }, + }) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index f7ee13e..40c61d7 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -11,7 +11,8 @@ var BlueprintView = View.extend({ // this.settings = new BuilderSettings ({ parent: this }) // this.colorControl = new ColorControl ({ parent: this }) // this.cursor = new HelpCursor({ parent: this }) - this.blueprintUpload = new BlueprintUploadView ({ parent: this }) + this.blueprintUpload = new BlueprintUpload ({ parent: this }) + this.blueprintEditor = new BlueprintEditor ({ parent: this }) }, load: function(name){ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index bb32500..0f89242 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1598,7 +1598,7 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } .mediaDrawer.alert, .mediaDrawer.confirm, .mediaDrawer.passwordForgot, .mediaDrawer.passwordReset, .mediaDrawer.usernameTaken, .mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject, -.mediaDrawer.blueprintUpload { +.mediaDrawer.blueprintEditor { display:table; } .confirm button { diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs new file mode 100644 index 0000000..6b80287 --- /dev/null +++ b/views/controls/blueprint/editor.ejs @@ -0,0 +1,104 @@ + + +
    +
    +
    + +
    + + + +
    + +
    + + + + +
    +
    + +
    + X +
    + +

    Upload your Blueprint

    + +
    + +
    +
    + + + +
    +
    + +
    +
    Your uploaded blueprints
    +
    +
    + + Please tell us the scale of your blueprint. + Click both corners of a wall, and then enter how long the wall is. + https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg + +
    +
    + +
    + + + + +
    + +
    +
    diff --git a/views/controls/builder/blueprint.ejs b/views/controls/builder/blueprint.ejs deleted file mode 100644 index e5f3257..0000000 --- a/views/controls/builder/blueprint.ejs +++ /dev/null @@ -1,92 +0,0 @@ - - -
    -
    -
    - -
    - - - -
    - -
    - - - - -
    - -
    - X -
    - -

    Upload A Room Image

    - -
    -
    -
    - - - -
    -
    - -
    - - Please tell us the scale of your map. - Click both corners of a wall, and then enter how long the wall is. - -
    -
    - -
    - - - - -
    - -
    -
    -
    \ No newline at end of file diff --git a/views/modal.ejs b/views/modal.ejs index 433861e..775ba88 100644 --- a/views/modal.ejs +++ b/views/modal.ejs @@ -10,7 +10,7 @@
    - [[ include controls/builder/blueprint ]] + [[ include controls/blueprint/editor ]] [[ include partials/confirm-modal ]] [[ include partials/sign-in ]] [[ include projects/layouts-modal ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 64ac135..2a93e9b 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -128,6 +128,7 @@ + -- cgit v1.2.3-70-g09d2 From d84c89a8dd770ea174a7d2ac90927046a5f4b5f6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 11 Aug 2015 16:50:31 -0400 Subject: blueprint upload styling --- .../javascripts/rectangles/engine/map/ui/ortho.js | 4 +- .../javascripts/ui/blueprint/BlueprintEditor.js | 30 ----- .../javascripts/ui/blueprint/BlueprintScaler.js | 43 ++++++++ .../javascripts/ui/blueprint/BlueprintUpload.js | 36 ++++-- .../javascripts/ui/blueprint/BlueprintView.js | 2 +- views/controls/blueprint/editor.ejs | 122 +++++++++++++++++---- views/partials/scripts.ejs | 2 +- 7 files changed, 178 insertions(+), 61 deletions(-) delete mode 100644 public/assets/javascripts/ui/blueprint/BlueprintEditor.js create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintScaler.js (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/map/ui/ortho.js b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js index 52f7339..5be7446 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui/ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js @@ -81,7 +81,9 @@ Map.UI.Ortho = function(map){ } base.set_tool = function(s){ console.log("set tool to", s) - base.tools[currentTool].cancel() + if (base.tools[currentTool]) { + base.tools[currentTool].cancel() + } currentTool = s tool = base.tools[currentTool] } diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js deleted file mode 100644 index 227c1c8..0000000 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ /dev/null @@ -1,30 +0,0 @@ - -var BlueprintEditor = ModalView.extend({ - el: ".blueprintEditor", - - events: { - "change [name=blueprint-dimensions]": "changeDimensions", - "change [name=blueprint-units]": "changeUnits", - "click #saveBlueprint": "save", - }, - - initialize: function(){ - this.$blueprintMap = this.$("#blueprintMap") - this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") - this.$dimensions = this.$("[name=blueprint-dimensions]") - this.$units = this.$("[name=blueprint-units]") - this.$save = this.$("#saveBlueprint") - - this.map = new Map ({ type: 'ortho' }) - - this.$blueprintMap.append(this.map.el) - }, - - changeDimensions: function(){ - }, - changeUnits: function(){ - }, - save: function(){ - }, - -}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js new file mode 100644 index 0000000..e11b61e --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -0,0 +1,43 @@ + +var BlueprintScaler = ModalView.extend({ + el: ".blueprintScaler", + + events: { + "change [name=blueprint-dimensions]": "changeDimensions", + "change [name=blueprint-units]": "changeUnits", + "click #saveBlueprint": "save", + }, + + initialize: function(){ + this.$blueprintMap = this.$("#blueprintMap") + this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") + this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$units = this.$("[name=blueprint-units]") + this.$save = this.$("#saveBlueprint") + + this.map = map = new Map ({ + type: "ortho", + el: this.$blueprintMap.get(0), + width: window.innerWidth/2, + height: window.innerHeight, + zoom: -2, + zoom_min: -6.2, + zoom_max: 1, + }) + map.ui.add_tool("arrow", new ArrowTool) + map.ui.add_tool("position", new PositionTool) + map.ui.set_tool("position") + }, + + pick: function(){ + + }, + + changeDimensions: function(){ + }, + changeUnits: function(){ + }, + save: function(){ + }, + +}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js index 9467715..deb1075 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js @@ -13,7 +13,8 @@ var BlueprintUpload = UploadView.extend({ "change .url": "enterUrl", "keydown .url": "enterSetUrl", - "click .blueprint": "choose", + "click .blueprint": "pick", + "click .remove": "destroy", }, initialize: function(opt){ @@ -34,25 +35,33 @@ var BlueprintUpload = UploadView.extend({ populate: function(data){ this.loaded = true if (data && data.length) { + this.$blueprints.show() data.forEach(this.append.bind(this)) - this.$(".txt").hide() + this.show() } else { - this.$(".txt").show() + this.show() } }, pick: function(e){ var $el = $(e.currentTarget) - // load map with it + var media = $el.data("media") + this.hide() + this.parent.blueprintScaler.pick(media) }, - destroy: function(_id, cb){ + destroy: function(e){ + e.stopPropagation() + var $el = $(e.currentTarget) + var _id = $el.closest(".blueprint").data("id") + $el.remove() $.ajax({ type: "delete", url: this.destroyAction, data: { _id: _id, _csrf: $("[name=_csrf]").val() } - }).complete(cb || function(){}) + }).complete(function(){ + }) }, show: function(){ @@ -93,13 +102,24 @@ var BlueprintUpload = UploadView.extend({ }, add: function(media){ + this.$blueprints.show() this.append(media) + this.hide() + this.parent.blueprintScaler.pick(media) }, append: function(media){ - var $el = $("") - $el.attr("src", media.url) + var $el = $("") + var img = new Image () + img.src = media.url + var remove = document.createElement("span") + remove.className = "remove" + remove.innerHTML = "x" + $el.data("id", media._id) + $el.data("media", media) + $el.append(img) + $el.append(remove) $el.addClass("blueprint") this.$blueprints.append($el) }, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index 40c61d7..a803f12 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -12,7 +12,7 @@ var BlueprintView = View.extend({ // this.colorControl = new ColorControl ({ parent: this }) // this.cursor = new HelpCursor({ parent: this }) this.blueprintUpload = new BlueprintUpload ({ parent: this }) - this.blueprintEditor = new BlueprintEditor ({ parent: this }) + this.blueprintScaler = new BlueprintScaler ({ parent: this }) }, load: function(name){ diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index 6b80287..aec5e25 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -33,13 +33,88 @@ body { .hud span.active { color: #000; } .blueprintUpload { - width: 240px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + width: 340px; + position: absolute; + top: 50%; left: 50%; + background: white; + padding: 10px; + border: 1px solid black; + box-shadow: -3px 3px #000; + -webkit-transform: translate3D(0%,-200%,0); + transform: translate3D(0%,-200%,0); + margin-left: -175px; + margin-top: -200px; + opacity: 0; +} +.blueprintUpload.active { + -webkit-transform: translate3D(0,0,0); + transform: translate3D(0,0,0); + opacity: 1; +} +.blueprintUpload .toolButton { + float: none; + width: 108px; + display: inline-block; +} +.blueprintUpload .url { + font-size: 15px; + border: 1px solid #888; + padding: 2px; + font-weight: 300; + position: relative; + top: 3px; + margin-right: 10px; + width: 190px; +} +.blueprintUpload p { + font-weight: 300; + font-size: 13px; +} +.blueprintUpload .blueprints { + display: none; +} +.blueprintUpload .blueprints h5 { + width: 250px; + margin: 10px auto; + padding-top: 9px; } .blueprints .blueprint { border: 1px solid black; - padding: 5px; + background: white; + padding: 0px; + position: relative; + display: inline-block; +} +.blueprints .blueprint img { height: 100px; max-width: 200px; + display: block; + cursor: pointer; +} +.blueprints .blueprint .remove { + box-shadow: 0 1px 2px #888; + cursor: pointer; + position: absolute; + color: red; + top: 7px; + right: 7px; + width: 20px; height: 20px; + text-align: center; + background: #fff; + border-radius: 50%; +} +.blueprints .blueprint .remove span { + position: relative; + top: -2px; +} +.blueprintUpload .wallpaperUpload .upload-icon { + margin: 0 4px; +} +.uploadNewBlueprint { + color: #333; + border-bottom: 1px solid; cursor: pointer; } @@ -63,42 +138,49 @@ body {
    - X
    -

    Upload your Blueprint

    -
    +

    Upload your Blueprint

    +

    + Upload an image which you will trace to make a floor plan. + Images should be at least 1000x1000. +

    +
    - +
    -
    Your uploaded blueprints
    - Please tell us the scale of your blueprint. - Click both corners of a wall, and then enter how long the wall is. - https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg +
    +
    + Please tell us the scale of your blueprint. + Click both corners of a wall, and then enter how long the wall is. +

    + Do you want to upload a blueprint? +
    -
    -
    +
    +
    -
    - - +
    + + - + +
    - +
    diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 2a93e9b..136bd4d 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -128,7 +128,7 @@ - + -- cgit v1.2.3-70-g09d2 From 554463ca8e8492bfd5f0f496e3a2291bfb495f80 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 11 Aug 2015 18:49:29 -0400 Subject: blueprint scaler stuff --- .../assets/javascripts/mx/primitives/mx.image.js | 17 ++- .../javascripts/ui/blueprint/BlueprintScaler.js | 34 +++++- .../javascripts/ui/blueprint/BlueprintUpload.js | 5 +- public/assets/stylesheets/app.css | 89 +++++++++++++++ public/assets/test/ortho4.html | 2 + views/controls/blueprint/editor.ejs | 120 +++++---------------- 6 files changed, 163 insertions(+), 104 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index f9de141..33b1373 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -1,5 +1,7 @@ MX.Image = MX.Object3D.extend({ init: function (ops) { + ops = ops || {} + this.type = "Image" this.media = ops.media this.width = 0 @@ -41,15 +43,20 @@ MX.Image = MX.Object3D.extend({ layer.dirty = true layer.update() layer.ops.onload + + if (ops.keepImage) { + layer.image = image + } } - image.src = ops.src; - - if (ops.keepImage) { - this.image = image - } + + if (ops.src) image.src = ops.src + else if (ops.media) image.src = ops.media.url + else if (ops.url) image.src = ops.url }, draw: function(ctx, recenter){ + if (! this.image) { return } + if (recenter) { ctx.save() ctx.scale(-1, 1) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js index e11b61e..a81c89b 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -18,7 +18,7 @@ var BlueprintScaler = ModalView.extend({ this.map = map = new Map ({ type: "ortho", el: this.$blueprintMap.get(0), - width: window.innerWidth/2, + width: window.innerWidth, height: window.innerHeight, zoom: -2, zoom_min: -6.2, @@ -27,10 +27,38 @@ var BlueprintScaler = ModalView.extend({ map.ui.add_tool("arrow", new ArrowTool) map.ui.add_tool("position", new PositionTool) map.ui.set_tool("position") + + scene = scene || { camera: { x: 0, y: 0, z: 0 } } + + this.floorplan = new MX.Image () + + this.animate() }, - pick: function(){ - + pick: function(media){ + this.floorplan.load({ media: media, keepImage: true }) + }, + + animate: function(t){ + requestAnimationFrame(this.animate.bind(this)) + + var dt = t - this.last_t + this.last_t = t + + if (! t) return + + this.map.update(t) + + this.map.draw.ctx.save() + this.map.draw.translate() + + this.floorplan.draw(this.map.draw.ctx, true) + + this.map.draw.coords() + + this.map.draw.mouse(this.map.ui.mouse.cursor) + + this.map.draw.ctx.restore() }, changeDimensions: function(){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js index deb1075..498575a 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js @@ -36,8 +36,9 @@ var BlueprintUpload = UploadView.extend({ this.loaded = true if (data && data.length) { this.$blueprints.show() - data.forEach(this.append.bind(this)) - this.show() + data.forEach(this.append.bind(this)) + this.hide() + this.parent.blueprintScaler.pick(data[0]) } else { this.show() diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 0f89242..6507cc1 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -3253,6 +3253,95 @@ a[data-role="forgot-password"] { } +/* blueprint upload box */ + +.blueprintUpload { + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + width: 340px; + position: absolute; + top: 50%; left: 50%; + background: white; + padding: 10px; + border: 1px solid black; + box-shadow: -3px 3px #000; + -webkit-transform: translate3D(0%,-200%,0); + transform: translate3D(0%,-200%,0); + margin-left: -175px; + margin-top: -200px; + opacity: 0; +} +.blueprintUpload.active { + -webkit-transform: translate3D(0,0,0); + transform: translate3D(0,0,0); + opacity: 1; +} +.blueprintUpload .toolButton { + float: none; + width: 108px; + display: inline-block; +} +.blueprintUpload .url { + font-size: 15px; + border: 1px solid #888; + padding: 2px; + font-weight: 300; + position: relative; + top: 3px; + margin-right: 10px; + width: 190px; +} +.blueprintUpload p { + font-weight: 300; + font-size: 13px; +} +.blueprintUpload .blueprints { + display: none; +} +.blueprintUpload .blueprints h5 { + width: 250px; + margin: 10px auto; + padding-top: 9px; +} +.blueprints .blueprint { + border: 2px solid black; + background: white; + padding: 0px; + position: relative; + display: inline-block; +} +.blueprints .blueprint img { + height: 100px; + max-width: 200px; + display: block; + cursor: pointer; +} +.blueprints .blueprint .remove { + box-shadow: -2px 2px #000; + cursor: pointer; + position: absolute; + color: red; + top: 7px; + right: 7px; + width: 20px; height: 20px; + text-align: center; + background: #fff; + border: 1px solid black; +} +.blueprints .blueprint .remove span { + position: relative; + top: -2px; +} +.blueprintUpload .wallpaperUpload .upload-icon { + margin: 0 4px; +} +.uploadNewBlueprint { + color: #333; + border-bottom: 1px solid; + cursor: pointer; +} + + /* KEYBOARD SHORTCUTS */ .keyboard { float: left; width: 50%; margin-top: 50px; } diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html index 1c1adef..d704e0e 100644 --- a/public/assets/test/ortho4.html +++ b/public/assets/test/ortho4.html @@ -160,7 +160,9 @@ map.ui.placing = false $(window).resize(function(){ scene.width = window.innerWidth/2 + scene.height = window.innerHeight map.canvas.width = map.dimensions.a = window.innerWidth/2 + map.canvas.height = map.dimensions.b = window.innerHeight/2 }) var wall_height = 180 diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index aec5e25..308b4c8 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -32,90 +32,20 @@ body { .hud span { color: #888; cursor: pointer; } .hud span.active { color: #000; } -.blueprintUpload { - -webkit-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - width: 340px; - position: absolute; - top: 50%; left: 50%; - background: white; - padding: 10px; - border: 1px solid black; - box-shadow: -3px 3px #000; - -webkit-transform: translate3D(0%,-200%,0); - transform: translate3D(0%,-200%,0); - margin-left: -175px; - margin-top: -200px; - opacity: 0; -} -.blueprintUpload.active { - -webkit-transform: translate3D(0,0,0); - transform: translate3D(0,0,0); - opacity: 1; -} -.blueprintUpload .toolButton { - float: none; - width: 108px; - display: inline-block; -} -.blueprintUpload .url { - font-size: 15px; - border: 1px solid #888; - padding: 2px; - font-weight: 300; - position: relative; - top: 3px; - margin-right: 10px; - width: 190px; -} -.blueprintUpload p { - font-weight: 300; +.blueprintInfo { + bottom: 14px; + left: 10px; + width: 270px; font-size: 13px; + font-weight: 300; + padding: 10px; } -.blueprintUpload .blueprints { - display: none; -} -.blueprintUpload .blueprints h5 { - width: 250px; - margin: 10px auto; - padding-top: 9px; -} -.blueprints .blueprint { - border: 1px solid black; - background: white; - padding: 0px; - position: relative; - display: inline-block; -} -.blueprints .blueprint img { - height: 100px; - max-width: 200px; - display: block; - cursor: pointer; -} -.blueprints .blueprint .remove { - box-shadow: 0 1px 2px #888; - cursor: pointer; - position: absolute; - color: red; - top: 7px; - right: 7px; - width: 20px; height: 20px; - text-align: center; - background: #fff; - border-radius: 50%; -} -.blueprints .blueprint .remove span { - position: relative; - top: -2px; -} -.blueprintUpload .wallpaperUpload .upload-icon { - margin: 0 4px; +.blueprintInfo .setting { + margin-bottom: 20px; } -.uploadNewBlueprint { - color: #333; - border-bottom: 1px solid; - cursor: pointer; +.blueprintInfo .setting.number input[type=text] { + width: 100px; + font-size: 16px; } @@ -139,7 +69,7 @@ body {
    - +

    Upload your Blueprint

    @@ -161,25 +91,27 @@ body {

    -
    +
    Please tell us the scale of your blueprint. - Click both corners of a wall, and then enter how long the wall is. + Click two corners of a wall, and then enter how long the wall is.

    - Do you want to upload a blueprint? + You can also upload another blueprint. +

    + +
    + + + +
    +
    -
    - - - - -
    -- cgit v1.2.3-70-g09d2 From dd4f0178c7bcb5d14e1308e3877c5ab02eddf000 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 12 Aug 2015 12:37:49 -0400 Subject: modify webhook to support custom plans --- .../javascripts/ui/site/EditSubscriptionModal.js | 1 + server/lib/api/subscription.js | 1 + server/lib/schemas/Subscription.js | 1 + server/lib/schemas/User.js | 1 + server/lib/views/staff/middleware.js | 2 +- server/lib/webhook/webhook.js | 24 ++++++++++++++++------ views/staff/subscriptions/index.ejs | 3 +++ 7 files changed, 26 insertions(+), 7 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 3a20234..1033114 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -96,6 +96,7 @@ var EditSubscriptionModal = ModalView.extend({ free: 0, basic: 1, pro: 2, + custom: 3, }, loaded: false, diff --git a/server/lib/api/subscription.js b/server/lib/api/subscription.js index 9c2d6ef..c2fff4c 100644 --- a/server/lib/api/subscription.js +++ b/server/lib/api/subscription.js @@ -16,6 +16,7 @@ var plan_levels = { free: 0, basic: 1, pro: 2, + custom: 3, } var subscription = module.exports = { diff --git a/server/lib/schemas/Subscription.js b/server/lib/schemas/Subscription.js index 355bbe2..bf43e8b 100644 --- a/server/lib/schemas/Subscription.js +++ b/server/lib/schemas/Subscription.js @@ -9,6 +9,7 @@ var mongoose = require('mongoose'), var SubscriptionSchema = new mongoose.Schema({ user_id: { type: mongoose.Schema.ObjectId, index: true }, + plan_code: { type: String, default: "" }, plan_type: { type: String, default: "free" }, plan_period: { type: String, default: "monthly" }, diff --git a/server/lib/schemas/User.js b/server/lib/schemas/User.js index 4b6ff39..e6e7f03 100644 --- a/server/lib/schemas/User.js +++ b/server/lib/schemas/User.js @@ -55,6 +55,7 @@ var UserSchema = new mongoose.Schema({ default: "", }, + plan_code: { type: String, default: "" }, plan_level: { type: Number, default: 0 }, plan_type: { type: String, default: "free" }, last_charged: { type: Date, default: null }, diff --git a/server/lib/views/staff/middleware.js b/server/lib/views/staff/middleware.js index 5c74d0b..1ea98e9 100644 --- a/server/lib/views/staff/middleware.js +++ b/server/lib/views/staff/middleware.js @@ -40,7 +40,7 @@ var middleware = module.exports = { } if (initial) { if (initial == "?") { - criteria.username = new RegExp('^[$a-zA-Z]', "i") + criteria.username = new RegExp('^[^a-zA-Z]', "i") } else { criteria.username = new RegExp('^' + initial, "i") diff --git a/server/lib/webhook/webhook.js b/server/lib/webhook/webhook.js index 58a13ca..bd51dac 100644 --- a/server/lib/webhook/webhook.js +++ b/server/lib/webhook/webhook.js @@ -26,10 +26,11 @@ var xml_bodyparser = require('express-xml-bodyparser'); var parser = new xml2js.Parser(); var subscribe = module.exports = { - plan_level: { + plan_levels: { free: 0, basic: 1, pro: 2, + custom: 3, }, callbacks: { @@ -62,19 +63,30 @@ var subscribe = module.exports = { Subscription.findOne({ "uuid": uuid }, function(err, old_subscriber){ // if (err) return; - var plan = subscrip.plan[0].plan_code[0].split("-") - var plan_type = plan[0] - var plan_period = plan[1] + var plan, plan_type, plan_code + var plan_code = subscrip.plan[0].plan_code[0] + if (plan_code.indexOf("-") !== -1) { + plan = plan_code.split("-") + plan_type = plan[0] + plan_period = plan[1] + } + else { + plan_type = "custom" + plan_period = "monthly" + } + + user.plan_code = plan_code user.plan_type = plan_type - user.plan_level = subscribe.plan_level[plan_type] + user.plan_level = subscribe.plan_levels[plan_type] var subscriber = old_subscriber || new Subscription () subscriber.uuid = uuid subscriber.user_id = user._id + subscriber.plan_code = plan_code subscriber.plan_type = plan_type subscriber.plan_period = plan_period - subscriber.plan_level = subscribe.plan_level[plan_type] + subscriber.plan_level = subscribe.plan_levels[plan_type] subscriber.add_ons = [] var add_ons = subscrip.subscription_add_ons[0].subscription_add_on if (add_ons) { diff --git a/views/staff/subscriptions/index.ejs b/views/staff/subscriptions/index.ejs index 3efffb5..adf148c 100644 --- a/views/staff/subscriptions/index.ejs +++ b/views/staff/subscriptions/index.ejs @@ -26,6 +26,9 @@ [[- subscription.user.last_seen ]] + + [[- subscription.plan_code ]] + [[ }) ]] -- cgit v1.2.3-70-g09d2 From cc3d0bf036dc934494bf517ebae88bd8544b9b06 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 12 Aug 2015 13:27:07 -0400 Subject: add artist privilege --- .../javascripts/ui/site/EditSubscriptionModal.js | 1 + public/assets/javascripts/ui/site/StaffView.js | 23 +++++++++++++++++++++- server/lib/schemas/User.js | 1 + server/lib/views/staff/index.js | 16 ++++++++++++++- server/lib/webhook/webhook.js | 1 + views/staff/users/show.ejs | 11 ++++++++++- 6 files changed, 50 insertions(+), 3 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 1033114..c1dc9f8 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -97,6 +97,7 @@ var EditSubscriptionModal = ModalView.extend({ basic: 1, pro: 2, custom: 3, + artist: 4, }, loaded: false, diff --git a/public/assets/javascripts/ui/site/StaffView.js b/public/assets/javascripts/ui/site/StaffView.js index 59649e3..97f86c2 100644 --- a/public/assets/javascripts/ui/site/StaffView.js +++ b/public/assets/javascripts/ui/site/StaffView.js @@ -5,12 +5,14 @@ var StaffView = View.extend({ "click #toggle-staff": "toggleStaff", "click #toggle-featured": "toggleFeatured", "click #toggle-stock": "toggleStock", + "click #toggle-artist": "toggleArtist", }, initialize: function() { this.$toggleStaff = $("#toggle-staff") this.$toggleFeatured = $("#toggle-featured") this.$toggleStock = $("#toggle-stock") + this.$toggleArtist = $("#toggle-artist") this.$mediaEmbed = $("#media-embed") if (this.$toggleStaff.length && this.$toggleStaff.data().isstaff) { this.$toggleStaff.html("Is Staff") @@ -21,6 +23,9 @@ var StaffView = View.extend({ if (this.$toggleStock.length && this.$toggleStock.data().stock) { this.$toggleStock.html("Layout is Stock") } + if (this.$toggleArtist.length && this.$toggleArtist.data().isartist) { + this.$toggleArtist.html("Is Artist") + } if (this.$mediaEmbed.length) { var media = this.$mediaEmbed.data() this.$mediaEmbed.html( Parser.tag( media ) ) @@ -75,7 +80,6 @@ var StaffView = View.extend({ }, toggleStock: function(){ - console.log("stock") var state = ! this.$toggleStock.data().stock $.ajax({ type: "put", @@ -93,4 +97,21 @@ var StaffView = View.extend({ }) }, + toggleArtist: function(){ + var state = ! this.$toggleArtist.data().isartist + $.ajax({ + type: "put", + dataType: "json", + url: window.location.href + "/artist", + data: { + state: state, + _csrf: $("#_csrf").val(), + }, + success: function(data){ + this.$toggleArtist.data("stock", data.state) + this.$toggleArtist.html(data.state ? "Is Artist" : "Make Artist") + $("#isArtist").html(data.state ? "yes" : "no") + }.bind(this) + }) + }, }) diff --git a/server/lib/schemas/User.js b/server/lib/schemas/User.js index e6e7f03..829b360 100644 --- a/server/lib/schemas/User.js +++ b/server/lib/schemas/User.js @@ -67,6 +67,7 @@ var UserSchema = new mongoose.Schema({ twitterName: { type: String, default: "" }, facebookUrl: { type: String, default: "" }, isStaff: { type: Boolean, default: false }, + isArtist: { type: Boolean, default: false }, subscription_id: { type: mongoose.Schema.ObjectId }, created_at: { type: Date }, updated_at: { type: Date }, diff --git a/server/lib/views/staff/index.js b/server/lib/views/staff/index.js index 6a56238..033fc88 100644 --- a/server/lib/views/staff/index.js +++ b/server/lib/views/staff/index.js @@ -75,7 +75,15 @@ var staff = module.exports = { staff.users.bless ); - + app.put('/staff/users/:username/artist', + middleware.ensureAuthenticated, + middleware.ensureIsStaff, + + staff.middleware.ensureProfile, + + staff.users.make_artist + ); + if (app.get('env') === 'development') { app.get('/staff/authorize', middleware.ensureAuthenticated, @@ -304,6 +312,12 @@ var staff = module.exports = { res.json({ state: user.isStaff }) }) }, + make_artist: function(req, res){ + res.locals.profile.isArtist = req.body.state == "true" + res.locals.profile.save(function(err, user){ + res.json({ state: user.isArtist }) + }) + }, }, // /staff/projects/ diff --git a/server/lib/webhook/webhook.js b/server/lib/webhook/webhook.js index bd51dac..896d836 100644 --- a/server/lib/webhook/webhook.js +++ b/server/lib/webhook/webhook.js @@ -31,6 +31,7 @@ var subscribe = module.exports = { basic: 1, pro: 2, custom: 3, + artist: 4, }, callbacks: { diff --git a/views/staff/users/show.ejs b/views/staff/users/show.ejs index e441109..a434b57 100644 --- a/views/staff/users/show.ejs +++ b/views/staff/users/show.ejs @@ -35,7 +35,7 @@ plan - [[- profile.plan_type ]] + [[- profile.plan_code ]] @@ -101,12 +101,21 @@ [[- profile.isStaff ? "yes" : "no" ]] + + + is artist? + + + [[- profile.isArtist ? "yes" : "no" ]] + +

    [[ if (String(user._id) != String(profile._id)) { ]] + [[ } ]]
    -- cgit v1.2.3-70-g09d2 From 9ba29a587bf0722db82e5caf1b1cf4e5596003b6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 12 Aug 2015 18:38:12 -0400 Subject: functioning blueprint scaler --- .../javascripts/rectangles/engine/map/draw.js | 2 +- .../rectangles/engine/map/tools/line.js | 49 ++++++++++++ .../assets/javascripts/rectangles/models/rect.js | 6 ++ .../javascripts/ui/blueprint/BlueprintScaler.js | 91 ++++++++++++++++++++-- .../javascripts/ui/blueprint/BlueprintView.js | 3 + server/lib/schemas/Layout.js | 1 + views/controls/blueprint/editor.ejs | 4 +- views/partials/scripts.ejs | 1 + 8 files changed, 148 insertions(+), 9 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/line.js (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 11ba3f8..cc2f4d8 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -198,7 +198,7 @@ Map.Draw = function(map, opt){ // - function line (x,y,a,b,translation){ + var line = draw.line = function (x,y,a,b,translation){ if (translation) { x += translation.a a += translation.a diff --git a/public/assets/javascripts/rectangles/engine/map/tools/line.js b/public/assets/javascripts/rectangles/engine/map/tools/line.js new file mode 100644 index 0000000..8f409a8 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/line.js @@ -0,0 +1,49 @@ +var LineTool = MapTool.extend(function(base){ + var exports = {} + + var selected_point = null + + var line = exports.line = [] + + var can_drag, dragging + + exports.down = function(e, cursor){ + this.cursor = cursor + switch (line.length) { + case 0: + line[0] = cursor.x_component() + can_drag = true + break + case 1: + line[1] = cursor.x_component() + can_drag = false + break + case 2: + line[0] = cursor.x_component() + line.pop() + can_drag = true + break + } + } + + exports.move = function(e, cursor){ + this.cursor = cursor + } + + exports.drag = function(e, cursor){ + if (dragging) { + line[1].a = cursor.x.b + line[1].b = cursor.y.b + } + else if (can_drag && cursor.magnitude() > 10/map.zoom) { + line[1] = cursor.y_component() + dragging = true + } + } + + exports.up = function(e, cursor){ + can_drag = dragging = false + } + + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js index c667cf5..92c8c9e 100644 --- a/public/assets/javascripts/rectangles/models/rect.js +++ b/public/assets/javascripts/rectangles/models/rect.js @@ -39,6 +39,12 @@ Rect.prototype.clone = function(){ return new Rect( this.x.clone(), this.y.clone() ) } + Rect.prototype.x_component = function(){ + return new vec2( this.x.a, this.y.a ) + } + Rect.prototype.y_component = function(){ + return new vec2( this.x.b, this.y.b ) + } Rect.prototype.assign = function(r) { this.x.assign(r.x) this.y.assign(r.y) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js index a81c89b..addf9a9 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -1,10 +1,13 @@ -var BlueprintScaler = ModalView.extend({ +var BlueprintScaler = ModalFormView.extend({ el: ".blueprintScaler", + method: "/api/media/scale", + events: { "change [name=blueprint-dimensions]": "changeDimensions", "change [name=blueprint-units]": "changeUnits", + "click .uploadNewBlueprint": "showBlueprintUpload", "click #saveBlueprint": "save", }, @@ -12,6 +15,7 @@ var BlueprintScaler = ModalView.extend({ this.$blueprintMap = this.$("#blueprintMap") this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$pixels = this.$("[name=blueprint-pixels]") this.$units = this.$("[name=blueprint-units]") this.$save = this.$("#saveBlueprint") @@ -24,23 +28,40 @@ var BlueprintScaler = ModalView.extend({ zoom_min: -6.2, zoom_max: 1, }) - map.ui.add_tool("arrow", new ArrowTool) - map.ui.add_tool("position", new PositionTool) - map.ui.set_tool("position") + this.lineTool = new LineTool + map.ui.add_tool("line", this.lineTool) + map.ui.set_tool("line") scene = scene || { camera: { x: 0, y: 0, z: 0 } } this.floorplan = new MX.Image () - this.animate() + this.animating = false + }, + + showBlueprintUpload: function(){ + this.parent.blueprintUpload.show() }, pick: function(media){ + this.media = media + + if (!! media.scale) { + this.parent.useFloorplan(media) + } + this.floorplan.load({ media: media, keepImage: true }) + + if (! this.animating) { + this.animating = true + this.animate() + } }, animate: function(t){ requestAnimationFrame(this.animate.bind(this)) + + if (! this.animating) return var dt = t - this.last_t this.last_t = t @@ -53,6 +74,27 @@ var BlueprintScaler = ModalView.extend({ this.map.draw.translate() this.floorplan.draw(this.map.draw.ctx, true) + + this.map.draw.ctx.strokeStyle = "#f00" + this.map.draw.ctx.lineWidth = 2/map.zoom + switch (this.lineTool.line.length) { + case 1: + this.map.draw.line( + this.lineTool.line[0].a, + this.lineTool.line[0].b, + this.lineTool.cursor.x.a, + this.lineTool.cursor.y.a + ) + break + case 2: + this.map.draw.line( + this.lineTool.line[0].a, + this.lineTool.line[0].b, + this.lineTool.line[1].a, + this.lineTool.line[1].b + ) + break + } this.map.draw.coords() @@ -62,10 +104,47 @@ var BlueprintScaler = ModalView.extend({ }, changeDimensions: function(){ + app.units = this.$units.val() + this.$dimensions.unitVal() }, changeUnits: function(){ + app.units = this.$units.val() + this.$dimensions.resetUnitVal() + }, + lineLength: function(){ + if (this.lineTool.line.length !== 2) return 0 + var line = this.lineTool.line + return dist( line[0].a, line[0].b, line[1].a, line[1].b ) + } + + validate: function(){ + var val = this.$dimensions.unitVal() + var errors = [] + if (! this.lineLength()) { + errors.push("no line") + alert("Please click two corners of a wall and then specify how long it is in feet or meters.") + } + else if (val == 0) { + errors.push("no measurement") + alert("Please tell us how long the wall is in feet or meters.") + } + return errors }, - save: function(){ + + showErrors: function(){}, + + serialize: function(){ + var fd = new FormData() + fd.append( "_id", this.media._id) + fd.append( "units", this.$units.val() ) + fd.append( "scale", this.$dimensions.unitVal() / this.lineLength() ) + fd.append( "_csrf", $("[name=_csrf]").val()) + return fd + }, + + success: function(){ + this.animating = false + this.parent.useFloorplan(media) }, }) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index a803f12..6b204e5 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -33,6 +33,9 @@ var BlueprintView = View.extend({ hideExtras: function(){ }, + + useFloorplan: function(media){ + }, pickWall: function(wall, pos){ }, diff --git a/server/lib/schemas/Layout.js b/server/lib/schemas/Layout.js index cff1d78..e15e188 100644 --- a/server/lib/schemas/Layout.js +++ b/server/lib/schemas/Layout.js @@ -23,6 +23,7 @@ var LayoutSchema = new mongoose.Schema({ photo: { type: String, }, + media: mongoose.Schema.Types.Mixed, rooms: [mongoose.Schema.Types.Mixed], startPosition: mongoose.Schema.Types.Mixed, viewHeight: { type: Number }, diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index 308b4c8..3e0c097 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -99,8 +99,8 @@ body {

    - - + + - -
    - +
    +
    + + + +
    + +
    -- cgit v1.2.3-70-g09d2 From 6b3d07293bf674703b286cb396049fb8e83b86b7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 14 Aug 2015 16:37:39 -0400 Subject: AnimatedView --- .../javascripts/ui/blueprint/BlueprintScaler.js | 29 ++++----------- public/assets/javascripts/ui/lib/AnimatedView.js | 31 ++++++++++++++++ views/blueprint.ejs | 33 +++++++++++++++++ views/builder.ejs | 16 -------- views/controls/blueprint/editor.ejs | 43 ++++++++++------------ views/modal.ejs | 1 - views/partials/scripts.ejs | 1 + 7 files changed, 93 insertions(+), 61 deletions(-) create mode 100644 public/assets/javascripts/ui/lib/AnimatedView.js create mode 100644 views/blueprint.ejs (limited to 'public') diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js index c393cfb..741f4fb 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -1,5 +1,5 @@ -var BlueprintScaler = ModalFormView.extend({ +var BlueprintScaler = ModalFormView.extend(AnimatedView.prototype).extend({ el: ".blueprintScaler", action: "/api/media/scale", @@ -20,7 +20,7 @@ var BlueprintScaler = ModalFormView.extend({ this.$units = this.$("[name=blueprint-units]") this.$save = this.$("#saveBlueprint") - this.map = map = new Map ({ + this.map = new Map ({ type: "ortho", el: this.$blueprintMap.get(0), width: window.innerWidth, @@ -30,14 +30,12 @@ var BlueprintScaler = ModalFormView.extend({ zoom_max: 1, }) this.lineTool = new LineTool - map.ui.add_tool("line", this.lineTool) - map.ui.set_tool("line") + this.map.ui.add_tool("line", this.lineTool) + this.map.ui.set_tool("line") scene = scene || { camera: { x: 0, y: 0, z: 0 } } this.floorplan = new MX.Image () - - this.animating = false }, showBlueprintUpload: function(){ @@ -50,27 +48,16 @@ var BlueprintScaler = ModalFormView.extend({ if (!! media.units) { this.parent.useFloorplan(media) this.hide() + this.stopAnimating() return } this.floorplan.load({ media: media, keepImage: true }) - if (! this.animating) { - this.animating = true - this.animate() - } + this.startAnimating() }, - animate: function(t){ - requestAnimationFrame(this.animate.bind(this)) - - if (! this.animating) return - - var dt = t - this.last_t - this.last_t = t - - if (! t) return - + animate: function(t, dt){ this.map.update(t) this.map.draw.ctx.save() @@ -147,7 +134,7 @@ var BlueprintScaler = ModalFormView.extend({ }, success: function(){ - this.animating = false + this.stopAnimating() this.parent.useFloorplan(this.media) this.hide() }, diff --git a/public/assets/javascripts/ui/lib/AnimatedView.js b/public/assets/javascripts/ui/lib/AnimatedView.js new file mode 100644 index 0000000..3c50b0a --- /dev/null +++ b/public/assets/javascripts/ui/lib/AnimatedView.js @@ -0,0 +1,31 @@ +var AnimatedView = View.extend({ + + _animating: false, + last_t: 0, + + startAnimating: function(){ + if (this._animating) return + this._animating = true + this._animate() + }, + + stopAnimating: function(){ + this._animating = false + }, + + _animate: function(t){ + if (! this._animating) return + + requestAnimationFrame(this._animate.bind(this)) + + var dt = t - this.last_t + this.last_t = t + + if (! t) return + + this.animate(t, dt) + }, + + animate: function(t, dt){}, + +}) \ No newline at end of file diff --git a/views/blueprint.ejs b/views/blueprint.ejs new file mode 100644 index 0000000..371d66f --- /dev/null +++ b/views/blueprint.ejs @@ -0,0 +1,33 @@ + + + + VValls + [[ include partials/meta ]] + + + +
    + +
    + [[ include partials/header ]] + +
    + [[ include controls/builder/info ]] + [[ include controls/builder/toolbar ]] + [[ include controls/builder/settings ]] + [[ include controls/blueprint/editor ]] +
    + +
    +
    +
    +
    +
    + + [[ include partials/confirm-modal ]] + [[ include projects/layouts-modal ]] + [[ include partials/sign-in ]] + + +[[ include partials/scripts ]] + diff --git a/views/builder.ejs b/views/builder.ejs index 0ba4238..6a31e22 100644 --- a/views/builder.ejs +++ b/views/builder.ejs @@ -17,22 +17,6 @@ [[ include controls/builder/settings ]]
    - -
    diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index 77c958a..e18f501 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -67,7 +67,7 @@ body {
    -
    +
    @@ -90,30 +90,27 @@ body {
    -
    -
    - Please tell us the scale of your blueprint. - Click two corners of a wall, and then enter how long the wall is. -

    - You can also upload another blueprint. -

    +
    + Please tell us the scale of your blueprint. + Click two corners of a wall, and then enter how long the wall is. +

    + You can also upload another blueprint. +

    -
    -
    - - - -
    - -
    -
    +
    +
    + + + +
    + +
    +
    -
    -
    - +
    diff --git a/views/modal.ejs b/views/modal.ejs index 775ba88..dfc5573 100644 --- a/views/modal.ejs +++ b/views/modal.ejs @@ -10,7 +10,6 @@
    - [[ include controls/blueprint/editor ]] [[ include partials/confirm-modal ]] [[ include partials/sign-in ]] [[ include projects/layouts-modal ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index a0222b5..e0024a4 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -102,6 +102,7 @@ + -- cgit v1.2.3-70-g09d2 From 599b43df07f092b35d25e7adac11db3c3b3d9c76 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 17 Aug 2015 12:23:39 -0400 Subject: BlueprintEditor --- public/assets/javascripts/ui/_router.js | 7 +- .../javascripts/ui/blueprint/BlueprintEditor.js | 155 +++++++++++++++++++++ .../javascripts/ui/blueprint/BlueprintView.js | 18 +-- server/index.js | 3 + server/lib/views/index.js | 4 + views/blueprint.ejs | 1 + views/controls/blueprint/editor.ejs | 53 ------- views/controls/blueprint/scaler.ejs | 48 +++++++ views/partials/scripts.ejs | 1 + 9 files changed, 227 insertions(+), 63 deletions(-) create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintEditor.js create mode 100644 views/controls/blueprint/scaler.ejs (limited to 'public') diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index 857377c..177e86f 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -38,6 +38,9 @@ var SiteRouter = Router.extend({ "/layout": 'layoutPicker', "/layout/:name": 'layoutEditor', + "/blueprint": 'blueprintEditor', + "/blueprint/:name": 'blueprintEditor', + "/project": 'projectPicker', "/project/new": 'newProject', "/project/new/:layout": 'projectNewWithLayout', @@ -160,13 +163,13 @@ var SiteRouter = Router.extend({ this.readerView.load(name) }, - blueprintEditor: function(e){ + blueprintEditor: function(e, name){ environment.init = environment.minimal app.launch() if (app.unsupported) return this.blueprintView = app.controller = new BlueprintView () - this.blueprintView.load() + this.blueprintView.load(name) }, signup: function(e){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js new file mode 100644 index 0000000..c781495 --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -0,0 +1,155 @@ + +var wall_height = 180 +var shapes = new ShapeList +var last_point = new vec2 (0,0) + +var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ + + initialize: function(opt){ + this.parent = opt.parent + + map = new Map ({ + type: "ortho", + el: document.querySelector("#orthographic"), + width: window.innerWidth/2, + height: window.innerHeight, + zoom: -2, + zoom_min: -6.2, + zoom_max: 1, + }) + map.ui.add_tool("arrow", new ArrowTool) + map.ui.add_tool("polyline", new PolylineTool) + map.ui.add_tool("ortho-polyline", new OrthoPolylineTool) + map.ui.add_tool("eraser", new EraserTool) + map.ui.add_tool("position", new PositionTool) + map.ui.placing = false + +/* + $(window).resize(function(){ + scene.width = window.innerWidth/2 + scene.height = window.innerHeight + map.canvas.width = map.dimensions.a = window.innerWidth/2 + map.canvas.height = map.dimensions.b = window.innerHeight/2 + }) +*/ + + var PerspectiveToolbar = new Toolbar (".persp-hud") + PerspectiveToolbar.add("orbit-mode", function(){ + controls.toggle(true) + movements.lock() + }) + PerspectiveToolbar.add("keyboard-mode", function(){ + controls.toggle(false) + movements.unlock() + movements.gravity(true) + cam.rotationX = 0 + cam.rotationY = -cam.rotationY + cam.x = 0 + cam.y = viewHeight + 100 + cam.z = 0 + }) + + var OrthographicToolbar = new Toolbar (".ortho-hud") + OrthographicToolbar.add("arrow-mode", function(){ + map.ui.set_tool("arrow") + }) + OrthographicToolbar.add("polyline-mode", function(){ + map.ui.set_tool("polyline") + }) + OrthographicToolbar.add("ortho-polyline-mode", function(){ + map.ui.set_tool("ortho-polyline") + }) + OrthographicToolbar.add("eraser-mode", function(){ + map.ui.set_tool("eraser") + }) + OrthographicToolbar.pick("ortho-polyline-mode") + }, + + animate: function(t, dt){ + map.update(t) + + movements.update(dt) + controls.update() + scene.update() + + map.draw.ctx.save() + map.draw.translate() + + floorplan.draw(map.draw.ctx, true) + + map.draw.coords() + + if (shapes.workline) { + shapes.workline.draw(map.draw.ctx) + if (map.ui.placing && last_point) { + shapes.workline.draw_line( map.draw.ctx, last_point ) + } + } + + shapes.forEach(function(shape){ + shape.draw(map.draw.ctx) + }) + + map.draw.ctx.strokeStyle = "#f00"; + map.draw.x_at(0,0) + map.draw.mouse(map.ui.mouse.cursor) + map.draw.camera(scene.camera) + + map.draw.ctx.restore() + }, + +}) + +function build () { + scene = new MX.Scene().addTo("#perspective") + scene.camera.radius = 20 + + viewHeight = 100 + + scene.width = window.innerWidth/2 + scene.height = window.innerHeight + scene.perspective = window.innerHeight + + cam = scene.camera + movements = new MX.Movements(cam, viewHeight) + movements.init() + movements.lock() + movements.velocity(8) + app.on("move", function(pos){ + cam.x = pos.x + cam.y = pos.y + cam.z = pos.z + }) + + floorplan = new MX.Image({ + src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg", + keepImage: true, + rotationX: -PI/2, + rotationY: PI, + }) + scene.add(floorplan) + + // recenter perspective view by rightclicking map + floorplan.el.addEventListener("contextmenu", function(e){ + e.preventDefault() + var offset = offsetFromPoint(e, this) + var x = (offset.left - 0.5) * floorplan.width * floorplan.scale + var z = (offset.top - 0.5) * floorplan.height * floorplan.scale + controls.opt.center.x = -x + controls.opt.center.y = 0 + controls.opt.center.z = -z + }, true) + + scene.update() + + controls = new MX.OrbitCamera({ + el: scene.el, + radius: 3000, + radiusRange: [ 10, 10000 ], + rotationX: PI/4, + rotationY: PI/2, + }) + controls.init() + + animate(0) +} diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index 6b204e5..0a06fda 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -1,7 +1,9 @@ var BlueprintView = View.extend({ el: "#blueprintView", - + + action: "/api/layout/", + events: { }, @@ -16,14 +18,14 @@ var BlueprintView = View.extend({ }, load: function(name){ -// if (! name || name == "new") { + if (! name || name == "new") { // this.ready({ isNew: true, _id: "new", name: "" }) -// return -// } -// -// name = sanitize(name) -// -// $.get(this.action + name, this.ready.bind(this)) + return + } + + name = sanitize(name) + + $.get(this.action + name, this.ready.bind(this)) }, ready: function(data){ diff --git a/server/index.js b/server/index.js index 0028888..078db8e 100644 --- a/server/index.js +++ b/server/index.js @@ -127,6 +127,9 @@ site.route = function () { app.get('/layout', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.modal) app.get('/layout/:name', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.builder) + app.get('/blueprint', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.blueprint) + app.get('/blueprint/:name', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.blueprint) + app.get('/join/:nonce', middleware.ensureAuthenticated, api.collaborator.join) app.get('/api/collaborator/:slug/index', middleware.ensureAuthenticated, middleware.ensureProject, api.collaborator.index) app.post('/api/collaborator/:slug/create', middleware.ensureAuthenticated, middleware.ensureProject, api.collaborator.create) diff --git a/server/lib/views/index.js b/server/lib/views/index.js index 5241ddb..523f628 100644 --- a/server/lib/views/index.js +++ b/server/lib/views/index.js @@ -84,6 +84,10 @@ var views = module.exports = { res.render('builder') }, + blueprint: function (req, res) { + res.render('blueprint') + }, + modal: function (req, res) { res.render('modal'); }, diff --git a/views/blueprint.ejs b/views/blueprint.ejs index 371d66f..7e13318 100644 --- a/views/blueprint.ejs +++ b/views/blueprint.ejs @@ -16,6 +16,7 @@ [[ include controls/builder/toolbar ]] [[ include controls/builder/settings ]] [[ include controls/blueprint/editor ]] + [[ include controls/blueprint/scaler ]]
    diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index e18f501..5334f85 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -1,8 +1,4 @@