diff --git a/css/style.css b/css/style.css index d41d70b..2f6d0d9 100644 --- a/css/style.css +++ b/css/style.css @@ -63,7 +63,7 @@ input::placeholder{ max-height:100vh; overflow:auto; /*overflow-y:auto;*/ - padding:13px; + padding:.7rem; position:absolute; z-index:6; display:none; @@ -82,14 +82,20 @@ input::placeholder{ #extension-floorplanner-content #extension-floorplanner-areaValue { position:absolute; - bottom: 6rem; - right: 1.6rem; + /*bottom: 6rem; + right: 1.6rem;*/ + top: 1rem; + left: 115px; padding:5px; color:rgba(0,0,0,.2); font-size:1.5em; pointer-events:none; } -#extension-floorplanner-content header{display:none;font-size:11px} + +#extension-floorplanner-content header{ + display:none; + font-size:11px; +} @@ -424,7 +430,7 @@ background-color: #5bc0de; #extension-floorplanner-content button{ - padding:.5rem .7rem; + padding:.5rem .6rem; border-radius:.5rem; border:none; background-color:#ccc; @@ -534,6 +540,18 @@ background-color: #5bc0de; box-sizing:border-box; } +#extension-floorplanner-tool-root .extension-floorplanner-flex-between.extension-floorplanner-menu-area{ + align-items:baseline; +} + +#extension-floorplanner-tool-root .extension-floorplanner-flex-between.extension-floorplanner-menu-area > *{ + width:auto; +} +#extension-floorplanner-tool-root .extension-floorplanner-flex-between.extension-floorplanner-menu-area p{ + text-align:left; +} + + .extension-floorplanner-flex-wrap{ flex-wrap:wrap; } @@ -888,7 +906,7 @@ body:not(.developer) .extension-floorplanner-show-if-developer{ left:0; width:100vw; height:100vh; - opacity:0.3; + opacity:0; } #extension-floorplanner-svg-container-bg-image > svg{ @@ -954,13 +972,14 @@ body:not(.developer) .extension-floorplanner-show-if-developer{ text-align:right; } - - .extension-floorplanner-menu-area{ background-color:rgba(0,0,0,.15); border-radius:.5rem; padding:.1rem .5rem .8rem .5rem; + box-sizing:border-box; + margin-bottom:.5rem; } + .extension-floorplanner-menu-area p{ text-align:center; } @@ -1005,9 +1024,11 @@ body:not(.developer) .extension-floorplanner-show-if-developer{ font-weight:bold; } #extension-floorplanner-energy_list > div{ - padding:1rem; margin:.5rem; + /* + padding:1rem; border:1px solid #ddd; + */ border-radius:.5rem; display:flex; flex-wrap:wrap; @@ -1120,7 +1141,16 @@ g#extension-floorplanner-boxbind{ display:flex; align-items:center; justify-content:center; - margin:.3rem; + margin: 0 0 .6rem .6rem; +} + +body.touch #extension-floorplanner-content .extension-floorplanner-pull-right button{ + margin:.4rem; +} + +body.touch #extension-floorplanner-content .extension-floorplanner-floorplan-item{ + width: 6.4rem; + max-width: 6.4rem; } @@ -1266,19 +1296,24 @@ g#extension-floorplanner-boxbind{ #extension-floorplanner-floorplans-list{ position:fixed; - right:2rem; - top:17rem; - bottom:10rem; + right:-10rem; + top:16rem; + bottom:0rem; overflow:auto; - display:flex; + display:block; flex-direction:column; align-items:center; justify-content:center; + pointer-events:none; +} + +#extension-floorplanner-floorplans-list > li{ + pointer-events:auto; } #extension-floorplanner-floorplans-list:empty{ - display:none + display:none; } @@ -1473,8 +1508,18 @@ g#extension-floorplanner-boxbind{ background-color:#08d!important; } +#extension-floorplanner-boxinfo{ + position:absolute; + bottom:10px; + left:210px; + font-size:1.5em; + color:#08d; +} - +#extension-floorplanner-content #extension-floorplanner-settings{ + display:none; + width:200px; +} @@ -1483,7 +1528,7 @@ g#extension-floorplanner-boxbind{ #extension-floorplanner-moveBox{ position:absolute; right:-200px; - top:10px; + top:1rem; color:#08d; background:transparent; z-index:2; @@ -1497,7 +1542,7 @@ g#extension-floorplanner-boxbind{ position:absolute; z-index:100; right:-150px; - bottom:20px; + /*bottom:20px;*/ text-align:center; background:transparent; padding:0px; @@ -1505,8 +1550,13 @@ g#extension-floorplanner-boxbind{ transition-duration: 0.2s;transition-timing-function: ease-in; } + #extension-floorplanner-zoomBox2{ - bottom:10px + top:1rem; + right:-165px; +} +.extension-floorplanner-zoom-in-out-button{ + opacity:.5; } #extension-floorplanner-scaleVal{ @@ -1515,18 +1565,16 @@ g#extension-floorplanner-boxbind{ background:#4b79aa; border-radius:4px; margin-right:1rem; + pointer-events:none; } - #extension-floorplanner-start-floorplanner-button-container{ position:fixed; bottom:1rem; left:1rem; } - - #extension-floorplanner-modal-new-floorplan-name-input{ background-color:#eee; color:black; @@ -1538,16 +1586,12 @@ g#extension-floorplanner-boxbind{ border-radius:.5rem; } - #extension-floorplanner-clone-button{ display:flex; align-items:center; justify-content:center; } - - - #extension-floorplanner-content button#extension-floorplanner-fire-exit:first-letter{ transform:rotate(45deg); transform: scaleX(-1); @@ -1561,6 +1605,7 @@ g#extension-floorplanner-boxbind{ } } + @media screen and ( max-height: 850px ){ .extension-floorplanner-vertical-shrinker{ display:flex; @@ -1594,13 +1639,16 @@ g#extension-floorplanner-boxbind{ font-size:1.1rem; } - - #extension-floorplanner-node_mode{ font-size:1.1rem; } + + #extension-floorplanner-content button{ + padding:.3rem .5rem; + } } + @media screen and ( max-height: 650px ){ .extension-floorplanner-vertical-shrinker3{ display:flex; @@ -1623,6 +1671,10 @@ g#extension-floorplanner-boxbind{ padding: .8rem 0 1rem 0; } + #extension-floorplanner-content button{ + padding:.2rem .5rem; + } + } @@ -1639,14 +1691,17 @@ g#extension-floorplanner-boxbind{ } } -@media screen and (max-height: 850px), (max-width: 850px) { +@media screen and (max-height: 799px), (max-width: 850px) { #extension-floorplanner-content .extension-floorplanner-pull-right button{ padding:1rem; font-size:1rem; min-width:1rem; min-height:1rem; } - + #extension-floorplanner-floorplans-list{ + top:10rem; + } + /* #extension-floorplanner-moveBox{ right: -215px; } @@ -1656,9 +1711,12 @@ g#extension-floorplanner-boxbind{ #extension-floorplanner-scaleVal{ margin-right:0; } + */ + /* #extension-floorplanner-floorplans-list{ right:1rem; } + */ #extension-floorplanner-boxinfo{ display:none; @@ -1684,16 +1742,21 @@ g#extension-floorplanner-boxbind{ #extension-floorplanner-content button{ padding:.4rem .5rem; } - + /* #extension-floorplanner-floorplans-list{ top:12rem; bottom:8rem; } + */ #extension-floorplanner-content #extension-floorplanner-areaValue{ bottom:5rem; right:1rem; padding:0; } + + #extension-floorplanner-zoomBox2{ + right:-200px; + } } diff --git a/floorplanEditor.js b/floorplanEditor.js index 018f3e6..a6354b4 100644 --- a/floorplanEditor.js +++ b/floorplanEditor.js @@ -592,7 +592,7 @@ var floorplanEditor = { catch(e){ console.error("floorplaneditor.js: tt error: ", e); } - console.log("obj2D: type: ", type); + //console.log("obj2D: type: ", typeof type, type); if(type == 'boundingBox'){ //continue } @@ -658,7 +658,7 @@ var floorplanEditor = { this.thick = thick } - console.log("obj2D: original size and thick at end of init: ", this.size); + //console.log("obj2D: original size and thick at end of init: ", this.size); this.original_size = this.size; this.original_thick = this.thick; @@ -670,11 +670,13 @@ var floorplanEditor = { // this.update = function () { - console.log("in update. this.size, this.thick, meter: ", this.size, this.thick); + //console.log("in update. this.size, this.thick, meter: ", this.size, this.thick); if(this.class == 'energy' || this.class == 'text'){ + /* if(document.querySelector('#extension-floorplanner-tool-root.extension-floorplanner-scale-linked')){ this.thick = this.size; } + */ } if(this.class == 'measure'){ this.width = this.size; //(this.size / meter).toFixed(2); @@ -684,8 +686,8 @@ var floorplanEditor = { this.width = (this.size / meter).toFixed(2); this.height = (this.thick / meter).toFixed(2); } - - + + //console.log("floorplanEditor: obj2D: update: calling cc with: classe, type, size, thick, value", this.class, this.type, this.size, this.thick, this.value); cc = carpentryCalc(this.class, this.type, this.size, this.thick, this.value); //console.log("floorplanEditor: obj2D: update: cc result: ", cc); @@ -705,7 +707,7 @@ var floorplanEditor = { } } else { - console.error("cc update would have set text now...? cc[tt]:", cc[tt]); + //console.error("cc update would have set text now...? cc[tt]:", cc[tt]); //this.graph.find('text').context.textContent = cc[tt].text; //this.graph.querySelectorAll('text')[tt].context.textContent = cc[tt].text; } @@ -718,12 +720,15 @@ var floorplanEditor = { if(typeof this.x == 'undefined'){ console.error("floorplaneditor.js: this.x was undefined. this: ", this); } + if(this.class == 'energy' || this.class == 'text'){ // || this.class == 'measure' //console.warn("UPDATE: this.width: ", this.width); - if(this.class != 'measure' && document.querySelector('#extension-floorplanner-scale-link-toggle-button-container').classList.contains('extension-floorplanner-scale-linked')){ - this.height = this.width; - } + //console.warn("UPDATE: this.height: ", this.height); + //if(this.class != 'measure' && document.querySelector('#extension-floorplanner-scale-link-toggle-button-container').classList.contains('extension-floorplanner-scale-linked')){ + // this.height = this.width; + //} this.graph.setAttribute("transform", "translate(" + (this.x) + "," + (this.y) + ") rotate(" + this.angle + ",0,0) scale(" + this.width + ", " + this.height + ")" ); + //this.graph.setAttribute("transform", "translate(" + (this.x) + "," + (this.y) + ")" ); } else{ this.graph.setAttribute("transform", "translate(" + (this.x) + "," + (this.y) + ") rotate(" + this.angle + ",0,0) scale(" + hingeUpdate + ", 1)" ); diff --git a/index.html b/index.html index e8f6e20..b24c51d 100644 --- a/index.html +++ b/index.html @@ -38,6 +38,7 @@

๐Ÿ  Floorplanner

+ + @@ -162,6 +164,55 @@

๐Ÿ  Floorplanner

+ + + +
+
+
+

โš™๏ธ Settings

+
+
    + +
  • +
    +

    Auto-save

    +

    Normally any change you make is immediately saved.

    +
    +
    + + +
    +
  • + +
  • +
    +

    Continue walls

    +

    Draw multiple lines in a row.

    +
    +
    + + +
    +
  • + +
+
+ +
+
    +
  • + +
    • +
+
+ +
+
+ + + +

CALCULATOR Report plan.



@@ -226,7 +277,7 @@

Modify object

cm
- +

Length

@@ -585,9 +636,11 @@

Room

data-placement="right" title="Make walls">๐Ÿงฑ--> -
+ +
    • @@ -683,11 +737,18 @@

    Room

    data-toggle="tooltip" data-placement="right" title="Full screen">โ‡ฒโ‡ฑ +
  • +
    • + +
    • + +
    @@ -704,16 +765,16 @@

    Room

    - +
    - +
    @@ -738,9 +799,10 @@

    ๐ŸŒฟ Plant - + + +

    @@ -988,39 +1050,42 @@

    +
    โŒ‚ Floorplanner
    -
    +

    - โŒ‚ Floorplanner +

    -
    +

    - + + +

    - - - + + +

    - +

    +
    1m @@ -1055,22 +1120,36 @@

    in object mode"); + //console.log("---> in object mode"); snap = calcul_snap(event, grid_snap); - console.log("---> object mode: snap: ", snap); + //console.log("---> object mode: snap: ", snap); if (typeof (binder) != 'undefined') { if(typeof binder.family != 'undefined'){ if ((binder.family != 'stick' && binder.family != 'collision') || WALLS.length == 0) { @@ -1389,7 +1523,7 @@

    = 0; i--) { for (var i = 0; i < OBJDATA.length; i++) { - console.log(i, ": OBJDATA[i]: ", OBJDATA[i]); - console.log(i, ": OBJDATA[i].type: ", OBJDATA[i].type); + //console.log(i, ": OBJDATA[i]: ", OBJDATA[i]); + //console.log(i, ": OBJDATA[i].type: ", OBJDATA[i].type); if(typeof OBJDATA[i].type == 'undefined'){ console.error("OBJ has undefined type. This should not happen. position: ", i); - console.log("OBJDATA type?", typeof OBJDATA, OBJDATA.constructor); - console.log("OBJDATA.length before slice: ", OBJDATA.length); + //console.log("OBJDATA type?", typeof OBJDATA, OBJDATA.constructor); + //console.log("OBJDATA.length before slice: ", OBJDATA.length); //OBJDATA.splice(i,1); //OBJDATA.array.splice(index, 1); - console.log("OBJDATA.length after slice: ", OBJDATA.length); + //console.log("OBJDATA.length after slice: ", OBJDATA.length); //objTarget = false; //bye_binder(); continue; @@ -1762,11 +1896,11 @@

    1) wallList = wallList[0]; @@ -1781,38 +1915,6 @@

    1) wallList = wallList[0]; - inWallRib(wallList); - var thickObj = wallList.thick; - var sizeObj = objTarget.size; - - binder = new floorplanEditor.obj2D("inWall", "socle", "", objTarget, objTarget.angle, 0, sizeObj, "normal", thickObj); - console.log("select_mode: binder or inWall type: ", binder); - binder.update(); - - binder.oldXY = { x: objTarget.x, y: objTarget.y }; // FOR OBJECT MENU - document.querySelector('#extension-floorplanner-boxbind').append(binder.graph); - } - */ } else { @@ -1826,7 +1928,7 @@

    select_mode switching to bind_mode."); + //console.log("mouse down -> select_mode switching to bind_mode."); if (binder.type == 'obj') { @@ -2894,7 +3014,7 @@

    20 - rotation_snappyness && sliderValue < 20 + rotation_snappyness){ - console.log("snapping wall to 20"); + //console.log("snapping wall to 20"); sliderValue = 20; document.getElementById('extension-floorplanner-wallWidth').value = sliderValue; } - console.log("sliderValue after: ", sliderValue); + //console.log("sliderValue after: ", sliderValue); binder.wall.thick = sliderValue; binder.wall.type = "normal"; floorplanEditor.architect(WALLS); @@ -4515,7 +4600,7 @@

    -45-rotation_snappyness){ - console.log("optimizing"); + //console.log("optimizing"); sliderValue = -45; document.getElementById('extension-floorplanner-bboxRotationVal').textContent = sliderValue; document.getElementById('extension-floorplanner-bboxRotation').value = sliderValue; } else if(sliderValue > 135-rotation_snappyness && sliderValue < 135+rotation_snappyness){ - console.log("optimizing"); + //console.log("optimizing"); sliderValue = 135; document.getElementById('extension-floorplanner-bboxRotationVal').textContent = sliderValue; document.getElementById('extension-floorplanner-bboxRotation').value = sliderValue; } else if(sliderValue < -130+rotation_snappyness && sliderValue > -135-rotation_snappyness){ - console.log("optimizing"); + //console.log("optimizing"); sliderValue = -135; document.getElementById('extension-floorplanner-bboxRotationVal').textContent = sliderValue; document.getElementById('extension-floorplanner-bboxRotation').value = sliderValue; @@ -4637,7 +4722,7 @@

    ", message); + if (message){ + console.log("matrixCalc called by -> ", message); + } let m = el.getCTM(); let bb = el.getBBox(); let tpts = [ @@ -4937,7 +5026,7 @@

    1 && zoom < 17) { zoom--; width_viewbox += xmove; @@ -4996,12 +5085,12 @@

    { @@ -5619,11 +5709,11 @@

    { root_el.classList.add('extension-floorplanner-do-not-pulsate'); },100); @@ -5650,7 +5740,7 @@

    { root_el.classList.add('extension-floorplanner-do-not-pulsate'); },100); @@ -5779,7 +5869,7 @@

    { + floorplan_el.scrollIntoView(true); + },1); //floorplan_el.style.backgroundColor='purple'; //floorplan_name_el.classList.add('extension-floorplanner-floorplan-icon-current'); } @@ -6987,9 +7111,17 @@

    { + + if(current_filename == null){ + localStorage.removeItem('extension-floorplanner-history'); + } + if(typeof floorplans[key].name == 'string'){ + + if(typeof current_filename == 'string' && current_filename != floorplans[key].name){ + //console.log("clearing floorplanner history"); + localStorage.removeItem('extension-floorplanner-history'); + } //var preface = '\r\n'; //var svgBlob = new Blob([preface, details.svg_data], {type:"image/svg+xml;charset=utf-8"}); //var svgUrl = URL.createObjectURL(svgBlob); @@ -7090,14 +7240,14 @@

    { - console.log("in window.addEventListener LOAD"); + //console.log("in window.addEventListener LOAD"); document.getElementById('extension-floorplanner-moveBox').style.transform = "translateX(-215px)"; + /* setTimeout(()=>{ document.getElementById('extension-floorplanner-zoomBox').style.transform = "translateX(-165px)"; },300); + */ setTimeout(()=>{ - document.getElementById('extension-floorplanner-zoomBox2').style.transform = "translateX(-165px)"; + document.getElementById('extension-floorplanner-zoomBox2').style.transform = "translateX(-330px)"; },300); - console.log("window load: currently_editing,current_filename: ", currently_editing,current_filename); + setTimeout(()=>{ + document.getElementById('extension-floorplanner-floorplans-list').style.transform = "translateX(-11rem)"; + },400); + //console.log("window load: currently_editing,current_filename: ", currently_editing,current_filename); if(currently_editing === true){ - console.log("window load: starting floorplanner because was already editing"); + //console.log("window load: starting floorplanner because was already editing"); start_floorplanner(); } else if(Object.keys(floorplans).length == 0){ - console.log("window load: starting floorplanner because there are no floorplans yet"); + //console.log("window load: starting floorplanner because there are no floorplans yet"); start_floorplanner(); } else{ - console.log("what the hack is going on. currently_editing: ", typeof currently_editing, currently_editing); + //console.log("what the hack is going on. currently_editing: ", typeof currently_editing, currently_editing); } });