displayEntity() now only triggers a refresh of the world if asked, and the scale is only redrawn if the world's size has changedtags/v0.1.0
| @@ -22,6 +22,8 @@ let dragScaleHandle = null; | |||||
| let dragEntityScale = 1; | let dragEntityScale = 1; | ||||
| let dragEntityScaleHandle = null; | let dragEntityScaleHandle = null; | ||||
| let worldSizeDirty = false; | |||||
| math.createUnit("humans", { | math.createUnit("humans", { | ||||
| definition: "5.75 feet" | definition: "5.75 feet" | ||||
| }) | }) | ||||
| @@ -150,7 +152,7 @@ function updateEntityElement(entity, element) { | |||||
| } | } | ||||
| function updateSizes(dirtyOnly = false) { | function updateSizes(dirtyOnly = false) { | ||||
| drawScale(); | |||||
| drawScale(dirtyOnly); | |||||
| let ordered = Object.entries(entities); | let ordered = Object.entries(entities); | ||||
| @@ -178,7 +180,9 @@ function updateSizes(dirtyOnly = false) { | |||||
| } | } | ||||
| function drawScale() { | |||||
| function drawScale(ifDirty=false) { | |||||
| if (ifDirty && !worldSizeDirty) | |||||
| return; | |||||
| function drawTicks(/** @type {CanvasRenderingContext2D} */ ctx, pixelsPer, heightPer) { | function drawTicks(/** @type {CanvasRenderingContext2D} */ ctx, pixelsPer, heightPer) { | ||||
| let total = heightPer.clone(); | let total = heightPer.clone(); | ||||
| total.value = 0; | total.value = 0; | ||||
| @@ -913,7 +917,7 @@ function checkEntity(entity) { | |||||
| }); | }); | ||||
| } | } | ||||
| function displayEntity(entity, view, x, y, selectEntity=false) { | |||||
| function displayEntity(entity, view, x, y, selectEntity=false, refresh=false) { | |||||
| checkEntity(entity); | checkEntity(entity); | ||||
| const box = document.createElement("div"); | const box = document.createElement("div"); | ||||
| @@ -1005,7 +1009,8 @@ function displayEntity(entity, view, x, y, selectEntity=false) { | |||||
| entity.dirty = true; | entity.dirty = true; | ||||
| updateSizes(true); | |||||
| if (refresh) | |||||
| updateSizes(true); | |||||
| } | } | ||||
| @@ -1648,7 +1653,7 @@ function prepareEntities() { | |||||
| button.addEventListener("click", e => { | button.addEventListener("click", e => { | ||||
| const newEntity = entityList[select.value].constructor() | const newEntity = entityList[select.value].constructor() | ||||
| displayEntity(newEntity, newEntity.defaultView, 0.5, 1, true); | |||||
| displayEntity(newEntity, newEntity.defaultView, 0.5, 1, true, true); | |||||
| }); | }); | ||||
| const categoryOption = document.createElement("option"); | const categoryOption = document.createElement("option"); | ||||
| @@ -1777,6 +1782,7 @@ function updateWorldHeight() { | |||||
| } | } | ||||
| function setWorldHeight(oldHeight, newHeight) { | function setWorldHeight(oldHeight, newHeight) { | ||||
| worldSizeDirty = true; | |||||
| config.height = newHeight.to(document.querySelector("#options-height-unit").value) | config.height = newHeight.to(document.querySelector("#options-height-unit").value) | ||||
| const unit = document.querySelector("#options-height-unit").value; | const unit = document.querySelector("#options-height-unit").value; | ||||
| @@ -1110,7 +1110,8 @@ const attributionData = { | |||||
| { | { | ||||
| prefix: "./media/buildings/roads/", | prefix: "./media/buildings/roads/", | ||||
| files: [ | files: [ | ||||
| { name: "four-lane-highway.svg", source: null } | |||||
| { name: "four-lane-highway.svg", source: null }, | |||||
| { name: "sidewalk.svg", source: null }, | |||||
| ], | ], | ||||
| authors: [ | authors: [ | ||||
| "chemicalcrux" | "chemicalcrux" | ||||
| @@ -8322,7 +8323,9 @@ const attributionData = { | |||||
| { name: "french-fry.svg", source: null }, | { name: "french-fry.svg", source: null }, | ||||
| { name: "chicken-nugget.svg", source: null }, | { name: "chicken-nugget.svg", source: null }, | ||||
| { name: "onion-ring.svg", source: null }, | { name: "onion-ring.svg", source: null }, | ||||
| { name: "tater-tor.svg", source: null } | |||||
| { name: "tater-tot.svg", source: null }, | |||||
| { name: "bagel.svg", source: null }, | |||||
| { name: "donut.svg", source: null }, | |||||
| ], | ], | ||||
| authors: [ | authors: [ | ||||
| "chemicalcrux" | "chemicalcrux" | ||||
| @@ -8468,7 +8471,7 @@ const attributionData = { | |||||
| ] | ] | ||||
| }, | }, | ||||
| { | { | ||||
| prefix: "./media/objects/game-pieces/", | |||||
| prefix: "./media/objects/chess-pieces/", | |||||
| files: [ | files: [ | ||||
| { name: "chess_king.svg", source: "https://svgsilh.com/image/3413429.html" }, | { name: "chess_king.svg", source: "https://svgsilh.com/image/3413429.html" }, | ||||
| { name: "chess_queen.svg", source: "https://svgsilh.com/image/3413429.html" }, | { name: "chess_queen.svg", source: "https://svgsilh.com/image/3413429.html" }, | ||||
| @@ -8515,6 +8518,15 @@ const attributionData = { | |||||
| }, | }, | ||||
| { | { | ||||
| prefix: "./media/objects/plants/", | prefix: "./media/objects/plants/", | ||||
| files: [ | |||||
| { name: "grass.svg", source: "https://www.freepik.com/free-vector/grass-border-silhouette-realistic-design_4904217.htm#page=1&query=grass%20silhouette&position=0" } | |||||
| ], | |||||
| authors: [ | |||||
| "pikisuperstar" | |||||
| ] | |||||
| }, | |||||
| { | |||||
| prefix: "./media/objects/trees/", | |||||
| files: [ | files: [ | ||||
| { name: "sycamore-tree.svg", source: "https://www.dimensions.guide/element/sycamore-tree" } | { name: "sycamore-tree.svg", source: "https://www.dimensions.guide/element/sycamore-tree" } | ||||
| ], | ], | ||||
| @@ -11393,6 +11405,10 @@ const attributionData = { | |||||
| "name": "RulerOfTheRainforest", | "name": "RulerOfTheRainforest", | ||||
| "url": "https://www.furaffinity.net/user/ruleroftherainforest", | "url": "https://www.furaffinity.net/user/ruleroftherainforest", | ||||
| }, | }, | ||||
| "pikisuperstar": { | |||||
| "name": "pikisuperstar", | |||||
| "url": "https://www.freepik.com/pikisuperstar", | |||||
| }, | |||||
| } | } | ||||
| } | } | ||||
| @@ -280,8 +280,6 @@ function makeVehicleGroup(info, name, prefix) { | |||||
| }); | }); | ||||
| }); | }); | ||||
| console.log(sides) | |||||
| const entity = makeMultiVehicle(name, sides); | const entity = makeMultiVehicle(name, sides); | ||||
| entity.sizes.push({ | entity.sizes.push({ | ||||