{"version":3,"file":"justifyBuildingLevels-cea6ecdb.js","sources":["../../../app/frontend/assets/documentation/articles/diagram-interactions/justifyBuildingLevels.js"],"sourcesContent":["export const justifyBuildingLevelVisuals = [\n  {\n    name: \"Demo\",\n    markdown: `![Justify building level GIF](https://assets.towerhunt.com/site/Transparent_dark_lines_T0.png)\n    `,\n  },\n  {\n    name: \"Before & After\",\n    markdown: `{% beforeAfter beforeImageSource=\"https://assets.towerhunt.com/site/documentation/addFeeParcelBefore.png\" afterImageSource=\"https://assets.towerhunt.com/site/documentation/addFeeParcelAfter.png\" /%}\n    `,\n  },\n];\n\nexport const justifyBuildingLevelArchwayVisuals = [\n  {\n    name: \"Demo\",\n    markdown: `![Justify building level archway GIF](https://assets.towerhunt.com/site/Transparent_dark_lines_T0.png)\n    `,\n  },\n  {\n    name: \"Before & After\",\n    markdown: `{% beforeAfter beforeImageSource=\"https://assets.towerhunt.com/site/documentation/addFeeParcelBefore.png\" afterImageSource=\"https://assets.towerhunt.com/site/documentation/addFeeParcelAfter.png\" /%}\n    `,\n  },\n  {\n    name: \"Reference image\",\n    markdown: `![Justify building level archway reference](https://assets.towerhunt.com/site/Transparent_dark_lines_T0.png)\n    `,\n  },\n];\n\nexport const justifyBuildingLevelSplitVisuals = [\n  {\n    name: \"Demo\",\n    markdown: `![Justify building level split GIF](https://assets.towerhunt.com/site/Transparent_dark_lines_T0.png)\n    `,\n  },\n  {\n    name: \"Before & After\",\n    markdown: `{% beforeAfter beforeImageSource=\"https://assets.towerhunt.com/site/documentation/addFeeParcelBefore.png\" afterImageSource=\"https://assets.towerhunt.com/site/documentation/addFeeParcelAfter.png\" /%}\n    `,\n  },\n  {\n    name: \"Reference image\",\n    markdown: `![Justify building level split reference](https://assets.towerhunt.com/site/Transparent_dark_lines_T0.png)\n    `,\n  },\n];\n\nexport const justifyBuildingLevels = {\n  order: 31,\n  name: \"Horizontally align building levels\",\n  keywords: \"floors stories story vertical left center right arch\",\n  subcategory: \"Properties\",\n  markdown: `# Horizontally align building levels\n\n  {% tablessContainer paddingStyles=\"px-5\" %}\n  **Who can use this feature?**\n\n  {% inlineAppIcon iconName=\"user\" /%}{% inlineRouterLink articleId=\"understand-reputation\" sectionName=\"What reputation affects\" %}**Reputable users**{% /inlineRouterLink %}.\n  {% /tablessContainer %}\n\n  In Tower Hunt, a {% inlineRouterLink articleId=\"the-role-of-the-property-diagram\" %}property diagram{% /inlineRouterLink %} can display {% inlineRouterLink articleId=\"add-a-land-covering\" %}buildings{% /inlineRouterLink %} that have {% inlineRouterLink articleId=\"add-building-levels\" %}vertical levels{% /inlineRouterLink %}. Once those levels have {% inlineRouterLink articleId=\"add-a-floor-area\" %}floor areas{% /inlineRouterLink %} and {% inlineRouterLink %}area measures{% /inlineRouterLink %}, floors will display at different widths. When you want a Tower Hunt building to closely resemble an actual building, sometimes it is necessary to display certain levels of the building at a particular horizontal alignment.\n\n  {% callout type=\"caution\" %}\n  **Important:** In order to see the relative width of each building level, **every** floor area must have a {% inlineRouterLink articleId=\"add-floor-area-measures\" %}standardized area{% /inlineRouterLink %}.\n  {% /callout %}\n\n  ## What to expect\n\n  When you set the alignment for a building level, it applies only to the selected level. Higher levels may shift horizontally in order to stay visually connected to the selected level, but each level has its own horizontal alignment. This gives you the freedom to express a wide variety of designs.\n\n  ## Steps\n\n  {% tablessContainer %}\n  1. Visit a {% inlineRouterLink articleId=\"the-role-of-the-property-diagram\" %}property diagram{% /inlineRouterLink %}.\n  2. {% inlineAppIcon iconName=\"cursor\" /%}{% inlineRouterLink articleId=\"select-a-property-diagram-part\" %}**Select**{% /inlineRouterLink %} a {% inlineRouterLink articleId=\"add-building-levels\" %}building level{% /inlineRouterLink %}.\n  3. In the {% inlineRouterLink articleId=\"understand-the-property-diagram-control-panel\" %}control panel{% /inlineRouterLink %}, click {% inlinePropertyDiagramIcon name=\"horizontalAlign\" /%}.\n  4. In the pop-up that appears above the button, select **L** for left, **C** for center, or **R** for right alignment.\n  5. In the pop-up that appears above the button, click **Save**. The building level now aligns to the selected side.\n  {% /tablessContainer %}\n\n  ## Examples\n\n  {% tabbedContainer tabs=$justifyBuildingLevelVisuals /%}\n\n  ### Left\n\n  ![Left justified example screenshot](https://assets.towerhunt.com/site/Transparent_dark_lines_T0.png)\n\n  ### Center\n\n  ![Center justified example screenshot](https://assets.towerhunt.com/site/Transparent_dark_lines_T0.png)\n\n  ### Right\n\n  ![Right justified example screenshot](https://assets.towerhunt.com/site/Transparent_dark_lines_T0.png)\n\n  ### Mixed\n\n  ![Mixed alignment example screenshot](https://assets.towerhunt.com/site/Transparent_dark_lines_T0.png)\n\n  ## Archways and split peaks\n\n  A more advanced situation is when there is open space between two parts of the same (real-life) building level. At the bottom of a building, this can look like an archway. At the top of a building, it can look like individual peaks/penthouses. To approximate these types of designs, you can use horizontal alignment in combination with {% inlineRouterLink articleId=\"group-land-coverings\" %}land covering groupings{% /inlineRouterLink %}. The result is that a single real-life building is split in half horizontally and displayed in the diagram as two grouped buildings.\n\n  {% tablessContainer %}\n  1. Create two {% inlineRouterLink articleId=\"add-a-land-covering\" %}buildings{% /inlineRouterLink %} side-by-side on the same {% inlineRouterLink articleId=\"add-a-fee-parcel\" %}fee parcel{% /inlineRouterLink %}.\n  2. {% inlineRouterLink articleId=\"group-land-coverings\" %}Group the land coverings{% /inlineRouterLink %}.\n  3. When {% inlineRouterLink articleId=\"add-a-floor-area\" %}adding floor areas{% /inlineRouterLink %}, think of the two grouped buildings as one single building. For example, when setting up the first floor you should spread the existing floor areas across the two grouped buildings.\n  4. Where the split should appear, {% inlineRouterLink articleId=\"horizontally-align-building-levels\" sectionName=\"Steps\" %}left-align the lefthand building levels{% /inlineRouterLink %} and {% inlineRouterLink articleId=\"horizontally-align-building-levels\" sectionName=\"Steps\" %}right-align the righthand building levels{% /inlineRouterLink %}.\n  {% /tablessContainer %}\n\n  ### Archway\n\n  {% tabbedContainer tabs=$justifyBuildingLevelArchwayVisuals /%}\n\n  ### Split peaks\n\n  {% tabbedContainer tabs=$justifyBuildingLevelSplitVisuals /%}`,\n};\n"],"names":["justifyBuildingLevelVisuals","justifyBuildingLevelArchwayVisuals","justifyBuildingLevelSplitVisuals","justifyBuildingLevels"],"mappings":"AAAY,MAACA,EAA8B,CACzC,CACE,KAAM,OACN,SAAU;AAAA,KAEX,EACD,CACE,KAAM,iBACN,SAAU;AAAA,KAEX,CACH,EAEaC,EAAqC,CAChD,CACE,KAAM,OACN,SAAU;AAAA,KAEX,EACD,CACE,KAAM,iBACN,SAAU;AAAA,KAEX,EACD,CACE,KAAM,kBACN,SAAU;AAAA,KAEX,CACH,EAEaC,EAAmC,CAC9C,CACE,KAAM,OACN,SAAU;AAAA,KAEX,EACD,CACE,KAAM,iBACN,SAAU;AAAA,KAEX,EACD,CACE,KAAM,kBACN,SAAU;AAAA,KAEX,CACH,EAEaC,EAAwB,CACnC,MAAO,GACP,KAAM,qCACN,SAAU,uDACV,YAAa,aACb,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gEAkEZ"}