<commit_before><template>
  <div id="editor">
    <div class="columns is-gapless">
      <div class="column is-2 func-div">
        <div class="has-text-centered has-text-white func-button" @click="save()">
          <span class="icon is-small"><i class="fa fa-floppy-o"></i></span>
          <span class="func-button-text">保存</span>
        </div>
        <div class="line"></div>
        <div class="has-text-centered has-text-white func-button">
          <span class="icon is-small"><i class="fa fa-search"></i></span>
          <span class="func-button-text">预览</span>
        </div>
        <div class="line"></div>
        <div style="height: 100px"></div>
        <div class="line"></div>
        <div class="has-text-centered has-text-white func-button"
             :class="{'func-selected' : module == 0}" @click="changeModule(0)">
          <span class="icon is-small"><i class="fa fa-window-restore"></i></span>
          <span class="func-button-text">场景</span>
        </div>
        <div class="line"></div>
        <div class="has-text-centered has-text-white func-button"
             :class="{'func-selected' : module == 1}" @click="changeModule(1)">
          <span class="icon is-small"><i class="fa fa-eye"></i></span>
          <span class="func-button-text">视角</span>
        </div>
        <div class="line"></div>
        <div class="has-text-centered has-text-white func-button"
             :class="{'func-selected' : module == 2}" @click="changeModule(2)">
          <span class="icon is-small"><i class="fa fa-dot-circle-o"></i></span>
          <span class="func-button-text">热点</span>
        </div>
        <div class="line"></div>
      </div>
      <div class="column is-10">
        <div class="scene-module has-text-white" v-show="module == 0">
          <h5 class="title is-5 has-text-white scene-title">场景列表</h5>
          <div class="line"></div>
          <div class="scene-item" v-for="scene in sceneList" @click="changeScene(scene)"
               :class="{'scene-item-selected' : scene.index == currentSceneIndex}">
            <div class="scene-name">{{scene.name}}</div>
            <figure class="image is-128x128">
              <img src="../static/panos/1.tiles/thumb.jpg">
            </figure>
            <div class="pencil" @click="">
              <a class="button is-primary is-inverted is-outlined"><span class="icon"><i
                class="fa fa-pencil"></i></span></a>
            </div>
            <div class="home" @click="setWelcome(scene.index)">
              <a class="button is-primary is-inverted is-outlined"
                 :class="{'home-selected': scene.index == welcomeSceneIndex}">
                <span class="icon"><i class="fa fa-home"></i></span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="camera" v-show="module == 1">
      <div class="camera-top"></div>
      <div class="camera-bottom"></div>
      <div class="camera-left"></div>
      <div class="camera-right"></div>
      <div class="camera-left-top"></div>
      <div class="camera-top-left"></div>
      <div class="camera-top-right"></div>
      <div class="camera-right-top"></div>
      <div class="camera-left-bottom"></div>
      <div class="camera-bottom-left"></div>
      <div class="camera-bottom-right"></div>
      <div class="camera-right-bottom"></div>
      <a class="button is-info camera-button">设为初始视角</a>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'editor',
    components: {},
    data() {
      return {
        //krpano对象
        krpano: document.getElementById("krpanoSWFObject"),
        //当前修改模块：0场景；1视角；2热点
        module: 0,
        //场景列表
        sceneList: [],
        //当前场景序号
        currentSceneIndex: 0,
        //欢迎页场景序号
        welcomeSceneIndex: 0
      }
    },
    methods: {
      //入口js文件已将此函数定义到window，krpano加载完成后调用
      onready() {
        //隐藏下方自带控制条
        this.krpano.set("layer[skin_control_bar].visible", false);
        this.krpano.set("layer[skin_splitter_bottom].visible", false);
        this.krpano.set("layer[skin_scroll_window].visible", false);
        //初始化场景
        this.sceneList = this.krpano.get("scene").getArray()
        this.currentSceneIndex = this.krpano.get("scene").getItem(this.krpano.get("xml.scene")).index
        this.welcomeSceneIndex = this.krpano.get("scene").getItem(this.krpano.get('startscene')).index
      },
      changeModule(module) {
        this.module = module
      },
      changeScene(scene) {
        if(this.currentSceneIndex == scene.index) return
        this.currentSceneIndex = scene.index
        this.krpano.call("loadscene(" + scene.name + ")");
      },
      setWelcome(index) {
        this.welcomeSceneIndex = index
      },
      save() {
        let data = []
        this.sceneList.forEach((scene)=>{
          data.push({
            index: scene.index,
            name: scene.name,
            welcomeFlag: scene.index == this.welcomeSceneIndex
          })
        })
        console.log(data)
      }
    }
  }
</script>

<style lang="scss" scoped>

  #editor {
    width: 100%;
  }

  .line {
    width: 100%;
    height: 0;
    border-top: solid black 1px;
    border-bottom: solid 1px #4b4b4b;
  }

  .func-div {
    border-right: solid 1px black;

    .func-button {
      cursor: pointer;
      height: 50px;
      .func-button-text {
        font-size: 5px;
      }
      span {
        width: 100%;
      }
    }

    .func-selected {
      background-color: #427afb;
    }
  }

  .camera {
    .camera-button {
      position: absolute;
      left: 42%;
      top: 30%;
      transform: translate(-61px, 0);
    }

    .camera-top {
      position: absolute;
      width: 32%;
      height: 0;
      border-top: white 1px dotted;
      top: 25%;
      left: 26%;
    }

    .camera-bottom {
      position: absolute;
      width: 32%;
      height: 0;
      border-top: white 1px dotted;
      top: 75%;
      left: 26%;
    }

    .camera-left {
      position: absolute;
      width: 0;
      height: 40%;
      border-left: white 1px dotted;
      top: 30%;
      left: 22%;
    }

    .camera-right {
      position: absolute;
      width: 0;
      height: 40%;
      border-right: white 1px dotted;
      top: 30%;
      right: 38%;
    }

    .camera-left-top {
      position: absolute;
      width: 0;
      height: 5%;
      border: white 2px solid;
      top: 25%;
      left: 22%;
    }

    .camera-top-left {
      position: absolute;
      width: 4%;
      height: 0;
      border: white 2px solid;
      top: 25%;
      left: 22%;
    }

    .camera-top-right {
      position: absolute;
      width: 4%;
      height: 0;
      border: white 2px solid;
      top: 25%;
      right: 38%;
    }

    .camera-right-top {
      position: absolute;
      width: 0;
      height: 5%;
      border: white 2px solid;
      top: 25%;
      right: 38%;
    }

    .camera-left-bottom {
      position: absolute;
      width: 0;
      height: 5%;
      border: white 2px solid;
      bottom: 25%;
      left: 22%;
    }

    .camera-bottom-left {
      position: absolute;
      width: 4%;
      height: 0;
      border: white 2px solid;
      bottom: 25%;
      left: 22%;
    }

    .camera-bottom-right {
      position: absolute;
      width: 4%;
      height: 0;
      border: white 2px solid;
      bottom: 25%;
      right: 38%;
    }

    .camera-right-bottom {
      position: absolute;
      width: 0;
      height: 5%;
      border: white 2px solid;
      bottom: 25%;
      right: 38%;
    }
  }

  .scene-module {
    .scene-title {
      line-height: 50px;
      padding-left: 10px;
      margin: 0;
    }

    .scene-item {
      margin: 10px 0 10px 10px;
      height: 168px;
      width: 168px;
      border: 2px #333333 solid;
      cursor: pointer;

      .scene-name {
        line-height: 36px;
        height: 36px;
        width: 164px;
        padding-left: 5px;
      }

      a {
        height: 64px;
        width: 36px;
        background-color: rgb(70, 70, 70) !important;
        border-radius: 0;
        border: 0;
        &:hover {
          background-color: #427afb !important;
          color: white !important;
        }
      }

      .pencil {
        position: relative;
        left: 128px;
        bottom: 128px;
        height: 64px;
        width: 36px;
      }

      .home {
        position: relative;
        left: 128px;
        bottom: 128px;
        height: 64px;
        width: 36px;

        .home-selected {
          background-color: #427afb !important;
        }
      }

      &:hover {
        border-color: #fbd14b;
      }
    }

    .scene-item-selected {
      border-color: #fbd14b;
    }
  }

</style>
<commit_msg>编辑页开发<commit_after><template>
  <div id="editor">
    <div class="columns is-gapless">
      <div class="column is-2 func-div">
        <div class="has-text-centered has-text-white func-button" @click="save()">
          <span class="icon is-small"><i class="fa fa-floppy-o"></i></span>
          <span class="func-button-text">保存</span>
          <div v-show="toSaveFlag" class="to-save"></div>
        </div>
        <div class="line"></div>
        <div class="has-text-centered has-text-white func-button" @click="preview()">
          <span class="icon is-small"><i class="fa fa-search"></i></span>
          <span class="func-button-text">预览</span>
        </div>
        <div class="line"></div>
        <div style="height: 100px"></div>
        <div class="line"></div>
        <div class="has-text-centered has-text-white func-button"
             :class="{'func-selected' : module == 0}" @click="changeModule(0)">
          <span class="icon is-small"><i class="fa fa-window-restore"></i></span>
          <span class="func-button-text">场景</span>
        </div>
        <div class="line"></div>
        <div class="has-text-centered has-text-white func-button"
             :class="{'func-selected' : module == 1}" @click="changeModule(1)">
          <span class="icon is-small"><i class="fa fa-eye"></i></span>
          <span class="func-button-text">视角</span>
        </div>
        <div class="line"></div>
        <div class="has-text-centered has-text-white func-button"
             :class="{'func-selected' : module == 2}" @click="changeModule(2)">
          <span class="icon is-small"><i class="fa fa-dot-circle-o"></i></span>
          <span class="func-button-text">热点</span>
        </div>
        <div class="line"></div>
      </div>
      <div class="column is-10">
        <div class="scene-module has-text-white" v-show="module == 0">
          <h5 class="title is-5 has-text-white scene-title">场景列表</h5>
          <div class="line"></div>
          <div class="scene-item" v-for="scene in sceneList" @click="changeScene(scene)"
               :class="{'scene-item-selected' : scene.index == currentSceneIndex}">
            <div class="scene-name">{{scene.name}}</div>
            <figure class="image is-128x128">
              <img src="../static/panos/1.tiles/thumb.jpg">
            </figure>
            <div class="pencil" @click="">
              <a class="button is-primary is-inverted is-outlined"><span class="icon"><i
                class="fa fa-pencil"></i></span></a>
            </div>
            <div class="home" @click="setWelcome(scene.index)">
              <a class="button is-primary is-inverted is-outlined"
                 :class="{'home-selected': scene.index == welcomeSceneIndex}">
                <span class="icon"><i class="fa fa-home"></i></span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="camera" v-show="module == 1">
      <div class="camera-top"></div>
      <div class="camera-bottom"></div>
      <div class="camera-left"></div>
      <div class="camera-right"></div>
      <div class="camera-left-top"></div>
      <div class="camera-top-left"></div>
      <div class="camera-top-right"></div>
      <div class="camera-right-top"></div>
      <div class="camera-left-bottom"></div>
      <div class="camera-bottom-left"></div>
      <div class="camera-bottom-right"></div>
      <div class="camera-right-bottom"></div>
      <a class="button is-info camera-button">设为初始视角</a>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'editor',
    components: {},
    data() {
      return {
        //krpano对象
        krpano: document.getElementById("krpanoSWFObject"),
        //当前修改模块：0场景；1视角；2热点
        module: 0,
        //待保存标识
        toSaveFlag: false,
        //场景列表
        sceneList: [],
        //当前场景序号
        currentSceneIndex: 0,
        //欢迎页场景序号
        welcomeSceneIndex: 0
      }
    },
    methods: {
      //入口js文件已将此函数定义到window，krpano加载完成后调用
      onready() {
        //隐藏下方自带控制条
        this.krpano.set("layer[skin_control_bar].visible", false);
        this.krpano.set("layer[skin_splitter_bottom].visible", false);
        this.krpano.set("layer[skin_scroll_window].visible", false);
        //初始化场景
        this.sceneList = this.krpano.get("scene").getArray()
        this.currentSceneIndex = this.krpano.get("scene").getItem(this.krpano.get("xml.scene")).index
        this.welcomeSceneIndex = this.krpano.get("scene").getItem(this.krpano.get('startscene')).index
      },
      changeModule(module) {
        this.module = module
      },
      changeScene(scene) {
        if (this.currentSceneIndex == scene.index) return
        this.currentSceneIndex = scene.index
        this.krpano.call("loadscene(" + scene.name + ")");
      },
      setWelcome(index) {
        this.welcomeSceneIndex = index
        this.toSaveFlag = true
      },
      save() {
        let data = []
        this.sceneList.forEach((scene) => {
          data.push({
            index: scene.index,
            name: scene.name,
            welcomeFlag: scene.index == this.welcomeSceneIndex
          })
        })
        console.log(data)
        this.toSaveFlag = false
      },
      preview() {
        window.open('../static/tour.html')
      }
    }
  }
</script>

<style lang="scss" scoped>

  #editor {
    width: 100%;
  }

  .to-save {
    position: relative;
    top: -45px;
    left: 28px;
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 3px;
  }

  .line {
    width: 100%;
    height: 0;
    border-top: solid black 1px;
    border-bottom: solid 1px #4b4b4b;
  }

  .func-div {
    border-right: solid 1px black;

    .func-button {
      cursor: pointer;
      height: 50px;
      .func-button-text {
        font-size: 5px;
      }
      span {
        width: 100%;
      }
    }

    .func-selected {
      background-color: #427afb;
    }
  }

  .camera {
    .camera-button {
      position: absolute;
      left: 42%;
      top: 30%;
      transform: translate(-61px, 0);
    }

    .camera-top {
      position: absolute;
      width: 32%;
      height: 0;
      border-top: white 1px dotted;
      top: 25%;
      left: 26%;
    }

    .camera-bottom {
      position: absolute;
      width: 32%;
      height: 0;
      border-top: white 1px dotted;
      top: 75%;
      left: 26%;
    }

    .camera-left {
      position: absolute;
      width: 0;
      height: 40%;
      border-left: white 1px dotted;
      top: 30%;
      left: 22%;
    }

    .camera-right {
      position: absolute;
      width: 0;
      height: 40%;
      border-right: white 1px dotted;
      top: 30%;
      right: 38%;
    }

    .camera-left-top {
      position: absolute;
      width: 0;
      height: 5%;
      border: white 2px solid;
      top: 25%;
      left: 22%;
    }

    .camera-top-left {
      position: absolute;
      width: 4%;
      height: 0;
      border: white 2px solid;
      top: 25%;
      left: 22%;
    }

    .camera-top-right {
      position: absolute;
      width: 4%;
      height: 0;
      border: white 2px solid;
      top: 25%;
      right: 38%;
    }

    .camera-right-top {
      position: absolute;
      width: 0;
      height: 5%;
      border: white 2px solid;
      top: 25%;
      right: 38%;
    }

    .camera-left-bottom {
      position: absolute;
      width: 0;
      height: 5%;
      border: white 2px solid;
      bottom: 25%;
      left: 22%;
    }

    .camera-bottom-left {
      position: absolute;
      width: 4%;
      height: 0;
      border: white 2px solid;
      bottom: 25%;
      left: 22%;
    }

    .camera-bottom-right {
      position: absolute;
      width: 4%;
      height: 0;
      border: white 2px solid;
      bottom: 25%;
      right: 38%;
    }

    .camera-right-bottom {
      position: absolute;
      width: 0;
      height: 5%;
      border: white 2px solid;
      bottom: 25%;
      right: 38%;
    }
  }

  .scene-module {
    .scene-title {
      line-height: 50px;
      padding-left: 10px;
      margin: 0;
    }

    .scene-item {
      margin: 10px 0 10px 10px;
      height: 168px;
      width: 168px;
      border: 2px #333333 solid;
      cursor: pointer;

      .scene-name {
        line-height: 36px;
        height: 36px;
        width: 164px;
        padding-left: 5px;
      }

      a {
        height: 64px;
        width: 36px;
        background-color: rgb(70, 70, 70) !important;
        border-radius: 0;
        border: 0;
        &:hover {
          background-color: #427afb !important;
          color: white !important;
        }
      }

      .pencil {
        position: relative;
        left: 128px;
        bottom: 128px;
        height: 64px;
        width: 36px;
      }

      .home {
        position: relative;
        left: 128px;
        bottom: 128px;
        height: 64px;
        width: 36px;

        .home-selected {
          background-color: #427afb !important;
        }
      }

      &:hover {
        border-color: #fbd14b;
      }
    }

    .scene-item-selected {
      border-color: #fbd14b;
    }
  }

</style>

{'fraction_non_alphanumeric': 0.15902738960313023, 'fraction_numerical': 0.025209614309670208, 'mean_word_length': 1.8046715786173382, 'pattern_counts': {'":': 0, '<': 255, '<?xml version=': 0, '>': 257, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5150655', 'n_tokens_mistral': 6314, 'n_tokens_neox': 5904, 'n_words': 1193}