//编辑界面 var EditingInterface = function (n) { this.n = n; //功能按钮 this.mainBtn = $(".edit-hot-active"), //创建编辑热点的功能 this.editHot = new EditHot(), //创建二级编辑的界面 // this.editFun = new EditFun(); //初始化所有基本元素和功能 this.initiate(); loadInfoAttrites() } //初始化界面 EditingInterface.prototype.initiate = function () { $(".edit-wrap").fadeIn(); this.editHot.init(this.n); this.onClick(); // this.editFun.init(); } EditingInterface.prototype.onClick = function () { var that = this; this.mainBtn.on("mousedown touchstart", function () { g_HotStatus = g_HotStatus == "add" ? null : "add"; switch (g_HotStatus) { case "add": $("#player").css("cursor", "cell"); break } }) } //一级编辑界面,编辑热点的功能 var EditHot = function () { this.ele = $(".edit-hot-num"), this.dataL = null, //获取最新创建热点的索引 this.children = null; //创建的热点信息 } EditHot.prototype.creatDom = function (index) { return "
  • " + "
    " + "热点" + "
    删除
    " + "
    " + "
    " + "
    " + "
    " + "

    position:

    " + "

    x:

    " + "

    y:

    " + "

    z:

    " + "

    rotation:

    " + "

    x:

    " + "

    y:

    " + "

    z:

    " + "
    " + "
    " + '
    编辑热点
    ' + "
    " + "
    " + "
    " + "
  • " } //打开页面初始化编辑界面 EditHot.prototype.init = function (n) { for (var i = 0; i < g_HotMeshes.length; i++) { this.ele.append(this.addHotList(g_HotMeshes, i)); this.fillText(i); this.hotAn(i); if (n) this.remHot(n, i), this.clickEdithotBtn(i); } document.querySelector(".edit-wrap").addEventListener("mousewheel", function (event) { event.stopPropagation() }); } EditHot.prototype.fillText = function (index) { var target = this.ele.children("#ggg_s" + index); target.find(".edit-hotTitle-i").text(index + 1); target.find(".edit-remHot").attr({ "data-id": g_HotMeshes[index].id, "data-name": g_HotMeshes[index].name }); target.find(".edit-hot-data-p-x").text(g_HotMeshes[index].position.x); target.find(".edit-hot-data-p-y").text(g_HotMeshes[index].position.y); target.find(".edit-hot-data-p-z").text(g_HotMeshes[index].position.z); target.find(".edit-hot-data-r-x").text(g_HotMeshes[index].rotation.x); target.find(".edit-hot-data-r-y").text(g_HotMeshes[index].rotation.y); target.find(".edit-hot-data-r-z").text(g_HotMeshes[index].rotation.z); if (target[0]) { target[0].hotAttribute = g_HotMeshes[index] target.attr('data-spid', g_HotMeshes[index].belongHot.sid) } } EditHot.prototype.hotAn = function (index) { let $li = $(".edit-hot-num > #ggg_s" + index) $li.find('.edit-hotTitle').on("click", function () { var next = $(this).next(); if (next.height() == 0) { next.css("height", "155px"); } else { next.css("height", "0"); } }) $li.find('.edit-remHot').on("click", function (ev) { ev.stopPropagation() $li.remove() }) } EditHot.prototype.addHotList = function (data, index) { if (!data) return; this.dataL = data.length - 1; this.ele.append(this.creatDom(index)); this.fillText(this.dataL); } //删除热点 EditHot.prototype.remHot = function (index, thisScene) { var deleteHot = $(".edit-remHot").eq(index), hotId, hotName; deleteHot.on("click", function () { hotId = $(this).attr("data-id"); hotName = $(this).attr("data-name"); for (var i = 0; i < g_HotMeshes.length; i++) { if (g_HotMeshes[i].id == hotId) { //在场景中删除这个热点模型 thisScene.sceneRenderer.scene.remove(g_HotMeshes[i]); g_HotMeshes[i].visible = false; //如果热点数据中有这个热点数据就删除 // if(g_newHot && g_newHot.hasOwnProperty(hotName)){ // delete g_newHot[hotName]; // } g_HotMeshes.splice(i, 1); console.log("删除成功:" + hotId); $(this).closest("li").remove(); } } }) } //点击编辑热点弹出二级编辑框 EditHot.prototype.clickEdithotBtn = function (index) { $("#ggg_s" + index + " .edit-hot-editor").on("click", function () { showHotEdit(index) }) } //二级编辑界面,主要编辑功能,热点功能 var EditFun = function () { } EditFun.prototype.init = function () { this.addFun("addImg", "添加图片", this.addImg); this.addFun("addText", "添加文字", this.addText); this.addFun("addVideo", "添加视频", this.addVideo); this.saveBtn(); } //添加功能 EditFun.prototype.addFun = function (className, text, fn) { var creatDom = '
  • ' + text + '
  • '; $(".edit-function-console").append(creatDom); fn(className); } //保存按钮 EditFun.prototype.saveBtn = function () { $(".edit-function-save").on("click", function () { $(".edit-function-wrap").hide(); }) } //添加图片 EditFun.prototype.addImg = function (className) { var files = ["js/webuploader.html5only.min.js" + manage.time, "js/diyUpload.js" + manage.time, "css/diyUpload.css" + manage.time], imgText = '
    '; $(".edit-function-" + className).attr("id", "box").append(imgText).children('div').eq(0).hide(); manage.LoadJs(files, function () { $('#test').diyUpload({ url: '', success: function (data) { console.info(data); }, error: function (err) { console.info(err); }, buttonText: '添加图片' }); }); } //添加文字 EditFun.prototype.addText = function (className) { var textBtn = $(".edit-function-" + className), richText = '
    \ Size:\ \ Color:\ \ B\ \ U\ \
    \
    '; textBtn.append(richText); textBtn.children("div").eq(0).on("click", function () { var richTextAn = $(this).next(); if (richTextAn.height() == 0) { richTextAn.height("350px"); } else { richTextAn.height("0"); } }) $(".edit-F-text").on("keydown", function (event) { event.stopPropagation() }); function addEvent(id, obj) { $('.richText').find(id).on("change", function () { $('.edit-F-text').focus(); switch (obj[0]) { case "FontSize": obj[2] = parseInt($('#size').val()); break; case "ForeColor": obj[2] = $('#color').val(); break; } document.execCommand(obj[0], obj[1], obj[2]); }); } addEvent("#size", ["FontSize", false]); addEvent("#color", ["ForeColor", false]); addEvent("#bold", ["Bold"]); addEvent("#underline", ["Underline"]); } //添加视频 EditFun.prototype.addVideo = function (className) { console.log(className); } //点击屏幕判断当前处于什么编辑状态,因为需要获取场景的n对象和r对象,所有把这些方法放在main.js里点击屏幕事件里执行 var DownInterface = function () { this.editHot = new EditHot(); } DownInterface.prototype.state = function (that, Hot) { switch (g_HotStatus) { case "add": this.addHot(that, Hot, function (thisScene) { this.editHot.addHotList(g_HotMeshes, g_HotMeshes.length - 1); this.editHot.hotAn(this.editHot.dataL); this.editHot.remHot(this.editHot.dataL, thisScene); this.editHot.clickEdithotBtn(this.editHot.dataL); }); break; case "delete": break; } } //添加热点模型 DownInterface.prototype.addHot = function (that, Hot, fn) { var position = that.reticule.position.toArray(); var rotation = that.reticule.rotation.toArray().slice(0, 3); var sid = g_HotMeshes.length > 0 ? "sprite_" + (parseInt(g_HotMeshes[g_HotMeshes.length - 1].name.substring(7)) + 1) : "sprite_" + g_HotMeshes.length; var hot = new Hot(sid, { position: position, rotation: rotation, size: 1.05 }, that.model); //g_newHot.push(hot); that.model.hots[sid] = hot; //$('#addHot textarea')[0].value+=('添加热点:\r"'+sid + '":{ "position":['+position+'], "rotation":['+rotation+']},\r'); //logData('添加热点:\r"'+sid + '":{ "position":['+position+'], "rotation":['+rotation+']},\r') g_HotStatus = false; that.mouseCouldBeClickToMove = false; $("#player").css("cursor", ""); //添加完热点之后的回调函数 if (g_HotMeshes && g_newHot.length === g_newHot.length++) { var thisScene = that; fn && fn.call(this, thisScene); } } // 加载所有热点的信息 function loadInfoAttrites() { $.ajax(g_Prefix + "data/" + window.number + "/hot/js/data.js" + "?" + Date.now(), { dataType: "json" }) .then(function (infos) { Object.keys(infos).forEach(function (key) { $('.edit-hot-num > li[data-spid="' + key + '"]')[0] && ($('.edit-hot-num > li[data-spid="' + key + '"]')[0].infoAttribute = infos[key]) }) }) } (function () { // 热点tab切换 var $heads = $('.edit-function-header a') var $body = $('.edit-function-body > div') $heads.on('click', function () { $body.hide().removeClass('active'); $heads.removeClass('active') $(this).addClass('active') $('.edit-function-body > div[data-label="' + $(this).attr('data-tab') + '"]') .show() .addClass('active') }) $heads.eq(0).trigger('click') // 输入框阻止事件 $('#edit-title,#edit-content,.func-edit-items,#info-name,#info-summary,#share-summary').on('keydown', function (ev) { ev.stopPropagation(); }) // 模型与网页加载 $('.insert-bottom').on('click', function () { $(this).prev().append('') }) })(); (function () { // 视频预览控制 var $videoLayout = $('.fun-view-video') $videoLayout.find('span').on('click', function () { $videoLayout.hide(); $videoLayout.find('video').attr('src', '')[0].pause() }) // 图片加载回调 function imageSuccess(file) { if (!/image\/\w+/.test(file.type)) { alert("文件必须为图片!"); return false; } var img = new Image() img.src = URL.createObjectURL(file); return img } // 视频加载回调 function videoSuccess(file, $elayout) { if (!/video\/\w+/.test(file.type)) { alert("视频必须为map4格式!"); return false; } $elayout.append('上传封面') return '' } // 视频封面回调 function thumSuccess(file, $elayout) { if (!/image\/\w+/.test(file.type)) { alert("文件必须为图片!"); return false; } $elayout.parent().find('img').attr('src', URL.createObjectURL(file)) } // 图片与视频加载 function fileHandle() { var $seft = $(this) var $layout = $seft.parent() var $elayout = $layout.parent() var $pplayout = $elayout.parent() var type = $pplayout.attr('type') var $close = $(document.createElement('span')) var file = file = this.files[0]; var fnc = type === 'image' ? imageSuccess : type === 'video' ? videoSuccess : thumSuccess var $dom = fnc(file, $elayout) if (type === 'image' || type === 'video') { if (!$dom) return $seft.val('') $layout.append($close) $layout.addClass('result') var $addLayout = $(document.createElement('a')) var $addInput = $('') $addLayout.append($addInput) var $din = $(document.createElement('div')); $din.append($addLayout) $elayout.parent().append($din) $layout.append($dom) } } // 图片与视频加载 $('.edit-fun-images').on('change', function (ev) { if (ev.target.tagName.toUpperCase() === 'INPUT') { fileHandle.call(ev.target) } }) $('.edit-fun-images').on('click', function (ev) { var $tag = $(ev.target) var tagName = ev.target.tagName.toUpperCase() if (tagName === 'SPAN') { var $resf = $(ev.target) $resf.parent().parent().remove() } else if (tagName === 'IMG' && $tag.hasClass('play-video')) { $videoLayout .css('display', 'flex') .find('video') .attr('src', $tag.attr('videoURL'))[0] .play() } }) })(); function showHotEdit(index) { var $layout = $(".edit-function-wrap") $layout.css("display", "flex") $layout[0].targetDOM = $(".edit-hot-num > li").eq(index)[0]; var info = $layout[0].targetDOM.infoAttribute || {} info.title = info.title || '' info.content = info.content || '' info.iframe = info.iframe || [] info.model = info.model || [] info.images = info.images || [] info.video = info.video || [] var iframesHTML = info.iframe.map(function (iframe) { return '' }) var modulesHTML = info.model.map(function (module) { return '' }) var imagesHTML = info.images.map(function (image) { return '
    ' }) var videosHTML = info.video.map(function (ly) { return '
    上传封面
    ' }) imagesHTML.push('
    ') videosHTML.push('
    ') $('#edit-iframes').html(iframesHTML.join('')) $('#edit-modules').html(modulesHTML.join('')) $('.edit-fun-images[type="image"]').html(imagesHTML.join('')) $('.edit-fun-images[type="video"]').html(videosHTML.join('')) $('#edit-title').val(info.title) $('#edit-content').val(info.content) if (info.backgroundMusic) { $('#edit-miusc input').attr('src', info.backgroundMusic) $('#edit-miusc a').show().attr('href', '//'+info.backgroundMusic) } else { $('#edit-miusc a').hide() } } // 保存热点信息 (function () { var $layout = $(".edit-function-wrap") $('#edit-submit').on('click', function () { $layout.addClass('loadding') var args = {} var $title = $('#edit-title') var $content = $('#edit-content') var $images = $('.edit-fun-images[type="image"] a.result') var $videos = $('.edit-fun-images[type="video"] a.result') var $thums = $('.edit-fun-images[type="video"] .upload-thum') var $iframes = $('#edit-iframes input') var $modules = $('#edit-modules input') new Promise(function (resolve, reject) { upload($images, 'images', resolve) }).then(function (imgUrls) { args.images = imgUrls return new Promise(function (resolve, reject) { upload($videos, 'images', resolve) }) }).then(function (videoUrls) { args.video = videoUrls return new Promise(function (resolve, reject) { upload($thums, 'images', resolve) }) }).then(function (thums) { args.video = args.video.map(function (video, index) { return { url: video, img: thums[index] } }) }).then(function () { var $miusc = $('#edit-miusc input') console.log($miusc) if ($miusc[0].files.length > 0) { return new Promise(function (resolve) { upload($('#edit-miusc'), 'miusc', function(res) { resolve(res[0]) }) }) } else { return $miusc.attr('src') } }).then(function (src) { args.backgroundMusic = src }) .then(function () { args.title = $title.val() args.content = $content.val() var iframes = [] for (var i = 0; i < $iframes.length; i++) { var iframe = $iframes.eq(i).val() iframe && iframes.push(iframe) } args.iframe = iframes var modules = [] for (var i = 0; i < $modules.length; i++) { var module = $modules.eq(i).val() module && modules.push(module) } args.model = modules return args }).then(function (args) { $layout[0].targetDOM.infoAttribute = args $layout.removeClass('loadding') $layout.hide() }) }) function upload($files, type, cb) { var length = $files.length var rcount = 0 var result = [] Array.from($files).forEach(function (dFile) { console.log(dFile.files) var $file = $(dFile) var $image = $file.find('img') if ($file.hasClass('success')) { if ($file.attr('attr-thum')) { result.push($file.attr('attr-thum')) } else if ($image.attr('videoURL')) { result.push($image.attr('videoURL')) } else { result.push($image.attr('src')) } return success(++rcount); } else { dFile = $file.find('input')[0] } var file = dFile.files[0] if (!file) return success(++rcount); var formData = new FormData() formData.append('name', number) formData.append('dir', 'hot/' + type) formData.append('random', true) formData.append('file', file) $.ajax({ url: '/uploadFile', data: formData, dataType: 'json', type: 'POST', cache: false,//上传文件无需缓存 processData: false,//用于对data参数进行序列化处理 这里必须false contentType: false, //必须 success: function (rs) { if (rs.code === 200) { result.push(rs.content) } success(++rcount) } }) }) function success() { if (rcount === length) { cb(result) } } success() } })(); // 上传导览 function uploadGuide(urlData, guide) { var bytes = window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte //处理异常,将ascii码小于0的转换为大于0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } var blob = new Blob([ab], { type: 'image/jpeg' }); var formData = new FormData() formData.append('name', number) formData.append('dir', 'hot/images') formData.append('random', true) formData.append('file', blob) $.ajax({ url: '/uploadFile', data: formData, dataType: 'json', type: 'POST', cache: false,//上传文件无需缓存 processData: false,//用于对data参数进行序列化处理 这里必须false contentType: false, //必须 success: function (rs) { if (rs.code === 200) { var sid = rs.content.substring(rs.content.lastIndexOf('/') + 1, rs.content.lastIndexOf('.')) var thumbnail_signed_src = rs.content var args = JSON.parse("{" + guide + "}") args.sid = sid args.name = sid args.thumbnail_signed_src = thumbnail_signed_src args.metadata = JSON.stringify({ camera_mode: 0, camera_position: { x: args.metadata.camera_position[0], y: args.metadata.camera_position[1], z: args.metadata.camera_position[2] }, camera_quaternion: { x: args.metadata.camera_quaternion[3], y: args.metadata.camera_quaternion[0], z: args.metadata.camera_quaternion[1], w: args.metadata.camera_quaternion[2] }, ortho_zoom: -1, scan_id: args.metadata.scan_id, final_angle: 110, is_ortho: false }) console.log(args) var $li = $('
  • 删除
  • ') $li[0].data = args $('#guide-list').append($li) } } }) } // 热点 导览选项卡切换 (function () { var $heads = $('#oper-tabs a') var $bodys = $(Array.from($heads).map(function ($item) { return get$dom($item.getAttribute('show-tab')) }).join(',')) function get$dom(attr) { attr = '[data-tab="' + attr + '"]' return '.edit-bg' + attr + ',.edit-header' + attr } $heads.on('click', function () { var $active = $(get$dom($(this).attr('show-tab'))) $bodys.removeClass('active') $heads.removeClass('active') $(this).addClass('active') $active.addClass('active') }).eq(0).trigger('click'); })(); // 导览列表,并注册事件 (function () { var $list = $('#guide-list') $.ajax(g_Prefix + "data/" + window.number + "/someData.json" + "?" + Date.now(), { dataType: "json" }) .done(function (data) { var $lis = [] data.model.images.forEach(function (i) { if (i.thumbnail_signed_src) { var $li = $('
  • 删除
  • ') $li[0].data = i $lis.push($li) } }) $list.append($lis) $.ajax(g_Prefix + "data/" + window.number + "/data2.js" + "?" + Date.now(), { dataType: "json" }) .done(function (data2) { initInfo(data, data2) }) }) $list.on('click', function (ev) { var $seft = $(ev.target) if ($seft.attr('data-oper') === 'delete') { $seft.parent().remove(); } }).on('change', function (ev) { var $seft = $(ev.target) if ($seft.attr('data-oper') === 'change-name') { $seft.parent()[0].data.name = $seft.val() } }).on('keydown', function (ev) { ev.stopPropagation() }) })(); $('.edit-save button').on('click', function () { var guides = Array.from($('#guide-list li')).map(function (dom) { return dom.data }) var hots = {} Array.from($('.edit-hot-num > li')).forEach(function (dom) { hots[dom.hotAttribute.belongHot.sid] = { position: { x: dom.hotAttribute.position.x, y: dom.hotAttribute.position.y, z: dom.hotAttribute.position.z }, rotation: { x: dom.hotAttribute.rotation.x, y: dom.hotAttribute.rotation.y, z: dom.hotAttribute.rotation.z }, infoAttribute: dom.infoAttribute } }) var info = { name: $('#info-name').val(), summary: $('#info-summary').val(), backgroundMusic: $('#query-bgm').attr('href'), hoticon: JSON.parse($('#hoticon').val()), camera_start: $('#camera-start')[0].data, loadlogo: $("#loadlogo").is(':checked'), special: $("#g_specialScene").is(':checked'), vision_version : $("#twoData").is(':checked') ? "1.1.562.17209" : false } info.weixinDesc = $('#share-summary').val(); $.ajax({ method: 'POST', url: '/savesetting', data: { hots: hots, name: number, guides: guides, info: info }, success: function (data) { if (data.code === 200) { alert('修改成功') location.reload() } } }) }); // 其他信息初始化 function initInfo(data, data2) { var $options = $('#hoticon option'); var $loadlogo = $("#loadlogo"); var $g_specialScene = $("#g_specialScene"); var $twoData = $("#twoData"); $('#info-name').val(data.model.name) $('#info-summary').val(data.model.summary) $('#share-summary').val(data2.weixinDesc) for (var i = 0; i < $options.length; i++) { if ($options.eq(i).val() === JSON.stringify(data.hoticon)) { $options.eq(i).attr("selected", true); } } if (data.backgroundMusic) { $('#query-bgm').attr('href', '//' + data.backgroundMusic) $('#upload-bgm + p').html('替换音乐') } else { $('#query-bgm').hide() $('#upload-bgm + p').html('上传音乐') } $('#camera-start')[0].data = data.model.camera_start; //隐藏公司logo if (data.loadlogo) { $loadlogo[0].checked = true showLogo(); } //特殊大场景 if (data.special === "true" || data.model.special) { $g_specialScene[0].checked = true } //启动二代的数据 if (data.vision_version === "1.1.562.17209" || data.model.vision_version) { $twoData[0].checked = true } } // 音乐上传 $('#upload-bgm').on('change', function () { var file = this.files[0]; if (!/audio\/\w+/.test(file.type)) { alert("文件必须为音乐!"); return false; } var formData = new FormData() formData.append('name', number) formData.append('dir', 'audio') formData.append('random', true) formData.append('file', file) $.ajax({ url: '/uploadFile', data: formData, dataType: 'json', type: 'POST', cache: false,//上传文件无需缓存 processData: false,//用于对data参数进行序列化处理 这里必须false contentType: false, //必须 success: function (rs) { if (rs.code === 200) { $('#query-bgm').attr('href', rs.content) $('#upload-bgm + p').html('替换音乐') } } }) }) // 修改场景名称 添加初始位置 添加背景音乐 修改导览得名称 function getSeft(seft) { $('#camera-start').on('click', function () { var snap = JSON.parse("{" + seft.getSnapAngleInfo() + "}") this.data.camera.quaternion = snap.metadata.camera_quaternion this.data.pano.uuid = snap.metadata.scan_id }) } function editHotPanel() {//如果是编辑状态 $('#addHot').css("display", "block"); $('#addHot>div a:nth-child(1)').on("click", function () {//点击添加热点 g_HotStatus = "add"; $("#player").css("cursor", "cell"); }) $('#addHot>div a:nth-child(2)').on("click", function () {//点击输出新热点 var str = "" for (var i = 0; i < g_newHot.length; i++) { str += ('"' + g_newHot[i].sid + '":{ "position":[' + g_newHot[i].position + '], "rotation":[' + g_newHot[i].rotation + ']},\r'); } if (str == "") logData("没有添加新热点") else logData(str) }) $('#addHot>div a:nth-child(3)').on("click", function () {//点击截取视图 var ev = document.createEvent("MouseEvent");//"MouseEvent" ev.initMouseEvent("snapshotBegin", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null); window.dispatchEvent(ev); }) $('#addHot textarea').on("mousewheel", function (e) { e.stopPropagation(); }) window.logData = function (v) { $('#addHot textarea')[0].value += (v + "\r"); $('#addHot textarea')[0].scrollTop = $('#addHot textarea')[0].scrollHeight; } }