Merge pull request #7 from SF3741/EJ2-65096-floorplannerVue

EJ2-65096-floorplanner vue
syncfusion · Feb 10, 2023 · 7b568f3 · 7b568f3
2 parents d7ed7ae + 02f8fbb
commit 7b568f3
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,18 @@
 # ej2-vue-floor-planner
 A floor plan is a type of drawing that shows you the layout of a home or property from above. The floor plan may depict an entire building, one floor of a building, or a single room. It may also include measurements, furniture, appliances, or anything else necessary to the purpose of the plan.
+
+## Prerequisite 
+
+Install Node version - 14.15.1 from https://nodejs.org/en/download/ 
+
+## To Install all packages
+
+Use the below command to install all dependent packages.
+
+```
+npm install
+```
+
+## To Run the application
+
+Run `npm run serve` for a dev server. Navigate to `http://localhost:8080/`. The application will automatically reload if you change any of the source files.
diff --git a/public/assets/dbstyle/diagrambuilder.css b/public/assets/dbstyle/diagrambuilder.css
@@ -649,7 +649,7 @@ input, button, select, textarea {
 
 .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
 .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn {
-    height: 30px;
+    height: 35px;
     margin: -2px 0px 6px 0px;
     /* background: #ffffff;*/
     background: transparent;

diff --git a/public/index.html b/public/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 
 <head>
+    <title> Essential JS2 for Vue - Floor Planner</title>
     <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/fluent.css" rel="stylesheet">

diff --git a/src/App.vue b/src/App.vue
@@ -11,8 +11,7 @@
         <div class="db-diagram-name-container">
           <span
             id="diagramName"
-            style="
-              width: 250px;
+            style=" width: 250px;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
@@ -86,12 +85,15 @@
               cssClass="db-dropdown-menu"
               :items="dropDownDataSources.viewMenuItems"
                v-on:select="menuClick($event)"
-
+               :beforeOpen="arrangeMenuBeforeOpen"
+              :beforeClose="arrangeMenuBeforeClose"
+              :beforeItemRender="beforeItemRender"
 
               >View
             </ejs-dropdownbutton>
           </div>
         </div>
+      </div>
          <div class='db-toolbar-editor' >
           <div class='db-toolbar-container ' >
             <ejs-toolbar id="toolbarEditor"  overflowMode="Scrollable" v-on:clicked="toolbarEditorClick($event)">
@@ -183,15 +185,14 @@
             </ejs-toolbar>
           </div>
       </div>
-      </div>
     </div>
     <div class="row content">
       <div class="sidebar show-overview">
         <div class="db-palette-parent">
           <ejs-symbolpalette id="symbolpalette" ref="paletteObj" width="100%" height="100%" 
            :palettes='palettes.palettes' 
            :getSymbolInfo='palettes.getSymbolInfo' :symbolMargin='palettes.symbolMargin'
-           :symbolPreview ='palettes.symbolPreview'
+
            :getNodeDefaults='palettes.setPaletteNodeDefaults'
            :enableSearch='palettes.enableSearch'>
           </ejs-symbolpalette>
@@ -205,7 +206,7 @@
               ref="diagram"
               :width="width"
               :height="height"
-              :snapSettings="snapSettings"
+
               :pageSettings="pageSettings"
               :scrollSettings="scrollSettings"
               :rulerSettings="rulerSettings"
@@ -887,6 +888,7 @@
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+
 import {
   Diagram,
   DiagramPlugin,
@@ -1136,11 +1138,7 @@ export default class User extends Vue {
   public paletteheight = "100%";
   public symbolWidth = "50";
   public symbolHeight = "50";
-  public snapSettings: SnapSettingsModel = {
-    horizontalGridlines: gridlines,
-    verticalGridlines: gridlines,
-    constraints: SnapConstraints.All & ~SnapConstraints.SnapToLines,
-  };
+  
   public rulerSettings: RulerSettingsModel={
         showRulers: true
     }
@@ -2912,7 +2910,7 @@ private buttonInstance: any;
             args.item.iconCss = args.item.iconCss ? '' : 'sf-icon-check-tick';
             break;
     case 'fittoscreen':
-            this.diagram.fitToPage({ mode: 'Page', region: 'Content' });
+            this.diagram.fitToPage({ mode: 'Page', region: 'Content', margin: { left: 0, top: 0, right: 0, bottom: 0 }, });
             // args.item.iconCss = args.item.iconCss ? '' : 'sf-icon-check-tick';
             break;
     case 'fittowidth':

diff --git a/src/app/scripts/dropdowndatasource.ts b/src/app/scripts/dropdowndatasource.ts
@@ -70,7 +70,6 @@ export class DropDownDataSources {
   public fileFormats: { [key: string]: any }[] = [
     { text: "JPG", value: "JPG" },
     { text: "PNG", value: "PNG" },
-    { text: "BMP", value: "BMP" },
     { text: "SVG", value: "SVG" },
   ];
   public diagramRegions: { [key: string]: any }[] = [

diff --git a/src/app/scripts/events.ts b/src/app/scripts/events.ts
@@ -56,7 +56,7 @@ export class DiagramClientSideEvents {
                 } else if (selectedItems.length === 1) {
                     this.singleSelectionSettings(selectedItems[0]);
                     for(var i=7;i<=28;i++){
-                        if(i<=17)
+                        if(i<=16)
                         {
                             (toolbarEditor as any).items[i].visible = false;
                         }
@@ -449,9 +449,17 @@ export class DiagramPropertyBinding {
     }
 
     public pageBreaksChange(args: CheckBoxChangeEventArgs): void {
+        let items = ((document.getElementById("btnViewMenu") as any).ej2_instances[0]).items;
         if (args.event) {
             (this.selectedItem as any).pageSettings.pageBreaks = args.checked;
             this.selectedItem.diagram.pageSettings.showPageBreaks = args.checked;
+            if(args.checked === true){
+                items[5].iconCss = 'sf-icon-check-tick';
+            }
+            else
+            {
+            items[5].iconCss = '';    
+            }
         }
     }
 
@@ -464,7 +472,7 @@ export class DiagramPropertyBinding {
     var pageWidth = paperSize.pageWidth;
     var pageHeight = paperSize.pageHeight;
     if (pageWidth && pageHeight) {
-        if (diagram.pageSettings.orientation = 'Portrait') {
+        if (diagram.pageSettings.orientation === 'Portrait') {
             if (pageWidth > pageHeight) {
                 var temp = pageWidth;
                 pageWidth = pageHeight;
@@ -480,7 +488,8 @@ export class DiagramPropertyBinding {
         }
         diagram.pageSettings.width = pageWidth;
         diagram.pageSettings.height = pageHeight;
-
+        this.selectedItem.pageSettings.pageWidth = pageWidth;
+        this.selectedItem.pageSettings.pageHeight = pageHeight;
       }
     else{
       (document.getElementById('pageOrientation') as any).style.display = 'none';

diff --git a/src/app/scripts/selector.ts b/src/app/scripts/selector.ts
@@ -538,7 +538,7 @@ export class PrintSettings {
     this.m_isLandscape = isLandscape;
   }
 
-  private m_multiplePage = false;
+  private m_multiplePage = true;
   public get multiplePage(): boolean {
     return this.m_multiplePage;
   }